/* Component library built strictly on tokens.css — see MASTER SKILL.MD sections 6-14. */

/* ================= SIDEBAR ================= */

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface);
  padding: var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 0 var(--space-sm);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.sidebar-brand span { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.92rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-link:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
  box-shadow: var(--elevation-1);
}

.sidebar-link.active {
  color: var(--text-primary);
  background: var(--surface-recessed);
  box-shadow: var(--elevation-recessed);
  font-weight: 600;
}

.sidebar-link .icon { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-footer {
  margin-top: auto;
  padding: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ================= HEADER ================= */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg);
  gap: var(--space-md);
}

.app-header h1 { font-size: 1.15rem; margin: 0; }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font-size: 0.85rem;
}
.user-chip .role { color: var(--text-muted); font-size: 0.75rem; }

.notification-bell { position: relative; }
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--state-error);
  color: var(--surface);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}

.notification-menu { position: relative; }
.notification-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notification-dropdown[hidden] { display: none; }
.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.notification-dropdown-header form { margin: 0; }
.notification-dropdown-list {
  max-height: 380px;
  overflow-y: auto;
}
.notification-empty {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.notification-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background var(--transition-fast);
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--surface-recessed); }
.notification-item .icon { flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.notification-item-body { min-width: 0; }
.notification-item-title { font-size: 0.85rem; font-weight: 600; }
.notification-item-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notification-item-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.notification-dropdown-footer {
  display: block;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
}
.notification-dropdown-footer:hover { color: var(--text-primary); }

/* Same bubble language as the notification dropdown above (position,
   rounded corners, elevation), scoped down to a single block of text
   anchored to whatever triggered it — used for the inbox "View summary"
   tooltip, reusable anywhere else a short AI note needs the same look. */
.summary-tooltip-menu { position: relative; display: inline-block; }
.summary-tooltip-bubble {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-3);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  z-index: 40;
}
.summary-tooltip-bubble[hidden] { display: none; }

/* Click-to-open multi-select — same bubble language as the notification
   dropdown/summary tooltip above, but the panel holds checkboxes instead of
   a list or a note. Used by the Sales Navigator saved-search form for every
   fixed-vocabulary Lead Filter (seniority, industry, company size, etc.) —
   a real dropdown a person clicks and picks from, not a multi-row listbox. */
.checkbox-dropdown { position: relative; }
.checkbox-dropdown-toggle {
  width: 100%;
  height: var(--control-height);
  padding: 0 12px 0 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  color: var(--text-primary);
  font-family: var(--font-entry);
  font-size: 0.92rem;
  box-shadow: var(--elevation-recessed);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.checkbox-dropdown-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkbox-dropdown-toggle .icon { flex-shrink: 0; color: var(--text-muted); transition: transform var(--transition-fast); }
.checkbox-dropdown-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.checkbox-dropdown-toggle:focus { outline: none; box-shadow: var(--elevation-recessed-strong); }
.checkbox-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-3);
  z-index: 40;
  padding: 6px;
}
.checkbox-dropdown-panel[hidden] { display: none; }
.checkbox-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
}
.checkbox-dropdown-option:hover { background: var(--surface-recessed); }

/* Add/remove rows for a Lead Filter field that can hold more than one value
   (job title, company, geography, ...) — each value gets its own input
   instead of one comma-separated string, so a comma inside a real value
   (e.g. "Acme, Inc.") can never be mistaken for two separate entries. */
.repeatable-field-row { display: flex; gap: 8px; margin-bottom: 8px; }
.repeatable-field-row .input { flex: 1; }
.repeatable-field-remove {
  flex-shrink: 0;
  width: var(--control-height);
  height: var(--control-height);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  box-shadow: var(--elevation-recessed);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.repeatable-field-remove:hover { color: var(--state-error); }
.repeatable-field-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--control-dark);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--control-dark);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* ================= BUTTONS ================= */

.btn {
  /* Reset native <button> chrome so a <button class="btn"> renders pixel
     identical to an <a class="btn">, without this a real <button> (used
     wherever a control must not navigate, e.g. a View that only refreshes
     an in page preview) can sit a hair off from its neighbouring links. */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  line-height: normal;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--control-height-sm);
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { box-shadow: var(--elevation-2); }
.btn:active { box-shadow: var(--elevation-recessed); }
.btn:disabled { color: var(--text-muted); box-shadow: none; cursor: not-allowed; }

.btn.is-loading { cursor: progress; }
.btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0.6;
  animation: btn-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.6s; }
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-primary {
  background: var(--control-dark);
  color: var(--surface);
}
.btn-primary:hover { background: var(--control-dark-hover); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 0.8rem; }
.btn-danger { color: var(--state-error); }

/* ================= TASK TOGGLE (complete / reopen — a real two-way switch,
   not a one-shot button, so accountability works in both directions) ================= */

.task-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.task-toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.task-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surface-recessed);
  box-shadow: var(--elevation-recessed);
  border-radius: 999px;
  transition: background var(--transition-base);
}
.task-toggle-track::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: var(--elevation-1);
  transition: transform var(--transition-base);
}
.task-toggle input:checked ~ .task-toggle-track {
  background: var(--state-success);
}
.task-toggle input:checked ~ .task-toggle-track::before {
  transform: translateX(16px);
}
.task-toggle input:focus-visible ~ .task-toggle-track {
  outline: 2px solid var(--control-dark);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .task-toggle-track, .task-toggle-track::before { transition-duration: 0.01ms; }
}

/* ================= FORMS ================= */

.field { margin-bottom: var(--space-xl); margin-top: var(--space-lg); }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.field .hint { font-size: 0.76rem; color: var(--text-muted); margin-top: 4px; }

.input, .select, .textarea {
  width: 100%;
  height: var(--control-height);
  padding: 0 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-recessed);
  color: var(--text-primary);
  font-family: var(--font-entry);
  font-size: 0.92rem;
  box-shadow: var(--elevation-recessed);
  transition: box-shadow var(--transition-fast);
}
.textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  box-shadow: var(--elevation-recessed-strong);
}

.form {
  margin-bottom: var(--space-xl);
  max-width: 100%;
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-md); }
.form-grid .field-full { grid-column: 1 / -1; }

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: 16px; height: 16px; }

/* ================= PLACEHOLDER PICKER (drag-and-drop template tokens) ================= */

.placeholder-picker {
  background: var(--surface-recessed);
  box-shadow: var(--elevation-recessed);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.placeholder-picker-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.placeholder-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.placeholder-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--elevation-1);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: grab;
  user-select: none;
}
.placeholder-chip:hover { box-shadow: var(--elevation-2); }
.placeholder-chip:active { cursor: grabbing; box-shadow: var(--elevation-recessed); }
.placeholder-chip:focus-visible { outline: 2px solid var(--control-dark); outline-offset: 2px; }

/* Drop-target affordance on the actual .input/.textarea fields a picker targets. */
.input.is-drop-target,
.textarea.is-drop-target {
  box-shadow: 0 0 0 2px var(--control-dark), var(--elevation-recessed);
}

/* ================= ACTIVITY CARDS (dashboard, call queue history, account
   activity tab — one shared card so all three stay visually consistent) ================= */

.activity-card-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.activity-card {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--elevation-1);
}
.activity-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.activity-card-header strong { font-size: 0.92rem; }
.activity-card-topright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.activity-card-time { font-size: 0.78rem; white-space: nowrap; }
.activity-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

.activity-card-field { margin-bottom: 24px; }
.activity-card-field-label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a5cdff;
  font-weight: 600;
  margin-bottom: 2px;
}
.activity-card-field-value { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }

/* Deliberately the loudest thing on the card — a follow-up commitment is a
   promise made to a prospect, not just informational metadata, so it reads
   as bold and warning-toned rather than a muted footnote like the rest. */
.activity-card-followup {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--state-warning-bg);
  color: var(--state-warning);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ================= COMMENT THREAD (task/account internal discussion) ================= */

.comment-list { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.comment-item {
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-1);
  padding: 10px 14px;
}
.comment-meta { font-size: 0.78rem; margin-bottom: 4px; }
.comment-meta strong { color: var(--text-primary); }
.comment-body { font-size: 0.88rem; color: var(--text-secondary); white-space: pre-wrap; }
.comment-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.comment-form .textarea { min-height: 70px; }

/* ================= SEARCH PROGRESS (any long-running action needing a full-panel
   "this is working, stay on this page" state instead of just a button spinner —
   AI lead search, proposal drafting, proposal sending) ================= */

.search-progress {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  max-width: 440px;
  margin: var(--space-xl) auto;
}
.search-progress h2 { font-size: 1.05rem; margin-bottom: 8px; }
.search-progress p { font-size: 0.88rem; }
.search-progress-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  border: 3px solid var(--surface-recessed);
  border-top-color: var(--text-primary);
  box-shadow: var(--elevation-1);
  animation: btn-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .search-progress-spinner { animation-duration: 2s; }
}
.search-progress-error {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--state-error-bg);
  color: var(--state-error);
  font-size: 0.85rem;
}

/* ================= STATUS DOT + TOOLTIP (e.g. research profile completeness) ================= */

.status-dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  cursor: default;
}
.status-dot-complete { background: var(--state-success); }
.status-dot-partial { background: var(--state-warning); }
.status-dot-none { background: var(--state-error); }

.status-dot[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--control-dark);
  color: var(--surface);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 20;
}
.status-dot[data-tooltip]:hover::after,
.status-dot[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* ================= COURSE PICKER (grouped by programme, filterable) ================= */

.course-picker {
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface-recessed);
  box-shadow: var(--elevation-recessed);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}
.course-picker-group + .course-picker-group { margin-top: var(--space-sm); }
.course-picker-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 6px 0 4px;
}
.course-picker-item { margin-bottom: 2px; }

/* ================= CARDS (used sparingly) ================= */

.card {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--elevation-1);
  margin-bottom: var(--space-md);
}

.stat {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--elevation-1);
}
.stat .value { font-size: 1.7rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.stat .label { font-size: 0.8rem; color: var(--text-muted); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); }

/* ================= TABLES ================= */

.table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--elevation-1); margin-bottom: var(--space-md); }

.table { min-width: 640px; background: var(--surface-raised); }
.table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 12px 16px;
}
.table td { padding: 14px 16px; font-size: 0.88rem; border-top: 1px solid rgba(0,0,0,0.05); }
.table tr:hover td { background: rgba(0,0,0,0.015); }
.table .row-link { display: block; color: var(--text-primary); font-weight: 500; }
.table tr[data-row-href] { cursor: pointer; }
.table tr[data-row-href]:hover td { background: rgba(0,0,0,0.035); }
.table tr[data-row-href] a, .table tr[data-row-href] button, .table tr[data-row-href] select, .table tr[data-row-href] input { cursor: auto; }

/* ================= TASK EXPAND / DETAIL ROW =================
   A CSS-only accordion: the wrapper is a 1-row grid that animates between
   0fr (collapsed) and 1fr (open) rather than an explicit pixel height, so it
   works for any amount of content without JS measuring it. The child stays
   overflow:hidden so it clips cleanly mid-transition. */

.task-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.task-expand-btn:hover { color: var(--text-primary); background: var(--surface-recessed); }
.task-expand-icon { transition: transform 560ms cubic-bezier(0.65, 0, 0.35, 1); }
.task-expand-btn[aria-expanded="true"] .task-expand-icon { transform: rotate(180deg); }

.task-collapse-row { display: flex; justify-content: center; }

.task-detail-row td { padding: 0; border-top: none; background: var(--surface-recessed); }
.task-detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 620ms cubic-bezier(0.65, 0, 0.35, 1);
}
.task-detail-row.is-open .task-detail-wrap { grid-template-rows: 1fr; }
.task-detail-inner { overflow: hidden; min-height: 0; }
.task-detail-body {
  padding: var(--space-md) 16px var(--space-lg);
  opacity: 0;
  transition: opacity 480ms ease-in-out 100ms;
}
.task-detail-row.is-open .task-detail-body { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .task-detail-wrap, .task-detail-body, .task-expand-icon { transition-duration: 1ms; }
}

/* ================= BADGES (functional colour only) ================= */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-success { background: var(--state-success-bg); color: var(--state-success); }
.badge-warning { background: var(--state-warning-bg); color: var(--state-warning); }
.badge-error { background: var(--state-error-bg); color: var(--state-error); }
.badge-info { background: var(--state-info-bg); color: var(--state-info); }
.badge-neutral { background: var(--surface-recessed); color: var(--text-secondary); box-shadow: var(--elevation-recessed); }
/* LinkedIn's own brand blue, deliberately not one of the state-* semantic
   colors above -- this badge identifies a lead's source/ownership (worked
   by PhantomBuster automation, not a rep), not a status, so it needs to
   read as visually distinct from success/warning/info at a glance. */
.badge-linkedin-automated { background: rgba(10, 102, 194, 0.12); color: #0A66C2; }

/* Conversation list on the inbox single-message view — every message that
   shares a thread_key, chronological, current message plain text, every
   other one a real link to go view it. */
.thread-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-wrap: wrap;
}
.thread-item:last-child { border-bottom: none; }
.thread-item-active { background: var(--surface-recessed); border-radius: var(--radius-md); padding: var(--space-sm); }

/* AI-assess result panel — same recessed neumorphic surface as .badge-neutral
   (carved-in, not raised), so an AI-generated result reads as "set into" the
   card rather than floating unstyled text on top of it. */
.ai-qualify-panel {
  margin-top: 8px;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-recessed);
  box-shadow: var(--elevation-recessed);
  border-radius: var(--radius-md);
}
.ai-qualify-panel:empty { display: none; }
.ai-qualify-panel p { margin: 8px 0 0; }
.ai-qualify-panel p:first-child { margin-top: 0; }

/* ================= FLASH MESSAGES ================= */

.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: var(--space-md); font-size: 0.88rem; }
.flash-success { background: var(--state-success-bg); color: var(--state-success); }
.flash-error { background: var(--state-error-bg); color: var(--state-error); }

/* ================= KANBAN (Opportunity pipeline board) ================= */

.kanban { display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-sm); }
.kanban-column { flex: 0 0 260px; }
.kanban-column-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  padding: 0 4px var(--space-sm);
}
.kanban-card {
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-1);
  padding: 12px 14px;
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
}
.kanban-card .org-name { font-weight: 600; margin-bottom: 4px; }
.kanban-card .value { color: var(--text-muted); font-size: 0.78rem; }
.kanban-drop {
  min-height: 40px;
  border-radius: var(--radius-sm);
}

/* ================= AI EXPLANATION PANEL ================= */

.ai-panel {
  background: var(--surface-recessed);
  box-shadow: var(--elevation-recessed);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.ai-panel h3 { margin-bottom: 10px; }
.ai-tag-list { display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; color: var(--text-secondary); }

/* ================= LIST DETAIL LAYOUT (Account 360, etc.) ================= */

.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-lg); align-items: start; }
.detail-grid-wide { display: grid; grid-template-columns: 4fr 1fr; gap: var(--space-lg); align-items: start; }
.tabs { display: flex; gap: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid rgba(0,0,0,0.06); }
.tab { padding: 10px 4px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; position: relative; }
.tab.active { color: var(--text-primary); font-weight: 600; }
.tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--control-dark); }

.empty-state { padding: var(--space-lg); text-align: center; color: var(--text-muted); font-size: 0.88rem; }

/* ================= THEME TOGGLE (light/dark, header) =================
   A self-contained "neon switch" control — markup in includes/theme-toggle.php,
   behaviour in assets/js/theme-toggle.js. All colour/timing values below are
   scoped to .switch as component-local custom properties rather than added to
   tokens.css: they're this control's own decorative accents (a red/green LED,
   a neon glow), not shared design tokens other components should reference.
   The two exceptions are --on-hue1 / --on-hue2, which stay unprefixed because
   includes/theme-toggle.php's inline SVG gradients reference them by that
   exact name (SVG presentation attributes resolve var() same as CSS does,
   but only if the name matches) — still scoped to .switch, just not renamed. */

.switch {
  --switch-hue: 223;
  --switch-off-hue: 3;
  --on-hue1: 123;
  --on-hue2: 168;
  --switch-primary: hsl(var(--switch-hue), 90%, 50%);
  --switch-trans-dur: 0.6s;
  --switch-trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
  display: block;
  position: relative;
  width: 5em;
  height: 3em;
  font-size: 8px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.switch__base-outer,
.switch__base-inner {
  display: block;
  position: absolute;
}
.switch__base-outer {
  border-radius: 1.25em;
  box-shadow:
    -0.125em -0.125em 0.25em hsl(var(--switch-hue), 10%, 30%),
    0.125em 0.125em 0.125em hsl(var(--switch-hue), 10%, 30%) inset,
    0.125em 0.125em 0.25em hsl(0, 0%, 0%),
    -0.125em -0.125em 0.125em hsl(var(--switch-hue), 10%, 5%) inset;
  top: 0.125em;
  left: 0.125em;
  width: 4.75em;
  height: 2.75em;
}
.switch__base-inner {
  border-radius: 1.125em;
  box-shadow:
    -0.25em -0.25em 0.25em hsl(var(--switch-hue), 10%, 30%) inset,
    0.0625em 0.0625em 0.125em hsla(var(--switch-hue), 10%, 30%),
    0.125em 0.25em 0.25em hsl(var(--switch-hue), 10%, 5%) inset,
    -0.0625em -0.0625em 0.125em hsla(var(--switch-hue), 10%, 5%);
  top: 0.375em;
  left: 0.375em;
  width: 4.25em;
  height: 2.25em;
}
.switch__base-neon {
  display: block;
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.switch__base-neon path {
  stroke-dasharray: 0 104.26 0;
  transition: stroke-dasharray var(--switch-trans-dur) var(--switch-trans-timing);
}
.switch__input {
  outline: transparent;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}
.switch__input::before {
  border-radius: 0.125em;
  box-shadow: 0 0 0 0.125em hsla(var(--switch-hue), 90%, 50%, 0);
  content: "";
  display: block;
  position: absolute;
  inset: -0.125em;
  transition: box-shadow 0.15s linear;
}
.switch__input:focus-visible::before {
  box-shadow: 0 0 0 0.125em var(--switch-primary);
}
.switch__knob,
.switch__knob-container {
  border-radius: 1em;
  display: block;
  position: absolute;
}
.switch__knob {
  background-color: hsl(var(--switch-hue), 10%, 15%);
  background-image:
    radial-gradient(88% 88% at 50% 50%, hsl(var(--switch-hue), 10%, 20%) 47%, hsla(var(--switch-hue), 10%, 20%, 0) 50%),
    radial-gradient(88% 88% at 47% 47%, hsl(var(--switch-hue), 10%, 85%) 45%, hsla(var(--switch-hue), 10%, 85%, 0) 50%),
    radial-gradient(65% 70% at 40% 60%, hsl(var(--switch-hue), 10%, 20%) 46%, hsla(var(--switch-hue), 10%, 20%, 0) 50%);
  box-shadow:
    -0.0625em -0.0625em 0.0625em hsl(var(--switch-hue), 10%, 15%) inset,
    -0.125em -0.125em 0.0625em hsl(var(--switch-hue), 10%, 5%) inset,
    0.75em 0.25em 0.125em hsla(0, 0%, 0%, 0.8);
  width: 2em;
  height: 2em;
  transition: transform var(--switch-trans-dur) var(--switch-trans-timing);
}
.switch__knob-container {
  overflow: hidden;
  top: 0.5em;
  left: 0.5em;
  width: 4em;
  height: 2em;
}
.switch__knob-neon {
  display: block;
  width: 2em;
  height: auto;
}
.switch__knob-neon circle {
  opacity: 0;
  stroke-dasharray: 0 90.32 0 54.19;
  transition:
    opacity var(--switch-trans-dur) steps(1, end),
    stroke-dasharray var(--switch-trans-dur) var(--switch-trans-timing);
}
.switch__knob-shadow {
  border-radius: 50%;
  box-shadow: 0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.9);
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 2em;
  height: 2em;
  transition: transform var(--switch-trans-dur) var(--switch-trans-timing);
}
.switch__led {
  background-color: hsl(var(--switch-off-hue), 90%, 70%);
  border-radius: 50%;
  box-shadow:
    0 -0.0625em 0.0625em hsl(var(--switch-off-hue), 90%, 40%) inset,
    0 0 0.125em hsla(var(--switch-off-hue), 90%, 70%, 0.3),
    0 0 0.125em hsla(var(--switch-off-hue), 90%, 70%, 0.3),
    0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.5);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0.25em;
  height: 0.25em;
  transition:
    background-color var(--switch-trans-dur) var(--switch-trans-timing),
    box-shadow var(--switch-trans-dur) var(--switch-trans-timing);
}
.switch__text {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}
.switch__input:checked ~ .switch__led {
  background-color: hsl(var(--on-hue1), 90%, 70%);
  box-shadow:
    0 -0.0625em 0.0625em hsl(var(--on-hue1), 90%, 40%) inset,
    0 -0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3),
    0 0.125em 0.125em hsla(var(--on-hue1), 90%, 70%, 0.3),
    0.125em 0.125em 0.125em hsla(0, 0%, 0%, 0.5);
}
.switch__input:checked ~ .switch__base-neon path {
  stroke-dasharray: 52.13 0 52.13;
}
.switch__input:checked ~ .switch__knob-shadow,
.switch__input:checked ~ .switch__knob-container .switch__knob {
  transform: translateX(100%);
}
.switch__input:checked ~ .switch__knob-container .switch__knob-neon circle {
  opacity: 1;
  stroke-dasharray: 45.16 0 45.16 54.19;
  transition-timing-function: steps(1, start), var(--switch-trans-timing);
}
@media (prefers-reduced-motion: reduce) {
  .switch__base-neon path,
  .switch__knob,
  .switch__knob-shadow,
  .switch__knob-neon circle,
  .switch__led {
    transition-duration: 0.01ms;
  }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 960px) {
  .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    padding: var(--space-sm);
    position: static;
    height: auto;
  }
  .sidebar-brand { display: none; }
  .sidebar-nav { flex-direction: row; }
  .sidebar-footer { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid-wide { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}