/* ===========================================================
   L2I Buddy — concierge widget styling. Reuses the site tokens
   (--ink/--graphite/--bone/--ox …) so it themes with the studio.
   =========================================================== */
.l2i-fabwrap { position: fixed; right: 18px; bottom: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 200; }
.l2i-fab {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 12px 14px;
  background: var(--bone, #ECE6D9); color: var(--ink, #0B0B0C);
  border-radius: 999px; font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  box-shadow: 0 12px 34px rgba(0,0,0,.5); cursor: pointer;
  transition: transform .25s var(--ease, cubic-bezier(.2,.7,.3,1)), box-shadow .25s, opacity .2s;
}
.l2i-fab svg { width: 21px; height: 21px; }
.l2i-fab:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.l2i-fab .l2i-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ox, #9A3A30);
  box-shadow: 0 0 0 0 rgba(154,58,48,.6); animation: l2iPulse 2.4s infinite;
}
@keyframes l2iPulse { 0%{box-shadow:0 0 0 0 rgba(154,58,48,.55)} 70%{box-shadow:0 0 0 9px rgba(154,58,48,0)} 100%{box-shadow:0 0 0 0 rgba(154,58,48,0)} }
.l2i-fab .l2i-dot--away { background: var(--wash, #9A9AA2); animation: none; box-shadow: none; }
.l2i-fabwrap.l2i-hide { opacity: 0; pointer-events: none; transform: scale(.9); }

/* move the install hint so it doesn't sit under the FAB */
.install { bottom: 86px !important; bottom: calc(86px + env(safe-area-inset-bottom)) !important; }

.l2i-panelwrap { position: fixed; inset: 0; z-index: 320; }
.l2i-panelwrap[hidden] { display: none; }
.l2i-backdrop { position: absolute; inset: 0; background: rgba(7,7,8,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .22s; }
.l2i-panelwrap.l2i-show .l2i-backdrop { opacity: 1; }

.l2i-panel {
  position: absolute; right: 18px; bottom: 18px; width: min(390px, calc(100vw - 28px));
  height: min(640px, calc(100vh - 36px));
  height: min(640px, calc(100dvh - 36px)); max-height: 100dvh; display: flex; flex-direction: column;
  background: var(--graphite, #121215); color: var(--bone, #ECE6D9);
  border: 1px solid var(--line-2, #2c2c33); border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  transform: translateY(16px) scale(.98); opacity: 0;
  transition: transform .26s var(--ease, cubic-bezier(.2,.7,.3,1)), opacity .26s;
}
.l2i-panelwrap.l2i-show .l2i-panel { transform: none; opacity: 1; }

.l2i-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  border-bottom: 1px solid var(--line, #1d1d22);
  background: radial-gradient(120% 160% at 0% 0%, rgba(154,58,48,.16), transparent 60%), var(--graphite-2, #17171b);
}
.l2i-emb { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  color: var(--ox, #9A3A30); background: rgba(154,58,48,.12); border: 1px solid rgba(154,58,48,.35); border-radius: 11px; }
.l2i-emb svg { width: 20px; height: 20px; }
.l2i-id { display: flex; flex-direction: column; line-height: 1.15; margin-right: auto; min-width: 0; }
.l2i-id b { font-size: .98rem; }
.l2i-sub { font-family: var(--f-mono, monospace); font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wash, #9A9AA2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l2i-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-family: var(--f-mono, monospace); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.l2i-status__d { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.l2i-status[data-st="online"] { color: var(--ok, #3FB07A); }
.l2i-status[data-st="online"] .l2i-status__d { background: var(--ok, #3FB07A); box-shadow: 0 0 0 0 rgba(63,176,122,.6); animation: l2iPulse2 2.4s infinite; }
.l2i-status[data-st="away"] { color: var(--wash, #9A9AA2); }
.l2i-status[data-st="away"] .l2i-status__d { background: var(--wash, #9A9AA2); }
@keyframes l2iPulse2 { 0%{box-shadow:0 0 0 0 rgba(63,176,122,.5)} 70%{box-shadow:0 0 0 6px rgba(63,176,122,0)} 100%{box-shadow:0 0 0 0 rgba(63,176,122,0)} }
@media (prefers-reduced-motion: reduce) { .l2i-status__d, .l2i-fab .l2i-dot { animation: none !important; } }
.l2i-langwrap { position: relative; flex: 0 0 auto; }
.l2i-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* visitor-type segmented control (Customer / Artist) — only rendered when the KB
   defines both menus. Sits between the title block and the language selector. */
.l2i-vtabs { flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--ink, #0B0B0C); border: 1px solid var(--line-2, #2c2c33); border-radius: 999px; }
.l2i-vtab {
  font-family: var(--f-mono, monospace); font-size: .58rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 5px 9px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  color: var(--wash, #9A9AA2); background: transparent; transition: .18s;
}
.l2i-vtab:hover { color: var(--bone-2, #cfc7b6); }
.l2i-vtab.is-active { color: var(--bone, #ECE6D9); background: var(--ox, #9A3A30); }
.l2i-vtab.is-active:hover { color: #fff; }

.l2i-lang {
  appearance: none; -webkit-appearance: none; max-width: 116px;
  background: var(--ink, #0B0B0C); color: var(--bone, #ECE6D9);
  border: 1px solid var(--line-2, #2c2c33); border-radius: 9px; padding: 7px 24px 7px 10px;
  font-size: .8rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%239A9AA2' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.l2i-xbtn { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--wash, #9A9AA2); border: 1px solid var(--line, #1d1d22); border-radius: 9px; cursor: pointer; transition: .2s; }
.l2i-xbtn:hover { color: var(--bone, #ECE6D9); border-color: var(--line-2, #2c2c33); }
.l2i-xbtn svg { width: 16px; height: 16px; }

.l2i-msgs { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.l2i-msgs[dir="rtl"] { text-align: right; }
.l2i-msg { max-width: 86%; padding: 11px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.5; word-wrap: break-word; }
.l2i-msg.bot { align-self: flex-start; background: var(--graphite-2, #17171b); border: 1px solid var(--line, #1d1d22); border-bottom-left-radius: 5px; }
.l2i-msg.user { align-self: flex-end; background: var(--bone, #ECE6D9); color: var(--ink, #0B0B0C); border-bottom-right-radius: 5px; font-weight: 500; }
.l2i-msgs[dir="rtl"] .l2i-msg.bot { align-self: flex-end; border-bottom-left-radius: 14px; border-bottom-right-radius: 5px; }
.l2i-msgs[dir="rtl"] .l2i-msg.user { align-self: flex-start; border-bottom-right-radius: 14px; border-bottom-left-radius: 5px; }
.l2i-msg.bot b { color: var(--bone, #ECE6D9); }
.l2i-msg.l2i-studio { border-color: rgba(212,104,92,.5); background: rgba(154,58,48,.10); }
.l2i-studio__tag { display: block; font-family: var(--f-mono, monospace); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ox-2, #D4685C); margin-bottom: 3px; }
.l2i-dim { display: block; margin-top: 6px; color: var(--wash, #9A9AA2); font-size: .78rem; }
.l2i-msg a { color: var(--ox-2, #c2685e); text-decoration: underline; }

.l2i-quick { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 96%; margin-top: -2px; }
.l2i-chip {
  font-family: var(--f-mono, monospace); font-size: .74rem; letter-spacing: .02em;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-2, #2c2c33);
  color: var(--bone-2, #cfc7b6); background: var(--ink, #0B0B0C); cursor: pointer; transition: .2s; text-decoration: none; display: inline-block;
}
.l2i-chip:hover { color: var(--bone, #ECE6D9); border-color: var(--ox-2, #9A3A30); }
.l2i-chip--cta { background: var(--ox, #9A3A30); border-color: var(--ox, #9A3A30); color: #fff; }
.l2i-chip--cta:hover { color: #fff; filter: brightness(1.12); }

/* sign-in card inside the chat */
.l2i-auth { display: flex; flex-direction: column; gap: 9px; margin-top: 11px; }
.l2i-authbtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 14px; border-radius: 11px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: .2s; }
.l2i-authgoogle { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.l2i-authgoogle:hover { filter: brightness(.97); }
.l2i-authprimary { background: var(--ox, #9A3A30); color: #fff; border: 1px solid var(--ox, #9A3A30); }
.l2i-authprimary:hover { filter: brightness(1.12); }
.l2i-author { display: flex; align-items: center; gap: 10px; color: var(--wash, #9A9AA2); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.l2i-author::before, .l2i-author::after { content: ""; flex: 1; height: 1px; background: var(--line-2, #2c2c33); }
.l2i-authin { background: var(--ink, #0B0B0C); color: var(--bone, #ECE6D9); border: 1px solid var(--line-2, #2c2c33); border-radius: 10px; padding: 11px 13px; font-size: .9rem; font-family: inherit; }
.l2i-authin:focus { outline: none; border-color: var(--ox-2, #D4685C); }
.l2i-authtoggle { background: none; border: none; color: var(--ox-2, #D4685C); font-size: .8rem; cursor: pointer; text-decoration: underline; padding: 2px; align-self: center; }
.l2i-autherr { color: #e08; font-size: .8rem; margin: 2px 0 0; }
.l2i-msgs[dir="rtl"] .l2i-auth { text-align: right; }

.l2i-consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; background: var(--ink, #0B0B0C); border: 1px solid var(--line, #1d1d22); border-radius: 10px; font-size: .82rem; color: var(--wash, #9A9AA2); cursor: pointer; }
.l2i-consent input { margin-top: 3px; accent-color: var(--ox, #9A3A30); flex: 0 0 auto; width: 16px; height: 16px; }
.l2i-review { margin-top: 9px; display: grid; gap: 6px; }
.l2i-rrow { display: grid; grid-template-columns: 78px 1fr; gap: 10px; font-size: .85rem; }
.l2i-rrow span { font-family: var(--f-mono, monospace); font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--wash, #9A9AA2); padding-top: 2px; }
.l2i-rrow b { font-weight: 600; }

/* slot picker (booking calendar) */
.l2i-slots { margin-top: 11px; display: grid; gap: 11px; }
.l2i-slotday { display: grid; gap: 6px; }
.l2i-slotday__d { font-family: var(--f-mono, monospace); font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--wash, #9A9AA2); }
.l2i-slotrow { display: flex; flex-wrap: wrap; gap: 7px; }
.l2i-slot { padding: 7px 12px; font-size: .78rem; }
.l2i-slot:hover { background: var(--ox, #9A3A30); border-color: var(--ox, #9A3A30); color: #fff; }
.l2i-msgs[dir="rtl"] .l2i-slotrow { justify-content: flex-end; }

.l2i-foot { display: flex; gap: 8px; padding: 11px; padding-bottom: calc(11px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line, #1d1d22); background: var(--graphite-2, #17171b); }
.l2i-foot input {
  flex: 1 1 auto; background: var(--ink, #0B0B0C); color: var(--bone, #ECE6D9);
  border: 1px solid var(--line-2, #2c2c33); border-radius: 11px; padding: 11px 13px; font-size: .92rem; font-family: inherit;
}
.l2i-foot input:focus { outline: none; border-color: var(--ox-2, #9A3A30); }
.l2i-send { flex: 0 0 auto; width: 44px; border-radius: 11px; background: var(--bone, #ECE6D9); color: var(--ink, #0B0B0C); display: grid; place-items: center; cursor: pointer; transition: .2s; }
.l2i-send:hover { filter: brightness(1.05); }
.l2i-send svg { width: 19px; height: 19px; }

@media (max-width: 480px) {
  .l2i-panel { right: 8px; left: 8px; bottom: 8px; width: auto;
    height: min(86vh, calc(100vh - 16px)); height: min(86dvh, calc(100dvh - 16px)); border-radius: 16px; }
  .l2i-fabwrap { right: 14px; bottom: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .l2i-fab span { display: none; }
  .l2i-fab { padding: 14px; }
  /* >=16px prevents iOS zoom-on-focus inside the fixed panel */
  .l2i-foot input, .l2i-authin, .l2i-lang { font-size: 16px; }
  /* let the visitor tabs drop to their own full-width row under the title */
  .l2i-head { flex-wrap: wrap; row-gap: 9px; }
  .l2i-vtabs { order: 3; flex-basis: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .l2i-fab, .l2i-panel, .l2i-backdrop { transition: none; }
  .l2i-fab .l2i-dot { animation: none; }
}