/* Simple CRM, the live-person POC screen, in the layout of Miles's Chat MVP prototype (13 Oct 2026). Tokens in tokens.css. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 400 var(--t-md)/1.45 var(--body); color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased; display: grid; grid-template-columns: 232px minmax(0, 1fr); overflow: hidden;
}
p, h1, h2, h3, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.meta { color: var(--ink-3); font-size: var(--t-sm); }
a { color: var(--blue); }
a:hover { color: var(--blue-ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  font: 600 var(--t-md)/1 var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); min-height: 36px; padding: 0 var(--s4); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease, color var(--d-hover) ease, transform var(--d-hover) ease;
}
.btn:hover { border-color: var(--ink-4); background: var(--panel-2); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn.primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink); }
.btn.ghost { background: transparent; border-color: var(--nav-line); color: var(--nav-ink); }
.btn.ghost:hover { background: var(--nav-hover); }

.card { background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); }

/* ---------- left sidebar ---------- */
.side { background: var(--nav); color: var(--nav-ink); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--nav-line); }
.brand { padding: var(--s6) var(--s5) var(--s5); border-bottom: 1px solid var(--nav-line); }
.wordmark { display: block; width: 156px; height: auto; }
.nav { padding: var(--s4) var(--s3); flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s3); border-radius: var(--r-md);
  color: var(--nav-ink); font-weight: 600; text-decoration: none; position: relative;
}
.nav-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.nav-badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--red); color: var(--on-accent); font-size: var(--t-xs); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.me { padding: var(--s4); border-top: 1px solid var(--nav-line); display: grid; gap: var(--s3); }
.me-who { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.me-text { min-width: 0; }
.me-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-role { font-size: var(--t-xs); color: var(--nav-ink-2); }
/* The status control (CPOC-43) is styled in css/status.css. */

/* ---------- avatars, tags ---------- */
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber-soft); color: var(--ink-2); font: 600 var(--t-sm)/1 var(--mono); letter-spacing: .02em;
}
.avatar.lg { width: 44px; height: 44px; font-size: var(--t-md); background: var(--panel-2); border: 1px solid var(--line); }
.avatar.guest { background: var(--panel); border: 1px dashed var(--ink-4); }
.avatar:empty { visibility: hidden; }
.qtag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm);
  font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.qtag.sales { color: var(--red); background: var(--red-soft); }
.qtag.care { color: var(--blue-ink); background: var(--blue-soft); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink-3); font-size: var(--t-xs); font-weight: 500; }

/* ---------- main column ---------- */
.app { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4); min-width: 0; min-height: 0; height: 100vh; }

/* header bar: title, transfer bar with presence, queue switch, concurrency meter, Take next (PRD 4 Layout) */
.top { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); min-height: 56px; flex-wrap: wrap; }
.top h1 { font: 700 var(--t-xl)/1 var(--disp); letter-spacing: -.01em; }
.poc { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; color: var(--btn-ink); background: var(--btn); border-radius: var(--r-sm); padding: 4px 7px; }
.xfer { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; min-width: 0; }
.bar-k, .k { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.grp { display: flex; align-items: center; gap: 6px; }
.gbtn {
  min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
  color: var(--ink); font: 600 var(--t-sm)/1 var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2);
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.gbtn:hover:not(:disabled) { border-color: var(--ink-4); background: var(--panel-2); }
.gbtn:disabled { color: var(--ink-3); cursor: not-allowed; }
.gbtn .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--green-soft); color: var(--green-ink); font-size: var(--t-xs); display: inline-flex; align-items: center; justify-content: center; }
.reps { display: flex; gap: 3px; }
/* CPOC-37: LivePerson targets sit after the POC queues, set apart by a hairline. */
.lp-grp { padding-left: var(--s3); border-left: 1px solid var(--line); }
.lp-k { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lp-list { display: flex; gap: 6px; flex-wrap: wrap; }
.gbtn.lp[aria-disabled="true"] { color: var(--ink-3); }
.prez {
  position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--panel);
  font: 600 var(--t-xs)/1 var(--mono); color: var(--ink-2); border: 2px solid var(--ink-4); cursor: default;
}
.prez[data-status="green"] { border-color: var(--green); background: var(--green-soft); }
.prez[data-status="yellow"] { border-color: var(--amber); background: var(--amber-soft); }
.prez[data-status="red"] { border-color: var(--red); color: var(--ink-3); background: var(--panel); border-style: dashed; }
.prez .tip {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%; translate: -50% 0; padding: var(--s2) var(--s3);
  border-radius: var(--r-sm); background: var(--btn); color: var(--btn-ink); font: 500 var(--t-xs)/1.4 var(--body); text-align: left;
  display: none; pointer-events: none; white-space: pre; animation: fade var(--d-hover) ease;
}
.prez:hover .tip, .prez:focus-visible .tip { display: block; }
.reps li:nth-last-child(-n+2) .tip { left: auto; right: 0; translate: none; }
.load { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.meter { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.segs { display: inline-flex; gap: 2px; }
.segs i { width: 7px; height: 8px; border-radius: 2px; background: var(--line); }
.segs i.on { background: var(--btn); }
.segs i.over { background: var(--red); }
#take-next .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--btn-key); font-size: var(--t-xs); display: inline-flex; align-items: center; justify-content: center; }
.btn.icon { width: 36px; padding: 0; }
.btn.icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.keys-wrap { position: relative; }
.pop { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: 320px; padding: var(--s4); background: var(--panel); border-radius: var(--r-md); box-shadow: var(--shadow-pop); animation: fadeUp var(--d-state) var(--ease); }
.pop-h { font: 700 var(--t-md)/1.2 var(--disp); margin-bottom: var(--s3); }
.pop dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s3); font-size: var(--t-sm); }
.pop dd { color: var(--ink-2); }
kbd { font: 500 var(--t-xs)/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--panel-2); color: var(--ink-2); }
.btn.primary kbd { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: var(--btn-ink); }

/* sign-in, sign-out notices */
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); padding: var(--s4) var(--s6); border-color: var(--line); box-shadow: var(--shadow-pop); }
.notice > p:first-child { font-weight: 600; flex: 1 1 320px; }
.notice .meta { flex: 1 1 100%; order: 3; }
.notice-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- four zones: tiles, conversation, Customer, Page navigation ---------- */
.desk { flex: 1; min-height: 0; display: grid; grid-template-columns: 80px minmax(0, 1fr) 300px 268px; gap: var(--s3); }
.col { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* chat tiles (PRD R-2) */
.tiles { padding: var(--s2) 0; }
.tile-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: 2px 0; }
.tile {
  position: relative; width: 62px; height: 62px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; overflow: hidden; padding: 4px 0 0;
  transition: border-color var(--d-hover) ease, background-color var(--d-hover) ease, box-shadow var(--d-hover) ease;
}
.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--line); }
.tile[data-tone="ok"]::before { background: var(--green); }
.tile[data-tone="amber"]::before { background: var(--amber); }
.tile[data-tone="red"]::before { background: var(--red); }
.tile[data-tone="ring"]::before { background: var(--blue); }
.tile:hover { background: var(--panel-2); border-color: var(--ink-4); }
.tile[aria-current="true"] { border: 2px solid var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.tile .ini { font: 600 var(--t-lg)/1 var(--mono); letter-spacing: .02em; color: var(--blue-ink); }
.tile .t { font: 600 var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.tile[data-tone="ok"] .t { color: var(--green-ink); }
.tile[data-tone="amber"] .t { color: var(--amber-ink); }
.tile[data-tone="red"] .t { color: var(--red); }
.tile[data-tone="ring"] { background: var(--blue-soft); border-color: var(--blue); animation: tilePulse 1.4s ease-in-out infinite; }
.tile[data-tone="ring"] .t { color: var(--blue-ink); letter-spacing: .08em; }
.tile[data-tone="done"] .t { color: var(--red); letter-spacing: .06em; }
.tile .wdot { position: absolute; top: 7px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
.tile .badge { position: absolute; bottom: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: var(--btn); color: var(--btn-ink); font: 600 10px/16px var(--mono); }
.empty { padding: var(--s3) var(--s1); text-align: center; font-size: var(--t-xs); }

/* open chat */
.chat-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.who-head { min-width: 0; flex: 1 1 200px; }
.who-head h2 { font: 700 var(--t-xl)/1.25 var(--disp); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.state-line { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: 2px; }
.returning { color: var(--blue-ink); font-weight: 600; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ring {
  margin: var(--s4) var(--s5) 0; padding: var(--s4) var(--s5); border-radius: var(--r-md); background: var(--blue-soft); border: 1px solid var(--blue-line);
  display: flex; align-items: center; gap: var(--s4); animation: fadeUp var(--d-state) var(--ease);
}
.ring-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); flex: none; box-shadow: 0 0 0 0 rgba(43, 112, 136, .5); animation: ring 1.4s ease-out infinite; }
.ring-text { flex: 1; min-width: 0; }
.ring-title { font: 600 var(--t-xs)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.ring-who { font-weight: 600; font-size: var(--t-lg); display: flex; align-items: center; gap: var(--s2); }

.transcript { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.chat-empty { flex: 1; display: grid; place-items: center; padding: var(--s6); text-align: center; }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.customer { align-self: flex-start; align-items: flex-start; }
.msg.rep { align-self: flex-end; align-items: flex-end; }
.msg.system { align-self: center; align-items: center; max-width: 90%; }
.bubble { padding: var(--s3) var(--s4); border-radius: var(--r-md); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-lg); line-height: 1.45; }
.msg.customer .bubble { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: var(--r-sm); }
.msg.rep .bubble { background: var(--rep-bubble); border: 1px solid var(--rep-line); border-bottom-right-radius: var(--r-sm); }
.msg.system .bubble { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: var(--t-md); }
.by { margin-top: 4px; font-size: var(--t-xs); color: var(--ink-3); display: flex; gap: var(--s1); }
.by time { font-family: var(--mono); }
.event { align-self: center; display: flex; align-items: center; gap: var(--s3); width: 100%; color: var(--ink-3); font-size: var(--t-sm); }
.event::before, .event::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

/* AI handoff card */
.handoff { align-self: stretch; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.handoff-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.handoff-k { font: 600 var(--t-xs)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.handoff-head .meta { font-size: var(--t-xs); }
.handoff .bubble { padding: 0; background: none; border: 0; font-size: var(--t-md); }
.handoff.pinned { position: sticky; top: calc(-1 * var(--s5)); z-index: 2; box-shadow: 0 4px 10px -8px rgba(25, 23, 13, .35); }
.handoff-head time { margin-left: auto; }
.handoff dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px var(--s4); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--blue-line); font-size: var(--t-sm); }
.handoff dt { color: var(--blue-ink); }
.handoff dd { overflow-wrap: anywhere; }

/* tire sizes and part numbers: Copy (TRACI-409) */
.sizeref { white-space: nowrap; }
.size { font-family: var(--mono); font-weight: 500; }
.copy {
  margin-left: 6px; min-height: 24px; padding: 0 8px; vertical-align: 1px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink-2); font: 500 var(--t-xs)/22px var(--body); cursor: pointer;
  transition: background-color var(--d-hover) ease, color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.copy:hover { border-color: var(--ink-4); color: var(--ink); }
.copy[data-state="done"] { color: var(--green-ink); border-color: var(--green); }
.copy[data-state="failed"] { color: var(--red); border-color: var(--red); }

.typing { padding: 0 var(--s5) var(--s2); color: var(--ink-3); font-size: var(--t-sm); font-style: italic; }

/* quick replies and the full list */
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; pointer-events: none; }
.search input {
  width: 100%; min-height: 38px; padding: 0 var(--s3) 0 34px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2); color: var(--ink); font: 400 var(--t-md) var(--body);
  transition: border-color var(--d-hover) ease, background-color var(--d-hover) ease;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { background: var(--panel); border-color: var(--ink-4); outline: none; }
.search input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.quick { position: relative; padding: var(--s2) var(--s5) 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  min-height: 30px; padding: 0 var(--s3); border-radius: var(--r-full); border: 1px solid var(--line); background: var(--panel);
  color: var(--ink-2); font: 500 var(--t-sm)/1 var(--body); cursor: pointer;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease, color var(--d-hover) ease;
}
.chip:hover { border-color: var(--ink-4); color: var(--ink); background: var(--panel-2); }
.chip.more { border-style: dashed; }
.chip.more[aria-expanded="true"] { background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn); }
.predefined {
  /* v0.3 (PRD S-4): anchored inside the transcript area (#conv), so it never covers the chat header or its own search. */
  position: absolute; z-index: 20; left: var(--s5); right: var(--s5); bottom: var(--s3); max-height: calc(100% - 2 * var(--s3)); overflow-y: auto;
  padding: var(--s3); background: var(--panel); border-radius: var(--r-md); box-shadow: var(--shadow-pop); display: grid; gap: var(--s2);
  animation: fadeUp var(--d-state) var(--ease);
}
.pd-group summary { list-style: none; cursor: pointer; padding: var(--s2) var(--s2); border-radius: var(--r-sm); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.pd-group summary::-webkit-details-marker { display: none; }
.pd-group summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); rotate: 45deg; transition: rotate var(--d-hover) ease; }
.pd-group[open] summary::after { rotate: 225deg; }
.pd-group summary:hover { background: var(--panel-2); }
.pd-group ul { display: grid; gap: 2px; padding: 0 0 var(--s2) var(--s2); }
.pd-group li button { width: 100%; text-align: left; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: 400 var(--t-sm)/1.4 var(--body); cursor: pointer; }
.pd-group li button:hover { background: var(--panel-2); color: var(--ink); }
.pd-empty { padding: var(--s2); }

/* v0.3 (PRD S-8): the reply box row may shrink (to the editor's 64px floor) so Send stays inside the 60 percent. */
.composer { flex: 0 1 auto; min-height: 0; display: flex; gap: var(--s3); align-items: stretch; padding: var(--s3) var(--s5) var(--s4); }
.composer textarea {
  flex: 1; min-height: 64px; max-height: 180px; resize: vertical; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); color: var(--ink); font: 400 var(--t-lg)/1.4 var(--body); transition: border-color var(--d-hover) ease;
}
.composer textarea::placeholder { color: var(--ink-3); }
.composer textarea:focus { border-color: var(--ink-4); outline: none; }
.composer textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.composer .btn { align-self: flex-end; min-height: 44px; padding: 0 var(--s5); }

/* reply tools: AI Assist, tone, smart rewrite (PRD S-1 to S-3) */
/* v0.3 (PRD S-8): at most 60 percent of the column; .reply-tools gives way first, tone, rewrite and the reply box stay. */
.reply { flex: none; max-height: 60%; min-height: 0; overflow-y: auto; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; }
.assist { margin: var(--s3) var(--s5) 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--blue-soft); border: 1px solid var(--blue-line); }
.assist-head, .rewrite-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.assist .k { color: var(--blue-ink); }
.pill { font: 600 var(--t-xs)/1 var(--body); padding: 5px 9px; border-radius: var(--r-full); background: var(--blue); color: var(--on-accent); }
.link { margin-left: auto; border: 0; background: none; color: var(--blue-ink); font: 500 var(--t-sm)/1 var(--body); cursor: pointer; min-height: 24px; padding: 0 var(--s1); }
.link:hover { text-decoration: underline; }
.assist-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); margin-top: var(--s2); }
.assist-body p { font-size: var(--t-md); }
.kb { grid-column: 1 / -1; display: flex; gap: var(--s1); }
.kb li { font: 500 var(--t-xs)/1 var(--mono); padding: 4px 6px; border: 1px solid var(--blue-line); border-radius: var(--r-sm); background: var(--panel); color: var(--blue-ink); }
.btn.sm { min-height: 30px; padding: 0 var(--s3); font-size: var(--t-sm); }
.tone { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s5) 0; font-size: var(--t-sm); }
.tone-meter { display: inline-flex; gap: 2px; }
.tone-meter i { width: 14px; height: 6px; border-radius: 2px; background: var(--line); }
.tone[data-level="green"] .tone-meter i { background: var(--green); }
.tone[data-level="yellow"] .tone-meter i:nth-child(-n+2) { background: var(--amber); }
.tone[data-level="red"] .tone-meter i:first-child { background: var(--red); }
.tone-label { font-weight: 600; }
.tone[data-level="green"] .tone-label { color: var(--green-ink); }
.tone[data-level="yellow"] .tone-label { color: var(--amber-ink); }
.tone[data-level="red"] .tone-label { color: var(--red); }
.tone-phrase { padding: 2px 8px; border: 1px solid var(--red); border-radius: var(--r-full); color: var(--red); background: var(--red-soft); font-size: var(--t-xs); }
/* v0.3 (PRD S-8): on short windows the preview gives way to its head and about one line before Send would leave the screen. */
.rewrite { flex: 0 1 auto; display: flex; flex-direction: column; overflow: hidden; min-height: calc(30px + 2 * var(--s3) + var(--s2) + 1.5em + 2px); margin: var(--s2) var(--s5) 0; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); animation: fadeUp var(--d-state) var(--ease); }
.rewrite .k { color: var(--blue-ink); }
.fixes { display: inline-flex; gap: 4px; }
.fixes span { font-size: var(--t-xs); padding: 2px 7px; border: 1px solid var(--line); border-radius: var(--r-full); background: var(--panel); color: var(--ink-2); }
.rewrite-head { flex: none; }
.rewrite-head .btn:first-of-type { margin-left: auto; }
.rewrite p { margin-top: var(--s2); font-size: var(--t-md); max-height: 5.9em; overflow-y: auto; flex: 0 1 auto; min-height: 1.5em; }

/* Close the loop (PRD W-1) */
.wrap { border-top: 1px solid var(--line-2); background: var(--panel-2); padding: var(--s4) var(--s5); display: grid; gap: var(--s3); animation: fadeUp var(--d-state) var(--ease); }
.wrap-head .h { font: 700 var(--t-lg)/1.2 var(--disp); margin-right: var(--s2); }
.chip[aria-checked="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.wrap textarea { width: 100%; min-height: 72px; resize: vertical; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--ink); font: 400 var(--t-md)/1.4 var(--body); }
.wrap-foot { display: flex; align-items: center; gap: var(--s4); }
.sample-line { flex: 1; display: flex; align-items: center; gap: var(--s2); }
.sample-line .tag { flex: none; }

/* transfer dialog (PRD T-4) */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: center; padding: var(--s4); animation: fade var(--d-state) ease; }
.dialog { width: min(480px, 100%); padding: var(--s5); display: grid; gap: var(--s3); box-shadow: var(--shadow-pop); }
.dialog-head h2 { font: 700 var(--t-xl)/1.2 var(--disp); }
.handoff.sum p:last-child { font-size: var(--t-md); margin-top: var(--s1); overflow-wrap: anywhere; }
.dialog-actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s2); }
.dialog-actions .btn { min-height: 44px; }

/* Customer column (PRD C-1 to C-3) */
.panel, .pages { overflow-y: auto; }
.sec { padding: var(--s4) var(--s4); }
.sec + .sec { border-top: 1px solid var(--line-2); }
.sec h3 { font: 700 var(--t-lg)/1.3 var(--disp); display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.sec h3 .tag { margin-left: auto; }
.sec h3 .tier { font: 600 var(--t-xs)/1 var(--body); padding: 4px 8px; border-radius: var(--r-full); background: var(--line-2); color: var(--ink-2); }
.sec h3 .count { font: 400 var(--t-sm)/1 var(--body); color: var(--ink-3); }
.sec .open-profile { margin-top: var(--s3); min-height: 30px; padding: 0 var(--s3); font-size: var(--t-xs); }
.sec dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px var(--s3); font-size: var(--t-sm); }
.sec dt { color: var(--ink-3); }
.sec dd { overflow-wrap: anywhere; }
.sec dd.na { color: var(--ink-3); }
.veh { display: grid; gap: var(--s2); }
.veh li { padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); }
.veh li.in-chat { border-color: var(--blue); background: var(--blue-soft); }
.veh b { font-weight: 600; font-size: var(--t-sm); }
.veh .in { white-space: nowrap; font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; color: var(--blue-ink); margin-left: var(--s2); }
.veh .tag { float: right; }
.veh p { font: 400 var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.lines { display: grid; gap: var(--s3); }
.lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); }
.lines .item { font-weight: 600; font-size: var(--t-sm); }
.lines .price { font-family: var(--mono); font-size: var(--t-sm); }
.sku { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.stock { grid-column: 1 / -1; font: 500 var(--t-xs)/1.3 var(--mono); color: var(--green-ink); }
.subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line-2); font-weight: 600; }
.subtotal .num { font-size: var(--t-lg); }

/* Page navigation column (PRD C-4) */
.nav-list { display: grid; gap: 2px; }
.nav-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 0 var(--s2); padding: var(--s2) var(--s2); border-radius: var(--r-sm); }
.nav-list li + li:not(.now) { border-top: 1px solid var(--line-2); }
.nav-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); margin-top: 7px; }
.nav-list li.now { border: 1px solid var(--green); background: var(--green-soft); margin-bottom: var(--s2); }
.nav-list li.now::before { background: var(--green); }
.nav-list b { font-weight: 600; font-size: var(--t-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-list time { font: 400 var(--t-xs)/1.6 var(--mono); color: var(--ink-3); }
.nav-list .here { grid-column: 2 / -1; font: 600 var(--t-xs)/1.4 var(--mono); letter-spacing: .08em; color: var(--green-ink); }
.nav-list a, .nav-list .url { grid-column: 2 / -1; font: 400 var(--t-xs)/1.4 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: block; min-height: 24px; line-height: 24px; }
.nav-list .url { color: var(--ink-3); }
.nav-list a:hover { text-decoration: underline; }

.ccp { position: fixed; left: -10000px; top: 0; width: 400px; height: 600px; }
.ccp iframe { width: 400px; height: 600px; border: 0; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tilePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 112, 136, .35); } 50% { box-shadow: 0 0 0 4px rgba(43, 112, 136, .12); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(43, 112, 136, .45); } 100% { box-shadow: 0 0 0 10px rgba(43, 112, 136, 0); } }
@media (prefers-reduced-motion: reduce) { .ring-pulse, .ring, .predefined, .tile, .pop, .wrap, .rewrite, .scrim { animation: none; } }

/* ---------- widths ---------- */
@media (max-width: 1440px) {
  body { grid-template-columns: 200px minmax(0, 1fr); }
  .wordmark { width: 140px; }
  .desk { grid-template-columns: 80px minmax(0, 1fr) 284px 248px; }
}
/* PRD C-4: Page navigation folds into the customer column when the width is short. */
@media (max-width: 1280px) {
  .desk { grid-template-columns: 80px minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
  .tiles, .chat { grid-row: 1 / span 2; }
  .panel { grid-column: 3; grid-row: 1; }
  .pages { grid-column: 3; grid-row: 2; }
}
@media (max-width: 1099px) {
  body { grid-template-columns: 180px minmax(0, 1fr); overflow: auto; }
  .app { height: auto; min-height: 100vh; }
  .desk { grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: minmax(600px, 82vh) auto auto; }
  .tiles, .chat { grid-row: 1; }
  .panel, .pages { grid-column: 1 / -1; grid-row: auto; }
  .load { margin-left: 0; }
}
@media (max-width: 759px) {
  #keys { width: 44px; height: 44px; }
  body { display: block; overflow: auto; }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--nav-line); }
  .brand { border: 0; padding: var(--s3) var(--s4); }
  .wordmark { width: 120px; }
  .nav { padding: var(--s2); flex: 0 0 auto; }
  .nav-item[aria-current="page"]::before { display: none; }
  .me { flex: 1 1 100%; border-top: 1px solid var(--nav-line); grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .me .status { grid-column: 1 / -1; }
  .app { padding: var(--s3); }
  .top { align-items: stretch; gap: var(--s3); padding: var(--s3); }
  .xfer, .load { width: 100%; flex-wrap: wrap; }
  .desk { display: flex; flex-direction: column; }
  .tiles { padding: var(--s2); }
  .tile-list { flex-direction: row; overflow-x: auto; justify-content: flex-start; padding: 2px; }
  .tile { flex: none; }
  .chat { min-height: 560px; }
  .msg { max-width: 92%; }
  .wrap-foot { flex-direction: column; align-items: stretch; }
  .composer textarea, .predefined input, .wrap textarea { font-size: 16px; }
  .chip, .copy, .gbtn, .qopt, .link, .btn.sm { min-height: 44px; }
  .prez { width: 44px; height: 44px; }
  .pop { width: min(320px, calc(100vw - 32px)); }
}