/* Sidebar container – overlay & slide */
.sidebar-column {
  position: fixed;
  top: 12vh;
  left: 0;
  width: 260px;
  min-height: 200px;
  height: fit-content;
  max-height: 82vh;
  z-index: 40;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.sidebar-column.collapsed {
  transform: translateX(-260px);
}

/* Inner sidebar – the charcoal board */
.sidebar {
  background: var(--board);
  padding: 28px 18px;
  --cut: 16px;
  clip-path: var(--bevel-right);
  border: 1px solid var(--border);
  border-left: none;
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
}

/* Toggle handle – a red tag hanging off the board's edge */
.sidebar-toggle {
  position: absolute;
  right: -38px;
  top: 24px;
  width: 38px;
  height: 76px;
  background: var(--tag-red);
  color: var(--tag-red-ink);
  border: none;
  --cut: 12px;
  clip-path: var(--bevel-right);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.sidebar-toggle:hover {
  background: var(--tag-red-hover);
}

.sidebar-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* chevron points right when collapsed (open me), left when expanded */
.sidebar-column.collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

/* Navigation – prevent squishing */
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.sidebar-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--twine);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 12px 14px;
}

.sidebar-heading img {
  width: 24px;
  height: 24px;
}

.tab-button {
  background: transparent;
  border: none;
  color: var(--board-ink-muted);
  text-align: left;
  padding: 11px 16px;
  cursor: pointer;
  --cut: 8px;
  clip-path: var(--bevel);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
}

.tab-button:hover {
  background: rgba(230, 211, 179, 0.14);
  color: var(--board-ink);
}

.tab-button.active {
  background: var(--tag-red);
  color: var(--tag-red-ink);
  font-weight: 700;
}

/* Keep nav non-interactive while hidden off-canvas */
.sidebar-column.collapsed .sidebar nav {
  pointer-events: none;
}

.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) ─────────────── */

.sidebar-toggle:focus-visible {
  outline-offset: -4px;
}

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

  .sidebar,
  .sidebar-toggle {
    border-radius: 0 var(--cut) var(--cut) 0;
  }

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

  .sidebar-toggle:focus-visible,
  .tab-button: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;
}

/* ── 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,
  .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, hand-offs and the role switcher ───────────── */

.role-switch { display: flex; align-items: center; gap: 0.4rem; }

.role-switch-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--board-ink-muted);
}

.role-switch select { font-size: 0.82rem; padding: 0.25rem 0.45rem; }

.topbar-user {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--twine);
  white-space: nowrap;
}

.topbar-signout button,
.topbar-signout input[type="submit"] {
  background: transparent;
  color: var(--board-ink-muted);
  border: 1px solid var(--board-grid);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
}

.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; }

.btn-quiet {
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid var(--border-strong);
}

.btn-quiet:hover { background: 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);
}

.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 ──────────────────────────────────────── */

.nav-with-badge { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Carries a number, not just a dot: "how much is waiting" is the useful
   signal, and it stays legible to anyone who cannot see the colour. */
.queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  color: #ffffff;
  background: var(--tag-red);
  border-radius: 999px;
}

.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); }
}