/* Scalus concept chat — THE SHARED STRUCTURE. Copy once per client to
   public/<slug>-media/chat.css. Concepts 1, 2 and 3 all load this file.

   To skin a concept, set the tokens below in that concept's OWN stylesheet.
   Nothing else. If a concept needs a structural override it belongs here, for
   all three, not in one concept's sheet.

   :root {
     --scq-sheet: #12100e;        the panel ground
     --scq-ink: #f4f1ec;          text on the sheet
     --scq-muted: #a49c92;        the tagline and the note
     --scq-line: rgba(255,255,255,.12);
     --scq-bot: rgba(255,255,255,.07);   bot bubble
     --scq-you: var(--scq-accent);       visitor bubble
     --scq-you-ink: #12100e;             text on the visitor bubble
     --scq-accent: #c8a24a;       the ONE accent, used on send and the fab
     --scq-accent-ink: #12100e;   text on the accent
     --scq-radius: 18px;
     --scq-font-display: 'Anton', sans-serif;
     --scq-font-body: 'Barlow', system-ui, sans-serif;
   }

   Phone standard applies: nothing under 12px, every tap target 44px or more,
   the panel never taller than the viewport. See lib/phone-standard.css. */

.scq-fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border: 0; cursor: pointer;
  border-radius: 999px; background: var(--scq-accent); color: var(--scq-accent-ink);
  font-family: var(--scq-font-body); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  transition: transform .22s ease, box-shadow .22s ease;
}
.scq-fab svg { width: 19px; height: 19px; }
.scq-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0, 0, 0, .34); }
.scq-fab.on { transform: translateY(-2px) scale(.97); }

/* Exactly ONE chat entry point at any width. Above 1024px the fab shows and the
   dock's chat tile hides. Below 1024px the fab hides and the dock carries it.
   Get this breakpoint exactly right or the two overlap, or both disappear. */
.dk-chat { display: none; }
@media (max-width: 1023px) {
  .scq-fab { display: none; }
  .dk-chat { display: inline-flex; }
}

/* .scq sets display:flex below, and ANY author rule beats the user agent's
   [hidden]{display:none} regardless of specificity, so without this line the
   panel stays laid out while hidden and its .scq-note intercepts the clicks
   meant for the fab underneath. The fab then cannot be clicked at all. This is
   the Pro Shield "pair hidden with a display:none rule" trap. */
.scq[hidden] { display: none !important; }
.scq {
  position: fixed; right: 20px; bottom: 24px; z-index: 61;
  width: min(380px, calc(100vw - 32px));
  max-height: min(72vh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--scq-sheet); color: var(--scq-ink);
  border: 1px solid var(--scq-line); border-radius: var(--scq-radius);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  font-family: var(--scq-font-body);
}
@media (max-width: 1023px) {
  /* Clear of the dock, which owns the bottom of a phone screen. */
  .scq { right: 12px; left: 12px; bottom: 96px; width: auto; max-height: min(68vh, 560px); }
}

.scq-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 14px 13px 17px; border-bottom: 1px solid var(--scq-line);
}
.scq-hd-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scq-hd-b b {
  font-family: var(--scq-font-display); font-size: 15px; line-height: 1.1;
  letter-spacing: .04em; font-weight: 400;
}
.scq-hd-b span { font-size: 12px; line-height: 1.35; color: var(--scq-muted); }
.scq-x {
  /* margin-left:auto pushes it to the far right. Keep it INSIDE the shorthand:
     a later `margin:` shorthand resets margin-left and parks the X next to the
     title. That shipped once and only a screenshot caught it. */
  flex: none; width: 44px; height: 44px; margin: -10px -8px -10px auto;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: var(--scq-muted); border-radius: 10px;
}
.scq-x svg { width: 17px; height: 17px; }
.scq-x:hover { color: var(--scq-ink); }

.scq-log {
  flex: 1 1 auto; overflow-y: auto; padding: 15px 17px;
  display: flex; flex-direction: column; gap: 10px;
}
.scq-m {
  max-width: 86%; padding: 10px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.5;
}
.scq-bot { align-self: flex-start; background: var(--scq-bot); border-bottom-left-radius: 5px; }
.scq-you {
  align-self: flex-end; background: var(--scq-you, var(--scq-accent));
  color: var(--scq-you-ink, var(--scq-accent-ink)); border-bottom-right-radius: 5px;
}
.scq-dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.scq-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45;
  animation: scq-b 1.1s infinite ease-in-out;
}
.scq-dots span:nth-child(2) { animation-delay: .16s; }
.scq-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes scq-b { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .scq-dots span { animation: none; } }

.scq-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 17px 4px; }
.scq-chips:empty { display: none; }
.scq-chip {
  min-height: 34px; padding: 0 12px; cursor: pointer;
  background: none; border: 1px solid var(--scq-line); border-radius: 999px;
  color: var(--scq-ink); font-family: inherit; font-size: 12.5px;
}
.scq-chip:hover { border-color: var(--scq-accent); color: var(--scq-accent); }

.scq-f {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 11px 15px; border-top: 1px solid var(--scq-line);
}
.scq-f input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 4px;
  background: none; border: 0; outline: 0;
  color: var(--scq-ink); font-family: inherit; font-size: 16px; /* 16px or iOS zooms on focus */
}
.scq-f input::placeholder { color: var(--scq-muted); }
.scq-f button {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--scq-accent); color: var(--scq-accent-ink); border: 0; border-radius: 12px;
}
.scq-f button svg { width: 18px; height: 18px; }
.scq-f button:disabled, .scq-f input:disabled { opacity: .5; cursor: default; }

.scq-note {
  margin: 0; padding: 0 17px 13px;
  font-size: 12px; line-height: 1.4; color: var(--scq-muted);
}