/* boqo's screens inside sneech (spec §6.1, §7.1): the creator and the author's panel wear boqo
   Studio's own tokens, copied as they are from apps/web/content/studio/boqo-studio-mockup.html
   (lines 12–25), so the person feels the hand-off from sneech to its provider. Scoped to .boqo:
   sneech's own tokens (tokens.css) stay as they are everywhere else. */
.boqo {
  --color-canvas:#07060b;--color-panel:#100e17;--color-raised:#17141f;--color-hover:#1f1b2a;
  --color-line:rgba(255,255,255,.08);--color-line-strong:rgba(255,255,255,.14);--color-scrim:rgba(7,6,11,.72);
  --color-ink-1:#f3effa;--color-ink-2:#ada7c2;--color-ink-3:#8c86a3;--color-ink-4:#4a465c;
  --color-accent:#c8ff4d;--color-accent-ink:#0b0d04;--color-mind:#9b7bff;--color-live:#ff5fa8;--color-wire:#5eebff;--color-warn:#ffb547;--color-danger:#ff5c5c;
  --color-accent-a:rgba(200,255,77,.14);--color-mind-a:rgba(155,123,255,.16);--color-live-a:rgba(255,95,168,.16);--color-wire-a:rgba(94,235,255,.14);--color-warn-a:rgba(255,181,71,.16);--color-danger-a:rgba(255,92,92,.16);
  --r-1:6px;--r-2:10px;--r-3:14px;--r-4:20px;--r-pill:999px;
  --fs-12:.75rem;--fs-13:.8125rem;--fs-14:.875rem;--fs-16:1rem;--fs-18:1.125rem;--fs-22:1.375rem;--fs-28:1.75rem;--fs-36:2.25rem;
  --track-label:.06em;--track-display:-.02em;
  --t-1:120ms;--t-2:200ms;--t-3:320ms;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-inout:cubic-bezier(.65,0,.35,1);
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --font-ui:"Instrument Sans","Inter",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --focus:0 0 0 2px var(--color-canvas),0 0 0 4px var(--color-accent);
  /* the boqo provider bar's own dark lime, as on the approved screen (boqo-creator-path.html) */
  --boqo-bar-bg:#1b2208;
  font-family: var(--font-ui);
  color: var(--color-ink-1);
}
.boqo :focus-visible { outline: none; box-shadow: var(--focus); }

/* --- the provider bar and the creator's frame ---------------------------------------------------- */

.boqo-screen { padding-block-end: 48px; }
.boqo .boqo-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--boqo-bar-bg);
  box-shadow: inset 0 -1px 0 rgba(200, 255, 77, 0.28);
  color: var(--color-accent);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.boqo-bar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }

.cr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 4px; }
.cr-step { margin: 0; color: var(--color-ink-3); font-family: var(--font-mono); font-size: var(--fs-13); }
.cr-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cr-dots li { width: 22px; height: 4px; border-radius: 2px; background: var(--color-ink-4); transition: background var(--t-2) ease; }
.cr-dots li.is-on { background: var(--color-accent); }

.cr-step-body { display: flex; flex-direction: column; gap: 10px; }
.cr-title { margin: 6px 0 8px; font-family: var(--font-display); font-weight: 750; font-size: var(--fs-28); letter-spacing: var(--track-display); line-height: 1.1; }
.cr-label { display: block; margin-block-start: 10px; color: var(--color-ink-3); font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.cr-hint { margin: 0; color: var(--color-ink-3); font-size: var(--fs-14); line-height: 1.4; }
.cr-hint.is-error { color: var(--color-warn); }
.cr-hint.is-inline { display: block; margin-block-start: 2px; font-size: var(--fs-13); }
.cr-hint.is-center { text-align: center; }
.cr-error {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-3);
  background: var(--color-warn-a);
  box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.45);
  color: var(--color-ink-1);
  font-size: var(--fs-16);
  line-height: 1.4;
}

.cr-field {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-3);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  color: var(--color-ink-1);
  font: inherit;
  font-size: 16px; /* meant to keep iOS Safari from zooming in on focus */
  line-height: 1.4;
}
.cr-field::placeholder { color: var(--color-ink-3); }
.cr-field:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-accent); }
.cr-area { resize: vertical; min-height: 84px; }

/* --- buttons ------------------------------------------------------------------------------------- */

.cr-actions { display: flex; gap: 10px; margin-block-start: 18px; }
.cr-actions.is-final { margin-block-start: 22px; }
.cr-primary, .cr-ghost, .cr-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding-inline: 22px;
  border-radius: var(--r-pill);
  font-size: var(--fs-16);
  font-weight: 800;
  transition: transform var(--t-1) var(--ease-out), background var(--t-2) ease;
}
.cr-primary { flex: 1; background: var(--color-accent); color: var(--color-accent-ink); }
.cr-primary.is-wide { width: 100%; margin-block-start: 16px; }
.cr-primary:disabled { background: var(--color-raised); color: var(--color-ink-4); cursor: default; }
.cr-primary:not(:disabled):active, .cr-ghost:not(:disabled):active, .cr-danger:active { transform: scale(0.98); }
.cr-ghost { background: var(--color-raised); color: var(--color-ink-1); box-shadow: inset 0 0 0 1px var(--color-line-strong); font-weight: 650; }
.cr-ghost:hover { background: var(--color-hover); }
.cr-ghost.is-small { flex: 1; min-height: 38px; padding-inline: 12px; font-size: var(--fs-14); }
.cr-ghost.is-danger { color: var(--color-danger); }
.cr-ghost:disabled { color: var(--color-ink-4); cursor: default; }
.cr-danger { flex: 1; background: var(--color-danger); color: #1a0606; }
.cr-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-live); box-shadow: 0 0 0 3px rgba(255, 95, 168, 0.3); }
.cr-primary:disabled .cr-live-dot { background: var(--color-ink-4); box-shadow: none; }

.cr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 6px; }
.cr-chip {
  min-height: 38px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line);
  color: var(--color-ink-2);
  font-size: var(--fs-14);
  font-weight: 650;
}
.cr-chip:hover { color: var(--color-ink-1); }
.cr-chip[aria-pressed='true'] { background: var(--color-accent-a); box-shadow: inset 0 0 0 1px rgba(200, 255, 77, 0.6); color: var(--color-accent); }

/* --- step 1: the bases ------------------------------------------------------------------------- */

.cr-bases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .cr-bases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cr-base { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cr-base-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 10px;
  border-radius: var(--r-3);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line);
  text-align: start;
  transition: transform var(--t-1) var(--ease-out);
}
.cr-base-card:active { transform: scale(0.98); }
.cr-base-art { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.cr-base-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.cr-base-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 6, 11, 0.92) 0%, rgba(7, 6, 11, 0.1) 60%); border-radius: inherit; }
.cr-base-name { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 750; font-size: var(--fs-18); line-height: 1.1; }
.cr-base-card[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--color-accent); }
.cr-base-card[aria-pressed='true']::before {
  content: '✓';
  position: absolute;
  z-index: 2;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 14px;
  font-weight: 900;
}
.cr-from { display: flex; flex-direction: column; gap: 4px; }
.cr-from-btn {
  min-height: 32px;
  padding: 4px 10px;
  border-radius: var(--r-2);
  color: var(--color-ink-2);
  font-size: var(--fs-13);
  font-weight: 600;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-from-btn:hover { background: var(--color-raised); color: var(--color-ink-1); }
.cr-from-btn.is-on { color: var(--color-accent); }

.cr-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 4px; }
.cr-ref { position: relative; width: 64px; height: 64px; border-radius: var(--r-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--color-line); }
.cr-ref img { width: 100%; height: 100%; object-fit: cover; }
.cr-ref-x { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(7, 6, 11, 0.75); color: var(--color-ink-1); font-size: 15px; line-height: 1; }
.cr-ref-add {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  color: var(--color-ink-2);
  font-size: var(--fs-14);
  font-weight: 650;
  cursor: pointer;
}
.cr-ref-add:hover { color: var(--color-ink-1); background: var(--color-raised); }
.cr-ref-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cr-ref-add:focus-within { box-shadow: var(--focus); }

/* --- step 2: the portrait and the voices --------------------------------------------------------- */

.cr-portrait {
  position: relative;
  /* small enough on a phone that the pickers start on the same screen */
  width: min(100%, 300px, calc(48dvh * 9 / 16));
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-4);
  background:
    radial-gradient(120% 70% at 50% 25%, rgba(155, 123, 255, 0.22), rgba(7, 6, 11, 0) 70%),
    var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line);
}
.cr-portrait img { width: 100%; height: 100%; object-fit: cover; animation: cr-in var(--t-3) var(--ease-out); }
@keyframes cr-in { from { opacity: 0; transform: scale(1.03); } }
.cr-portrait.is-drawing img { filter: blur(6px) saturate(0.7); opacity: 0.6; }
.cr-drawing {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
}
.cr-drawing::before {
  /* a slow light passing over the frame while the portrait is drawn */
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(200, 255, 77, 0.08) 50%, rgba(255, 255, 255, 0) 60%);
  animation: cr-sweep 2.4s ease-in-out infinite;
}
@keyframes cr-sweep { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
.cr-drawing-title { position: relative; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-18); }
.cr-drawing-hint { position: relative; color: var(--color-ink-3); font-size: var(--fs-13); }
.cr-spinner {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--color-accent-a);
  border-block-start-color: var(--color-accent);
  animation: cr-spin 1.1s linear infinite;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-reroll {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-end: 10px;
  min-height: 38px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  background: rgba(7, 6, 11, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  font-size: var(--fs-14);
  font-weight: 700;
}
.cr-group { display: flex; flex-direction: column; }

.cr-voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 6px 0 4px; padding: 0; list-style: none; }
@media (min-width: 900px) { .cr-voices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cr-voice { display: flex; align-items: stretch; min-width: 0; border-radius: var(--r-3); background: var(--color-raised); box-shadow: inset 0 0 0 1px var(--color-line); }
.cr-voice.is-on { background: var(--color-accent-a); box-shadow: inset 0 0 0 1px rgba(200, 255, 77, 0.6); }
.cr-voice-pick { flex: 1; min-width: 0; min-height: 46px; padding: 6px 10px 6px 12px; font-size: var(--fs-14); font-weight: 650; line-height: 1.2; text-align: start; overflow-wrap: anywhere; }
.cr-voice.is-on .cr-voice-pick { color: var(--color-accent); }
.cr-listen { flex: none; width: 44px; border-inline-start: 1px solid var(--color-line); color: var(--color-ink-2); font-size: 13px; }
.cr-listen[data-playing='true'] { color: var(--color-accent); }

/* --- step 3: the facts under the form --------------------------------------------------------- */

.cr-facts { display: grid; gap: 8px; margin-block-start: 14px; }
.cr-fact { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border-radius: var(--r-3); background: var(--color-panel); box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-ink-2); font-size: var(--fs-14); line-height: 1.4; }
.cr-fact-icon { flex: none; min-width: 26px; color: var(--color-mind); font-size: 18px; line-height: 1.1; text-align: center; }
.cr-fact-icon.is-mono { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.cr-rate { color: var(--color-ink-1); font-weight: 650; }

/* --- going live ------------------------------------------------------------------------------- */

.cr-closed { display: flex; flex-direction: column; gap: 6px; margin-block-start: 28px; }
.cr-count { margin: 4px 0 6px; color: var(--color-ink-2); font-size: var(--fs-16); font-weight: 600; }
.cr-count .num { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--fs-22); }
.cr-going { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-block-start: 28px; text-align: center; }
.cr-going-portrait { position: relative; width: 168px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-4); box-shadow: 0 0 0 2px var(--color-accent-a); }
.cr-going-portrait img { width: 100%; height: 100%; object-fit: cover; animation: drift 6s ease-in-out infinite alternate; }
.cr-going-portrait .cr-spinner { position: absolute; inset-block-end: 12px; inset-inline: 0; margin-inline: auto; }
.cr-going .cr-hint { max-width: 32ch; }

/* --- on the stream: the "your streamer" tag and the author's panel ----------------------------- */

.mine-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding-inline: 11px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--lime-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.loop-preload { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

/* The author can still reach the panel over a paused or ended stream's cover. */
.dock.has-author { z-index: 4; }

.ap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 7px;
  padding: 8px 10px;
  border-radius: var(--r-3);
  background: rgba(16, 14, 23, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(200, 255, 77, 0.35);
}
.ap-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.ap-brand { padding: 2px 7px; border-radius: var(--r-1); background: var(--boqo-bar-bg); color: var(--color-accent); font-size: 11px; font-weight: 800; letter-spacing: var(--track-label); }
.ap-title { font-size: var(--fs-14); font-weight: 700; white-space: nowrap; }
.ap-mini { display: flex; gap: 10px; margin-inline-start: auto; color: var(--color-ink-2); font-family: var(--font-mono); font-size: var(--fs-12); white-space: nowrap; overflow: hidden; }
.ap-toggle { flex: none; display: grid; place-items: center; width: 34px; height: 30px; margin-inline-start: auto; border-radius: var(--r-2); }
.ap-mini + .ap-toggle { margin-inline-start: 0; }
.ap-toggle:hover { background: var(--color-hover); }
.ap-chevron { width: 9px; height: 9px; border-inline-end: 2px solid var(--color-ink-2); border-block-end: 2px solid var(--color-ink-2); transform: rotate(-135deg) translate(-2px, -2px); transition: transform var(--t-2) var(--ease-out); }
.ap-chevron.is-open { transform: rotate(45deg) translate(-2px, -2px); }
.ap-body { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.ap-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; text-align: center; }
.ap-stats li { display: flex; flex-direction: column; padding: 4px 2px; border-radius: var(--r-2); background: rgba(255, 255, 255, 0.06); color: var(--color-ink-3); font-size: 11px; line-height: 1.25; min-width: 0; }
.ap-stats b { color: var(--color-ink-1); font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.ap-whisper { display: flex; gap: 6px; }
.ap-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--color-raised);
  box-shadow: inset 0 0 0 1px var(--color-line-strong);
  color: var(--color-ink-1);
  font: inherit;
  font-size: 16px;
}
.ap-input::placeholder { color: var(--color-ink-3); }
.ap-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-mind); }
.ap-send { flex: none; height: 38px; padding-inline: 14px; border-radius: var(--r-pill); background: var(--color-mind); color: #0d0a19; font-size: var(--fs-14); font-weight: 800; }
.ap-send:disabled { background: var(--color-raised); color: var(--color-ink-4); cursor: default; }
.ap-hint { margin: -2px 4px 0; color: var(--color-ink-3); font-size: 12px; line-height: 1.3; }
.ap-earn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ap-earn-sum { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; line-height: 1.15; }
.ap-earn-label { color: var(--color-ink-3); font-size: 12px; }
.ap-earn-sum b { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.ap-chip { min-height: 34px; padding: 4px 8px; line-height: 1.15; border-radius: var(--r-pill); background: var(--color-accent-a); box-shadow: inset 0 0 0 1px rgba(200, 255, 77, 0.45); color: var(--color-accent); font-size: var(--fs-13); font-weight: 700; }
.ap-row { display: flex; gap: 8px; }
.ap-demo-amount { margin: 6px 0 0; color: var(--color-accent); }
.ap-demo-amount .num { font-family: var(--font-mono); font-size: 40px; font-weight: 600; }
.sheet.boqo { background: var(--color-panel); box-shadow: inset 0 0 0 1px rgba(200, 255, 77, 0.3); }
.sheet.boqo .ap-row { margin-block-start: 16px; }

/* The panel stands in the chat's column, beside the rail, as on the approved screen. Open on a
   phone it takes the chat overlay's place (the chat is a fold away) and is at most the rail's
   height while a poll or quiz card also needs the room, its body scrolling inside, so the dock
   does not climb over the streamer's name. */
.dock-main { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
@media (max-width: 899px) {
  .dock-main:has(.ap.is-open) .chat.is-overlay { display: none; }
  .dock-main .ap { flex: 0 1 auto; max-height: 46cqh; }
  .dock.has-author:has(> .card) .dock-main .ap { max-height: 168px; } /* the rail: three 48px buttons, two 12px gaps */
  .dock.has-author:has(> .card) .dock-main .ap-body {
    padding-block-end: 12px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  }
  .ap-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ap:not(.is-open) .ap-title { display: none; }
  .ap-hint { display: none; }
}