/* ── Inbox (scoped to #panel-inbox to avoid bleed) ── */
      #panel-inbox .inbox-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
      #panel-inbox .inbox-eyebrow { font-size: var(--fs-eyebrow); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
      #panel-inbox .inbox-search { min-width:260px; flex:0 1 320px; padding:.55rem .9rem; font-size: var(--fs-sm); font-family:var(--font-sans); color:var(--text-strong); border:1px solid var(--border); border-radius:22px; background:#fff; outline:none; }
      #panel-inbox .inbox-search:focus { border-color:var(--cerulean); }

      #panel-inbox .inbox-tabrow { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:.65rem; }
      #panel-inbox .inbox-status-tabs { margin-bottom:1.1rem; }
      #panel-inbox .inbox-tab { padding:.4rem .85rem; font-size: var(--fs-xs); font-weight:600; border-radius:20px; border:1px solid var(--border); background:#fff; color:var(--text-muted); cursor:pointer; font-family:var(--font-sans); transition:all .12s; display:flex; align-items:center; gap:6px; }
      #panel-inbox .inbox-tab:hover { border-color:var(--cerulean); color:var(--cerulean); }
      #panel-inbox .inbox-tab.active { background:var(--ocean); border-color:var(--ocean); color:#fff; }
      #panel-inbox .inbox-tab .tabdot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
      #panel-inbox .inbox-tab .tabcount { font-size: var(--fs-xs); opacity:.85; }

      #panel-inbox .inbox { display:grid; grid-template-columns:340px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#fff; height:640px; box-shadow:var(--shadow-sm); }
      #panel-inbox .inbox-threads { border-right:1px solid var(--border); overflow-y:auto; }
      #panel-inbox .inbox-empty { padding:2.5rem 1.25rem; text-align:center; color:var(--text-muted); font-size: var(--fs-sm); }
      #panel-inbox .ithread { padding:13px 15px; border-bottom:1px solid rgba(6,40,64,0.06); cursor:pointer; display:flex; gap:11px; align-items:flex-start; }
      #panel-inbox .ithread:hover { background:var(--aqua-soft); }
      #panel-inbox .ithread.active { background:#e8f4f9; }
      #panel-inbox .ithread .av { width:36px; height:36px; border-radius:50%; background:var(--cerulean); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size: var(--fs-xs); flex-shrink:0; }
      #panel-inbox .ithread .tt { flex:1; min-width:0; }
      #panel-inbox .ithread .nm { font-weight:700; font-size: var(--fs-xs); color:var(--text-strong); display:flex; align-items:center; gap:6px; }
      #panel-inbox .ithread .nm .nmtext { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      #panel-inbox .ithread .nm .time { margin-left:auto; font-size: var(--fs-xs); color:var(--text-muted); font-weight:500; flex-shrink:0; }
      #panel-inbox .ithread .chbadge { font-size: var(--fs-eyebrow); font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:1px 6px; border-radius:5px; background:var(--aqua-soft); color:var(--cerulean); flex-shrink:0; }
      #panel-inbox .ithread .snip { font-size: var(--fs-xs); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
      #panel-inbox .ithread .hb { display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-xs); font-weight:700; padding:2px 8px; border-radius:11px; margin-top:5px; }
      #panel-inbox .ithread .hb.ai { background:#e2f3f8; color:#0b4f6c; }
      #panel-inbox .ithread .hb.office { background:rgba(6,40,64,0.07); color:var(--text-strong); }
      #panel-inbox .ithread .hb.esc { background:var(--status-warning-soft); color:var(--status-warning-text); }
      /* Triage weight. Unread rows keep the universal bold-plus-dot; Escalated adds an
         amber rail, a different hue from the blue unread dot. Read rows recede. */
      #panel-inbox .ithread.esc { border-left:3px solid var(--status-warning); background:var(--status-warning-soft); }
      #panel-inbox .ithread:not(.unr):not(.esc) .nm { font-weight:600; color:var(--text-muted); }
      #panel-inbox .inbox-tab .tab-sh { display:none; }
      #panel-inbox .inbox-back { display:none; }
      #panel-inbox .convo-head { position:relative; }
      /* The More menu on a desktop: a small popover under the button. A phone gets the same rows
         as a bottom sheet instead (inboxOpenActions). */
      #panel-inbox .convo-menu { position:absolute; right:12px; top:calc(100% - 6px); width:280px; z-index:5; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); padding:4px; }
      #panel-inbox .convo-menu .m-list { border:0; border-radius:8px; }
      #panel-inbox .convo-who { min-width:0; }
      #panel-inbox .ithread .hb.tech { color:#fff; }
      #panel-inbox .ithread .unread { width:8px; height:8px; border-radius:50%; background:var(--ocean); flex-shrink:0; align-self:center; }

      /* min-height:0 is load-bearing: a flex item defaults to min-height:auto and
         will not shrink below its content, so overflow-y:auto on .convo-msgs never
         engages and the right pane cannot scroll (the left pane works because it is
         a direct grid item). */
      #panel-inbox .inbox-convo { display:flex; flex-direction:column; min-width:0; min-height:0; }
      #panel-inbox .inbox-convo-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; color:var(--text-muted); font-size: var(--fs-sm); background:var(--aqua-soft); }
      #panel-inbox .inbox-convo-empty-icon { width:52px; height:52px; border-radius:50%; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--cerulean); }
      #panel-inbox .convo-head { padding:15px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-shrink:0; }
      #panel-inbox .convo-head .av { width:34px; height:34px; border-radius:50%; background:var(--cerulean); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size: var(--fs-xs); flex-shrink:0; }
      #panel-inbox .convo-head .ch-nm { font-weight:700; font-size: var(--fs-sm); color:var(--text-strong); }
      #panel-inbox .convo-head .ch-sub { font-size: var(--fs-xs); color:var(--text-muted); margin-top:1px; }
      #panel-inbox .convo-head .spacer { flex:1; }
      #panel-inbox .convo-msgs { flex:1; min-height:0; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; background:var(--aqua-soft); }
      #panel-inbox .bub { max-width:74%; padding:9px 13px; border-radius:14px; font-size: var(--fs-xs); line-height:1.45; }
      #panel-inbox .bub.in { background:#fff; border:1px solid var(--border); border-bottom-left-radius:4px; align-self:flex-start; color:var(--text-strong); }
      #panel-inbox .bub.out { background:var(--ocean); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
      /* An AI reply sits on the outgoing side but must not read as something the
         office typed. The old solid blue fill flooded the whole pane; a white
         bubble with a thin outline separates it quietly, and the stamp says AI. */
      #panel-inbox .bub.ai { background:#fff; color:var(--text-strong); align-self:flex-end; border:1px solid rgba(11,79,108,0.28); border-bottom-right-radius:4px; }
      #panel-inbox .bub.ai .stamp { color:var(--cerulean); opacity:.95; }
      #panel-inbox .bub.internal { background:var(--cta-bg); color:#4a3410; align-self:center; max-width:82%; font-size: var(--fs-xs); border-radius:9px; }
      #panel-inbox .bub .stamp { font-size: var(--fs-xs); opacity:.75; margin-top:3px; font-weight:600; }
      #panel-inbox .convo-compose { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:9px; align-items:flex-end; flex-shrink:0; }
      #panel-inbox .convo-compose textarea { flex:1; border:1px solid var(--border); border-radius:18px; padding:10px 15px; font-size:16px; line-height:1.4; min-height:44px; box-sizing:border-box; outline:none; font-family:var(--font-sans); resize:none; max-height:120px; color:var(--text-strong); background:#fff; }
      #panel-inbox .convo-compose textarea:focus { border-color:var(--cerulean); }
      #panel-inbox .convo-compose textarea:disabled { background:var(--aqua-soft); color:var(--text-muted); }
      #panel-inbox .convo-send { padding:.6rem 1.1rem; min-height:44px; font-size: var(--fs-xs); font-weight:600; background:var(--ocean); color:#fff; border:none; border-radius:20px; cursor:pointer; font-family:var(--font-sans); white-space:nowrap; }
      #panel-inbox .convo-send-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; padding:0; flex:none; }
      #panel-inbox .convo-send-icon svg { width:20px; height:20px; }
      #panel-inbox .convo-icon { flex:none; width:44px; height:44px; padding:0; border:0; border-radius:10px; background:none; color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
      #panel-inbox .convo-icon svg { width:20px; height:20px; }
      #panel-inbox .convo-icon:hover { background:var(--aqua-soft); color:var(--text-strong); }
      #panel-inbox .convo-send:hover { filter:brightness(1.06); }
      #panel-inbox .convo-send:disabled { opacity:.5; cursor:default; }
      #panel-inbox .compose-note { font-size: var(--fs-xs); color:var(--text-muted); padding:13px 16px 3px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; line-height:1.5; }
      /* The pay link that rides at the end of a composed text. Quiet, because it
         is not something to act on here -- it is a statement that it cannot be
         lost. Scoped like every rule in this file: an unscoped .compose-* would
         simply not apply inside #panel-inbox's cascade. */
      #panel-inbox .compose-locked-tail { margin:6px 16px 0; font-size: var(--fs-xs); color:var(--text-muted); line-height:1.5; word-break:break-all; }
      #panel-inbox .compose-takeover { padding:.35rem .75rem; font-size: var(--fs-xs); font-weight:700; background:var(--ocean); color:#fff; border:none; border-radius:14px; cursor:pointer; font-family:var(--font-sans); white-space:nowrap; }
      #panel-inbox .compose-takeover:hover { filter:brightness(1.06); }
      #panel-inbox .answered-link { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; border:0; background:none; font:inherit; font-size:.875rem; color:var(--text-muted); cursor:pointer; }
      #panel-inbox .answered-link svg { width:16px; height:16px; }
      #panel-inbox .answered-link:hover { color:var(--text-strong); }
      @media (max-width:820px) {
        #panel-inbox .inbox { grid-template-columns:1fr; height:auto; }
        #panel-inbox .inbox-convo { display:none; }
        #panel-inbox .inbox.show-convo .inbox-threads { display:none; }
        /* The open conversation takes the whole screen and is pinned to the
           VISIBLE viewport (--inbox-vvh / --inbox-vvtop come from visualViewport
           in 11-inbox.js), so the composer rides on top of the iOS keyboard.
           100dvh is the fallback before the first resize event. z-index 235 sits
           under the visit panel (240) and every sheet (260+). */
        #panel-inbox .inbox.show-convo .inbox-convo {
          display:flex; position:fixed; left:0; right:0; z-index:235; background:#fff;
          top:var(--inbox-vvtop, 0px); height:var(--inbox-vvh, 100dvh); min-height:0;
        }
        #panel-inbox .inbox-back { display:inline-flex; }
        #panel-inbox .convo-head { padding:8px 12px; gap:10px; padding-top:calc(8px + env(safe-area-inset-top, 0px)); }
        #panel-inbox .convo-head .ch-nm { font-size:1rem; }
        #panel-inbox .convo-head .ch-sub { font-size:.875rem; }
        #panel-inbox .convo-msgs { padding:12px; overscroll-behavior:contain; }
        #panel-inbox .bub { max-width:86%; font-size:1rem; }
        #panel-inbox .bub .stamp { font-size:.8125rem; }
        #panel-inbox .bub .stamp .msg-act { min-height:44px; padding:0 4px; }
        #panel-inbox .convo-compose { padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); gap:8px; }
        #panel-inbox .compose-note { padding:10px 12px 0; font-size:.9375rem; }
        #panel-inbox .compose-takeover { min-height:44px; padding:0 16px; font-size:1rem; }
        #panel-inbox .inbox-search { min-width:0; flex:1 1 100%; font-size:16px; min-height:44px; box-sizing:border-box; }
        /* One row: short labels, content-sized, no wrapping. */
        #panel-inbox .inbox-status-tabs { flex-wrap:nowrap; gap:6px; }
        #panel-inbox .inbox-status-tabs .inbox-tab { flex:1 1 auto; justify-content:center; min-width:0; padding:0 8px; gap:4px; white-space:nowrap; }
        #panel-inbox .inbox-tab .tab-lg { display:none; }
        #panel-inbox .inbox-tab .tab-sh { display:inline; }
        #panel-inbox .inbox-tab { min-height:44px; font-size:.8125rem; }
        #panel-inbox .ithread { min-height:64px; padding:12px 14px; }
        #panel-inbox .ithread .nm { font-size:1rem; }
        #panel-inbox .ithread .snip, #panel-inbox .ithread .nm .time { font-size:.875rem; }
        #panel-inbox .inbox-hidden-toggle { min-height:44px; }
      }

      /* ── Message viewer + resend drawer (2026-09-12) ──────────────────────
         Opens a sent message from the timeline. Not scoped under #panel-inbox:
         the drawer is appended to <body> so it can sit above every panel, and
         the lead-drawer timeline will reuse it. */
      #msg-viewer { position:fixed; inset:0; z-index:80; pointer-events:none; }
      #msg-viewer.open { pointer-events:auto; }
      #msg-viewer .mv-scrim { position:absolute; inset:0; background:rgba(6,40,64,.45);
        opacity:0; transition:opacity .18s ease; }
      #msg-viewer.open .mv-scrim { opacity:1; }
      #msg-viewer .mv-drawer { position:absolute; top:0; right:0; height:100%;
        width:min(560px,100%); background:#fbfdfe; box-shadow:-8px 0 30px rgba(6,40,64,.18);
        transform:translateX(100%); transition:transform .22s ease;
        display:flex; flex-direction:column; }
      #msg-viewer.open .mv-drawer { transform:translateX(0); }
      #msg-viewer .mv-head { position:relative; padding:1rem 1.2rem;
        border-bottom:1px solid var(--border); background:#fff; }
      #msg-viewer .mv-x { position:absolute; top:.6rem; right:.8rem; background:none;
        border:none; font-size:1.5rem; line-height:1; color:var(--text-muted); cursor:pointer; }
      #msg-viewer .mv-title { font-size:1rem; font-weight:800; padding-right:1.8rem;
        color:var(--text-strong); margin-bottom:.2rem; }
      #msg-viewer .mv-meta { font-size: var(--fs-xs); color:var(--text-muted); line-height:1.5; }
      #msg-viewer .mv-meta b { color:var(--text-strong); }
      /* Actions ABOVE the render, never below it. */
      #msg-viewer .mv-actions { border-bottom:1px solid var(--border); background:#fff;
        padding:.9rem 1.2rem; }
      #msg-viewer .mv-actions:empty { display:none; }
      #msg-viewer .mv-body { flex:1; overflow-y:auto; padding:1rem 1.2rem; }
      #msg-viewer .mv-frame { width:100%; height:100%; min-height:460px; border:1px solid var(--border);
        border-radius:10px; background:#fff; }
      #msg-viewer .mv-text { background:var(--aqua-soft); border-radius:12px; padding:.85rem 1rem;
        font-size: var(--fs-sm); line-height:1.5; white-space:pre-wrap; color:var(--text-strong); }
      #msg-viewer .mv-lbl { font-size: var(--fs-xs); font-weight:800; text-transform:uppercase;
        letter-spacing:.04em; color:var(--text-muted); margin-bottom:.4rem; }
      #msg-viewer .mv-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.55rem; }
      #msg-viewer .mv-chip { display:inline-flex; align-items:center; gap:.4rem; font-size: var(--fs-xs);
        font-weight:600; background:var(--aqua-soft); color:#0b4f6c; border-radius:999px;
        padding:.3rem .3rem .3rem .7rem; }
      #msg-viewer .mv-chip button { background:rgba(6,40,64,.12); border:none; border-radius:999px;
        width:18px; height:18px; line-height:1; cursor:pointer; color:#0b4f6c; font-size:12px; }
      #msg-viewer .mv-suggest { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
        margin-bottom:.55rem; font-size: var(--fs-xs); color:var(--text-muted); }
      #msg-viewer .mv-chip-suggest { font-size: var(--fs-xs); font-weight:700; background:#fff;
        color:var(--cerulean); border:1px dashed var(--cerulean); border-radius:999px;
        padding:.3rem .75rem; cursor:pointer; }
      #msg-viewer .mv-addrow { display:flex; gap:.5rem; }
      #msg-viewer .mv-addrow input { flex:1; font-family:inherit; font-size: var(--fs-sm);
        padding:.55rem .7rem; border:1px solid var(--border); border-radius:10px; }
      #msg-viewer .mv-addrow input:focus { outline:none; border-color:var(--ocean);
        box-shadow:0 0 0 3px rgba(26,159,196,.12); }
      /* Appearance is the button component (app.css); only layout lives here. */
      #msg-viewer .btn-mv-primary { width:100%; margin-top:.7rem; }
      #msg-viewer .btn-mv-primary:disabled { opacity:.45; cursor:not-allowed; }
      #msg-viewer .mv-note { font-size: var(--fs-xs); color:var(--text-muted); margin-top:.5rem;
        line-height:1.45; }
      /* The affordance on a bubble's stamp line. */
      #panel-inbox .bub .stamp .msg-act { background:none; border:none; padding:0; cursor:pointer;
        font:inherit; font-weight:700; color:inherit; text-decoration:underline; opacity:.95; }


/* The show-hidden toggle. Deliberately the quietest thing in the eyebrow: it is
   a way back to something you put away, not a thing to do. No border, no
   background, muted until hovered, and it sits after the counts rather than
   beside the status tabs -- giving it tab weight would make the inbox look like
   it has five things to work instead of four. */
.inbox-hidden-toggle {
  background: none; border: 0; padding: 0 0 0 .1rem; font: inherit;
  font-size: var(--fs-eyebrow); color: var(--app-text-secondary, var(--text-muted));
  cursor: pointer; opacity: .75;
}
.inbox-hidden-toggle:hover { opacity: 1; text-decoration: underline; }

/* ── Cold-start compose (a brand new email conversation) ──────────────────────
   Scoped to #panel-inbox like every rule above, and placed AFTER .convo-compose
   so the column layout wins on equal specificity. The base rule is a horizontal
   flex row built for one textarea plus a send button; a compose pane stacks
   From / Subject / Body, so it overrides direction rather than inheriting a
   layout meant for something else. */
#panel-inbox .convo-compose.compose-new { flex-direction: column; align-items: stretch; gap: 10px; }
#panel-inbox .compose-field { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--text-muted); }
#panel-inbox .compose-field > span { flex: 0 0 62px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--fs-eyebrow); }
#panel-inbox .compose-field input,
#panel-inbox .compose-field select {
  flex: 1; border: 1px solid var(--border); border-radius: 18px; padding: 9px 15px;
  font-size: 16px; min-height: 44px; box-sizing: border-box; font-family: var(--font-sans); color: var(--text-strong);
  background: #fff; outline: none;
}
#panel-inbox .compose-field input:focus,
#panel-inbox .compose-field select:focus { border-color: var(--cerulean); }
#panel-inbox .convo-compose.compose-new textarea { max-height: 220px; }
#panel-inbox .convo-compose.compose-new .convo-send { align-self: flex-end; }