/* AUVOX Sales Lab — design system per DESIGN/brand-spec.md */
:root{
  --bg: oklch(98.3% 0.004 134.8);
  --surface: oklch(100% 0 0);
  --fg: oklch(23% 0.022 158.5);
  --muted: oklch(53.5% 0.021 155.4);
  --border: oklch(91.1% 0.012 153.7);
  --accent: oklch(51% 0.17 144);
  --brand-live: oklch(84.9% 0.288 142.5);
  --gold: oklch(70.9% 0.137 81.5);
  --success: oklch(59% 0.15 145);
  --warn: oklch(68% 0.15 70);
  --danger: oklch(56% 0.19 28);
  --info: oklch(58% 0.13 250);
  --soft: oklch(96% 0.012 150);
  --shadow: 0 18px 45px oklch(23% 0.022 158.5 / .09);
  --shadow-control: 0 8px 18px oklch(36% 0.12 145 / .22);
  --radius: 18px;
  --radius-sm: 12px;
  /* Portrait frames (all agents): same box geometry. Fill with object-fit:cover —
     never contain — so new personas crop cleanly inside rounded corners. */
  --agent-frame-width: 150px;
  --agent-frame-height: 267px;
  --agent-photo-position: center 18%;
  --font-display: "IBM Plex Sans Thai", "Leelawadee UI", "Noto Sans Thai", sans-serif;
  --font-body: "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}

*{box-sizing:border-box}
/* Utility classes here set display, which beats the UA [hidden] rule — role gating in
   the shell relies on hidden actually hiding. */
[hidden]{display:none!important}
html{background:var(--bg);color:var(--fg)}
/* dvh everywhere a full-screen height is meant: on iOS 100vh is the height the page WOULD
   have with the browser chrome retracted, so anything sized to it hides its last rows
   (the call controls) under Safari's toolbar. vh stays as the fallback for old engines. */
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid color-mix(in oklch, var(--accent) 72%, var(--surface));outline-offset:3px}

h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;color:var(--fg)}
/* Thai tone marks sit above the cap height — headings need more leading than a Latin-only scale */
h1{font-size:clamp(28px,3.6vw,42px);line-height:1.35;letter-spacing:-.02em}
h2{font-size:clamp(20px,2.4vw,26px);line-height:1.4;letter-spacing:-.01em}
h3{font-size:17px;line-height:1.45}
.eyebrow + h1,.eyebrow + h2{margin-top:2px}
p{margin:0}
.lead,.sub{margin-top:12px;color:var(--muted);font-size:15px;max-width:64ch}
.lead.fail-note{color:var(--danger)}
.tiny{font-size:12px;color:var(--muted);letter-spacing:.015em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{margin:0 0 10px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ══ shell ══ */
.app-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:246px minmax(0,1fr)}
body.in-call .app-shell{display:none}
.sidebar{position:sticky;top:0;height:100vh;height:100dvh;padding:24px 18px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:26px;z-index:4;min-width:0;overflow-y:auto;overscroll-behavior:contain}
/* the controls block grew past 100vh on a 900px screen and the last button became
   unreachable — the rail scrolls on its own now, and never sideways */
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.brand{display:flex;align-items:center;gap:11px;min-height:48px;padding:0;border:0;background:none;text-align:left}
.brand img{width:52px;height:38px;object-fit:contain}
.brand-copy strong{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.brand-copy span{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.nav-list{display:grid;gap:7px}
.nav-link{min-height:46px;padding:0 13px;display:flex;align-items:center;gap:11px;border-radius:12px;color:var(--muted);font-size:14px;font-weight:600;background:none;border:0;text-align:left;transition:background-color .18s cubic-bezier(.23,1,.32,1),color .18s cubic-bezier(.23,1,.32,1)}
.nav-link:hover,.nav-link.active{background:var(--soft);color:var(--fg)}
.nav-link .ico{width:19px;height:19px;stroke-width:1.7}
/* A <select> is sized by its widest <option>, and a grid item defaults to
   min-width:auto — together those let a long label like "ไทย medium (Thonburian)…"
   push the control straight through the 246px rail. minmax(0,1fr) on the track plus
   min-width:0 on the control is what actually contains it; width:100% alone does not. */
/* Settings is chrome, not content — the green belongs to the training views. Rebinding
   the accent inside this one subtree turns every hover, focus ring, gear and open-state
   marker grey-to-black without editing the twenty rules that reference it. */
.sidebar-foot{--accent:oklch(28% 0 0);--shadow-control:0 8px 18px oklch(0% 0 0/.13)}
.sidebar-foot{margin-top:auto;padding:12px;border:1px solid var(--border);border-radius:14px;min-width:0}
.sidebar-foot[open]{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* one master disclosure over the three groups — collapses the whole panel in one click
   and gives the transcript back the vertical space on a short screen */
.ctl-all > summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  padding:2px 0;user-select:none}
.ctl-all > summary::-webkit-details-marker{display:none}
.ctl-all > summary::before{content:'';width:0;height:0;flex:0 0 auto;
  border:5px solid transparent;border-left-color:var(--accent);
  transition:transform .15s cubic-bezier(.23,1,.32,1);transform-origin:2.5px 50%}
.ctl-all[open] > summary::before{transform:rotate(90deg)}
.ctl-all > summary h3{font-size:12px;color:var(--fg);flex:1}
.ctl-all > summary .ico{width:15px;height:15px;color:var(--muted);stroke-width:1.9}
.ctl-all[open] > summary .ico{color:var(--accent)}
.ctl-all > summary:hover .ico{color:var(--accent)}
.ctl-all > summary:hover h3{color:var(--accent)}
.ctl-all > .ctl-group:first-of-type{padding-top:10px;border-top:1px solid var(--border)}
.ctl-group{min-width:0}
/* The rail is 246px and .btn is nowrap by default — a long control label spilled out
   of the sidebar instead of wrapping inside it. */
.ctl-group .btn{white-space:normal;text-align:left;line-height:1.3;padding-top:8px;padding-bottom:8px;height:auto}
.ctl-group[open]{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.ctl-group + .ctl-group{padding-top:12px;border-top:1px solid var(--border)}
/* the whole header row is the hit target, and the caret says which way it will go */
.ctl-group > summary{display:flex;align-items:center;gap:6px;cursor:pointer;
  list-style:none;padding:2px 0;border-radius:8px;user-select:none}
.ctl-group > summary::-webkit-details-marker{display:none}
.ctl-group > summary::before{content:'';width:0;height:0;flex:0 0 auto;
  border:4px solid transparent;border-left-color:var(--muted);
  transition:transform .15s cubic-bezier(.23,1,.32,1);transform-origin:2px 50%}
.ctl-group[open] > summary::before{transform:rotate(90deg)}
.ctl-group > summary:hover h3{color:var(--fg)}
.ctl-group h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.sidebar-foot select,.agent-settings-body select,.system-grid select{
  width:100%;min-width:0;max-width:100%;min-height:38px;padding:0 30px 0 10px;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:13px;
  text-overflow:ellipsis;cursor:pointer}
.sidebar-foot select:hover,.agent-settings-body select:hover,.system-grid select:hover{border-color:var(--accent)}
.sidebar-foot select option:disabled,.agent-settings-body select option:disabled,
.system-grid select option:disabled{color:var(--muted);background:var(--soft)}   /* premium voices: visible, not pickable */
.control-caption{margin:10px 0 5px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ctl-group summary+.control-caption{margin-top:4px}
.sidebar-foot .btn.tiny,.system-grid .btn.tiny{width:100%;justify-content:center}
.sidebar-foot .foot-note{margin:0;color:var(--muted);line-height:1.4}
#micTestOut:empty{display:none}
.mode-toggle{display:inline;padding:3px 7px;border:1px solid var(--border);border-radius:6px;
  background:var(--soft);color:var(--fg);font:inherit;font-size:12px;font-weight:700;line-height:1;
  cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.mode-toggle[data-mode="live"]{border-color:color-mix(in srgb,var(--brand-live) 48%,var(--border));
  background:color-mix(in srgb,var(--brand-live) 11%,var(--surface));color:var(--brand-live)}
.mode-toggle:hover,.mode-toggle:focus-visible{border-color:currentColor;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 12%,transparent)}
.mode-settings{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.mode-settings[hidden]{display:none!important}
.live-field{display:grid;gap:6px;font-size:12px;font-weight:600}
.live-field select{font-weight:400}
.live-recommend{margin:-4px 0 2px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--brand-live) 28%,var(--border));
  border-radius:9px;background:color-mix(in srgb,var(--brand-live) 6%,var(--surface));color:var(--fg);
  display:grid;grid-template-columns:minmax(0,1fr);gap:3px;min-width:0;max-width:100%;
  font-size:11px;line-height:1.35;overflow:hidden}
.live-rec-label{color:var(--muted);font-weight:650;overflow-wrap:anywhere}
.live-recommend code{display:block;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;
  color:var(--brand-live);font:600 11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.live-rec-meta{color:var(--muted);font-size:10px}
.live-voice-hint{margin:-7px 0 0;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:76px;padding:0 clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);background:color-mix(in oklch, var(--bg) 90%, transparent);backdrop-filter:blur(14px);position:sticky;top:0;z-index:3}
.topbar-title{font-size:14px;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:var(--surface);font-size:13px;font-weight:600;flex:0 0 auto}
.btn.mobile-nav{display:none}
.nav-backdrop{display:none}
.content{width:min(1280px,100%);margin:0 auto;padding:clamp(24px,4vw,48px) clamp(20px,4vw,48px) 72px}
.view{display:none}
.view.active{display:block;animation:fade .26s cubic-bezier(.23,1,.32,1)}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}

/* ══ controls ══ */
.btn{min-height:46px;border:1px solid var(--border);border-radius:12px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--surface);color:var(--fg);font-weight:600;font-size:14px;letter-spacing:.02em;white-space:nowrap;transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .18s cubic-bezier(.23,1,.32,1),background-color .18s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px oklch(23% .022 158.5 / .08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{cursor:not-allowed;color:color-mix(in oklch, var(--muted) 78%, var(--surface));background:var(--soft);box-shadow:none;transform:none}
.btn.primary{border-color:transparent;background:var(--accent);color:var(--surface);box-shadow:var(--shadow-control)}
.btn.primary:hover{background:color-mix(in oklch, var(--accent) 88%, black)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--soft);color:var(--fg)}
.btn.danger{color:var(--danger);border-color:color-mix(in oklch, var(--danger) 34%, var(--border))}
.btn.danger:hover{background:color-mix(in oklch, var(--danger) 8%, var(--surface))}
.btn.tiny{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.back{margin-bottom:18px}

.pill,.tag,.status,.badge{min-height:30px;padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.015em}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-live);box-shadow:0 0 0 4px color-mix(in oklch, var(--brand-live) 18%, transparent)}
.tag.lang{color:var(--info);border-color:color-mix(in oklch, var(--info) 32%, var(--border))}
.tag.d-easy{color:var(--success);border-color:color-mix(in oklch, var(--success) 34%, var(--border))}
.tag.d-medium{color:var(--gold);border-color:color-mix(in oklch, var(--gold) 40%, var(--border))}
.tag.d-hard{color:var(--danger);border-color:color-mix(in oklch, var(--danger) 34%, var(--border))}
.badge{font-size:13px;padding:7px 14px}
.badge.won{color:var(--success);border-color:color-mix(in oklch, var(--success) 38%, var(--border));background:color-mix(in oklch, var(--success) 8%, var(--surface))}
.badge.meet{color:var(--info);border-color:color-mix(in oklch, var(--info) 38%, var(--border));background:color-mix(in oklch, var(--info) 7%, var(--surface))}
.badge.follow{color:var(--gold);border-color:color-mix(in oklch, var(--gold) 42%, var(--border));background:color-mix(in oklch, var(--gold) 9%, var(--surface))}
.badge.lost,.badge.none{color:var(--danger);border-color:color-mix(in oklch, var(--danger) 34%, var(--border));background:color-mix(in oklch, var(--danger) 6%, var(--surface))}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 0 oklch(100% 0 0 / .5)}
.card-pad{padding:26px}
.section-t{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.section-t::after{content:"";flex:1;height:1px;background:var(--border)}
.empty{color:var(--muted);padding:48px 0;text-align:center}

/* ══ home / overview ══ */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:24px;align-items:stretch}
.hero-panel{padding:clamp(28px,4vw,48px);min-height:400px;display:flex;flex-direction:column}
.hero-panel h1{font-size:clamp(32px,4.4vw,52px)}
.hero-panel .actions{margin-top:auto;padding-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.flow-card{padding:12px;display:grid;gap:10px;align-content:start}
.flow-step{padding:18px;border-radius:14px;background:var(--soft);display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:13px;align-items:center}
.step-number{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);font-family:var(--font-mono);font-size:12px}
.flow-step strong{font-size:14px}
.flow-step p{font-size:12px;color:var(--muted)}
.flow-step .ico{color:var(--muted)}
.section-title{margin:48px 0 16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric{padding:22px}
.metric strong{display:block;font-family:var(--font-mono);font-size:24px;font-weight:600;letter-spacing:-.02em}
.metric span{color:var(--muted);font-size:13px}

/* ══ picker ══ */
.persona-toolbar{margin-bottom:22px;display:grid;gap:14px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.search{position:relative;flex:1;min-width:min(360px,100%)}
.search input{width:100%;height:46px;padding:0 16px 0 42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--fg);outline:none}
.search input:focus{border-color:var(--accent)}
.search .ico{position:absolute;left:14px;top:14px;width:19px;height:19px;color:var(--muted);pointer-events:none}
.persona-state{min-height:210px;padding:clamp(22px,4vw,38px);display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:20px}
.persona-state[hidden]{display:none}
.persona-state h2{font-size:clamp(20px,2.6vw,26px)}
.persona-state p{margin:8px 0 16px;color:var(--muted)}
.state-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--muted)}
.state-mark .ico{width:22px;height:22px}

/* ══ modal ══ */
.modal{width:min(520px,calc(100% - 32px));padding:0;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.modal::backdrop{background:oklch(18% .02 155 / .58)}
.modal[open]{animation:dialog-in .2s cubic-bezier(.2,0,0,1)}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal form,.modal .modal-body{padding:clamp(22px,4vw,30px)}
.modal-actions{margin-top:26px;display:flex;justify-content:flex-end;gap:10px}


.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.chip{min-height:40px;padding:0 15px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600;transition:.16s}
.chip:hover{color:var(--fg);border-color:color-mix(in oklch, var(--accent) 40%, var(--border))}
.chip.on{background:var(--fg);border-color:var(--fg);color:var(--surface)}
/* Customer grid: every card in a row shares the row height so CTAs line up on the
   bottom edge of the frame — short bios must not lift 「เริ่มสนทนา」up the card. */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(430px,1fr));
  gap:20px;
  align-items:stretch;
}
.persona-tile{
  position:relative;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .2s;
}
.persona-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* 9:16 framed portrait beside the copy, CTA pinned to the bottom of the tile */
.tile-body{
  padding:16px;
  display:flex;
  gap:18px;
  align-items:stretch;
  flex:1 1 auto;
  min-height:calc(var(--agent-frame-height) + 32px);
}
.tile-photo{
  position:relative;
  flex:0 0 var(--agent-frame-width);
  align-self:flex-start;
  width:var(--agent-frame-width);
  height:var(--agent-frame-height);
  border-radius:14px;
  background:var(--soft);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.tile-photo-btn{padding:0;border:0;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
.tile-photo-btn:focus-visible{outline:3px solid color-mix(in oklch,var(--accent) 45%,transparent);outline-offset:3px}
.tile-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--agent-photo-position, center 18%)}
.tile-photo .mark{font-family:var(--font-display);font-size:38px;font-weight:600;color:var(--muted)}
.tile-langs{position:absolute;left:10px;bottom:10px;display:flex;gap:5px;flex-wrap:wrap}
.tile-langs .tag{min-height:24px;padding:3px 8px;font-size:11px;background:color-mix(in oklch, var(--surface) 88%, transparent);backdrop-filter:blur(10px);color:var(--fg)}
/* Copy column fills remaining height of the card; actions use margin-top:auto. */
.tile-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;
  min-height:var(--agent-frame-height);
}
.tile-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-shrink:0}
.tile-eyebrow{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.tile-name{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.tile-name span{display:block;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0}
/* Customer cards (first page): trait chips stay within 2 rows */
.tile-traits{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;
  max-height:calc(28px * 2 + 6px); /* 2 rows of chips + one gap */
  overflow:hidden;
  align-content:flex-start;
  flex-shrink:0;
}
.tile-traits .tag{
  background:var(--soft);color:var(--fg);
  min-height:28px;padding:4px 10px;font-size:11px;
  max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Tagline absorbs free space so short vs long copy doesn't move the CTA row. */
.tile-tag{
  margin-top:14px;
  font-size:14px;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1 1 auto;
  min-height:calc(1.55em * 2); /* reserve ~2 lines so empty-ish cards still breathe */
}
.tile-actions{
  margin-top:auto;
  padding-top:16px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  flex-shrink:0;
  width:100%;
}
.tile-actions .btn{min-height:42px;font-size:13px}
/* Primary CTA is the same short label on every card now that the customer's name has
   left the button, so it needs no room to grow — just a floor it can shrink below on a
   narrow card without spilling past the edge. */
.tile-actions .btn.primary{
  flex:1 1 12rem;
  min-width:0;
  justify-content:center;
  line-height:1.25;
  padding-block:9px;
}
/* delete lives in the action row — as a corner overlay it sat on top of the difficulty tag */
.card-del{margin-left:auto;padding:0 10px;color:var(--muted);flex:0 0 auto}
.card-del:hover{color:var(--danger);background:color-mix(in oklch, var(--danger) 8%, var(--surface))}

/* ══ brief ══ */
.call-brief-card .sect{padding-top:12px;border-top:1px solid var(--line, rgba(0,0,0,.06))}
.call-brief-card .sect:first-of-type{padding-top:0;border-top:0}
/* ══ brief ══ */
.brief{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);gap:22px;align-items:start}
.brief-col{display:grid;gap:18px;align-content:start}
.brief-hero{grid-column:1/-1;display:grid;grid-template-columns:minmax(260px,.42fr) minmax(0,1.58fr);overflow:hidden;min-height:360px}
/* PORTRAIT RULE (all agents, current + future): every photo frame uses cover + overflow
   clip so the image fills the rounded box edge-to-edge. Do not use object-fit:contain
   for persona portraits — that leaves letterbox bands. Same rule for tile / brief / call. */
.brief-photo{position:relative;background:var(--soft);display:grid;place-items:center;min-height:300px;overflow:hidden}
.brief-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.brief-photo .mark{font-family:var(--font-display);font-size:56px;font-weight:600;color:var(--muted)}
.brief-copy{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column}
.brief-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.brief-copy .role{margin-top:6px;color:var(--muted);font-size:14px}
.trait-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.trait-row .tag{background:var(--soft);color:var(--fg)}
.quote{margin:22px 0 0;padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-family:var(--font-display);font-size:18px;line-height:1.45;letter-spacing:-.01em}
.sect{margin-top:24px}
.kv{display:grid;grid-template-columns:126px minmax(0,1fr);gap:8px 16px;font-size:14px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.list li{display:flex;gap:10px;align-items:flex-start;color:var(--fg)}
.list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);margin-top:.6em;flex:0 0 auto}
.list.do li::before{background:var(--success)}
.list.dont li::before{background:var(--danger)}
.list.hint li::before{background:var(--info)}
.difficulty{margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.difficulty-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.difficulty-label strong{font-size:13px}
.difficulty-track{height:8px;margin-top:9px;border-radius:99px;background:var(--soft);overflow:hidden}
.difficulty-fill{height:100%;border-radius:inherit;background:var(--gold)}

.field{display:block;margin-top:16px}
.field>span{display:block;font-size:13px;font-weight:600;color:var(--fg);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--fg);outline:none;resize:vertical}
.field textarea{line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field .hint{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:6px}
.start-note{font-size:12px;color:var(--muted);margin-top:12px;text-align:center}
.btn-block{width:100%;margin-top:18px}

/* ══ call ══ */
#view-call{position:fixed;inset:0;z-index:10;background:var(--bg)}
#view-call.active{display:grid;grid-template-rows:72px minmax(0,1fr);height:100vh;height:100dvh;overflow:hidden;animation:none}
.call-topbar{padding:0 clamp(16px,3vw,32px);border-bottom:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:14px}
.who{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.who>div{min-width:0}
.who .avatar{width:42px;height:42px;font-size:14px}
.who-name{font-family:var(--font-display);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-state{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
.dot.live{background:var(--brand-live);box-shadow:0 0 0 4px color-mix(in oklch, var(--brand-live) 18%, transparent)}
.dot.think{background:var(--gold);animation:pulse 1.1s infinite}
.dot.talk{background:var(--accent);animation:pulse .8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklch, var(--accent) 40%, transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.call-head-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.timer{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--fg)}
.langsw{display:flex;align-items:center;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.lang-now{min-height:30px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:var(--fg);color:var(--surface);font-size:12px;font-weight:600}
.lang-now::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-live)}

.call-grid{min-height:0;display:grid;grid-template-columns:minmax(320px,.82fr) minmax(440px,1.18fr);transition:grid-template-columns .22s ease}
.call-grid.chat-hidden{grid-template-columns:1fr;grid-template-rows:1fr;min-height:0}
.call-grid.chat-hidden .transcript-panel{display:none}
/* Full-stage call: portrait on top, status/controls below — never overlap */
.call-grid.chat-hidden .voice-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  padding:clamp(14px,2vw,28px) clamp(14px,2vw,28px) clamp(18px,2.4vw,32px);
  min-height:0;
  height:100%;
  overflow:hidden;
}
.call-grid.chat-hidden .person-live{
  flex:1 1 auto;
  min-height:0;
  width:min(100%, 480px);
  max-height:calc(100% - 172px); /* reserve room for status + controls + hint */
  aspect-ratio:3 / 4;
  height:auto;
  border-radius:24px;
  background:oklch(20% .02 155);
}
/* Fill the rounded frame edge-to-edge (all personas share the same box).
   contain left letterboxing / empty bands — cover + overflow:hidden clips cleanly. */
.call-grid.chat-hidden .person-live img{
  object-fit:cover;
  object-position:var(--agent-photo-position, center 18%);
  width:100%;
  height:100%;
}
.call-grid.chat-hidden .audio-state,
.call-grid.chat-hidden .call-controls{
  flex:0 0 auto;
  width:min(100%, 520px);
  position:relative;
  z-index:2;
}
.call-grid.chat-hidden .audio-state{
  padding:4px 12px 0;
  text-align:center;
}
.call-grid.chat-hidden .audio-state h2{
  font-size:clamp(17px, 2.1vw, 22px);
  line-height:1.3;
  color:var(--surface);
}
.call-grid.chat-hidden .audio-state p{
  display:block !important; /* keep helper line visible even on small screens */
  margin:8px auto 0;
  max-width:38ch;
  font-size:13px;
  line-height:1.45;
  color:oklch(85% .01 155);
  white-space:normal;
  overflow-wrap:anywhere;
}
.call-grid.chat-hidden .audio-state .waveform{margin-top:12px}
.call-grid.chat-hidden .call-controls{margin-top:2px}
.voice-stage{min-height:0;padding:clamp(18px,2.4vw,30px);background:var(--fg);color:var(--surface);display:flex;flex-direction:column}
.person-live{flex:1;min-height:180px;border-radius:22px;overflow:hidden;position:relative;background:oklch(28% .02 155);display:grid;place-items:center;isolation:isolate}
/* Absolute fill avoids Safari resolving height:100% from the image's intrinsic ratio
   before the flex item has its final height (the cause of the blank band above it). */
.person-live img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--agent-photo-position, center 18%)}
.person-live .mark{font-family:var(--font-display);font-size:64px;font-weight:600;color:oklch(70% .02 155)}
.person-label{position:absolute;left:16px;bottom:16px;padding:10px 13px;border-radius:11px;background:oklch(19% .02 155 / .88);backdrop-filter:blur(10px)}
.person-label strong{display:block;font-size:14px}
.person-label span{font-size:11px;opacity:.72}
.audio-state{padding:22px 4px 0;text-align:center}
.audio-state h2{color:var(--surface);font-size:20px}
.audio-state p{margin-top:6px;color:oklch(85% .01 155);font-size:12px}
.waveform{height:40px;margin:16px auto 0;display:flex;justify-content:center;align-items:center;gap:5px}
.waveform span{width:4px;height:10px;border-radius:4px;background:oklch(60% .02 155);transition:background-color .2s}
.waveform.on span{background:var(--brand-live);animation:wave 1.1s ease-in-out infinite}
.waveform.on span:nth-child(2n){animation-delay:-.35s}
.waveform.on span:nth-child(3n){animation-delay:-.7s}
@keyframes wave{0%,100%{height:10px;opacity:.45}50%{height:36px;opacity:1}}
.waveform.mic-input span{
  height:var(--mic-h,6px);animation:none;background:oklch(68% .08 190);
  opacity:.5;transition:height 55ms linear,background-color 90ms linear,opacity 90ms linear
}
.waveform.mic-input.hearing span{background:var(--brand-live);opacity:1}
.call-controls{margin-top:18px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.round-btn{width:50px;height:50px;border-radius:50%;border:1px solid oklch(100% 0 0 / .16);background:oklch(100% 0 0 / .09);color:var(--surface);display:grid;place-items:center;transition:.16s}
.round-btn:hover{background:oklch(100% 0 0 / .16)}
.round-btn.on{background:var(--brand-live);border-color:transparent;color:oklch(23% .022 158.5)}
.round-btn.rec{background:var(--danger);border-color:transparent;animation:pulse 1.2s infinite}
.round-btn.end{background:var(--danger);border-color:transparent}
.round-btn:disabled{opacity:.4;cursor:not-allowed}
.round-btn .ico{width:20px;height:20px}

.transcript-panel{min-height:0;background:var(--surface);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-left:1px solid var(--border)}
.transcript-head{padding:20px 26px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:14px}
.transcript-head h2{font-size:20px}
.transcript-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.round-btn .ico-chat-show[hidden],.round-btn .ico-chat-hide[hidden]{display:none}
.call-grid.chat-hidden #btnToggleChat{background:var(--brand-live);border-color:transparent;color:oklch(23% .022 158.5)}
.call-grid.chat-hidden #btnToggleChat .ico-chat-hide{display:none}
.call-grid.chat-hidden #btnToggleChat .ico-chat-show{display:block}
.call-grid:not(.chat-hidden) #btnToggleChat .ico-chat-show{display:none}
.transcript{min-height:0;overflow-y:auto;padding:24px 26px;scroll-behavior:smooth}
.utterance{display:grid;grid-template-columns:42px minmax(0,1fr);gap:13px;margin-bottom:22px;animation:pop .2s cubic-bezier(.23,1,.32,1)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.utterance .speaker{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--soft);font-size:12px;font-weight:600;color:var(--fg)}
.utterance.cust .speaker{background:var(--fg);color:var(--surface)}
.utterance-meta{display:flex;gap:10px;align-items:baseline;margin-bottom:5px}
.utterance-meta strong{font-size:13px}
.utterance-meta time{font-family:var(--font-mono);color:var(--muted);font-size:11px}
.utterance .body{max-width:66ch;font-size:15px;white-space:pre-wrap;word-break:break-word}
.utterance.me .body{color:var(--fg)}
.utterance.interim .body{color:var(--muted);font-style:italic}
.utterance.sys{grid-template-columns:1fr;justify-items:center;text-align:center}
.utterance.sys .body{font-size:12px;color:var(--muted);padding:8px 14px;border:1px dashed var(--border);border-radius:999px}
.think-dots{display:inline-flex;gap:5px;align-items:center;height:1.2em}
.think-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bob 1.3s infinite}
.think-dots i:nth-child(2){animation-delay:.18s}
.think-dots i:nth-child(3){animation-delay:.36s}
@keyframes bob{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.composer-wrap{padding:14px 26px 16px;border-top:1px solid var(--border);background:var(--bg)}
.composer{display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;min-height:50px;max-height:130px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);outline:none;resize:none}
.composer textarea:focus{border-color:var(--accent)}
.composer .send{height:50px;padding:0 18px}
.composer .mic{width:50px;height:50px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:grid;place-items:center;transition:.16s}
.composer .mic:hover{color:var(--accent);border-color:var(--accent)}
.composer .mic.rec{background:var(--danger);border-color:transparent;color:var(--surface);animation:pulse 1.2s infinite}
.composer .mic:disabled{opacity:.45;cursor:not-allowed}
.composer-note{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--muted)}
.tts-toggle{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.tts-toggle input{accent-color:var(--accent);width:16px;height:16px}

.pill.mood{font-weight:600;transition:background-color .3s,color .3s,border-color .3s}
.pill.mood.calm{color:var(--muted)}
.pill.mood.good{color:var(--success);border-color:color-mix(in oklch, var(--success) 38%, var(--border));background:color-mix(in oklch, var(--success) 8%, var(--surface))}
.pill.mood.bad{color:var(--danger);border-color:color-mix(in oklch, var(--danger) 38%, var(--border));background:color-mix(in oklch, var(--danger) 8%, var(--surface))}

/* ══ report ══ */
.report-hero{padding:clamp(24px,3.4vw,38px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.score-ring{width:148px;height:148px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) calc(var(--v)*1%), var(--soft) 0)}
.score-ring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface)}
.score-value{position:relative;z-index:1;text-align:center}
.score-value strong{display:block;font-family:var(--font-mono);font-size:38px;line-height:1}
.score-value span{color:var(--muted);font-size:11px}
.report-outcome{margin:18px 0 8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.report-grid{margin-top:20px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:20px;align-items:start}
.report-col{display:grid;gap:20px}
.skill-list{display:grid;gap:16px}
.skill-row{display:grid;grid-template-columns:150px minmax(0,1fr) 38px;gap:12px;align-items:center}
.skill-row>span{font-size:13px}
.skill-row .value{font-family:var(--font-mono);text-align:right;color:var(--muted)}
.skill-note{grid-column:1/-1;font-size:12px;color:var(--muted);margin-top:-8px}
.bar{height:9px;border-radius:99px;overflow:hidden;background:var(--soft)}
.bar>i{display:block;height:100%;border-radius:inherit;background:var(--fg);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.coach-list{display:grid;gap:14px}
.coach-item{padding:16px;border-radius:14px;background:var(--soft)}
.coach-item strong{font-size:14px}
.coach-item .why{margin-top:5px;color:var(--muted);font-size:13px}
.coach-item .quote-said,.coach-item .rewrite{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:13px}
.coach-item .quote-said{color:var(--muted)}
.qlabel{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.coach-item .rewrite{color:var(--fg)}
.coach-item .rewrite .qlabel{color:var(--success)}
.tabs{display:flex;gap:7px;border-bottom:1px solid var(--border);margin:30px 0 20px;overflow-x:auto}
.tab{min-height:44px;padding:0 13px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap}
.tab.active{color:var(--fg);border-bottom-color:var(--accent)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.timeline{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:15px;overflow:hidden}
.timeline-row{padding:16px 18px;display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;background:var(--surface);font-size:14px}
.timeline-row .who-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.timeline-row.me .who-tag{color:var(--accent)}
.timeline-row.good .who-tag{color:var(--success)}
.timeline-row.miss .who-tag{color:var(--gold)}
.report-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.loading{display:flex;gap:12px;align-items:center;justify-content:center;color:var(--muted);padding:80px 0}
.loading-eval{flex-direction:column;gap:18px;text-align:center;max-width:34rem;margin:0 auto;padding:72px 20px}
.loading-copy{display:grid;gap:10px}
.loading-title{margin:0;font-size:16px;font-weight:600;color:var(--fg)}
.loading-note{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.spin{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ history ══ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.stat{padding:20px}
.stat b{display:block;font-family:var(--font-mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
.stat span{color:var(--muted);font-size:13px}
.hist{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:15px;overflow:hidden}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:16px 18px;background:var(--surface);cursor:pointer;transition:background-color .15s}
.hrow:hover{background:var(--soft)}
.hrow b.name{font-family:var(--font-display);font-size:15px}
.hrow .hmeta{font-size:12px;color:var(--muted);margin-top:3px}
.hrow .hscore{font-family:var(--font-mono);font-size:18px;min-width:42px;text-align:right}

/* ══ editor ══ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-top:20px}
.form .full{grid-column:1/-1}
.form h2{grid-column:1/-1;margin-top:26px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-family:var(--font-body)}
.form h2:first-child{margin-top:0;border-top:0;padding-top:0}
.form-actions{grid-column:1/-1;display:flex;gap:10px;margin-top:26px}
.check-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;min-height:46px}
.check-row label{display:inline-flex;align-items:center;gap:7px;font-size:14px}
.check-row input{accent-color:var(--accent);width:17px;height:17px}

/* ══ toast ══ */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;padding:13px 20px;border-radius:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);font-size:14px;max-width:min(92vw,560px)}
.toast.bad{border-color:color-mix(in oklch, var(--danger) 40%, var(--border));color:var(--danger)}

/* ══ responsive ══ */
@media (max-width:1080px){
  .brief{grid-template-columns:1fr}
  .brief-hero{order:-2}
  .brief-col.setup{order:-1}   /* CTA and guide before the long dossier on narrow screens */
  .report-grid{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .metric-row{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(300px,calc(100vw - 56px));transform:translateX(-104%);transition:transform .22s cubic-bezier(.2,0,0,1);box-shadow:var(--shadow)}
  body.nav-open{overflow:hidden}
  body.nav-open .sidebar{transform:translateX(0)}
  .nav-backdrop{position:fixed;inset:0;z-index:3;border:0;background:oklch(18% .02 155 / .48);opacity:0;pointer-events:none;transition:opacity .15s}
  body.nav-open .nav-backdrop{display:block;opacity:1;pointer-events:auto}
  .btn.mobile-nav{display:inline-flex}
  .call-grid{grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr)}
}
@media (max-width:860px){
  .brief-hero{grid-template-columns:1fr}
  .brief-photo{min-height:280px}
  #view-call.active{grid-template-rows:64px minmax(0,1fr)}
  .call-grid{grid-template-columns:1fr;grid-template-rows:minmax(220px,.4fr) minmax(0,1fr)}
  .call-grid.chat-hidden{grid-template-rows:1fr}
  .call-grid.chat-hidden .voice-stage{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    overflow:hidden;
  }
  .call-grid.chat-hidden .person-live{
    width:min(100%, 380px);
    max-height:calc(100% - 168px);
    aspect-ratio:3 / 4;
    height:auto;
    flex:1 1 auto;
    min-height:0;
  }
  .call-grid.chat-hidden .person-live img{object-fit:cover;object-position:var(--agent-photo-position, center 18%)}
  .call-grid.chat-hidden .audio-state p{display:block !important}
  .voice-stage{flex-direction:row;align-items:center;gap:18px;padding:16px}
  .person-live{flex:0 0 34%;min-height:0;height:100%;border-radius:16px}
  .audio-state{flex:1;padding:0}
  .waveform{height:30px;margin-top:10px}
  .call-controls{margin-top:12px}
  .transcript-panel{border-left:0;border-top:1px solid var(--border)}
  .form{grid-template-columns:1fr}
  .topbar-title{display:none}
  .metric-row{grid-template-columns:1fr}
  .section-title{margin-top:36px}
  .persona-state{grid-template-columns:1fr}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions .btn{width:100%}
}
@media (max-width:620px){
  .content{padding:20px 16px 60px}
  .topbar{height:64px;padding:0 16px}
  .topbar-actions .btn{display:none}
  .grid{grid-template-columns:1fr}
  /* call topbar wraps to two rows; the red end button lives on the stage here */
  #view-call.active{grid-template-rows:auto minmax(0,1fr)}
  .call-topbar{padding:10px 14px;gap:8px;flex-wrap:wrap}
  .who{flex:1 1 100%}
  .who .avatar{display:none}
  .who-name{font-size:14px}
  .call-head-right{flex:1 1 100%;gap:8px;justify-content:space-between}
  .call-head-right .timer{font-size:13px}
  .call-head-right .btn.danger{display:none}
  .report-hero{grid-template-columns:1fr;justify-items:start}
  .score-ring{width:126px;height:126px}
  .skill-row{grid-template-columns:110px minmax(0,1fr) 32px;font-size:13px}
  .hero-panel{min-height:0}
  .hero-panel .actions{padding-top:24px}
  .hero-panel .actions .btn{width:100%}
  .hrow{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
  .hrow>div{grid-column:1/-1}
  .hrow .badge{grid-column:1;justify-self:start}
  .transcript,.transcript-head,.composer-wrap{padding-left:16px;padding-right:16px}
  .timeline-row{grid-template-columns:1fr;gap:6px}
  /* stage becomes a compact strip so the transcript keeps the screen */
  .call-grid{grid-template-rows:auto minmax(0,1fr)}
  .voice-stage{flex-direction:column;padding:12px 14px}
  .person-live{flex:0 0 132px;width:100%;border-radius:14px}
  .person-label{display:none}                      /* name is already in the call topbar here */
  .audio-state{padding:12px 0 0}
  .audio-state h2{font-size:17px}
  .audio-state p{display:none}
  /* Full-stage (chat hidden): keep status line readable, portrait smaller */
  .call-grid.chat-hidden .audio-state p{display:block !important;font-size:12px;max-width:32ch}
  .call-grid.chat-hidden .person-live{max-height:calc(100% - 156px)}
  .waveform{height:26px;margin-top:8px}
  .call-controls{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .waveform.mic-input span{transition:none}
}

/* ══ ห้องเครื่อง ══ */
.view-head{margin-bottom:22px}
.view-head h1{font-size:clamp(26px,3vw,34px)}
.view-head p{margin-top:6px;color:var(--muted);font-size:14px}

.lab-tabs{display:inline-flex;gap:4px;margin:0 0 20px;padding:4px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.lab-tab{padding:8px 20px;border:0;border-radius:999px;background:none;
  color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color .16s cubic-bezier(.23,1,.32,1),color .16s}
.lab-tab:hover{color:var(--fg)}
.lab-tab.active{background:var(--accent);color:#fff}
.lab-pane{display:none}
.lab-pane.active{display:grid;gap:16px;align-content:start;animation:fade .22s cubic-bezier(.23,1,.32,1)}
/* Grid items default to min-width:auto, so a card holding a min-width table refuses to
   shrink and drags the whole page into a horizontal scroll on a phone. The table keeps
   its own scroller; the card must not grow with it. */
.lab-pane.active>*{min-width:0}

/* .card ships without padding — the lab is the only place that needs it by default */
.lab-pane .card{padding:20px 22px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.card-head h2{font-size:16px;letter-spacing:-.01em}
.card-head .muted{max-width:52ch}

/* ── สถิติ ── */
.lab-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.lab-stats .stat{padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);display:grid;gap:3px}
.lab-stats .stat b{font-family:var(--font-display);font-size:28px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lab-stats .stat span{font-size:12px;color:var(--muted)}

/* ── ฟอร์ม ── */
.lab-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0 0 14px}
.lab-grid label,label.block{display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:var(--muted);font-weight:600;min-width:0}
.lab-grid input,.lab-grid select,label.block input{width:100%;min-width:0;min-height:40px;
  padding:0 12px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
.lab-grid input:focus,.lab-grid select:focus,label.block input:focus{border-color:var(--accent);outline:none}
label.block{margin:0 0 14px}

.row-between{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.row-between label{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--muted)}
.row-between select{min-height:38px;padding:0 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);color:var(--fg);font:inherit;font-size:14px}
.row-gap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ── ตาราง: ยาวได้ แต่ต้องไม่กลืนทั้งหน้า ── */
.lab-table-wrap{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
.lab-table{width:100%;border-collapse:collapse;font-size:13px}
.lab-table thead th{position:sticky;top:0;z-index:1;background:var(--soft);
  padding:9px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
.lab-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.lab-table tbody tr:last-child td{border-bottom:0}
.lab-table tbody tr:hover td{background:var(--soft)}
.lab-table .col-wrong{color:var(--muted);font-size:12px}
.lab-table .col-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lab-table .col-act{width:34px;text-align:right}
.lab-table tr.is-best td{background:oklch(59% .15 145 / .07)}
.lab-table tr.is-warn td{background:oklch(68% .15 70 / .09)}
.lab-table tr.is-off td{opacity:.5}
.lab-table tr.is-auto .col-right{border-left:2px solid var(--info);padding-left:10px}
.probe-out{min-width:220px;font-size:12px}

/* ── ผลการซ่อม ── */
.repair-detail{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:grid;gap:9px}
.repair-row{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:baseline}
.repair-row > span:first-child{font-size:11px;color:var(--muted);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase}
.repair-row code{font-size:13px;line-height:1.5;word-break:break-word;
  background:var(--soft);padding:6px 10px;border-radius:8px;display:block}
.repair-row code.ok{background:oklch(59% .15 145 / .1)}

/* ── ประวัติ ── */
.lex-log{list-style:none;padding:0;margin:0;display:grid;gap:8px;max-height:320px;overflow:auto}
.lex-log li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:13px}
.lex-log li.is-off{opacity:.5}
.lex-log time,.lex-log .when{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px}

/* ── ปุ่ม/ป้าย ── */
.btn.small{min-height:32px;padding:0 12px;font-size:12px;border-radius:9px}
.btn.icon{min-height:30px;width:30px;padding:0;border-radius:9px;line-height:0}
.btn.icon.fav{border:0;background:none}
.btn.danger{color:var(--danger);border-color:color-mix(in oklch,var(--danger) 30%,var(--border))}
.ico.star{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.ico.star.on{fill:var(--gold);stroke:var(--gold)}
.tag.auto{background:oklch(58% .13 250 / .12);border-color:transparent;color:var(--info)}
.ok{color:var(--success);font-weight:600}
.bad{color:var(--danger);font-weight:600}
.small{font-size:12px}
.fav-list{margin-top:12px;font-size:12px;color:var(--muted)}
.fav-list code{margin-right:6px}

/* ── แถบข้าง: ความเร็ว + voice id ── */
.speed-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:8px;font-size:12px;color:var(--muted);min-width:0}
.speed-row input[type=range]{width:100%;min-width:0;accent-color:var(--accent);margin:0}
.speed-row output{font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right;
  color:var(--fg);font-weight:600}
.tiny-input{width:100%;min-width:0;min-height:34px;padding:0 10px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);color:var(--fg);font-size:12px;font-family:var(--font-mono)}
.tiny-input:focus{border-color:var(--accent);outline:none}

@media (max-width:900px){
  .lab-tabs{display:flex;width:100%}
  .lab-tab{flex:1;text-align:center;padding:8px 10px}
  .lab-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lab-stats .stat b{font-size:22px}
}
@media (max-width:640px){
  .lab-pane .card{padding:16px}
  .repair-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .lab-table-wrap,.lex-log{max-height:none}
}

.tag.say{background:oklch(72% .135 82 / .16);border-color:transparent;color:oklch(45% .11 78);
  margin-top:4px;display:inline-flex}

.lang-sel{min-height:34px;padding:0 8px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface);color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.lang-sel:hover{border-color:var(--accent);color:var(--fg)}
/* Persona-specific voice recommendation */
.voice-suggestion {
  margin: 2px 0 4px;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--fg);
  font-size: 11px;
  line-height: 1.45;
}
.voice-suggestion.custom { border-style: dashed; color: var(--muted); }
.api-key-panel{display:grid;gap:8px;margin-top:8px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.api-key-panel[hidden]{display:none}
.api-key-panel label{font-size:11px;font-weight:700;color:var(--muted)}
.api-key-panel .btn{width:100%;min-height:40px}
#btnElevenApi{min-height:40px}
.api-key-panel .tiny-input{min-height:40px}

/* The eight customer training requirements are visible as one inspectable blueprint. */
.training-blueprint { grid-column: 1 / -1; }
.blueprint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.blueprint-grid > section {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.insight + .insight, .criterion + .criterion { margin-top: 12px; }
.insight p, .criterion p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.criterion > div { display: flex; justify-content: space-between; gap: 12px; }
.criterion span { color: var(--accent); font-weight: 700; }
.behavior-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.assessment-title { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

/* Honest production/security gap matrix from the customer's technical specification. */
.readiness-card { margin-top: 18px; padding: 22px; }
.readiness-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.readiness-head h2 { margin: 3px 0 0; }
.readiness-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.gap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.gap-item { padding: 12px; border: 1px solid var(--border); border-left: 3px solid var(--warn, #c5903e); border-radius: 10px; }
.gap-item.gap { border-left-color: var(--danger); }
.gap-item strong, .gap-item span { display: block; }
.gap-item span { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }

@media (max-width: 760px) {
  .blueprint-grid, .behavior-cols, .gap-grid { grid-template-columns: 1fr; }
  .readiness-head { display: block; }
  .readiness-counts { justify-content: flex-start; margin-top: 12px; }
  .btn.tiny { min-height: 40px; }
}

/* ══ SIGN-IN PAGE ══ (login.html — its own document, same tokens) */
.auth-body{display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px;
  background:radial-gradient(120% 90% at 8% 0%, color-mix(in oklch, var(--accent) 9%, var(--bg)) 0%, var(--bg) 58%)}
.auth-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:center;width:min(1040px,100%)}
.auth-brand h1{font-size:clamp(30px,3.4vw,44px);margin-top:6px}
.auth-logo{width:52px;height:52px;border-radius:14px;margin-bottom:22px}
.auth-card{align-self:stretch}
.auth-head{display:flex;justify-content:flex-end;margin-bottom:6px}
.auth-tabs{display:inline-flex;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--soft)}
.auth-form h2{margin-top:2px}
.auth-form .sub{margin:10px 0 4px;font-size:14px}
/* team filters, badges, credentials */
.admin-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.admin-filters .tiny-input{min-height:38px;min-width:200px;flex:0 1 260px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.admin-filters .chips{margin:0}
.admin-filters .chip{min-height:34px;font-size:12px}
.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gold);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.link-cell{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent);text-align:left}
.link-cell:hover{text-decoration:underline}
.cred-box{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:18px;padding:16px 18px;border:1px solid color-mix(in oklch, var(--accent) 38%, var(--border));border-radius:var(--radius-sm);background:var(--soft)}
.cred-box p{margin:2px 0}
.cred-pw{font-size:19px;font-weight:700;letter-spacing:.02em}
.cred-actions{display:flex;gap:8px}
.filter-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:11px 15px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--soft);font-size:14px}
.pw-caps{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--warn)}
.auth-help{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.5}

/* sign-up confirmation — status, not a toast */
.auth-sent{text-align:left}
.sent-mark{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;background:color-mix(in oklch, var(--success) 12%, var(--surface));color:var(--success)}
.sent-mark .ico{width:24px;height:24px}
.sent-facts{margin:18px 0 0;display:grid;gap:10px}
.sent-facts>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--soft)}
.sent-facts dt{margin:0;font-size:13px;color:var(--muted)}
.sent-facts dd{margin:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.sent-steps{margin:18px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--muted);font-size:14px;line-height:1.5}
.sent-steps li::marker{color:var(--accent);font-weight:700}
.auth-sent .btn{margin-top:20px}

/* show/hide password */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:9px}
.pw-eye:hover{color:var(--fg);background:var(--soft)}
.pw-eye .ico{width:19px;height:19px}
.auth-msg{margin-top:14px;font-size:14px;line-height:1.5;color:var(--accent);display:none}
.auth-msg.on{display:block}
.auth-msg.bad{color:var(--danger)}
@media (max-width:860px){
  .auth-shell{grid-template-columns:1fr;gap:26px}
  .auth-brand h1{font-size:26px}
  .auth-brand .lead{font-size:14px}
}

/* ══ TEAM / ADMIN ══ */
.sidebar-me{display:grid;gap:10px;margin-top:auto}
.sidebar-me .who-chip{display:flex;align-items:center;gap:10px;min-width:0}
.sidebar-me .who-name{text-align:left;max-width:none;flex:1 1 auto}
.sidebar-me .btn{width:100%;justify-content:center}
.sidebar-foot{margin-top:auto}

/* Account menu behind the top-right avatar: identity, role, password, sign out. */
.me-menu{position:relative;flex:0 0 auto}
button.avatar{border:0;cursor:pointer;font-family:inherit}
button.avatar:hover{opacity:.88}
button.avatar:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.avatar.lg{width:44px;height:44px;font-size:15px}
.me-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:264px;max-width:min(320px,calc(100vw - 24px));
  display:grid;gap:2px;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface);
  box-shadow:var(--shadow)}
.me-pop[hidden]{display:none}
.me-pop-head{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid var(--border);min-width:0}
.me-pop-who{display:grid;min-width:0}
.me-pop-who strong{font-family:var(--font-display);font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-pop-who span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-pop-who .me-pop-user{text-transform:none;letter-spacing:0;font-size:12px}
.me-pop-who .me-pop-user:empty{display:none}
.me-pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;
  background:none;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.me-pop-item:hover{background:var(--soft)}
.me-pop-item .ico{width:17px;height:17px;flex:0 0 auto}
.me-pop-item.danger{color:var(--danger)}
.avatar.has-photo{background-size:cover;background-position:center;color:transparent}

/* Customer page tabs: profile vs the engine settings that belong to THAT customer. */
.brief-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.brief-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.brief-tab[hidden]{display:none}
.brief-tab .ico{width:16px;height:16px;flex:0 0 auto}
.brief-tab:hover{color:var(--fg)}
.brief-tab.active{background:var(--fg);border-color:var(--fg);color:var(--surface)}

.agent-settings-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:16px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.agent-settings-head h2{margin:2px 0 6px}
/* Two readable columns on a desk, one on a phone — the rail's 246px cramp is gone. */
.agent-settings-body{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;min-width:0}
.agent-settings-body > *,.agent-settings-body .ctl-group > *{min-width:0;max-width:100%}
.agent-settings-body .mode-settings{display:contents}
.agent-settings-body .mode-settings[hidden]{display:none}
/* Every box in the grid is self-contained: a caption is never separated from the
   control it labels (the reason .live-pair exists at all). */
.agent-settings-body .ctl-group,
.agent-settings-body .live-pair,
.agent-settings-body .live-field,
.agent-settings-body .speed-row{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.agent-settings-body .ctl-group + .ctl-group{padding-top:14px}
.agent-settings-body .live-pair{display:grid;gap:6px;align-content:start}
.agent-settings-body .live-field{display:grid;gap:6px;align-content:start}
.agent-settings-body .live-field > span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.agent-settings-body .speed-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.agent-settings-body .control-caption{margin:0}
.agent-settings-body > .foot-note{grid-column:1/-1;margin:0}
/* Breathing room. The 6px grid gap that suits stacked dropdowns leaves explanatory
   text welded to the control above it — give every hint its own space. */
.agent-settings-body .ctl-group[open]{gap:10px}
.agent-settings-body .tiny,
.agent-settings-body .hint,
.agent-settings-body .voice-suggestion,
.agent-settings-body .live-voice-hint,
.agent-settings-body .live-recommend{margin:6px 0 2px;line-height:1.5}
.agent-settings-body .live-pair .tiny,
.agent-settings-body .live-pair .live-voice-hint,
.agent-settings-body .live-pair .live-recommend{margin-top:8px}
/* A caption introduces the control under it, so it needs the space ABOVE, not below. */
.agent-settings-body .control-caption + select,
.agent-settings-body .control-caption + .live-pair{margin-top:2px}
.agent-settings-body select + .control-caption{margin-top:12px}
.agent-settings-body select + select{margin-top:6px}
.agent-settings-body .ctl-group .btn{margin-top:4px}
.agent-settings-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding-top:20px;margin-top:22px;border-top:1px solid var(--border)}
.agent-settings-foot .tiny{flex:1 1 220px;margin:0}
@media (max-width:620px){
  .agent-settings-head{flex-direction:column}
  .agent-settings-foot .btn{flex:1 1 auto}
}

/* System settings dialog, opened from the avatar menu. */
.modal.wide{width:min(720px,calc(100vw - 32px));max-width:none}
.system-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:start;margin-top:20px;min-width:0}
.system-grid > *,.system-grid .ctl-group > *{min-width:0;max-width:100%}
.system-grid .ctl-group{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.system-grid .ctl-group + .ctl-group{padding-top:14px;border-top:1px solid var(--border)}

/* Profile photo cropper: circular frame, drag to pan, slider/wheel to zoom. */
.cropper{position:relative;width:144px;height:144px;margin:18px auto 4px;border-radius:50%;overflow:hidden;
  background:var(--soft);border:1px solid var(--border);cursor:grab;touch-action:none;display:grid;place-items:center}
.cropper:active{cursor:grabbing}
.cropper canvas{width:100%;height:100%;display:block}
.crop-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0 14px;
  text-align:center;font-size:12px;color:var(--muted);pointer-events:none}
.crop-empty[hidden]{display:none}
.crop-zoom{display:flex;align-items:center;gap:12px;margin:12px auto 0;max-width:280px;font-size:13px;color:var(--muted)}
.crop-zoom[hidden]{display:none}
.crop-zoom input{flex:1 1 auto;min-width:0}
.crop-pick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.crop-pick .btn[hidden]{display:none}
.who-chip{display:flex;align-items:center;gap:10px}
.who-chip .who-name{font-size:13px;font-weight:600;line-height:1.2;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.who-chip .who-name span{display:block;font-weight:500;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.admin-tabs{margin-bottom:20px}
.admin-sec{margin-bottom:28px;min-width:0}
.admin-sec h2{margin-bottom:4px}
.admin-sec .sub{margin:0 0 16px}
.admin-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm)}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}
.admin-table thead th{position:sticky;top:0;z-index:1;background:var(--soft);text-align:left;
  padding:10px 12px;font-weight:600;font-size:12px;letter-spacing:.03em;color:var(--muted);border-bottom:1px solid var(--border)}
.admin-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-table tbody tr:hover td{background:var(--soft)}
.admin-table .col-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.admin-table .col-act{white-space:nowrap;text-align:right}
.admin-table .col-act .btn{margin-left:6px}
.admin-table select{min-height:34px;padding:0 8px;border:1px solid var(--border);border-radius:9px;background:var(--surface)}
.status-pending{color:var(--gold);border-color:color-mix(in oklch, var(--gold) 42%, var(--border))}
.status-active{color:var(--success);border-color:color-mix(in oklch, var(--success) 38%, var(--border))}
.status-disabled,.status-rejected{color:var(--danger);border-color:color-mix(in oklch, var(--danger) 34%, var(--border))}
.role-admin{color:var(--danger)}
.role-owner{color:var(--info)}
.trend-up{color:var(--success);font-weight:700}
.trend-down{color:var(--danger);font-weight:700}
.admin-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 16px;align-items:start}
.admin-form .btn{margin-top:16px;align-self:center}
.feed{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;max-height:460px;overflow-y:auto}
.feed-row{display:flex;gap:12px;align-items:baseline;padding:9px 13px;background:var(--surface);font-size:13px}
.feed-row time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:132px}
.feed-row .what{font-weight:600;white-space:nowrap}
.feed-row .detail{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){
  .admin-form{grid-template-columns:1fr}
  .feed-row{flex-wrap:wrap;gap:4px 10px}
  .feed-row time{min-width:0}
}

/* Language choice on the brief — one attempt is one language, so it is a radio group,
   not a dropdown the trainee can nudge mid-call. */
.lang-pick{display:flex;gap:8px;flex-wrap:wrap}
.lang-pick .lang-opt{min-width:84px;justify-content:center}
.lang-pick .lang-opt.on{border-color:var(--accent);color:var(--accent);background:color-mix(in oklch, var(--accent) 10%, var(--surface));font-weight:600}
.brief-exp>summary{cursor:pointer;list-style:none}
.brief-exp>summary::-webkit-details-marker{display:none}
.brief-exp>summary::after{content:'+';float:right;opacity:.6}
.brief-exp[open]>summary::after{content:'−'}
/* Thai has no spaces, so a nickname inside a button label breaks mid-word. */
.nobreak{white-space:nowrap}

/* A spec rubric names its criterion in a full sentence ("2. Solve Swiftly — get to the
   specific request fast and precisely"), which squeezed the bar into a sliver next to a
   ten-line label. Give the long ones their own row instead of fighting for the width. */
.skill-row.wide{grid-template-columns:minmax(0,1fr) 38px}
.skill-row.wide>span:first-child{grid-column:1/-1}

/* Editing a persona is language-aware, and that is invisible from the form itself —
   the notice has to sit above the first field, not in a doc nobody opens. */
.editor-note{grid-column:1/-1;padding:14px 16px;border-radius:12px;background:var(--soft);border:1px solid var(--line, var(--border))}
.editor-note.warn{border-color:color-mix(in oklch, var(--danger) 45%, var(--border));background:color-mix(in oklch, var(--danger) 7%, var(--surface))}
.editor-note-title{margin:0 0 8px;font-size:14px;font-weight:600}
.editor-note ul{margin:0;padding-left:18px;display:grid;gap:6px}
.editor-note li{font-size:13px;color:var(--muted);line-height:1.5}
.editor-note-warn{margin:10px 0 0;font-size:13px;color:var(--danger);font-weight:600}

/* Attempts are read within a language, never averaged across them. */
.attempt-lang{display:inline-block;padding:1px 6px;border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.03em}
.lang-table{display:grid;gap:10px;margin-top:12px}
.lang-row{display:grid;grid-template-columns:minmax(120px,220px) 64px minmax(80px,1fr) 54px;gap:12px;align-items:center;font-size:13px}
.lang-row .lang-avg{font-family:var(--font-mono);text-align:right}
.lang-row .lang-avg small.up{color:var(--success)}
.lang-row .lang-avg small.down{color:var(--danger)}
.lang-row .value{font-family:var(--font-mono);text-align:right;color:var(--muted)}
.lang-row .value.met{color:var(--success);font-weight:600}
.lang-row .kpi-short{grid-column:1/-1;color:var(--danger)}
@media (max-width:640px){.lang-row{grid-template-columns:minmax(0,1fr) 48px 44px;gap:8px}.lang-row .bar{grid-column:1/-1}}

/* A scenario still carrying placeholder facts says so where the call is started. */
.not-ready{padding:14px 16px;border-radius:12px;margin-bottom:16px;border:1px solid color-mix(in oklch, var(--danger) 45%, var(--border));background:color-mix(in oklch, var(--danger) 8%, var(--surface))}
.not-ready>strong{display:block;color:var(--danger);font-size:14px;margin-bottom:6px}
/* Open to everyone, but its numbers are still invented — amber, not red. */
.not-ready.soft{border-color:color-mix(in oklch, var(--warning, #b45309) 45%, var(--border));background:color-mix(in oklch, var(--warning, #b45309) 8%, var(--surface))}
.not-ready.soft>strong{color:var(--warning, #b45309)}

/* ══════════════════════════════════════════════════════════════════════════════
   PHONE / TOUCH — one place for the rules that only make sense on a handset.
   The app is used on a phone during real practice (walking between meetings), so
   these are load-bearing, not polish:
     · the notch and the home indicator eat the first and last rows unless the
       safe-area insets are paid — index.html asks for viewport-fit=cover, which
       hands us the whole screen INCLUDING those strips;
     · an off-canvas drawer that is only translated away is still in the tab order
       and still read out by VoiceOver, so it has to be hidden, not just moved;
     · iOS zooms the page when a text field smaller than 16px takes focus, and
       never zooms back out.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Sidebar: hidden from assistive tech and the tab order while it is off-canvas.
   visibility is delayed on close so the slide-out animation still plays. */
@media (max-width:980px){
  .sidebar{
    visibility:hidden;
    transition:transform .22s cubic-bezier(.2,0,0,1),visibility 0s linear .22s;
    padding-top:calc(24px + env(safe-area-inset-top));
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  body.nav-open .sidebar{visibility:visible;transition-delay:0s}
}

@media (max-width:640px){
  /* Customer tile: the portrait beside the copy left ~170px for a column carrying an
     uppercase role line, so every role read one word per line. Stack it. */
  .tile-body{flex-direction:column;gap:14px;min-height:0}
  .tile-photo{
    flex:0 0 auto;
    width:100%;
    height:auto;
    aspect-ratio:16 / 10;
    align-self:stretch;
  }
  .tile-photo img{object-position:var(--agent-photo-position, center 22%)}
  .tile-copy{min-height:0}
  .tile-eyebrow{letter-spacing:.04em}
  .tile-actions .btn.primary{flex:1 1 100%;white-space:normal}
  .tile-actions .btn{width:100%}

  /* Composer: two lines of placeholder were being clipped by the 50px box. */
  .composer textarea{min-height:58px}
  .composer-wrap{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

  /* Call header sits under the status bar / notch without this. */
  .call-topbar{padding-top:calc(10px + env(safe-area-inset-top))}
  /* Full-stage call: the control row is the last thing on screen — it must clear the
     home indicator, or the end-call button is under the swipe bar. */
  .call-grid.chat-hidden .voice-stage{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .content{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

  /* The model table now scrolls inside its own box (see .lab-pane.active>*), so let the
     columns keep a usable width instead of crushing "gpt-5.6-luna" into three lines. */
  .lab-table{min-width:520px}
  .lab-table-wrap{overflow-x:auto}
  .lab-table code{white-space:nowrap}

  /* Anything that scrolls sideways on purpose should do it smoothly under a thumb. */
  .lab-table-wrap,.admin-table-wrap,.chips,.filters{-webkit-overflow-scrolling:touch}
}

/* Small phones (iPhone SE / 320px): a nowrap CTA label ("Start with an AI customer") is
   wider than the content column, and a 1fr grid track cannot shrink below its child's
   min-content — together they pushed the whole page sideways. */
@media (max-width:400px){
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .hero-grid,.report-grid,.brief,.metric-row{grid-template-columns:minmax(0,1fr)}
}

/* Touch input, any width. */
@media (pointer:coarse){
  /* < 16px = iOS zooms in on focus and leaves the page zoomed. */
  input,select,textarea{font-size:16px}
  /* Keyboard-only affordances are noise on a phone and cost a whole line. */
  .composer-note .kbd-hint{display:none}
  /* Comfortable thumb targets on the controls that end or mute a live call. */
  .round-btn{min-width:52px;min-height:52px}
}