/* The page-local dashboard sidebar that used to open this file is gone: its
   nine tab buttons now hang under "Dashboard" in the global rail, and the rail
   itself lives in nav.css. `.tab-button` moved there with them. */

.content {
  padding-left: 3%;
  padding-right: 3%;
}

/* Flags a snapshot that is showing the last available day, not today. */
.snapshot-note {
  color: var(--ink-secondary);
  font-size: 0.8rem;
  font-weight: normal;
  margin-left: 0.4rem;
}

/* ── Dashboard tab headers ────────────────────────────── */

/* One-line description under a tab's h1, on every tab. */
.tab-lede {
  color: var(--ink-secondary);
  font-size: 0.95rem;
  margin: 0.3rem 0 0.8rem;
  max-width: 62ch;
}

/* ── Agent Assist tab ─────────────────────────────────── */

.assist-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  clip-path: var(--bevel);
  box-shadow: var(--shadow);
}

.assist-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.9rem;
}

.assist-table thead th {
  text-align: left;
  padding: 0.7rem 0.9rem;
  background: var(--board);
  color: var(--board-ink-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.assist-table tbody td {
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--ink-secondary);
  vertical-align: middle;
}

.assist-table tbody tr:hover {
  background: rgba(185, 31, 46, 0.05);
}

.assist-subject {
  display: block;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.assist-subject:hover { text-decoration: underline; }

.assist-from {
  display: block;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

/* Signal chips */
.tag-chip,
.tone-chip,
.level-chip {
  display: inline-block;
  padding: 0.16rem 0.55rem;
  --cut: 5px;
  clip-path: var(--bevel);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Suggested-tone chips default to a neutral slab; the named tones below
   override it, so this base must stay first — same specificity, later wins. */
.tone-chip { background: var(--surface-raised); color: var(--ink-secondary); border: 1px solid var(--border-strong); }

/* Chip colors always ride alongside their own text label — never color alone.
   The hot/warm pair is only ~3 ΔE apart under deuteranopia, so the wording is
   what actually carries the state. */
.tag-chip,
.level-cool,
.tone-empathetic_response,
.tone-fast_track_sales {
  background: var(--chip-cool-bg);
  color: var(--chip-cool);
  border: 1px solid var(--chip-cool-line);
}

.level-hot,
.tone-escalate_to_human {
  background: var(--chip-hot-bg);
  color: var(--chip-hot);
  border: 1px solid var(--chip-hot-line);
}

.level-warm,
.tone-priority_response {
  background: var(--chip-warm-bg);
  color: var(--chip-warm);
  border: 1px solid var(--chip-warm-line);
}

/* ── Bevel upgrade (see application.css) ─────────────── */

@supports (corner-shape: bevel) {
  .assist-table-wrap,
  .tag-chip,
  .tone-chip,
  .level-chip {
    clip-path: none;
    corner-shape: bevel;
  }

  .assist-table-wrap,
  .tag-chip,
  .tone-chip,
  .level-chip {
    border-radius: var(--cut);
  }

  .level-chip:focus-visible {
    outline-offset: 2px;
  }
}

/* ── Record pages (inquiry / agent / metric show & index) ── */

.record-page {
  padding: 0 3% 3rem;
  max-width: 1400px;
}

.crumbs {
  font-size: 0.8rem;
  color: var(--ink-muted);
  padding: 0.9rem 0 0.2rem;
}

.crumbs a { color: var(--ink-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.2rem;
}

.record-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.record-dim { color: var(--ink-muted); font-size: 0.84rem; }

/* Two-column split: content left, facts right. Collapses on narrow screens. */
.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 1.2rem;
  align-items: start;
}

@media (max-width: 900px) {
  .record-grid { grid-template-columns: minmax(0, 1fr); }
}

.record-main,
.record-side {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}

/* ── Panel: the generic beveled container ─────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  --cut: 12px;
  clip-path: var(--bevel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.6rem 1rem;
  background: var(--board);
}

.panel-head h2 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--board-ink);
  padding: 0;
  letter-spacing: 0.02em;
}

.panel-link {
  font-size: 0.76rem;
  color: var(--twine);
  text-decoration: none;
  white-space: nowrap;
}

.panel-link:hover { color: var(--tag-red-ink); text-decoration: underline; }

.panel-body { padding: 0.9rem 1rem; }

.plain-list { list-style: none; display: grid; gap: 0.4rem; }

/* ── Message body ─────────────────────────────────────── */

.message-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.message-body p { margin-bottom: 0.7rem; }
.message-body ul,
.message-body ol { margin: 0 0 0.7rem 1.2rem; }
.message-body blockquote {
  border-left: 3px solid var(--border-strong);
  padding-left: 0.8rem;
  color: var(--ink-secondary);
  margin-bottom: 0.7rem;
}
.message-body table { border-collapse: collapse; margin-bottom: 0.7rem; }
.message-body td,
.message-body th { border: 1px solid var(--border); padding: 0.3rem 0.5rem; }

.raw-source { margin-top: 1rem; }

.raw-source summary {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.raw-source pre {
  margin-top: 0.5rem;
  padding: 0.8rem;
  background: var(--board);
  color: var(--board-ink-muted);
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-x: auto;
  --cut: 8px;
  clip-path: var(--bevel);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Record lists (index rows, recent activity) ───────── */

.record-list { list-style: none; display: grid; gap: 0.6rem; }

.record-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--chip-cool);
  --cut: 10px;
  clip-path: var(--bevel);
}

.record-list.is-compact .record-row {
  padding: 0.55rem 0.7rem;
  border-left-width: 3px;
}

.record-row-main { min-width: 0; }

.record-row-title {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.record-row-title:hover { color: var(--accent); text-decoration: underline; }

.record-row-excerpt {
  font-size: 0.86rem;
  color: var(--ink-secondary);
  margin: 0.15rem 0;
  overflow-wrap: anywhere;
}

.record-row-side {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Day-grouped inquiry cards (inquiries index) ─────── */

/* The index trades one tall row per inquiry for a grid of compact cards under
   a heading per day. The day carries the date, so a card only shows the clock.
   Each day is a <details>; see the view for why they are native. */

.day-group + .day-group { margin-top: 0.5rem; }

.day-group[open] + .day-group { margin-top: 1.1rem; }

.day-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.2rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  list-style: none;
}

.day-head::-webkit-details-marker { display: none; }

.day-head:hover .day-head-label { color: var(--ink); }

/* Disclosure chevron, drawn the same way the nav rail draws its own: right
   while the day is shut, down once it is open. */
.day-head::before {
  content: "";
  flex: none;
  width: 0.34rem;
  height: 0.34rem;
  margin-left: 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.day-group[open] > .day-head::before { transform: rotate(45deg); }

/* Hairline running to the right of the label, so the days read as bands. */
.day-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.day-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A heading only for the outline — the summary around it does the sizing. */
.day-head-label {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink-secondary);
}

.day-head-count {
  padding: 0.08rem 0.4rem;
  background: var(--chip-cool-bg);
  color: var(--chip-cool);
  border: 1px solid var(--chip-cool-line);
  --cut: 4px;
  clip-path: var(--bevel);
  letter-spacing: 0;
}

.inquiry-grid {
  list-style: none;
  display: grid;
  margin-top: 0.45rem;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: 0.45rem;
}

.inquiry-card {
  min-width: 0;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip-cool);
  --cut: 8px;
  clip-path: var(--bevel);
}

.inquiry-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.inquiry-card-clock {
  flex: none;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* One line only — the excerpt below is where the message gets its room. */
.inquiry-card-title {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-card-title:hover { color: var(--accent); text-decoration: underline; }

.inquiry-card-head .level-chip { flex: none; align-self: center; }

.inquiry-card-excerpt {
  margin: 0.2rem 0 0.3rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

.inquiry-card-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/* Yields first when the meta line runs out of room. */
.inquiry-card-from {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-secondary);
}

.inquiry-card-agent { color: var(--ink-muted); }
.inquiry-card-agent:not(.is-empty):hover { color: var(--accent); }
.inquiry-card-agent.is-empty { font-style: italic; }

/* ── Filter chips & pager ─────────────────────────────── */

.chip-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0.55rem;
  --cut: 5px;
  clip-path: var(--bevel);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--chip-cool-bg);
  color: var(--chip-cool);
  border: 1px solid var(--chip-cool-line);
}

.filter-chip:hover { background: var(--chip-hot-bg); color: var(--chip-hot); border-color: var(--chip-hot-line); }

.filter-clear { font-size: 0.78rem; }

.pager {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1.2rem;
}

.pager-stack { display: grid; gap: 0.5rem; }

/* ── Links to an agent's activity page ────────────────── */

.agent-link { text-decoration: none; font-weight: 600; }
.agent-link:hover { text-decoration: underline; }

/* Card title becomes the drill-down into that period */
.metric-card-link {
  color: inherit;
  text-decoration: none;
}

.metric-card-link:hover { color: var(--twine); text-decoration: underline; }

.metric-period-chip {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chip-cool);
  border: 1px solid var(--chip-cool-line);
  background: var(--chip-cool-bg);
  padding: 0.2rem 0.55rem;
  --cut: 5px;
  clip-path: var(--bevel);
}

/* Secondary KPI tags on metric show pages sit quieter than the headline */
.kpi-card-muted {
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--border);
}

.kpi-card-muted h3 { color: var(--ink-muted); opacity: 1; }

/* ── Thread list on the inquiry page ──────────────────── */

.thread-list { list-style: none; display: grid; gap: 0.5rem; }

.thread-list li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.4rem 0.5rem;
  border-left: 3px solid var(--border);
}

.thread-list li.is-current {
  border-left-color: var(--chip-hot);
  background: var(--chip-hot-bg);
}

.thread-depth {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.thread-subject { display: block; font-weight: 600; text-decoration: none; }
.thread-subject:hover { text-decoration: underline; }

/* Preview banner for ?as= role impersonation (never in production) */
.preview-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.2rem;
  background: var(--chip-warm-bg);
  color: var(--chip-warm);
  border-bottom: 1px solid var(--chip-warm-line);
  font-size: 0.84rem;
  font-weight: 600;
}

@supports (corner-shape: bevel) {
  .panel,
  .record-row,
  .inquiry-card,
  .day-head-count,
  .filter-chip,
  .metric-period-chip,
  .raw-source pre {
    clip-path: none;
    corner-shape: bevel;
    border-radius: var(--cut);
  }
}

/* Flags where a figure is platform-wide while the list beside it is scoped */
.scope-note {
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.4rem;
  font-size: 0.86rem;
  color: var(--chip-warm);
  background: var(--chip-warm-bg);
  border: 1px solid var(--chip-warm-line);
  border-left-width: 4px;
  --cut: 8px;
  clip-path: var(--bevel);
}

@supports (corner-shape: bevel) {
  .scope-note { clip-path: none; corner-shape: bevel; border-radius: var(--cut); }
}

/* ── Thread conversation view ─────────────────────────── */

.conversation { list-style: none; display: grid; gap: 1rem; }

.conversation-item {
  border-left: 3px solid var(--border-strong);
  padding-left: 0.8rem;
}

.conversation-item:last-child { border-left-color: var(--chip-cool); }

.conversation-meta {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  justify-content: space-between;
}

.conversation-meta .record-row-main { flex: 1 1 auto; min-width: 0; }

.conversation-body {
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  --cut: 8px;
  clip-path: var(--bevel);
}

/* Raw source inside a conversation would swamp it — collapsed by default
   anyway, but keep the block from dominating the thread. */
.conversation-body .raw-source pre { max-height: 16rem; }

@supports (corner-shape: bevel) {
  .conversation-body { clip-path: none; corner-shape: bevel; border-radius: var(--cut); }
}

/* ── Roles and hand-offs ──────────────────────────────── */

/* The role switcher and the rest of the topbar chrome moved to nav.css, with
   the bar they belong to. */

.role-list { list-style: none; display: grid; gap: 0.5rem; }

.role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.role-grant-form,
.handoff-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.role-grant-form label,
.handoff-form label { display: grid; gap: 0.2rem; }

.role-grant-form label span,
.handoff-form label span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.role-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.role-check span { display: grid; gap: 0.1rem; }

.form-row { display: grid; gap: 0.25rem; margin-bottom: 0.9rem; max-width: 28rem; }
.form-row legend { margin-bottom: 0.3rem; }

/* Inert, and deliberately left that way. This is (0,1,0) and the base it would
   have to beat — `input[type="submit"], button.btn, a.btn` — is (0,1,1), so
   none of these declarations has ever reached a button: every "quiet" button
   on the desk renders as a solid red one. Raising the specificity would strip
   the brand red off ~25 buttons, which is not this change's business — the
   glyph is what says what an action does now. If the quiet variant is ever
   wanted, it is a decision of its own.
 *
 * `background-color` rather than the `background` shorthand only so that
 * reviving it later cannot silently wipe the glyph, which is a background
 * image for want of anywhere else to put it on an <input>. */
.btn-quiet {
  background-color: transparent;
  color: var(--ink-secondary);
  border: 1px solid var(--border-strong);
}

.btn-quiet:hover { background-color: var(--surface-raised); color: var(--ink); }

.handoff-list { list-style: none; display: grid; gap: 0.6rem; }

.handoff-list li { display: flex; gap: 0.6rem; align-items: baseline; }

.handoff-kind {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.14rem 0.45rem;
  --cut: 4px;
  clip-path: var(--bevel);
  background: var(--chip-cool-bg);
  color: var(--chip-cool);
  border: 1px solid var(--chip-cool-line);
}

.handoff-unassign { background: var(--chip-warm-bg); color: var(--chip-warm); border-color: var(--chip-warm-line); }
.handoff-reassign { background: var(--chip-hot-bg); color: var(--chip-hot); border-color: var(--chip-hot-line); }

.preview-banner a { font-weight: 600; }

@supports (corner-shape: bevel) {
  .handoff-kind { clip-path: none; corner-shape: bevel; border-radius: var(--cut); }
}

/* ── Workflow, replies and teams ──────────────────────── */

.reply-form { display: grid; gap: 0.5rem; }
.reply-form label { display: grid; gap: 0.25rem; }
.reply-form textarea { width: 100%; font-family: inherit; }

.workflow-moves {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.workflow-buttons {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.workflow-buttons form { display: inline; }

.reply-list { list-style: none; display: grid; gap: 0.8rem; }

.reply-item {
  padding: 0.7rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: 3px solid var(--chip-cool);
  --cut: 8px;
  clip-path: var(--bevel);
}

.reply-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.reply-body { font-size: 0.92rem; line-height: 1.5; }

/* Why a reply did not arrive. Stated in words as well as colour — a failed
   delivery is exactly the thing a colour-blind reader must not miss. */
.reply-error {
  margin-top: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  color: var(--chip-hot);
  background: var(--chip-hot-bg);
  border-left: 2px solid var(--chip-hot-line);
}

/* Inert, same as .btn-quiet above and for the same reason: (0,1,0) against a
   (0,1,1) base, so a "small" button has always rendered at full size. Left as
   found — making it real is a decision of its own, and it would resize buttons
   on nine screens. */
.btn-small {
  margin-top: 0.5rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}

/* A KPI worth looking at twice. Bordered rather than recoloured, so the
   number itself stays as legible as the ones beside it. */
.kpi-card.is-alert {
  border-color: var(--chip-hot-line);
  border-left: 3px solid var(--chip-hot);
}
.kpi-card.is-alert h3 { color: var(--chip-hot); }

/* Single-column pages: a form has no business being as wide as a table. */
.record-page.is-narrow { max-width: 46rem; }

/* ── Filter rows (leads, events) ───────────────────────── */

.filter-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* The selected filter is marked by weight and a solid fill, not hue alone. */
.filter-chip.is-active {
  background: var(--tag-red);
  color: var(--tag-red-ink);
  border-color: var(--tag-red);
  font-weight: 600;
}

.filter-count {
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
}

.filter-chip.is-active .filter-count { background: rgba(255, 255, 255, 0.22); }

/* ── Team queues ──────────────────────────────────────── */

/* `.queue-badge` moved to nav.css — the rail is the only place it renders. */

.queue-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

/* The row "Take next" will actually hand over. Marked with a rule and a word
   rather than colour alone. */
.record-row.is-next { border-left: 3px solid var(--accent); padding-left: 0.6rem; }
.record-row.is-next .record-row-title::after {
  content: " · next";
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

/* Ownership transfer is the one irreversible control on the page */
.panel-danger { border-color: var(--chip-hot-line); border-left: 4px solid var(--chip-hot); }
.panel-danger .panel-head { background: var(--chip-hot); }
.panel-danger .panel-head h2 { color: #ffffff; }

@supports (corner-shape: bevel) {
  .reply-item { clip-path: none; corner-shape: bevel; border-radius: var(--cut); }
}