/* ============================================================================
   PsyFi Practice shell — clean-room app shell + chat states + drafting panel.
   Loads AFTER custom.css and owns the shell layout (the MaterialM layout
   runtime app.init/app.min/pcoded is no longer loaded). Vendor style.css
   remains for page CONTENT (Bootstrap components, modals, tables).
   Tokens: PsyFi Design System project `colors_and_type.css`; dark values are
   keyed to the app's [data-bs-theme] contract (DS uses data-theme).
   Mock: PsyFi meta repo docs/superpowers/specs/assets/
         2026-07-16-psyfi-practice-chat-states.html
   ============================================================================ */

:root {
  /* Follow the vendor color-theme vars (style.css keys them off the restored
     data-color-theme attribute) so Appearance presets recolor the shell too;
     fallbacks are the Blue_Theme values. */
  --ps-primary: var(--bs-primary, #0085db);
  --ps-primary-hover: color-mix(in srgb, var(--ps-primary) 86%, #000);
  --ps-primary-subtle: var(--bs-primary-bg-subtle, #e6f4fd);
  --ps-ink: #111c2d;
  --ps-fg2: rgba(17, 28, 45, .8);
  --ps-fg3: rgba(17, 28, 45, .6);
  --ps-fg4: rgba(17, 28, 45, .4);
  --ps-bg-body: #f4f7fa;
  --ps-surface: #ffffff;
  --ps-surface-2: #f8fafd;
  --ps-surface-3: #eff4fa;
  --ps-border: #e4ebf0;
  --ps-success: #00ceb6;
  --ps-warning-subtle: #fff1cc;
  --ps-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ps-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ps-shadow-sm: 0 2px 10px rgba(17, 28, 45, .06);
  --ps-shadow-pop: 0 8px 24px rgba(17, 28, 45, .10);
  --ps-sidebar-w: 272px;
  --ps-topbar-h: 60px;
}
[data-bs-theme="dark"] {
  --ps-primary-subtle: color-mix(in srgb, var(--ps-primary) 16%, transparent);
  --ps-ink: #e6edf5;
  --ps-fg2: rgba(230, 237, 245, .82);
  --ps-fg3: rgba(230, 237, 245, .6);
  --ps-fg4: rgba(230, 237, 245, .4);
  --ps-bg-body: #0f1722;
  --ps-surface: #18222f;
  --ps-surface-2: #1d2835;
  --ps-surface-3: #232f3d;
  --ps-border: rgba(255, 255, 255, .10);
  /* Translucent amber wash — the light-theme #fff1cc stayed in effect and
     made the near-white dark --ps-ink text unreadable (.ps-ai-warning). */
  --ps-warning-subtle: rgba(255, 193, 7, .14);
  --ps-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --ps-shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ---- Frame ---------------------------------------------------------------
   We own the geometry now that app.min.js/pcoded.js are gone. !important on
   load-bearing geometry beats any surviving unconditioned vendor rules. */
body {
  background: var(--ps-bg-body);
  font-family: var(--ps-font-body);
  margin-left: 0 !important; /* neutralise any stale inline margin */
}
#main-wrapper { display: block; }

#main-wrapper > aside.left-sidebar {
  position: fixed !important;
  inset: 0 auto 0 0;
  width: var(--ps-sidebar-w) !important;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background: var(--ps-surface) !important;
  border-right: 1px solid var(--ps-border);
  box-shadow: none !important;
  transition: transform .2s ease;
}
#page-wrapper {
  margin-left: var(--ps-sidebar-w) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left .2s ease;
}
#page-wrapper .body-wrapper { flex: 1; display: flex; flex-direction: column; }
#page-wrapper .container-fluid {
  flex: 1; display: flex; flex-direction: column;
  max-width: none !important; padding: 0 !important;
}
/* Appearance → Container "Boxed": the vendor rule loses to the max-width
   reset above, so re-apply it at higher specificity. */
html[data-boxed-layout="boxed"] #page-wrapper .container-fluid {
  max-width: 1300px !important;
  margin: 0 auto;
}
main#main-content { flex: 1; min-height: 0; padding: 0 22px; }

/* Desktop collapse + mobile off-canvas */
#main-wrapper.sidebar-collapsed > aside.left-sidebar { transform: translateX(-100%); }
#main-wrapper.sidebar-collapsed #page-wrapper { margin-left: 0 !important; }
.dark-transparent { display: none; }
@media (max-width: 991.98px) {
  #main-wrapper > aside.left-sidebar { transform: translateX(-100%); }
  #page-wrapper { margin-left: 0 !important; }
  #main-wrapper.show-sidebar > aside.left-sidebar { transform: none; box-shadow: var(--ps-shadow-pop) !important; }
  #main-wrapper.show-sidebar .dark-transparent {
    display: block; position: fixed; inset: 0;
    background: rgba(17, 28, 45, .4); z-index: 1035;
  }
  main#main-content { padding: 0 12px; }
}

/* ---- Topbar --------------------------------------------------------------- */
header.topbar {
  position: sticky; top: 0; z-index: 1020;
  height: var(--ps-topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  background: var(--ps-bg-body);
  border-bottom: 1px solid var(--ps-border);
  box-shadow: none !important;
}
header.topbar .navbar { width: 100%; display: flex; align-items: center; }
.ps-ibtn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ps-fg3); font-size: 18px; background: none; border: 0;
  text-decoration: none;
}
.ps-ibtn:hover { background: var(--ps-surface-3); color: var(--ps-fg2); }
.ps-ibtn.sm { width: 28px; height: 28px; font-size: 14px; }
.ps-ibtn.ps-set { background: var(--ps-primary-subtle); color: var(--ps-primary); }

.ps-switch {
  display: flex; gap: 2px;
  background: var(--ps-surface-3); padding: 3px; border-radius: 10px;
}
.ps-switch a {
  padding: 7px 14px; border-radius: 8px;
  font-family: var(--ps-font-display); font-size: 13px; font-weight: 700;
  color: var(--ps-fg3); display: flex; align-items: center; gap: 7px;
  text-decoration: none; white-space: nowrap;
}
.ps-switch a i { font-size: 16px; }
.ps-switch a.on { background: var(--ps-surface); color: var(--ps-primary); box-shadow: 0 1px 3px rgba(17, 28, 45, .1); }
/* Fixed-geometry circle with flex centering: the Bootstrap pill's em-based
   padding + the inherited 700-weight display font left the digit visibly
   off-center. line-height:1 + flex centering is glyph-metric-proof. */
.ps-switch .badge {
  font-size: 10px; line-height: 1; font-family: var(--ps-font-body); font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 767.98px) { .ps-switch a span.ps-switch-label { display: none; } }

/* Theme toggle buttons: show the one for the theme you can switch TO */
html.light .dark-layout, html[data-bs-theme="light"] .dark-layout { display: inline-flex; }
html.light .light-layout, html[data-bs-theme="light"] .light-layout { display: none; }
html.dark .dark-layout, html[data-bs-theme="dark"] .dark-layout { display: none; }
html.dark .light-layout, html[data-bs-theme="dark"] .light-layout { display: inline-flex; }

/* ---- Sidebar internals ---------------------------------------------------- */
.ps-sb-brand { padding: 16px 12px 14px; }
.ps-sb-brand a { display: block; }
.ps-logo { height: 42px; width: 100%; object-fit: contain; object-position: left; display: block; }
[data-bs-theme="light"] .ps-logo-dark { display: none; }
[data-bs-theme="dark"] .ps-logo-light { display: none; }

aside.left-sidebar .scroll-sidebar { flex: 1; overflow-y: auto; min-height: 0; }
aside.left-sidebar #sidebarnav { list-style: none; padding: 0 12px; margin: 0; }
aside.left-sidebar .sidebar-item { list-style: none; }
aside.left-sidebar .sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font-family: var(--ps-font-display); font-weight: 700; font-size: 14px;
  color: var(--ps-ink); text-decoration: none;
}
aside.left-sidebar .sidebar-link:hover { background: var(--ps-surface-3); }
aside.left-sidebar .aside-icon { background: none !important; padding: 0 !important; color: var(--ps-fg3); }
aside.left-sidebar .collapse.first-level .sidebar-link {
  font-weight: 600; font-size: 13.5px; color: var(--ps-fg3); padding-left: 38px;
}
aside.left-sidebar #chat-search {
  border: 1px solid var(--ps-border); border-radius: 8px;
  background: var(--ps-surface); color: var(--ps-fg2);
  font-size: 13px; padding: 6px 10px; width: 100%;
}
/* Chat list rows (markup unchanged — reskin only) */
.chat-list { list-style: none; padding: 0 12px !important; margin: 0; }
.chat-list .chat-item { margin-bottom: 1px; }
.chat-list .sidebar-link {
  font-weight: 600; font-size: 13.5px; color: var(--ps-fg3);
  border-radius: 9px !important; padding: 9px 10px;
}
.chat-list .sidebar-link.active,
.chat-list .sidebar-link.chat-link-active {
  background: var(--ps-primary-subtle) !important; color: var(--ps-primary) !important;
}
.pinned-chats-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 22px 2px; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ps-fg4);
}
.sidebar-pinned-nav { border-top: 1px solid var(--ps-border); margin-top: 8px; padding: 4px 12px 0; }
.fixed-profile { border-top: 1px solid var(--ps-border); padding: 12px 16px; margin: 10px 0 0 !important; }
.fixed-profile .card { background: none !important; }
.fixed-profile .card-body { padding: 0 !important; }

/* Transcripts sidebar (Notes routes) — title keeps min-width:0 so it actually
   shrinks in the flex row; .sb-meta clamps to a fixed max-width instead of
   being allowed to push/overflow (the v1 bug Jake caught in review). */
.chat-title { min-width: 0; }
.sb-meta {
  flex: 0 0 auto; max-width: 64px; font-size: .68rem; color: var(--ps-fg4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-drafting-chip {
  font-size: .65rem; padding: 1px 8px; border-radius: 999px;
  background: var(--ps-surface-3); color: var(--ps-fg3);
}
/* Sidebar record button glyph: a pure-CSS dot instead of an icon font —
   font glyphs sit on a baseline and land ~1px off true center inside the
   30px circle, which reads as a lopsided record ring. A flex-centered
   square with border-radius is exact. */
.ps-rec-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: currentColor; display: block; flex: 0 0 auto;
}

/* ---- Chat page ------------------------------------------------------------ */
.ps-chat-row { display: flex; flex: 1; min-height: 0; }
.ps-chat-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* The chat sits directly on the page background — no card (mock: chatpane has
   no surface). Overrides custom.css's rounded card without editing it. */
.chat-scroll-clip {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#messages { width: 100%; --ps-lane-gutter: max(calc((100% - 756px) / 2), 0px); }
#messages > * { max-width: 756px; margin-left: auto; margin-right: auto; }
/* Bubbles align right (user) / left (assistant) within the centered lane;
   sibling control rows and tool/typing chips follow their bubble's edge. */
#messages > .message-bubble.me,
#messages > .psygpt-user-controls {
  margin-left: auto;
  margin-right: var(--ps-lane-gutter);
}
#messages > .message-bubble.ai,
#messages > .psygpt-feedback-controls,
#messages > .tool-call-indicator,
#messages > #typing-indicator {
  margin-left: var(--ps-lane-gutter);
  margin-right: auto;
}
#messages > .message-bubble { max-width: min(605px, 80%); } /* ~80% of the lane */
@media (max-width: 600px) {
  #messages > .message-bubble { max-width: 92%; }
}
.chat-bubble-user, .msg-me,
#messages .message-row.user .message-bubble {
  background: var(--ps-primary-subtle); color: var(--ps-ink);
  border-radius: 16px 16px 4px 16px;
}
.tool-call-indicator {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; padding: 6px 12px;
  border-radius: 999px; background: var(--ps-surface-3); color: var(--ps-fg2);
}
.tool-call-indicator .tool-icon { color: var(--ps-success); }

/* Empty state */
#empty-state {
  /* #messages centers its flex children, so without an explicit width the
     empty state shrink-wraps to its grid's min-content — which in turn
     collapses the width-driven column count below. Fill the column; the
     inner .empty-state-content still caps itself at 760px. */
  width: 100%;
}
.empty-state .ps-empty-title {
  font-family: var(--ps-font-display); font-size: 22px; font-weight: 800;
  color: var(--ps-ink); margin: 0 0 6px;
}
.empty-state .ps-empty-sub { font-size: 13.5px; color: var(--ps-fg3); margin: 0 0 24px; }
.ps-tpl-grid {
  /* Width-driven column count: 3 across when the empty-state content
     (min(760px, available)) allows, auto-collapsing to 2 then 1 as the
     container narrows. The 210px floor is what sets the collapse points. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; width: 100%; margin: 0 auto 16px; text-align: left;
}
.ps-tpl-grid .clinical-template-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px; border: 1px solid var(--ps-border); border-radius: 12px;
  background: var(--ps-surface); cursor: pointer; text-align: left;
}
.ps-tpl-grid .clinical-template-btn:hover { border-color: var(--ps-primary); box-shadow: var(--ps-shadow-sm); }
.ps-tpl-grid .template-icon { font-size: 20px; color: var(--ps-primary); margin-bottom: 4px; }
.ps-tpl-grid .template-title { font-family: var(--ps-font-display); font-size: 14px; font-weight: 700; color: var(--ps-ink); }
.ps-tpl-grid .template-desc { font-size: 12px; color: var(--ps-fg3); }
@media (max-width: 575.98px) { .ps-tpl-grid { grid-template-columns: 1fr; } }

/* Composer: the pre-redesign composer look lives in custom.css (Jake's
   original). Only the model chip is shell-styled here. */
.ps-model-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ps-font-display); font-weight: 600; font-size: 11px;
  color: var(--ps-fg2); border: 1px solid var(--ps-border);
  border-radius: 7px; padding: 2px 4px 2px 8px;
}
.ps-model-chip i { font-size: 14px; color: var(--ps-fg3); }
.ps-model-chip select {
  border: 0; background: none; color: var(--ps-fg2);
  font: inherit; padding: 2px; max-width: 160px;
}
/* Right-align the composer meta row (char count + model chip) to the send
   button's left edge — which, since #composer-form has gap 0, is the same
   line as the textarea's right edge. The inset = #btn-send min-width (64px,
   custom.css) + #composer-form's right padding (.5rem); tracks the button
   rather than hardcoding a pixel offset. justify-content:space-between keeps
   the keyboard hints flush left. (The hints markup is intentionally left
   untouched.) */
.ps-composer-meta { padding-inline-end: calc(64px + .5rem); }
.pc-footer, footer.pc-footer {
  background: none !important; font-size: 11.5px; color: var(--ps-fg4);
  padding: 10px 22px 8px !important;
  /* custom.css makes this sticky for the height-locked chat page; on Notes
     routes the page itself scrolls, so a stuck footer floats over long
     transcripts/notes. Static keeps it in flow at the true bottom — on chat
     the layout already fits the viewport, so nothing moves there. */
  position: static !important;
}
.pc-footer a { color: var(--ps-fg4) !important; text-decoration: none; }

/* ---- Drafting panel --------------------------------------------------------
   Elevated card at the right of the chat row (full card on desktop, all four
   corners rounded — Jake's call after the A/B mock review; the mobile
   slide-over below keeps left-only radii since it runs flush to the viewport
   edge). The open animation replays whenever the JS lifts .d-none
   (display none -> flex restarts CSS animations), so d-none stays the sole
   visibility contract; content re-renders while open don't retrigger it.
   The slide is clipped by .chat-wrapper's overflow:hidden (custom.css) — it
   cannot widen the page. Mock: /tmp/drafting_panel_card_mockup/index.html,
   spec: docs/superpowers/specs/2026-07-17-drafting-panel-card-design.md */
#drafting-panel {
  width: 380px; flex: 0 0 auto;
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 14px;
  box-shadow: var(--ps-shadow-pop);
  margin: 4px 0 12px;
  overflow: hidden; /* clip the scrolling body to the rounded corners */
  display: flex; flex-direction: column; min-height: 0;
  animation: ps-draft-slide-in .32s cubic-bezier(.22, .7, .3, 1);
}
#drafting-panel.d-none { display: none !important; }
@keyframes ps-draft-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  #drafting-panel { animation: none; }
}
.ps-draft-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-bottom: 1px solid var(--ps-border);
  font-family: var(--ps-font-display); font-weight: 700; font-size: 13px;
  color: var(--ps-ink);
}
.ps-draft-head > i { color: var(--ps-primary); }
.ps-draft-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-draft-body { flex: 1; overflow-y: auto; padding: 18px 20px; font-size: 13px; line-height: 1.7; color: var(--ps-fg2); }
.ps-draft-body h1, .ps-draft-body h2, .ps-draft-body h3, .ps-draft-body h4 {
  font-family: var(--ps-font-display); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ps-fg4); margin: 14px 0 4px;
}
.ps-draft-body > :first-child { margin-top: 0; }
.ps-draft-chip {
  position: absolute; right: 8px; top: -38px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--ps-border);
  background: var(--ps-surface); color: var(--ps-fg2);
  box-shadow: var(--ps-shadow-sm); cursor: pointer;
}
.ps-draft-chip i { color: var(--ps-primary); }
.ps-draft-editor {
  border: 0; resize: none; background: var(--ps-surface-2);
  font-family: ui-monospace, monospace;
}
/* Edit mode is signalled by the surface-2 background + Save footer; suppress
   the global :focus-visible ring, which gets clipped by the panel's
   overflow:hidden into a stray partial line. */
.ps-draft-editor:focus, .ps-draft-editor:focus-visible { outline: none; }
.ps-draft-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--ps-border);
}
.ps-draft-status { font-size: 11px; color: var(--ps-fg4); }
.ps-fmt-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.ps-fmt-chips button {
  border: 1px solid var(--ps-border); background: transparent; border-radius: 999px;
  padding: 2px 10px; font-size: 11px; color: var(--ps-fg3);
}
.ps-fmt-chips button.on { background: var(--ps-primary-subtle); border-color: transparent; color: var(--ps-primary); font-weight: 600; }
.ps-pref-hint { font-size: 10px; color: var(--ps-fg4); margin-top: 3px; }
@media (max-width: 1199.98px) {
  #drafting-panel {
    position: fixed; top: var(--ps-topbar-h); right: 0; bottom: 0;
    width: min(420px, 100vw); z-index: 1050; box-shadow: var(--ps-shadow-pop);
    /* Slide-over keeps the card language but runs flush to the viewport's
       right edge and edge-to-edge vertically: left-only radii, no margins,
       and no top/right/bottom hairlines doubling the topbar border. */
    margin: 0; border-top: 0; border-bottom: 0; border-right: 0;
    border-radius: 14px 0 0 14px;
  }
}

/* Chat row hover actions (was in sidebar.html inline styles) */
.chat-list .chat-item .chat-actions { display: none; }
.chat-list .chat-item:hover .chat-actions,
.chat-list .chat-item:focus-within .chat-actions { display: inline-flex !important; }
.chat-list .chat-action-bg {
  width: 22px; height: 22px; background: var(--ps-surface-3);
  color: var(--ps-fg3); font-size: 12px;
}

/* Prompts panel row actions (was in sidebar.html inline styles) — same
   d-none + hover/focus-within reveal pattern as .chat-actions above; the
   edit/delete buttons on personal prompt rows carry the `d-none` utility
   class in the markup and have no JS fallback, so this rule is load-bearing,
   not cosmetic. */
#sp-list .sp-row-personal:hover .sp-actions,
#sp-list .sp-row-personal:focus-within .sp-actions { display: flex !important; }
#sp-list .sp-row .sp-actions .chat-action-bg { width: 22px; height: 22px; }
#sp-list .sp-row .sp-actions .ti { font-size: .85rem; }

/* Prompts panel density + cap + caret (ported from sidebar.html inline styles) */
.sidebar-pinned-nav #sp-list {
  max-height: 55vh;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

/* Caret rotates when open */
.sp-caret { transition: transform .2s ease; }
#sp-toggle[aria-expanded="true"] .sp-caret { transform: rotate(180deg); }

/* Prompts list row density */
#sp-list .sp-row { margin: 0 !important; padding: 0 !important; }
#sp-list .sp-row .sidebar-link { padding: 2px 8px !important; min-height: 0 !important; line-height: 1.35 !important; }
#sp-list .sp-row .aside-icon { padding: 0 4px 0 0 !important; }
#sp-list .sp-label { margin: 0 !important; padding: 0 !important; }

/* ---- Notes detail page (Task 5) -------------------------------------------
   Content header (editable title + meta chips + actions) above a flex row:
   Transcript panel (flexible) + the shared #drafting-panel (380px, styled
   above). Mirrors the .ps-chat-row/.ps-draft-* token language rather than
   introducing a parallel design language. */
.ps-notes-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 18px 0 12px; gap: 14px; }
.ps-notes-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ps-notes-title-block { min-width: 0; flex: 1 1 320px; }
.ps-notes-title {
  display: block; font-family: var(--ps-font-display); font-weight: 800; font-size: 21px;
  color: var(--ps-ink); outline: none; border-radius: 6px; padding: 2px 4px; margin: -2px 0 6px -4px;
  max-width: 100%; cursor: text;
}
.ps-notes-title:empty::before { content: attr(data-placeholder); color: var(--ps-fg4); }
.ps-notes-title:hover, .ps-notes-title:focus { background: var(--ps-surface-3); }
.ps-notes-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-chip {
  font-size: 11.5px; font-weight: 600; color: var(--ps-fg3);
  background: var(--ps-surface-3); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.ps-notes-actions { display: flex; gap: 8px; align-items: flex-start; flex: 0 0 auto; }
.ps-notes-banner { margin: 0; }

.ps-notes-row { display: flex; flex: 1; min-height: 0; gap: 16px; }
.ps-notes-transcript-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: var(--ps-surface); border: 1px solid var(--ps-border); border-radius: 14px;
  box-shadow: var(--ps-shadow-sm); overflow: hidden; margin: 4px 0 12px;
}
.ps-notes-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--ps-border); flex: 0 0 auto;
}
.ps-notes-panel-title { font-family: var(--ps-font-display); font-weight: 700; font-size: 13px; margin: 0; color: var(--ps-ink); }
.ps-notes-find {
  display: flex; align-items: center; gap: 6px; margin: 0;
  border: 1px solid var(--ps-border); border-radius: 8px; padding: 5px 10px;
  background: var(--ps-surface-2); color: var(--ps-fg3); font-size: 12.5px; flex: 0 1 220px;
}
.ps-notes-find i { font-size: 14px; }
.ps-notes-find input { border: 0; background: none; outline: none; color: var(--ps-ink); font-size: 12.5px; width: 100%; }
.ps-notes-panel-body { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 13.5px; line-height: 1.7; }
.ps-transcript-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ps-transcript-line .ps-spk-name {
  flex: 0 0 auto; font-weight: 700; font-size: 12px; border-radius: 999px; padding: 2px 9px; cursor: text;
}
.ps-transcript-line .ps-spk-time { flex: 0 0 auto; font-size: 10.5px; color: var(--ps-fg4); }
.ps-transcript-line .ps-spk-text { flex: 1 1 260px; color: var(--ps-fg2); }
.ps-transcript-line mark { background: color-mix(in srgb, var(--ps-primary) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ps-spk-name-input {
  border: 1px solid var(--ps-primary); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700;
  background: var(--ps-surface); color: var(--ps-ink); outline: none; max-width: 200px;
}
.spk-0 { background: color-mix(in srgb, #0d6efd 16%, transparent); color: #0d6efd; }
.spk-1 { background: color-mix(in srgb, #198754 16%, transparent); color: #198754; }
.spk-2 { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #8b5cf6; }
.spk-3 { background: color-mix(in srgb, #d63384 16%, transparent); color: #d63384; }

.ps-notes-draft-col { flex: 0 0 380px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ps-notes-draft-col #drafting-panel { flex: 1 1 auto; min-height: 0; }
.ps-ai-warning {
  display: flex; gap: 8px; align-items: flex-start; flex: 0 0 auto;
  background: var(--ps-warning-subtle); color: var(--ps-ink);
  border-radius: 12px; padding: 10px 14px; font-size: 11.5px; line-height: 1.5;
}
.ps-ai-warning i { color: #b45309; margin-top: 2px; }
[data-bs-theme="dark"] .ps-ai-warning i { color: #fbbf24; }

@media (max-width: 991.98px) {
  .ps-notes-row { flex-direction: column; }
  .ps-notes-draft-col { flex: 0 0 auto; width: 100%; }
}

/* ---- Notes list landing (zero-session empty state, Task 5) ---------------- */
.ps-notes-empty-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 24px; }
.ps-notes-empty-card { max-width: 420px; }

/* ---- Recording page (Task 6) — reuses the .ps-notes-row/.ps-notes-draft-col
   two-column shell from the detail page; adds .ps-rec-* for the state-machine
   stage panes and the side-column panels. ---------------------------------- */
.ps-rec-heading { font-family: var(--ps-font-display); font-weight: 800; font-size: 21px; color: var(--ps-ink); margin: 0 0 2px; }
.ps-rec-subhead { max-width: 520px; }

.ps-rec-stage-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; gap: 8px; min-height: 420px;
}
.ps-rec-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; }
.ps-rec-stage-icon { font-size: 40px; color: var(--ps-fg4); margin-bottom: 4px; }
.ps-rec-icon-success { color: var(--ps-success); }
.ps-rec-icon-error { color: #dc3545; }
.ps-rec-stage-title { font-family: var(--ps-font-display); font-weight: 800; font-size: 18px; color: var(--ps-ink); margin: 0; }
.ps-rec-stage-sub { font-size: 13px; margin: 0 0 6px; }
.ps-rec-controls { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
/* Mic-only callout on the idle stage: the stage is centered, the callout reads left. */
.ps-rec-mic-warning { text-align: left; font-size: 12.5px; margin-top: 2px; }
.ps-rec-mic-warning a { color: inherit; text-decoration: underline; font-weight: 600; }

.ps-rec-live-row { display: flex; align-items: center; gap: 10px; }
.ps-rec-pulse-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #dc3545; flex: 0 0 auto;
  animation: ps-rec-pulse 1.4s ease-in-out infinite;
}
.ps-rec-pulse-dot.ps-rec-paused { background: var(--ps-fg4); animation: none; }
@keyframes ps-rec-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220, 53, 69, .4); }
  50% { opacity: .55; box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
}
.ps-rec-live-label { font-family: var(--ps-font-display); font-weight: 700; font-size: 14px; color: var(--ps-ink); }
.ps-rec-timer {
  font-family: var(--ps-font-display); font-weight: 800; font-size: 26px; color: var(--ps-ink);
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}

.ps-rec-waveform {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  height: 64px; width: 100%; max-width: 380px; padding: 0 12px;
}
.ps-rec-waveform .ps-rec-bar {
  width: 4px; min-height: 4px; height: 100%; border-radius: 999px; background: var(--ps-primary);
  transform: scaleY(.08); transform-origin: center; transition: transform 80ms linear;
}
.ps-rec-waveform-frozen .ps-rec-bar { background: var(--ps-fg4); }
.ps-rec-debug { min-height: 16px; }

.ps-rec-spinner { font-size: 28px; color: var(--ps-primary); margin-bottom: 4px; }

.ps-rec-side-col { gap: 14px; }
.ps-rec-panel {
  display: flex; flex-direction: column;
  background: var(--ps-surface); border: 1px solid var(--ps-border); border-radius: 14px;
  box-shadow: var(--ps-shadow-sm); overflow: hidden;
}
.ps-rec-panel-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.ps-rec-field-label { font-size: 11.5px; font-weight: 700; color: var(--ps-fg3); margin: 8px 0 2px; }
.ps-rec-field-label:first-child { margin-top: 0; }
.ps-rec-input { font-size: 13px; }
.ps-rec-scratchpad-panel { flex: 1 1 auto; min-height: 160px; }
.ps-rec-scratchpad-body { flex: 1; padding: 10px 12px 12px; }
.ps-rec-scratchpad {
  width: 100%; height: 100%; min-height: 140px; resize: vertical; border: 1px solid var(--ps-border);
  border-radius: 10px; background: var(--ps-surface-2); color: var(--ps-ink); font-size: 13px;
  padding: 10px 12px; outline: none; font-family: var(--ps-font-body);
}
.ps-rec-scratchpad:focus { border-color: var(--ps-primary); }
.ps-rec-save-pill { text-transform: none; }

@media (max-width: 991.98px) {
  .ps-rec-side-col { width: 100%; }
}
.ps-notes-empty-icon { font-size: 40px; color: var(--ps-fg4); margin-bottom: 14px; }