/* chat-screen.css */
/* Simple CRM v0.3 chat screen (INN-89 slice C): the transcript area, the jump to newest button (PRD S-7) and the
   composer's own scroll area for AI Assist and quick replies (PRD S-8). */

.conv { position: relative; flex: 1; min-height: 120px; display: flex; flex-direction: column; }
/* Gives way first (a large shrink weight) so tone, rewrite and the reply box keep their room. */
.reply-tools { flex: 0 10000 auto; min-height: 0; overflow-y: auto; padding-bottom: var(--s1); }
/* Phones: the chat column is content height, so the 60 percent cap cannot apply; cap the tools instead. */
@media (max-width: 759px) { .reply-tools { max-height: 30vh; } }

.jump {
  position: absolute; z-index: 15; left: 50%; bottom: var(--s3); translate: -50% 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--panel); color: var(--ink-2); box-shadow: var(--shadow-pop);
  font: 600 var(--t-sm)/1 var(--body); white-space: nowrap; cursor: pointer; animation: fadeUp var(--d-state) var(--ease);
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease, color var(--d-hover) ease, scale var(--d-hover) ease;
}
.jump[hidden] { display: none; }
.jump svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jump:hover { color: var(--ink); border-color: var(--ink-4); background: var(--panel-2); }
.jump:active { scale: .96; }
.jump:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.jump[data-alert="true"] {
  padding: 0 var(--s4) 0 var(--s3); border-color: var(--red); background: var(--red); color: var(--on-accent);
  animation: fadeUp var(--d-state) var(--ease), jumpRing 1.6s ease-out .2s infinite;
}
.jump[data-alert="true"]:hover { filter: brightness(1.06); }
@keyframes jumpRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--red) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .jump, .jump[data-alert="true"] { animation: none; } }

/* composer.css */
/* Simple CRM (INN-89, PRD S-4 to S-6): the reply box, formatting toolbar, link dialog and All replies panel.
   The CSP is style-src 'self': classes only, never style attributes. */

.editor-box { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); transition: border-color var(--d-hover) ease; }
.editor-box:focus-within { border-color: var(--ink-4); }
.editor-box:has(.editor:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; }

.fmt-bar { display: flex; align-items: center; gap: 2px; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); }
.fmt-bar[hidden] { display: none; }
.fmt {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); cursor: pointer; padding: 0;
  font: 600 var(--t-md)/1 var(--body); transition: background var(--d-hover) ease, color var(--d-hover) ease;
}
.fmt:hover { background: var(--panel-2); color: var(--ink); }
.fmt:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.fmt[aria-pressed="true"] { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4); }
.fmt i { font-family: Georgia, "Times New Roman", serif; font-size: var(--t-lg); }
.fmt svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fmt svg circle { fill: currentColor; stroke: none; }
.fmt-sep { width: 1px; height: 18px; margin: 0 var(--s1); background: var(--line); }

.editor {
  min-height: 64px; max-height: min(150px, 24vh); overflow-y: auto; padding: var(--s3) var(--s4); color: var(--ink);
  font: 400 var(--t-lg)/1.4 var(--body); white-space: pre-wrap; overflow-wrap: anywhere; outline: none; cursor: text;
}
.editor-box > * { flex: none; }
.editor-box > .editor { flex: 0 1 auto; }
.editor:empty::before { content: attr(data-placeholder); color: var(--ink-3); pointer-events: none; }
.editor ul, .editor ol, .bubble.rich ul, .bubble.rich ol { margin: 2px 0; padding-left: 1.4em; }
.editor ul, .bubble.rich ul { list-style: disc; }
.editor ol, .bubble.rich ol { list-style: decimal; }
.editor a, .bubble.rich a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.editor b, .editor strong, .bubble.rich strong { font-weight: 700; }
.editor i, .editor em, .bubble.rich em { font-style: italic; }

.bubble.rich { white-space: normal; display: grid; gap: var(--s1); }
.bubble.rich p { margin: 0; white-space: pre-wrap; }

.composer-err { padding: 0 var(--s4) var(--s2); color: var(--red); font-size: var(--t-sm); }
.composer-toast {
  margin: var(--s2) var(--s5) 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--btn); color: var(--btn-ink);
  font-size: var(--t-sm); justify-self: start; animation: fadeUp var(--d-state) var(--ease);
}

.assist-sources { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--t-xs); }

/* All replies panel: group headers are buttons (collapsible), an empty group never shows. */
.pd-group { display: grid; }
.pd-head {
  display: flex; align-items: center; gap: var(--s2); width: 100%; padding: var(--s2); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: 600 var(--t-sm)/1.3 var(--body); cursor: pointer; text-align: left;
}
.pd-head:hover { background: var(--panel-2); }
.pd-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pd-head::after { content: ""; margin-left: var(--s1); 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-head[aria-expanded="true"]::after { rotate: 225deg; }
.pd-count { margin-left: auto; }

/* Link dialog: a modal card over the conversation. */
.link-dlg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--s5); background: rgba(25, 23, 13, .32); animation: fade var(--d-state) var(--ease); }
.link-dlg[hidden] { display: none; }
.link-card { width: min(440px, 100%); display: grid; gap: var(--s2); padding: var(--s5); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow-pop); animation: fadeUp var(--d-state) var(--ease); }
.link-head { display: flex; align-items: center; margin-bottom: var(--s1); }
.link-card .field { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-top: var(--s1); }
.link-card input {
  min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--ink); font: 400 var(--t-md)/1.2 var(--body);
}
.link-card input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--ink-4); }
.lnk-hint { min-height: 1.2em; }
.lnk-err { color: var(--red); font-size: var(--t-sm); }
.lnk-note { margin-top: var(--s1); }
.link-foot { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.link-foot .grow { flex: 1; }
.btn.danger { color: var(--red); }
.btn.danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }

@media (max-width: 759px) { .editor, .link-card input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .link-dlg, .link-card, .composer-toast { animation: none; } }

/* dashboard.css */
/* Simple CRM Chat Dashboard tab (INN-89 v0.3 slice F): filters, four tiles, the rep table.
   Tokens in tokens.css. Class styling only: the page's CSP allows no style attributes, so bars are SVG shapes. */

.dsh { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5) var(--s6) var(--s8); display: grid; gap: var(--s4); align-content: start; transition: opacity var(--d-state) ease; }
.dsh.is-busy .dsh-tiles, .dsh.is-busy .dsh-table { opacity: .6; }
.dsh > *, .dsh-body > * { max-width: 1280px; }
.dsh-body { display: grid; gap: var(--s4); align-content: start; }

.dsh-head { display: grid; gap: var(--s3); }
.dsh-titles { display: grid; gap: var(--s1); }
.dsh-titles h1 { font: 700 var(--t-2xl)/1.15 var(--disp); letter-spacing: -.01em; }
.dsh-filters { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; }
.dsh-pills { display: flex; flex-wrap: wrap; gap: var(--s1); }
.dsh-pill {
  min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--panel); color: var(--ink-2);
  font: 600 var(--t-sm)/1 var(--body); white-space: nowrap; cursor: pointer;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease, color var(--d-hover) ease;
}
.dsh-pill:hover { border-color: var(--ink-4); color: var(--ink); }
.dsh-pill:active { transform: translateY(1px); }
.dsh-pill[aria-checked="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.dsh-custom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.dsh-date-l { display: flex; align-items: center; gap: var(--s2); font: 600 var(--t-sm)/1 var(--body); color: var(--ink-2); }
.dsh-date {
  color-scheme: light; min-height: 32px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink);
  font: 600 var(--t-sm)/1 var(--body); transition: border-color var(--d-hover) ease;
}
[data-theme="dark"] .dsh-date { color-scheme: dark; }
.dsh-date:hover { border-color: var(--ink-4); }
.dsh-hint { font-size: var(--t-xs); color: var(--ink-3); }

.dsh-bar-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); padding-top: var(--s2); }
.dsh-range { font: 700 var(--t-xl)/1.2 var(--disp); margin-right: auto; }
.dsh-note { font-size: var(--t-sm); color: var(--ink-3); }
.dsh-targets { margin-left: 0; font-weight: 600; }
.dsh-bar-row .btn.sm { align-self: center; }
.dsh-loading { color: var(--ink-3); font-size: var(--t-sm); padding: var(--s4) 0; }
.dsh-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--red-soft); color: var(--ink); font-size: var(--t-sm); }

/* five across when there is room, then two by two, then one column */
.dsh-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.dsh-tile { padding: var(--s4); display: grid; gap: var(--s1); align-content: start; }
.dsh-k { font: 600 var(--t-sm)/1.2 var(--body); color: var(--ink-2); }
.dsh-v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); min-height: 40px; }
.dsh-num { font: 700 var(--t-3xl)/1.1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.dsh-num.is-empty { font: 600 var(--t-lg)/1.3 var(--body); letter-spacing: 0; color: var(--ink-3); }
.dsh-delta { display: flex; align-items: center; gap: var(--s1); font: 600 var(--t-xs)/1.3 var(--body); }
.dsh-delta.tone-muted { color: var(--ink-3); font-weight: 500; }
.dsh-delta.tone-neutral { color: var(--ink-2); }
.dsh-delta.tone-good { color: var(--green-ink); }
.dsh-delta.tone-bad { color: var(--red); }
.dsh-arrow { font-size: var(--t-xs); line-height: 1; }
.dsh-sub { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
.dsh-ok, .dsh-flag { display: inline-flex; align-items: center; gap: var(--s1); padding: 3px var(--s2); border-radius: var(--r-full); font: 600 var(--t-xs)/1.2 var(--body); white-space: nowrap; }
.dsh-ok { background: var(--green-soft); color: var(--green-ink); }
.dsh-flag { background: var(--amber-soft); color: var(--amber-ink); }
.dsh-ico { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.dsh-spark { width: 100%; height: auto; max-height: 56px; margin-top: var(--s2); display: block; }
.dsh-bar path { fill: var(--blue); transition: fill var(--d-hover) ease; }
.dsh-bar:hover path { fill: var(--blue-ink); }
.dsh-hit { fill: transparent; }
.dsh-base { fill: var(--line); }
.dsh-cap { font-size: var(--t-xs); color: var(--ink-3); }

/* the rep table */
.dsh-table { padding: var(--s2) 0; overflow: hidden; }
.dsh-scroll { overflow-x: auto; }
.dsh-table table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: var(--t-sm); }
.dsh-table th, .dsh-table td { padding: var(--s2) var(--s3); text-align: left; vertical-align: middle; }
.dsh-table thead th { border-bottom: 1px solid var(--line-2); }
.dsh-table tbody tr { transition: background-color var(--d-hover) ease; }
.dsh-table tbody tr:hover { background: var(--panel-2); }
.dsh-table .num { text-align: right; white-space: nowrap; }
.dsh-sort {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 28px; padding: 0 var(--s2);
  border: 1px solid transparent; border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink-2);
  font: 700 var(--t-sm)/1 var(--body); white-space: nowrap; cursor: pointer;
  transition: color var(--d-hover) ease, background-color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.dsh-sort:hover { border-color: var(--line); color: var(--ink); }
.dsh-sort:active { transform: translateY(1px); }
[aria-sort="ascending"] > .dsh-sort, [aria-sort="descending"] > .dsh-sort { color: var(--ink); background: var(--line-2); }
.dsh-sort .dsh-arrow { min-width: 9px; color: var(--ink-3); }
.dsh-rep { font-weight: 400; white-space: nowrap; }
.dsh-name { font-weight: 600; color: var(--ink); margin-right: var(--s2); }
.dsh-tag { display: inline-block; margin-right: var(--s1); padding: 2px 7px; border-radius: var(--r-full); background: var(--panel-2); border: 1px solid var(--line-2); font: 600 var(--t-xs)/1.2 var(--body); color: var(--ink-2); }
.dsh-tag.is-new { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-ink); }
.dsh-cell { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 2px var(--s2); }
.dsh-cell > .dsh-flag, .dsh-cell > .dsh-few { grid-column: 1 / -1; justify-self: start; }
.dsh-hbar { width: 84px; display: block; overflow: visible; }
.dsh-track { fill: var(--line-2); }
.dsh-fill { fill: var(--blue); }
.is-frt .dsh-fill { fill: var(--ink-3); }
.is-below .dsh-fill { fill: var(--amber); }
.is-few .dsh-fill { opacity: .45; }
.dsh-tick { fill: var(--ink-2); }
.dsh-val { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.dsh-val.is-empty { font-weight: 500; color: var(--ink-3); }
.dsh-rate { margin-left: var(--s2); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dsh-few { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.dsh-none { padding: var(--s5) var(--s4); color: var(--ink-3); }
.dsh-foot { font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3); max-width: 880px; }

@media (max-width: 1279px) { .dsh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dsh-tiles > :last-child { grid-column: 1 / -1; } }
@media (max-width: 759px) {
  .dsh { padding: var(--s4) var(--s3) var(--s6); }
  .dsh-tiles { grid-template-columns: 1fr; }
  .dsh-pill, .dsh-date, .dsh-sort, .dsh-targets { min-height: 44px; }
  .dsh-date { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dsh, .dsh-pill, .dsh-bar path, .dsh-table tbody tr { transition: none; } }

/* past-chats.css */
/* CPOC-38 "My past chats": the rep's own finished chats (list) and a read-only reader (transcript and customer panel).
   Tokens in tokens.css; the transcript reuses the Chat screen's .transcript, .msg, .bubble and .event, the panel its .sec. */

.pc { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--s4); padding: var(--s5) var(--s6) var(--s5); }
.pc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); max-width: 1440px; }
.pc-titles { display: grid; gap: var(--s1); }
/* CPOC-61: the search, then the timeframe pills to its right; they wrap under it on a narrow screen. */
.pc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); max-width: 1440px; }
.pc-searchbox { position: relative; flex: 1 1 320px; min-width: 240px; max-width: 520px; }
.pc-search-icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.pc-search {
  width: 100%; min-height: 40px; padding: 0 var(--s3) 0 38px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink); font: 400 var(--t-md) var(--body);
  transition: border-color var(--d-hover) ease;
}
.pc-search:hover { border-color: var(--ink-4); }
.pc-search::placeholder { color: var(--ink-3); }
.pc-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.pc-rep { color: var(--ink-2); font-weight: 600; }
.pc-rep::before { content: "·"; margin-right: var(--s2); color: var(--ink-4); font-weight: 400; }
.pc-searched { padding-top: 0; }
.pc-titles h1 { font: 700 var(--t-2xl)/1.15 var(--disp); letter-spacing: -.01em; }
.pc-body { min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--s4); max-width: 1440px; }

.pc-list { min-height: 0; display: flex; flex-direction: column; overflow: hidden; transition: opacity var(--d-state) ease; }
.pc-list.is-busy .pc-rows { opacity: .6; }
.pc-note { padding: var(--s4); color: var(--ink-3); font-size: var(--t-sm); }
.pc-list > .pc-note { padding-bottom: var(--s2); }
.pc-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s2) var(--s2); display: grid; gap: 2px; align-content: start; transition: opacity var(--d-state) ease; }
.pc-row {
  width: 100%; display: grid; gap: 4px; padding: var(--s3); text-align: left; border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.pc-row:hover { background: var(--panel-2); }
.pc-row:active { transform: translateY(1px); }
.pc-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pc-row[aria-current="true"] { background: var(--blue-soft); border-color: var(--blue-line); }
.pc-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.pc-name { font-weight: 600; font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-name.guest { color: var(--ink-2); }
.pc-when { flex: none; font: 400 var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.pc-row-mid, .pc-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-3); }
.pc-len { font-family: var(--mono); }
.pc-last { font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pc-last.muted { color: var(--ink-3); font-style: italic; }
.pc-pager { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--line-2); }
.pc-error { margin: var(--s4); padding: var(--s3) var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border-radius: var(--r-md); background: var(--red-soft); color: var(--ink); font-size: var(--t-sm); }

.pc-reader { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pc-reader.is-empty { align-items: center; justify-content: center; }
.pc-reader-head { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-2); }
.pc-title { display: flex; align-items: center; gap: var(--s3); }
.pc-title h2 { font: 700 var(--t-xl)/1.2 var(--disp); letter-spacing: -.005em; outline: none; }
.pc-back { display: none; justify-self: start; }
.pc-reader-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.pc-convo { min-height: 0; display: flex; flex-direction: column; background: var(--canvas); }
.pc-transcript { flex: 1; }
.pc-wait { padding: var(--s5); }
.pc-panel { min-height: 0; overflow-y: auto; border-left: 1px solid var(--line-2); }
.pc-panel .veh li p { margin-top: 2px; }
.pc-panel .lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3); font-size: var(--t-sm); }
.pc-panel .lines .sku { grid-column: 1 / -1; font: 400 var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }

@media (max-width: 1100px) {
  .pc-reader-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .pc-panel { border-left: 0; border-top: 1px solid var(--line-2); max-height: 40%; }
}
@media (max-width: 720px) {
  .pc { padding: var(--s4) var(--s3); }
  .pc-head { align-items: flex-start; flex-direction: column; gap: var(--s3); }
  .pc-searchbox { flex-basis: 100%; max-width: none; min-width: 0; }
  .pc-search { min-height: 44px; font-size: 16px; }
  .pc-body { grid-template-columns: minmax(0, 1fr); }
  .pc.is-reading .pc-list, .pc:not(.is-reading) .pc-reader { display: none; }
  .pc-back { display: inline-flex; min-height: 44px; }
  .pc-row { padding: var(--s3) var(--s2); }
  .pc-pager .btn { min-height: 44px; }
  .pc-panel { max-height: none; }
  .pc-reader-body { grid-template-rows: auto auto; overflow-y: auto; }
  .pc-convo { min-height: 50vh; }
}
@media (prefers-reduced-motion: reduce) { .pc-row:active { transform: none; } }

/* settings.css */
/* Simple CRM Chat Settings tab (INN-89 slice 08): quick replies editor, chat users, Smart rewrite, AI Assist.
   Tokens in tokens.css. Class styling only: the page's CSP allows no style attributes. */

.cs { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5) var(--s6) var(--s8); display: grid; gap: var(--s5); align-content: start; }
.cs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; max-width: 1080px; }
.cs-titles { display: grid; gap: var(--s1); }
.cs-title-row { display: flex; align-items: center; gap: var(--s3); }
.cs-title-row h1 { font: 700 var(--t-2xl)/1.15 var(--disp); letter-spacing: -.01em; }
.cs-banner { margin-top: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--blue-soft); color: var(--blue-ink); font-size: var(--t-sm); font-weight: 600; }
.cs-confirm { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--red-soft); font-size: var(--t-sm); max-width: 520px; }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--on-accent); }
.btn.danger:hover { filter: brightness(.95); background: var(--red); border-color: var(--red); color: var(--on-accent); }

.cs-secs { display: grid; gap: var(--s4); max-width: 1080px; }
.cs-sec { overflow: hidden; }
.cs-sec-h { margin: 0; }
.cs-sec-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border: 0; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--d-hover) ease;
}
.cs-sec-toggle:hover { background: var(--panel-2); }
.cs-sec-titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cs-sec-title { font: 700 var(--t-xl)/1.2 var(--disp); }
.cs-sec-desc { font: 400 var(--t-sm)/1.4 var(--body); color: var(--ink-3); }
.cs-sec-sum { flex: none; font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }
.cs-chev { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform var(--d-state) var(--ease); }
[aria-expanded="false"] > .cs-chev { transform: rotate(-45deg); }
.cs-sec-body { padding: 0 var(--s5) var(--s5); display: grid; gap: var(--s5); border-top: 1px solid var(--line-2); padding-top: var(--s4); }

.cs-block { display: grid; gap: var(--s2); align-content: start; }
.cs-block h3 { font: 600 var(--t-md)/1.2 var(--body); color: var(--ink); }
.cs-block-h { display: flex; align-items: baseline; gap: var(--s3); }
.cs-count { font: 500 var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.cs-inline { grid-template-columns: auto 1fr; align-items: center; gap: var(--s4); }
.cs-k { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: var(--s2); }
.cs-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cs-row.end { justify-content: flex-end; }
.grow { flex: 1 1 200px; min-width: 0; }
.cs-empty { padding: var(--s3); border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--ink-3); font-size: var(--t-sm); }
.cs-viewonly { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.cs-sample { font-size: var(--t-sm); color: var(--ink-2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--panel-2); justify-self: start; }
.cs-error { color: var(--red); font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s3); }

.in {
  min-height: 36px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink);
  font: 400 var(--t-md)/1.4 var(--body); transition: border-color var(--d-hover) ease, background-color var(--d-hover) ease;
}
.in::placeholder { color: var(--ink-3); }
.in:focus { background: var(--panel); border-color: var(--ink-4); outline: none; }
.in:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
textarea.in { width: 100%; resize: vertical; }

.cs-actions { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; padding-top: var(--s3); border-top: 1px solid var(--line-2); }
.cs-note { margin-right: auto; font-size: var(--t-sm); color: var(--ink-3); }
.cs-note.dirty { color: var(--ink); font-weight: 600; }

.cs-stale { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--red); background: var(--red-soft); }
.cs-stale-h { font-weight: 700; }
.cs-stale-list { margin: 0; padding-left: var(--s5); font-size: var(--t-sm); color: var(--ink-2); display: grid; gap: 2px; }

.cs-toast {
  position: fixed; left: 50%; bottom: var(--s6); z-index: 70; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--btn); color: var(--btn-ink); font-size: var(--t-sm); font-weight: 600; box-shadow: var(--shadow-pop);
  transition: opacity var(--d-state) var(--ease), transform var(--d-state) var(--ease); max-width: calc(100vw - 32px);
}
.cs-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* chips that toggle (aria-pressed) look like the picked chips (aria-checked) */
.chip[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.chip:disabled, .switch:disabled { cursor: not-allowed; opacity: .6; }
.chip:disabled:hover { background: var(--panel); color: var(--ink-2); border-color: var(--line); }
.chip[aria-pressed="true"]:disabled:hover, .chip[aria-checked="true"]:disabled:hover { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.chip.num { min-width: 40px; justify-content: center; }

/* quick replies */
.qr-list, .qr-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.qr-item {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--panel-2);
  transition: background-color var(--d-hover) ease;
}
.qr-item.editing { display: grid; gap: var(--s2); background: transparent; border: 1px solid var(--line); }
.qr-label { flex: none; font-weight: 600; min-width: 112px; }
.qr-text { flex: 1; min-width: 0; color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.qr-acts, .qr-move { flex: none; display: flex; align-items: center; gap: var(--s1); }
.qr-edit { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.qr-add { display: grid; gap: var(--s1); padding-top: var(--s1); }
.qr-preview { font-size: var(--t-sm); color: var(--blue-ink); }
.qr-group { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s2); display: grid; gap: var(--s2); }
.qr-gtoggle { font: inherit; display: flex; align-items: center; gap: var(--s3); min-height: 36px; padding: 0 var(--s2); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; text-align: left; transition: background-color var(--d-hover) ease; }
.qr-gtoggle:hover { background: var(--panel-2); }
.qr-gname { font-weight: 600; }
.qr-confirm { padding: var(--s2); border-radius: var(--r-sm); background: var(--red-soft); font-size: var(--t-sm); }
.qr-replies { display: grid; gap: var(--s2); padding: 0 var(--s2) var(--s2) var(--s6); }
.qr-gpick { align-items: center; }

/* chat users */
.cu-list { display: grid; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.cu-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(180px, 1.4fr) auto 96px; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); border-top: 1px solid var(--line-2); }
.cu-row:first-child { border-top: 0; }
.cu-headrow { background: var(--panel-2); font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); min-height: 36px; }
.cu-name { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-weight: 600; }
.cu-email { color: var(--ink-2); font-size: var(--t-sm); overflow-wrap: anywhere; }
.cu-cap { font: 600 var(--t-md)/1 var(--mono); color: var(--ink-2); text-align: right; }
.tag.new { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-ink); }
.cu-list .cs-empty { border: 0; border-top: 1px solid var(--line-2); border-radius: 0; }

/* rules and toggles */
.rw-rules { list-style: none; margin: 0; padding: 0; display: grid; }
.rw-rule { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s3) 0; border-top: 1px solid var(--line-2); transition: opacity var(--d-state) ease; }
.rw-rule:first-child { border-top: 0; }
.rw-rule.off .rw-rule-main { opacity: .6; }
.rw-rule-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rw-name { font-weight: 600; }
.rw-ex { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); margin: var(--s1) 0 0; font-size: var(--t-sm); }
.rw-ex dt { font: 600 var(--t-xs)/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rw-ex dd { margin: 0; color: var(--ink-2); }
.switch {
  flex: none; width: 40px; height: 24px; margin-top: 2px; padding: 2px; border: 0; border-radius: var(--r-full); background: var(--line); cursor: pointer;
  display: flex; align-items: center; transition: background-color var(--d-state) ease;
}
.switch .knob { width: 20px; height: 20px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--d-state) var(--ease); }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"] .knob { transform: translateX(16px); }

.rw-phrases { border-collapse: collapse; width: 100%; max-width: 640px; font-size: var(--t-sm); }
.rw-phrases th { text-align: left; font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: var(--s2) var(--s2) var(--s2) 0; }
.rw-phrases td { padding: var(--s1) var(--s2) var(--s1) 0; border-top: 1px solid var(--line-2); }
.rw-phrases td:last-child, .rw-phrases th:last-child { width: 44px; text-align: right; }
.rw-try { padding: var(--s4); border-radius: var(--r-md); background: var(--panel-2); }
.rw-try .in { background: var(--panel); }
.rw-try-out { display: grid; gap: var(--s2); font-size: var(--t-sm); }
.rw-after { padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--panel); }
.rw-tone { display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); }
.rw-tone .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.rw-tone.yellow .dot { background: var(--amber); }
.rw-tone.red .dot { background: var(--red); }

@media (max-width: 759px) {
  .cs { padding: var(--s4) var(--s3) var(--s8); }
  .cs-sec-toggle { padding: var(--s3) var(--s4); flex-wrap: wrap; }
  .cs-sec-sum { order: 3; width: 100%; white-space: normal; }
  .cs-sec-body { padding: var(--s3) var(--s3) var(--s4); }
  .qr-item { flex-wrap: wrap; }
  .qr-label { min-width: 0; }
  .qr-text { flex-basis: 100%; }
  .qr-replies { padding-left: var(--s2); }
  .cu-headrow { display: none; }
  .cu-row { grid-template-columns: 1fr auto; padding: var(--s3); }
  .cu-email { grid-column: 1 / -1; grid-row: 2; }
  .cu-cap { grid-column: 2; grid-row: 1; }
  .cu-row .chips { grid-column: 1 / -1; }
  .in, textarea.in { font-size: 16px; }
  .btn.sm, .chip, .qr-gtoggle { min-height: 44px; }
  .btn.sm.icon { width: 44px; }
  .switch { width: 52px; height: 32px; }
  .switch .knob { width: 28px; height: 28px; }
  .switch[aria-checked="true"] .knob { transform: translateX(20px); }
}
@media (prefers-reduced-motion: reduce) { .cs-chev, .switch, .switch .knob, .cs-toast { transition: opacity var(--d-state) ease; } }

/* Chat Dashboard targets (v0.3, PRD A-6): one row per setting, control on the right */
.cs-sec { scroll-margin-top: var(--s4); }
.ds-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ds-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s3) 0; border-top: 1px solid var(--line-2); }
.ds-row:first-child { border-top: 0; }
.ds-main { flex: 1 1 280px; min-width: 0; display: grid; gap: 2px; }
.ds-step { flex: none; display: inline-flex; align-items: center; gap: var(--s2); }
.ds-val { min-width: 48px; text-align: center; font: 600 var(--t-md)/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ds-frt { flex: none; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ds-select { min-width: 170px; cursor: pointer; color: var(--ink-3); }
.ds-select.on { color: var(--ink); border-color: var(--btn); }
.ds-select:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 560px) {
  .ds-row { align-items: flex-start; }
  .ds-select { min-width: 0; flex: 1; font-size: 16px; }
}

/* shell.css */
/* Simple CRM frame (INN-89, Chat MVP v0.2): left nav tabs, gear menu, views, no-access page, keyboard
   reference, Details on narrow screens and the bottom-strip chat layout. Tokens in tokens.css. Class
   styling only: the page's CSP allows no style attributes. */

/* ---------- brand and nav ---------- */
.plate { display: inline-block; background: var(--plate); border-radius: var(--r-sm); }
.app-name { margin-top: var(--s2); font: 600 var(--t-sm)/1.2 var(--disp); letter-spacing: .02em; color: var(--nav-ink-2); }
/* CPOC-63: non-prod only (config.json envLabel). Solid amber in both themes so dev never passes for prod. */
.env-badge { display: inline-block; margin-left: var(--s2); padding: 3px 7px; border-radius: var(--r-sm); background: #F2A633; color: #19170D; font: 700 var(--t-xs)/1 var(--mono); letter-spacing: .1em; vertical-align: middle; }
.env-badge[hidden] { display: none; }
.nav { display: grid; gap: 2px; align-content: start; }
button.nav-item {
  width: 100%; border: 0; background: transparent; font: 600 var(--t-md)/1.2 var(--body); text-align: left; cursor: pointer;
  transition: background-color var(--d-hover) ease;
}
button.nav-item:hover { background: var(--nav-hover); }
.nav-item[aria-current="page"] { background: var(--nav-active); }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: calc(-1 * var(--s3)); top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--red);
}

/* ---------- the signed-in person and the gear ---------- */
.me { position: relative; }
/* The gear takes room from the name, so a long name wraps instead of clipping. */
.me .me-name { white-space: normal; overflow-wrap: anywhere; }
.gear {
  flex: none; margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--nav-ink-2); cursor: pointer;
  transition: background-color var(--d-hover) ease, color var(--d-hover) ease;
}
.gear:hover, .gear[aria-expanded="true"] { background: var(--nav-active); color: var(--nav-ink); }
.gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gear-pop {
  position: absolute; z-index: 40; left: var(--s3); bottom: calc(100% - var(--s2)); width: 272px; padding: var(--s4);
  background: var(--panel); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-pop); display: grid; gap: var(--s3);
  animation: fadeUp var(--d-state) var(--ease);
}
.gear-prefs { display: grid; gap: var(--s2); }
.gear-k { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--s2); }
.gear-k:first-child { margin-top: 0; }
.opts { display: grid; gap: var(--s2); }
.opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt {
  min-height: 56px; padding: var(--s2) var(--s1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: 500 var(--t-sm)/1.1 var(--body); cursor: pointer;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease, color var(--d-hover) ease;
}
.opt:hover { background: var(--panel-2); color: var(--ink); }
.opt:active { transform: translateY(1px); }
.opt[aria-checked="true"] { border-color: var(--red); background: var(--red-soft); color: var(--ink); font-weight: 600; }
.glyph { width: 18px; height: 18px; display: block; position: relative; color: currentColor; }
.g-light { border-radius: 50%; border: 2px solid currentColor; }
.g-dark { border-radius: 50%; background: currentColor; }
.g-system { border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.g-sm, .g-lg { display: grid; place-items: center; font-family: var(--disp); font-weight: 600; line-height: 1; }
.g-sm::before { content: "A"; font-size: 13px; }
.g-lg::before { content: "A"; font-size: 19px; }
.g-left, .g-bottom { width: 24px; height: 18px; border: 1.5px solid currentColor; border-radius: 3px; }
.g-left::before, .g-bottom::before { content: ""; position: absolute; background: currentColor; opacity: .55; border-radius: 1.5px; }
.g-left::before { left: 2px; top: 2px; bottom: 2px; width: 5px; }
.g-bottom::before { left: 2px; right: 2px; bottom: 2px; height: 4px; }
.gear-note:empty { display: none; }
.gear-locked { color: var(--ink-2); }
.gear-aa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: var(--s3); font: 500 var(--t-sm)/1.3 var(--body); color: var(--ink-2); }
.gear-aa b { color: var(--ink); font-weight: 600; }
.gear-aa[hidden] { display: none; }
.gear-keys {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; min-height: 36px; padding: 0 var(--s2);
  border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--ink-2); font: 500 var(--t-sm)/1 var(--body); cursor: pointer;
  padding-top: var(--s3);
}
.gear-keys:hover { color: var(--ink); }

/* ---------- views ---------- */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s3); }
.mount:empty { display: none; }
.view-placeholder, .no-access { padding: var(--s6); display: grid; gap: var(--s2); align-content: start; }
.view-placeholder h1, .no-access h1 { font: 700 var(--t-2xl)/1.15 var(--disp); letter-spacing: -.01em; }
.no-access { margin: var(--s8) auto 0; max-width: 520px; text-align: center; }
.no-access p { color: var(--ink-2); }

/* ---------- keyboard reference (F1) ---------- */
.keys-pop { position: fixed; top: 76px; right: var(--s5); width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow-y: auto; z-index: 60; }
.pop-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.pop-top .pop-h { margin: 0; }
.pop-top .link { margin-left: 0; }

/* ---------- chat layout: bottom strip (gear menu) ---------- */
.list-bottom .desk { grid-template-columns: minmax(0, 1fr) 300px 268px; grid-template-rows: minmax(0, 1fr) auto; }
.list-bottom .chat { grid-column: 1; grid-row: 1; }
.list-bottom .tiles { grid-column: 1; grid-row: 2; padding: var(--s2); }
.list-bottom .panel { grid-column: 2; grid-row: 1 / span 2; }
.list-bottom .pages { grid-column: 3; grid-row: 1 / span 2; }
.list-bottom .tile-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; padding: 2px; }
.list-bottom .tile { flex: none; }
.list-bottom .empty { text-align: left; padding: var(--s2) var(--s3); }

/* ---------- narrow screens: the Customer column hides behind Details ---------- */
.details-toggle { display: none; }
@media (max-width: 1440px) {
  .list-bottom .desk { grid-template-columns: minmax(0, 1fr) 284px 248px; }
}
/* The bottom strip frees the tile column, so Page navigation keeps its own column here. */
@media (max-width: 1280px) {
  .list-bottom .desk { grid-template-columns: minmax(0, 1fr) 270px 230px; grid-template-rows: minmax(0, 1fr) auto; }
  .list-bottom .panel { grid-column: 2; grid-row: 1 / span 2; }
  .list-bottom .pages { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 1099px) and (min-width: 760px) {
  body { overflow: hidden; }
  .app { height: 100vh; }
  .details-toggle { display: inline-flex; }
  .desk, .list-bottom .desk { grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .list-bottom .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .tiles, .chat { grid-row: 1; }
  .list-bottom .tiles { grid-row: 2; }
  .panel, .pages { display: none; }
  .desk.details-open { grid-template-columns: 80px minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
  .desk.details-open .tiles, .desk.details-open .chat { grid-row: 1 / span 2; }
  .list-bottom .desk.details-open { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  .list-bottom .desk.details-open .chat { grid-column: 1; grid-row: 1 / span 2; }
  .list-bottom .desk.details-open .tiles { grid-column: 1 / -1; grid-row: 3; }
  .desk.details-open .panel { display: flex; grid-column: -2; grid-row: 1; }
  .desk.details-open .pages { display: flex; grid-column: -2; grid-row: 2; }
}
@media (max-width: 759px) {
  .details-toggle { display: inline-flex; }
  .panel, .pages { display: none; }
  .desk.details-open .panel, .desk.details-open .pages { display: flex; }
  .gear { width: 44px; height: 44px; }
  .gear-pop { position: fixed; left: var(--s3); right: var(--s3); top: auto; bottom: var(--s3); width: auto; }
  .opt { min-height: 56px; }
  .nav { display: flex; flex: 1 1 100%; gap: var(--s1); overflow-x: auto; padding: 0 var(--s2) var(--s2); }
  button.nav-item { flex: none; width: auto; min-height: 44px; }
  .keys-pop { top: var(--s4); right: var(--s4); }
}
@media (prefers-reduced-motion: reduce) { .gear-pop { animation: none; } }

/* Slice 12: the team label on a tile (prototype tile "CARE"). CPOC-42 removed the tile search. */
.tile .tteam { font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); }

/* status.css */
/* CPOC-43: the status control at the bottom left. Online / Back Soon / Away, Away needs a reason (LivePerson's picker). */
/* min-width 0: a long status ellipsizes inside the sidebar instead of widening it past its edge (Miles, 21 Oct). */
.status { position: relative; display: block; min-width: 0; max-width: 100%; }
.status-btn {
  width: 100%; max-width: 100%; min-width: 0; min-height: 36px; padding: 0 var(--s2) 0 30px; position: relative; display: flex; align-items: center; gap: var(--s2);
  border-radius: var(--r-sm); border: 1px solid var(--nav-line); background: var(--nav-active); color: var(--nav-ink);
  font: 600 var(--t-md) var(--body); text-align: left; cursor: pointer;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease;
}
.status-btn:hover:not(:disabled), .status-btn[aria-expanded="true"] { border-color: var(--nav-ink-2); }
.status-btn:active:not(:disabled) { transform: translateY(1px); }
.status-btn:disabled { cursor: default; opacity: .7; }
.status-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Away with a reason: "Away" over the reason, so a long reason never crowds the chevron (Miles, 21 Oct). */
.status-text:has(.status-sub) { display: grid; line-height: 1.15; padding: 3px 0; }
.status-main { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-sub {
  min-width: 0; overflow: hidden; white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  font: 500 var(--t-sm)/1.2 var(--body); color: var(--nav-ink-2);
}
.status-caret { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--nav-ink-2); }
.status .dot { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); pointer-events: none; }
.status .dot[data-key="online"] { background: var(--green); }
.status .dot[data-key="backsoon"] { background: var(--amber); }
.status .dot[data-key="away"], .status .dot[data-state="error"] { background: var(--red); }

.status-pop {
  position: absolute; z-index: 40; left: 0; bottom: calc(100% + var(--s2)); width: 272px; padding: var(--s3);
  background: var(--panel); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-pop); display: grid; gap: var(--s3);
  animation: fadeUp var(--d-state) var(--ease);
}
.status-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.status-pick {
  min-height: 56px; padding: var(--s2) var(--s1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: 500 var(--t-sm)/1.1 var(--body); cursor: pointer;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease, color var(--d-hover) ease;
}
.status-pick:hover { background: var(--panel-2); color: var(--ink); }
.status-pick:active { transform: translateY(1px); }
.status-pick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.status-pick[data-key="online"] svg { color: var(--green); }
.status-pick[data-key="backsoon"] svg { color: var(--amber); }
.status-pick[data-key="away"] svg { color: var(--red); }
.status-pick[aria-pressed="true"] { border-color: var(--ink-3); background: var(--panel-2); color: var(--ink); font-weight: 600; }

.status-away { display: grid; gap: var(--s2); }
.status-k { margin: 0; font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.status-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 232px; overflow-y: auto; }
.status-reason {
  width: 100%; min-height: 32px; padding: 6px var(--s3); display: flex; align-items: center; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: 500 var(--t-md) var(--body); text-align: left; cursor: pointer;
  transition: background-color var(--d-hover) ease;
}
.status-reason:hover { background: var(--panel-2); }
.status-reason[aria-current="true"] { background: var(--red-soft); font-weight: 600; }

@media (max-width: 759px) {
  .status-btn { min-height: 44px; }
  .status-pop { position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); width: auto; }
  .status-reason { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .status-pop { animation: none; } }

/* toolbar.css */
/* Simple CRM toolbar (INN-89, Chat MVP v0.2, PRD R-1, R-5, R-6): the QUEUE switch in #toolbar-mount, the
   read-only meter's at-limit state, Take next at the limit, the ring's limit line and the toast. Tokens in
   tokens.css; class styling only (the CSP allows no style attributes). */

#toolbar-mount { display: flex; align-items: center; gap: var(--s2); }
.qswitch { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); overflow: hidden; }
.qopt {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s3);
  border: 0; background: transparent; color: var(--ink-2); font: 600 var(--t-sm)/1 var(--body);
  transition: background-color var(--d-hover) ease, color var(--d-hover) ease;
}
button.qopt { cursor: pointer; }
.qopt + .qopt { border-left: 1px solid var(--line); }
button.qopt:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); }
.qopt[aria-checked="true"] { background: var(--btn); color: var(--btn-ink); }
button.qopt[aria-checked="true"]:hover:not(:disabled) { background: var(--btn-hover); color: var(--btn-ink); }
button.qopt:disabled { cursor: progress; }
.qswitch[aria-busy="true"] .qopt[aria-checked="true"] { opacity: .75; }
.qswitch.single .qopt { color: var(--ink); }
.qopt .n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--panel-2); color: var(--ink-2);
  font-size: var(--t-xs); display: inline-flex; align-items: center; justify-content: center;
}
.qopt[aria-checked="true"] .n { background: var(--btn-key); color: var(--btn-ink); }
.qdot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--panel); }
.qopt[aria-checked="true"] .qdot { box-shadow: 0 0 0 2px var(--btn); }
.qopt:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* The meter is read-only: an Admin or Manager sets the limit. At the limit it turns red. */
.meter { cursor: default; }
.meter.at-limit #meter-n { color: var(--red); }
.meter.at-limit .segs i.on { background: var(--red); }
#take-next.at-limit { background: var(--panel-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
#take-next.at-limit .n { background: var(--line-2); }
.ring-limit { font: 600 var(--t-sm)/1.3 var(--body); color: var(--red); }

/* Toast: one line over the bottom of the screen, gone after a few seconds. */
.tb-toast {
  position: fixed; z-index: 60; left: 50%; bottom: var(--s6); translate: -50% 0; max-width: min(560px, calc(100vw - 2 * var(--s4)));
  padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--btn); color: var(--btn-ink); box-shadow: var(--shadow-pop);
  font: 500 var(--t-sm)/1.4 var(--body); text-align: center;
}
.tb-toast.show { animation: fadeUp var(--d-state) var(--ease); }
@media (prefers-reduced-motion: reduce) { .tb-toast.show { animation: none; } }

/* transfer.css */
/* INN-89 slice 11: the transfer bar with real people, the transfer dialog, the ask and the received-transfer note. */
.xfer[hidden] { display: none; }
.gbtn[aria-disabled="true"] { color: var(--ink-3); cursor: not-allowed; }
.gbtn[aria-disabled="true"]:hover { border-color: var(--line); background: var(--panel); }
.reps { list-style: none; margin: 0; padding: 0; }
button.prez { padding: 0; cursor: pointer; transition: transform var(--d-hover) ease, box-shadow var(--d-hover) ease; }
button.prez:hover:not([aria-disabled="true"]) { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
button.prez[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
button.prez:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 2px; }
.prez.suggested { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--green); }
.prez .sugg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.prez.asking { border-color: var(--amber); background: var(--amber); color: var(--btn-ink); animation: askRing 1s ease infinite; }
@keyframes askRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 125, 21, .5); } 50% { box-shadow: 0 0 0 5px rgba(198, 125, 21, .12); } }

.xfer-hint { padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--amber-soft); color: var(--ink); font: 500 var(--t-sm)/1.4 var(--body); }
#transfer-sub[data-tone]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--ink-4); vertical-align: middle; }
#transfer-sub[data-tone="green"]::before { background: var(--green); }
#transfer-sub[data-tone="yellow"]::before { background: var(--amber); }
#transfer-sub[data-tone=""]::before { display: none; }
#transfer-note {
  width: 100%; min-height: 56px; resize: vertical; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--ink); font: 400 var(--t-sm)/1.45 var(--body);
}
#transfer-note:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 1px; }
.kbd-hint { margin-left: var(--s2); font: 500 var(--t-xs)/1 var(--mono); opacity: .7; }

.xfer-note { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px dashed var(--line); display: grid; gap: 4px; }
.xfer-note p { white-space: pre-wrap; }

.ask-in {
  position: fixed; z-index: 55; top: var(--s4); right: var(--s4); width: min(380px, calc(100% - 32px)); padding: var(--s4);
  display: grid; gap: var(--s3); box-shadow: var(--shadow-pop); border-left: 4px solid var(--amber); animation: fadeUp var(--d-state) ease;
}
.ask-in p { font: 500 var(--t-sm)/1.45 var(--body); }
.ask-left { font-weight: 700; color: var(--amber-ink); }
.ask-in-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.ask-in-actions .btn { min-height: 40px; }
@media (prefers-reduced-motion: reduce) { .prez.asking, .ask-in { animation: none; } }

/* users.css */
/* Simple CRM User Management (INN-89, Chat MVP v0.2): the Users and Roles tabs and their dialogs.
   Tokens in tokens.css; class styling only (the page's CSP allows no style attributes). */

.um-view { overflow-y: auto; }
.um { display: grid; gap: var(--s4); align-content: start; padding-bottom: var(--s8); max-width: 1440px; }

/* ---------- head and tabs ---------- */
.um-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s5) var(--s6); }
.um-head-text { flex: 1 1 320px; min-width: 0; display: grid; gap: var(--s1); }
.um-title { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.um-title h1 { font: 700 var(--t-2xl)/1.15 var(--disp); letter-spacing: -.01em; }
.um-badge {
  font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .08em; padding: 4px 7px; border-radius: var(--r-sm);
  background: var(--btn); color: var(--btn-ink);
}
.um-badge:empty { display: none; }
.um-bar { display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap; }
.um-tabs { display: flex; gap: var(--s2); }
.um-tab {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s4); border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); font: 600 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;
}
.um-tab:hover { background: var(--panel-2); color: var(--ink); }
.um-tab[aria-selected="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.um-count { font: 600 var(--t-xs)/1 var(--mono); padding: 3px 7px; border-radius: var(--r-full); background: var(--panel-2); color: var(--ink-3); }
.um-tab[aria-selected="true"] .um-count { background: var(--btn-key); color: var(--btn-ink); }
.um-bar-note { margin-left: auto; max-width: 640px; }
.um-load-error, .um-err { color: var(--red); font-weight: 600; font-size: var(--t-sm); }
.um-foot { padding: 0 var(--s1); }

/* ---------- tables ---------- */
.um-panel { padding: 0; overflow: hidden; }
.um-scroll { overflow-x: auto; }
.um-table { min-width: 940px; }
.um-users .um-row { grid-template-columns: minmax(200px, 1.2fr) minmax(220px, 1.5fr) minmax(130px, .9fr) 140px 90px 28px; }
.um-roles { min-width: 2050px; }
/* 18 permission columns (seed/permissions.json); each group's first column is set off by a rule. */
.um-roles .um-row { grid-template-columns: minmax(190px, 1.4fr) 72px repeat(18, minmax(96px, 1fr)); }
.um-roles .um-gstart { border-left: 1px solid var(--line); padding-left: var(--s3); align-self: stretch; display: flex; align-items: center; }
.um-roles .um-headrow .um-gstart { display: grid; align-items: end; }
.um-group-name { font: 700 var(--t-xs)/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); min-height: 1.2em; }
.um-row {
  display: grid; gap: var(--s3); align-items: center; width: 100%; padding: var(--s3) var(--s5); border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; color: var(--ink); font: 400 var(--t-sm)/1.3 var(--body); text-align: left;
}
#um-rows > .um-row:last-child { border-bottom: 0; }
button.um-row { cursor: pointer; transition: background-color var(--d-hover) ease; }
button.um-row:hover { background: var(--panel-2); }
button.um-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.um-row.locked { cursor: default; }
.um-headrow { align-items: end; padding-top: var(--s4); border-bottom: 1px solid var(--line); }
.um-filter, .um-th { display: grid; gap: var(--s2); font: 700 var(--t-sm)/1.2 var(--body); color: var(--ink); }
.um-th { padding-bottom: var(--s2); }
.um-perm-head { gap: 2px; }
.um-kind { font: 500 var(--t-xs)/1.2 var(--body); color: var(--ink-3); white-space: nowrap; }
.um-filter input {
  width: 100%; max-width: 200px; min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel-2); color: var(--ink); font: 400 var(--t-sm)/1 var(--body);
  transition: border-color var(--d-hover) ease;
}
.um-filter input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.um-name { min-width: 0; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.um-name-text { font-weight: 600; }
.um-role-name { flex-direction: column; align-items: flex-start; gap: var(--s1); }
.um-tags { display: flex; gap: var(--s1); flex-wrap: wrap; }
.um-email { min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-queues { display: flex; gap: var(--s1); flex-wrap: wrap; }
.um-chip { font: 600 var(--t-xs)/1 var(--body); padding: 4px 9px; border-radius: var(--r-full); background: var(--blue-soft); color: var(--blue-ink); }
.um-cap, .um-people { font: 600 var(--t-sm)/1 var(--mono); }
.um-none { color: var(--ink-3); }
.um-chev { font-size: var(--t-xl); color: var(--ink-3); text-align: right; }
.um-tag {
  font: 600 var(--t-xs)/1 var(--body); padding: 3px 8px; border-radius: var(--r-full); white-space: nowrap;
  background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line);
}
.um-tag.blue { background: var(--blue-soft); color: var(--blue-ink); border-color: transparent; }
.um-lv { display: inline-block; font: 600 var(--t-xs)/1 var(--body); padding: 4px 9px; border-radius: var(--r-full); text-transform: capitalize; }
.um-lv.lv-deny, .um-lv.lv-none { background: var(--panel-2); color: var(--ink-3); border: 1px solid var(--line); }
.um-lv.lv-view, .um-lv.lv-self, .um-lv.lv-dept { background: var(--blue-soft); color: var(--blue-ink); }
.um-lv.lv-edit, .um-lv.lv-allow, .um-lv.lv-all { background: var(--green-soft); color: var(--green-ink); }
.um-empty { padding: var(--s5); }

/* ---------- toast ---------- */
.um-toast {
  position: fixed; z-index: 70; left: 50%; bottom: var(--s6); max-width: min(640px, calc(100vw - 32px)); padding: var(--s3) var(--s5);
  border-radius: var(--r-md); background: var(--btn); color: var(--btn-ink); font: 600 var(--t-sm)/1.4 var(--body); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity var(--d-state) ease, transform var(--d-state) var(--ease);
}
.um-toast:empty { display: none; }
.um-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- dialogs ---------- */
.um-dialog { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; gap: var(--s4); border-radius: var(--r-lg); }
.um-dialog.wide { width: min(660px, 100%); display: flex; flex-direction: column; overflow: hidden; }
.um-dlg-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: var(--s4); padding-right: var(--s1); }
.um-dlg-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.um-dlg-head h2 { font: 700 var(--t-xl)/1.2 var(--disp); }
.um-x {
  margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3);
  font: 400 var(--t-xl)/1 var(--body); cursor: pointer; transition: background-color var(--d-hover) ease, color var(--d-hover) ease;
}
.um-x:hover { background: var(--panel-2); color: var(--ink); }
.um-note { font-size: var(--t-sm); line-height: 1.45; color: var(--blue-ink); background: var(--blue-soft); border-radius: var(--r-sm); padding: var(--s2) var(--s3); }
.um-warn { font-size: var(--t-sm); line-height: 1.45; color: var(--red); }
.um-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.um-field { display: grid; gap: var(--s2); font: 600 var(--t-sm)/1.2 var(--body); color: var(--ink-2); }
.um-field input {
  min-height: 40px; padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2);
  color: var(--ink); font: 400 var(--t-md)/1 var(--body); transition: border-color var(--d-hover) ease;
}
.um-field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.um-field input:disabled { color: var(--ink-3); cursor: not-allowed; }
.um-hint { font-weight: 400; font-size: var(--t-xs); line-height: 1.4; flex: 1 1 200px; }
.um-inline { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.um-picks { display: flex; gap: var(--s2); flex-wrap: wrap; }
.um-pick {
  min-height: 36px; padding: 0 var(--s4); border-radius: var(--r-full); border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
  font: 600 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;
}
.um-pick:hover { background: var(--panel-2); color: var(--ink); }
.um-pick[aria-pressed="true"], .um-pick[aria-checked="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.um-pick:disabled { opacity: .55; cursor: not-allowed; }
.um-pick:focus-visible, .um-step:focus-visible, .um-seg-b:focus-visible, .um-tab:focus-visible, .um-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.um-locked-pill { justify-self: start; font-weight: 600; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: var(--s2) var(--s3); }
.um-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--panel); flex: none; }
.um-stepper.off { opacity: .6; }
.um-step {
  width: 40px; height: 40px; border: 0; background: var(--panel); color: var(--ink-2); font: 500 var(--t-xl)/1 var(--body); cursor: pointer;
  transition: background-color var(--d-hover) ease;
}
.um-step:hover:not(:disabled) { background: var(--panel-2); }
.um-step:disabled { color: var(--ink-4); cursor: not-allowed; }
.um-cap-n { min-width: 36px; text-align: center; font: 600 var(--t-md)/1 var(--mono); color: var(--ink); }
.um-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s2); }
.um-spacer { flex: 1; }
.um-danger { color: var(--red); }
.um-danger.confirm { background: var(--red); border-color: var(--red); color: var(--on-accent); }
.um-danger.confirm:hover { background: var(--red); color: var(--on-accent); filter: brightness(.95); }

/* role permissions, grouped Chat / Rep Console / Admin */
.um-perms { display: grid; gap: var(--s5); }
.um-pgroup { display: grid; }
.um-pgroup-h { margin: 0; padding-bottom: var(--s2); font: 700 var(--t-xs)/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.um-pgroup-note { margin: 0; padding-bottom: var(--s2); }
.um-perm { display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap; padding: var(--s3) 0; border-top: 1px solid var(--line-2); }
.um-perm-text { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.um-perm-label { font: 600 var(--t-sm)/1.3 var(--body); color: var(--ink); }
.um-eff { font-size: var(--t-xs); color: var(--blue-ink); font-weight: 600; }
.um-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; flex: none; }
.um-seg.off { opacity: .65; }
.um-seg-b {
  min-height: 36px; padding: 0 var(--s3); border: 0; background: var(--panel); color: var(--ink-2); font: 600 var(--t-xs)/1 var(--body); cursor: pointer;
  transition: background-color var(--d-hover) ease, color var(--d-hover) ease;
}
.um-seg-b + .um-seg-b { border-left: 1px solid var(--line); }
.um-seg-b:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); }
.um-seg-b:disabled { cursor: not-allowed; }
.um-seg-b[aria-checked="true"].lv-deny, .um-seg-b[aria-checked="true"].lv-none { background: var(--ink-2); color: var(--panel); }
.um-seg-b[aria-checked="true"].lv-view, .um-seg-b[aria-checked="true"].lv-self, .um-seg-b[aria-checked="true"].lv-dept { background: var(--blue); color: var(--on-accent); }
.um-seg-b[aria-checked="true"].lv-edit, .um-seg-b[aria-checked="true"].lv-allow, .um-seg-b[aria-checked="true"].lv-all { background: var(--btn); color: var(--btn-ink); }

@media (max-width: 720px) {
  .um-head { padding: var(--s4); }
  .um-bar-note { margin-left: 0; }
  .um-two { grid-template-columns: 1fr; }
  .um-field input, .um-filter input { font-size: 16px; }
  .um-pick, .um-seg-b, .um-tab { min-height: 44px; }
  /* Users: each person becomes a stacked row instead of a sideways-scrolling table */
  .um-users { min-width: 0; }
  .um-users .um-headrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); padding-bottom: var(--s3); }
  .um-users .um-headrow .um-th { display: none; }
  .um-users .um-filter input { max-width: none; min-height: 44px; }
  .um-users .um-row:not(.um-headrow) {
    grid-template-columns: minmax(0, 1fr) auto auto 20px; column-gap: var(--s3); row-gap: var(--s1);
    grid-template-areas: "name name name chev" "email email email chev" "role queues cap chev"; padding: var(--s3) var(--s4);
  }
  .um-users .um-row:not(.um-headrow) > :nth-child(1) { grid-area: name; }
  .um-users .um-row:not(.um-headrow) > :nth-child(2) { grid-area: email; }
  .um-users .um-row:not(.um-headrow) > :nth-child(3) { grid-area: role; color: var(--ink-2); padding-top: var(--s1); }
  .um-users .um-row:not(.um-headrow) > :nth-child(4) { grid-area: queues; padding-top: var(--s1); }
  .um-users .um-row:not(.um-headrow) > :nth-child(5) { grid-area: cap; padding-top: var(--s1); }
  .um-users .um-row:not(.um-headrow) > :nth-child(6) { grid-area: chev; }
  .um-users .um-cap::before { content: "Limit "; font: 400 var(--t-xs)/1 var(--body); color: var(--ink-3); }
  /* Roles stay a matrix; the role name sticks while the permissions scroll */
  .um-roles .um-row > :first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); align-self: stretch; }
  .um-roles .um-row > .um-role-name { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .um-toast { transition: opacity var(--d-state) ease; transform: translate(-50%, 0); } }
.um-dialog:focus { outline: none; }