/* ============================================================
   styles.css — extracted from public/index.html

   Block A (was lines 34-2444): main app stylesheet — variables,
   layout, day grid, modals, inbox, portal, forms, animations.
   Block C (was lines 21462-21478): .gs-* command palette styles.

   Order is preserved: A first, then C. The cascade in this file
   matches the original cascade in index.html exactly.
   ============================================================ */

  :root {
    --bg: #f5f0e8; --bg2: #ede8df; --border: #d8d0c0;
    --text: #2a2520; --text-muted: #8a7f72;
    --pink: #f4a0b0;   --pink-dark: #e07090;
    --blue: #90c4e8;   --blue-dark: #5090c0;
    --green: #90d4a0;  --green-dark: #50a060;
    --purple: #c4a0e0; --purple-dark: #9060c0;
    --yellow: #f0d890; --yellow-dark: #c8a830;
    --shadow: 0 2px 8px rgba(0,0,0,0.10);
    --shadow-lg: 0 6px 24px rgba(0,0,0,0.13);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

  /* ── HEADER ── */
  header {
    background: var(--text); color: #f5f0e8;
    padding: 12px 24px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    margin-right: -280px; padding-right: 304px;
  }
  body.msn-minimized header { margin-right: -32px; padding-right: 304px; }
  header h1 { font-size: 20px; font-weight: 600; }
  .header-right { display: flex; gap: 8px; align-items: center; }
  #todayLabel { font-family:'DM Mono',monospace; font-size:13px; color:#a09080; margin-right:6px; }
  .btn { padding:8px 18px; border-radius:6px; border:none; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; transition:all 0.15s; }
  .btn-primary { background:var(--purple); color:var(--text); }
  .btn-primary:hover { background:var(--purple-dark); color:#fff; }

  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── CHAT DRAG-AND-DROP — applied to msg panel, MSN chat, case modal
        chat, and portal chat bodies. Highlights the drop target and
        renders a centered hint overlay while a file is being dragged. ── */
  .chat-drop-active { position:relative; outline:2px dashed var(--purple-dark); outline-offset:-4px; background:rgba(135,108,180,0.06); }
  .chat-drop-hint {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; color:var(--purple-dark);
    background:rgba(255,255,255,0.85); pointer-events:none; z-index:5; border-radius:6px;
  }

  /* ── TABS ── */
  /* Activity Ticker */
  .ticker-bar {
    display:flex; align-items:center; background:var(--text);
    overflow:hidden; height:28px; position:relative;
  }
  .ticker-label {
    font-size:10px; font-weight:700; letter-spacing:.8px; color:var(--purple);
    padding:0 14px; flex-shrink:0; background:var(--text); z-index:2;
    border-right:1px solid rgba(255,255,255,0.1);
  }
  .ticker-track {
    flex:1; overflow:hidden; position:relative; height:100%;
    mask-image:linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
  }
  .ticker-scroll {
    display:inline-flex; align-items:center; height:100%; gap:0;
    white-space:nowrap; will-change:transform;
    animation:tickerScroll var(--ticker-duration, 40s) linear infinite;
  }
  .ticker-scroll:hover { animation-play-state:paused; }
  @keyframes tickerScroll {
    0% { transform:translateX(0); }
    100% { transform:translateX(-50%); }
  }
  .ticker-item {
    display:inline-flex; align-items:center; gap:6px;
    padding:0 20px; font-size:11px; color:rgba(245,240,232,0.75);
    font-family:'DM Sans',sans-serif; flex-shrink:0; height:100%;
    border-right:1px solid rgba(255,255,255,0.06);
    transition:color 0.15s;
  }
  .ticker-item:hover { color:#f5f0e8; }
  .ticker-icon { font-size:12px; flex-shrink:0; }
  .ticker-patient { font-weight:600; color:rgba(245,240,232,0.9); }
  .ticker-time { color:rgba(245,240,232,0.4); font-family:'DM Mono',monospace; font-size:10px; }
  .ticker-sep { color:rgba(255,255,255,0.15); padding:0 4px; }
  @media print { .ticker-bar { display:none !important; } }

  .tabs-bar {
    display: flex; align-items: stretch; gap: 0;
    background: var(--bg2); border-bottom: 2px solid var(--border);
    padding: 0 16px; overflow-x: auto; flex-wrap: nowrap;
    margin-right: -280px; padding-right: 296px;
  }
  body.msn-minimized .tabs-bar { margin-right: -32px; padding-right: 296px; }
  .tab-btn {
    padding: 10px 14px; font-size: 13px; font-weight: 600;
    color: var(--text-muted); background: none; border: none;
    cursor: pointer; font-family: 'DM Sans', sans-serif;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap; line-height: 1; flex-shrink: 0;
  }
  .tab-btn:hover { color: var(--text); }
  .tab-btn.active { color: var(--text); border-bottom-color: var(--purple-dark); }
  .tab-badge {
    background: var(--purple); color: var(--text);
    border-radius: 20px; font-size: 11px; font-weight: 700;
    padding: 1px 7px; min-width: 20px; text-align: center;
  }
  .tab-btn.active .tab-badge { background: var(--purple-dark); color: #fff; }

  /* ── LEGEND ── */
  .legend {
    display:flex; gap:16px; padding:9px 24px;
    background: var(--bg2); border-bottom:1px solid var(--border);
    flex-wrap:wrap; align-items:center;
  }
  .legend-label { font-size:12px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
  .legend-item { display:flex; align-items:center; gap:6px; font-size:13px; }
  .legend-dot { width:13px; height:13px; border-radius:3px; flex-shrink:0; }

  /* ── NAV ── */
  .nav-row { display:flex; align-items:center; gap:10px; padding:10px 24px 6px; }
  .nav-row button { background:none; border:1px solid var(--border); border-radius:6px; padding:6px 18px; cursor:pointer; font-size:14px; color:var(--text); font-family:'DM Sans',sans-serif; transition:background 0.15s; }
  .nav-row button:hover { background:var(--bg2); }
  #rangeLabel { font-size:13px; color:var(--text-muted); font-family:'DM Mono',monospace; }

  /* ── VIEWS ── */
  .view { display:none; }
  .view.active { display:block; }

  /* ── BOARD VIEW ── */
  .board-layout { display:flex; height:calc(100vh - 140px); }
  .mill-queue { display:none !important; }
  .mill-queue-header { padding:14px 14px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#a09080; border-bottom:1px solid rgba(255,255,255,0.1); position:sticky; top:0; background:var(--text); z-index:1; }
  .mill-queue-header .mill-count { background:var(--purple); color:var(--text); border-radius:10px; font-size:10px; padding:1px 7px; margin-left:6px; font-weight:700; }
  .mill-queue-item { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06); cursor:pointer; transition:background 0.12s; }
  .mill-queue-item:hover { background:rgba(255,255,255,0.06); }
  .mill-queue-patient { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#f0ece6; }
  .mill-queue-detail { font-size:13px; color:#b0a898; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mill-queue-due { font-size:12px; color:#8a8070; margin-top:3px; font-family:'DM Mono',monospace; }
  .mill-queue-color { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle; flex-shrink:0; }
  .mill-queue-empty { padding:20px 14px; text-align:center; color:#6a6050; font-size:12px; }
  .board-wrapper { padding: 14px 120px 48px 120px; flex:1; overflow:auto; background:#3a3a3a; border-radius:0; cursor:grab; }
  /* Hold column lives inside each week-grid as the 6th column to the
     right of Friday. Scrolls with the rest of the days. Only week 1
     shows the held-case content — weeks 2+ get a header-only stub so
     the grid stays visually aligned across the stack. */
  .hold-column {
    background:rgba(70,80,100,0.22);
    border:1px solid var(--border); border-radius:10px;
    display:flex; flex-direction:column;
    min-height: 200px;
  }
  .hold-column-header {
    background:#5e6b85; color:#fff; padding:10px 14px;
    border-radius:9px 9px 0 0; text-align:center;
    font-family:'DM Sans',sans-serif;
  }
  .hold-column-header .hc-title {
    font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  }
  .hold-column-header .hc-count {
    font-size:11px; opacity:0.8; margin-top:2px; font-family:'DM Mono',monospace;
  }
  .hold-column-body {
    flex:1; padding:8px; overflow-y:auto;
    display:flex; flex-direction:column; gap:6px;
  }
  .hold-column.drag-over { background:rgba(70,80,100,0.4); }
  .hold-column-body:empty::before, .hold-column-empty {
    content:''; color:rgba(255,255,255,0.45);
    text-align:center; font-size:11px; padding:24px 8px;
    font-style:italic; line-height:1.5;
  }
  .hold-column .case-card { min-height:0 !important; padding:6px 22px 6px 8px !important; cursor:grab; }
  .hold-column .case-card .case-detail, .hold-column .case-card .case-tag,
  .hold-column .case-card .case-units-badge, .hold-column .case-card .case-progress,
  .hold-column .case-card .mill-queue { display:none !important; }
  .hold-column .case-card .case-patient { font-size:12px; padding-right:18px; }
  .hold-column .case-card .case-content { height:auto !important; overflow:visible !important; }
  /* On-hold badge — small ⏸ pin on the card so portal viewers can tell
     the case is paused. Day-column cases get it too when on-hold (rare,
     since held cases are normally hidden from day columns, but possible
     during an in-flight hold action). */
  .case-card.on-hold::after {
    content:'⏸'; position:absolute; top:3px; right:18px;
    font-size:11px; color:rgba(255,255,255,0.7);
    pointer-events:none;
  }
  .hold-reason {
    font-size:10px; color:rgba(0,0,0,0.55); margin-top:2px;
    font-style:italic; padding-right:18px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .board-wrapper.grabbing { cursor:grabbing; user-select:none; }
  .week-block { margin-bottom: 20px; }
  .week-label-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .week-label-row h2 { font-size:11px; font-weight:700; color:#bbb; text-transform:uppercase; letter-spacing:.7px; }
  .week-range { font-family:'DM Mono',monospace; font-size:11px; color:#999; }
  .week-grid { display:grid; gap:12px; }

  /* ── DAY COLUMN ── */
  /* Appointments — small time-anchored chips at the top of a day column */
  .day-appts {
    display:flex; flex-direction:column; gap:4px;
    padding:6px 8px 4px; border-bottom:1px dashed rgba(60,100,140,0.25);
    margin-bottom:6px;
  }
  .appt-chip {
    display:flex; align-items:center; gap:6px;
    padding:5px 9px; border-radius:6px;
    background:rgba(80,160,200,0.18); border:1px solid #3a8bc4;
    color:#1f4660; font-size:14px; line-height:1.2;
    cursor:pointer; transition:background 0.12s, transform 0.08s;
  }
  .appt-chip:hover { background:rgba(80,160,200,0.32); }
  .appt-chip:active { transform:scale(0.98); }
  .appt-chip .appt-time {
    /* Tabular-figure sans for the time numbers — wider strokes than DM
       Mono and font-variant-numeric:tabular-nums keeps glyph width even
       so "11:00 AM" and "1:00 PM" line up. Bumped to 13px (+2 vs prior
       11px) for legibility against the dark blue background. */
    flex-shrink:0; font-family:'DM Sans','Segoe UI',system-ui,sans-serif;
    font-variant-numeric:tabular-nums;
    font-weight:700; font-size:13px; letter-spacing:0.2px;
    padding:2px 7px; background:#3a8bc4; color:#fff; border-radius:4px;
  }
  .appt-chip .appt-title {
    flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600;
  }

  .day-col { background:var(--day-bg, #ece6da); border-radius:10px; border:1px solid var(--border); display:flex; flex-direction:column; }
  .day-col.today-col { outline:4px solid #00bcd4; outline-offset:-1px; }
  .day-header { padding:8px 12px 6px; border-bottom:1px solid var(--border); background:var(--day-header-bg, #e4ddd0); border-radius:10px 10px 0 0; flex-shrink:0; text-align:center; position:relative; }
  .day-name { font-size:22px; font-weight:600; line-height:1.2; color:#fff; }
  .today-badge { display:inline-block; color:#00bcd4; font-size:10px; font-weight:700; text-transform:uppercase; margin-left:6px; vertical-align:middle; }
  .day-date { font-size:13px; color:var(--text-muted); font-family:'DM Mono',monospace; margin-top:1px; }
  .day-stats { position:absolute; top:8px; right:10px; display:flex; gap:4px; }
  .day-stat { font-size:15px; font-weight:600; color:var(--text-muted); background:rgba(0,0,0,0.06); padding:2px 8px; border-radius:10px; font-family:'DM Mono',monospace; }
  #boardSearch:focus, #boardOfficeFilter:focus { border-color:var(--purple-dark); }
  .case-card.search-dim { opacity:0.15; pointer-events:none; }
  .day-body { padding:8px; flex:1; display:flex; flex-direction:column; }
  .cards-grid { display:grid; gap:8px; flex:1; align-content:start; grid-auto-rows:64px; }

  /* ── OFFICE GROUP BOXES ── */
  .office-groups { display:flex; gap:6px; align-items:flex-start; flex:1; }
  .office-groups-col { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .office-group { border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,0.25); display:flex; flex-direction:column; }
  .office-group-header { padding:3px 8px; font-size:9px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid var(--border); cursor:grab; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,0.03); border-radius:6px 6px 0 0; }
  .office-group-header:active { cursor:grabbing; }
  .office-group-cards { display:flex; flex-direction:column; gap:6px; padding:4px; }
  .office-group .case-card { grid-column:auto !important; grid-row:auto !important; position:relative; padding:8px 22px 44px 10px; }
  .day-add-btns { display:flex; gap:6px; margin-top:8px; flex-shrink:0; }
  .add-btn { flex:1; padding:7px; border:1.5px dashed var(--border); background:transparent; border-radius:6px; color:var(--text-muted); font-size:13px; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.15s; }
  .add-btn:hover { background:rgba(0,0,0,0.04); border-color:#b0a090; color:var(--text); }

  /* ── CASE CARD ── */
  .case-card { border-radius:7px; padding:8px 22px 44px 12px; box-shadow:var(--shadow); cursor:pointer; position:relative; transition:transform 0.12s, box-shadow 0.12s; border:1.5px solid transparent; font-size:13px; line-height:1.4; overflow:hidden; }
  .case-content { overflow:hidden; height:calc(100% - 6px); }
  .case-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
  .case-card[draggable="true"] { cursor:grab; }
  .case-card[draggable="true"]:active { cursor:grabbing; }
  .case-card.dragging { opacity:0.4; transform:scale(0.95); }
  .cards-grid.drag-over { background:rgba(196,160,224,0.15); border-radius:8px; outline:2px dashed var(--purple-dark); outline-offset:-4px; }
  .day-body.drag-over { background:rgba(196,160,224,0.10); border-radius:0 0 10px 10px; }
  .day-col.drag-over { outline:2.5px dashed var(--purple-dark); outline-offset:-2px; }
  .day-col.holiday-col { background: repeating-linear-gradient(45deg, var(--day-bg, #ece6da), var(--day-bg, #ece6da) 8px, rgba(0,0,0,0.04) 8px, rgba(0,0,0,0.04) 16px); }
  .day-col.holiday-col .day-header { opacity: 0.75; }
  .holiday-badge { display:inline-block; margin-left:6px; padding:1px 7px; background:#d97706; color:#fff; border-radius:10px; font-size:9px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; vertical-align:middle; }
  .office-group.dragging { opacity:0.4; }
  .case-card.pink   { background:var(--pink);   border-color:var(--pink-dark); }
  .case-card.blue   { background:var(--blue);   border-color:var(--blue-dark); }
  .case-card.green  { background:var(--green);  border-color:var(--green-dark); }
  .case-card.note-card { padding-bottom:10px; }
  .case-card.note-card .case-progress { display:none; }
  .case-card.note-card .case-units-badge { display:none; }
  .case-card.note-card .note-text { font-size:13px; font-weight:500; color:rgba(0,0,0,0.7); line-height:1.4; white-space:pre-wrap; word-break:break-word; }
  .case-card.purple { background:var(--purple); border-color:var(--purple-dark); }
  .case-card.yellow { background:var(--yellow); border-color:var(--yellow-dark); }
  /* Script-print status overrides the base colour fill so the print
     Green = printed once, clean. Orange = reprinted OR flagged for a
     reprint. SCOPED to the Prescriptions tab only (#view-prescriptions)
     so the main board cards keep their case-type color (purple/pink/
     blue/etc.) for at-a-glance restoration identification. */
  #view-prescriptions .case-card.script-printed   { background:var(--green)  !important; border-color:var(--green-dark)  !important; }
  #view-prescriptions .case-card.script-reprinted { background:#f0a040       !important; border-color:#c87810           !important; }
  .case-units-badge { display:none; }
  .case-patient { font-weight:600; font-size:14px; margin-bottom:2px; padding-right:20px; white-space:normal; word-wrap:break-word; line-height:1.2; }
  .case-detail  { color:rgba(0,0,0,0.6); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .case-tag     { display:inline-block; margin-top:4px; padding:2px 7px; background:rgba(0,0,0,0.13); border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .case-delete  { position:absolute; top:5px; right:5px; background:rgba(0,0,0,0.15); border:none; border-radius:50%; width:17px; height:17px; cursor:pointer; font-size:11px; display:none; align-items:center; justify-content:center; color:rgba(0,0,0,0.6); line-height:1; }
  .case-card:hover .case-delete { display:flex; }
  .case-delete:hover { background:rgba(180,0,0,0.25); }

  /* ── URGENT PULSE ── radiating halo + corner badge for cards that
     need immediate attention (next-day nightguards not printed, next-day
     crowns/implants not designed). GPU-cheap: only animates box-shadow
     and transform, no layout/paint thrash. */
  @keyframes urgentHalo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 60, 40, 0.55), 0 0 12px 2px rgba(220, 60, 40, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(220, 60, 40, 0),    0 0 20px 6px rgba(220, 60, 40, 0.20); }
  }
  @keyframes urgentBadgeBeat {
    0%, 100% { transform: translateX(-50%) scale(1);    }
    50%      { transform: translateX(-50%) scale(1.10); }
  }
  .case-card.urgent {
    animation: urgentHalo 1.4s ease-in-out infinite;
    overflow: visible;       /* let the corner badge sit outside the card border */
    z-index: 2;
  }
  .urgent-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc3c28;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 9px 3px;
    border-radius: 11px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    animation: urgentBadgeBeat 1.4s ease-in-out infinite;
    z-index: 3;
  }
  /* Compact mode: keep the pulse working but tighten the badge so it
     doesn't dominate the smaller cards. */
  .compact .urgent-badge { font-size: 8px; padding: 1px 7px 2px; top: -7px; }

  /* ── COMPACT MODE ── */
  .compact .cards-grid { grid-auto-rows:auto !important; height:auto !important; grid-template-columns:1fr 1fr 1fr !important; }
  .compact .case-card { padding:6px 8px 26px 8px !important; min-height:0 !important; grid-row:auto !important; grid-column:auto !important; }
  .compact .case-card .case-detail,
  .compact .case-card .case-tag,
  .compact .case-card .case-units-badge { display:none; }
  .compact .case-card .case-content { height:auto; overflow:visible; }
  .compact .case-card .case-patient { font-size:13px; padding-right:18px; margin-bottom:2px; }
  .compact .case-progress { position:relative; bottom:auto; left:auto; right:auto; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; border-radius:0 0 5px 5px; }
  .compact .prog-btn { padding:2px 1px; font-size:7px; }
  .compact .case-delete { width:15px; height:15px; font-size:10px; top:3px; right:3px; }

  /* ── PROGRESS BUTTONS ── */
  .case-progress {
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 2px;
    position: absolute; bottom: 0; left: 0; right: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    overflow: hidden; border-radius: 0 0 6px 6px;
    background: rgba(0,0,0,0.1);
  }
  .prog-btn {
    display:flex; align-items:center; justify-content:center;
    padding:4px 2px; font-size:9px; font-weight:700; text-transform:uppercase;
    letter-spacing:.3px; cursor:pointer; user-select:none;
    transition:background 0.15s, color 0.15s;
    background:var(--btn-pending, #d94040); color:#fff;
    border:none;
    font-family:'DM Sans',sans-serif;
  }
  .prog-btn:hover { filter:brightness(0.88); }
  .prog-btn.done {
    background:var(--btn-done, #2ea84a); color:#fff;
  }
  .prog-btn.done:hover { filter:brightness(0.88); }

  .case-card.note-card .case-progress { display:none; }

  .empty-col { grid-column:span 2; text-align:center; padding:20px 0 10px; color:var(--text-muted); font-size:13px; }
  .empty-col span { font-size:20px; display:block; margin-bottom:4px; }

  /* ── COMPLETED VIEW ── */
  /* ── Prescriptions tab ── */
  .rx-wrapper { padding: 20px 24px 48px; overflow-y:auto; max-height:calc(100vh - 140px); }
  .rx-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; flex-wrap:wrap; }
  .rx-header-row h2 { font-size:18px; font-weight:600; flex-shrink:0; }
  .rx-actions { display:flex; gap:10px; align-items:center; flex:1; justify-content:flex-end; flex-wrap:wrap; }
  .rx-checkbox-label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); cursor:pointer; }
  .rx-list { display:flex; flex-direction:column; gap:6px; }
  .rx-empty { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:13px; background:#fff; border:1.5px dashed var(--border); border-radius:10px; }
  .rx-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#fff; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; transition:border-color 0.12s, background 0.12s, transform 0.1s; }
  .rx-row:hover { border-color:var(--purple); background:rgba(167,139,218,0.06); transform:translateY(-1px); }
  .rx-row:active { transform:translateY(0); }
  .rx-row.selected { border-color:var(--purple-dark); background:rgba(167,139,218,0.12); }
  .rx-row.selected:hover { background:rgba(167,139,218,0.18); }
  .rx-row .rx-color-band { width:5px; align-self:stretch; border-radius:3px; flex-shrink:0; }
  .rx-row .rx-check { flex-shrink:0; width:16px; height:16px; cursor:pointer; }
  .rx-row .rx-pan-tag {
    flex-shrink:0;
    font-family:'DM Mono','Consolas',monospace;
    font-size:18px; font-weight:800;
    letter-spacing:1px;
    background:var(--btn-pending, #d94040); color:#fff;
    padding:6px 10px; border-radius:6px;
    min-width:54px; text-align:center;
  }
  .rx-row .rx-pan-tag.rx-pan-tag-empty { background:#eee; color:#999; font-weight:500; }
  .rx-row .rx-info { flex:1; min-width:0; }
  .rx-row .rx-patient { font-size:14px; font-weight:600; color:var(--text); }
  .rx-row .rx-meta { font-size:12px; color:var(--text-muted); margin-top:2px; }
  .rx-row .rx-meta span { margin-right:10px; }
  .rx-row .rx-flag { display:inline-block; padding:2px 7px; font-size:10px; font-weight:700; border-radius:10px; margin-left:6px; }
  .rx-row .rx-flag.printed { background:rgba(80,160,96,0.15); color:var(--green-dark); }
  .rx-row .rx-flag.reprint { background:rgba(220,150,50,0.15); color:#a06010; }
  /* Row-level fill for prescription status, scoped here so it ONLY affects
     the Prescriptions tab. The main board keeps case-type colors. Hover
     shading kept distinct so the row is still obviously clickable. */
  .rx-row.printed   { background:var(--green);                border-color:var(--green-dark); }
  .rx-row.printed:hover { background:rgba(144,212,160,0.85);  border-color:var(--green-dark); }
  .rx-row.reprint   { background:#f0a040;                     border-color:#c87810; }
  .rx-row.reprint:hover { background:rgba(240,160,64,0.85);   border-color:#c87810; }
  .rx-row .rx-row-actions { display:flex; gap:6px; flex-shrink:0; }
  .rx-row .rx-row-actions button { padding:5px 10px; font-size:11px; font-weight:600; }

  /* Hidden print container — only visible when window.print() is invoked. */
  #rxPrintContainer { display:none; }

  .completed-wrapper { padding: 20px 24px 48px; overflow-y:auto; max-height:calc(100vh - 140px); }
  .completed-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .completed-header-row h2 { font-size: 18px; font-weight: 600; }
  .completed-search { padding: 7px 14px; border: 1.5px solid var(--border); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:13px; background:#fff; outline:none; width:260px; }
  .completed-search:focus { border-color: var(--purple-dark); }
  .filter-row { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
  .filter-row label { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; }
  .filter-row select { padding:5px 10px; border:1.5px solid var(--border); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:13px; background:#fff; outline:none; cursor:pointer; }
  .filter-row select:focus { border-color:var(--purple-dark); }
  .comp-date-btn { padding:5px 14px !important; font-size:12px !important; font-weight:600 !important; background:#fff !important; color:var(--text-muted) !important; border:1.5px solid var(--border) !important; border-right-width:0 !important; cursor:pointer; transition:all 0.12s; }
  .comp-date-btn:last-child { border-right-width:1.5px !important; }
  .comp-date-btn:hover { background:var(--bg2) !important; color:var(--text) !important; }
  .comp-date-btn.active { background:var(--purple) !important; color:var(--text) !important; border-color:var(--purple-dark) !important; }
  .completed-table { width:100%; border-collapse:collapse; font-size:13px; }
  .completed-table th { text-align:left; padding:9px 14px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--border); background:var(--bg2); cursor:pointer; user-select:none; white-space:nowrap; }
  .completed-table th:hover { color:var(--text); }
  .completed-table td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
  .completed-table tr:last-child td { border-bottom:none; }
  .completed-table tr:hover td { background:var(--bg2); }
  .completed-table tbody tr { transition:background 0.1s; }
  .color-pip { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:middle; flex-shrink:0; }
  .shipped-date-cell { display:flex; align-items:center; gap:8px; }
  .shipped-input { padding:4px 8px; border:1.5px solid var(--border); border-radius:5px; font-family:'DM Mono',monospace; font-size:12px; background:#fff; outline:none; cursor:pointer; }
  .shipped-input:focus { border-color:var(--purple-dark); }
  .shipped-input.has-date { border-color:var(--green-dark); color:var(--green-dark); font-weight:600; }
  .tracking-input { padding:4px 8px; border:1.5px solid var(--border); border-radius:5px; font-family:'DM Mono',monospace; font-size:12px; background:#fff; outline:none; width:140px; }
  .tracking-input:focus { border-color:var(--purple-dark); }
  .tracking-input.has-tracking { border-color:var(--blue-dark); color:var(--blue-dark); font-weight:600; }
  .track-link { font-size:18px; text-decoration:none; cursor:pointer; transition:transform 0.1s; display:inline-block; }
  .track-link:hover { transform:scale(1.2); }
  .restore-btn { background:none; border:1px solid var(--border); border-radius:5px; padding:3px 10px; font-size:11px; font-weight:600; color:var(--text-muted); cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.15s; white-space:nowrap; }
  .restore-btn:hover { background:var(--yellow); border-color:var(--yellow-dark); color:var(--text); }
  .del-completed-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:2px 6px; border-radius:4px; }
  .del-completed-btn:hover { background:#fee; color:#c00; }
  .empty-completed { text-align:center; padding:60px 0; color:var(--text-muted); font-size:15px; }
  .empty-completed span { font-size:32px; display:block; margin-bottom:10px; }
  .prog-pills { display:flex; gap:4px; flex-wrap:wrap; }
  .prog-pill { font-size:10px; font-weight:700; padding:2px 6px; border-radius:20px; background:rgba(0,0,0,0.08); color:rgba(0,0,0,0.5); }
  .prog-pill.done { background:rgba(80,160,96,0.2); color:var(--green-dark); }

  /* ── CALENDAR VIEW ── */
  .cal-wrapper { padding:14px 24px 48px; }
  .cal-nav { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
  .cal-nav h2 { font-size:20px; font-weight:700; min-width:200px; text-align:center; color:var(--text); letter-spacing:-0.3px; }
  .cal-nav button { background:#fff; border:1.5px solid #d0d5dd; border-radius:8px; padding:7px 20px; cursor:pointer; font-size:14px; color:var(--text); font-family:'DM Sans',sans-serif; font-weight:500; transition:all 0.15s; box-shadow:0 1px 2px rgba(0,0,0,0.05); }
  .cal-nav button:hover { background:#f0fafa; border-color:#4ecdc4; color:#2ba8a0; }
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:#d0d5dd; border:1px solid #d0d5dd; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
  .cal-head { background:#3ab8b0; color:#fff; padding:11px 8px; font-size:12px; font-weight:700; text-transform:uppercase; text-align:center; letter-spacing:.6px; }
  .cal-day { background:#fff; min-height:120px; padding:8px; display:flex; flex-direction:column; transition:background 0.15s; }
  .cal-day:hover { background:#f7fffe; }
  .cal-day.other-month { background:#f5f6f8; opacity:0.5; }
  .cal-day.today { outline:2.5px solid #3ab8b0; outline-offset:-2px; z-index:1; background:#f0fdfb; }
  .cal-day.weekend { background:#f9fafb; }
  .cal-day-num { font-size:14px; font-weight:700; margin-bottom:6px; font-family:'DM Mono',monospace; color:#6b7280; }
  .cal-day.today .cal-day-num { color:#2ba8a0; font-weight:800; }
  .cal-pip { font-size:11px; line-height:1.4; padding:3px 6px; border-radius:4px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; font-weight:500; }
  .cal-pip:hover { filter:brightness(0.92); }
  .cal-pip.pink   { background:var(--pink); }
  .cal-pip.blue   { background:var(--blue); }
  .cal-pip.green  { background:var(--green); }
  .cal-pip.purple { background:var(--purple); }
  .cal-pip.yellow { background:var(--yellow); }
  .cal-more { font-size:10px; color:#3ab8b0; font-weight:700; cursor:pointer; padding:1px 5px; }
  .cal-more:hover { color:#2a9990; }
  .cal-day-units { font-size:11px; color:#6b7280; font-family:'DM Mono',monospace; margin-top:auto; padding-top:4px; border-top:1px solid rgba(0,0,0,0.06); font-weight:600; }

  /* ── DOCTORS VIEW ── */
  .doc-wrapper { padding:14px 24px 48px; }
  .doc-group { margin-bottom:20px; background:#fff; border-radius:10px; border:1px solid var(--border); overflow:hidden; }
  .doc-group-header { padding:12px 16px; background:var(--bg2); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
  .doc-group-header:hover { background:#e4ddd0; }
  .doc-group-header h3 { font-size:15px; font-weight:600; }
  .doc-group-stats { display:flex; gap:10px; }
  .doc-group-stat { font-size:13px; font-weight:600; color:var(--text-muted); font-family:'DM Mono',monospace; background:rgba(0,0,0,0.06); padding:2px 10px; border-radius:10px; }
  .doc-case-list { padding:8px; }
  .doc-case-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:6px; font-size:13px; transition:background 0.1s; cursor:pointer; }
  .doc-case-row:hover { background:var(--bg); }
  .doc-case-color { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
  .doc-case-patient { font-weight:600; min-width:160px; }
  .doc-case-restoration { color:var(--text-muted); flex:1; }
  .doc-case-date { font-family:'DM Mono',monospace; font-size:12px; color:var(--text-muted); }
  .doc-case-units { font-family:'DM Mono',monospace; font-size:11px; background:rgba(0,0,0,0.08); padding:1px 6px; border-radius:8px; }

  /* ── ACTIVITY LOG ── */
  .log-entries { max-height:180px; overflow-y:auto; margin-bottom:8px; border:1px solid #eee; border-radius:7px; }
  .log-entry { padding:7px 10px; border-bottom:1px solid #f0f0f0; font-size:12px; display:flex; gap:8px; align-items:flex-start; }
  .log-entry:last-child { border-bottom:none; }
  .log-time { font-family:'DM Mono',monospace; font-size:10px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; padding-top:1px; }
  .log-text { flex:1; line-height:1.4; }
  .log-del { background:none; border:none; color:#ccc; cursor:pointer; font-size:13px; padding:0 4px; flex-shrink:0; }
  .log-del:hover { color:#c00; }
  .log-empty { padding:14px; text-align:center; color:var(--text-muted); font-size:12px; }
  .log-add-row { display:flex; gap:8px; }
  .log-add-row input { flex:1; padding:7px 10px; border:1.5px solid #ddd; border-radius:7px; font-family:'DM Sans',sans-serif; font-size:13px; outline:none; }
  .log-add-row input:focus { border-color:var(--purple-dark); }

  /* ── PHOTOS ── */
  .photo-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .photo-thumb { position:relative; width:80px; height:80px; border-radius:7px; overflow:hidden; border:1.5px solid #ddd; cursor:pointer; }
  .photo-thumb img { width:100%; height:100%; object-fit:cover; }
  .photo-thumb .photo-del { position:absolute; top:2px; right:2px; background:rgba(0,0,0,0.5); color:#fff; border:none; border-radius:50%; width:18px; height:18px; font-size:11px; cursor:pointer; display:none; align-items:center; justify-content:center; line-height:1; }
  .photo-thumb:hover .photo-del { display:flex; }
  .photo-upload-btn { display:inline-block; padding:7px 14px; border:1.5px dashed var(--border); border-radius:7px; color:var(--text-muted); font-size:13px; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.15s; }
  .photo-upload-btn:hover { background:rgba(0,0,0,0.04); border-color:#b0a090; color:var(--text); }
  .lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:300; align-items:center; justify-content:center; cursor:pointer; }
  .lightbox.active { display:flex; }
  .lightbox img { max-width:90vw; max-height:90vh; border-radius:8px; box-shadow:0 4px 30px rgba(0,0,0,0.4); }

  /* ── WORKLOAD CHART ── */
  .wl-wrapper { padding:14px 24px 48px; }
  .wl-chart-container { background:#fff; border-radius:10px; border:1px solid var(--border); padding:20px; margin-bottom:20px; }
  .wl-chart { display:flex; align-items:flex-end; gap:4px; height:260px; }
  .wl-bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
  /* The bar lives in its own flex track so its height:% is measured against the
     space left AFTER the value + axis labels — not the full group height.
     Without this, a tall bar gets flex-shrunk down to a constant (group height
     minus labels), so every large value renders at the SAME height. */
  .wl-bar-track { flex:1 1 0; min-height:0; width:100%; display:flex; align-items:flex-end; justify-content:center; }
  .wl-bar-val, .wl-bar-label, .wl-bar-date { flex:0 0 auto; }
  .wl-bar { width:100%; max-width:48px; border-radius:5px 5px 0 0; transition:height 0.3s; position:relative; min-height:2px; }
  .wl-bar.mixed { background:linear-gradient(to top, var(--purple) 0%, var(--pink) 50%, var(--blue) 100%); }
  .wl-bar-val { font-size:11px; font-weight:700; font-family:'DM Mono',monospace; color:var(--text); text-align:center; }
  .wl-bar-label { font-size:10px; color:var(--text-muted); text-align:center; font-weight:600; margin-top:4px; white-space:nowrap; }
  .wl-bar-date { font-size:9px; color:var(--text-muted); font-family:'DM Mono',monospace; text-align:center; }
  .wl-summary { display:flex; gap:16px; flex-wrap:wrap; }
  .wl-stat-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px 20px; flex:1; min-width:160px; }
  .wl-stat-val { font-size:28px; font-weight:600; font-family:'DM Mono',monospace; }
  .wl-stat-label { font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

  /* ── ESTIMATES ── */
  .est-status { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
  .est-status-draft { background:rgba(240,216,144,0.3); color:var(--yellow-dark); }
  .est-status-sent { background:rgba(80,160,96,0.15); color:var(--green-dark); }
  .est-line-item {
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    background:var(--bg); border-radius:6px; margin-bottom:4px; font-size:13px;
  }
  .est-line-item-name { flex:1; font-weight:600; }
  .est-line-item-qty { font-family:'DM Mono',monospace; color:var(--text-muted); }
  .est-line-item-price { font-family:'DM Mono',monospace; font-weight:600; min-width:70px; text-align:right; }
  .est-line-item-del { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:15px; padding:0 4px; }
  .est-line-item-del:hover { color:#c00; }

  /* ── MSN MESSENGER PANEL ── */
  .msn-panel {
    position:fixed; top:46px; right:0; bottom:0; width:280px;
    background:#ffffff; border-left:2px solid var(--border);
    display:flex; flex-direction:column; z-index:90;
    font-size:14px; transition:width 0.2s;
  }
  .msn-panel.minimized { width:32px; overflow:hidden; cursor:pointer; }
  .msn-panel.minimized .msn-body,
  .msn-panel.minimized .msn-header-content,
  .msn-panel.minimized .msn-scan-btn { display:none; }
  .msn-panel.minimized .msn-minimize-label { display:block; }
  .msn-panel.portal-mode .msn-section:nth-child(3),
  .msn-panel.portal-mode .msn-section:nth-child(4) { display:none; }
  .msn-panel.portal-mode .msn-minimize { display:none; }
  .msn-panel.portal-mode.minimized { width:280px; }
  .msn-panel.portal-mode.minimized .msn-body,
  .msn-panel.portal-mode.minimized .msn-header-content { display:flex; }
  .msn-panel.portal-mode.minimized .msn-minimize-label { display:none; }
  .msn-panel.portal-mode { font-size:16px; }
  .msn-panel.portal-mode .msn-header { font-size:15px; }
  .msn-panel.portal-mode .msn-section-header { font-size:13px; }
  .msn-panel.portal-mode .msn-section-badge { font-size:13px; }
  .msn-panel.portal-mode .msn-contact { font-size:15px; }
  .msn-panel.portal-mode .msn-email-subject { font-size:14px; }
  .msn-panel.portal-mode .msn-email-from { font-size:13px; }
  .msn-minimize-label {
    display:none; writing-mode:vertical-rl; text-orientation:mixed;
    color:#a09080; font-size:13px; font-weight:700; letter-spacing:1px;
    padding:12px 0; text-align:center; white-space:nowrap;
  }
  .msn-header {
    background:var(--text); color:#f5f0e8; padding:8px 12px;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0; font-size:13px; font-weight:700;
  }
  .msn-header-content { display:flex; align-items:center; gap:6px; }
  .msn-minimize { background:none; border:none; color:#a09080; cursor:pointer; font-size:16px; padding:2px 4px; border-radius:3px; flex-shrink:0; z-index:10; }
  .msn-minimize:hover { color:#f5f0e8; background:rgba(255,255,255,0.1); }
  .msn-body { flex:1; overflow-y:auto; }
  .msn-section { border-bottom:1px solid var(--border); }
  .msn-section-header {
    padding:6px 12px; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; color:var(--text-muted); background:rgba(0,0,0,0.03);
    cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    user-select:none;
  }
  .msn-section-header:hover { background:rgba(0,0,0,0.06); }
  .msn-section-badge {
    background:var(--purple); color:var(--text); border-radius:10px;
    font-size:11px; font-weight:700; padding:0 6px; min-width:16px; text-align:center;
  }
  .msn-section-body { padding:2px 0; }
  .msn-section-body.collapsed { display:none; }
  .msn-contact {
    padding:4px 12px; display:flex; align-items:center; gap:8px;
    cursor:pointer; transition:background 0.1s; font-size:13px;
  }
  .msn-contact:hover { background:rgba(0,0,0,0.05); }
  .msn-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .msn-dot.online { background:#2ea84a; }
  .msn-dot.offline { background:#bbb; }
  .msn-contact-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
  .msn-contact-sub { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msn-email-item {
    padding:5px 12px; cursor:pointer; transition:background 0.1s;
    border-bottom:1px solid rgba(0,0,0,0.04); position:relative;
  }
  .msn-email-item:hover { background:rgba(0,0,0,0.05); }
  .msn-email-item.unread { background:rgba(144,100,224,0.06); }
  .msn-email-subject { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msn-email-subject.msg-pulse {
    animation:msnNamePulse 1.2s ease-in-out infinite;
  }
  @keyframes msnNamePulse {
    0%,100% { color:#000; }
    50% { color:#2ea84a; text-shadow:0 0 6px rgba(46,168,74,0.4); }
  }
  .msn-email-from { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msn-msg-del { position:absolute; top:4px; right:6px; background:none; border:none; font-size:13px; color:var(--text-muted); cursor:pointer; padding:2px 4px; border-radius:3px; display:none; }
  .msn-email-item:hover .msn-msg-del { display:block; }
  .msn-msg-del:hover { background:#fee; color:#c00; }
  .msn-list-item {
    padding:4px 12px; display:flex; align-items:center; gap:6px;
    font-size:12px;
  }
  .msn-list-check { width:13px; height:13px; border-radius:2px; border:1.5px solid var(--border); background:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; cursor:pointer; }
  .msn-list-check.done { background:var(--green-dark); border-color:var(--green-dark); color:#fff; }
  .msn-list-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
  body { padding-right:280px; }
  body.msn-minimized { padding-right:32px; }

  /* ── PRINT ── */
  @media print {
    .msn-panel { display:none !important; }
    body { padding-right:0 !important; }
    header, .tabs-bar, .legend, .nav-row, .add-btn, .case-delete, .modal-overlay,
    .case-progress, .case-units-badge, .mill-queue { display:none !important; }
    body { background:#fff !important; }
    .view { display:none !important; }
    .view.print-active { display:block !important; }
    .board-wrapper { padding:0 !important; }
    .week-grid { gap:4px !important; }
    .day-col { border:1px solid #ccc !important; background:#fff !important; break-inside:avoid; }
    .day-header { background:#eee !important; padding:6px 8px !important; }
    .day-name { font-size:14px !important; color:#2a2520 !important; }
    .day-stats .day-stat { font-size:11px !important; }
    .case-card { box-shadow:none !important; border:1px solid #ccc !important; padding:6px 8px 6px 8px !important; font-size:11px !important; }
    .case-patient { font-size:12px !important; }
    .case-detail { font-size:10px !important; }
    .case-tag { font-size:9px !important; }
    .cards-grid { height:auto !important; }
    .week-block { break-inside:avoid; margin-bottom:8px !important; }
    /* Print report uses popup window */
    @page { margin:0.4in; size:landscape; }
  }

  /* Prescription print mode — activated by adding body.printing-rx before
     window.print(). Hides everything except the prescription container, sets
     landscape letter @page with no margin (the cards manage their own padding),
     and renders each script as a landscape page with two portrait halves. */
  @media print {
    body.printing-rx > *:not(#rxPrintContainer) { display:none !important; }
    body.printing-rx #rxPrintContainer { display:block !important; }
  }
  body.printing-rx { padding:0 !important; margin:0 !important; }
  body.printing-rx .rx-page {
    width:11in; height:8.5in;
    display:flex;
    page-break-after:always;
    page-break-inside:avoid;
    break-inside:avoid;
    overflow:hidden;
    box-sizing:border-box;
    background:#fff;
    color:#000;
  }
  body.printing-rx .rx-page:last-child {
    page-break-after:auto;
    break-after:auto;
  }
  body.printing-rx .rx-half {
    width:5.5in; height:8.5in;
    box-sizing:border-box;
    padding:0.4in;
    overflow:hidden;
    font-family:'DM Sans','Segoe UI',sans-serif;
    color:#1a1a1a;
  }
  body.printing-rx .rx-half-back {
    border-right:1px dashed #bbb; /* fold guide */
  }
  body.printing-rx .rx-script-header {
    border-bottom:2px solid #333;
    padding-bottom:10px;
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:12px;
  }
  body.printing-rx .rx-script-header .rx-header-patient {
    font-size:22px; font-weight:700; letter-spacing:0.3px;
    line-height:1.1;
    flex:1; min-width:0;
    word-wrap:break-word;
  }
  body.printing-rx .rx-script-header .rx-header-due {
    text-align:right;
    flex-shrink:0;
  }
  body.printing-rx .rx-script-header .rx-header-due .due-label {
    display:block;
    font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.7px;
    color:#777; margin-bottom:2px;
  }
  body.printing-rx .rx-script-header .rx-header-due .due-date {
    font-size:24px; font-weight:800;
    color:#1a1a1a;
    line-height:1.05;
    white-space:nowrap;
  }
  body.printing-rx .rx-script-section {
    margin-bottom:12px;
  }
  body.printing-rx .rx-script-label {
    display:block;
    font-size:9px; font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.7px;
    color:#777;
    margin-bottom:3px;
  }
  body.printing-rx .rx-script-value {
    font-size:14px;
    font-weight:500;
    line-height:1.4;
  }
  body.printing-rx .rx-script-row {
    display:flex;
    gap:14px;
    margin-bottom:12px;
  }
  body.printing-rx .rx-script-row .rx-script-section {
    flex:1; margin-bottom:0;
  }
  body.printing-rx .rx-script-notes {
    font-size:20px;
    line-height:1.4;
    white-space:pre-wrap;
    word-wrap:break-word;
    background:#f8f5ee;
    padding:10px 12px;
    border-left:3px solid #999;
    border-radius:0 4px 4px 0;
  }
  body.printing-rx .rx-script-color-band {
    height:6px;
    margin:-0.4in -0.4in 14px -0.4in;
  }
  /* Office abbreviation tag — sits in the left column of the pan-block
     row so it doesn't overlap the centered tray number. Colored to
     match the board group so techs can sort scripts by office visually. */
  body.printing-rx .rx-office-tag {
    color:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:48px;      /* ~50% of the 96px tray number */
    font-weight:900;
    letter-spacing:3px;
    padding:8px 16px;
    border-radius:8px;
    line-height:1;
    justify-self:start;
    align-self:center;
  }
  /* Tray number — biggest, boldest text on the sheet. Sits in the
     center column of a 3-column grid so it stays centered on the page
     regardless of whether the office tag is rendered. */
  body.printing-rx .rx-pan-block {
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    margin:0 0 16px 0;
    padding:0 0 6px 0;
    border-bottom:1px solid #ccc;
  }
  body.printing-rx .rx-pan-number {
    grid-column:2;
    font-family:'DM Mono','Consolas',monospace;
    font-size:96px; font-weight:900;
    line-height:1;
    letter-spacing:6px;
    color:#000;
    text-align:center;
  }
  body.printing-rx .rx-script-footer {
    position:absolute;
    bottom:0.4in;
    left:0.4in;
    right:0.4in;
    border-top:1px solid #ccc;
    padding-top:6px;
    font-size:9px;
    color:#888;
    display:flex;
    justify-content:space-between;
  }
  /* QR code in the bottom-right corner — scannable URL to the case modal.
     Sized to ~0.7" square so phone cameras pick it up reliably even from
     a stack-of-trays distance. Sits above the footer line, anchored to
     the bottom-right of the script half. */
  body.printing-rx .rx-qr {
    position:absolute;
    bottom:0.55in;
    right:0.4in;
    width:0.7in;
    height:0.7in;
    line-height:0;
  }
  body.printing-rx .rx-qr img,
  body.printing-rx .rx-qr svg { width:100%; height:100%; display:block; }
  body.printing-rx .rx-qr-caption {
    position:absolute;
    bottom:0.45in;
    right:0.4in;
    width:0.7in;
    text-align:center;
    font-size:7px;
    color:#888;
    font-family:'DM Sans',sans-serif;
    letter-spacing:0.5px;
  }
  body.printing-rx .rx-half-front { position:relative; }
  /* Photos back: simple grid that auto-flows */
  body.printing-rx .rx-photos-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:6px;
    width:100%;
    height:100%;
  }
  body.printing-rx .rx-photos-grid.count-1 { grid-template-columns:1fr; grid-template-rows:1fr; }
  body.printing-rx .rx-photos-grid.count-2 { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  body.printing-rx .rx-photos-grid.count-3 { grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, 1fr); }
  body.printing-rx .rx-photos-grid.count-4 { grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, 1fr); }
  body.printing-rx .rx-photos-grid.count-many { grid-template-columns:repeat(3, 1fr); }
  body.printing-rx .rx-photos-grid img {
    width:100%; height:100%;
    object-fit:cover;
    border:1px solid #ddd;
    border-radius:3px;
    background:#f0f0f0;
  }
  body.printing-rx .rx-photos-grid.count-3 img:first-child { grid-column:span 2; }

  /* ── SIDEBAR ── */
  .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:150; }
  .sidebar-overlay.active { display:block; }
  .sidebar {
    position:fixed; top:0; right:-380px; width:370px; height:100vh;
    background:#fff; z-index:160; box-shadow:-4px 0 20px rgba(0,0,0,0.15);
    transition:right 0.25s ease; display:flex; flex-direction:column;
  }
  .sidebar.active { right:0; }
  .sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); background:var(--bg2); flex-shrink:0; }
  .sidebar-header h2 { font-size:16px; font-weight:700; }
  .sidebar-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); padding:4px 8px; border-radius:6px; }
  .sidebar-close:hover { background:rgba(0,0,0,0.08); color:var(--text); }
  .sidebar-body { flex:1; overflow-y:auto; padding:12px; }
  .sb-section { margin-bottom:16px; }
  .sb-section-header { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; background:var(--bg2); border-radius:8px; border-left:4px solid var(--border); margin-bottom:6px; }
  .sb-section-header h3 { font-size:13px; font-weight:700; }
  .sb-count { background:rgba(0,0,0,0.1); border-radius:20px; font-size:10px; font-weight:700; padding:2px 7px; }
  .sb-item { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; font-size:13px; transition:all 0.2s; cursor:pointer; }
  .sb-item:hover { background:var(--bg); }
  .sb-item-check { width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border); background:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; }
  .sb-item-check:hover { border-color:var(--green-dark); }
  .sb-item-text { flex:1; line-height:1.3; }
  .sb-item-del { background:none; border:none; color:#ccc; cursor:pointer; font-size:14px; padding:0 4px; flex-shrink:0; opacity:0; transition:opacity 0.15s; }
  .sb-item:hover .sb-item-del { opacity:1; }
  .sb-item-del:hover { color:#c00; }
  .sb-item.checking { opacity:0; transform:translateX(20px); transition:all 0.3s; }
  .sb-add-row { display:flex; gap:6px; margin-top:6px; }
  .sb-add-row input { flex:1; padding:6px 10px; border:1.5px solid var(--border); border-radius:6px; font-family:'DM Sans',sans-serif; font-size:12px; outline:none; }
  .sb-add-row input:focus { border-color:var(--purple-dark); }
  .sb-add-row button { background:var(--bg2); border:1.5px solid var(--border); border-radius:6px; padding:4px 10px; font-size:14px; font-weight:700; cursor:pointer; color:var(--text-muted); transition:all 0.15s; }
  .sb-add-row button:hover { background:var(--purple); border-color:var(--purple-dark); color:#fff; }
  .sb-shade-note { font-size:10px; color:var(--text-muted); padding:6px 8px; font-style:italic; }
  .sb-shade-tag { display:inline-block; font-size:10px; color:var(--text-muted); background:var(--bg2); padding:1px 6px; border-radius:10px; margin-left:6px; }

  /* ── INBOX PANEL ── */
  .inbox-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:170; }
  .inbox-overlay.active { display:block; }

  /* Messages panel */
  .msg-panel-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:170; }
  .msg-panel-overlay.active { display:block; }
  .msg-panel {
    position:fixed; top:0; right:-480px; width:470px; height:100vh;
    background:#fff; z-index:180; box-shadow:-4px 0 24px rgba(0,0,0,0.18);
    transition:right 0.25s ease; display:flex; flex-direction:column;
  }
  .msg-panel.active { right:0; }
  .msg-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1.5px solid var(--border);
    background:var(--bg2); flex-shrink:0;
  }
  .msg-panel-header h2 { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
  .msg-panel-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-muted); padding:4px 8px; border-radius:6px; }
  .msg-panel-close:hover { background:rgba(0,0,0,0.08); color:var(--text); }
  .msg-panel-body { flex:1; overflow-y:auto; padding:0; }

  .msg-thread-item {
    padding:14px 18px; border-bottom:1px solid var(--border); cursor:pointer;
    transition:background 0.12s; display:flex; gap:12px; align-items:flex-start;
  }
  .msg-thread-item:hover { background:var(--bg2); }
  .msg-thread-item.has-unread { background:rgba(196,160,224,0.08); }
  .msg-thread-pip { width:12px; height:12px; border-radius:3px; flex-shrink:0; margin-top:3px; }
  .msg-thread-info { flex:1; min-width:0; }
  .msg-thread-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .msg-thread-patient { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msg-thread-time { font-size:11px; color:var(--text-muted); font-family:'DM Mono',monospace; white-space:nowrap; flex-shrink:0; }
  .msg-thread-doctor { font-size:12px; color:var(--text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msg-thread-preview { font-size:13px; color:var(--text-muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msg-thread-unread-badge {
    background:var(--purple-dark); color:#fff; border-radius:20px;
    font-size:10px; font-weight:700; padding:2px 7px; min-width:20px;
    text-align:center; flex-shrink:0;
  }

  /* Thread detail in messages panel */
  .msg-panel-detail { display:flex; flex-direction:column; height:100%; }
  .msg-panel-detail-header {
    padding:12px 18px; border-bottom:1px solid var(--border); background:var(--bg2);
    display:flex; align-items:center; gap:10px; flex-shrink:0;
  }
  .msg-panel-back { background:none; border:none; font-size:14px; cursor:pointer; color:var(--text-muted); padding:4px 8px; border-radius:6px; font-family:'DM Sans',sans-serif; }
  .msg-panel-back:hover { background:rgba(0,0,0,0.06); color:var(--text); }
  .msg-panel-case-info { flex:1; min-width:0; }
  .msg-panel-case-name { font-weight:600; font-size:14px; }
  .msg-panel-case-detail { font-size:11px; color:var(--text-muted); }
  .msg-panel-chat { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:8px; }
  .msg-panel-chat .chat-msg-row { display:flex; gap:8px; max-width:85%; }
  .msg-panel-chat .chat-msg-row.sent { align-self:flex-end; flex-direction:row-reverse; }
  .msg-panel-chat .chat-msg-row.received { align-self:flex-start; }
  .msg-panel-chat .chat-bubble {
    padding:8px 12px; border-radius:12px; font-size:13px; line-height:1.4;
    max-width:100%; word-wrap:break-word;
  }
  .msg-panel-chat .chat-bubble.sent { background:var(--purple); color:var(--text); border-bottom-right-radius:4px; }
  .msg-panel-chat .chat-bubble.received { background:#f0ece6; color:var(--text); border-bottom-left-radius:4px; }
  .msg-panel-chat .chat-bubble img { max-width:200px; border-radius:6px; cursor:pointer; }
  .msg-panel-chat .chat-time { font-size:10px; color:var(--text-muted); align-self:flex-end; flex-shrink:0; }
  .msg-panel-compose {
    padding:12px 18px; border-top:1.5px solid var(--border); display:flex; gap:8px;
    flex-shrink:0; background:#fff;
  }
  .msg-panel-compose input {
    flex:1; padding:8px 12px; border:1.5px solid var(--border); border-radius:8px;
    font-family:'DM Sans',sans-serif; font-size:13px; outline:none;
  }
  .msg-panel-compose input:focus { border-color:var(--purple-dark); }
  .msg-panel-compose button {
    padding:8px 16px; border:none; border-radius:8px; font-family:'DM Sans',sans-serif;
    font-size:13px; font-weight:600; cursor:pointer; transition:all 0.12s;
  }
  .msg-panel-send { background:var(--purple-dark); color:#fff; }
  .msg-panel-send:hover { background:#7848a8; }
  .msg-panel-empty { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:14px; }
  .msg-panel-empty span { font-size:32px; display:block; margin-bottom:10px; }

  /* Card status badges (messages, emails, photos). All three live in a
     vertical stack pinned to the top-right of the card, just left of the
     pan number column. Each persists as long as the case has at least one
     of the relevant items. Message + email badges pulse when there's
     something unread/unreplied; .quiet kills the pulse but keeps the dot. */
  .case-badge-stack {
    position:absolute;
    top:4px;
    right:28px;            /* clears the pan-number column */
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
    z-index:2;
    pointer-events:none;   /* re-enabled per-badge below */
  }
  .case-badge-stack > * { pointer-events:auto; }
  /* When no pan number exists, slide the stack flush to the right edge. */
  .case-card:not(.has-pan) .case-badge-stack { right:4px; }

  .case-msg-badge {
    background:var(--purple-dark); color:#fff;
    border-radius:50%; width:18px; height:18px;
    font-size:9px; font-weight:700; display:flex;
    align-items:center; justify-content:center;
    cursor:pointer;
    animation:msgBadgePulse 2s ease infinite;
  }
  .case-msg-badge.quiet {
    animation:none;
    opacity:0.55;
    background:#a094c4;
  }
  @keyframes msgBadgePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(144,96,192,0.4); }
    50% { box-shadow:0 0 0 6px rgba(144,96,192,0); }
  }
  /* Pan number tag — small badge at the top-right of every card, monospace
     digits stacked one per line. Same dark-brown / cream palette as the
     hover-notes tooltip so the visual language stays consistent. Box wraps
     tight around the digits, doesn't run the full card height. */
  .case-pan-vertical {
    position:absolute; top:4px; right:4px;
    background:var(--btn-pending, #d94040); color:#fff;
    font-family:'DM Mono','Consolas',monospace;
    font-size:13px; font-weight:800;
    line-height:1;
    display:flex; flex-direction:column;
    align-items:center;
    padding:4px 5px;
    border-radius:4px;
    letter-spacing:0;
    gap:2px;
    pointer-events:none;
    z-index:2;
  }
  .case-pan-vertical span { display:block; }

  /* Classical A-D shade button — standalone, positioned bottom-right of
     the card, just above the progress button row (bottom offset is set
     inline since the progress row height depends on cardButtons count).
     Clickable: fires window.toggleShadeFilter which dims all non-matching
     cards via the search-dim class. Independent of the pan tag so the
     pan box stays tight. */
  .case-shade-btn {
    position:absolute; right:6px;
    /* bottom is set inline per card so the shade sits just above the
       progress button row regardless of progress button count. */
    background:#fff; color:var(--btn-pending, #d94040);
    border:1.5px solid var(--btn-pending, #d94040); border-radius:4px;
    font-family:'DM Mono','Consolas',monospace;
    font-size:11px; font-weight:800;
    padding:1px 6px; cursor:pointer;
    text-align:center; letter-spacing:0;
    z-index:2;
    transition:background 0.1s, color 0.1s;
  }
  .case-shade-btn:hover { background:#f6e6e6; }
  .case-shade-btn.active { background:var(--text); color:#fff; border-color:var(--text); }

  .case-email-badge {
    background:var(--blue-dark); color:#fff;
    border-radius:50%; width:18px; height:18px;
    font-size:9px; font-weight:700; display:flex;
    align-items:center; justify-content:center;
    cursor:pointer;
    animation:emailBadgePulse 2.4s ease infinite;
  }
  .case-email-badge.quiet {
    animation:none;
    opacity:0.55;
    background:#a0c0d8;
  }
  @keyframes emailBadgePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(80,144,192,0.4); }
    50% { box-shadow:0 0 0 6px rgba(80,144,192,0); }
  }

  /* Photo badge — pink dot, no pulse (photos aren't urgent like unread msgs). */
  .case-photo-badge {
    background:var(--pink-dark, #b85d7a); color:#fff;
    border-radius:50%; width:18px; height:18px;
    font-size:9px; font-weight:700; display:flex;
    align-items:center; justify-content:center;
    cursor:pointer;
    opacity:0.85;
  }

  /* Hover tooltip showing the full notes for a case card. Only appears after
     a brief delay so casual mouse-throughs don't trigger it. Single shared
     element repositioned on each hover (vs one tooltip per card).
     Sizing: width grows to content up to ~540px (or 92vw on small screens).
     No max-height — height grows to fit ALL notes without internal scrolling.
     The positioning JS will pick the best top/left to keep it on-screen. */
  .card-notes-tooltip {
    position:fixed; z-index:1000;
    background:#ffffff; color:#000000;
    padding:10px 14px; border-radius:8px;
    width:max-content;
    max-width:min(325px, 92vw);
    font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.5;
    white-space:pre-wrap; word-wrap:break-word;
    border:1px solid var(--border);
    box-shadow:0 6px 20px rgba(0,0,0,0.18);
    opacity:0; transform:translateY(4px);
    transition:opacity 0.15s ease, transform 0.15s ease;
    pointer-events:none;
    display:none;
  }
  .card-notes-tooltip.active {
    display:block;
    opacity:1;
    transform:translateY(0);
  }
  .card-notes-tooltip .tip-label {
    display:block;
    font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.6px;
    color:var(--text-muted);
    margin-bottom:4px;
  }
  .case-new-msg {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:#2ea84a; color:#fff; font-size:13px; font-weight:700;
    padding:6px 16px; border-radius:20px; z-index:3;
    text-transform:uppercase; letter-spacing:.5px;
    animation:newMsgPulse 1.5s ease-in-out infinite;
    pointer-events:auto; white-space:nowrap; cursor:pointer;
    box-shadow:0 2px 12px rgba(46,168,74,0.4);
  }
  @keyframes newMsgPulse {
    0%,100% { opacity:1; transform:translate(-50%,-50%) scale(1); box-shadow:0 2px 12px rgba(46,168,74,0.4); }
    50% { opacity:0.85; transform:translate(-50%,-50%) scale(1.08); box-shadow:0 4px 20px rgba(46,168,74,0.6); }
  }

  /* MSN-style message popup */
  .msn-popup-container {
    position:fixed; bottom:8px; right:288px; z-index:200;
    display:flex; flex-direction:column-reverse; gap:8px; pointer-events:none;
  }
  body.msn-minimized .msn-popup-container { right:40px; }
  .msn-popup {
    width:260px; background:#fff; border:2px solid var(--purple);
    border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.2);
    padding:12px 14px; pointer-events:auto; cursor:pointer;
    animation:msnPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition:opacity 0.3s, transform 0.3s;
  }
  .msn-popup.fading { opacity:0; transform:translateY(10px); }
  @keyframes msnPopIn {
    0% { opacity:0; transform:translateY(60px) scale(0.9); }
    60% { transform:translateY(-4px) scale(1.02); }
    100% { opacity:1; transform:translateY(0) scale(1); }
  }
  .msn-popup-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .msn-popup-icon { font-size:20px; }
  .msn-popup-title { font-size:13px; font-weight:700; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msn-popup-close { background:none; border:none; font-size:16px; color:var(--text-muted); cursor:pointer; padding:0 2px; border-radius:3px; }
  .msn-popup-close:hover { color:#c00; }
  .msn-popup-body { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msn-popup-time { font-size:10px; color:var(--text-muted); font-family:'DM Mono',monospace; margin-top:4px; }
  @media print { .msn-popup-container { display:none !important; } }

  /* ── MSN CHAT WINDOWS ── */
  .msn-chat {
    position:fixed; width:300px; height:400px;
    background:#fff; border:2px solid var(--purple-dark);
    border-radius:10px; box-shadow:0 6px 28px rgba(0,0,0,0.22);
    display:flex; flex-direction:column; z-index:190;
    overflow:hidden; resize:both; min-width:260px; min-height:300px;
    animation:msnChatIn 0.25s ease;
  }
  @keyframes msnChatIn { from{opacity:0;transform:scale(0.9) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
  .msn-chat-header {
    background:var(--text); color:#f5f0e8; padding:8px 12px;
    display:flex; align-items:center; gap:8px;
    cursor:grab; flex-shrink:0; user-select:none;
  }
  .msn-chat-header:active { cursor:grabbing; }
  .msn-chat-avatar { font-size:20px; }
  .msn-chat-title { flex:1; font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msn-chat-subtitle { font-size:12px; color:#a09080; font-weight:400; display:block; }
  .msn-chat-close { background:none; border:none; color:#a09080; font-size:20px; cursor:pointer; padding:2px 6px; border-radius:4px; }
  .msn-chat-close:hover { color:#f5f0e8; background:rgba(255,255,255,0.1); }
  .msn-chat-body {
    flex:1; overflow-y:auto; padding:10px 12px;
    display:flex; flex-direction:column; gap:6px;
    background:#fafaf8;
  }
  .msn-chat-msg {
    max-width:85%; padding:8px 12px; border-radius:12px;
    font-size:14px; line-height:1.4; word-wrap:break-word;
    position:relative;
  }
  .msn-chat-msg .msn-msg-delete { display:none; position:absolute; top:2px; right:4px; background:rgba(0,0,0,0.1); border:none; border-radius:50%; width:18px; height:18px; font-size:11px; cursor:pointer; color:rgba(0,0,0,0.5); line-height:1; padding:0; }
  .msn-chat-msg:hover .msn-msg-delete { display:flex; align-items:center; justify-content:center; }
  .msn-chat-msg .msn-msg-delete:hover { background:rgba(180,0,0,0.25); color:#c00; }
  .msn-chat-msg.admin {
    align-self:flex-end; background:var(--purple); color:var(--text);
    border-bottom-right-radius:4px;
  }
  .msn-chat-msg.dentist {
    align-self:flex-start; background:#e8e4dc; color:var(--text);
    border-bottom-left-radius:4px;
  }
  .msn-chat-msg.photo img {
    max-width:100%; border-radius:6px; cursor:pointer; display:block;
  }
  .msn-chat-msg-time { font-size:11px; color:rgba(0,0,0,0.35); margin-top:3px; font-family:'DM Mono',monospace; }
  .msn-chat-input-bar {
    display:flex; gap:6px; padding:8px 10px;
    border-top:1px solid var(--border); background:#fff; flex-shrink:0;
  }
  .msn-chat-input {
    flex:1; border:1.5px solid var(--border); border-radius:6px;
    padding:6px 10px; font-family:'DM Sans',sans-serif; font-size:14px;
    outline:none; resize:none; min-height:32px; max-height:60px;
  }
  .msn-chat-input:focus { border-color:var(--purple-dark); }
  .msn-chat-send {
    background:var(--purple-dark); color:#fff; border:none;
    border-radius:6px; padding:6px 14px; font-size:14px; font-weight:700;
    cursor:pointer; font-family:'DM Sans',sans-serif; flex-shrink:0;
  }
  .msn-chat-send:hover { background:#7050a0; }
  @media print { .msn-chat { display:none !important; } }

  /* Fullscreen Thunderbird-style 3-pane email client. Top bar (search +
     compose) above a 3-column body (folders | message list | reading). */
  .inbox-panel {
    position:fixed; inset:0;
    opacity:0; pointer-events:none;
    background:#fff; z-index:180;
    transition:opacity 0.18s ease;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .inbox-panel.active { opacity:1; pointer-events:auto; }

  /* Top bar — styled to mirror the main board <header>: same dark
     color, same vertical padding, same right-pane offset so the msn
     messenger rail stays visible underneath. Linear flex flow places
     the Board toggle between the brand and the search input. */
  .inbox-topbar {
    background:var(--text); color:#f5f0e8;
    padding:12px 24px;
    display:flex; align-items:center; gap:14px;
    box-shadow:0 2px 12px rgba(0,0,0,0.2);
    margin-right:-280px; padding-right:304px;
    flex-shrink:0;
  }
  body.msn-minimized .inbox-topbar { margin-right:-32px; padding-right:304px; }
  .inbox-brand {
    font-size:20px; font-weight:600; color:#f5f0e8;
    line-height:1.4; margin:0; flex-shrink:0;
  }
  /* Reserves space in flex flow for the absolutely-positioned Board
     toggle. Width is set by JS at open time from the Inbox button's
     screen rect so search starts cleanly after the Board button. */
  .inbox-board-spacer {
    flex-shrink:0;
    width:0;
    height:1px;
  }
  /* Board toggle — pinned via JS at the screen coordinates of the main
     header's Inbox button so it looks like the same button switching
     between Board and Inbox views. */
  #inboxBoardToggle {
    position:fixed;
    z-index:200;
  }
  .inbox-compose-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; border-radius:8px; border:none;
    background:var(--purple); color:#fff;
    font-family:'DM Sans',sans-serif; font-size:16px; font-weight:600;
    cursor:pointer; transition:background 0.15s;
  }
  .inbox-compose-btn:hover { background:var(--purple-dark); }
  .inbox-search-wrap {
    flex:1; max-width:600px; position:relative;
    display:flex; align-items:center;
    background:#fff; border:1.5px solid var(--border); border-radius:8px;
    padding:0 10px; transition:border-color 0.15s;
  }
  .inbox-search-wrap:focus-within { border-color:var(--purple-dark); }
  .inbox-search-icon { font-size:15px; color:var(--text-muted); margin-right:4px; }
  .inbox-search-wrap input {
    flex:1; border:none; outline:none; background:transparent;
    padding:8px 6px; font-family:'DM Sans',sans-serif; font-size:16px;
    color:var(--text);
  }
  .inbox-search-shortcut {
    font-size:13px; color:var(--text-muted); background:var(--bg);
    padding:2px 7px; border-radius:4px; font-family:'DM Mono',monospace;
    border:1px solid var(--border);
  }
  .inbox-close {
    display:inline-flex; align-items:center; gap:6px;
    padding:9px 18px; border-radius:8px; border:1.5px solid var(--border);
    background:#fff; color:var(--text);
    font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600;
    cursor:pointer; transition:background 0.15s, border-color 0.15s, color 0.15s;
    white-space:nowrap; flex-shrink:0;
  }
  .inbox-close:hover { background:var(--bg2); border-color:var(--purple); color:var(--purple-dark); }

  /* 3-pane body: folders/categories | message list | reading pane. */
  .inbox-content { flex:1; display:flex; min-height:0; }

  /* LEFT PANE — folders + auto categories */
  .inbox-leftpane {
    width:240px; flex-shrink:0; overflow-y:auto;
    border-right:1px solid var(--border);
    background:#fafaf8; padding:6px 0;
    display:flex; flex-direction:column;
  }
  .inbox-folder-section { padding:4px 0 8px; }
  .inbox-section-header {
    padding:12px 18px 6px; font-size:13px; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px;
  }
  .inbox-folder-item {
    padding:8px 16px; cursor:pointer; display:flex; align-items:center; gap:10px;
    font-size:16px; color:var(--text); border-left:3px solid transparent;
    transition:background 0.12s, border-color 0.12s;
  }
  .inbox-folder-item:hover { background:rgba(0,0,0,0.05); }
  .inbox-folder-item.active {
    background:rgba(144,96,192,0.18);
    border-left-color:var(--purple-dark);
    font-weight:700;
    color:var(--purple-dark);
    box-shadow:inset 0 0 0 1px rgba(144,96,192,0.25);
  }
  .inbox-folder-item.active .folder-count { background:var(--purple-dark); color:#fff; }
  .inbox-folder-item .folder-icon { font-size:15px; flex-shrink:0; width:20px; text-align:center; }
  .inbox-folder-item .folder-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inbox-folder-item .folder-count {
    font-size:14px; padding:1px 8px; border-radius:10px;
    background:rgba(0,0,0,0.08); color:var(--text-muted);
    flex-shrink:0; min-width:24px; text-align:center;
  }
  .inbox-folder-item.active .folder-count.unread { background:var(--purple-dark); color:#fff; }
  .inbox-categories {
    overflow-y:auto;
    border-top:1px solid var(--border);
    margin-top:4px;
    padding:6px 0;
  }

  /* MIDDLE PANE — message list */
  .inbox-middlepane {
    width:570px; flex-shrink:0;
    border-right:1px solid var(--border);
    background:#fff; display:flex; flex-direction:column; min-height:0;
  }
  .inbox-list-header {
    display:flex; align-items:baseline; gap:10px;
    padding:14px 16px 8px; border-bottom:1px solid var(--border);
    background:var(--bg2); flex-shrink:0;
  }
  .inbox-list-title { font-size:16px; font-weight:700; }
  .inbox-list-count { font-size:14px; color:var(--text-muted); }
  .inbox-master-check { width:16px; height:16px; cursor:pointer; margin-right:4px; flex-shrink:0; }
  .inbox-bulk-bar {
    display:flex; align-items:center; gap:8px; padding:8px 14px;
    background:rgba(144,96,192,0.08); border-bottom:1px solid var(--border);
    font-size:13px; flex-shrink:0;
  }
  .inbox-bulk-bar .bulk-count { font-weight:600; color:var(--purple-dark); flex:1; }
  .inbox-bulk-bar .bulk-btn {
    padding:5px 12px; border-radius:6px; border:1.5px solid var(--border);
    background:#fff; font-family:'DM Sans',sans-serif; font-size:13px;
    font-weight:600; color:var(--text); cursor:pointer; transition:all 0.12s;
  }
  .inbox-bulk-bar .bulk-btn:hover { background:var(--bg2); border-color:var(--purple); }
  .inbox-bulk-bar .bulk-btn.danger { color:#c00; border-color:#e8c0c0; }
  .inbox-bulk-bar .bulk-btn.danger:hover { background:#fee; border-color:#c00; }
  .inbox-bulk-bar .bulk-btn.ghost { background:transparent; border-color:transparent; color:var(--text-muted); }
  .inbox-bulk-bar .bulk-btn.ghost:hover { background:var(--bg2); color:var(--text); }
  /* Row layout updated to host an inline checkbox */
  .inbox-email { display:flex; align-items:flex-start; gap:10px; }
  .inbox-email-body { flex:1; min-width:0; }
  .inbox-row-check {
    width:16px; height:16px; cursor:pointer; flex-shrink:0; margin-top:2px;
  }
  .sender-icon {
    flex-shrink:0; border-radius:50%; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:700; color:#fff; user-select:none;
    box-shadow:0 1px 2px rgba(0,0,0,0.08);
    line-height:1; text-align:center;
  }
  .sender-icon.image { background:#fff; }
  .sender-icon.image img { width:100%; height:100%; object-fit:cover; display:block; }
  .sender-icon.emoji { background:var(--bg2); color:var(--text); border:1px solid var(--border); }
  /* Row icon sits at top of the row (matches checkbox alignment) */
  .inbox-email > .sender-icon { margin-top:2px; }
  .inbox-email.checked { background:rgba(144,96,192,0.06); }
  /* Snooze menu (popover floating from the snooze button) */
  .inbox-snooze-menu {
    position:fixed; z-index:250;
    background:#fff; border:1.5px solid var(--border); border-radius:10px;
    box-shadow:0 8px 32px rgba(0,0,0,0.15);
    padding:6px; min-width:240px;
    display:flex; flex-direction:column; gap:2px;
    animation:modalIn 0.12s ease;
  }
  .inbox-snooze-menu .snooze-opt {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 12px; border:none; border-radius:6px;
    background:transparent; cursor:pointer; text-align:left;
    font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
    color:var(--text); transition:background 0.1s;
  }
  .inbox-snooze-menu .snooze-opt:hover { background:var(--bg2); }
  .inbox-snooze-menu .snooze-when {
    font-size:11px; color:var(--text-muted); font-family:'DM Mono',monospace;
  }
  .inbox-list { flex:1; overflow-y:auto; }

  /* RIGHT PANE — reading pane */
  .inbox-rightpane {
    flex:1; min-width:0; background:#fff;
    display:flex; flex-direction:column; min-height:0;
    overflow-y:auto;
  }
  .inbox-reading-empty {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:16px; gap:10px;
  }
  .inbox-reading-empty span { font-size:42px; }
  .inbox-reading-empty p { margin:0; }
  .inbox-cat-section {
    padding:14px 18px 6px; font-size:14px; font-weight:700;
    color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px;
  }
  .inbox-cat-item {
    padding:8px 16px; cursor:pointer; display:flex; align-items:center; gap:10px;
    font-size:17px; color:var(--text); border-left:3px solid transparent;
    transition:background 0.12s, border-color 0.12s;
  }
  .inbox-cat-item:hover { background:rgba(0,0,0,0.05); }
  .inbox-cat-item.active {
    background:rgba(144,96,192,0.18);
    border-left-color:var(--purple-dark);
    font-weight:700;
    color:var(--purple-dark);
    box-shadow:inset 0 0 0 1px rgba(144,96,192,0.25);
  }
  .inbox-cat-item.active .cat-count { background:var(--purple-dark); color:#fff; }
  .inbox-cat-item .cat-icon { font-size:15px; flex-shrink:0; width:20px; text-align:center; }
  .inbox-cat-item .cat-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inbox-cat-item .cat-count {
    font-size:15px; padding:1px 8px; border-radius:10px;
    background:rgba(0,0,0,0.08); color:var(--text-muted);
    flex-shrink:0; min-width:24px; text-align:center;
  }
  .inbox-cat-item .cat-count.unread { background:var(--purple-dark); color:#fff; }

  /* Right-side list area (existing filter bar + body live here). */
  .inbox-main { flex:1; display:flex; flex-direction:column; min-width:0; background:#fff; }

  .inbox-filters {
    display:flex; gap:4px; padding:10px 14px; border-bottom:1px solid var(--border);
    background:#fff; flex-shrink:0;
  }
  .inbox-filter-btn {
    padding:5px 12px; border-radius:20px; border:1.5px solid var(--border);
    background:#fff; font-family:'DM Sans',sans-serif; font-size:16px;
    font-weight:600; color:var(--text-muted); cursor:pointer; transition:all 0.15s;
  }
  .inbox-filter-btn:hover { border-color:var(--purple); color:var(--text); }
  .inbox-filter-btn.active { background:var(--purple); border-color:var(--purple-dark); color:#fff; }
  .inbox-body { flex:1; overflow-y:auto; }
  .inbox-empty { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:18px; }
  .inbox-empty span { font-size:36px; display:block; margin-bottom:10px; }

  /* Responsive: drop the sidebar to a horizontal pill bar on narrow screens. */
  @media (max-width: 760px) {
    .inbox-panel { width:100vw; height:100vh; border-radius:0; }
    .inbox-content { flex-direction:column; }
    .inbox-categories {
      width:100%; height:auto; padding:8px;
      border-right:none; border-bottom:1px solid var(--border);
      display:flex; gap:6px; overflow-x:auto;
    }
    .inbox-cat-section { display:none; }
    .inbox-cat-item {
      padding:6px 12px; border-left:none; border-radius:14px;
      flex-shrink:0; background:#fff; border:1px solid var(--border);
    }
    .inbox-cat-item.active { background:var(--purple); color:#fff; border-color:var(--purple-dark); }
  }

  /* Email row */
  .inbox-email {
    padding:14px 18px; border-bottom:1px solid #f0ece6; cursor:pointer;
    transition:background 0.1s; position:relative;
  }
  .inbox-email:hover { background:var(--bg); }
  .inbox-email.unread { background:#faf8f2; }
  .inbox-email.unread::before {
    content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%);
    width:7px; height:7px; border-radius:50%; background:var(--purple-dark);
  }
  .inbox-email-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
  .inbox-email-from { font-weight:700; font-size:18px; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inbox-thread-count {
    display:inline-block; margin-left:8px; padding:1px 7px;
    background:rgba(144,96,192,0.15); color:var(--purple-dark);
    font-size:12px; font-weight:700; border-radius:10px; vertical-align:middle;
  }
  .inbox-thread-bar {
    margin-bottom:14px; padding:10px 12px; background:var(--bg2);
    border:1px solid var(--border); border-radius:8px;
  }
  .inbox-thread-bar-label {
    font-size:11px; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px;
  }
  .inbox-thread-msg {
    display:flex; align-items:center; gap:8px; padding:6px 10px;
    border-radius:5px; cursor:pointer; font-size:14px;
    transition:background 0.12s;
  }
  .inbox-thread-msg:hover { background:#fff; }
  .inbox-thread-msg .thread-msg-from { font-weight:600; min-width:120px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inbox-thread-msg .thread-msg-snippet { flex:1; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inbox-thread-msg .thread-msg-time { color:var(--text-muted); font-family:'DM Mono',monospace; font-size:12px; flex-shrink:0; }
  .inbox-email-time { font-size:15px; color:var(--text-muted); font-family:'DM Mono',monospace; flex-shrink:0; }
  .inbox-email-subject { font-size:17px; font-weight:500; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--blue-dark); }
  .inbox-email-snippet { font-size:16px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inbox-email-meta { display:flex; align-items:center; gap:6px; margin-top:6px; }
  .inbox-badge {
    font-size:14px; font-weight:700; padding:2px 7px; border-radius:10px;
    text-transform:uppercase; letter-spacing:.3px;
  }
  .inbox-badge.linked { background:rgba(80,160,96,0.15); color:var(--green-dark); }
  .inbox-badge.created { background:rgba(144,160,224,0.2); color:var(--purple-dark); }
  .inbox-badge.ignored { background:rgba(0,0,0,0.06); color:var(--text-muted); }
  .inbox-badge.unmatched { background:rgba(240,216,144,0.4); color:var(--yellow-dark); }
  .inbox-badge.photos { background:rgba(244,160,176,0.2); color:var(--pink-dark); }

  /* Email detail — now lives in the right reading pane (always visible
     when a row is selected; renderInboxDetail() injects it). */
  .inbox-detail {
    padding:20px 28px; background:#fff;
    animation:modalIn 0.15s ease;
  }
  .inbox-detail.active { display:block; }
  /* Selected row in the list — sits above .unread bg color. */
  .inbox-email.selected { background:rgba(144,96,192,0.12) !important; }
  .inbox-email.selected.unread { background:rgba(144,96,192,0.18) !important; }
  .inbox-detail-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .inbox-detail-back { background:none; border:none; font-size:17px; font-weight:600; color:var(--purple-dark); cursor:pointer; padding:4px 8px; border-radius:5px; font-family:'DM Sans',sans-serif; }
  .inbox-detail-back:hover { background:rgba(144,96,192,0.1); }
  .inbox-detail-from { font-size:22px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .inbox-detail-icon-wrap {
    display:inline-flex; cursor:pointer; border-radius:50%;
    transition:transform 0.12s, box-shadow 0.12s;
  }
  .inbox-detail-icon-wrap:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
  .inbox-rename-btn {
    background:none; border:none; cursor:pointer; padding:2px 6px; border-radius:5px;
    font-size:16px; line-height:1; opacity:0.5; transition:opacity 0.15s, background 0.15s;
  }
  .inbox-rename-btn:hover { opacity:1; background:rgba(0,0,0,0.06); }
  .inbox-from-addr { font-size:14px; font-weight:400; color:var(--text-muted); font-family:'DM Mono',monospace; }
  .inbox-detail-subject { font-size:18px; font-weight:500; margin-bottom:10px; color:var(--text-muted); }
  .inbox-detail-body {
    font-size:17px; line-height:1.6; color:var(--text);
    white-space:pre-wrap; word-break:break-word;
    max-height:300px; overflow-y:auto;
    background:#fff; border:1px solid #eee; border-radius:8px;
    padding:12px 14px; margin-bottom:12px;
  }
  .inbox-detail-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .inbox-detail-tldr {
    display:flex; align-items:flex-start; gap:10px;
    padding:10px 14px; margin-bottom:12px;
    background:linear-gradient(135deg, rgba(144,160,224,0.12), rgba(144,196,232,0.08));
    border-left:3px solid var(--purple-dark); border-radius:6px;
    font-size:15px; line-height:1.4; color:var(--text);
  }
  .inbox-detail-tldr .tldr-label {
    flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:0.5px;
    color:var(--purple-dark); background:rgba(144,96,192,0.12);
    padding:3px 8px; border-radius:4px; margin-top:1px;
  }
  .inbox-detail-photos {
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;
    padding:10px; background:var(--bg2); border-radius:8px;
    border:1px solid var(--border);
  }
  .inbox-photo-thumb {
    display:block; width:140px; height:140px; border-radius:6px;
    overflow:hidden; background:#fff; border:1px solid var(--border);
    cursor:pointer; transition:transform 0.12s, box-shadow 0.12s;
  }
  .inbox-photo-thumb:hover { transform:scale(1.03); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
  .inbox-photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .inbox-detail-atts {
    margin-bottom:12px; padding:10px 12px; background:var(--bg2);
    border-radius:8px; border:1px solid var(--border);
  }
  .inbox-atts-label {
    font-size:12px; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px;
  }
  .inbox-att-row {
    display:flex; align-items:center; gap:10px; padding:7px 10px;
    border-radius:6px; text-decoration:none; color:var(--text); font-size:15px;
    transition:background 0.12s;
  }
  .inbox-att-row:hover { background:#fff; }
  .inbox-att-row .att-icon { font-size:20px; flex-shrink:0; }
  .inbox-att-row .att-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
  .inbox-att-row .att-size { font-size:12px; color:var(--text-muted); font-family:'DM Mono',monospace; flex-shrink:0; }
  .inbox-att-row .att-download { color:var(--purple-dark); font-size:18px; opacity:0; transition:opacity 0.12s; }
  .inbox-att-row:hover .att-download { opacity:1; }
  .inbox-action-btn {
    padding:6px 14px; border-radius:6px; border:1.5px solid var(--border);
    background:#fff; font-family:'DM Sans',sans-serif; font-size:16px;
    font-weight:600; cursor:pointer; transition:all 0.15s; color:var(--text);
  }
  .inbox-action-btn:hover { background:var(--bg2); border-color:var(--purple); }
  .inbox-action-btn.primary { background:var(--purple); border-color:var(--purple-dark); color:#fff; }
  .inbox-action-btn.primary:hover { background:var(--purple-dark); }
  .inbox-action-btn.danger { color:#c00; border-color:#e8c0c0; }
  .inbox-action-btn.danger:hover { background:#fee; }

  /* Link-to-case picker */
  .inbox-link-picker {
    margin-top:10px; padding:10px; background:#fff; border:1.5px solid var(--border);
    border-radius:8px; display:none;
  }
  .inbox-link-picker.active { display:block; }
  .inbox-link-picker input {
    width:100%; padding:7px 10px; border:1.5px solid #ddd; border-radius:6px;
    font-family:'DM Sans',sans-serif; font-size:17px; outline:none; margin-bottom:8px;
  }
  .inbox-link-picker input:focus { border-color:var(--purple-dark); }
  .inbox-link-results { max-height:160px; overflow-y:auto; }
  .inbox-link-row {
    padding:7px 10px; border-radius:5px; cursor:pointer; font-size:17px;
    display:flex; align-items:center; gap:8px; transition:background 0.1s;
  }
  .inbox-link-row:hover { background:var(--bg); }
  .inbox-link-row .color-pip { flex-shrink:0; }
  .inbox-link-row strong { font-weight:600; }
  .inbox-link-row span { color:var(--text-muted); font-size:15px; }

  /* Inbox quick reply */
  .inbox-reply-wrap {
    margin-top:12px; padding:12px; background:#fff; border:1.5px solid var(--border);
    border-radius:8px; display:none;
  }
  .inbox-reply-wrap.active { display:block; }
  .inbox-reply-wrap label { font-size:15px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.3px; display:block; margin-bottom:6px; }
  .inbox-reply-draft {
    width:100%; min-height:320px; padding:10px 12px; border:1.5px solid var(--border);
    border-radius:8px; font-family:'DM Sans',sans-serif; font-size:17px; line-height:1.5;
    outline:none; resize:vertical; background:#fafaf8; transition:border-color 0.15s;
  }
  .inbox-reply-draft:focus { border-color:var(--purple-dark); }
  .inbox-reply-actions { display:flex; gap:8px; margin-top:8px; align-items:center; }
  .inbox-reply-generating {
    font-size:16px; color:var(--purple-dark); display:none; align-items:center; gap:6px;
  }
  .inbox-reply-generating.active { display:flex; }
  .inbox-reply-generating .spinner {
    display:inline-block; width:12px; height:12px; border:2px solid var(--border);
    border-top-color:var(--purple-dark); border-radius:50%; animation:spin 0.6s linear infinite;
  }

  /* ── MODAL ── */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(30,20,10,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:200; align-items:center; justify-content:center; }
  .modal-overlay.active { display:flex; }
  .modal { background:#fff; border-radius:14px; padding:26px; width:440px; max-width:95vw; box-shadow:var(--shadow-lg); animation:modalIn 0.18s ease; max-height:90vh; overflow-y:auto; }
  .modal.case-modal { width:880px; }
  .modal.case-modal .modal-title-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:12px;
  }
  .modal.case-modal .modal-title-row h2 {
    margin:0; flex:1; min-width:0;
  }
  .modal-pan-badge {
    display:flex; flex-direction:column; align-items:center;
    background:var(--btn-pending, #d94040); color:#fff;
    padding:6px 14px;
    border-radius:8px;
    flex-shrink:0;
    line-height:1;
  }
  .modal-pan-badge .modal-pan-label {
    font-size:9px; font-weight:700;
    text-transform:uppercase; letter-spacing:1.5px;
    color:rgba(255,255,255,0.7);
    margin-bottom:2px;
  }
  .modal-pan-badge .modal-pan-number {
    font-family:'DM Mono','Consolas',monospace;
    font-size:24px; font-weight:900;
    letter-spacing:2px;
  }
  /* minmax(0,1fr) forces 50/50 split even when an input or unbreakable
     string inside a column tries to expand its track. Without this, a
     case with a long restoration value (e.g. "crowns 21/22/23 pick up
     shade example") could push the left column to ~25% and the right
     to ~75% on 2026-05-20 when the restoration field shared a row with
     the new Shade input. */
  .modal.case-modal .modal-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
  .modal.case-modal .modal-col-right { border-left:1px solid var(--border); padding-left:24px; }
  @media (max-width: 760px) {
    .modal.case-modal { width:95vw; }
    .modal.case-modal .modal-grid { grid-template-columns:1fr; gap:0; }
    .modal.case-modal .modal-col-right { border-left:none; padding-left:0; }
  }
  .case-history-row { display:flex; gap:8px; padding:5px 0; border-bottom:1px dashed #eee; font-size:12px; }
  .case-history-row:last-child { border-bottom:none; }
  .case-history-time { flex-shrink:0; color:var(--text-muted); font-size:11px; width:88px; }
  .case-history-text { flex:1; color:var(--text); line-height:1.4; }
  .case-history-empty { color:var(--text-muted); font-size:11px; text-align:center; padding:12px 8px; }
  @keyframes modalIn { from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} }
  .modal h2 { font-size:16px; font-weight:600; margin-bottom:18px; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .form-group { margin-bottom:12px; }
  .form-group label { display:block; font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px; }
  .form-group input, .form-group textarea { width:100%; padding:8px 10px; border:1.5px solid #ddd; border-radius:7px; font-family:'DM Sans',sans-serif; font-size:13px; color:var(--text); background:#fafaf8; outline:none; transition:border-color 0.15s; }
  .form-group input:focus, .form-group textarea:focus { border-color:var(--purple-dark); }
  .form-group textarea { resize:vertical; min-height:120px; }
  .units-hint { font-size:10px; color:var(--text-muted); margin-top:3px; }
  .color-picker { display:flex; gap:10px; flex-wrap:wrap; }
  .color-option { width:30px; height:30px; border-radius:7px; border:2.5px solid transparent; cursor:pointer; transition:transform .1s, border-color .1s; }
  .color-option:hover { transform:scale(1.1); }
  .color-option.selected { border-color:#333; transform:scale(1.1); }
  .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
  .btn-cancel { background:#f0ece6; color:var(--text); border:none; }
  .btn-cancel:hover { background:#e4ddd0; }
  .btn-save { background:var(--text); color:#f5f0e8; border:none; }
  .btn-save:hover { background:#3a3028; }

  /* ── AUTOCOMPLETE ── */
  .autocomplete-wrap { position:relative; }
  .autocomplete-list {
    position:absolute; top:100%; left:0; right:0; z-index:300;
    background:#fff; border:1.5px solid var(--border); border-top:none;
    border-radius:0 0 7px 7px; max-height:200px; overflow-y:auto;
    box-shadow:0 4px 12px rgba(0,0,0,0.12); display:none;
  }
  .autocomplete-list.open { display:block; }
  .autocomplete-item {
    padding:8px 12px; font-size:13px; cursor:pointer;
    border-bottom:1px solid #f0ece6;
  }
  .autocomplete-item:hover, .autocomplete-item.active {
    background:var(--purple); color:var(--text);
  }
  .autocomplete-item:last-child { border-bottom:none; }
  .autocomplete-item mark { background:var(--yellow); color:var(--text); border-radius:2px; padding:0 1px; }

  /* ── SETTINGS ── */
  .settings-card {
    background:#fff; border-radius:10px; border:1px solid var(--border);
    padding:20px; 
  }
  .settings-card h3 { font-size:15px; font-weight:600; margin-bottom:14px; }
  .settings-hint { font-size:11px; color:var(--text-muted); margin:-8px 0 12px; }
  .settings-row { margin-bottom:12px; }
  .settings-row label { display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.3px; }
  .settings-toggle-group { display:flex; gap:6px; flex-wrap:wrap; }
  .settings-toggle {
    padding:6px 14px; border:1.5px solid var(--border); border-radius:6px;
    background:#fff; font-family:'DM Sans',sans-serif; font-size:12px;
    font-weight:600; color:var(--text-muted); cursor:pointer; transition:all 0.15s;
  }
  .settings-toggle:hover { border-color:#999; color:var(--text); }
  .settings-toggle.active { background:var(--purple); border-color:var(--purple-dark); color:var(--text); }
  .settings-toggle.color-swatch { color:var(--text); font-size:11px; min-width:50px; text-align:center; }
  .settings-toggle.color-swatch.active { outline:2.5px solid var(--text); outline-offset:1px; }
  .color-input {
    width:60px; height:32px; border:1.5px solid var(--border); border-radius:6px;
    cursor:pointer; background:none; padding:2px;
  }

  /* ── LOGIN SCREEN ── */
  .login-screen { position:fixed; inset:0; background:var(--text); z-index:500; display:flex; align-items:center; justify-content:center; }
  .login-screen.hidden { display:none; }
  .login-box { background:#fff; border-radius:16px; padding:36px 32px; width:360px; max-width:90vw; box-shadow:0 20px 60px rgba(0,0,0,0.3); text-align:center; }
  .login-box h1 { font-size:28px; font-weight:700; margin-bottom:4px; }
  .login-box .login-sub { font-size:13px; color:var(--text-muted); margin-bottom:24px; }
  .login-box .form-group { text-align:left; margin-bottom:14px; }
  .login-box input { width:100%; padding:10px 12px; border:1.5px solid #ddd; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; outline:none; transition:border-color 0.15s; }
  .login-box input:focus { border-color:var(--purple-dark); }
  .login-btn { width:100%; padding:11px; border:none; border-radius:8px; background:var(--text); color:#f5f0e8; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:background 0.15s; margin-top:6px; }
  .login-btn:hover { background:#3a3028; }
  .login-error { color:#d32f2f; font-size:12px; margin-top:10px; min-height:18px; font-weight:500; }
  .login-loading { color:var(--text-muted); font-size:13px; margin-top:10px; }
  .app-wrap { display:none; }
  .app-wrap.visible { display:block; }

  /* ── CHAT WIDGET ── */
  .chat-fab {
    position:fixed; bottom:24px; right:24px; z-index:300;
    width:56px; height:56px; border-radius:50%;
    background:var(--purple-dark); color:#fff; border:none;
    cursor:pointer; font-size:24px;
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
    transition:transform 0.15s, background 0.15s;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-fab:hover { transform:scale(1.08); background:#7050a8; }
  .chat-fab.open { background:#555; transform:rotate(0deg); }

  .chat-panel {
    display:none; position:fixed; bottom:92px; right:24px; z-index:300;
    width:420px; max-width:calc(100vw - 48px); height:520px; max-height:calc(100vh - 140px);
    background:#fff; border-radius:16px;
    box-shadow:0 8px 40px rgba(0,0,0,0.2);
    flex-direction:column; overflow:hidden;
    animation:chatIn 0.2s ease;
  }
  .chat-panel.open { display:flex; }
  @keyframes chatIn { from{opacity:0;transform:translateY(12px) scale(0.96)} to{opacity:1;transform:translateY(0) scale(1)} }

  .chat-header {
    padding:14px 18px; background:var(--text); color:#f5f0e8;
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
  }
  .chat-header h3 { font-size:15px; font-weight:600; margin:0; display:flex; align-items:center; gap:8px; }
  .chat-header-actions { display:flex; gap:6px; }
  .chat-clear-btn {
    background:rgba(255,255,255,0.15); border:none; color:#ccc;
    padding:4px 10px; border-radius:5px; font-size:11px; cursor:pointer;
    font-family:'DM Sans',sans-serif; transition:all 0.15s;
  }
  .chat-clear-btn:hover { background:rgba(255,255,255,0.25); color:#fff; }

  .chat-messages {
    flex:1; overflow-y:auto; padding:16px;
    display:flex; flex-direction:column; gap:12px;
    background:#faf9f6;
  }

  .chat-msg {
    max-width:88%; padding:10px 14px; border-radius:12px;
    font-size:13px; line-height:1.55; word-wrap:break-word;
    white-space:pre-wrap;
  }
  .chat-msg.user {
    align-self:flex-end; background:var(--purple); color:var(--text);
    border-bottom-right-radius:4px;
  }
  .chat-msg.assistant {
    align-self:flex-start; background:#fff; color:var(--text);
    border:1px solid #e8e4de; border-bottom-left-radius:4px;
    box-shadow:0 1px 3px rgba(0,0,0,0.06);
  }
  .chat-msg.assistant strong { font-weight:600; }
  .chat-msg.assistant code {
    background:rgba(0,0,0,0.06); padding:1px 5px; border-radius:3px;
    font-family:'DM Mono',monospace; font-size:12px;
  }
  .chat-msg.error {
    align-self:center; background:#fee; color:#c00;
    font-size:12px; border-radius:8px;
  }

  .chat-typing {
    align-self:flex-start; padding:10px 14px; background:#fff;
    border:1px solid #e8e4de; border-radius:12px; border-bottom-left-radius:4px;
    font-size:13px; color:var(--text-muted);
    display:none;
  }
  .chat-typing.visible { display:block; }
  .typing-dots span {
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--text-muted); margin:0 2px;
    animation:typingBounce 1.2s infinite;
  }
  .typing-dots span:nth-child(2) { animation-delay:0.15s; }
  .typing-dots span:nth-child(3) { animation-delay:0.3s; }
  @keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }

  .chat-input-row {
    padding:12px; border-top:1px solid #e8e4de;
    display:flex; gap:8px; background:#fff; flex-shrink:0;
  }
  .chat-input {
    flex:1; padding:10px 14px; border:1.5px solid #ddd;
    border-radius:10px; font-family:'DM Sans',sans-serif;
    font-size:13px; outline:none; resize:none;
    min-height:40px; max-height:100px; line-height:1.4;
    transition:border-color 0.15s;
  }
  .chat-input:focus { border-color:var(--purple-dark); }
  .chat-send-btn {
    width:40px; height:40px; border-radius:10px;
    background:var(--purple-dark); color:#fff; border:none;
    cursor:pointer; font-size:18px; flex-shrink:0;
    transition:background 0.15s;
    display:flex; align-items:center; justify-content:center;
  }
  .chat-send-btn:hover { background:#7050a8; }
  .chat-send-btn:disabled { background:#ccc; cursor:not-allowed; }

  .chat-welcome {
    text-align:center; padding:30px 20px; color:var(--text-muted);
  }
  .chat-welcome-icon { font-size:36px; margin-bottom:10px; }
  .chat-welcome h4 { font-size:15px; font-weight:600; color:var(--text); margin-bottom:8px; }
  .chat-welcome p { font-size:12px; line-height:1.5; }
  .chat-suggestions {
    display:flex; flex-direction:column; gap:6px; margin-top:14px;
  }
  .chat-suggestion {
    padding:8px 12px; background:#fff; border:1px solid #e8e4de;
    border-radius:8px; font-size:12px; color:var(--text);
    cursor:pointer; text-align:left;
    transition:all 0.15s;
  }
  .chat-suggestion:hover { background:var(--purple); border-color:var(--purple-dark); }

  @media print { .chat-fab, .chat-panel, .inbox-panel, .inbox-overlay, .msg-panel, .msg-panel-overlay, .toast-container { display:none !important; } }
  /* ── CLIENT PORTAL ── */
  /* Portal Preview Mode */
  .portal-preview-banner {
    display:none; background:var(--text); color:#f5f0e8;
    padding:10px 24px; align-items:center; justify-content:space-between;
    font-size:13px; gap:12px; position:sticky; top:0; z-index:250;
    box-shadow:0 2px 12px rgba(0,0,0,0.3);
  }
  .portal-preview-banner.active { display:flex; }
  .portal-preview-banner .preview-label {
    font-weight:700; color:var(--green); font-size:12px;
    text-transform:uppercase; letter-spacing:.5px;
    display:flex; align-items:center; gap:6px;
  }
  .portal-preview-banner .preview-label .dot {
    width:8px; height:8px; border-radius:50%; background:var(--green);
    animation:previewDotPulse 1.5s ease infinite;
  }
  @keyframes previewDotPulse {
    0%,100% { opacity:1; } 50% { opacity:0.3; }
  }
  .portal-preview-select {
    padding:6px 12px; border-radius:6px; border:1.5px solid rgba(255,255,255,0.2);
    background:rgba(255,255,255,0.1); color:#f5f0e8; font-family:'DM Sans',sans-serif;
    font-size:13px; outline:none; cursor:pointer; min-width:200px;
  }
  .portal-preview-select option { background:var(--text); color:#f5f0e8; }
  .portal-preview-select:focus { border-color:var(--green); }
  .portal-preview-back {
    padding:6px 16px; border-radius:6px; border:1.5px solid var(--green);
    background:transparent; color:var(--green); font-family:'DM Sans',sans-serif;
    font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s;
  }
  .portal-preview-back:hover { background:var(--green); color:var(--text); }

  .portal-wrap { display:none; min-height:100vh; background:var(--bg); }
  .portal-wrap.visible { display:block; }
  .portal-header {
    background:var(--text); color:#f5f0e8; padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,0.2);
    margin-right:-280px; padding-right:304px;
  }
  .portal-header h1 { font-size:20px; font-weight:600; }
  .portal-header-right { display:flex; gap:10px; align-items:center; }
  .portal-user { font-size:13px; color:#a09080; font-family:'DM Mono',monospace; }

  .portal-content { max-width:1200px; margin:0 auto; padding:24px; }
  .portal-3col { display:grid; grid-template-columns:280px 1fr 1fr; gap:20px; align-items:start; }
  @media (max-width:900px) { .portal-3col { grid-template-columns:1fr; } }
  .portal-left-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
  .portal-bulletin {
    background:#fff; border-radius:12px; border:1.5px solid var(--border);
    padding:16px 20px; margin-bottom:16px;
  }
  .portal-bulletin-title { font-size:13px; font-weight:700; color:var(--purple-dark); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
  .portal-bulletin-body { font-size:14px; line-height:1.6; color:var(--text); white-space:pre-wrap; }
  .portal-bulletin-empty { display:none; }
  .portal-est-box {
    background:#fff; border-radius:12px; border:1.5px solid var(--border);
    padding:16px 20px; min-height:300px;
  }
  .portal-est-title { font-size:13px; font-weight:700; color:var(--yellow-dark); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
  .portal-est-input-row { display:flex; gap:8px; margin-bottom:8px; }
  .portal-est-input {
    flex:1; padding:10px 14px; border:1.5px solid var(--border); border-radius:8px;
    font-family:'DM Sans',sans-serif; font-size:14px; outline:none;
    transition:border-color 0.15s;
  }
  .portal-est-input:focus { border-color:var(--purple-dark); }
  .portal-est-btn {
    padding:10px 18px; background:var(--purple); color:var(--text); border:none;
    border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px;
    font-weight:600; cursor:pointer; flex-shrink:0;
  }
  .portal-est-btn:hover { background:var(--purple-dark); color:#fff; }
  .portal-est-hints { font-size:12px; color:var(--text-muted); line-height:1.6; }
  .portal-est-result {
    margin-top:12px; padding:14px 16px; background:var(--bg); border-radius:8px;
    border:1.5px solid var(--border);
  }
  .portal-welcome { margin-bottom:24px; text-align:center; }
  .portal-welcome h2 { font-size:22px; font-weight:600; margin-bottom:4px; }
  .portal-welcome p { color:var(--text-muted); font-size:14px; }
  #portalSearchInput:focus { border-color:var(--purple-dark); }

  /* ── PRODUCTION VIEW ── */
  .production-wrapper { padding:20px 24px 48px; }
  .production-grid { display:flex; gap:20px; align-items:start; overflow-x:auto; padding-bottom:8px; }
  @media (max-width:900px) { .production-grid { flex-direction:column; } }
  .production-col { min-width:280px; flex-shrink:0; flex:1; }
  .production-col-header {
    font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:.5px; padding:12px 16px; margin-bottom:10px;
    background:var(--bg2); border-radius:8px; display:flex; align-items:center; gap:8px;
    border-left:4px solid var(--purple-dark);
  }
  .production-col-header.col-design { border-left-color:var(--blue-dark); }
  .production-col-header.col-models { border-left-color:var(--yellow-dark); }
  .production-col-header.col-mill { border-left-color:var(--pink-dark); }
  .production-col-badge {
    background:var(--purple); color:var(--text); border-radius:20px;
    font-size:10px; font-weight:700; padding:1px 8px;
  }
  .production-col-badge.badge-design { background:var(--blue); }
  .production-col-badge.badge-models { background:var(--yellow); }
  .production-col-badge.badge-mill { background:var(--pink); }
  .production-cases { display:flex; flex-direction:column; gap:10px; }
  .production-card {
    background:#fff; border-radius:10px; border:1.5px solid var(--border);
    padding:14px 16px; cursor:pointer; transition:all 0.15s;
    display:flex; align-items:center; gap:14px;
  }
  .production-card:hover { border-color:var(--purple); box-shadow:var(--shadow); transform:translateY(-1px); }
  .production-card-color { width:5px; height:44px; border-radius:3px; flex-shrink:0; }
  .production-card-info { flex:1; min-width:0; }
  .production-card-patient { font-size:15px; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .production-card-detail { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .production-card-due { font-size:11px; font-family:'DM Mono',monospace; color:var(--text-muted); margin-top:2px; }
  .production-card-right { flex-shrink:0; display:flex; align-items:center; gap:8px; }
  .production-check-btn {
    padding:6px 14px; border-radius:6px; border:1.5px solid var(--border);
    background:var(--bg2); font-family:'DM Sans',sans-serif; font-size:12px;
    font-weight:600; cursor:pointer; transition:all 0.15s; white-space:nowrap;
  }
  .production-check-btn:hover { background:var(--green); border-color:var(--green-dark); color:var(--text); }
  .production-empty { text-align:center; padding:30px 0; color:var(--text-muted); font-size:13px; }

  .portal-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
  @media (max-width:768px) { .portal-columns { grid-template-columns:1fr; } }
  .portal-col { min-width:0; }
  .portal-col-header {
    font-size:13px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:.5px; padding:10px 14px; margin-bottom:8px;
    background:var(--bg2); border-radius:8px; display:flex; align-items:center; gap:8px;
    border-left:4px solid var(--purple-dark);
  }
  .portal-col-header-green { border-left-color:var(--green-dark); }
  .portal-col-badge {
    background:var(--purple); color:var(--text); border-radius:20px;
    font-size:10px; font-weight:700; padding:1px 8px;
  }
  .portal-col-badge-green { background:var(--green); }
  .portal-completed-tracking {
    display:inline-flex; align-items:center; gap:6px; font-size:14px;
    font-weight:600; color:var(--green-dark); margin-top:6px;
    font-family:'DM Mono',monospace;
  }
  .portal-completed-tracking a {
    color:var(--green-dark); text-decoration:underline;
    padding:4px 8px; border-radius:6px;
    transition:background 0.12s, color 0.12s;
  }
  .portal-completed-tracking a:hover { background:rgba(80,160,96,0.15); color:var(--text); }

  /* Portal case list */
  .portal-cases { display:flex; flex-direction:column; gap:12px; }
  .portal-case {
    background:#fff; border-radius:12px; border:1.5px solid var(--border);
    padding:18px 20px; cursor:pointer; transition:all 0.15s;
    display:flex; align-items:center; gap:16px;
  }
  .portal-case:hover { border-color:var(--purple); box-shadow:var(--shadow); transform:translateY(-1px); }
  .portal-case-color { width:6px; height:50px; border-radius:3px; flex-shrink:0; }
  .portal-case-info { flex:1; min-width:0; }
  .portal-case-patient { font-size:16px; font-weight:600; margin-bottom:2px; }
  .portal-case-detail { font-size:13px; color:var(--text-muted); }
  .portal-case-right { text-align:right; flex-shrink:0; }
  .portal-case-due { font-size:13px; font-family:'DM Mono',monospace; color:var(--text-muted); }
  .portal-case-status {
    display:inline-block; margin-top:4px; padding:3px 10px; border-radius:20px;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  }
  .portal-status-progress { background:rgba(144,160,224,0.2); color:var(--purple-dark); }
  .portal-status-ready { background:rgba(80,160,96,0.15); color:var(--green-dark); }
  .portal-status-shipped { background:rgba(90,196,232,0.15); color:var(--blue-dark); }
  .portal-case-unread {
    background:var(--pink); color:var(--pink-dark); font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:10px; margin-left:8px;
  }

  /* Portal case detail / chat view */
  .portal-detail { display:none; }
  .portal-detail.active { display:block; }
  .portal-back { background:none; border:none; font-size:14px; font-weight:600; color:var(--purple-dark); cursor:pointer; padding:6px 10px; border-radius:6px; font-family:'DM Sans',sans-serif; margin-bottom:16px; }
  .portal-back:hover { background:rgba(144,96,192,0.1); }

  .portal-detail-header {
    background:#fff; border-radius:12px; border:1.5px solid var(--border);
    padding:20px; margin-bottom:16px;
  }
  .portal-detail-patient { font-size:20px; font-weight:700; margin-bottom:4px; }
  .portal-detail-meta { display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--text-muted); }
  .portal-detail-meta strong { color:var(--text); font-weight:600; }
  .portal-progress-bar {
    display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border);
  }
  .portal-progress-step {
    flex:1; text-align:center; padding:8px; border-radius:8px;
    font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
    background:var(--bg2); color:var(--text-muted);
  }
  .portal-progress-step.done { background:rgba(80,160,96,0.15); color:var(--green-dark); }
  .portal-progress-step.current { background:var(--purple); color:#fff; }

  /* Chat area */
  .portal-chat-wrap {
    background:#fff; border-radius:12px; border:1.5px solid var(--border);
    display:flex; flex-direction:column; height:500px;
  }
  .portal-chat-tabs {
    display:flex; border-bottom:1.5px solid var(--border); flex-shrink:0;
  }
  .portal-chat-tab {
    padding:10px 20px; font-size:13px; font-weight:600; color:var(--text-muted);
    background:none; border:none; cursor:pointer; font-family:'DM Sans',sans-serif;
    border-bottom:2.5px solid transparent; margin-bottom:-1.5px; transition:all 0.15s;
  }
  .portal-chat-tab:hover { color:var(--text); }
  .portal-chat-tab.active { color:var(--text); border-bottom-color:var(--purple-dark); }

  .portal-chat-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
  .portal-chat-empty { text-align:center; padding:40px; color:var(--text-muted); font-size:14px; }

  /* Message bubbles */
  .chat-msg-row { display:flex; gap:10px; max-width:80%; }
  .chat-msg-row.sent { align-self:flex-end; flex-direction:row-reverse; }
  .chat-msg-row.received { align-self:flex-start; }
  .chat-bubble {
    padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5;
    word-break:break-word; position:relative;
  }
  .chat-msg-row.sent .chat-bubble { background:var(--purple); color:#1a1520; border-bottom-right-radius:4px; }
  .chat-msg-row.received .chat-bubble { background:var(--bg2); color:var(--text); border-bottom-left-radius:4px; }
  .chat-bubble-name { font-size:10px; font-weight:700; color:var(--text-muted); margin-bottom:2px; }
  .chat-bubble-time { font-size:10px; color:rgba(0,0,0,0.4); margin-top:4px; text-align:right; }
  .chat-bubble img { max-width:240px; max-height:200px; border-radius:8px; margin-top:6px; cursor:pointer; display:block; }

  /* Chat input */
  .portal-chat-input {
    display:flex; gap:8px; padding:12px 16px; border-top:1.5px solid var(--border);
    background:#fafaf8; border-radius:0 0 12px 12px; flex-shrink:0; align-items:flex-end;
  }
  .portal-chat-input textarea {
    flex:1; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px;
    font-family:'DM Sans',sans-serif; font-size:13px; outline:none; resize:none;
    min-height:40px; max-height:120px; background:#fff; transition:border-color 0.15s;
  }
  .portal-chat-input textarea:focus { border-color:var(--purple-dark); }
  .portal-chat-input button {
    padding:10px 18px; border-radius:10px; border:none; font-family:'DM Sans',sans-serif;
    font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s; flex-shrink:0;
  }
  .portal-send-btn { background:var(--purple-dark); color:#fff; }
  .portal-send-btn:hover { background:#7040a0; }
  .portal-photo-btn { background:var(--bg2); color:var(--text); border:1.5px solid var(--border) !important; }
  .portal-photo-btn:hover { background:var(--pink); border-color:var(--pink-dark) !important; }
  .portal-photos-upload {
    padding:12px 16px; border-top:1.5px solid var(--border);
    background:#fafaf8; border-radius:0 0 12px 12px; text-align:center;
  }
  .portal-upload-btn {
    padding:12px 28px; border-radius:10px; border:2px dashed var(--border);
    background:#fff; font-family:'DM Sans',sans-serif; font-size:14px;
    font-weight:600; cursor:pointer; color:var(--text); transition:all 0.15s;
    width:100%;
  }
  .portal-upload-btn:hover { border-color:var(--pink-dark); background:rgba(244,160,176,0.08); color:var(--pink-dark); }

  /* Photo grid in chat */
  .portal-photos-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
    gap:8px; padding:16px;
  }
  .portal-photo-thumb {
    position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden;
    border:1.5px solid var(--border); cursor:pointer; transition:all 0.15s;
  }
  .portal-photo-thumb:hover { border-color:var(--purple); transform:scale(1.02); }
  .portal-photo-thumb img { width:100%; height:100%; object-fit:cover; }
  .portal-photo-date { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.6); color:#fff; font-size:9px; padding:3px 6px; text-align:center; }

  /* Lightbox */
  .portal-lightbox {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85);
    z-index:500; align-items:center; justify-content:center; cursor:pointer;
  }
  .portal-lightbox.active { display:flex; }
  .portal-lightbox img { max-width:90vw; max-height:90vh; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,0.5); }

  /* Admin: Manage Doctors panel in settings */
  .doctors-manage { margin-top:20px; }
  .doctor-row {
    display:flex; align-items:center; gap:12px; padding:12px 14px;
    background:#fff; border-radius:8px; border:1.5px solid var(--border);
    margin-bottom:8px; font-size:13px;
  }
  .doctor-row-info { flex:1; }
  .doctor-row-info strong { font-size:14px; }
  .doctor-row-info div { color:var(--text-muted); font-size:12px; margin-top:2px; }
  .doctor-row-actions { display:flex; gap:6px; }
  .doctor-status-active { color:var(--green-dark); font-weight:600; font-size:11px; }
  .doctor-status-inactive { color:var(--text-muted); font-weight:600; font-size:11px; }

  /* Portal empty state */
  .portal-empty { text-align:center; padding:60px 20px; color:var(--text-muted); }
  .portal-empty span { font-size:48px; display:block; margin-bottom:12px; }
  .portal-empty h3 { font-size:18px; color:var(--text); margin-bottom:8px; }

  /* ══════════════════════════════════════════════════════════════
     MOBILE — messenger only, hide everything else
     ══════════════════════════════════════════════════════════════ */
  /* ── MEDIUM SCREENS ── */
  @media (max-width: 1400px) {
    header { padding: 8px 16px; }
    .header-right { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
    .header-right .btn { font-size: 12px !important; padding: 6px 10px !important; }
    #todayLabel { font-size: 11px; }
    header h1 { font-size: 16px; white-space: nowrap; }
    .tabs-bar { gap: 0; }
    .tab-btn { font-size: 12px; padding: 8px 10px; }
  }
  @media (max-width: 1100px) {
    .header-right .btn { font-size: 11px !important; padding: 5px 8px !important; }
    .header-right { gap: 3px; }
    header h1 { font-size: 14px; }
    .tab-btn { font-size: 11px; padding: 6px 8px; }
    .tabs-bar { overflow-x: auto; flex-wrap: nowrap; }
    .tab-btn { white-space: nowrap; }
  }

  /* ── MOBILE ── */
  @media (max-width: 768px) {
    /* Hide desktop chrome */
    header,
    .ticker-bar,
    .tabs-bar,
    .mill-queue,
    .board-wrapper,
    .board-layout,
    #boardWrapper,
    .sidebar,
    .inbox-panel,
    .msg-panel,
    .pwa-install-btn-desktop,
    #view-board,
    #view-production,
    #view-calendar,
    #view-doctors,
    #view-settings,
    #view-portal {
      display: none !important;
    }

    /* Undo body padding/margin reserved for messenger sidebar */
    body,
    body.msn-minimized {
      padding-right: 0 !important;
      margin: 0 !important;
      overflow: hidden;
      height: 100vh;
      height: 100dvh; /* dynamic viewport for mobile browsers */
    }

    /* Messenger fills the full screen */
    .msn-panel,
    #msnPanel {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      height: 100vh !important;
      height: 100dvh !important;
      border-left: none !important;
      transform: none !important;
      z-index: 1000 !important;
      display: flex !important;
      flex-direction: column !important;
      /* Respect iOS safe areas (notch / home indicator) */
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }

    /* Hide minimize button on mobile — fullscreen only */
    #msn-minimize {
      display: none !important;
    }

    /* Don't apply minimized state on mobile */
    body.msn-minimized .msn-panel,
    body.msn-minimized #msnPanel {
      width: 100% !important;
    }

    /* Login screen takes priority when shown */
    .login-screen:not(.hidden) {
      display: flex !important;
      z-index: 2000;
    }

    /* Modal overlays + photo lightboxes must sit ABOVE the fullscreen
       messenger (z:1000) so they're actually visible on phones — without
       these overrides they open silently behind the messenger and look
       like nothing happened. Includes the case modal (QR scan flow), the
       note modal, and both photo lightboxes (admin + portal). */
    .modal-overlay,
    #modalOverlay,
    #noteModalOverlay {
      z-index: 1500 !important;
    }
    .lightbox,
    .portal-lightbox,
    #lightbox,
    #portalLightbox {
      z-index: 1600 !important;
    }

    /* Compact case modal for mobile — lab techs scanning the QR code mostly
       want to read patient info / notes / photos / history, plus toggle
       progress and reprint. Hide office-admin fields (invoice, tracking,
       puck, mill material, portal assignment, card color, QB invoice) so
       the modal fits comfortably without scrolling forever on a phone. */
    #caseModalBox.modal {
      width: 95vw !important;
      max-width: 95vw !important;
      max-height: 92vh;
      max-height: 92dvh;
      overflow-y: auto;
      padding: 14px 16px;
    }
    #caseModalBox .form-group:has(#fProduct),
    #caseModalBox .form-group:has(#fInvoice),
    #caseModalBox .form-row:has(#fTracking),
    #caseModalBox .form-row:has(#fPuck),
    #caseModalBox #portalAssignSection,
    #caseModalBox .form-group:has(.color-picker),
    #caseModalBox #linkedEmailsSection,
    #caseModalBox #messagesSection,
    #caseModalBox #qbInvoiceBtn,
    #caseModalBox #qbInvoiceLink {
      display: none !important;
    }
    /* Trim the units helper text on mobile — extra clutter under the input */
    #caseModalBox .units-hint { display: none; }
    /* Notes textarea is the main content — keep readable but not 180px tall */
    #caseModalBox #fNotes { min-height: 110px !important; }
    /* Tighter spacing between fields */
    #caseModalBox .form-group { margin-bottom: 10px; }
    /* Action bar: keep buttons readable, allow them to wrap */
    #caseModalBox .modal-actions {
      flex-wrap: wrap;
      gap: 6px;
      padding-top: 12px;
    }
    #caseModalBox .modal-actions .btn {
      font-size: 13px;
      padding: 7px 12px;
    }

    /* Hide the install button on mobile if messenger is the whole UI —
       browsers will offer install via their own prompt */
    #pwa-install-btn {
      bottom: env(safe-area-inset-bottom, 12px) !important;
      left: 12px !important;
      z-index: 9999;
    }

    /* Make any inner messenger lists fill available height */
    .msn-body,
    .msn-content,
    .msn-thread,
    #msn-thread {
      flex: 1 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    /* Bigger tap targets for messenger items */
    .msn-contact,
    .msn-section-header,
    .msn-msg {
      min-height: 44px;
    }

    /* Inputs at bottom should stick above the keyboard */
    .msn-input-row,
    .msn-compose,
    #msn-compose {
      padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
  }

/* ---------- Block C: command palette ---------- */

  /* Result row styling — uses the existing color palette so it matches the rest of the app */
  .gs-group-header { padding:8px 18px 4px; font-size:11px; font-weight:700; letter-spacing:0.5px; color:var(--text-muted); text-transform:uppercase; }
  .gs-row { display:flex; align-items:center; gap:10px; padding:8px 18px; cursor:pointer; border-left:3px solid transparent; }
  .gs-row:hover, .gs-row.gs-active { background:rgba(144,96,192,0.06); border-left-color:var(--purple); }
  .gs-row .gs-icon { font-size:16px; flex-shrink:0; width:22px; text-align:center; }
  .gs-row .gs-main { flex:1; min-width:0; }
  .gs-row .gs-title { font-size:13.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gs-row .gs-meta { font-size:11.5px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gs-row .gs-pan { font-family:'DM Mono',monospace; font-weight:700; font-size:11px; padding:2px 6px; background:var(--btn-pending,#d94040); color:#fff; border-radius:3px; }
  .gs-empty { padding:30px 20px; text-align:center; color:var(--text-muted); font-size:13px; }
  .gs-mark { background:rgba(255,220,80,0.55); color:inherit; padding:0 1px; border-radius:2px; }
  @media (max-width: 768px) {
    #globalSearchOverlay { padding-top:0 !important; align-items:stretch !important; }
    #globalSearchOverlay > div { max-height:100vh; max-height:100dvh; height:100%; border-radius:0; width:100vw; max-width:100vw; }
  }