/* Qaro admin — styles per Qaro-StyleSpec.md. No frameworks. */

:root {
  /* Brand (dark teal) */
  --brand-950: #091B26; --brand-800: #153747; --brand-600: #1E4D63;
  --brand-400: #2D7A9A; --brand-200: #85B7CB; --brand-50: #E4F0F5;
  /* Accent (mint teal) */
  --accent-800: #0D7A68; --accent-600: #1FAD94; --accent-400: #48CDB8;
  --accent-200: #8AF1DA; --accent-50: #E0FAF5;
  /* Coral — logo only, never in UI (§6.7) */
  --coral-400: #FF9F5A; --coral-600: #E07A35; --coral-50: #FFF0E4;
  /* Gray (neutral) */
  --gray-900: #2C2C2A; --gray-800: #444441; --gray-600: #5F5E5A;
  --gray-400: #888780; --gray-200: #B4B2A9; --gray-50: #F1EFE8;

  /* Semantic variables (mapping confirmed 2026-07-01) */
  --color-text-primary: #2C2C2A;
  --color-text-secondary: #444441;
  --color-text-tertiary: #888780;
  --color-background-primary: #ffffff;
  --color-background-secondary: #F1EFE8;
  --color-border-tertiary: #E6E4DC;   /* subtle */
  --color-border-secondary: #B4B2A9;  /* stronger */

  /* --- Web-client UI-spec token bridge (per Qaro-WebClient-TokenTranslation.md) ---
     The UI spec + mockup use a generic design-system token vocabulary; these alias it onto the Qaro
     palette so the spec CSS resolves without rewriting either doc. New names only — the admin's
     --color-* tokens are untouched. Surfaces: cream thread canvas (surface-0), near-white sidebar
     (surface-1), white panels/bubbles (surface-2). Elevation via contrast + 0.5px borders, never
     shadow (the guide's --surface-popover/--shadow are skipped: unused, and shadows are forbidden). */
  --white: #FAFAF8;
  --surface-0: var(--gray-50);                    /* #F1EFE8 — thread canvas, row hover */
  --surface-1: var(--white);                      /* #FAFAF8 — sidebar (with a border) */
  --surface-2: var(--color-background-primary);   /* #ffffff — header, compose, bubbles, panels */

  --text-primary: var(--color-text-primary);      /* #2C2C2A */
  --text-secondary: var(--gray-600);              /* #5F5E5A (guide value, not admin's #444441) */
  --text-muted: var(--gray-400);                  /* #888780 */
  --text-accent: var(--brand-600);                /* #1E4D63 — active conversation name */
  --text-danger: #791F1F;
  --text-success: #27500A;
  --text-warning: #633806;

  --border: #D3D1C7;                              /* guide hairline (admin's is #E6E4DC) */
  --border-strong: var(--gray-200);              /* #B4B2A9 */
  --border-accent: var(--brand-400);              /* #2D7A9A — compose focus */
  --border-danger: #F09595;
  --border-success: #C0DD97;
  --border-warning: #FAC775;

  --bg-accent: var(--brand-50);                   /* #E4F0F5 — active row, sent bubble */
  --bg-danger: #FCEBEB;
  --bg-success: #EAF3DE;
  --bg-warning: #FAEEDA;

  --fill-accent: var(--accent-400);               /* #48CDB8 — unread dot, on-duty */
  --fill-danger: #E24B4A;                          /* danger dot (guide value; new red) */
  --fill-warning: #EF9F27;                         /* busy dot */
  --fill-primary: var(--brand-950);               /* #091B26 */

  --focus-shadow: 0 0 0 3px var(--brand-50);      /* the one sanctioned box-shadow: focus ring */

  --border-radius-md: 8px;
  --border-radius-lg: 12px;
}

* { box-sizing: border-box; }

/* Visually hidden but announced by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
}

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.2; color: var(--color-text-primary); }
a { color: var(--brand-600); text-decoration: none; }

/* --- Layout shell --- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 200px; background: #091B26;
  display: flex; flex-direction: column;
  height: 100vh; position: fixed; left: 0; top: 0;
}
.sidebar-logo { padding: 16px 14px; border-bottom: 0.5px solid rgba(255,255,255,0.1); }
.sidebar-logo .product-name { font-size: 15px; font-weight: 500; color: #ffffff; }
.sidebar-logo .product-sub { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.sidebar-nav { padding: 8px 0; flex: 1; }
.sidebar-section { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); padding: 12px 14px 4px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 13px;
  color: rgba(255,255,255,0.6); text-decoration: none; transition: background 0.1s;
}
.nav-item:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
.nav-item.active { background: rgba(255,255,255,0.1); color: #ffffff; border-left: 2px solid #48CDB8; }
.nav-item i { font-size: 16px; flex-shrink: 0; }

.sidebar-footer { padding: 12px 14px; border-top: 0.5px solid rgba(255,255,255,0.1); }
.sidebar-user { font-size: 12px; color: rgba(255,255,255,0.8); }
.sidebar-user .role { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* Language switch in the console sidebar. Matches the muted footer treatment — the active language
   is the only one at full contrast, so the control reads as state rather than as two buttons. */
.sidebar-lang { display: flex; align-items: center; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.sidebar-lang-label { font-size: 10px; color: rgba(255,255,255,0.45); width: 100%; }
.sidebar-lang-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.45);
}
.sidebar-lang-btn:hover { color: rgba(255,255,255,0.8); }
.sidebar-lang-btn.active { color: #fff; font-weight: 500; cursor: default; }
.sidebar-lang-sep { font-size: 11px; color: rgba(255,255,255,0.25); }

.main-content { flex: 1; margin-left: 200px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  height: 56px; border-bottom: 0.5px solid var(--color-border-tertiary);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--color-background-primary); position: sticky; top: 0; z-index: 10;
}
.topbar-title { font-size: 15px; font-weight: 500; color: var(--color-text-primary); }
.page-content { padding: 24px; }
.page-title { font-size: 22px; font-weight: 500; margin: 0 0 4px; }
.page-subtitle { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 24px; }

/* --- Cards --- */
.card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: 12px; padding: 14px 16px;
}
.card-title {
  font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 12px;
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* --- Metric cards --- */
.metric-card { background: var(--color-background-secondary); border-radius: 8px; padding: 12px 14px; }
.metric-label { font-size: 11px; color: var(--color-text-tertiary); margin: 0 0 4px; }
.metric-value { font-size: 22px; font-weight: 500; color: var(--color-text-primary); line-height: 1; margin: 0; }
.metric-sub { font-size: 11px; margin: 3px 0 0; color: var(--color-text-tertiary); }
.metric-sub.positive { color: #27500A; }
.metric-sub.negative { color: #791F1F; }

/* --- Badges --- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 20px; }
.badge-urgent { background: #FCEBEB; color: #791F1F; }
.badge-resolved { background: #EAF3DE; color: #27500A; }
.badge-warning { background: #FAEEDA; color: #633806; }
.badge-info { background: #E4F0F5; color: #153747; }
.badge-neutral { background: #F1EFE8; color: #444441; }
.badge-online { background: #E1F5EE; color: #085041; }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 8px; border: 0.5px solid; cursor: pointer; text-decoration: none; }
.btn-primary { background: #091B26; color: #ffffff; border-color: #091B26; }
.btn-primary:hover { background: #153747; border-color: #153747; }
.btn-secondary { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border-secondary); }
.btn-secondary:hover { background: var(--color-background-secondary); }
.btn-danger { background: #FCEBEB; color: #791F1F; border-color: #F09595; }
.btn-success { background: #EAF3DE; color: #27500A; border-color: #C0DD97; }

/* --- Forms --- */
.form-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 5px; display: block; }
.form-input { width: 100%; padding: 8px 12px; font-size: 13px; border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px; background: var(--color-background-primary); color: var(--color-text-primary); outline: none; }
.form-input:focus { border-color: #1E4D63; box-shadow: 0 0 0 3px #E4F0F5; }
.form-group { margin-bottom: 16px; }

/* --- Tables --- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { font-size: 11px; font-weight: 500; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 12px;
  border-bottom: 0.5px solid var(--color-border-tertiary); text-align: left; }
.data-table td { padding: 10px 12px; border-bottom: 0.5px solid var(--color-border-tertiary); color: var(--color-text-primary); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-background-secondary); }

/* --- Section label --- */
.section-label { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-tertiary); }

/* --- Schedule editor --- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.week-label { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.select { padding: 7px 12px; font-size: 13px; border: 0.5px solid var(--color-border-secondary);
  border-radius: 8px; background: var(--color-background-primary); color: var(--color-text-primary); }

.schedule-grid { width: 100%; border-collapse: collapse; border: 0.5px solid var(--color-border-tertiary);
  border-radius: 12px; overflow: hidden; background: var(--color-background-primary); table-layout: fixed; }
.schedule-grid th, .schedule-grid td { border: 0.5px solid var(--color-border-tertiary); padding: 0; }
.schedule-grid thead th { font-size: 11px; font-weight: 500; color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; text-align: center; background: var(--color-background-secondary); }
.schedule-grid thead th.today { color: var(--brand-800); }
.schedule-grid .row-label { font-size: 12px; font-weight: 500; color: var(--color-text-secondary);
  padding: 10px 12px; width: 120px; background: var(--color-background-secondary); text-transform: capitalize; }
.schedule-cell { height: 56px; text-align: center; vertical-align: middle; cursor: pointer; transition: background 0.1s; }
.schedule-cell:hover { background: var(--brand-50); }
.schedule-cell.today { background: rgba(133,183,235,0.08); }
.schedule-cell.today:hover { background: var(--brand-50); }
.schedule-cell .assignee { font-size: 12px; color: var(--color-text-primary); }
.schedule-cell .hours { font-size: 10px; color: var(--color-text-tertiary); margin-top: 2px; }
.schedule-cell .plus { font-size: 16px; color: var(--color-border-secondary); opacity: 0; }
.schedule-cell:hover .plus { opacity: 1; }

.alert { border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.alert-error { background: #FCEBEB; border: 0.5px solid #F09595; color: #791F1F; }
.alert-warning { background: #FAEEDA; border: 0.5px solid #FAC775; color: #633806; }
.alert-success { background: #EAF3DE; border: 0.5px solid #C0DD97; color: #27500A; }
.issues-list { margin: 8px 0 0; padding-left: 18px; }

/* --- Modal (vanilla) --- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4,44,83,0.25); display: none;
  align-items: center; justify-content: center; z-index: 50; }
.modal-backdrop.open { display: flex; }
.modal { width: 100%; max-width: 360px; background: var(--color-background-primary);
  border-radius: 12px; padding: 20px; }
.modal h3 { font-size: 15px; margin: 0 0 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* --- Dashboard panels --- */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.metric-value.alarm { color: #791F1F; }
.metric-delta { font-size: 11px; margin-top: 3px; }
.metric-delta.up { color: #791F1F; }
.metric-delta.down { color: #27500A; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head a { font-size: 12px; color: var(--brand-600); }
.panel-empty { color: var(--color-text-tertiary); font-size: 12px; padding: 8px 0; }

.list-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
.list-row:last-child { border-bottom: none; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .muted { color: var(--color-text-tertiary); font-size: 11px; }
.list-row .name { font-size: 13px; }
.row-link { cursor: pointer; }
.row-link:hover { background: var(--color-background-secondary); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.green { background: #48CDB8; }
.status-dot.red { background: #C0392B; }

.vol-track { height: 6px; background: var(--color-background-secondary); border-radius: 3px; overflow: hidden; width: 90px; }
.vol-fill { height: 100%; background: var(--brand-400); }

.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-50); color: var(--brand-800);
  font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.pill { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; }
.pill.on_duty { background: #E1F5EE; color: #085041; }
.pill.busy { background: #FAEEDA; color: #633806; }
.pill.off_shift { background: #F1EFE8; color: #888780; }

/* --- Slide-over (read-only conversation) --- */
.slideover-backdrop { position: fixed; inset: 0; background: rgba(4,44,83,0.25); display: none; z-index: 60; }
.slideover-backdrop.open { display: block; }
.slideover { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw;
  background: var(--color-background-primary); border-left: 0.5px solid var(--color-border-tertiary);
  z-index: 61; transform: translateX(100%); transition: transform 0.2s ease; display: flex; flex-direction: column; }
.slideover.open { transform: translateX(0); }
.slideover-head { padding: 16px 20px; border-bottom: 0.5px solid var(--color-border-tertiary);
  display: flex; align-items: center; justify-content: space-between; }
.slideover-head .title { font-size: 15px; font-weight: 500; }
.slideover-close { cursor: pointer; color: var(--color-text-tertiary); font-size: 18px; background: none; border: none; }
.slideover-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.slideover-foot { padding: 12px 20px; border-top: 0.5px solid var(--color-border-tertiary);
  font-size: 11px; color: var(--color-text-tertiary); }
.msg { margin-bottom: 14px; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.msg-sender { font-size: 12px; font-weight: 500; }
.msg-time { font-size: 10px; color: var(--color-text-tertiary); }
.msg-body { font-size: 13px; background: var(--color-background-secondary); border-radius: 8px;
  padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }
.msg.highlight .msg-body { border: 0.5px solid #FAC775; background: #FAEEDA; }
.msg .urgent-tag { font-size: 9px; background: #FCEBEB; color: #791F1F; padding: 1px 5px; border-radius: 10px; }

/* --- Centered auth (login) --- */
.auth-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: 12px; padding: 28px 24px; }
.auth-logo { font-size: 18px; font-weight: 500; color: var(--brand-950); margin-bottom: 4px; }
.auth-sub { font-size: 12px; color: var(--color-text-tertiary); margin-bottom: 24px; }
.text-error { color: #791F1F; font-size: 12px; margin-top: 8px; }

/* --- Public landing page (site root) --- */
/* Light surface, generous whitespace (§0). The only gradients live inside the logo
   mark itself, which is permitted — gradients are logo-only (§6.7). */
.home-shell { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; }
.home { width: 100%; max-width: 420px; text-align: center; }
.home-mark { width: 72px; height: 72px; border-radius: 16px; display: block; margin: 0 auto 20px; }
.home-name { font-size: 22px; font-weight: 500; color: var(--brand-950); margin-bottom: 6px; }
.home-tagline { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 28px; }
.home-rule { border: 0; border-top: 0.5px solid var(--color-border-tertiary); margin: 0 0 28px; }
.home-actions { display: flex; justify-content: center; }
.home-note { font-size: 11px; color: var(--color-text-tertiary); margin: 20px 0 0; }
.home-foot { font-size: 11px; color: var(--color-text-tertiary); margin-top: 32px; }

/* --- Staff web app (OPEN-DECISIONS B): top bar + content --- */
/* --- App shell: icon rail + body (Qaro-WebClient-UI-Spec §1–2) --- */
/* ⚠️ msg-shell, NOT app-shell. The staff app needs a FIXED-height frame — its sidebar and thread
   pane scroll independently, so the outer shell must not — while the admin console's .app-shell
   (line ~86) is min-height and grows with its content. They shared a class name in one stylesheet,
   so this rule silently won for both, and the admin console was clipped at the viewport with
   nothing scrollable inside it. The dashboard's Recent Activity was simply unreachable. */
.msg-shell { display: flex; height: 100vh; overflow: hidden; background: var(--surface-0); }
.app-body { flex: 1; min-width: 0; display: flex; overflow: hidden; }

.rail { width: 52px; flex: 0 0 52px; background: var(--brand-950);
  display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 6px; }
.rail-logo { display: flex; margin-bottom: 8px; }
.rail-logo img { display: block; border-radius: 8px; }
.rail-nav { display: flex; flex-direction: column; gap: 6px; }
.rail-btn { width: 36px; height: 36px; border-radius: 8px; background: transparent; border: none;
  color: rgba(255,255,255,0.45); display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; text-decoration: none; }
.rail-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.rail-btn.active { background: rgba(72,205,184,0.18); color: var(--accent-400); }
.rail-foot { margin-top: auto; position: relative; display: flex; justify-content: center; }
.rail-avatar { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-800); color: var(--accent-200); font-size: 10px; font-weight: 500; }
.rail-menu { position: absolute; bottom: 0; left: 46px; width: 190px; background: var(--surface-2);
  border: 0.5px solid var(--border); border-radius: var(--border-radius-lg); padding: 8px; z-index: 60; }
.rail-menu-name { font-size: 13px; font-weight: 500; color: var(--text-primary); margin: 4px 6px; }
.rail-menu-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 8px 6px 2px; }
.rail-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 6px; padding: 7px 6px; font-size: 13px;
  color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.rail-menu-item:hover { background: var(--surface-0); }
.rail-menu-item.active { color: var(--text-primary); font-weight: 500; }
.rail-menu-item i { font-size: 15px; }
.rail-menu-sep { height: 0.5px; background: var(--border); margin: 6px 0; }

/* On-call / directory: a scrolling page inside the body */
.app-page { flex: 1; min-width: 0; overflow-y: auto; padding: 24px 32px; }
.page-wrap { max-width: 940px; }

/* Directory (People) */
.dir-search { max-width: 340px; margin-bottom: 16px; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; }
.dir-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 18px 12px; background: var(--surface-2); border: 0.5px solid var(--border);
  border-radius: var(--border-radius-lg); cursor: pointer; transition: border-color 0.1s, background 0.1s; }
.dir-card:hover { border-color: var(--border-strong); background: var(--surface-1); }
.dir-card-av { width: 48px; height: 48px; font-size: 16px; }
.dir-card-name { max-width: 100%; font-size: 13px; font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-card-msg { position: absolute; top: 8px; right: 8px; color: var(--text-muted); font-size: 15px;
  opacity: 0; transition: opacity 0.1s; }
.dir-card:hover .dir-card-msg { opacity: 1; }

/* --- Staff messaging: sidebar (Qaro-WebClient-UI-Spec §3) --- */
.msg-layout { flex: 1; min-width: 0; display: flex; height: 100%; min-height: 0; }
.msg-list { width: 396px; flex: 0 0 396px; background: var(--surface-1);
  border-right: 0.5px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.msg-list-head { padding: 12px 12px 8px; border-bottom: 0.5px solid var(--border); }
.msg-list-titlerow { display: flex; align-items: center; justify-content: space-between; }
.msg-list-title { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.search-box { display: flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--surface-2);
  border: 0.5px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.search-box i { font-size: 13px; color: var(--text-muted); }
.search-box input { flex: 1; border: none; background: transparent; outline: none;
  font-size: 12px; color: var(--text-primary); font-family: inherit; }

.conv-list { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.conv-section { font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.06em;
  text-transform: uppercase; padding: 10px 12px 4px; }
.conv-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; padding: 7px 12px; cursor: pointer; }
.conv-item:hover { background: var(--surface-0); }
.conv-item.active { background: var(--bg-accent); }
.conv-item.active .conv-name { color: var(--text-accent); }
.conv-avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; }
.conv-avatar.mint { background: #E0FAF5; color: #0D7A68; }
.conv-avatar.blue { background: var(--brand-50); color: var(--brand-600); }
.conv-avatar.channel { border-radius: 6px; background: var(--surface-0); color: var(--text-secondary); }
.conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-name { font-size: 12px; font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-preview { font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-ind { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.conv-ind .presence-dot { margin-right: 0; }
.conv-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--fill-accent); flex: 0 0 auto; }
.conv-unread.urgent { background: var(--fill-danger); }

.msg-thread { flex: 1; min-width: 0; background: var(--surface-1);
  display: flex; flex-direction: column; overflow: hidden; }
/* Message box = left 80% of the pane, bordered on the right; the remaining gutter takes the
   people-list tone (surface-1) so it reads as intentional framing rather than dead space. */
.thread-head, .msg-scroll, .msg-compose { max-width: 80%; border-right: 0.5px solid var(--border); }
.msg-thread-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Thread header (spec §4) */
.thread-head { display: flex; align-items: center; gap: 10px; height: 52px; flex: 0 0 auto;
  padding: 0 16px; background: var(--surface-2); border-bottom: 0.5px solid var(--border); }
.thread-head-main { min-width: 0; }
.thread-head-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.thread-head-sub { font-size: 11px; color: var(--text-muted); }
.presence-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 7px; border-radius: 10px; }
.presence-pill.on_duty { background: #E0FAF5; color: #0D7A68; }
.presence-pill.busy { background: var(--bg-warning); color: var(--text-warning); }
.presence-pill.off_shift { background: var(--surface-1); color: var(--text-muted); }
.presence-pill .presence-dot { margin-right: 0; }

/* Message thread (spec §5) */
.msg-scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface-0); }
.date-divider { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.date-divider::before, .date-divider::after { content: ''; flex: 1; height: 0.5px; background: var(--border); }

.msg-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-row.mine { flex-direction: row-reverse; }
.msg-avatar { width: 24px; height: 24px; font-size: 9px; }
.msg-col { display: flex; flex-direction: column; max-width: 65%; }
.msg-row.mine .msg-col { align-items: flex-end; }
.msg-bubble { font-size: 13px; line-height: 1.5; padding: 8px 12px; background: var(--surface-2);
  color: var(--text-primary); border: 0.5px solid var(--border); border-radius: 12px 12px 12px 3px; overflow-wrap: anywhere; }
.msg-row.mine .msg-bubble { background: var(--bg-accent); color: var(--brand-950);
  border-color: transparent; border-radius: 12px 12px 3px 12px; }
.msg-meta { font-size: 10px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.ticks { display: inline-flex; color: var(--text-muted); }
.ticks.read { color: var(--fill-accent); }
.ticks i { font-size: 12px; }

.phi-tag { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; background: #E1F5EE;
  color: #085041; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-top: 4px; }
.msg-row.mine .phi-tag { align-self: flex-end; }
.phi-tag i { font-size: 11px; }

/* Urgent replaces the bubble with a red banner (spec §5) */
.urgent-banner { background: var(--bg-danger); border: 0.5px solid var(--border-danger); border-radius: 10px;
  padding: 8px 12px; display: flex; gap: 8px; align-items: flex-start; max-width: 75%; }
.urgent-banner > i { color: var(--text-danger); font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.urgent-title { font-size: 11px; font-weight: 500; color: var(--text-danger); }
.urgent-body { font-size: 12px; color: var(--text-danger); overflow-wrap: anywhere; }
.urgent-meta { font-size: 10px; color: var(--text-danger); margin-top: 3px; }
.urgent-meta:empty { display: none; }

/* Compose bar (spec §6) */
/* Positioned so the mention picker can sit above the textarea rather than pushing the thread. */
.msg-compose { border-top: 0.5px solid var(--border); padding: 10px 16px; background: var(--surface-2);
  position: relative; }
.msg-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.compose-tools { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.compose-tool-btn { height: 26px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  font-weight: 500; padding: 0 8px; border-radius: 6px; border: 0.5px solid var(--border);
  background: transparent; color: var(--text-secondary); cursor: pointer; }
.compose-tool-btn:hover { background: var(--surface-1); }
.compose-tool-btn.urgent-on { background: var(--bg-danger); border-color: var(--border-danger); color: var(--text-danger); }
.compose-enc { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); }
.msg-compose-row { display: flex; gap: 8px; align-items: flex-end; }
.msg-compose textarea { flex: 1; resize: none; padding: 8px 12px; font-size: 13px; font-family: inherit;
  border: 0.5px solid var(--border-strong); border-radius: 8px; background: var(--surface-2);
  color: var(--text-primary); outline: none; min-height: 36px; max-height: 120px; line-height: 1.5; }
.msg-compose textarea:focus { border-color: var(--border-accent); box-shadow: var(--focus-shadow); }
.send-btn { width: 34px; height: 34px; border-radius: 8px; background: var(--brand-950); border: none;
  color: var(--accent-400); font-size: 16px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; }
.send-btn:hover { background: var(--brand-800); }

/* Empty day room. Chrome, not content — never styled as a message. */
.msg-empty { margin: auto; padding: 24px; font-size: 12px; color: var(--text-muted); text-align: center; }

/* A closed day room: the composer is REPLACED by this, never disabled. Chrome, like the empty
   state — muted, centred, no border radius fuss, and deliberately not styled as a message. */
.day-closed { border-top: 0.5px solid var(--border); background: var(--surface-0);
  padding: 16px; text-align: center; }
.day-closed-title { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.day-closed-detail { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* @-mentions (spec §3.2). The chip is brand-tinted, never accent and never red: a mention is not
   urgent, and urgent red is reserved for urgent alerts alone. */
.msg-mention { background: var(--brand-50); color: var(--brand-600); font-weight: 500;
  padding: 0 2px; border-radius: 4px; }
.msg-row.mine .msg-mention { background: var(--surface-2); }
.urgent-body .msg-mention { background: var(--surface-2); color: var(--text-danger); }

.mention-picker { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 8px);
  max-height: 220px; overflow-y: auto; background: var(--surface-2);
  border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 4px; z-index: 5; }
.mention-opt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 8px; font-size: 13px; font-family: inherit; color: var(--text-primary);
  background: none; border: none; border-radius: 6px; cursor: pointer; }
.mention-opt:hover, .mention-opt.active { background: var(--bg-accent); }
.mention-name { flex: 1; }
/* The warning that a pick GRANTS access. Warning amber, not urgent red — it wants a second look,
   it is not an alert. */
.mention-add { font-size: 10px; color: var(--text-warning); background: var(--bg-warning);
  border: 0.5px solid var(--border-warning); padding: 1px 6px; border-radius: 4px; }
.mention-here { font-size: 10px; color: var(--text-muted); }
.mention-empty { padding: 8px; font-size: 11px; color: var(--text-muted); }

/* Optimistic send states */
.msg-status.sending { color: var(--text-muted); }
.msg-status.sending i { font-size: 11px; }
.msg-retry { background: none; border: none; padding: 0; font-size: 10px; color: var(--text-danger); cursor: pointer; text-decoration: underline; }
.msg-bubble.failed { border-color: var(--border-danger); }
.urgent-banner.failed { border-color: var(--fill-danger); }

/* --- New-conversation picker (B phase 3) --- */
.msg-new-btn { background: none; border: none; cursor: pointer; color: var(--brand-600); padding: 2px 4px; }
.msg-new-btn:hover { color: var(--brand-950); }
.msg-new-btn i { font-size: 18px; }
.msg-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(9,27,38,0.45);
  align-items: flex-start; justify-content: center; z-index: 50; }
.msg-modal-backdrop.open { display: flex; }
.msg-modal { background: var(--color-background-primary); border-radius: 12px; padding: 20px;
  width: 100%; max-width: 400px; margin-top: 12vh; border: 0.5px solid var(--color-border-tertiary); }
.msg-modal-head { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.msg-member-list { max-height: 340px; overflow-y: auto; margin-top: 10px; }
.msg-member { display: block; width: 100%; text-align: left; background: none; border: none;
  border-top: 0.5px solid var(--color-border-tertiary); padding: 10px 8px; font-size: 13px;
  color: var(--color-text-primary); cursor: pointer; }
.msg-member:hover { background: var(--color-background-secondary); }
.msg-member-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.msg-member-check input { margin: 0; }

/* New-conversation mode toggle (channels are admin-only) */
.msg-mode-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.msg-mode { flex: 1; padding: 6px 10px; font-size: 13px; cursor: pointer;
  background: none; color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; }
.msg-mode.active { color: var(--brand-950); border-color: var(--brand-600); font-weight: 500; }
#channel-fields .form-input { margin-bottom: 8px; }
.msg-modal-hint { font-size: 11px; color: var(--color-text-tertiary); margin: 4px 0 0; }

/* Presence: status dots + the on-call location selector */
.presence-select { font-size: 12px; padding: 2px 6px; color: var(--color-text-secondary);
  background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary);
  border-radius: 6px; cursor: pointer; }
.presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
  flex: 0 0 auto; margin-right: 6px; --dot: var(--color-text-tertiary); background: var(--dot); }
.presence-dot.on_duty { --dot: var(--fill-accent); }
.presence-dot.busy { --dot: var(--fill-warning); }
.presence-dot.off_shift { --dot: var(--border-strong); }
/* Online axis (reachability), orthogonal to duty color: filled = online, hollow ring = offline. */
.presence-dot.offline { background: transparent; border: 1.5px solid var(--dot); }

/* --- On call now --- */
  color: var(--text-muted); padding: 12px 0 4px; }
  border-top: 0.5px solid var(--border); }

/* --- On-call week (read-only) --- */
  flex-wrap: wrap; margin-bottom: 4px; }
/* Weekly calendar grid: slot-type rows x day columns */
  background: var(--surface-2); }
  text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 4px; text-align: center; background: var(--surface-1); }
  text-transform: none; letter-spacing: 0; margin-top: 1px; }
.grid-assignee { font-size: 12px; font-weight: 500; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-hours { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* Invitation gate (spec §3.2, revised 2026-09-01). Fills the thread pane rather than floating over
   it: there is nothing underneath to float over, because the server sends no messages with an
   invitation. It reads as an empty state that asks a question, not as an alert — nothing has gone
   wrong, someone is offering a room. Brand tint, never urgent red. */
.invite-gate { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.invite-card { max-width: 380px; text-align: center; }
.invite-icon { font-size: 28px; color: var(--brand-600); }
.invite-title { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-top: 12px; }
.invite-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.invite-detail { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; }
.invite-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.invite-error { font-size: 11px; color: var(--text-danger); margin-top: 12px; }

/* Thread roster (spec §3.2). The header count is the way in — it is the only place the SENDER can
   see that an invitation is still unanswered, since an invited person is deliberately not a member
   and so appears nowhere else. */
.thread-roster-btn { font: inherit; color: var(--text-secondary); background: none; border: none;
  padding: 0; cursor: pointer; }
.thread-roster-btn:hover { color: var(--text-accent); }
.roster-panel { border-bottom: 0.5px solid var(--border); background: var(--surface-0);
  max-height: 240px; overflow-y: auto; padding: 4px 0; }
.roster-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding: 8px 16px 4px; }
.roster-row { display: flex; align-items: center; gap: 8px; padding: 5px 16px; font-size: 13px; }
.roster-name { flex: 1; min-width: 0; color: var(--text-primary); }
.roster-note { font-size: 11px; color: var(--text-muted); }
.roster-withdraw { font-size: 11px; font-family: inherit; color: var(--text-secondary);
  background: none; border: 0.5px solid var(--border-strong); border-radius: 4px;
  padding: 2px 8px; cursor: pointer; }
.roster-withdraw:hover { color: var(--text-danger); border-color: var(--border-danger); }
/* A declined mention still re-invites, so it is marked but NOT warned about — the amber belongs to
   the offer, and this one is a fact about the past. */
.mention-declined { font-size: 10px; color: var(--text-muted); }

/* Today's room, not yet opened. Reads as an invitation to act rather than as a room that failed to
   load: brand-tinted icon, and the secondary line says what pressing it does. Not amber — nothing
   is wrong, and nothing needs a second look. */
.conv-openable .conv-avatar { color: var(--brand-600); }
.conv-openable .conv-preview { color: var(--text-accent); }
.conv-opening { opacity: 0.55; pointer-events: none; }