/* Support console additions on top of style.css's terminal design language —
   thread queue rows, chat bubble view, and the intent/tone briefing panel. */

/* Real bug caught live: the merged "Resolved & all threads" section had no
   flex constraint of its own (default flex: 0 1 auto), so its full content
   height (15+ cards) was reserved before the flex:1 "Pending approval"/
   "Needs human" sections got anything, collapsing both to 0px. Giving it
   flex:2 (double share, since it's usually the longest list) makes all four
   sidebar sections share space instead of one section eating it all. */
.queue-section.all-threads { flex: 2 !important; }

/* One page, not two (SPEC.md §18) — the merged "Resolved & all threads"
   section holds two different card types in one scroll; this just labels
   where one ends and the other begins. */
.queue-subhead {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-faint); padding: 8px 12px 4px; background: var(--panel);
}

.thread-row {
  display: block; padding: 7px 12px; cursor: pointer;
  background: var(--panel); border-bottom: 1px solid var(--border); transition: 0.08s;
}
.thread-row:nth-child(even) { background: var(--panel-alt); }
.thread-row:hover { background: var(--amber-bg); }
.thread-row.active { background: var(--amber-bg); box-shadow: inset 2px 0 0 var(--amber); }
.thread-row-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.thread-status-badge { font-family: var(--mono); font-size: 8.5px; font-weight: 700; padding: 1px 6px; text-transform: uppercase; letter-spacing: 0.02em; border: 1px solid; }
.thread-status-badge.needs_human { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
.thread-status-badge.human_handled { color: var(--cyan); background: var(--cyan-bg); border-color: var(--border-bright); }
.thread-status-badge.ai_handled { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.thread-status-badge.new { color: var(--cyan); background: var(--cyan-bg); border-color: var(--border-bright); }
.intake-row .promote-btn { margin-top: 5px; width: 100%; }
.thread-row-preview { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.thread-row-meta { font-size: 9.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ── Unified agent rail — one ordered panel: who, story, reply, evidence ──
   Replaces five separately-stacked blocks with a single scroll, matching
   Zendesk's Agent Workspace context-panel pattern (research-backed). */
.support-detail { flex-direction: row !important; overflow: hidden; }
.chat-column { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--border-bright); }
.rail-column { width: 320px; flex-shrink: 0; overflow-y: auto; background: var(--panel-alt); }
.rail-row { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.rail-row:last-child { border-bottom: none; }
.rail-label { font-family: var(--mono); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 6px; }
.rail-val { font-size: 12px; color: var(--text-dim); }
.rail-name { font-weight: 700; color: var(--text); font-size: 12.5px; margin-right: 6px; }
.rail-sub { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }

.intent-pill { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--text); background: var(--panel); border: 1px solid var(--border-bright); padding: 3px 9px; }
.tone-pill { font-family: var(--mono); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border: 1px solid; margin-left: 5px; }
.tone-pill.calm, .tone-pill.satisfied { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.tone-pill.frustrated, .tone-pill.confused { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-dim); }
.tone-pill.angry, .tone-pill.urgent { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }

/* ── Customer profile/history — inline within the "Who" rail row ── */
.profile-strip-health { font-family: var(--mono); font-size: 9px; font-weight: 700; padding: 1px 6px; text-transform: uppercase; border: 1px solid; margin-left: 4px; }
.profile-strip-health.green { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.profile-strip-health.yellow { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-dim); }
.profile-strip-health.red { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }

/* ── Quick-reply templates — lives inside the rail's "Suggested reply" row ── */
.template-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.template-label { display: none; } /* the rail-label above already says "Suggested reply" */
.template-chip { font-family: var(--sans); font-size: 10.5px; padding: 4px 9px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); cursor: pointer; transition: 0.1s; }
.template-chip:hover { border-color: var(--amber-dim); color: var(--amber); }

/* ── Plain-language briefing — the rail's "Story" row content ── */
.briefing-headline { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; line-height: 1.45; }
.briefing-bullets { margin: 0; padding-left: 16px; }
.briefing-bullets li { font-family: var(--sans); font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 3px; }

.res-badge { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border: 1px solid; margin-left: 5px; }
.res-badge.verified { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.res-badge.recontacted { color: var(--red); background: var(--red-bg); border-color: var(--red-border); }
.res-badge.pending { color: var(--text-faint); background: transparent; border-color: var(--border-bright); }

/* ── Troubleshooting: real facts/conflicts/unknowns — the rail's last row,
   collapsed by default (progressive disclosure, capped at one level) ── */
.troubleshoot-panel { width: 100%; }
.troubleshoot-toggle { cursor: pointer; font-family: var(--mono); font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.troubleshoot-toggle:hover { color: var(--amber); }
.troubleshoot-row { margin-top: 8px; margin-bottom: 6px; }
.troubleshoot-row:last-child { margin-bottom: 0; }
.troubleshoot-label { display: block; font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 4px; }

/* ── Analytics view ── */
.analytics-view { flex: 1; overflow-y: auto; padding: 18px 20px; }
.chart-row { display: flex; gap: 16px; margin-top: 16px; align-items: stretch; }
.chart-row .panel { margin-bottom: 0; }

/* ── Live pipeline tracker (SPEC.md §18) — 4-step Scout→Arbiter→Advisor→
   Herald visualization, shown on an intake row while a case is "running" ── */
.pipeline-tracker { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 6px; font-family: var(--mono); font-size: 9px; }
.pt-step { display: flex; align-items: center; gap: 3px; padding: 2px 5px; border: 1px solid var(--border-bright); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.pt-step.pt-pending { color: var(--text-faint); }
.pt-step.pt-running { color: var(--amber); border-color: var(--amber); background: var(--amber-bg); animation: pt-pulse 1.2s ease-in-out infinite; }
.pt-step.pt-done { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.pt-step.pt-failed { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
.pt-icon { font-size: 10px; }
.pt-arrow { color: var(--text-faint); font-size: 9px; }
.pt-error { font-size: 9.5px; color: var(--red); margin-top: 4px; }
@keyframes pt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── Customers tab (SPEC.md §18) ── */
.customers-layout { display: flex; height: calc(100vh - 130px); border: 1px solid var(--border-bright); }
.customers-layout .sidebar { border-right: 1px solid var(--border-bright); }
.customers-layout .detail { padding: 18px 20px; overflow-y: auto; }

/* Chat opened inline on a ticket — profile+ticket-history stay visible next
   to the chat instead of navigating away to Queue (SPEC.md §18 follow-up:
   "chat while looking his whole profile with tickets"). */
.customers-layout .detail.with-chat { display: flex; flex-direction: row; padding: 0; overflow: hidden; }
.customers-layout .detail.with-chat .profile-col { flex: 1; min-width: 280px; overflow-y: auto; padding: 18px 20px; border-right: 1px solid var(--border-bright); }
.customers-layout .detail.with-chat .chat-column { flex: 1.3; min-width: 0; border-right: none; }
.agent-table tr.active { background: var(--amber-bg); }

/* Pending-run review (recommendation/conflicts/approve-decline) opened
   inline on a ticket, same slot as the chat column above — "reading and
   resolving the conflict / approving so [the customer] can see the update
   live" without leaving the profile+ticket-history view. */
.customers-layout .detail.with-chat .decision-column { flex: 1.3; min-width: 0; overflow-y: auto; padding: 18px 20px; }

/* ── Health tab services table ── */
.svc-ok { color: var(--green); text-transform: uppercase; font-family: var(--mono); font-size: 10px; }
.svc-bad { color: var(--red); text-transform: uppercase; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.svc-warn { color: var(--amber); text-transform: uppercase; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.panel-sub { font-size: 11px; color: var(--text-faint); margin: -4px 0 10px; line-height: 1.5; }
@media (max-width: 900px) { .chart-row { flex-direction: column; } }
.vol-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 10px 4px 0; background: var(--panel); border: 1px solid var(--border); }
.vol-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.vol-bar { width: 100%; max-width: 28px; background: var(--amber); min-height: 2px; }
.vol-bar-label { font-size: 8px; color: var(--text-faint); font-family: var(--mono); }

/* ── Chat view ── */
.chat-scroll { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.chat-msg.customer { align-self: flex-start; }
.chat-msg.assistant, .chat-msg.agent { align-self: flex-end; }
.chat-bubble { padding: 9px 12px; font-family: var(--sans); font-size: 12px; line-height: 1.55; white-space: pre-wrap; border: 1px solid var(--border); }
.chat-msg.customer .chat-bubble { background: var(--panel); color: var(--text); }
.chat-msg.assistant .chat-bubble { background: var(--panel-alt); color: var(--text-dim); }
.chat-msg.assistant.ungrounded .chat-bubble { border-color: var(--red-border); }
.chat-msg.agent .chat-bubble { background: var(--amber-bg); color: var(--text); border-color: var(--amber-dim); }
.chat-msg.internal-note { align-self: center; max-width: 90%; }
.chat-msg.internal-note .chat-bubble { background: var(--gray-bg); color: var(--text-dim); border: 1px dashed var(--border-bright); font-style: italic; }
.chat-msg-meta { font-size: 9px; color: var(--text-faint); font-family: var(--mono); padding: 0 2px; }

/* ── Agent actions: notes + escalation ── */
.action-row { display: flex; gap: 6px; padding: 8px 16px 0; flex-wrap: wrap; }
.action-btn { font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 6px 11px; cursor: pointer; border: 1px solid var(--border-bright); background: var(--panel); color: var(--text-dim); transition: 0.1s; }
.action-btn:hover { background: var(--panel-alt); color: var(--text); }
.action-btn.escalate-eng:hover { border-color: var(--cyan); color: var(--cyan); }
.action-btn.escalate-acct:hover { border-color: var(--amber-dim); color: var(--amber); }
.esc-inline-note { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--cyan); }

/* ── Unified timeline: one collapsed line for everything older than the
   most recent 4 entries — Linear's exact mechanism, one disclosure level ── */
.timeline-collapsed { align-self: center; margin-bottom: 4px; }
.timeline-collapsed summary {
  cursor: pointer; list-style: none; font-family: var(--mono); font-size: 10px;
  color: var(--text-faint); text-align: center; padding: 4px 12px;
  border: 1px dashed var(--border-bright); background: var(--panel);
}
.timeline-collapsed summary::-webkit-details-marker { display: none; }
.timeline-collapsed summary:hover { color: var(--amber); border-color: var(--amber-dim); }
.timeline-collapsed-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; opacity: 0.75; }

.reply-composer { border-top: 1px solid var(--border-bright); padding: 10px 16px; display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.reply-composer textarea { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--border-bright); color: var(--text); font-family: var(--sans); font-size: 12px; padding: 8px 10px; resize: none; outline: none; }
.reply-composer textarea:focus { border-color: var(--amber); }
.reply-composer input#replyAgentName { width: 130px; background: var(--bg); border: 1px solid var(--border-bright); color: var(--text); font-family: var(--sans); font-size: 12px; padding: 8px 10px; outline: none; }
.reply-composer input#replyAgentName:focus { border-color: var(--amber); }
.reply-composer button { font-family: var(--mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 0 16px; cursor: pointer; border: none; background: var(--amber); color: var(--bg); }
.reply-composer button:hover:not(:disabled) { background: #FFC940; }
.reply-composer button:disabled { opacity: 0.5; cursor: default; }

/* ── Analytics: per-agent table ── */
.agent-table { width: 100%; border-collapse: collapse; }
.agent-table th { text-align: left; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: 7px 10px; border-bottom: 1px solid var(--border-bright); }
.agent-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); background: var(--panel); }
.agent-table td.load-high { color: var(--red); font-weight: 700; }

/* ── System health status pill (mirrors .conn-pill) ── */
.sys-pill { font-family: var(--mono); font-size: 9.5px; padding: 0 14px; border-left: 1px solid var(--border); color: var(--text-faint); background: transparent; white-space: nowrap; display: flex; align-items: center; letter-spacing: 0.03em; }
.sys-pill.live { color: var(--green); }
.sys-pill.dead { color: var(--red); }