@import url('fonts.css');

/* Brand: dark, exact, premium. Mona Sans for UI, Instrument Serif italic for the customer's words.
   The island is small and quiet: it should be glanceable in half a second and never cover the work. */
:root {
  --glass: rgba(15, 13, 28, 0.62);
  --glass-2: rgba(6, 4, 14, 0.7);
  --indigo: #4652ef;
  --indigo-hi: #6d76ff;
  --lilac: #cfc7f6;
  --red: #e5484d;
  --amber: #fbc952;
  --green: #22c55e;
  --txt: #f6f5fb;
  --muted: rgba(246, 245, 251, 0.56);
  --faint: rgba(246, 245, 251, 0.34);
  --hair: rgba(255, 255, 255, 0.09);
  --sans: 'Mona Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Commit Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html, body { margin: 0; background: transparent; overflow: hidden; }
body { font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--txt); -webkit-font-smoothing: antialiased; user-select: none; cursor: default; font-variant-numeric: tabular-nums; }
/* padding clears the shadow and the flag ring, or they end in a hard line at the window edge */
#wrap { display: flex; justify-content: center; align-items: flex-start; padding: 0; }
#measure { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none; }

/* the shell morphs between sizes; content is swapped inside it */
#island {
  position: relative; overflow: hidden; box-sizing: border-box;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--glass), var(--glass-2));
  border: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 200ms, box-shadow 200ms;
  will-change: width, height;
}
#island.dragging { transition: none; }
#island.surface-red { background: linear-gradient(180deg, rgba(232, 71, 77, 0.96), rgba(201, 52, 58, 0.97)); border-color: rgba(255, 255, 255, 0.28); animation: flagRing 1.6s ease-in-out infinite; }
@keyframes flagRing {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), inset 0 0 24px rgba(255, 255, 255, 0.12); }
  50% { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 0 36px rgba(255, 255, 255, 0.22); }
}

.inner { position: absolute; inset: 0; }
/* new content fades in a beat after the old starts fading out, while the shell morphs underneath both */
.inner.enter { animation: enter 180ms var(--ease) 60ms both; }
.inner.leave { animation: leave 160ms var(--ease) both; pointer-events: none; }
@keyframes enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes leave { from { opacity: 1; } to { opacity: 0; } }
#island.dragging .inner { animation: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* the mark doubles as the drag grip */
.grip { position: relative; width: 22px; height: 16px; display: block; flex: none; cursor: grab; }
#island.dragging .grip { cursor: grabbing; }
.mark { width: 100%; height: 100%; display: block; object-fit: contain; }
.sheen { position: absolute; inset: 0; -webkit-mask: url(brand/mark-purple.svg) center / contain no-repeat; mask: url(brand/mark-purple.svg) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.9) 50%, transparent 60%); background-size: 260% 100%; background-position: 140% 0; opacity: 0; }
#island.listening .sheen { animation: sheen 2.4s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 140% 0; opacity: 0; } 10% { opacity: 1; } 60% { background-position: -140% 0; opacity: 0; } 100% { opacity: 0; } }

/* ---- pill ---- */
.pill { display: inline-flex; align-items: center; gap: 9px; height: 38px; box-sizing: border-box; padding: 0 14px 0 11px; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.pill .txt { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.pill .sub { color: var(--muted); font-size: 12.5px; }
.pill .time { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #6b6e78; flex: none; }
.dot.green { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.dot.red { background: var(--red); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.22); animation: blink 1.4s ease-in-out infinite; }
.dot.amber { background: var(--amber); }
@keyframes blink { 50% { opacity: 0.45; } }
.eq { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.eq i { width: 2.5px; height: 14px; border-radius: 2px; background: var(--lilac); opacity: 0.85; transform: scaleY(0.2); transition: transform 80ms linear; }
.more { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; color: var(--faint); font-style: normal; margin-left: -4px; transition: color 160ms, background 160ms; }
.more svg { fill: currentColor; }
.pill:hover .more, .more:hover { color: var(--txt); background: rgba(255, 255, 255, 0.08); }
.checks { display: inline-flex; gap: 10px; }
.chk { color: var(--faint); display: inline-flex; gap: 4px; }
.chk i { font-style: normal; font-size: 11px; }
.chk.ok { color: var(--txt); }
.chk.ok i { color: var(--green); }

/* menu: the pill grows a short list of actions */
.menu { min-width: 260px; padding: 0 0 6px; }
.menu .pill { display: flex; }
.menu .acts { display: flex; flex-direction: column; padding: 4px 6px 0; border-top: 1px solid var(--hair); }
.act { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; background: none; border: 0; text-align: left; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 500; }
.act:hover { background: rgba(255, 255, 255, 0.07); }
.act.primary { color: #fff; font-weight: 600; }
.act.danger { color: #ff8f93; }
.act.quiet { color: var(--muted); }
.act:disabled { color: var(--faint); cursor: default; background: none; }
kbd { font: 600 11px var(--sans); color: var(--faint); border: 1px solid var(--hair); border-radius: 4px; padding: 1px 5px; }

/* ---- cards ---- */
.card { width: 400px; box-sizing: border-box; padding: 11px 14px 14px; }
.hd { display: flex; align-items: center; gap: 8px; height: 20px; margin: 0 0 8px; -webkit-app-region: drag; cursor: grab; }
.hd button, .hd .x, .hd .more { -webkit-app-region: no-drag; cursor: pointer; }
.lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.meta { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.x { width: 22px; height: 22px; flex: none; border: 0; border-radius: 6px; background: transparent; color: var(--faint); font-size: 11px; line-height: 22px; padding: 0; margin-right: -4px; transition: background 160ms, color 160ms; }
.x:hover { background: rgba(255, 255, 255, 0.1); color: var(--txt); }
.tag { display: inline-block; font-size: 10.5px; letter-spacing: 0.1em; color: #fff; background: rgba(70, 82, 239, 0.85); padding: 2px 7px; border-radius: 5px; }
.they { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.3; color: var(--muted); margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.say { font-size: 16.5px; font-weight: 600; line-height: 1.38; letter-spacing: -0.005em; color: #fff; transition: opacity 200ms; }
.say.sm { font-size: 15px; }
.ctx { font-size: 12px; color: var(--muted); margin: -2px 0 5px; }
.foot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 11px; }
.ghost { border: 1px solid var(--hair); background: rgba(255, 255, 255, 0.04); border-radius: 7px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; transition: background 160ms, border-color 160ms; }
.ghost:hover { background: rgba(255, 255, 255, 0.1); }
.ghost.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ghost.primary:hover { background: var(--indigo-hi); }

/* stage meter: name + slim segments */
.stage { display: inline-flex; align-items: center; gap: 7px; }
.segs { display: inline-flex; gap: 3px; }
.segs i { width: 12px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); transition: background 240ms; }
.segs i.done { background: rgba(109, 118, 255, 0.6); }
.segs i.now { background: var(--indigo-hi); }

/* red: compliance only */
.surface-red .lbl, .surface-red .meta { color: rgba(255, 255, 255, 0.85); }
.surface-red .x { color: rgba(255, 255, 255, 0.7); }
.surface-red .mark { filter: brightness(0) invert(1); opacity: 0.9; }

/* wrap-up check */
.row { display: grid; grid-template-columns: 14px 78px 1fr; align-items: baseline; gap: 6px; font-size: 13.5px; margin: 3px 0; }
.row i { font-style: normal; }
.row span { color: var(--muted); }
.row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.ok i { color: var(--green); }
.row.miss i, .row.miss b { color: var(--faint); }
.todo { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--amber); }

/* after the call */
.scoreline { display: flex; align-items: baseline; gap: 4px; margin: 0 0 10px; }
.num { font-family: var(--serif); font-style: italic; font-size: 40px; line-height: 0.9; }
.num.g { color: #7ee2a0; } .num.a { color: var(--amber); } .num.r { color: #ff8f93; }
.of { color: var(--faint); font-size: 13px; }
.st { margin-left: auto; font-size: 12px; color: var(--muted); }
.segs-out { display: flex; padding: 3px; gap: 2px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); border-radius: 8px; }
.seg { flex: 1; border: 0; background: transparent; border-radius: 6px; padding: 6px 0; font-size: 12.5px; font-weight: 600; color: var(--muted); transition: background 160ms, color 160ms; }
.seg:hover { color: var(--txt); }
.seg.on { background: var(--indigo); color: #fff; }
.tip { margin-top: 10px; font-size: 13.5px; line-height: 1.4; }
.tip span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lilac); margin-bottom: 2px; }
.flags { margin-top: 8px; font-size: 12.5px; color: #ff8f93; }

/* ---- the prompter ---- */
.card.prompter { width: 460px; padding: 10px 14px 12px; position: relative; }
.prompter .hd { margin-bottom: 7px; }
.prompter .meta { display: inline-flex; align-items: center; gap: 8px; }
.prompter .more { border: 0; background: transparent; padding: 0; margin: 0 -4px 0 2px; }
.prompter .acts { margin: 8px -8px -4px; border-top: 1px solid var(--hair); padding-top: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 9px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 240ms, background 240ms; }
.chip i { font-style: normal; font-size: 10px; color: var(--faint); }
.chip.ok { color: var(--txt); background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.22); }
.chip.ok i { color: var(--green); }
/* a required line not said yet (ui.ts checklist): amber with time to spare, pulsing near the deadline, red once late */
.req { margin: 0 0 9px; padding: 7px 10px 8px; border-radius: 9px; background: rgba(251, 201, 82, 0.09); border: 1px solid rgba(251, 201, 82, 0.26); }
.req-hd { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--amber); }
.req-hd i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
.req-hd .left { margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 11px; color: rgba(251, 201, 82, 0.8); }
.req-say { margin-top: 4px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #fff; }
.req.soon { animation: reqPulse 1.1s ease-in-out infinite; }
@keyframes reqPulse { 50% { background: rgba(251, 201, 82, 0.2); border-color: rgba(251, 201, 82, 0.6); } }
.req.late { background: rgba(229, 72, 77, 0.16); border-color: rgba(255, 120, 125, 0.5); }
.req.late .req-hd { color: #ff9a9e; } .req.late .req-hd i { background: var(--red); }
.req.done { padding: 5px 10px; background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }
.req.done .req-hd { color: #86efac; }
.chips-lbl { align-self: center; margin-right: 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .req.soon { animation: none; } }
.say.cur { font-size: 18px; line-height: 1.35; }
.prev { font-size: 14px; line-height: 1.35; color: var(--muted); margin: 0 0 5px; padding-left: 10px; border-left: 2px solid rgba(207, 199, 246, 0.35); }
.prev span { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-right: 7px; vertical-align: 1px; }
.prev { font-size: 14px; line-height: 1.35; color: var(--muted); margin: 0 0 5px; padding-left: 10px; border-left: 2px solid rgba(207, 199, 246, 0.35); }
.prev span { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-right: 7px; vertical-align: 1px; }
.say.cur.streaming .caret { display: inline-block; width: 2px; height: 0.9em; background: var(--lilac); margin-left: 3px; vertical-align: -2px; animation: blink 0.9s ease-in-out infinite; }
.say.cur.swap { animation: swap 180ms var(--ease) both; }
@keyframes swap { from { opacity: 0.35; } to { opacity: 1; } }
.coach:empty { display: none; }
.coach { font-size: 12px; font-weight: 600; color: var(--lilac); margin: 0 0 4px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one glance: one line */
.nxt { margin-top: 7px; font-size: 13px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nxt span { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-right: 7px; vertical-align: 1px; }
.cust { height: 22px; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--hair); font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 22px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 200ms; }
.cust.live { color: var(--lilac); }
/* a pushback card quotes them already: no empty row under it */
.k-objection .cust:empty, .k-answer .cust:empty { display: none; }
.cust .faint { color: var(--faint); font-family: var(--sans); font-style: normal; font-size: 12px; }
.ov { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.ov .x { margin-left: auto; }
.ov .ai { font-size: 11px; font-weight: 600; color: var(--lilac); opacity: 0.85; }
.prompter .they { margin-bottom: 4px; }
.card.k-objection::before, .card.k-answer::before, .card.k-whisper::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--indigo-hi); }
.card.k-answer::before { background: var(--lilac); }
.card.k-whisper::before { background: var(--lilac); }
.tag.tag-w { background: rgba(207, 199, 246, 0.22); color: var(--lilac); }
/* the customer just finished: the line to read catches the eye for a beat */
.prompter.your-turn .say.cur { animation: yourTurn 900ms var(--ease) both; }
@keyframes yourTurn { 0% { color: var(--lilac); } 100% { color: #fff; } }
/* the customer is talking: the line stays bright; only the quote under it lights up */
#island.customer-talking .eq i { background: var(--lilac); }

/* their question, answered: lilac, so it reads differently from pushback */
.tag.tag-q { background: rgba(207, 199, 246, 0.22); color: var(--lilac); }
.used { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* before the coach's first line lands: nothing to read yet, said quietly */
.say.cur.waiting { color: var(--txt-2, rgba(255,255,255,.5)); font-weight: 500; }

/* a pointer floor: the move in a few words, marked as a move rather than words to read */
.say.cur.pointer { font-weight: 650; letter-spacing: -0.005em; }
.say.cur.pointer::before { content: '→ '; opacity: 0.55; }