/* Pacific MedicoLegal - practice platform UI.
   Brand: Deep Pacific Blue #0A1F44, Ocean #123A6D, Wave #3D6FAF, Mist #A9C4E2.
   Font Montserrat. Large, legible type for physicians and staff. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --deep: #0A1F44;
  --ocean: #123A6D;
  --wave: #3D6FAF;
  --mist: #A9C4E2;
  --mist-1: #E8F0F9;
  --mist-2: #D6E4F3;

  --ink: #16233c;
  --muted: #586a86;
  --muted-2: #8a97ac;
  --bg: #eef2f7;
  --card: #ffffff;
  --line: #e0e7f0;
  --line-2: #cdd8e6;

  --red: #c0392b;        --red-soft: #fbece9;
  --amber: #b0751a;      --amber-soft: #fbf1df;
  --green: #1e874b;      --green-soft: #e5f5ec;
  --info: var(--wave);   --info-soft: var(--mist-1);

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,33,68,.04), 0 4px 16px rgba(16,33,68,.06);
  --shadow-sm: 0 1px 2px rgba(16,33,68,.06);
  --topbar-h: 66px;
  --rail-w: 84px;
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--mist-2); }

/* ---------------- shell ---------------- */
.shell { display: grid; grid-template-columns: var(--rail-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "rail top" "rail main"; min-height: 100vh; }

.topbar { grid-area: top; display: flex; align-items: center; gap: 20px; padding: 0 24px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.tb-logo { display: flex; align-items: center; gap: 11px; }
.tb-logo img { height: 38px; width: auto; display: block; }
.tb-logo .wm { line-height: 1.05; }
.tb-logo .wm b { display: block; font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--deep); }
.tb-logo .wm span { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; color: var(--wave); text-transform: uppercase; }
.tb-search { flex: 1; max-width: 460px; position: relative; }
.tb-search input { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 22px; padding: 0 18px 0 42px; font-size: 15px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.tb-search input:focus { outline: none; border-color: var(--wave); box-shadow: 0 0 0 3px var(--mist-1); }
.tb-search svg { position: absolute; left: 15px; top: 12px; width: 18px; height: 18px; stroke: var(--muted-2); fill: none; stroke-width: 2; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.tb-link { font-size: 14px; font-weight: 500; color: var(--muted); }
.tb-link:hover { color: var(--ocean); }
.tb-sep { width: 1px; height: 22px; background: var(--line-2); }
.tb-role { display: flex; align-items: center; gap: 0; background: var(--mist-1); border-radius: 20px; padding: 3px; }
.tb-role button { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 16px; color: var(--ocean); }
.tb-role button.on { background: var(--ocean); color: #fff; box-shadow: var(--shadow-sm); }
.tb-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ocean); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; }

/* icon rail (dark navy, Simplexam-style) */
.rail { grid-area: rail; background: var(--deep); display: flex; flex-direction: column; align-items: center; padding: 16px 0; gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail a { flex-shrink: 0; }
.rail-mark { width: 42px; height: 42px; border-radius: 11px; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; }
.rail-mark img { width: 34px; height: 34px; object-fit: contain; }
/* 76px (inside the 84px rail) so the longest label — Miscellaneous — sits
   fully inside the active pill instead of clipping its edges */
.rail a { width: 76px; height: 50px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mist); transition: background .15s, color .15s; position: relative; }
.rail a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.rail a .rl { font-size: 8.5px; font-weight: 600; letter-spacing: .02em; }
.rail a:hover { background: rgba(255,255,255,.09); color: #fff; }
.rail a.active { background: #fff; color: var(--ocean); }
.rail-foot { margin-top: auto; }

.main { grid-area: main; min-width: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 22px 30px 70px; }

/* breadcrumb */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.crumbs a:hover { color: var(--ocean); }
.crumbs svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.crumbs .sep { color: var(--muted-2); }
.crumbs b { color: var(--ink); font-weight: 600; }

/* page heading */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-title { font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--deep); margin: 0; }
.page-sub { font-size: 14.5px; color: var(--muted); margin-top: 3px; }

/* ---------------- big action buttons ---------------- */
.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.action-btn { display: flex; align-items: center; gap: 15px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s, transform .1s; }
.action-btn:hover { border-color: var(--wave); box-shadow: var(--shadow); transform: translateY(-1px); }
.action-btn .ab-ic { width: 46px; height: 46px; border-radius: 11px; background: var(--mist-1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.action-btn .ab-ic svg { width: 24px; height: 24px; stroke: var(--ocean); fill: none; stroke-width: 1.9; }
.action-btn .ab-t { font-size: 17px; font-weight: 600; color: var(--deep); }
.action-btn .ab-s { font-size: 13px; color: var(--muted); margin-top: 1px; }

/* ---------------- status tiles ---------------- */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 26px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); text-align: center; transition: border-color .15s, box-shadow .15s, transform .1s; cursor: pointer; }
.tile:hover { border-color: var(--wave); box-shadow: var(--shadow); transform: translateY(-1px); }
.tile .t-label { font-size: 13.5px; font-weight: 600; color: var(--muted); min-height: 34px; display: flex; align-items: center; justify-content: center; }
.tile .t-nums { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-top: 8px; }
.tile .t-n { font-size: 30px; font-weight: 700; color: var(--ocean); line-height: 1; }
.tile .t-n.crit { color: var(--red); }
.tile .t-div { width: 1px; align-self: stretch; background: var(--line); }
.tile .t-cap { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-top: 5px; }

/* ---------------- cards ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.card-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--deep); }
.card-head .badge-info { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--wave); background: var(--mist-1); padding: 3px 9px; border-radius: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

/* ---------------- table (worklist) ---------------- */
/* overflow-x auto, NOT hidden: with the larger type scale a wide table
   (DWC listings carries 7 columns plus three row actions) was clipping
   its Edit and Delete buttons instead of letting the row scroll. */
.tbl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto; overflow-y: hidden; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid thead th { background: #f6f8fb; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 13px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.grid tbody td { padding: 15px 16px; border-bottom: 1px solid var(--line); font-size: 15px; vertical-align: middle; }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr.click { cursor: pointer; transition: background .12s; }
table.grid tbody tr.click:hover { background: var(--mist-1); }
.cell-name { font-weight: 600; color: var(--deep); }
.cell-sub { font-size: 12.5px; color: var(--muted-2); margin-top: 1px; }
.expander { width: 24px; height: 24px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
/* the next-action cell is colour-coded by urgency: red only when something
   is actually late. Everything non-"met" used to render red, so a case with
   an evaluation booked for next month read as an emergency. */
.crit-cell { font-weight: 600; color: var(--red); }
.crit-cell.ok { color: var(--green); }
.crit-cell.soon { color: var(--amber); }
.crit-cell.info { color: var(--ocean); }

/* ---------------- pills ---------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.nodot::before { display: none; }
.pill-blue { background: var(--mist-1); color: var(--ocean); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-gray { background: #eef1f6; color: var(--muted); }

/* ---------------- service status cards ---------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.svc:hover { border-color: var(--wave); box-shadow: var(--shadow); }
.svc .svc-ic { width: 44px; height: 44px; border-radius: 11px; background: var(--mist-1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc .svc-ic svg { width: 23px; height: 23px; stroke: var(--ocean); fill: none; stroke-width: 1.8; }
.svc .svc-t { font-size: 15.5px; font-weight: 600; color: var(--deep); }
.svc .svc-s { font-size: 13px; margin-top: 2px; }

/* ---------------- claim header strip ---------------- */
.claim-hd { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px 24px; margin-bottom: 22px; }
.claim-hd .ch-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.claim-hd .ch-name { font-size: 22px; font-weight: 700; color: var(--deep); }
.claim-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 26px; }
.claim-facts .cf-k { font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-2); }
.claim-facts .cf-v { font-size: 15.5px; font-weight: 500; color: var(--ink); margin-top: 2px; }

/* section label divider */
.sect { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; }
.sect .st { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wave); }
.sect .sline { flex: 1; height: 1px; background: var(--line); }

/* buttons */
/* justify-content:center matters only when a button is wider than its label
   (min-width / width:100%). Without it the label hugged the left edge and
   read as broken - Krish 2026-07-29 on the chatbot Ask button. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-primary { background: var(--ocean); color: #fff; }
.btn-primary:hover { background: var(--deep); }
.btn-ghost { background: #fff; border: 1px solid var(--line-2); color: var(--ocean); }
.btn-ghost:hover { border-color: var(--wave); background: var(--mist-1); }
.btn-sm { height: 34px; padding: 0 13px; font-size: 13.5px; }
/* destructive actions: void an invoice, delete an entry or a matter */
.btn-danger { background: #fff; border: 1px solid var(--line-2); color: var(--red); margin-right: auto; }
.btn-danger:hover { border-color: var(--red); background: var(--red-soft); }

/* misc */
.muted { color: var(--muted); }
.empty { padding: 40px; text-align: center; color: var(--muted); }
.loading { padding: 60px; text-align: center; color: var(--muted); }
.filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.chip { font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line-2); color: var(--muted); }
.chip.on { background: var(--ocean); color: #fff; border-color: var(--ocean); }
.chip:hover:not(.on) { border-color: var(--wave); color: var(--ocean); }

/* ---------------- modal + toast ---------------- */
.pml-modal-bg { position: fixed; inset: 0; background: rgba(10,31,68,.42); display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 100; overflow-y: auto; }
.pml-modal { background: var(--card); border-radius: 16px; box-shadow: 0 20px 60px rgba(10,31,68,.28); width: 100%; max-width: 640px; overflow: hidden; }
.pml-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.pml-modal-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--deep); }
.pml-modal-x { font-size: 26px; line-height: 1; color: var(--muted-2); width: 34px; height: 34px; border-radius: 8px; }
.pml-modal-x:hover { background: var(--surface-2, #eef1f6); color: var(--ink); }
.pml-modal-body { padding: 22px 24px; }
.pml-modal-foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 9px; padding: 0 13px; font-size: 15px; background: #fff; }
.field textarea { height: auto; padding: 10px 13px; min-height: 70px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--wave); box-shadow: 0 0 0 3px var(--mist-1); }
.pml-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--deep); color: #fff; font-size: 14.5px; font-weight: 500; padding: 13px 22px; border-radius: 12px; box-shadow: 0 10px 30px rgba(10,31,68,.3); z-index: 200; transition: opacity .4s; }
.pml-toast.out { opacity: 0; }

@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2,1fr); }
  .action-row, .grid-2, .svc-grid, .grid-3 { grid-template-columns: 1fr; }
  .claim-facts { grid-template-columns: 1fr 1fr; }
}

/* ============ Template Workspace (split-screen template completion) ===== */
.tf-wrap { display: flex; flex-direction: column; height: calc(100vh - 162px); min-height: 440px; }
.tf-loading { padding: 60px 0; text-align: center; color: var(--muted); font-size: 14.5px; }
.tf-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.tf-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tf-title { font-size: 19px; font-weight: 800; color: var(--deep); line-height: 1.2; }
.tf-subtitle { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tf-head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tf-progress { display: flex; align-items: center; gap: 10px; }
.tf-progress-bar { width: 150px; height: 7px; border-radius: 5px; background: var(--mist-2); overflow: hidden; }
.tf-progress-fill { height: 100%; width: 0%; border-radius: 5px; background: linear-gradient(90deg, var(--wave), var(--ocean)); transition: width .25s; }
.tf-progress-text { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tf-save { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; font-size: 12px; font-weight: 700; background: var(--mist-1); color: var(--muted); white-space: nowrap; }
.tf-save-ok { background: var(--green-soft); color: var(--green); }
.tf-save-busy { background: var(--mist-1); color: var(--ocean); }
.tf-save-err { background: var(--red-soft); color: var(--red); }
.tf-save-ic { width: 13px; height: 13px; }

.tf-split { display: flex; flex: 1; min-height: 0; gap: 0; }
.tf-left { width: 46%; min-width: 240px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tf-right { flex: 1; min-width: 320px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
/* the resize handle reads as a grabbable rail, not a hairline */
.tf-divider { width: 14px; cursor: col-resize; position: relative; flex-shrink: 0; }
.tf-divider::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tf-divider::after { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 10px; height: 52px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--card); box-shadow: 0 1px 3px rgba(20,30,55,.10); transition: border-color .15s, background .15s; }
.tf-divider:hover::after { border-color: var(--wave); background: var(--mist-1); }

.tf-pane-bar { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f7fafd; flex-shrink: 0; }
.tf-pane-bar-2 { padding: 7px 14px; background: var(--card); }
.tf-pane-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); flex-shrink: 0; }
.tf-file-select, .tf-sec-select { flex: 1; min-width: 0; height: 32px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.tf-frame-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: var(--mist-1); color: var(--ink); }

/* --- source reader (server-rendered page images) --- */
.tf-page-wrap { flex: 1; min-height: 0; position: relative; overflow: auto; background: #eef2f7; padding: 14px; }
.tf-page { display: block; margin: 0 auto; width: 100%; max-width: 100%; background: #fff; box-shadow: 0 2px 12px rgba(20, 30, 55, .16); border-radius: 3px; }
.tf-page-loading { position: absolute; top: 16px; left: 0; right: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted-2); pointer-events: none; }
.tf-pg-btn { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 15px; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s; }
.tf-pg-btn svg { width: 15px; height: 15px; }
.tf-pg-btn:hover:not(:disabled) { color: var(--ocean); border-color: var(--wave); }
.tf-pg-btn:disabled { opacity: .35; cursor: default; }
.tf-page-in { width: 66px; height: 30px; padding: 0 8px; text-align: center; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); font: 700 13px var(--font); color: var(--ink); }
.tf-page-in:focus { outline: none; border-color: var(--wave); box-shadow: 0 0 0 3px rgba(61,111,175,.14); }
.tf-page-total { font-size: 12.5px; font-weight: 700; color: var(--muted-2); white-space: nowrap; }
.tf-zoom-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }

/* --- section outline rail --- */
.tf-right-body { flex: 1; min-height: 0; display: flex; }
.tf-outline { width: 216px; flex-shrink: 0; border-right: 1px solid var(--line); background: #fbfcfe; display: flex; flex-direction: column; min-height: 0; }
.tf-outline-head { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); padding: 12px 14px 8px; }
.tf-outline-list { flex: 1; overflow-y: auto; padding: 0 8px 14px; }
.tf-ol-row { position: relative; display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 8px 10px 11px; border-radius: 8px; transition: background .12s; }
.tf-ol-row:hover { background: var(--mist-1); }
.tf-ol-on { background: var(--mist-1); box-shadow: inset 3px 0 0 var(--ocean); }
.tf-ol-name { display: block; font-size: 12.4px; font-weight: 700; color: var(--ink); line-height: 1.35; padding-right: 40px; }
.tf-ol-count { position: absolute; top: 8px; right: 10px; font-size: 10.5px; font-weight: 800; color: var(--muted-2); }
.tf-ol-bar { margin-top: 6px; height: 3px; border-radius: 2px; background: var(--mist-2); overflow: hidden; }
.tf-ol-bar-fill { height: 100%; width: 0; background: var(--wave); border-radius: 2px; transition: width .2s; }
.tf-ol-done .tf-ol-name { color: var(--muted); }
.tf-ol-done .tf-ol-count { color: var(--green); }
.tf-ol-done .tf-ol-bar-fill { background: var(--green); }
.tf-ol-na .tf-ol-name { color: var(--muted-2); text-decoration: line-through; }
.tf-ol-toggle { height: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.tf-ol-toggle.tf-on { color: var(--ocean); border-color: var(--wave); background: var(--mist-1); }
.tf-next { height: 30px; }
.tf-next svg { width: 15px; height: 15px; }

.tf-body { flex: 1; min-width: 0; overflow-y: auto; padding: 6px 20px 60px; }
.tf-section { padding-top: 6px; }
/* Sticky section bar. Opaque panel background and a z-index above every
   field card, so scrolling content can never bleed through behind the
   title or the Dictate Section button; the bottom border makes it read as
   a bar (Krish 2026-07-29). */
.tf-sec-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 2px 9px; background: var(--card); border-bottom: 1px solid var(--line-2); box-shadow: 0 -8px 0 0 var(--card); margin-bottom: 10px; scroll-margin-top: 0; }
.tf-sec-title { font-size: 14.5px; font-weight: 800; color: var(--deep); letter-spacing: .015em; }
.tf-sec-badge { font-size: 11.5px; font-weight: 800; color: var(--muted); background: var(--mist-1); border-radius: 11px; padding: 3px 10px; white-space: nowrap; }
.tf-sec-badge-done { background: var(--green-soft); color: var(--green); }
.tf-sub { font-size: 13px; font-weight: 800; color: var(--ocean); margin: 16px 0 4px; text-transform: none; }
.tf-q { position: relative; margin: 10px 0 16px; padding-left: 12px; border-left: 3px solid var(--mist-2); transition: border-color .18s; }
.tf-q-done { border-left-color: var(--green); }
.tf-q-flash { animation: tfflash 1.2s ease-out; }
@keyframes tfflash { 0%, 40% { background: rgba(61, 111, 175, .10); } 100% { background: transparent; } }
.tf-q-label { font-size: 13.2px; font-weight: 600; color: var(--ink); line-height: 1.45; margin-bottom: 6px; }
.tf-answer { display: block; width: 100%; box-sizing: border-box; min-height: 42px; max-height: 560px; resize: none; overflow-y: auto; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: #fbfcfe; font: 400 13.5px/1.55 var(--font); color: var(--ink); transition: border-color .15s, box-shadow .15s, background .15s; }
.tf-answer:focus { outline: none; border-color: var(--wave); background: var(--card); box-shadow: 0 0 0 3px rgba(61, 111, 175, .14); }
/* field actions: labelled, revealed on hover/focus so 296 prompts stay calm */
.tf-q-tools { display: flex; gap: 7px; margin-top: 6px; opacity: 0; transition: opacity .14s; }
.tf-q:hover .tf-q-tools, .tf-q:focus-within .tf-q-tools { opacity: 1; }
.tf-act { display: inline-flex; align-items: center; gap: 6px; height: 27px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.tf-act svg { width: 14px; height: 14px; }
.tf-act:hover { color: var(--ocean); border-color: var(--wave); }
.tf-mic:hover { color: var(--ocean); border-color: var(--wave); }
.tf-mic-live { background: var(--red); border-color: var(--red); color: #fff; animation: tfpulse 1.4s ease-in-out infinite; }
.tf-mic-live:hover { color: #fff; }
.tf-mic-busy { pointer-events: none; }
.tf-mic-spin { width: 15px; height: 15px; border: 2px solid var(--mist-2); border-top-color: var(--ocean); border-radius: 50%; animation: tfspin .8s linear infinite; }
@keyframes tfpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .35); } 50% { box-shadow: 0 0 0 7px rgba(192, 57, 43, 0); } }
@keyframes tfspin { to { transform: rotate(360deg); } }

.tf-ctx { font-size: 12.3px; color: var(--muted); font-style: italic; line-height: 1.5; margin: 6px 2px; }
.tf-ctx-group { margin: 8px 0; }
.tf-ctx-toggle { font-size: 12px; font-weight: 700; color: var(--wave); background: none; border: none; cursor: pointer; padding: 2px 0; }
.tf-ctx-toggle:hover { text-decoration: underline; }
.tf-or { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.tf-or::before, .tf-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tf-or span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted-2); }

@media (max-width: 900px) {
  .tf-split { flex-direction: column; }
  .tf-left { width: 100% !important; height: 42vh; }
  .tf-divider { display: none; }
}

/* ---- Template Workspace v2: section tools, N/A, focus, reuse ---- */
.tf-sec-head { gap: 10px; flex-wrap: wrap; }
.tf-sec-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-secmic { height: 28px; padding: 0 10px; font-size: 12.5px; }
.tf-secmic svg { width: 14px; height: 14px; }
.tf-secmic.tf-live { background: var(--red); border-color: var(--red); color: #fff; animation: tfpulse 1.4s ease-in-out infinite; }
.tf-secmic.tf-busy { opacity: .75; }
.tf-na-btn { height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s; }
.tf-na-btn:hover { color: var(--ocean); border-color: var(--wave); }
.tf-sec-badge-na { background: var(--mist-2); color: var(--muted-2); }
.tf-reuse:hover { color: var(--ocean); border-color: var(--wave); }
.tf-mic.tf-live { background: var(--red); border-color: var(--red); color: #fff; opacity: 1; animation: tfpulse 1.4s ease-in-out infinite; }
/* a live or transcribing field keeps its tools visible even without hover */
.tf-q:has(.tf-live) .tf-q-tools, .tf-q:has(.tf-mic-busy) .tf-q-tools { opacity: 1; }
.btn.tf-on { background: var(--mist-1); border-color: var(--wave); color: var(--ocean); }
.tf-snip-q { font-size: 13.5px; font-weight: 700; color: var(--deep); margin-bottom: 12px; line-height: 1.45; }
.tf-snip { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: #fbfcfe; }
.tf-snip-meta { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.tf-snip-text { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin-bottom: 10px; white-space: pre-wrap; }
.tf-exp-stat { font-size: 13.5px; font-weight: 700; color: var(--ocean); background: var(--mist-1); border-radius: 9px; padding: 10px 13px; margin-bottom: 14px; }
.tf-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.tf-check input { margin-top: 2px; flex-shrink: 0; }

/* ===== readable type scale =====
   Meghan 2026-07-28: bigger fonts, bigger headings — "people are like blind".
   Originally scoped to body.role-doctor, which meant the OPERATOR console
   inherited none of it and kept the old small/gray type. Krish 2026-07-28
   asked for the admin side to match the physician side, so the scale now
   applies to BOTH roles. Anything genuinely doctor-only stays scoped below. */
.page-title { font-size: 30px; }
.page-sub { font-size: 16px; }
table.grid thead th { font-size: 14px; padding: 15px 18px; }
table.grid tbody td { font-size: 16.5px; padding: 17px 18px; }
.cell-name { font-size: 16.5px; }
.cell-sub { font-size: 13.5px; }
.pill { font-size: 14px; padding: 5px 13px; }
.tile .t-label { font-size: 15.5px; min-height: 38px; }
.tile .t-n { font-size: 36px; }
.card-head h3 { font-size: 18.5px; }
.sect .st { font-size: 14.5px; }
.claim-facts .cf-v { font-size: 17px; }
.claim-facts .cf-k { font-size: 12.5px; }
.claim-hd .ch-name { font-size: 25px; }
.svc .svc-t { font-size: 17px; }
.svc .svc-s { font-size: 14.5px; }
.chip { font-size: 15px; padding: 8px 16px; }
.btn { font-size: 15.5px; }
/* stage text on doctor tables: plain black, never bold, never color-coded */
.role-doctor .stage-plain { color: var(--ink); font-weight: 500; }
/* collapsible panels on the doctor Today page */
.collapse-head { cursor: pointer; user-select: none; }
.collapse-head .chev { display: inline-flex; transition: transform .15s; }
.collapse-head.open .chev { transform: rotate(90deg); }
/* template workspace: controls wrap instead of clipping when panes are
   resized narrow (Meghan call 3: "Next Unanswered gets cut off") */
.tf-pane-bar { flex-wrap: wrap; row-gap: 6px; }
.tf-pane-bar .btn { white-space: nowrap; }

/* ---------- operator sub-tab strip ----------
   Groups the admin rail's ops screens (Practice / Billing / Documents) one
   level down without removing any of them. Operator side only — the doctor
   nav stays flat per Meghan's 2026-07-28 rework. */
.subtabs {
  display: flex;
  gap: 4px;
  margin: 0 0 22px;
  padding: 4px;
  background: var(--mist-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.subtabs .subtab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.subtabs .subtab:hover { color: var(--ocean); background: rgba(255,255,255,.6); }
.subtabs .subtab.active {
  background: var(--card);
  color: var(--deep);
  box-shadow: var(--shadow-sm);
}

/* Pacific Chatbot: the mark breathes while the model reads the records
   (Krish 2026-07-29 - "just say Thinking, have the thing be the Pacific
   logo"). Motion is suppressed for anyone who asked the OS to reduce it. */
@keyframes pml-think {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.14); opacity: 1; }
}
@keyframes pml-think-text {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="pml-think"] { animation: none !important; }
}

/* ================= Pacific Chatbot =================
   Krish 2026-07-29: "empty space still in the box where you display output,
   can it be bigger", and "the Ask box doesn't line up straight edge with the
   Ask a question box".

   Two structural answers, both here:
   1. The page owns exactly one screen. .wrap is the view mount, so it is
      pinned to the viewport minus the topbar and laid out as a column; the
      conversation is the only flexible row, so it takes every pixel the head,
      the composer and the disclaimer do not. The page never scrolls; the log
      does. Before this, the log was a hand-guessed calc(100vh - 300px) that
      disagreed with the rail's calc(100vh - 232px) — the rail hung 68px below
      the log and the page overflowed by 137px at 1280x800.
   2. The composer lives INSIDE the conversation card as a docked footer, so
      the field and the Ask button share one container, one padding box and
      one baseline. Equal heights and equal radii are declared here rather
      than hoped for.

   Everything is prefixed chat- (or pml-chat) and nothing restyles a shared
   class on its own: .btn is only touched as .btn.chat-ask / .btn.chat-new. */

.wrap:has(.pml-chat) {
  height: calc(100vh - var(--topbar-h));
  min-height: 560px;
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pml-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- page head ---- */
.chat-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
/* scoped to the chat head, so the shared title style is untouched elsewhere:
   the page title's 1.55 body leading was donating 10px to a screen that is
   fighting for every pixel of conversation. */
.chat-head .page-title { line-height: 1.2; }
.chat-thread { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.chat-thread-n { font-size: 15px; font-weight: 700; color: var(--deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.chat-thread-c { font-size: 14px; color: var(--muted); white-space: nowrap; }

.chat-body { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 16px; }

/* ---- left rail: saved conversations ---- */
.chat-rail { flex: 0 0 262px; max-width: 262px; display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.chat-rail-top { flex: none; padding: 12px; border-bottom: 1px solid var(--line); }
.btn.chat-new { width: 100%; height: 42px; }
.chat-rail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 12px; }
.chat-rail-note { font-size: 13.5px; line-height: 1.55; color: var(--muted); padding: 12px 6px; }
.chat-group { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); padding: 13px 6px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-rail-list > .chat-group:first-child { padding-top: 5px; }
.chat-row { display: flex; align-items: flex-start; gap: 6px; padding: 9px 7px 9px 11px; margin-bottom: 2px; border-radius: 9px; cursor: pointer; transition: background .13s var(--ease); }
.chat-row:hover { background: #f3f7fc; }
.chat-row.on { background: var(--mist-1); box-shadow: inset 3px 0 0 var(--ocean); }
.chat-row-txt { flex: 1; min-width: 0; }
.chat-row-t { font-size: 14px; font-weight: 600; color: var(--deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.on .chat-row-t { font-weight: 700; }
.chat-row-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row-menu { flex: none; width: 24px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: var(--muted-2); opacity: 0; transition: opacity .13s, background .13s, color .13s; }
.chat-row:hover .chat-row-menu, .chat-row.on .chat-row-menu, .chat-row-menu:focus-visible { opacity: 1; }
.chat-row-menu:hover { background: var(--card); color: var(--ocean); }

/* ---- conversation card ---- */
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 0 30px 18px; }
/* min-height + column so the empty state can centre itself in the whole log
   instead of sitting at the top of an auto-height box */
.chat-inner { max-width: 880px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

/* ---- turns ----
   The rule sits above each QUESTION, never between a question and its own
   answer: one exchange reads as one block. */
.chat-turn { flex: none; display: flex; align-items: flex-start; gap: 14px; }
.chat-turn-you { padding: 22px 0 10px; border-top: 1px solid var(--line); }
.chat-turn-you:first-child { padding-top: 20px; border-top: none; }
.chat-turn-pml { padding: 4px 0 24px; }
.chat-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 1px; }
.chat-av-you { background: var(--mist-2); color: var(--deep); font-size: 11px; font-weight: 700; }
.chat-av-pml { background: var(--mist-1); }
.chat-av-pml img { width: 20px; height: 20px; object-fit: contain; display: block; }
.chat-turn-main { flex: 1; min-width: 0; }

.chat-prose { font-size: 16px; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
/* ~75 characters a line: a drafted history section runs thousands of
   characters and a full-width measure made it a wall to read. The measure is
   set on the text blocks, not on the whole answer, so a table is still free
   to use the full width of the card. */
.chat-p, .chat-li, .chat-h, .chat-hr { max-width: 62ch; }
.chat-p { white-space: pre-wrap; margin: 0 0 13px; }
.chat-p:last-child { margin-bottom: 0; }
.chat-turn-you .chat-prose { font-size: 16.5px; line-height: 1.5; font-weight: 600; color: var(--deep); }
.chat-h { font-weight: 700; color: var(--deep); }
.chat-h1 { font-size: 17.5px; margin: 22px 0 8px; }
.chat-h2 { font-size: 16px; margin: 18px 0 6px; color: var(--ocean); }
.chat-h3 { font-size: 15px; margin: 15px 0 5px; }
.chat-prose > .chat-h:first-child { margin-top: 2px; }
.chat-b { font-weight: 700; color: var(--deep); }
.chat-i { font-style: italic; color: var(--muted); }
.chat-li { display: flex; gap: 9px; margin: 0 0 6px; white-space: pre-wrap; }
.chat-li-m { flex: none; color: var(--wave); font-weight: 700; }
.chat-li-b { flex: 1; min-width: 0; }
.chat-hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
/* a medication table the model wrote in pipes, rendered as a table */
.chat-tbl-wrap { max-width: 100%; overflow-x: auto; margin: 12px 0 16px; }
.chat-tbl { border-collapse: collapse; font-size: 14px; }
.chat-tbl th { text-align: left; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--deep); background: #f5f9fd; border: 1px solid var(--line); padding: 8px 11px; white-space: nowrap; }
.chat-tbl td { border: 1px solid var(--line); padding: 8px 11px; vertical-align: top; line-height: 1.5; color: var(--ink); }

/* the citation is the product: a footnote you can open, not a button */
.chat-cite { display: inline-block; background: var(--mist-1); color: var(--ocean); border: 1px solid var(--mist-2); border-radius: 5px; padding: 0 7px; margin: 0 1px; font-size: 12.5px; font-weight: 600; line-height: 1.45; white-space: nowrap; vertical-align: baseline; }
a.chat-cite { border-color: var(--mist); transition: background .13s, border-color .13s; }
a.chat-cite:hover { background: var(--mist-2); border-color: var(--wave); }

.chat-warn { margin-top: 12px; padding: 10px 13px; border-left: 3px solid var(--amber); border-radius: 0 9px 9px 0; background: var(--amber-soft); color: var(--deep); font-size: 13.5px; line-height: 1.55; max-width: 74ch; }
.chat-src { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; }
.chat-src-k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.chat-src-f { max-width: 100%; font-size: 12.5px; font-weight: 600; color: var(--ocean); background: var(--mist-1); border-radius: 6px; padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.chat-src-f { transition: background .13s; }
a.chat-src-f:hover { background: var(--mist-2); }
.chat-err { padding: 4px 0 22px 46px; font-size: 15px; color: var(--red); }

.chat-think { flex: none; display: flex; align-items: center; gap: 14px; padding: 4px 0 24px; }
.chat-think-m { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--mist-1); overflow: hidden; animation: pml-think 1.25s ease-in-out infinite; }
.chat-think-m img { width: 20px; height: 20px; object-fit: contain; display: block; }
.chat-think-t { font-size: 15px; font-weight: 600; color: var(--muted); animation: pml-think-text 1.25s ease-in-out infinite; }

/* ---- empty state: the space earns itself by naming what is in scope ---- */
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 6px; }
.chat-empty-m { width: 54px; height: 54px; border-radius: 50%; background: var(--mist-1); display: flex; align-items: center; justify-content: center; }
.chat-empty-m img { width: 30px; height: 30px; object-fit: contain; display: block; }
.chat-empty-t { font-size: 21px; font-weight: 700; color: var(--deep); margin-top: 15px; }
.chat-empty-c { font-size: 15px; font-weight: 600; color: var(--ocean); margin-top: 5px; }
.chat-scope { width: 100%; max-width: 690px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }
.chat-scope-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.chat-scope-k { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); }
.chat-scope-n { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.chat-scope-l { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; }
.chat-scope-f { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink); }
.chat-scope-f svg { width: 14px; height: 14px; flex: none; stroke: var(--wave); fill: none; stroke-width: 1.9; }
.chat-scope-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-scope-pg { flex: none; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.chat-scope-more { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ---- composer: one dock, one padding box, two controls of equal geometry --- */
.chat-dock { flex: none; padding: 14px 30px; border-top: 1px solid var(--line); background: #fbfcfe; }
.chat-dock-in { display: flex; align-items: flex-end; gap: 10px; max-width: 880px; margin: 0 auto; }
.chat-field { flex: 1; min-width: 0; height: 52px; min-height: 52px; max-height: 152px; padding: 13px 16px; resize: none; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); font: 400 15.5px/1.5 var(--font); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.chat-field::placeholder { color: var(--muted-2); }
.chat-field:focus { outline: none; border-color: var(--wave); box-shadow: 0 0 0 3px rgba(61,111,175,.14); }
.btn.chat-ask { flex: none; height: 52px; min-width: 116px; padding: 0 26px; border-radius: 10px; font-size: 15.5px; }
/* white on mist read as a smudge while the answer was being written */
.btn.chat-ask:disabled { background: var(--mist-2); color: var(--muted); cursor: default; }

.chat-note { flex: none; margin-top: 12px; font-size: 10.5px; line-height: 1.5; letter-spacing: .02em; color: var(--muted-2); text-transform: uppercase; }
.chat-blank { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--muted); }

@media (max-width: 1100px) {
  .chat-rail { flex-basis: 214px; max-width: 214px; }
  .chat-log, .chat-dock { padding-left: 20px; padding-right: 20px; }
  .chat-scope-l { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-think-m, .chat-think-t { animation: none !important; }
  .chat-row, .chat-row-menu, .chat-field, a.chat-cite, a.chat-src-f { transition: none !important; }
}