/* Handmade Chat App — styled after the Handmade Italia storefront.
   Warm ivory paper, espresso ink, bronze and gold accents, Fraunces + Inter,
   hairline borders, black pill buttons. Editorial and quiet. */
:root {
  --paper: #f4efe6;
  --paper-2: #ece4d6;
  --card: #fbf8f2;
  --ink: #1f1a15;
  --ink-2: #3a332b;
  --ink-soft: #7c7266;
  --line: #e2d9c9;
  --bronze: #a67c52;
  --bronze-d: #8a6440;
  --gold: #c6a15b;
  --blush: #d8a48f;
  --noir: #171310;
  --cream: #efe7d8;
  --olive: #7a8a5a;
  --danger: #a8402f;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --shadow: 0 18px 40px -28px rgba(31, 26, 21, .35);
  --shadow-soft: 0 1px 2px rgba(31, 26, 21, .05), 0 10px 26px -20px rgba(31, 26, 21, .3);
  --r: 18px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 15.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--bronze-d); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- logo and labels ------------------------------------------------ */
.logo { display: inline-flex; align-items: baseline; text-decoration: none; user-select: none; }
.logo__word { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: -.3px; color: var(--ink); }
/* The dot hops now and then (physics in hm.js). A gold copy of the glyph sits on top and fades in
   while it is airborne, since a gradient cannot transition from a plain colour. */
/* The glyph box is 0.2em x 1.5em with the dot centred at ~52% / 70% (measured on Fraunces 600), so the
   gold is a radial gradient centred there — a shiny bead, cream highlight top-left, bronze rim. */
.logo__dot { position: relative; display: inline-block; line-height: 1.5; color: var(--bronze); transform-origin: 52% 75%; transition: color .3s var(--ease); will-change: transform; }
.logo__dot::after { content: '.'; position: absolute; inset: 0; opacity: 0; color: transparent; -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at 44% 67.5%, #fff4d8 0, #ecd6a0 .022em, var(--gold) .05em, var(--bronze) .085em);
  -webkit-background-clip: text; background-clip: text; transition: opacity .3s var(--ease); }
/* The glow is its own soft circle behind the dot, fading to fully transparent. (A drop-shadow filter on
   the gradient text made Chrome paint a visible rectangle around the dot.) */
.logo__dot::before { content: ''; position: absolute; left: 52%; top: 70%; width: .55em; height: .55em; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(236, 214, 160, .75) 0, rgba(198, 161, 91, .38) 32%, rgba(198, 161, 91, 0) 68%); opacity: 0; transition: opacity .3s var(--ease); }
.logo__dot.gold { color: transparent; }
.logo__dot.gold::after, .logo__dot.gold::before { opacity: 1; }
.logo.small .logo__word { font-size: 22px; }
.label { font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); display: inline-flex; align-items: center; gap: 10px; }
.label::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6; }

/* ---- beads: soft tinted circles, ink for the slot ------------------- */
.bead {
  --bead: hsl(20 45% 55%);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--bead) 22%, var(--card)); color: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--bead) 35%, var(--line));
  font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: 0;
}
.bead.hdr { width: 44px; height: 44px; font-size: 16px; background: var(--noir); color: var(--cream); border-color: var(--noir); }
.bead.sm { width: 28px; height: 28px; font-size: 12px; }

/* ---- app frame ------------------------------------------------------ */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 760px; margin: 0 auto; background: var(--paper); }
.topbar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; min-height: 68px; background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.topbar .who { display: flex; flex-direction: column; gap: 3px; margin-left: auto; text-align: right; min-width: 0; }
.topbar .who .name { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .who .sub { font-size: 12.5px; color: var(--ink-soft); }
.topbar .who.left { text-align: left; margin-left: 0; flex: 1; }
.topbar .who.left .name { display: flex; align-items: center; gap: 10px; }
/* rename (CSR panel): pencil after the name, then the name becomes an input */
.pencil { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; opacity: .55; transition: opacity .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.topbar .who.left .name:hover .pencil, .pencil:focus-visible { opacity: 1; }
.pencil:hover { background: var(--paper-2); color: var(--bronze-d); opacity: 1; }
.rename-in { flex: 1; min-width: 0; max-width: 320px; font: 600 18px/1.2 var(--serif); letter-spacing: -.2px; color: var(--ink); padding: 3px 10px; margin: -4px 0; border-radius: 8px; border: 1px solid var(--gold); background: var(--card); outline: none; box-shadow: 0 0 0 3px rgba(198, 161, 91, .18); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #cfc5b5; vertical-align: middle; margin-right: 6px; flex: none; }
.dot.on { background: var(--olive); box-shadow: 0 0 0 3px rgba(122, 138, 90, .18); }

@media (max-width: 480px) {
  .topbar { gap: 10px; padding: 10px 14px; min-height: 64px; }
  .logo__word { font-size: 22px; }
  .topbar .who .name { font-size: 16px; }
  .topbar .who .sub.label { font-size: 9.5px; letter-spacing: .16em; }
  .topbar .who .sub.label::before { display: none; }
  .bead.hdr { width: 40px; height: 40px; font-size: 15px; }
}
.bar { padding: 9px 16px; font-size: 13px; text-align: center; letter-spacing: .01em; }
.bar.warn { background: #f3e5c4; color: #6b4a06; }
.bar.danger { background: #f1d5cf; color: #7a2419; }
.bar.info { background: var(--paper-2); color: var(--ink-soft); }
/* "stay or come back" bar on the customer page */
.bar.stay { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px 8px 16px; background: linear-gradient(180deg, #fffaf0, var(--paper-2)); color: var(--ink-2); border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; }
.bar.stay .stay-txt { flex: 1; min-width: 0; }
.bar.stay .stay-btn { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gold); background: var(--card); color: var(--bronze-d); font-weight: 600; font-size: 12px; white-space: nowrap; cursor: pointer; }
.bar.stay .stay-btn:hover { background: #fff4d8; }
.bar.stay .stay-x { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft); font-size: 13px; cursor: pointer; }
.bar.stay .stay-x:hover { background: var(--paper-2); }
.bar[hidden] { display: none; }

/* ---- message list --------------------------------------------------- */
.list { flex: 1; overflow-y: auto; padding: 18px 20px 12px; scroll-behavior: smooth; overscroll-behavior: contain; }
.day { display: flex; justify-content: center; margin: 14px 0 12px; pointer-events: none; }
.day span { font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; box-shadow: 0 0 0 5px var(--paper); }
.msg { display: flex; flex-direction: column; max-width: 80%; margin: 0 0 10px; }
.msg.me { align-self: flex-end; align-items: flex-end; margin-left: auto; }
.msg.them { align-self: flex-start; align-items: flex-start; }
.msg.sys { align-self: center; align-items: center; max-width: 92%; }
.bubble { position: relative; padding: 12px 16px; border-radius: var(--r); font-size: 15.5px; line-height: 1.48; word-wrap: break-word; overflow-wrap: anywhere; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.msg.me .bubble { background: var(--noir); color: var(--cream); border-color: var(--noir); border-bottom-right-radius: 5px; }
.msg.me .bubble a { color: var(--gold); }
.msg.them .bubble { border-bottom-left-radius: 5px; }
.msg.sys .bubble { background: var(--paper-2); border-color: transparent; box-shadow: none; color: var(--ink-2); font-size: 14px; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 15px; }
.msg .time { font-size: 11px; color: var(--ink-soft); margin: 5px 6px 0; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
/* staff-only system note (the admin renamed the customer): a bronze card, never a customer-facing bubble */
.msg.sys.note { max-width: 92%; }
.msg.sys.note .bubble { background: #fbf4e6; border: 1px dashed var(--gold); color: var(--ink-2); font-family: var(--sans); font-weight: 500; font-size: 14px; text-align: left; padding: 10px 14px; }
.msg.sys.note .note-lbl, .msg.sys.auto .note-lbl { display: block; font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-d); margin-bottom: 5px; }
/* "rinominato dall'admin" until the CSR opens the chat */
.tag.adm { background: #fbf4e6; border-color: var(--gold); color: var(--bronze-d); }
.crow .l1 .tag.adm { flex: none; }
/* KIOSK ✓: a new lead that completed the kiosk (2026-10-07) */
.tag.kiosk { background: #fbf4e6; border-color: var(--gold); color: var(--bronze-d); letter-spacing: .06em; }
.crow .l1 .tag.kiosk { flex: none; }
.crow .l1:has(.tag.kiosk) { flex-wrap: wrap; row-gap: 3px; }   /* a phone-number row has no room for one more tag: wrap instead of clipping it */
.crow .l2 { grid-column: 2; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -1px; }
/* "modificato" before the time; a deleted row the admin can still read is a struck-through tombstone */
.edited { font-style: italic; margin-right: 6px; letter-spacing: .02em; }
.msg.me .bubble .meta .edited { color: inherit; }
.msg.del .bubble { background: var(--paper-2); color: var(--ink-soft); border-color: transparent; box-shadow: none; }
.msg.del .del-lbl { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--danger); margin-bottom: 5px; }
.msg.del s { text-decoration-color: rgba(31, 26, 21, .45); }
.msg.del s a { color: var(--ink-soft); }
/* ⋯ on my own bubbles (hover on desktop); the open menu floats at the pointer */
.msg.me { position: relative; }
.m-more { position: absolute; left: -34px; top: 6px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s var(--ease), background .25s var(--ease); }
.msg.me:hover .m-more, .msg.me.menu-open .m-more, .m-more:focus-visible { opacity: 1; }
.m-more:hover { background: var(--paper-2); color: var(--ink); }
@media (hover: none) { .m-more { display: none; } .msg.me .bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.msg.menu-open .bubble { box-shadow: 0 0 0 3px rgba(198, 161, 91, .35); }
.msg-menu { position: fixed; z-index: 70; min-width: 168px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.msg-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; font-size: 14.5px; font-weight: 500; transition: background .2s var(--ease); }
.msg-menu button i { font-style: normal; width: 18px; text-align: center; color: var(--ink-soft); }
.msg-menu button:hover, .msg-menu button:focus-visible { background: var(--paper-2); outline: none; }
.msg-menu button.danger { color: var(--danger); }
.msg-menu button.danger i { color: var(--danger); }
.bubble .ph img { display: block; max-width: min(320px, 70vw); max-height: 360px; border-radius: 12px; }
.bubble:has(.ph) { padding: 5px; }

/* ---- photo bubble (Telegram-style): photo, caption, time + ticks inside ---- */
.bubble.media { padding: 4px; width: min(300px, 68vw); }
.bubble.media .ph { display: block; }
.bubble.media .ph img { width: 100%; max-width: none; height: auto; max-height: 420px; object-fit: cover; border-radius: 14px; }
.bubble.media .cap { padding: 8px 10px 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.bubble .meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; padding: 3px 8px 4px; font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.msg.me .bubble .meta { color: rgba(239, 231, 216, .65); }
.bubble .meta.overlay { position: absolute; right: 12px; bottom: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(23, 19, 16, .55); color: #fff; backdrop-filter: blur(4px); }

/* ---- ticks: one grey check = sent, two gold checks = seen ----------------- */
.tk { display: inline-flex; align-items: center; margin-left: 3px; vertical-align: -1px; color: var(--ink-soft); }
.tk .tk2 { display: none; }
.msg.seen .tk .tk1 { display: none; }
.msg.seen .tk .tk2 { display: inline; }
.msg.seen .tk { color: var(--bronze); }
.msg.me .bubble .meta .tk { color: rgba(239, 231, 216, .65); }
.msg.me.seen .bubble .meta .tk { color: var(--gold); }
.msg.me.seen .bubble .meta.overlay .tk { color: #ecd6a0; }
.seen-label { margin: 2px 6px 0; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }

/* ---- typing dots ----------------------------------------------------------- */
.bubble.typing { display: inline-flex; align-items: center; gap: 5px; padding: 15px 16px; }
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); opacity: .45; animation: typingDot 1.2s ease-in-out infinite; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; }
.bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
.crow .pv.typing-pv { color: var(--bronze); font-style: italic; font-weight: 500; }

/* ---- photo preview sheet: add a caption before sending ---------------------- */
.c-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(23, 19, 16, .55); }
.c-sheet-card { width: min(440px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
.c-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; font-family: var(--serif); font-size: 17px; }
.c-sheet-img { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; background: var(--paper-2); }
.c-sheet-img img { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; }
.c-sheet-row { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.c-sheet-row .c-pill textarea { max-height: 120px; font: inherit; }
/* confirm sheet: one question, two buttons */
.c-sheet-card.confirm { width: min(360px, 100%); }
.c-sheet-card.confirm .c-sheet-head { padding: 22px 22px 6px; justify-content: center; text-align: center; font-size: 19px; }
.c-sheet-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); }
.c-sheet-actions .btn { flex: 1; justify-content: center; }
.c-sheet-actions .btn.del { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (max-width: 480px) { .c-sheet-card.confirm { border-radius: 18px; margin-bottom: 16px; } }
@media (max-width: 480px) {
  .c-sheet { align-items: flex-end; padding: 0; }
  .c-sheet-card { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
}

/* ---- voice player --------------------------------------------------- */
.voice { display: flex; align-items: center; gap: 12px; min-width: min(260px, 64vw); padding: 2px 0; }
.voice audio { display: none; }
.v-play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); display: inline-flex; align-items: center; justify-content: center; }
.v-play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 6.5px 0 6.5px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.playing .v-play::before { width: 4px; height: 12px; border: 0; margin: 0; background: currentColor; box-shadow: 7px 0 0 currentColor; transform: translateX(-3.5px); }
.msg.me .v-play { background: var(--cream); color: var(--noir); border-color: var(--cream); }
.v-bars { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 30px; cursor: pointer; }
.v-bars i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--line); transition: background .2s; }
.v-bars i.on { background: var(--bronze); }
.msg.me .v-bars i { background: rgba(239, 231, 216, .28); }
.msg.me .v-bars i.on { background: var(--gold); }
.v-time { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 34px; text-align: right; }
.msg.me .v-time { color: var(--cream); opacity: .8; }
.voice.err .v-time::after { content: ' · non riproducibile'; }

/* ---- composer ------------------------------------------------------- */
.composer { position: relative; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.composer .c-row { display: flex; align-items: flex-end; gap: 6px; }
/* the text pill: textarea + the emoji button inside it, at the right edge */
.c-pill { flex: 1; min-width: 0; display: flex; align-items: flex-end; border-radius: 24px; border: 1px solid var(--line); background: var(--card); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.c-pill:focus-within { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(166, 124, 82, .14); }
.c-pill textarea { flex: 1; min-width: 0; resize: none; min-height: 44px; max-height: 140px; padding: 11px 4px 11px 18px; border: 0; border-radius: 24px 0 0 24px; background: transparent; outline: none; line-height: 1.35; box-shadow: none; }
.c-emoji { flex: none; width: 42px; height: 44px; border: 0; border-radius: 0 24px 24px 0; background: transparent; color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; transition: color .3s var(--ease); }
.c-emoji:hover, .c-emoji.on { color: var(--bronze-d); }
.c-emoji.on svg { transform: scale(1.08); }
/* edit mode: the bar above the box names what is being edited; photo and mic step aside */
.c-edit { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 6px 4px 6px 12px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 3px; font-size: 13px; }
.c-edit .c-edit-ic { color: var(--bronze); font-size: 15px; }
.c-edit .c-edit-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.c-edit .c-edit-lbl { color: var(--bronze-d); font-weight: 600; font-size: 12px; letter-spacing: .04em; }
.c-edit .c-edit-prev { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-edit .c-edit-x { width: 34px; height: 34px; color: var(--ink-soft); }
.composer.editing .c-photo, .composer.editing .c-mic { display: none; }
/* emoji panel: above the composer, anchored right on desktop, full width on phones */
.emo { position: absolute; right: 12px; bottom: calc(100% + 4px); z-index: 20; width: min(360px, calc(100% - 24px)); height: 280px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.emo-tabs { display: flex; gap: 2px; padding: 6px 8px 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: none; }
.emo-tabs button { flex: 1 0 auto; min-width: 34px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 18px; line-height: 1; opacity: .6; transition: background .3s var(--ease), opacity .3s var(--ease); }
.emo-tabs button:hover { background: var(--paper-2); opacity: 1; }
.emo-tabs button.on { background: var(--paper-2); opacity: 1; box-shadow: inset 0 -2px 0 var(--bronze); }
.emo-body { position: relative; flex: 1; overflow-y: auto; padding: 4px 8px 10px; scrollbar-width: thin; }
.emo-cat h6 { margin: 8px 6px 2px; font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
.emo-grid button { height: 38px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; padding: 0; transition: background .2s var(--ease), transform .3s var(--ease); }
.emo-grid button:hover { background: var(--paper-2); transform: scale(1.12); }
@media (max-width: 480px) {
  .emo { left: 0; right: 0; width: auto; bottom: 100%; border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; }
  /* phone: tighter round buttons and emoji button so "Scrivi un messaggio" fits on one line */
  .composer { padding-left: 8px; padding-right: 8px; }
  .composer .c-row { gap: 4px; }
  .composer .c-btn { width: 42px; height: 42px; }
  .c-pill textarea { padding-left: 14px; min-height: 42px; }
  .c-emoji { width: 36px; height: 42px; }
}
/* inside the photo sheet the panel sits in the card between the picture and the caption box */
.c-sheet-card > .emo { position: static; width: auto; height: 240px; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; flex: none; }
.c-btn { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); transition: background .35s var(--ease), color .35s var(--ease); }
.c-btn:hover { background: var(--paper-2); }
/* Send: the storefront's gold shimmer (same stops as the Handmade Italia hero word) plus a soft glow. */
.c-btn.c-send {
  color: var(--noir);
  background-image: linear-gradient(100deg, var(--bronze) 0%, var(--gold) 18%, #ecd6a0 34%, #fff4d8 50%, #ecd6a0 66%, var(--gold) 82%, var(--bronze) 100%);
  background-size: 200% auto;
  box-shadow: 0 0 0 1px rgba(166, 124, 82, .35), 0 4px 16px rgba(198, 161, 91, .45);
  animation: shimmer 6.5s linear infinite, goldGlow 3.2s ease-in-out infinite;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.c-btn.c-send:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(166, 124, 82, .45), 0 6px 24px rgba(198, 161, 91, .7); }
.c-btn.c-send:active { transform: scale(.94); }
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes goldGlow { 50% { box-shadow: 0 0 0 1px rgba(166, 124, 82, .45), 0 6px 26px rgba(198, 161, 91, .75); } }
.c-btn.c-stop { background: var(--olive); color: #fff; }
.c-btn.c-cancel { color: var(--danger); }
.composer.busy .c-send { opacity: .5; pointer-events: none; }
.composer.disabled { opacity: .55; pointer-events: none; }
.composer.recording .c-row { display: none; }
.c-rec { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 4px 0 12px; }
.c-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.c-timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.c-hint { flex: 1; font-size: 13px; color: var(--ink-soft); }
.c-error { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 4px 4px 4px 14px; border-radius: 3px; background: #f1d5cf; color: #7a2419; font-size: 13.5px; }
.c-error .c-error-text { flex: 1; cursor: pointer; padding: 6px 0; }
.c-error .c-dismiss { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #7a2419; display: inline-flex; align-items: center; justify-content: center; }

/* ---- generic controls (storefront buttons and chips) --------------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 3px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: .02em; transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.btn::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); transition: left .7s var(--ease); pointer-events: none; }
.btn:hover::after { left: 160%; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--noir); border-color: var(--noir); color: var(--cream); }
.btn.primary:hover { background: var(--ink-2); }
.btn.danger { color: var(--danger); border-color: var(--line); }
.btn.sm { padding: 8px 14px; font-size: 13px; border-color: var(--line); }
.btn.ghost { border-color: transparent; }
.btn:disabled { opacity: .5; pointer-events: none; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field > span { font-weight: 600; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.input, select.input, textarea.input { width: 100%; padding: 12px 14px; border-radius: 3px; border: 1px solid var(--line); background: var(--card); outline: none; transition: border-color .3s; }
.input:focus { border-color: var(--bronze); }
textarea.input { min-height: 90px; resize: vertical; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-soft); font-size: 13.5px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--bronze); color: var(--cream); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font-weight: 500; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 22px; box-shadow: var(--shadow); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0 0 12px; line-height: 1.1; letter-spacing: -.4px; }
h1 { font-size: 34px; } h2 { font-size: 28px; } h3 { font-size: 22px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.barcell { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; font-family: var(--serif); font-weight: 600; font-size: 16px; }
.barwrap { width: 96px; height: 4px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.barwrap i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bronze), var(--gold)); }

/* ---- login card ----------------------------------------------------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login .card { width: 100%; max-width: 400px; padding: 30px 28px; }
.login .logo { margin-bottom: 18px; }
.login h2 { font-size: 30px; margin-bottom: 18px; }

/* ---- "Chi sei?" picker on the CSR login: 8 name cards, the picked one turns gold ---- */
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick label { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 24px 9px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; user-select: none;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), background .35s var(--ease); }
.pick label:hover { border-color: rgba(166, 124, 82, .55); transform: translateY(-1px); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--sans); letter-spacing: .02em; color: var(--ink-2); background: var(--paper-2);
  transition: color .35s var(--ease), box-shadow .35s var(--ease); }
.pick .nm { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick label::after { content: ''; position: absolute; right: 9px; top: 50%; margin-top: -7px; width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .4s var(--ease);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23a67c52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pick label:has(input:checked) { border-color: var(--gold); background: linear-gradient(180deg, #fffaf0, var(--card)); box-shadow: 0 0 0 3px rgba(198, 161, 91, .2), 0 10px 24px -16px rgba(166, 124, 82, .8); }
.pick label:has(input:checked)::after { opacity: 1; transform: scale(1); }
.pick input:checked + .n { color: var(--noir); background-image: linear-gradient(135deg, #fff4d8 0%, #ecd6a0 30%, var(--gold) 65%, var(--bronze) 100%); box-shadow: 0 0 0 1px rgba(166, 124, 82, .35), 0 3px 10px rgba(198, 161, 91, .5); }
.pick input:focus-visible + .n { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 480px) {
  .login .card { padding: 26px 18px; }
  .pick { gap: 7px; }
  .pick label { gap: 8px; padding: 8px 22px 8px 8px; }
  .pick .n { width: 30px; height: 30px; font-size: 11.5px; }
  .pick .nm { font-size: 16px; }
}

/* ---- toast ---------------------------------------------------------- */
#hm-toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 0); opacity: 0; pointer-events: none; background: var(--noir); color: var(--cream); padding: 11px 18px; border-radius: 3px; font-size: 14px; max-width: 90vw; z-index: 50; box-shadow: var(--shadow); }
#hm-toast.show { opacity: 1; }
#hm-toast.error { background: var(--danger); color: #fff; }
#hm-toast.ok { background: var(--olive); color: #fff; }

/* ---- staff / admin split layout ----------------------------------- */
.panel { display: grid; grid-template-columns: 350px 1fr; height: 100vh; height: 100dvh; max-width: 1280px; margin: 0 auto; background: var(--paper); overflow: hidden; }
.panel > * { min-height: 0; }
.panel .side { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--paper); min-width: 0; }
.panel .main { display: flex; flex-direction: column; min-width: 0; }
.side .topbar .who { flex-direction: row; align-items: center; gap: 12px; }
.side .topbar .who .name { font-size: 15px; font-family: var(--sans); font-weight: 600; }
/* room for the online dot's halo: .name clips overflow (for the ellipsis), so pad it and let the name text ellipsize */
.side .topbar .who .name { display: inline-flex; align-items: center; min-width: 0; padding: 4px; margin: -4px; }
.side .topbar .who .name #meName { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.clist { flex: 1; overflow-y: auto; }
.lgroup { position: sticky; top: 0; z-index: 1; padding: 10px 20px 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); background: var(--paper); }
.crow { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; width: 100%; border-left: 2px solid transparent; background: transparent; transition: background .35s var(--ease); }
.crow:hover { background: var(--card); }
.crow.active { background: var(--card); border-left-color: var(--ink); }
.crow .bead { grid-row: 1 / span 2; }
.crow.has2 .bead { grid-row: 1 / span 3; }   /* renamed customer: name, number line, preview */
.crow .l1 { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 600; font-size: 16.5px; min-width: 0; }
.crow .l1 .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow .pv { grid-column: 2 / -1; color: var(--ink-soft); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow.unread .pv { color: var(--ink); font-weight: 600; }
.crow .tm { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; letter-spacing: .02em; }
.empty { padding: 48px 24px; text-align: center; color: var(--ink-soft); }
.empty b { display: block; font-family: var(--serif); font-weight: 500; font-size: 24px; color: var(--ink); margin-bottom: 6px; letter-spacing: -.3px; }
.quick { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 0; background: var(--paper); scrollbar-width: thin; }
.quick .btn { flex: none; white-space: nowrap; border-radius: 999px; padding: 8px 16px; border-color: var(--line); color: var(--ink-2); font-weight: 500; font-size: 13px; }
.quick .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: none; }
.back { display: none; }
.main .topbar { flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.filters select.input { flex: 1 1 45%; width: auto; min-width: 0; }
.filters input.input { flex: 1 1 100%; }
@media (max-width: 800px) {
  .panel { display: block; }
  .panel .side, .panel .main { height: 100vh; height: 100dvh; }
  .panel.open .side { display: none; }
  .panel:not(.open) .main { display: none; }
  .back { display: inline-flex; }
  #chatActions { flex-basis: 100%; }
  .app .panel .side, .app .panel .main { height: auto; flex: 1; min-height: 0; }
}

/* ---- admin ---------------------------------------------------------- */
.tabs { display: flex; gap: 18px; padding: 0 20px; overflow-x: auto; background: var(--paper); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 2px; border: 0; background: transparent; font-weight: 500; font-size: 14px; color: var(--ink-soft); transition: color .35s var(--ease); }
.tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.tabs button.active { color: var(--ink); }
.tabs button.active::after { transform: scaleX(1); }
.admin-body { flex: 1; overflow-y: auto; padding: 20px; }
.admin-body .card + .card { margin-top: 16px; }
.stack > * + * { margin-top: 10px; }
.slotrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #d6cbb8; transition: .25s; }
.switch i::after { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .25s var(--ease); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.switch input:checked + i { background: var(--ink); }
.switch input:checked + i::after { transform: translateX(18px); }
.readonly-note { font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); padding: 12px 16px; background: var(--paper-2); text-align: center; }
@media (max-width: 600px) {
  .slotrow { grid-template-columns: auto 1fr; }
  .slotrow > .row:last-child { grid-column: 2; justify-content: flex-end; }
  .admin-body { padding: 14px; }
  .tabs { gap: 14px; }
}

/* ---- phone entry screen (customer) --------------------------------------- */
.gate { flex: 1; min-height: 0; overflow-y: auto; display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; }
.gate[hidden] { display: none; }
.gate-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px; box-shadow: var(--shadow-soft); }
.gate-card h2 { font-size: 26px; margin: 0 0 8px; }
.gate-card > .muted { margin: 0 0 20px; line-height: 1.5; }
.phone-row { display: flex; gap: 8px; }
.cc-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px 0 14px; border-radius: 3px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 16px/1 var(--sans); cursor: pointer; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.cc-btn:hover, .cc-btn:focus-visible { border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(166, 124, 82, .14); outline: none; }
.cc-btn .cc-flag { font-size: 20px; line-height: 1; }
.cc-btn svg { color: var(--ink-soft); }
/* country sheet (reuses the photo sheet frame) */
.cc-sheet .c-sheet-card { max-height: min(80vh, 640px); }
.cc-list { overflow-y: auto; padding: 4px 10px 14px; }
.cc-opt { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 12px; margin: 2px 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); }
.cc-opt:hover { background: var(--card); }
.cc-opt .cc-flag { font-size: 24px; line-height: 1; width: 30px; text-align: center; flex: none; }
.cc-opt .cc-name { flex: 1; min-width: 0; font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -.2px; }
.cc-opt .cc-pre { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cc-opt .cc-check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); }
.cc-opt.on { background: linear-gradient(180deg, #fffaf0, var(--card)); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198, 161, 91, .14); }
.cc-opt.on .cc-check { border: 0; background: no-repeat center / 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23171310' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, #fff4d8, var(--gold) 60%, var(--bronze)); box-shadow: 0 2px 8px rgba(198, 161, 91, .45); }
.phone-row input { flex: 1; min-width: 0; font-size: 17px; letter-spacing: .02em; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; cursor: pointer; margin: 4px 0 10px; }
.consent input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--bronze); }
.privacy { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); background: var(--paper-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.gate-err { min-height: 20px; color: var(--danger); font-size: 13px; margin-bottom: 6px; }
.btn.gate-go { width: 100%; border: 0; color: var(--noir); font-weight: 700;
  background-image: linear-gradient(100deg, var(--bronze) 0%, var(--gold) 18%, #ecd6a0 34%, #fff4d8 50%, #ecd6a0 66%, var(--gold) 82%, var(--bronze) 100%);
  background-size: 200% auto; animation: shimmer 6.5s linear infinite; box-shadow: 0 4px 16px rgba(198, 161, 91, .45); }
.gate-note { text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 0; }
#list[hidden], #composer[hidden] { display: none; }

/* ---- customer tags (CSR + admin): phone, country check, returning ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tags:empty { display: none; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.3; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.tag.phone { color: var(--ink); }
.tag.ok { background: #eef3e4; border-color: #cfdcb8; color: #4c5e2c; }
.tag.warn { background: #fbf0d9; border-color: #ecd6a0; color: #7a5410; white-space: normal; }
.tag.repeat { background: #f6ecfb; border-color: #e3cdef; color: #6b3a86; }
.tag.muted { color: var(--ink-soft); }
.tag.dup { background: #fbe6e2; border-color: #efc2b9; color: #9a2f1c; letter-spacing: .04em; }
.crow.dup:not(.active) { opacity: .55; }
/* 2026-10-29: "Dog Customers", the repeating customers at the bottom of the CSR list */
.dogs-h { display: grid; gap: 4px; padding: 16px 20px 10px; margin-top: 10px; border-top: 2px dashed var(--bronze); background: var(--paper-2); }
.dogs-h b { font: 600 13px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-d); }
.dogs-h span { font: 12.5px/1.35 var(--sans); color: var(--ink-soft); }
.dogs-h ~ .crow { background: var(--paper-2); }
.dogs-h ~ .crow.dup:not(.active) { opacity: 1; }
.dogs-h ~ .crow:hover, .dogs-h ~ .crow.active { background: var(--card); }
.dogs-none { padding: 12px 20px 18px; font: 12.5px/1.3 var(--sans); color: var(--ink-soft); background: var(--paper-2); }
.pick label.gone { display: none !important; }
.tag.dup:not(.sm) { white-space: normal; }
.crow .l1 { overflow: hidden; }
.crow .l1 .nm.ph { flex: none; font-family: var(--sans, inherit); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.crow .l1 .chip { flex-shrink: 4; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crow .l1 .nm { min-width: 96px; flex-shrink: 1; }   /* the name gives way last: chips squeeze before it does */
.tag.sm { padding: 0 5px; font-size: 11px; border-radius: 6px; }
.crow .l1 .tag.sm { flex: none; }

/* ---- daily table per ad (admin) -------------------------------------------- */
.daily-wrap { overflow-x: auto; margin-top: 10px; }
.table.daily td.num b { display: block; font-size: 15px; }
.table.daily td.num small { display: block; font-size: 11px; color: var(--ink-soft); }
.table.daily tfoot td { font-weight: 700; border-top: 2px solid var(--line); }

/* IT | EN switch (staff and admin pages) */
.lang-sw { display: inline-flex; align-self: flex-end; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font: 600 11px/1 var(--sans); letter-spacing: .08em; }
.login .card { position: relative; }
.login .prefs { position: absolute; top: 30px; right: 28px; display: flex; align-items: center; gap: 8px; }
.login .prefs .lang-sw { margin: 0; }
.lang-sw { flex-shrink: 0; }
.topbar .logo, .topbar .btn { flex-shrink: 0; white-space: nowrap; }
.side .topbar .who { gap: 4px 8px; flex-wrap: wrap; justify-content: flex-end; }
.side .topbar .who .name { flex-shrink: 0; max-width: 100%; }
.lang-sw button { border: 0; background: transparent; color: var(--ink-soft); padding: 5px 9px; cursor: pointer; }
.lang-sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang-sw button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---- Dark theme tokens, global: class "noir" on <html> (set by js/theme-boot.js / hm.setTheme), 2026-10-07 ---- */
.noir {
  --paper: #171310; --paper-2: #1f1a15; --card: #221c17; --ink: #efe7d8; --ink-2: #d9cfbf; --ink-soft: #9c9081;
  --line: #3a3029; --bronze: #c6a15b; --bronze-d: #d8b878; --cream: #efe7d8; --noir: #0f0c0a; --danger: #e0826c;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, .7);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -18px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
.noir .msg.me .bubble { background: #8a6440; border-color: #8a6440; color: var(--cream); }
.noir .msg.them .bubble { background: #2a231d; border-color: var(--line); color: var(--ink); }
.noir .msg.del .bubble { background: var(--paper-2); border-color: transparent; color: var(--ink-soft); }
.noir .msg.del s { text-decoration-color: rgba(239, 231, 216, .45); }
.noir .cc-opt.on { background: linear-gradient(180deg, #2a231d, var(--card)); }
.noir #hm-toast { background: #2a231d; color: var(--cream); border: 1px solid var(--gold); }
.noir #hm-toast.error { background: #6e2a1f; }
.noir .bead.hdr { background: var(--gold); color: #171310; border-color: var(--gold); }
.noir .input { background: #1f1a15; color: var(--ink); border-color: var(--line); }

.noir .bar.stay { background: linear-gradient(180deg, #2a231d, var(--paper-2)); }
.noir .bar.stay .stay-btn:hover { background: #2a231d; }
.noir .bar.warn { background: #3a2e17; color: #e6c98a; }
.noir .bar.danger { background: #4a211a; color: #f0b4a6; }

/* ---- recap card: the kiosk answers, first customer message (2026-10-07) ---- */
.msg.recap .bubble.recap-card { background: #fbf4e6; border: 1px solid var(--gold); color: var(--ink); text-align: left; font-family: var(--sans); font-size: 14.5px; padding: 10px 14px; }
.recap-card .rc-l { line-height: 1.65; }
.recap-card .rc-flag { margin-left: 4px; }
.noir .msg.recap .bubble.recap-card { background: #221c17; border-color: var(--gold); color: var(--cream); box-shadow: 0 0 18px -6px var(--gold); }

/* ---- dark look: CSR / admin (colours only, 2026-10-07) ---- */
.noir .tag.adm, .noir .tag.kiosk { background: transparent; border-color: var(--gold); color: var(--gold); }
.noir .tag.kiosk { box-shadow: 0 0 10px -3px var(--gold); }
.noir .tag.ok { background: #1f2a17; border-color: #3d4f2a; color: #b9cf94; }
.noir .tag.warn { background: #3a2e17; border-color: #6b5426; color: #e6c98a; }
.noir .tag.repeat { background: #2c1f33; border-color: #4f3a5c; color: #d6b6e8; }
.noir .tag.dup { background: #3a1d17; border-color: #6e3326; color: #f0b4a6; }
.noir .msg.sys.note .bubble { background: #2a231d; border-color: var(--gold); color: var(--ink-2); }
.noir .pick label:has(input:checked) { background: linear-gradient(180deg, #2a231d, var(--card)); }
.noir .switch i { background: #3a3029; }
.noir .switch i::after { background: var(--cream); }
.noir .switch input:checked + i { background: var(--gold); }
.noir .switch input:checked + i::after { background: #171310; }
.noir .btn.primary:not(.gate-go) { background: #2a231d; border-color: var(--gold); color: var(--cream); }
.noir .btn.primary:not(.gate-go):hover { background: #3a3029; }
.noir .crow { border-top-color: transparent; border-right-color: transparent; }
.noir .crow.active { border-left-color: var(--gold); }

.topbar .lang-sw { margin-left: auto; }
.cust .topbar .lang-sw button { min-height: 36px; padding: 0 10px; font-size: 13px; }
/* Narrow phones: no room for "Assistenza Handmade" next to the switch (it spilled under it); the logo says Handmade already */
@media (max-width: 440px) { .cust .topbar .who { display: none; } }

/* ---- kiosk: the steps before the chat (customer page, 2026-10-07) ---- */
.kiosk { flex: 1; min-height: 0; display: flex; }
.kiosk[hidden] { display: none; }
.ks { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.ks-top { padding: 14px 16px 8px; }
.ks-step { font: 600 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.ks-bar { display: flex; gap: 5px; padding: 0 16px 10px; }
.ks-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.ks-bar i.on { background: var(--gold); box-shadow: 0 0 10px rgba(198, 161, 91, .5); }
.ks-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 18px; }
.ks h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 6.5vw, 34px); line-height: 1.15; margin: 6px 0 12px; color: var(--ink); }
.ks-lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
.ks-hero { min-height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 12px 4px; }
.ks-hero h1 { font-size: clamp(34px, 9vw, 48px); color: var(--bronze-d); }
.ks-hero .ks-lead { font-family: var(--serif); font-size: 21px; }
.ks-foot { display: flex; gap: 10px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.ks-btn { flex: 1; min-height: 56px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; font-size: 16px; }
.ks-btn.main { background: var(--gold); border-color: var(--gold); color: #171310; box-shadow: 0 6px 22px -8px rgba(198, 161, 91, .8); }
.ks-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.ks-field { display: block; }
.ks-field > span { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); margin: 12px 0 6px; }
.ks-field .input { width: 100%; min-height: 52px; font-size: 17px; }
.ks-err { min-height: 18px; margin-top: 4px; font-size: 13px; color: var(--danger); }
.ks-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ks-choice { min-height: 56px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 17px; font-weight: 600; }
.ks-choice.big { min-height: 76px; font-size: 20px; }
.ks-choice[aria-pressed="true"], .ks-tile[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 24px -4px var(--gold); }
.ks-phone { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ks-phone > span:first-child { width: 100%; font-size: 13px; color: var(--ink-soft); }
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ks-chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--bronze); color: var(--bronze-d); font-weight: 600; font-size: 14px; }
.ks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ks-tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: left; }
.ks-tile:last-child:nth-child(odd) { grid-column: span 2; }
.ks-tile video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #0f0c0a; }
.ks-tile:last-child:nth-child(odd) video { aspect-ratio: 2 / 1; }
.ks-tile-n { padding: 10px 12px 12px; font-weight: 600; font-size: 14.5px; line-height: 1.25; }
.ks-tile-n small { display: block; margin-top: 3px; color: var(--ink-soft); font-weight: 500; font-size: 12px; }
.ks-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ks-row .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ks-ic { font-size: 22px; flex: none; }
.ks-link { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--bronze); background: none; color: var(--bronze-d); font-weight: 600; }
.noir .ks-hero h1 { color: var(--gold); }
.noir .ks-chip, .noir .ks-link { border-color: var(--gold); color: var(--gold); }
.ks-review-video { flex: none; width: 96px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; background: #0f0c0a; }
.ks-stores { display: grid; gap: 10px; margin-top: 8px; }
.ks-store { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 700; text-decoration: none; }
@media (min-width: 700px) {
  .ks-grid { grid-template-columns: repeat(3, 1fr); }
  .ks-tile:last-child:nth-child(odd) { grid-column: auto; }
  .ks-tile video, .ks-tile:last-child:nth-child(odd) video { aspect-ratio: 4 / 3; }
  .ks-foot { justify-content: flex-end; }
  .ks-btn { flex: 0 1 240px; }
}
.ks[data-step="done"] .ks-body { padding-top: 28px; }

/* ☾ / ☀︎ theme button, next to every language switch (2026-10-07) */
.theme-sw { flex: none; width: 25px; height: 25px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.theme-sw:hover { border-color: var(--gold); color: var(--ink); }
.theme-sw:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.noir .theme-sw { color: var(--gold); }
.cust .theme-sw { width: 36px; height: 36px; font-size: 17px; }
.topbar .lang-sw + .theme-sw { margin-left: -6px; }
@media (max-width: 400px) { .cust .topbar #slotBead { display: none; } }
.topbar .who .lang-sw + .theme-sw { align-self: flex-end; }
.msg.sys.ai .ai-lbl { display: block; font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }

/* ---- admin Panoramica (2026-10-08): funnel, trend chart, ad links, customers per CSR ---- */
#tab-stats { --k-opened: #8a6440; --k-kiosk: #c6a15b; --k-telegram: #2f8fca; }
.noir #tab-stats { --k-opened: #b98a5c; --k-kiosk: #e0c07e; --k-telegram: #5aa9de; }
.ov-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ov-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); }
.ov-seg button { border: 0; background: none; font: 600 14px/1 var(--sans); color: var(--ink-soft); padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.ov-seg button.on { background: var(--ink); color: var(--paper); }
.ov-nav { display: flex; align-items: center; gap: 8px; }
.ov-nav b { font: 600 16px/1.2 var(--sans); min-width: 13ch; text-align: center; }
.ov-nav .btn { font-size: 18px; padding: 4px 12px; }
.ov-nav .btn:disabled { opacity: .35; cursor: default; }
.ov-funnel { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ov-row { display: flex; align-items: center; gap: 14px; }
.ov-step { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 14px; color: #fff; min-width: 0; box-sizing: border-box; }
.ov-step.k-opened { background: var(--k-opened); }
.ov-step.k-kiosk { background: var(--k-kiosk); color: #2a2017; }
.ov-step.k-telegram { background: var(--k-telegram); }
.ov-step .ic { font-size: 20px; }
.ov-step .lbl { font-weight: 600; font-size: 16px; flex: 1; min-width: 0; }
.ov-step b { font: 700 28px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ov-pct { font: 700 20px/1.1 var(--sans); white-space: nowrap; }
.ov-pct small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.ov-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--ink-soft); margin: 4px 0 8px; }
.ov-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ov-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ov-legend i.k-opened { background: var(--k-opened); } .ov-legend i.k-kiosk { background: var(--k-kiosk); } .ov-legend i.k-telegram { background: var(--k-telegram); }
.ov-chart svg { width: 100%; height: auto; display: block; }
.ov-chart rect.k-opened { fill: var(--k-opened); } .ov-chart rect.k-kiosk { fill: var(--k-kiosk); } .ov-chart rect.k-telegram { fill: var(--k-telegram); }
.ov-chart rect.hit { fill: transparent; }
.ov-chart g.grp:hover rect.hit { fill: var(--paper-2); }
.ov-grid { stroke: var(--line); stroke-dasharray: 3 5; }
.ov-base { stroke: var(--line); }
.ov-ax { fill: var(--ink-soft); font: 500 12px var(--sans); }
.ov-empty { text-align: center; color: var(--ink-soft); padding: 48px 0; margin: 0; }
.ov-ads .ov-who { display: flex; align-items: flex-start; gap: 8px; }
.ov-ads .medal { font-size: 18px; line-height: 1.2; width: 22px; flex: none; text-align: center; }
.ov-ads .ov-url { display: block; font-size: 12px; color: var(--ink-soft); word-break: break-all; }
.ov-ads .ov-track { width: 30%; }
.ov-ads .ov-track .barwrap { display: block; width: 100%; height: 8px; }
.ov-slots tr.off td { opacity: .45; }
/* 2026-10-23: WhatsApp tab — laptop first: the live link and the form on the left, the history on the right */
/* 2026-10-29: landing page picker on top of the WhatsApp tab */
.wa-pick-lbl { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.wa-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 1180px; margin-bottom: 16px; }
@media (max-width: 640px) { .wa-pages { grid-template-columns: 1fr; } }
.wa-pages button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.wa-pages button:hover { border-color: var(--gold); }
.wa-pages button.on { border: 2px solid var(--gold); padding: 11px 13px; box-shadow: 0 0 0 3px rgba(198, 161, 91, .18); }
.wa-pages b { font: 600 17px/1.2 var(--serif); }
.wa-pages small { font-size: 12px; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-p-link { margin-top: 4px; font-size: 13px; font-weight: 600; color: #1b7f45; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-p-link.off { color: var(--ink-soft); }
.noir .wa-p-link { color: #5fe39a; }
.noir .wa-p-link.off { color: var(--ink-soft); }
.wa-grid { display: grid; gap: 16px; align-items: start; max-width: 1180px; }
.admin-body .wa-grid .card + .card { margin-top: 0; }
@media (min-width: 900px) { .wa-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; } }
.wa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wa-head h2 { margin: 0; }
.wa-state { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--paper-2); color: var(--ink-soft); }
.wa-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wa-state.on { background: color-mix(in srgb, #25d366 16%, transparent); color: #1b7f45; }
.noir .wa-state.on { color: #5fe39a; }
.wa-now { margin: 16px 0 14px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); display: grid; gap: 6px; }
.wa-url { font: 600 clamp(17px, 2vw, 22px)/1.3 var(--sans); color: var(--ink); word-break: break-all; text-decoration: underline; text-decoration-color: color-mix(in srgb, #25d366 55%, transparent); text-underline-offset: 4px; }
.wa-now p { margin: 0; }
/* no link yet: a plain note with an arrow, not a box that looks like a field (Adian clicked it); the real input lights up */
.wa-now.empty { background: none; border: 0; padding: 4px 0; cursor: pointer; }
.wa-now.empty p { font-size: 15px; }
.wa-form.first { border-top: 0; margin-top: 8px; padding-top: 0; }
.wa-form.first .input { border: 2px solid #25d366; box-shadow: 0 0 0 4px color-mix(in srgb, #25d366 18%, transparent); }
.wa-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wa-switch { margin-left: auto; cursor: pointer; gap: 10px; }
.wa-form { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.wa-form .input { font-size: 16px; padding-block: 13px; }
.wa-form .btn { min-height: 50px; }
@media (min-width: 900px) { .wa-form { grid-template-columns: 1fr auto; align-items: end; } }
.wa-hint { font-size: 13px; margin: 10px 0 0; }
.wa-list { list-style: none; margin: 12px 0 0; padding: 0; }
.wa-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); }
.wa-list li.cur { background: color-mix(in srgb, #25d366 8%, transparent); border-radius: 10px; padding-inline: 10px; }
.wa-h { display: grid; gap: 2px; min-width: 0; }
.wa-h-url { font-size: 14px; font-weight: 500; word-break: break-all; }
.wa-tag { flex: none; font-size: 12px; font-weight: 600; color: #1b7f45; }
.noir .wa-tag { color: #5fe39a; }
/* 2026-10-23: Classica vs Atelier */
.duel { display: grid; gap: 12px; align-items: stretch; }
@media (min-width: 760px) { .duel { grid-template-columns: 1fr auto 1fr; } }
.duel-side { display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.duel-side.lead { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.duel-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.duel-name b { font: 600 20px/1.2 var(--serif); }
.duel-name small { flex-basis: 100%; color: var(--ink-soft); font-size: 12.5px; }
.duel-crown { font-size: 12.5px; font-weight: 600; color: var(--bronze-d); }
.duel-big b { font: 700 40px/1 var(--sans); margin-right: 8px; }
.duel-big small { color: var(--ink-soft); }
.duel .barwrap { display: block; width: 100%; height: 10px; }
.duel-vs { align-self: center; justify-self: center; font: italic 600 18px/1 var(--serif); color: var(--bronze-d); }
.lp-copies { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* 2026-10-12: landing leaderboard (Classifica landing) */
.lp-sort { margin: 2px 0 12px; flex-wrap: wrap; }
.lp-race { list-style: none; margin: 0; padding: 0; }
.lp-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--line); border-radius: 10px; }
.lp-row.first { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.lp-row.last { background: color-mix(in srgb, #c0392b 8%, transparent); }
.lp-medal { width: 28px; flex: none; font-size: 24px; text-align: center; }
.lp-pos { width: 18px; flex: none; font: 700 15px/1 var(--sans); color: var(--ink-soft); }
.lp-main { flex: 1; min-width: 0; }
.lp-who { font-size: 15px; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.lp-copy { flex: none; }
.lp-main .barwrap { display: block; width: 100%; height: 10px; }
.lp-stats { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.lp-score { flex: none; min-width: 84px; text-align: right; }
.lp-score b { display: block; font: 700 26px/1.1 var(--sans); }
.lp-score small { font-size: 12px; color: var(--ink-soft); }
.lp-tot { margin: 12px 4px 0; font-size: 13.5px; color: var(--ink-soft); }
@media (max-width: 600px) {
  .ov-step { padding: 12px 14px; } .ov-step b { font-size: 22px; } .ov-step .lbl { font-size: 14px; }
  .ov-row { gap: 8px; } .ov-pct { font-size: 16px; }
  .ov-ads .ov-track, .ov-ads .ov-url, .ov-ads .ov-who .muted { display: none; }
  .ov-ads th, .ov-ads td, .ov-slots th, .ov-slots td { padding: 9px 6px; font-size: 13px; }
  .lp-row { gap: 8px; padding: 10px 6px; } .lp-medal { width: 22px; font-size: 20px; } .lp-score { min-width: 64px; } .lp-score b { font-size: 22px; }
  .lp-sort button { padding: 8px 11px; font-size: 13px; }
  .ov-slots th { letter-spacing: .06em; }
}
/* 2026-10-23: the admin header (logo, language, theme, logout) must fit a 390px phone */
@media (max-width: 430px) { .adm-tag { display: none; } }

/* 2026-10-28: the banana queue, a bar across the top of the CSR desk. Monkeys line up for bananas (customers) in a
   little diorama: sunrise sky, snowy mountains, palm hills and grass; day-offs from the leave form sleep in beds in a
   night corner on the right. Front = next customer (excited), middle smiling, back bored. */
.panel:has(> .bq:not([hidden])) { grid-template-rows: auto minmax(0, 1fr); }
.panel > .bq { grid-column: 1 / -1; }
.bq { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fbe6bb 0%, #fddcb2 50%, #f8ceac 100%); position: relative; overflow: hidden; isolation: isolate; }
.noir .bq { background: linear-gradient(180deg, #2e2540 0%, #4a3650 55%, #6a4652 100%); }
/* scenery: each layer is an SVG tile repeated sideways (HMMonkey.scene); a little wider than the bar for the parallax */
.bq-scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.noir .bq-scene.day { filter: brightness(.6) saturate(.8); }
.bq-l { position: absolute; left: -40px; right: -40px; background-repeat: repeat-x; background-position: left bottom; background-size: auto 100%; }
.bq-far { height: 90px; bottom: 30px; opacity: .9; }
.bq-mid { height: 70px; bottom: 24px; }
.bq-near { height: 70px; bottom: 18px; }
.bq-grass { height: 34px; bottom: 0; left: 0; right: 0; }
.bq-sun { position: absolute; top: 30px; left: 56%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #fff7da 0 52%, #ffe7a8 70%, rgba(255, 231, 168, 0) 72%); box-shadow: 0 0 46px 20px rgba(255, 222, 150, .55); }
.bq-cloud { position: absolute; width: 120px; height: 40px; background-repeat: no-repeat; background-size: 100% 100%; left: 0; animation: bqDrift 110s linear infinite; }
.bq-cloud.c1 { top: 34px; animation-delay: -20s; }
.bq-cloud.c2 { top: 52px; transform: scale(.7); opacity: .8; animation-duration: 150s; animation-delay: -95s; }
.bq-cloud.c3 { top: 26px; transform: scale(.55); opacity: .7; animation-duration: 180s; animation-delay: -60s; }
.bq-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px 14px 0; min-width: 0; }
.turn-live { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--sans); letter-spacing: .14em; color: #c0392b; flex: none; background: rgba(255, 255, 255, .7); padding: 4px 8px; border-radius: 999px; }
.noir .turn-live { background: rgba(0, 0, 0, .35); color: #ff8a7a; }
.turn-live i { width: 8px; height: 8px; border-radius: 50%; background: #e74c3c; animation: turnPing 1.6s ease-out infinite; }
.bq-ticker { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: #3a2814; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.noir .bq-ticker { color: #f6e9d8; text-shadow: none; }
.bq-me { flex: none; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.bq-me.mine { background: linear-gradient(135deg, #fff4d8, #ecd6a0 55%, var(--gold)); border-color: var(--gold); color: #2a1f0e; animation: turnGlow 2.2s ease-in-out infinite; }
.bq-me.rest { background: #e6ecfa; border-color: #b9c8ec; color: #2f4473; }
.bq-me.queen { background: #fff3c4; border-color: #e2c25a; color: #3a2a08; }
.bq-me.off { color: var(--danger, #b3261e); }
.bq-online { flex: none; font-size: 12px; color: #4a3820; background: rgba(255, 255, 255, .6); padding: 3px 8px; border-radius: 999px; }
.noir .bq-online { color: #f0e2cf; background: rgba(0, 0, 0, .3); }
.bq-fold { flex: none; border: 0; background: rgba(255, 255, 255, .6); border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 13px; color: #4a3820; padding: 0; transition: transform .3s; }
.noir .bq-fold { background: rgba(0, 0, 0, .3); color: #f0e2cf; }
.bq.folded .bq-fold { transform: rotate(-90deg); }
.bq.folded .bq-stage { display: none; }
.bq.folded .bq-top { padding-bottom: 8px; }
.bq.folded .bq-scene.day .bq-l, .bq.folded .bq-cloud, .bq.folded .bq-sun { display: none; }
/* the ground the monkeys stand on */
.bq-stage { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 10px; height: 132px; padding: 0 14px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.bq-crate { flex: none; width: 70px; align-self: flex-end; margin-bottom: 18px; position: relative; z-index: 2; filter: drop-shadow(0 4px 2px rgba(40, 60, 20, .3)); }
.bq-crate svg { width: 70px; height: auto; display: block; }
.bq-line { position: relative; flex: none; height: 118px; transition: width .6s; }
.bq-m { position: absolute; left: 0; bottom: 0; z-index: 1; width: 72px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; transition: opacity .6s; }
.bq-m.enter, .bq-m.leave { opacity: 0; }
/* the shadow on the grass; it shrinks when the monkey jumps */
.bq-m::before { content: ''; position: absolute; top: 86px; left: 50%; width: 46px; height: 10px; margin-left: -23px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 50, 15, .42), rgba(30, 50, 15, 0)); z-index: -1; }
.bq-m[data-mood="excited"]::before { animation: mkShadow .9s cubic-bezier(.3, 0, .4, 1) infinite; }
.bq-fig { width: 64px; height: 96px; transform-origin: 50% 100%; animation: mkIdle 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.bq-fig svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform .25s; }
.bq-name { margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; background: rgba(255, 255, 255, .82); padding: 1px 6px; border-radius: 999px; }
.noir .bq-name { background: rgba(0, 0, 0, .45); }
.bq-name b { font-weight: 700; color: var(--ink-2); font-size: 10px; }
.bq-m.me .bq-name { background: var(--gold); color: #1f1a15; box-shadow: 0 0 0 2px rgba(198, 161, 91, .35); }
.bq-m.me .bq-name::after { content: ' ★'; }
.mk-arm, .mk-eyes, .mk-foot { transform-box: view-box; }
.mk-arm-l { transform-origin: 30px 98px; }
.mk-arm-r { transform-origin: 70px 98px; }
.mk-foot-l { transform-origin: 38px 142px; }
.mk-foot-r { transform-origin: 62px 142px; }
/* moods: excited at the front (jumps, arms up), smiling in the middle (breathing), bored at the back (slumped, slow) */
.bq-m[data-mood="excited"] .bq-fig { animation: mkJump .9s cubic-bezier(.3, 0, .4, 1) infinite; }
.bq-m[data-mood="excited"] .mk-arm-l { animation: mkWaveL .45s ease-in-out infinite alternate; }
.bq-m[data-mood="excited"] .mk-arm-r { animation: mkWaveR .45s ease-in-out infinite alternate; }
.bq-m[data-mood="content"] .mk-head { animation: mkNod 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50px 80px; transform-box: view-box; }
.bq-m[data-mood="bored"] .bq-fig { animation: mkBored 4.8s ease-in-out infinite; animation-delay: var(--d, 0s); filter: saturate(.75); }
.bq-m[data-mood="bored"] .mk-head { animation: mkHeadDroop 4.8s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50px 80px; transform-box: view-box; }
.bq-m[data-mood="happy"] .bq-fig { animation: mkHop .55s ease-in-out 2, mkIdle 2.4s ease-in-out 1.1s infinite; }
.bq-m.hop .bq-fig { animation: mkHop .55s ease-in-out 2; }
/* walking: body bobs, feet step in turn, arms swing; walking to the back they face the way they go */
.bq-m.walk .bq-fig { animation: mkWalk .32s ease-in-out infinite; }
.bq-m.walk .mk-foot-l { animation: mkStep .32s ease-in-out infinite; }
.bq-m.walk .mk-foot-r { animation: mkStep .32s ease-in-out infinite; animation-delay: -.16s; }
.bq-m.walk:not([data-mood="excited"]):not([data-mood="happy"]) .mk-arm-l { animation: mkSwing .32s ease-in-out infinite alternate; }
.bq-m.walk:not([data-mood="excited"]):not([data-mood="happy"]) .mk-arm-r { animation: mkSwing .32s ease-in-out infinite alternate-reverse; }
.bq-m.toback .bq-fig svg { transform: scaleX(-1); }
/* the wheelchair (Xairam, 2026-10-29): no walking bob or jumping; the wheels roll while he moves, he only rocks a little */
.bq-m .bq-fig:has(.mk-chair) { animation: mkChairIdle 3.2s ease-in-out infinite !important; transform-origin: 50% 100%; }
.bq-m.walk .bq-fig:has(.mk-chair) { animation: mkChairRoll .5s ease-in-out infinite !important; }
.bq-m .mk-chair .mk-arm { animation: none !important; }
.mk-wheel { transform-box: view-box; }
.mk-wheel-l { transform-origin: 21px 124px; }
.mk-wheel-r { transform-origin: 79px 124px; }
.bq-m.walk .mk-chair .mk-wheel { animation: mkSpin .9s linear infinite; }
@keyframes mkSpin { to { transform: rotate(360deg); } }
@keyframes mkChairIdle { 0%, 100% { transform: none; } 50% { transform: translateY(-1px) rotate(-1deg); } }
@keyframes mkChairRoll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .bq-m .bq-fig:has(.mk-chair), .bq-m.walk .mk-chair .mk-wheel { animation: none !important; } }
.bq-m.toback::before { opacity: .5; }
.mk-tail { animation: mkTail 1.8s ease-in-out infinite alternate; transform-origin: 66px 128px; transform-box: view-box; }
/* everyone blinks now and then (not the shades) */
.bq-m:not([data-mood="excited"]) .mk-eyes { animation: mkBlink 5.5s infinite; animation-delay: var(--d, 0s); transform-origin: 50px 46px; }
/* the flying banana */
.bq-fly { position: absolute; z-index: 5; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
/* day-off corner: a night scene with stars, a moon and fireflies; beds, snoring */
.bq-beds { flex: none; margin: 0 -14px -6px auto; display: flex; align-items: flex-end; gap: 6px; padding: 0 14px 8px 40px; position: relative; height: 132px;
  background: linear-gradient(180deg, #111a3a 0%, #1d2a56 60%, #2a3a6c 100%); border-radius: 22px 0 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px); mask-image: linear-gradient(90deg, transparent 0, #000 34px); }
.bq-beds[hidden] { display: none; }
.bq-beds > .bq-scene { border-radius: inherit; }
.bq-beds .bq-far { opacity: .8; }
.bq-stars { position: absolute; left: 0; right: 0; top: 0; height: 64px; background-repeat: repeat-x; background-size: auto 100%; animation: bqTwinkle 3.4s ease-in-out infinite; }
.bq-stars.s2 { background-position: 90px 6px; animation-delay: -1.7s; }
.bq-moon { position: absolute; top: 12px; right: 22px; width: 22px; height: 22px; border-radius: 50%; box-shadow: -6px 3px 0 0 #fff4c8; filter: drop-shadow(0 0 6px rgba(255, 244, 200, .7)); }
.bq-ff { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f8f19a; box-shadow: 0 0 6px 2px rgba(248, 241, 154, .7); animation: bqFirefly 6s ease-in-out infinite; }
.bq-ff.f1 { left: 30%; bottom: 40px; }
.bq-ff.f2 { left: 58%; bottom: 58px; animation-delay: -1.5s; animation-duration: 7.5s; }
.bq-ff.f3 { left: 80%; bottom: 34px; animation-delay: -3s; }
.bq-ff.f4 { left: 45%; bottom: 76px; animation-delay: -4.4s; animation-duration: 8s; }
.bq-beds-lbl { position: absolute; z-index: 1; top: 8px; left: 40px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c9d6ff; }
.bq-beds-lbl::before { content: '🌙 '; }
.bq-bed { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; transition: opacity .6s; }
.bq-bed.leave, .bq-bed.tuck { opacity: 0; }
/* waking up: sits up with a yawn and a big stretch, kicks the blanket down; then the bed is empty */
.bq-bed.waking .mk-sleeper { animation: mkWakeHead 2.2s ease-in-out both; transform-box: view-box; transform-origin: 30px 56px; }
.bq-bed.waking .mk-stretch { animation: mkStretch 2.2s ease-in-out both; transform-box: view-box; transform-origin: 30px 56px; }
.bq-bed.waking .mk-blanket { animation: mkKick 2.2s ease-in-out both; transform-origin: 131px 68px; }
.bq-bed.vacant .mk-sleeper, .bq-bed.vacant .mk-stretch { opacity: 0; transition: opacity .2s; }
.bq-bed svg { width: 98px; height: auto; display: block; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }
.bq-bed .bq-name { background: rgba(255, 255, 255, .88); color: #1f2a4a; }
.bq-bed .bq-name b { color: #5a6890; }
.mk-blanket, .mk-sleeper { animation: mkBreathe 3.2s ease-in-out infinite; transform-box: view-box; transform-origin: 84px 68px; }
.mk-z { animation: mkZ 2.6s ease-in-out infinite; }
/* the celebration: a banner at the top of the page while bananas rain over it */
.bq-cheer { position: fixed; z-index: 10001; top: 14px; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: #fff7da; border: 2px solid #f2c53d; box-shadow: 0 12px 34px rgba(120, 80, 0, .28); font: 700 15px/1.2 var(--sans); color: #3a2a08; pointer-events: none; }
.bq-cheer .monkey-face { flex: none; }
.bq-cheer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-rain { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10000; overflow: hidden; }
.hm-rain-b { position: absolute; top: 0; }
/* login cards: the monkey takes the number circle, the number becomes a small badge */
.pick .n.mk { background: none; width: 36px; height: 36px; position: relative; overflow: visible; }
.pick .n.mk .monkey-face { display: block; transition: transform .25s; }
.pick .n.mk em { position: absolute; right: -6px; bottom: -4px; font: 700 9px/1 var(--sans); font-style: normal; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px; color: var(--ink-2); }
.pick label:hover .n.mk .monkey-face { transform: rotate(-8deg) scale(1.08); }
.pick input:checked + .n.mk { background: none; box-shadow: none; }
.pick input:checked + .n.mk .monkey-face { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(198, 161, 91, .8)); }
@keyframes turnPing { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(231, 76, 60, 0); } }
@keyframes turnGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 161, 91, 0); } 50% { box-shadow: 0 0 0 4px rgba(198, 161, 91, .35); } }
@keyframes mkIdle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.965) translateY(1px); } }
@keyframes mkJump { 0%, 100% { transform: translateY(0) scale(1.04, .96); } 40% { transform: translateY(-14px) scale(.97, 1.04); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes mkShadow { 0%, 100% { transform: scale(1); opacity: 1; } 40% { transform: scale(.6); opacity: .5; } 70% { transform: scale(1.05); opacity: 1; } }
@keyframes mkWaveL { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes mkWaveR { from { transform: rotate(10deg); } to { transform: rotate(-14deg); } }
@keyframes mkNod { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-3deg); } }
@keyframes mkBored { 0%, 100% { transform: rotate(-2deg) scaleY(.97); } 50% { transform: rotate(2deg) scaleY(.95); } }
@keyframes mkHeadDroop { 0%, 60%, 100% { transform: rotate(0); } 75% { transform: rotate(-9deg) translateY(3px); } 88% { transform: rotate(-9deg) translateY(3px); } }
@keyframes mkHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px) rotate(-6deg); } }
@keyframes mkWalk { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes mkStep { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-7px) rotate(-12deg); } 50% { transform: translateY(0) rotate(0); } }
@keyframes mkSwing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes mkTail { from { transform: rotate(-6deg); } to { transform: rotate(8deg); } }
@keyframes mkBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes mkBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.06); } }
@keyframes mkZ { 0% { transform: translate(0, 4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -10px); opacity: 0; } }
@keyframes mkWakeHead { 0% { transform: translateY(10px) rotate(-14deg); } 25% { transform: translateY(0) rotate(0); } 45% { transform: rotate(-6deg); } 65% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@keyframes mkStretch { 0%, 15% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1.1); opacity: 1; } 50% { transform: scaleY(.95) rotate(-4deg); } 70% { transform: scaleY(1.08) rotate(4deg); } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes mkKick { 0%, 55% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(8px, 6px) rotate(4deg); } }
@keyframes bqDrift { from { left: -140px; } to { left: 100%; } }
@keyframes bqTwinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes bqFirefly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { transform: translate(10px, -8px); opacity: 1; } 50% { transform: translate(18px, 2px); opacity: .4; } 75% { transform: translate(6px, 8px); opacity: 1; } }
@media (max-width: 800px) {
  .panel:has(> .bq:not([hidden])) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .panel:has(> .bq:not([hidden])) .side, .panel:has(> .bq:not([hidden])) .main { height: auto; flex: 1; min-height: 0; }
  .bq-stage { height: 108px; }
  .bq-line { height: 96px; }
  .bq-beds { height: 108px; padding-left: 30px; }
  .bq-beds-lbl { left: 30px; }
  .bq-m { width: 58px; }
  .bq-m::before { top: 68px; width: 38px; margin-left: -19px; }
  .bq-fig { width: 50px; height: 76px; }
  .bq-crate, .bq-crate svg { width: 54px; }
  .bq-bed svg { width: 78px; }
  .bq-far { height: 64px; bottom: 26px; }
  .bq-mid, .bq-near { height: 52px; bottom: 18px; }
  .bq-grass { height: 28px; }
  .bq-sun { left: auto; right: 24px; top: 34px; width: 32px; height: 32px; }
  .bq-me { max-width: 58%; }
  .bq-online { display: none; }
  .bq-cheer { font-size: 13.5px; }
}
/* 2026-10-29: queen / king mode: everyone's chats, read only */
.throne-h { display: grid; gap: 3px; padding: 12px 20px; background: linear-gradient(135deg, #fff4d8, #f3e1b0); border-bottom: 1px solid #e2c25a; font: 700 12.5px/1.25 var(--sans); color: #3a2a08; }
.throne-h span { font-weight: 500; font-size: 11.5px; color: #6a5426; }
.noir .throne-h { background: linear-gradient(135deg, #3a3020, #2c2518); color: #f6e7c4; border-color: #6a5426; }
.noir .throne-h span { color: #d8c79c; }
.watch-h { padding: 14px 20px 4px; font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); border-top: 1px solid var(--line); }
.tag.watch { background: #eeeafc; color: #3f3380; border-color: #cfc6f3; }
.noir .tag.watch { background: #2e2a48; color: #d6cffd; border-color: #4a4380; }
.ro-bar { padding: 12px 20px; border-top: 1px solid var(--line); background: #eeeafc; color: #3f3380; font: 600 13px/1.35 var(--sans); text-align: center; }
.noir .ro-bar { background: #2e2a48; color: #d6cffd; }
/* 2026-10-29: login: the supervisor and vice-supervisor on top, then the CSRs */
.pick .boss { grid-column: 1 / -1; }
.pick .role { margin-left: auto; flex: none; font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-d); padding: 5px 8px; border: 1px solid rgba(166, 124, 82, .4); border-radius: 999px; background: var(--paper-2); }
.pick-h { grid-column: 1 / -1; margin: 6px 2px -2px; font: 600 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
/* the throne next to the crate: the queen (or the king on her day-off) watches the line */
.bq-throne { flex: none; align-self: flex-end; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-right: -4px; }
.bq-throne[hidden] { display: none; }
.bq-throne svg { width: 108px; height: auto; display: block; overflow: visible; filter: drop-shadow(0 5px 3px rgba(30, 40, 15, .35)); }
.bq-throne .bq-name { position: relative; margin-top: -12px; background: #fff3c4; box-shadow: 0 0 0 1px #e2c25a; }
.mk-throne .mk-tail { transform-origin: 86px 114px; }
.mk-thead { transform-box: view-box; transform-origin: 65px 84px; animation: mkThroneLook 7s ease-in-out infinite; }
.mk-throne.asleep .mk-thead { animation: mkThroneNod 3.6s ease-in-out infinite; }
.mk-flame { opacity: 0; transform-box: view-box; transform-origin: 31px 78px; animation: mkFlame 6s ease-in-out infinite; }
.mk-orb-glow { transform-box: view-box; transform-origin: 110px 23px; animation: mkOrb 2.4s ease-in-out infinite; }
.bq-throne.cast .mk-orb-glow { animation: mkCast 1.4s ease-out; }
@keyframes mkThroneLook { 0%, 100% { transform: rotate(4deg); } 45% { transform: rotate(4deg); } 55%, 80% { transform: rotate(-3deg); } }
@keyframes mkThroneNod { 0%, 100% { transform: rotate(9deg) translateY(1px); } 50% { transform: rotate(14deg) translateY(3px); } }
@keyframes mkFlame { 0%, 78% { opacity: 0; transform: scale(.3); } 84% { opacity: 1; transform: scale(1.3); } 92% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes mkOrb { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .6; transform: scale(1.25); } }
@keyframes mkCast { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }
/* the king's mirror image in the line: violet, see-through, glowing, with motes of light rising through it */
.bq-m.phantom .bq-fig { filter: none; }
.bq-m.phantom .bq-fig svg { filter: grayscale(1) sepia(1) hue-rotate(200deg) saturate(3.5) brightness(1.2) drop-shadow(0 0 3px rgba(170, 150, 255, .95)) drop-shadow(0 0 9px rgba(110, 90, 255, .75)); animation: phShimmer 2.8s ease-in-out infinite; }
.bq-m.phantom::before { background: radial-gradient(closest-side, rgba(140, 120, 255, .6), rgba(140, 120, 255, 0)); }
.bq-m.phantom::after { content: ''; position: absolute; left: 50%; top: 8px; width: 56px; height: 82px; margin-left: -28px; pointer-events: none; opacity: .7;
  background: radial-gradient(circle, #e4dbff 0 1.4px, transparent 2px) 0 0 / 14px 18px; animation: phMotes 3s linear infinite;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.bq-m.phantom .bq-name { background: rgba(60, 40, 140, .88); color: #efeaff; box-shadow: 0 0 8px rgba(140, 120, 255, .7); }
.bq-m.phantom .bq-name b { color: #cfc4ff; }
.bq-m.phantom .bq-name::before { content: '✦ '; }
.bq-poof { position: absolute; left: 50%; top: 44px; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid #b9a8ff; box-shadow: 0 0 16px #8f7bff, inset 0 0 10px #8f7bff; pointer-events: none; animation: phPoof 1.1s ease-out forwards; }
@keyframes phShimmer { 0%, 100% { opacity: .7; } 50% { opacity: .93; } }
@keyframes phMotes { from { background-position: 0 0; } to { background-position: 0 -36px; } }
@keyframes phPoof { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(4.5); } }
@media (max-width: 800px) { .bq-throne svg { width: 82px; } }
/* 2026-10-29: the queen's big dragon, flying behind the line (below .bq-top and .bq-stage) */
.bq-dragon { position: absolute; left: 0; top: 0; z-index: 0; width: 196px; pointer-events: none; will-change: transform; }
.bq-dragon[hidden], .bq.folded .bq-dragon { display: none; }
.bq-dragon svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 6px 6px rgba(40, 10, 10, .25)); animation: dgBob 1.1s ease-in-out infinite; }
.bq-dragon.left svg { transform: scaleX(-1); }
.bq-dragon .dg-wing { transform-box: view-box; transform-origin: 86px 54px; animation: dgFlap .55s ease-in-out infinite; }
.bq-dragon .dg-wing.far { animation-delay: -.08s; }
.bq-dragon.perch svg { animation: dgBreathe 3s ease-in-out infinite; }
.bq-dragon.perch .dg-wing { animation: none; transform: rotate(-24deg) scaleY(.42); transition: transform .4s; }
.bq-dragon .dg-fire { opacity: 0; transform-box: view-box; transform-origin: 156px 38px; transform: scaleX(0); }
.bq-dragon.fire .dg-fire { animation: dgFire 1.5s ease-out; }
.bq-dragon.fire .dg-ember { animation: dgEmber .5s ease-out infinite; }
.bq-dragon .dg-ember.e2 { animation-delay: -.2s; }
.bq-dragon .dg-ember.e3 { animation-delay: -.35s; }
.noir .bq-dragon svg { filter: drop-shadow(0 0 10px rgba(255, 120, 40, .25)); }
@keyframes dgFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.35); } }
@keyframes dgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.bq-dragon.left svg { animation-name: dgBobL; }
@keyframes dgBobL { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-5px); } }
@keyframes dgBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes dgFire { 0% { opacity: 0; transform: scaleX(0) scaleY(.6); } 15% { opacity: 1; transform: scaleX(1.05) scaleY(1); } 70% { opacity: 1; transform: scaleX(1) scaleY(1.12); } 100% { opacity: 0; transform: scaleX(1.15) scaleY(.8); } }
@keyframes dgEmber { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(10px, -8px); } }
@media (max-width: 800px) { .bq-dragon { width: 124px; } }
@media (prefers-reduced-motion: reduce) {
  .bq *, .bq *::before, .bq *::after, .bq-m::before { animation: none !important; }
  .bq-m { transition: opacity .3s; }
}

/* ---- 2026-10-29: Game of Thrones login, "the great hall" ----
   A candle-lit hall (Higgsfield) behind everything, the title banner as the hero, each house under its own
   cloth banner, portraits framed in old gold. Picking a portrait opens the oath panel with the password. */
.login.got {
  --hall-iron: #191b20; --hall-smoke: #262931; --hall-gold: #c9a24a; --hall-gold-hi: #f0d488; --hall-parch: #efe3c4; --hall-parch-dim: #b9ab8c; --hall-ember: #e0662f;
  --got-display: 'Cinzel', 'Fraunces', serif; --got-body: 'Cormorant Garamond', 'Fraunces', serif;
  display: block; padding: 0 0 64px; color: var(--hall-parch);
  background: linear-gradient(180deg, rgba(14, 15, 19, .55) 0%, rgba(14, 15, 19, .82) 38%, rgba(14, 15, 19, .94) 100%), url('../img/got/hall.webp') center top / cover fixed, var(--hall-iron);
}
.login.got .card { max-width: 980px; margin: 0 auto; padding: 22px 28px 0; background: none; border: 0; box-shadow: none; color: inherit; }
.login.got .logo__word { color: var(--hall-parch); }
.login.got .prefs { top: 22px; }
.login.got .lang-sw { background: rgba(25, 27, 32, .7); border-color: rgba(201, 162, 74, .4); }
.login.got .lang-sw button { color: var(--hall-parch-dim); }
.login.got .lang-sw button.on, .login.got .lang-sw button[aria-pressed="true"] { background: var(--hall-gold); color: var(--hall-iron); }
.login.got .theme-sw { display: none; }

/* the hero: the title banner melts into the hall */
.login.got .got-banner { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 520px; object-fit: cover; margin: 14px 0 -40px; border-radius: 4px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.login.got h2 { position: relative; margin: 0 0 6px; text-align: center; font: 600 clamp(26px, 4vw, 38px)/1.1 var(--got-display); letter-spacing: .06em; color: var(--hall-gold-hi);
  text-shadow: 0 2px 18px rgba(224, 102, 47, .35), 0 1px 0 #000; }
.login.got h2::after { content: 'Winter is coming… and so are the customers'; display: block; margin-top: 8px; font: italic 500 17px/1.3 var(--got-body); letter-spacing: .01em; color: var(--hall-parch-dim); text-shadow: none; }
.login.got .field > #pickLabel { display: block; margin: 22px 0 4px; text-align: center; font: italic 600 20px/1.2 var(--got-body); color: var(--hall-parch); letter-spacing: 0; text-transform: none; }

/* each house under its cloth banner: emblem on the left of the cloth, name on the right */
.login.got .pick { display: block; }
.login.got .got-house { position: relative; display: flex; align-items: center; justify-content: flex-end; aspect-ratio: 7 / 3; margin: 34px 0 12px; padding: 0 clamp(16px, 4vw, 44px);
  border-radius: 6px; overflow: hidden; background: var(--hall-smoke); box-shadow: 0 18px 30px -22px #000; }
.login.got .got-house img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login.got .got-house::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgba(10, 10, 12, .55) 100%); }
.login.got .got-house span { position: relative; z-index: 1; text-align: right; }
.login.got .got-house b, .login.got .pick .hh b { display: block; font: 700 clamp(17px, 2.6vw, 26px)/1.1 var(--got-display); letter-spacing: .05em; color: #fff7e2; text-shadow: 0 2px 10px #000, 0 0 2px #000; }
.login.got .got-house i, .login.got .pick .hh i { display: block; margin-top: 3px; font: italic 600 clamp(14px, 1.8vw, 18px)/1.2 var(--got-body); color: var(--hall-gold-hi); text-shadow: 0 1px 6px #000; }

/* portraits in old-gold frames, the name engraved over the bottom of the picture */
.login.got .got-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.login.got .pick label { position: relative; display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--hall-smoke); color: inherit; box-shadow: 0 0 0 1px rgba(201, 162, 74, .35), 0 20px 34px -24px #000;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.login.got .pick label::after { content: none; }
.login.got .pick label:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--hall-gold), 0 0 26px -6px rgba(240, 212, 136, .45), 0 24px 36px -24px #000; }
.login.got .pick label:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--hall-gold-hi), 0 0 0 5px rgba(240, 212, 136, .3); }
.login.got .pick label:has(input:checked) { box-shadow: 0 0 0 2px var(--hall-gold-hi), 0 0 30px -4px rgba(240, 212, 136, .55); background: var(--hall-smoke); }
.login.got .pick .n { display: none; }
.login.got .pick .por { display: block; aspect-ratio: 3 / 4; }
.login.got .pick .por img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.92); transition: filter .4s; }
.login.got .pick label:hover .por img { filter: saturate(1.05) brightness(1.02); }
.login.got .pick .por::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(240, 212, 136, .28); border-radius: 3px; pointer-events: none; }
.login.got .pick .txt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 54px 16px 15px;
  background: linear-gradient(180deg, transparent, rgba(12, 12, 15, .82) 45%, rgba(12, 12, 15, .95)); }
.login.got .pick .nm { font: 600 19px/1.15 var(--got-display); letter-spacing: .03em; color: #fff4da; white-space: normal; overflow: visible; text-shadow: 0 1px 4px #000; }
.login.got .pick .ttl { font: italic 500 14.5px/1.3 var(--got-body); color: var(--hall-parch-dim); white-space: normal; }
.login.got .pick .role { position: absolute; left: 14px; top: 14px; z-index: 2; margin: 0; padding: 5px 9px; border: 1px solid rgba(240, 212, 136, .6); border-radius: 3px;
  background: rgba(16, 16, 20, .78); color: var(--hall-gold-hi); font: 600 11px/1 var(--got-display); letter-spacing: .08em; text-transform: none; }
/* the supervisors and the lone members of a house get a wide card: portrait left, titles right */
.login.got .got-group + .got-group { margin-top: 16px; }
.login.got .pick label.boss, .login.got .pick label.solo { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 0; min-height: 0; background: linear-gradient(90deg, var(--hall-smoke), rgba(25, 27, 32, .92)); }
.login.got .pick label.boss .por, .login.got .pick label.solo .por { position: relative; flex: none; width: min(34%, 300px); }
.login.got .pick label.solo .por { width: min(24%, 190px); }
.login.got .pick label.boss .por { width: min(30%, 260px); }
.login.got .pick label.boss .txt, .login.got .pick label.solo .txt { position: relative; flex: 1; justify-content: center; align-items: flex-end; text-align: right; overflow: hidden;
  padding: 22px clamp(18px, 4vw, 40px) 22px 38%; background: none; }
/* the whole house banner behind a one-member card: emblem on the left, the words on the empty cloth */
.login.got .pick .txt .hb { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; transition: filter .4s; filter: brightness(.9); }
.login.got .pick label.solo .txt::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, transparent 30%, rgba(10, 10, 12, .62) 62%, rgba(10, 10, 12, .78)); }
.login.got .pick label.solo .txt > :not(.hb) { position: relative; z-index: 1; }
.login.got .pick label:hover .txt .hb { filter: brightness(1.02); }
.login.got .pick .hh { display: block; margin-bottom: 10px; }
.login.got .pick .hh b { font-size: clamp(14px, 1.8vw, 18px); color: #fff7e2; }
.login.got .pick label.boss .ttl, .login.got .pick label.solo .ttl { color: #e6d9b8; text-shadow: 0 1px 4px #000; }
.login.got .pick label.boss .nm { font-size: clamp(22px, 3.2vw, 32px); color: var(--hall-gold-hi); }
.login.got .pick label.solo .nm { font-size: clamp(19px, 2.6vw, 25px); }
.login.got .pick label.boss .ttl { font-size: clamp(15px, 1.9vw, 19px); line-height: 1.4; max-width: 46ch; }
.login.got .pick label.solo .ttl { font-size: clamp(14.5px, 1.7vw, 17px); }

/* the oath panel */
.got-locked body { position: fixed; left: 0; right: 0; overflow: hidden; }
.login.got .got-oath[hidden] { display: none; }
.login.got .got-oath { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.login.got .got-oath-veil { position: absolute; inset: 0; background: rgba(8, 8, 11, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: oathVeil .3s ease-out; }
.login.got .got-oath-panel { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); width: min(760px, 100%); max-height: calc(100dvh - 40px); overflow: auto;
  border-radius: 8px; background: linear-gradient(160deg, #23262d, #17181c 70%); box-shadow: 0 0 0 1px rgba(201, 162, 74, .55), 0 0 60px -10px rgba(224, 102, 47, .35), 0 40px 80px -30px #000;
  animation: oathIn .42s cubic-bezier(.2, .8, .2, 1); }
.login.got .got-oath-por { position: relative; min-height: 100%; }
.login.got .got-oath-por img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.login.got .got-oath-por::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, #1d1f25); }
.login.got .got-oath-body { display: flex; flex-direction: column; padding: 28px 30px 22px; min-width: 0; }
.login.got .got-oath-house { display: flex; align-items: center; gap: 8px; font: italic 600 16px/1.2 var(--got-body); color: var(--hall-gold); }
.login.got .got-oath h3 { margin: 10px 0 8px; font: 700 clamp(24px, 3.4vw, 32px)/1.1 var(--got-display); letter-spacing: .03em; color: var(--hall-gold-hi); text-shadow: 0 2px 14px rgba(224, 102, 47, .3); }
.login.got .got-oath-ttl { margin: 0 0 20px; padding: 0; list-style: none; font: italic 500 16.5px/1.4 var(--got-body); color: var(--hall-parch-dim); }
.login.got .got-oath-ttl li + li { margin-top: 1px; }
.login.got .got-oath-form { margin-top: auto; }
.login.got .got-oath .field { display: block; margin: 0 0 6px; }
.login.got .got-oath .field > span { display: block; margin-bottom: 7px; font: 600 15px/1 var(--got-body); color: var(--hall-parch); letter-spacing: .02em; text-transform: none; }
.login.got .got-oath .input { width: 100%; background: rgba(8, 8, 11, .55); color: #fff4da; border: 1px solid rgba(201, 162, 74, .5); border-radius: 4px; font-size: 17px; letter-spacing: .12em; }
.login.got .got-oath .input:focus { border-color: var(--hall-gold-hi); box-shadow: 0 0 0 3px rgba(240, 212, 136, .22); outline: none; }
.login.got #loginErr { color: #ff9b84 !important; font-size: 14px; }
.login.got .got-oath .btn.primary { margin-top: 2px; border: 0; border-radius: 4px; background: linear-gradient(180deg, #f0d488, #c9a24a 55%, #a07a2a); color: #1e170b; font: 700 16px/1 var(--got-display); letter-spacing: .08em; padding: 15px; box-shadow: 0 10px 24px -12px rgba(224, 160, 60, .7); }
.login.got .got-oath .btn.primary:hover { filter: brightness(1.06); }
.login.got .got-oath-back { align-self: center; margin-top: 14px; padding: 6px 10px; border: 0; background: none; color: var(--hall-parch-dim); font: italic 500 16px/1 var(--got-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185, 171, 140, .4); }
.login.got .got-oath-back:hover { color: var(--hall-parch); }
@keyframes oathVeil { from { opacity: 0; } }
@keyframes oathIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .login.got .got-oath-veil, .login.got .got-oath-panel { animation: none; }
  .login.got .pick label, .login.got .pick .por img { transition: none; }
  .login.got .pick label:hover { transform: none; }
}
@media (max-width: 640px) {
  .login.got { background-attachment: scroll; }
  .login.got .card { padding: 18px 14px 0; }
  .login.got .prefs { top: 18px; right: 14px; }
  .login.got .got-banner { margin-bottom: -18px; }
  .login.got .got-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .login.got .pick .txt { padding: 40px 10px 10px; }
  .login.got .pick .nm { font-size: 15.5px; }
  .login.got .pick .ttl { font-size: 13px; }
  .login.got .pick label.boss .por { width: 40%; }
  .login.got .pick label.solo .por { width: 36%; }
  .login.got .pick label.boss .txt, .login.got .pick label.solo .txt { padding: 14px 12px 14px 14px; }
  .login.got .pick label.solo .txt::before { background: linear-gradient(90deg, rgba(10, 10, 12, .35), rgba(10, 10, 12, .78)); }
  .login.got .got-house { margin-top: 26px; }
  .login.got .pick label.boss .nm { font-size: 19px; }
  .login.got .pick label.boss .ttl { font-size: 13.5px; }
  .login.got .pick .role { left: 8px; top: 8px; font-size: 9.5px; padding: 4px 6px; }
  /* the oath panel becomes a sheet from the bottom, the portrait a band across the top */
  .login.got .got-oath { place-items: end stretch; padding: 0; }
  .login.got .got-oath-panel { grid-template-columns: 1fr; border-radius: 14px 14px 0 0; max-height: 94dvh; animation-name: oathUp; }
  .login.got .got-oath-por img { aspect-ratio: auto; height: 34dvh; object-position: 50% 22%; }
  .login.got .got-oath-por::after { background: linear-gradient(180deg, transparent 55%, #1d1f25); }
  .login.got .got-oath-body { padding: 4px 18px calc(16px + env(safe-area-inset-bottom)); margin-top: -34px; position: relative; }
  @keyframes oathUp { from { transform: translateY(40px); opacity: 0; } }
}
/* the welcome gate: one click lets the browser play the hall's music */
.login.got .got-gate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px 16px; overflow: auto;
  background: linear-gradient(180deg, rgba(14, 15, 19, .55), rgba(14, 15, 19, .9)), url('../img/got/hall.webp') center / cover, var(--hall-iron); transition: opacity .6s ease, visibility .6s; }
.login.got .got-gate.gone { opacity: 0; visibility: hidden; }
.login.got .got-gate-in { width: min(760px, 100%); text-align: center; }
.login.got .got-gate img { display: block; width: 100%; border-radius: 4px; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.login.got .got-gate h1 { margin: -14px 0 8px; font: 700 clamp(30px, 5vw, 50px)/1.05 var(--got-display); letter-spacing: .05em; color: var(--hall-gold-hi); text-shadow: 0 2px 22px rgba(224, 102, 47, .45), 0 1px 0 #000; }
.login.got .got-gate p { margin: 0 0 26px; font: italic 500 clamp(17px, 2.2vw, 21px)/1.35 var(--got-body); color: var(--hall-parch-dim); }
.login.got .got-gate-go { padding: 17px 38px; border: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(180deg, #f0d488, #c9a24a 55%, #a07a2a); color: #1e170b;
  font: 700 clamp(16px, 2vw, 19px)/1 var(--got-display); letter-spacing: .08em; box-shadow: 0 0 0 1px rgba(255, 236, 180, .5), 0 0 40px -6px rgba(224, 140, 60, .7); animation: gateGlow 2.6s ease-in-out infinite; }
.login.got .got-gate-go:hover { filter: brightness(1.07); }
.login.got .got-gate-go:focus-visible { outline: 2px solid #fff4da; outline-offset: 4px; }
@keyframes gateGlow { 50% { box-shadow: 0 0 0 1px rgba(255, 236, 180, .7), 0 0 64px -2px rgba(240, 160, 70, .85); } }
.login.got .got-mute { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(201, 162, 74, .5); background: rgba(25, 27, 32, .7); color: var(--hall-gold-hi); font-size: 15px; line-height: 1; cursor: pointer; }
.login.got .got-mute[aria-pressed="false"] { color: var(--hall-parch-dim); opacity: .6; text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .login.got .got-gate-go { animation: none; } .login.got .got-gate { transition: none; } }
.bq .bq-name svg.sigil { width: 12px !important; height: 14px !important; position: static !important; display: inline-block; vertical-align: -2px; margin: 0 3px 0 0; transform: none; animation: none; }