/* ═══════════════════════════════════════════════════════════════
   LEGACY — the app's current stylesheet, extracted verbatim.
   ═══════════════════════════════════════════════════════════════
   This is the FLOOR, not the destination. It loads first so the app
   is usable — every overlay hidden, every panel positioned — and
   structure.css loads after it and wins on the surfaces we've done.

   The job is to delete from this file as structure.css grows. When
   it's empty, the migration is finished.
   ═══════════════════════════════════════════════════════════════ */

    /* ── "Warm Paper" design tokens (invoicing surfaces redesign) ──────
       Prefixed --wp- rather than the bare names in the handoff doc,
       so this never overrides the app's own global --accent/--danger/etc
       (those are used across the whole app, including the sidebar and
       the task/product boards' non-shared chrome — this redesign is
       scoped to invoicing). Shared classes (.column, .column-header,
       .project-card and friends) intentionally use these tokens too,
       so the new look carries onto the task and product boards, same
       as the design handoff calls for. */
    :root {
      --wp-ink: hsl(24 10% 10%);
      --wp-ink-secondary: hsl(24 8% 25%);
      --wp-ink-muted: hsl(24 8% 32%);
      --wp-ink-label: hsl(24 8% 38%);
      --wp-ink-icon: hsl(24 8% 45%);
      --wp-ink-placeholder: hsl(24 8% 42%);
      --wp-bg: hsl(34 20% 97%);
      --wp-surface: #fff;
      --wp-panel: hsl(34 19% 95.5%);
      --wp-panel-footer: hsl(34 17% 93.5%);
      --wp-accent: #1E3A5F;
      --wp-accent-hover: #16293F;
      --wp-accent-tint: hsl(215 40% 96%);
      --wp-accent-tint-border: hsl(215 40% 84%);
      --wp-danger: #A6412E;
      --wp-hairline: hsl(24 10% 10% / 0.06);
      --wp-hairline-strong: hsl(24 10% 10% / 0.08);
      --wp-rule: hsl(24 10% 10% / 0.1);
      --wp-rule-heavy: hsl(24 10% 10% / 0.2);
      --wp-font-heading: 'Times New Roman', Times, serif;
      --wp-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --wp-radius: 6px;
      --wp-shadow-card: 0 1px 2px hsl(24 10% 10% / 0.04), 0 4px 14px hsl(24 10% 10% / 0.04);
      --wp-shadow-card-hover: 0 2px 4px hsl(24 10% 10% / 0.05), 0 10px 26px hsl(24 10% 10% / 0.08);
      --wp-shadow-col: 0 2px 4px hsl(24 10% 10% / 0.07), 0 8px 18px hsl(24 10% 10% / 0.09), 0 20px 44px hsl(24 10% 10% / 0.10);
      --wp-shadow-modal: 0 2px 4px hsl(24 10% 10% / 0.06), 0 12px 30px hsl(24 10% 10% / 0.08), 0 30px 70px hsl(24 10% 10% / 0.10);
      --wp-shadow-btn: 0 1px 2px hsl(215 52% 24% / 0.18), 0 5px 16px hsl(215 52% 24% / 0.16);
      --wp-shadow-print: 0 2px 4px hsl(24 10% 10% / 0.06), 0 14px 40px hsl(24 10% 10% / 0.10);
    }
    /* Client colour palette (board card top bars, client dot, colour picker) */
    :root {
      --wp-client-blue: #4A7DB5;
      --wp-client-yellow: #D9A526;
      --wp-client-green: #5C8A5E;
      --wp-client-red: #C4553F;
      --wp-client-violet: #8A7FA8;
      --wp-client-grey: hsl(24 6% 62%);
      /* Board column tints, in DOM order — shared by all three boards so a
         per-board theme (see [data-theme] below) recolors all of them. */
      --wp-col-1: hsl(215 22% 95.5%);
      --wp-col-2: hsl(45 34% 95%);
      --wp-col-3: hsl(140 16% 95.5%);
      --wp-col-4: hsl(8 26% 96%);
    }
    /* ── Per-board themes — token swaps only, never geometry. Set via
       data-theme="…" on the board root (#boardView / #pdBoardView /
       #invoiceBoardView), persisted per board. Client-facing surfaces
       (pay page, portal, email, PDFs) never read these — they're always
       Warm Paper, the studio's brand rather than a workspace preference. ── */
    [data-theme="studio-clay"] {
      --wp-bg: hsl(30 22% 96%); --wp-panel: hsl(30 20% 94%); --wp-panel-footer: hsl(30 18% 92%);
      --wp-accent: #B4552F; --wp-accent-hover: #90411F;
      --wp-accent-tint: hsl(20 45% 95%); --wp-accent-tint-border: hsl(20 40% 82%);
      --wp-col-1: hsl(20 30% 95%); --wp-col-2: hsl(38 34% 94%); --wp-col-3: hsl(150 14% 94.5%); --wp-col-4: hsl(0 24% 95%);
      --wp-shadow-btn: 0 1px 2px hsl(20 60% 30% / 0.18), 0 5px 16px hsl(20 60% 30% / 0.16);
    }
    [data-theme="cold-slate"] {
      --wp-bg: hsl(210 16% 97%); --wp-panel: hsl(210 14% 95%); --wp-panel-footer: hsl(210 12% 93%);
      --wp-accent: #2F5C7A; --wp-accent-hover: #234659;
      --wp-accent-tint: hsl(205 40% 95%); --wp-accent-tint-border: hsl(205 35% 82%);
      --wp-col-1: hsl(205 22% 95.5%); --wp-col-2: hsl(190 20% 95%); --wp-col-3: hsl(160 16% 95.5%); --wp-col-4: hsl(235 18% 96%);
    }
    [data-theme="charcoal"] {
      --wp-ink: hsl(34 12% 94%); --wp-ink-secondary: hsl(34 10% 86%);
      --wp-ink-muted: hsl(34 8% 78%); --wp-ink-label: hsl(34 8% 70%);
      --wp-ink-icon: hsl(34 8% 62%); --wp-ink-placeholder: hsl(34 8% 58%);
      --wp-bg: #1C1A18; --wp-surface: #2E2A27; --wp-panel: #252220; --wp-panel-footer: #201D1B;
      --wp-accent: #7FB0E3; --wp-accent-hover: #9CC4EC;
      --wp-accent-tint: hsl(215 30% 26%); --wp-accent-tint-border: hsl(215 30% 40%);
      --wp-hairline: hsl(34 10% 96% / 0.08); --wp-hairline-strong: hsl(34 10% 96% / 0.11);
      --wp-rule: hsl(34 10% 96% / 0.14); --wp-rule-heavy: hsl(34 10% 96% / 0.24);
      --wp-col-1: hsl(215 18% 22%); --wp-col-2: hsl(45 14% 22%); --wp-col-3: hsl(140 12% 21%); --wp-col-4: hsl(8 18% 23%);
      --wp-shadow-card: 0 1px 2px hsl(0 0% 0% / 0.3), 0 4px 14px hsl(0 0% 0% / 0.28);
      --wp-shadow-card-hover: 0 2px 4px hsl(0 0% 0% / 0.34), 0 10px 26px hsl(0 0% 0% / 0.34);
      --wp-shadow-col: 0 2px 4px hsl(0 0% 0% / 0.3), 0 10px 24px hsl(0 0% 0% / 0.3);
      --wp-shadow-modal: 0 2px 4px hsl(0 0% 0% / 0.34), 0 14px 34px hsl(0 0% 0% / 0.36);
      --wp-shadow-btn: 0 1px 2px hsl(0 0% 0% / 0.3), 0 5px 16px hsl(0 0% 0% / 0.28);
    }
    /* ── Making Warm Paper the app's universal look: redirect the
       legacy (pre-Warm-Paper) token names the task & PD boards' own
       chrome already consume to their Warm Paper equivalents, scoped
       to #boardView / #pdBoardView. Dashboard/admin and the sidebar
       — which lives outside both board roots so this can't reach it
       — are untouched. Final step, once both are confirmed working:
       delete these board-scoped blocks and move the mappings into
       themes/default.css so Warm Paper ships as the app's default
       everywhere with no board-scoping needed at all. ── */
    #boardView, #pdBoardView, #emailBoardView {
      --bg-app: var(--wp-bg);
      --bg-white: var(--wp-surface);
      --bg-subtle: var(--wp-panel);
      --bg-hover: var(--wp-panel-footer);
      --bg-focus: var(--wp-accent-tint);
      --text-primary: var(--wp-ink);
      --text-secondary: var(--wp-ink-secondary);
      --text-tertiary: var(--wp-ink-muted);
      --text-muted: var(--wp-ink-muted);
      --text-light: var(--wp-ink-label);
      --text-lighter: var(--wp-ink-label);
      --text-placeholder: var(--wp-ink-placeholder);
      --border-default: var(--wp-hairline-strong);
      --border-light: var(--wp-hairline);
      --border-lighter: var(--wp-hairline);
      --accent: var(--wp-accent);
      --accent-hover: var(--wp-accent-hover);
      --accent-danger: var(--wp-danger);
      --danger: var(--wp-danger);
      --radius-md: var(--wp-radius);
      --radius-lg: var(--wp-radius);
      --shadow-card: var(--wp-shadow-card);
      --shadow-card-hover: var(--wp-shadow-card-hover);
      --shadow-modal: var(--wp-shadow-modal);
      --shadow-popup: var(--wp-shadow-modal);
      --panel-bg: var(--wp-accent-tint);
      --panel-border: var(--wp-accent-tint-border);
      --font-base: var(--wp-font-body);
      /* PD board's own darker-canvas trick (below) keeps working, just
         redirected to a warm-toned depth instead of cool gray. */
      --pd-board-bg: var(--wp-panel-footer);
      background: var(--bg-app);
      font-family: var(--font-base);
    }
    /* Every board's topbar blends into the paper canvas instead of
       sitting on plain white or diverging in its own padding — one
       rule, all three boards, so they can't drift apart again. */
    #boardView .topbar, #pdBoardView .topbar, #invoiceBoardView .topbar, #emailBoardView .topbar {
      background: var(--wp-bg); border-bottom: none;
    }
    /* Title: one rule, all three boards — task/PD's plain .topbar-title
       span and invoice's own .wp-inv-title h1 (a real subtitle sits
       beside it there, so it keeps its own element) are just two class
       names pointed at the exact same declaration, not two copies of
       matching numbers. */
    #boardView .topbar-title, #pdBoardView .topbar-title, .wp-inv-title {
      font-family: var(--wp-font-heading); font-weight: 400;
      font-size: 30px; color: var(--wp-ink); line-height: 1;
    }
    /* The "Members"/"Factories" button used to be a different class
       (.board-invite-btn: full pill, bold 600 text, no shadow) copied
       to match Warm Paper's numbers by hand. Now it just IS Warm
       Paper's real primary button — .board-invite-btn is gone from
       the markup and the class entirely (index.html:7676, 7337). */
    /* Card titles get Warm Paper's serif heading treatment, matching
       the invoice board's own client-card title (index.html:2693). */
    #boardView .project-card-title, #pdBoardView .project-card-title {
      font-family: var(--wp-font-heading); font-weight: 400;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { height: 100%; overflow: hidden; overscroll-behavior: none; }
    body {
      display: flex;
      flex-direction: column;
      /* iOS standalone PWA fix. 100dvh alone is unreliable on a
         home-screen app: the height is measured before the viewport
         settles after launch, so content anchors high and leaves a gap
         at the bottom until a scroll forces a re-measure ("pull it down
         to fix"). Pinning the root with position:fixed + inset:0 makes
         the app fill the REAL viewport exactly, and overscroll-behavior
         kills the rubber-band scroll that exposed the gap. The 100dvh
         lines stay as a fallback for browsers without fixed-inset quirks. */
      /* Fill the real viewport edge-to-edge. With viewport-fit=cover
         active (read by iOS when the app is added to the home screen),
         inset:0 reaches the physical screen bottom — no gap. overscroll-
         behavior:none kills the page-level rubber-band. */
      position: fixed;
      inset: 0;
      overscroll-behavior: none;
      font-family: var(--font-base);
      background: var(--bg-app);
      overflow: hidden;
    }
    .app-shell {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    /* Sidebar */
    .sidebar {
      width: 220px;
      background: var(--bg-sidebar);
      display: flex;
      flex-direction: column;
      /* env(safe-area-inset-top) keeps the logo + nav clear of the
         status bar when the drawer covers the screen in standalone mode
         (0 on desktop, so desktop layout is unchanged). */
      padding: calc(24px + env(safe-area-inset-top, 0px)) 0 24px;
      flex-shrink: 0;
    }
    /* ── Mini sidebar (desktop): collapse to an icon rail ── */
    .sidebar { position: relative; }
    .sidebar-collapse-btn {
      position: absolute; top: 8px; right: 8px; z-index: 5;
      width: 22px; height: 22px; border-radius: 50%;
      border: none; cursor: pointer; font-size: 12px; line-height: 1;
      background: rgba(255,255,255,0.08); color: var(--text-muted-cool);
      display: flex; align-items: center; justify-content: center; padding: 0;
    }
    .sidebar-collapse-btn:hover { background: rgba(255,255,255,0.18); color: var(--text-on-accent); }
    .logo-mini { display: none; }
    .nav-mini-icon { display: none; }
    @media (max-width: 768px) { .sidebar-collapse-btn { display: none; } }
    @media (min-width: 769px) {
      body.sidebar-mini .sidebar { width: 64px; }
      body.sidebar-mini .logo-full { display: none !important; }
      body.sidebar-mini .logo-mini { display: block; width: 30px; height: auto; margin: 0 auto; }
      body.sidebar-mini .nav-link { font-size: 0; justify-content: center; }
      body.sidebar-mini .nav-mini-icon { display: inline-flex; }
      body.sidebar-mini .nav-chevron,
      body.sidebar-mini .nav-sublist,
      body.sidebar-mini .nav-section-label,
      body.sidebar-mini .sidebar-tip,
      body.sidebar-mini .sidebar-user-name,
      body.sidebar-mini .theme-select,
      body.sidebar-mini .nav-badge { display: none !important; }
      body.sidebar-mini .logout-btn { display: flex !important; justify-content: center; padding: 10px 0 0; width: 100%; }
      body.sidebar-mini .logout-btn .logout-txt { display: none !important; }
      body.sidebar-mini .logout-btn .logout-ic { display: inline-flex !important; }
      body.sidebar-mini .sidebar-user-row { justify-content: center; }
    }
    .sidebar .logo {
      color: var(--text-sidebar-active);
      font-size: 18px;
      font-weight: 700;
      padding: 0 24px 32px;
      border-bottom: 1px solid var(--border-sidebar);
    }
    .sidebar nav { padding: 16px 0; flex: 1; overflow-y: auto; }
    .sidebar nav a {
      display: block;
      color: var(--text-sidebar);
      text-decoration: none;
      padding: 10px 24px;
      font-size: 14px;
      transition: background 0.15s, color 0.15s;
    }
    .sidebar nav a:hover { background: var(--bg-sidebar-hover); color: var(--text-sidebar-active); }
    .sidebar nav a.active { color: var(--text-sidebar-active); background: var(--bg-sidebar-hover); }

    /* Collapsible Boards group in the sidebar */
    .nav-group { display: flex; flex-direction: column; }
    .nav-row { display: flex; align-items: stretch; }
    .nav-row .nav-link { flex: 1; }
    .nav-chevron {
      background: none; border: none; cursor: pointer;
      width: 30px; display: flex; align-items: center; justify-content: center;
      color: var(--text-sidebar);
      padding: 0;
      transition: transform 0.2s ease, color 0.15s;
    }
    .nav-chevron:hover { color: var(--text-sidebar-active); }
    .nav-chevron.open { transform: rotate(90deg); }
    .nav-chevron svg { display: block; }
    .nav-sublist {
      display: none;
      flex-direction: column;
      padding: 2px 0 6px;
    }
    .nav-sublist.open { display: flex; }
    .nav-sublist-item {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 24px 7px 44px;
      font-size: 13px;
      color: var(--text-sidebar);
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      background: none; border: none; text-align: left; width: 100%;
      font-family: inherit;
    }
    .nav-sublist-item:hover { background: var(--bg-sidebar-hover); color: var(--text-sidebar-active); }
    .nav-sublist-item.active { color: var(--text-sidebar-active); background: var(--bg-sidebar-hover); }
    .nav-sublist-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .nav-sublist-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .nav-sublist-item.has-unread .nav-sublist-name {
      font-weight: 800; color: var(--text-sidebar-active);
    }
    .nav-sublist-unread {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--danger); flex-shrink: 0;
    }
    /* Sidebar board rows as drop targets for cross-board move. */
    .nav-sublist-item.drop-eligible { outline: 1px dashed transparent; }
    .nav-sublist-item.drop-hover {
      background: var(--bg-sidebar-hover);
      outline: 2px dashed var(--accent);
      outline-offset: -2px;
    }
    .nav-sublist-item.drop-disabled { opacity: 0.45; cursor: not-allowed; }
    .nav-sublist-empty {
      padding: 6px 24px 8px 44px; font-size: 12px; color: var(--text-sidebar); opacity: 0.5;
    }
    .nav-sublist-section {
      padding: 8px 24px 4px 44px; font-size: 10px; font-weight: 600;
      color: var(--text-sidebar); opacity: 0.55;
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    /* (sidebar Archived section removed — archived boards live in
       their own section of the dashboard instead, not the sidebar) */
    .sidebar .user {
      color: var(--text-tertiary);
      font-size: 13px;
      padding: 16px 24px;
      border-top: 1px solid var(--border-sidebar);
    }

    /* Main */
    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    #dashboardView, #boardView, #adminView, #invoiceBoardView, #pdBoardView, #emailBoardView { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
    .topbar {
      background: var(--bg-white);
      border-bottom: 1px solid var(--border-default);
      padding: 16px 24px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .topbar-title { flex: 1; }
    .hamburger-btn { display: none; }
    .sidebar-backdrop { display: none; }
    /* Public capability-token pages (?inv/?ret/?factory/?client): clients
       must never see the app's own chrome. */
    body.public-page .sidebar, body.public-page .sidebar-backdrop,
    body.public-page .sidebar-collapse-btn { display: none !important; }
    .back-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; font-family: var(--font-base); padding: 0; margin-right: 14px; white-space: nowrap; }
    .back-btn:hover { color: var(--text-primary); }

    /* Board member avatars in topbar */
    .board-members-bar { display: flex; align-items: center; gap: 8px; }
    .notify-bell-btn {
      position: relative; background: none; border: 1px solid var(--border-default);
      border-radius: 50%; width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-secondary); padding: 0;
      transition: background 0.12s, color 0.12s, border-color 0.12s;
    }
    .notify-bell-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-muted); }
    .notify-bell-dot {
      position: absolute; top: 6px; right: 6px;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--danger); border: 2px solid #fff;
    }
    .notify-item {
      display: flex; gap: 10px; padding: 12px 14px;
      border-bottom: 1px solid var(--border-light);
      cursor: pointer; transition: background 0.12s;
    }
    .notify-item:hover { background: var(--bg-hover); }
    .notify-item.unread { background: rgba(99,102,241,0.06); }
    .notify-item.unread:hover { background: rgba(99,102,241,0.10); }
    .notify-item-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: var(--text-on-accent); flex-shrink: 0;
      overflow: hidden;
    }
    .notify-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .notify-item-body { flex: 1; min-width: 0; font-size: 13px; }
    .notify-item-text { color: var(--text-primary); line-height: 1.4; }
    .notify-item-text strong { font-weight: 600; }
    .notify-item-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .notify-empty {
      padding: 32px 16px; text-align: center; font-size: 13px;
      color: var(--text-muted);
    }
    .board-member-stack { display: flex; align-items: center; }
    .board-member-avatar {
      width: 30px; height: 30px; border-radius: 50%;
      border: 2px solid var(--bg-white);
      margin-left: -8px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: var(--text-on-accent);
      background: var(--indigo); flex-shrink: 0; overflow: hidden;
      transition: transform 0.15s;
    }
    .board-member-avatar:first-child { margin-left: 0; }
    .board-member-avatar:hover { transform: translateY(-2px); z-index: 1; }
    .board-member-avatar img { width: 100%; height: 100%; object-fit: cover; }

    /* Members panel overlay */
    .members-panel-overlay {
      position: fixed; inset: 0; background: var(--overlay);
      z-index: 500; display: none; align-items: flex-start; justify-content: flex-end;
    }
    .members-panel-overlay.open { display: flex; }
    .members-panel {
      background: var(--bg-white); width: 360px; height: 100%;
      display: flex; flex-direction: column;
      box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    }
    .members-panel-header {
      padding: 20px 20px 16px;
      border-bottom: 1px solid var(--border-default);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .members-panel-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .members-panel-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-muted); padding: 0; line-height: 1; }
    .members-panel-close:hover { color: var(--text-primary); }
    .members-panel-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 28px; }

    /* Invite form */
    .invite-section-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
    }
    .invite-email-input {
      width: 100%; padding: 9px 12px; box-sizing: border-box;
      border: 1px solid var(--border-default); border-radius: var(--radius-md);
      font-size: 13px; font-family: var(--font-base); outline: none;
      color: var(--text-primary);
    }
    .invite-email-input:focus { border-color: var(--accent); }
    .invite-note-input {
      width: 100%; padding: 9px 12px; box-sizing: border-box;
      border: 1px solid var(--border-default); border-radius: var(--radius-md);
      font-size: 13px; font-family: var(--font-base); outline: none;
      resize: none; height: 72px; color: var(--text-primary); margin-top: 8px;
    }
    .invite-note-input:focus { border-color: var(--accent); }
    .invite-send-btn {
      width: 100%; margin-top: 10px; padding: 10px;
      background: var(--accent); color: var(--text-on-accent); border: none;
      border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: var(--font-base);
      transition: opacity 0.15s;
    }
    .invite-send-btn:hover { opacity: 0.85; }
    .invite-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .invite-copy-link-btn {
      width: 100%; margin-top: 8px; padding: 10px;
      background: transparent; color: var(--text-primary);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: var(--font-base); transition: background 0.15s;
    }
    .invite-copy-link-btn:hover { background: var(--bg-hover); }
    .invite-copy-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .invite-status { font-size: 12px; margin-top: 8px; text-align: center; min-height: 18px; }
    .invite-status.success { color: var(--success); }
    .invite-status.error { color: var(--accent-danger); }

    /* Member rows in panel */
    .panel-member-row {
      display: flex; align-items: center; gap: 10px; padding: 6px 0;
    }
    .panel-member-avatar {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: var(--text-on-accent);
      overflow: hidden;
    }
    .panel-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .panel-member-info { flex: 1; min-width: 0; }
    .panel-member-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
    .panel-member-email { font-size: 11px; color: var(--text-muted); }
    .panel-member-badge {
      font-size: 10px; font-weight: 600; padding: 2px 7px;
      border-radius: var(--radius-pill); background: var(--bg-hover);
      color: var(--text-muted); flex-shrink: 0;
    }
    .panel-member-badge.pending { background: #fef9c3; color: #a16207; }
    .invite-resend-link {
      flex-shrink: 0; background: none; border: none; padding: 2px 4px;
      font-family: inherit; font-size: 11px; font-weight: 600;
      color: var(--accent); cursor: pointer; border-radius: 6px;
    }
    .invite-resend-link:hover { text-decoration: underline; }
    .invite-resend-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }
    .dashboard-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 28px 24px; display: flex; flex-direction: column; gap: 32px; }
    .boards-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
    /* Archived section sits at the bottom of the dashboard. Cards dim
       to read as "put away" but stay clickable + restorable. */
    #archivedBoardsSection { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border-light); }
    #archivedBoardsGrid .board-card { opacity: 0.6; }
    #archivedBoardsGrid .board-card:hover { opacity: 0.92; }
    .boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    /* Admin board WIP-limit list */
    .admin-board-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-md); margin-bottom: 8px; background: var(--bg-white); }
    .admin-board-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
    .admin-wip-input { width: 110px; padding: 6px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; text-align: right; font-family: var(--font-base); outline: none; }
    .admin-wip-input:focus { border-color: var(--accent); }
    .admin-empty { font-size: 13px; color: var(--text-muted); padding: 12px 16px; }
    .board-card { background: var(--bg-white); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 28px 24px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; display: flex; flex-direction: column; gap: 8px; min-height: 160px; position: relative; min-width: 0; max-width: 100%; }
    .board-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-color: var(--text-muted); }
    .board-card-name { font-size: 18px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
    .board-card-meta { font-size: 13px; color: var(--text-muted); margin-top: auto; }
    /* Members + projects + tasks share one row at the bottom of each board card */
    .board-card-foot {
      margin-top: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex-wrap: nowrap;
      white-space: nowrap;
    }
    .board-card-foot .avatar-stack { flex-shrink: 0; }
    .board-card-foot .board-card-counts {
      font-size: 13px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }
    @media (max-width: 768px) {
      .board-card-foot { gap: 6px; }
      .board-card-foot .avatar-sm {
        width: 18px;
        height: 18px;
        font-size: 8px;
        border-width: 1.5px;
        margin-left: -5px;
      }
      .board-card-foot .avatar-sm:first-child { margin-left: 0; }
      .board-card-foot .board-card-counts { font-size: 11px; }
    }
    .board-card.dragging { opacity: 0.35; cursor: grabbing; }
    .board-card-placeholder { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); min-height: 160px; background: var(--bg-hover); }
    .board-card-new { border: 2px dashed var(--border-default); background: transparent; justify-content: center; align-items: center; color: var(--text-muted); font-size: 13px; }
    .board-card-new:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
    .board-card-creating { padding: 12px; gap: 8px; }
    .board-menu-btn { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.85); border: none; border-radius: 6px; width: 26px; height: 26px; font-size: 16px; cursor: pointer; display: none; align-items: center; justify-content: center; color: var(--text-tertiary); line-height: 1; padding: 0; }
    /* Desktop: reveal the ⋯ on hover. Touch: a :hover that reveals a
       hidden element makes iOS spend the first tap entering the hover
       state (so cards needed a double-tap to open). Gate the reveal to
       hover-capable pointers, and on touch just show the ⋯ always — it
       stays reachable AND the card opens on a single tap. */
    @media (hover: hover) {
      .board-card:hover .board-menu-btn { display: flex; }
      .board-menu-btn:hover { background: var(--bg-white); color: var(--text-strong); }
    }
    @media (hover: none) {
      .board-menu-btn { display: flex; }
    }
    .board-dropdown { position: fixed; background: var(--bg-white); border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 500; min-width: 120px; overflow: hidden; }
    .board-dropdown button { display: block; width: 100%; text-align: left; padding: 9px 14px; font-size: 13px; background: none; border: none; cursor: pointer; font-family: inherit; color: var(--text-primary); }
    .board-dropdown button:hover { background: var(--bg-app); }
    .board-dropdown .delete-btn { color: #e53e3e; }
    .board-name-input { padding: 8px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14px; font-family: var(--font-base); outline: none; width: 100%; }
    .board-name-input:focus { border-color: var(--accent); }
    .board-create-actions { display: flex; gap: 6px; }
    .board-create-confirm { padding: 6px 12px; background: var(--accent); color: white; border: none; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; font-family: var(--font-base); }
    .board-create-confirm:hover { background: var(--accent-hover); }
    .board-create-cancel { padding: 6px 10px; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; cursor: pointer; font-family: var(--font-base); color: var(--text-muted); }
    .board-create-cancel:hover { border-color: var(--text-muted); }
    .columns {
      flex: 1;
      display: flex;
      flex-direction: row;
      gap: 16px;
      padding: 24px;
      overflow-x: hidden;
      overflow-y: hidden;
      min-height: 0;
    }
    .column {
      background: var(--bg-white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-default);
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }
    /* Projects column keeps its pale-blue background; group panels are
       painted on it as deeper-blue rounded rects (see .proj-underlay). */
    #colProjects, #pdColProjects { background: var(--wp-col-1); }
    #pdColDesign   { background: var(--wp-col-2); }
    #pdColTechpack { background: var(--wp-col-3); }
    #pdColSample   { background: var(--wp-col-4); }
    #pdColShipped:not(.pd-collapsed) { background: var(--wp-panel); }
    #pdColProjects .column-header, #pdColDesign .column-header, #pdColTechpack .column-header,
    #pdColSample .column-header, #pdColShipped .column-header { background: var(--bg-white); }
    #colTasks         { background: var(--wp-col-2); }
    #colActive        { background: var(--wp-col-3); }
    #colCompleted     { background: var(--wp-col-4); }
    #invColProjects .column-header, #invColTasks .column-header,
    #invColActive .column-header, #invColCompleted .column-header { background: var(--bg-white); }
    /* Completed-projects section at the bottom of the PROJECTS column.
       Projects stay on the board but collapse out of the active list. */
    .projects-completed-section { margin-top: 10px; border-top: 1px solid var(--border-light); padding-top: 6px; }
    .projects-completed-header {
      width: 100%; text-align: left; background: none; border: none; cursor: pointer;
      font-family: var(--font-base);
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-muted); padding: 6px 4px; display: flex; align-items: center; gap: 6px;
    }
    .projects-completed-header:hover { color: var(--text-secondary); }
    .projects-completed-header .chev { font-size: 9px; }
    .projects-completed-body { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
    /* Project groups (folders) in the PROJECTS column — FLAT model.
       Every block (loose card, group header row, member card, "+ Add
       project" row) is a direct sibling of #projectList, so the drag
       engine only ever reorders ONE container and a card can be dropped
       anywhere: into/out of groups, between panels, top of the list.
       The blue panel itself is painted on an absolute underlay BEHIND
       the blocks (see _paintGroupPanels) that the engine never touches. */
    #projectList { position: relative; }
    .proj-underlay { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
    .proj-underlay .grp-rect {
      position: absolute;
      background: var(--panel-bg);
      border: 1px solid var(--panel-border);
      border-radius: 10px;
    }
    .projects-group-header {
      position: relative;
      width: 100%; text-align: left; background: none; border: none; cursor: pointer;
      font-family: var(--font-base);
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-muted); padding: 8px 10px 6px; margin-top: 14px;
      display: flex; align-items: center; gap: 6px;
    }
    .projects-group-header:hover { color: var(--text-secondary); }
    .projects-group-header .chev { font-size: 9px; flex-shrink: 0; }
    .projects-group-header .grp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 40px; flex-shrink: 1; }
    /* Narrow columns: the fixed-width controls were crushing the name to
       0px (tablet landscape bug). Name keeps ≥40px; anything past the
       header edge clips instead. */
    .projects-group-header { overflow: hidden; }
    .projects-group-header .grp-count { font-weight: 600; color: var(--text-lighter); }
    /* Group actions (rename / move / delete) live behind this ⋯ button so
       they're reachable on touch too — hover-reveal icons were invisible
       AND tappable-blind on mobile, so groups couldn't be deleted there. */
    .projects-group-header .grp-menu {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 15px; line-height: 1;
      padding: 2px 4px; flex-shrink: 0;
    }
    .projects-group-header .grp-menu:hover { color: var(--text-primary); }
    .grp-menu-disabled { opacity: 0.35 !important; cursor: default !important; pointer-events: none; }
    .projects-group-header .grp-eye {
      margin-left: auto; background: none; border: none; cursor: pointer;
      color: var(--text-muted); padding: 2px 4px; flex-shrink: 0;
      display: inline-flex; align-items: center; opacity: 0.85;
    }
    .projects-group-header .grp-eye svg { width: 15px; height: 15px; }
    .projects-group-header .grp-eye:hover { color: var(--text-primary); opacity: 1; }
    .projects-group-header .grp-eye.is-hidden { color: var(--accent, var(--accent-blue-soft)); opacity: 1; }
    .grp-dropdown .delete-btn { color: var(--accent-danger, var(--danger, #e53e3e)); }
    .projects-group-header .grp-drag-handle {
      cursor: grab; color: var(--text-lighter); font-size: 12px; line-height: 1;
      padding: 0 2px; flex-shrink: 0; user-select: none; touch-action: none;
    }
    .projects-group-header .grp-drag-handle:active { cursor: grabbing; }
    /* Member cards sit inset on the painted panel. */
    .project-card.grp-member { margin: 0 8px 2px; }
    /* Per-group "+ Add project" — the flat row that closes a panel. Also
       the drag boundary: dropping BELOW it files the card outside the
       group, dropping above it files it as the group's last member. */
    .group-add-row {
      position: relative;
      display: flex; align-items: center; gap: 6px;
      padding: 0 10px 6px; font-size: 12px;
      color: var(--text-muted); cursor: pointer;
    }
    .group-add-row:hover { color: var(--accent-hover, var(--accent-blue)); }
    /* The painted panel extends ~4px below this row, so without extra
       margin the next block sits ~4px away while everything else gets
       8-14px. 10px here makes below-panel spacing match above-panel. */
    .group-add-row { margin-bottom: 16px; }
    /* Collapsed pill stands alone: symmetric padding (the 4px bottom is
       for expanded headers that have cards below) and breathing room. */
    .projects-group-header[data-collapsed="1"] { margin-bottom: 16px; padding-top: 14px; padding-bottom: 14px; }
    .group-add-row .plus { font-size: 15px; line-height: 1; }
    .project-card.project-card-completed { opacity: 0.62; }
    .project-card.project-card-completed:hover { opacity: 0.92; }
    /* Hide isolate / move controls on completed cards — they're done. */
    .project-card.project-card-completed .card-footer { display: none; }
    #colProjects  .column-header { background: var(--bg-white); }
    #colTasks     .column-header { background: var(--bg-white); }
    #colActive    .column-header { background: var(--bg-white); }
    #colCompleted .column-header { background: var(--bg-white); }
    .column-header {
      padding: 14px 16px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-bottom: 1px solid var(--border-light);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      flex-shrink: 0;
    }
    .column-body {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      min-height: 0;
    }
    .add-project {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 12px 16px;
      color: var(--text-light);
      text-decoration: none;
      font-size: 13px;
      border-top: 1px solid var(--border-light);
      transition: color 0.15s;
      flex-shrink: 0;
    }
    .add-project:hover { color: var(--accent-hover); }
    .add-project .plus { font-size: 18px; line-height: 1; }

    /* Project card */
    .project-card {
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      cursor: pointer;
      box-shadow: var(--shadow-card);
      transition: box-shadow 0.15s, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.15s;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex-shrink: 0;
      min-height: 82px;
      position: relative;
    }
    /* Unread activity indicator — dark outline like unread messages */
    .project-card.has-unread {
      border-color: #1e293b;
      box-shadow: 0 0 0 1.5px #1e293b;
    }
    /* Small red dot next to the title of a card with unread activity */
    .project-card.has-unread .project-card-title::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--danger);
      margin-right: 8px;
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
    /* Workflow action buttons in task modal */
    .workflow-actions {
      display: flex; gap: 8px; padding: 10px 14px 14px;
      border-top: 1px solid var(--border-light);
      flex-shrink: 0;
    }
    .workflow-btn {
      flex: 1; padding: 7px 10px; border-radius: var(--radius-md);
      font-size: 12px; font-weight: 600; cursor: pointer;
      font-family: var(--font-base); border: 1.5px solid transparent;
      transition: background 0.12s, color 0.12s;
    }
    .workflow-review {
      background: var(--info-bg); color: var(--accent-link); border-color: #bfdbfe;
    }
    .workflow-review:hover { background: var(--info-border); }
    .workflow-review.active {
      background: var(--accent-link); color: var(--text-on-accent); border-color: var(--accent-link);
    }
    .workflow-review.active:hover { background: #1e40af; }
    .workflow-revision {
      background: var(--warning-bg); color: var(--warning-strong); border-color: #fed7aa;
    }
    .workflow-revision:hover { background: #ffedd5; }
    .workflow-revision.active {
      background: var(--warning-strong); color: var(--text-on-accent); border-color: var(--warning-strong);
    }
    .workflow-revision.active:hover { background: #9a3412; }
    .workflow-btn.dim {
      opacity: 0.5;
    }
    .workflow-btn.dim:hover { opacity: 0.7; }
    /* Workflow status pill on active task cards */
    /* Superseded by the shared pill in structure.css. */
    .card-workflow-pill {
      font-size: 10px; font-weight: 600; border-radius: 20px;
      padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
    }
    .card-workflow-pill.review   { background: var(--info-bg); color: var(--accent-link); }
    .card-workflow-pill.revision { background: var(--warning-bg); color: var(--warning-strong); }
    /* Renamed .card-header — it holds the title and the ⋯ menu.
       .card-body now means the free middle region. See structure.css. */
    .card-header {
      flex: 1; padding: 12px 14px;
      display: flex; align-items: flex-start; justify-content: space-between;
    }
    .card-footer {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 10px;
      border-top: 1px solid var(--border-light);
      flex-shrink: 0;
    }
    /* hover-only: on touch a transform-on-hover can also cost the first
       tap, so gate it — touch cards then open on a single tap. */
    @media (hover: hover) {
      .project-card:hover {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-1px);
      }
    }
    .project-card.proj-drag-src { opacity: 0.35; cursor: grabbing; transform: scale(0.97) !important; }
    .project-card.proj-shift-down { transform: translateY(12px) !important; }
    .project-card.proj-shift-up   { transform: translateY(-12px) !important; }
    .drop-indicator { height: 3px; border-radius: 2px; background: var(--accent); margin: 2px 4px; pointer-events: none; flex-shrink: 0; }
    /* Mobile-only column pagination dots — hidden on desktop. */
    .columns-dots { display: none; }
    /* PointerDrag — shared drag visuals */
    .pd-drop-indicator {
      height: 3px;
      border-radius: 2px;
      background: var(--accent, var(--accent-blue-soft));
      margin: 4px 6px;
      pointer-events: none;
      flex-shrink: 0;
      animation: pd-indicator-in 120ms ease-out;
    }
    @keyframes pd-indicator-in {
      from { opacity: 0; transform: scaleX(0.4); }
      to { opacity: 1; transform: scaleX(1); }
    }
    /* Placeholder shows where the dragged card will land. Same footprint
       as the source card so surrounding siblings keep the gap stable
       while the user is dragging. */
    .pd-placeholder {
      background: rgba(59, 130, 246, 0.06);
      border: 1.5px dashed rgba(59, 130, 246, 0.45);
      border-radius: var(--radius-lg, 10px);
      pointer-events: none;
      flex-shrink: 0;
      box-sizing: border-box;
      /* Positioned so it paints above the group-panel underlay in the
         PROJECTS column (absolute underlay vs in-flow siblings). */
      position: relative;
    }
    .pd-ghost {
      border-radius: var(--radius-lg, 12px);
      cursor: grabbing;
      will-change: transform, left, top;
    }
    .pd-cross-hover {
      outline: 2px solid var(--accent, var(--accent-blue-soft)) !important;
      outline-offset: 1px;
      background: rgba(59, 130, 246, 0.08) !important;
    }
    body.pd-dragging { cursor: grabbing; }
    body.pd-dragging, body.pd-dragging * {
      cursor: grabbing !important;
      user-select: none !important;
      -webkit-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
    }
    /* Disable CSS scroll-snap on the columns carousel while a drag is
       in progress — without this, programmatic edge auto-scroll fights
       with the snap-back and the carousel appears frozen. */
    /* .columns is the legacy name; the carousel is .canvas since the
       structure.css restructure — cover both or mobile cross-column
       drags freeze at the screen edge. */
    body.pd-dragging .columns,
    body.pd-dragging .canvas { scroll-snap-type: none !important; }
    .project-card.task-drop-target { outline: 2px dashed var(--accent); background: var(--bg-focus) !important; }
    .project-card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .project-card-open { font-size: 16px; color: var(--text-placeholder); flex-shrink: 0; }
    .card-menu-btn {
      display: flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border: none; background: none; cursor: pointer;
      color: var(--text-muted); font-size: 15px; border-radius: var(--radius-sm);
      flex-shrink: 0; padding: 0; line-height: 1;
    }
    .card-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
    .project-card.filter-active { box-shadow: 0 0 0 2px #0891b2; }
    /* Eye toggle in the card footer: hide/show this project's tasks. */
    .card-eye {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 22px; border: none; background: none; cursor: pointer;
      color: var(--text-muted); border-radius: var(--radius-sm); flex-shrink: 0; padding: 0;
    }
    .card-eye:hover { background: var(--bg-hover); color: var(--text-primary); }
    .card-eye.is-hidden { color: var(--accent, var(--accent-blue-soft)); }
    /* Isolate — tiny ① button: show ONLY this project's (or group's)
       tasks. A one-click macro over the same hiddenProjIds the eyes use
       (it flips every OTHER project's eye off), so isolate and the eyes
       can never disagree. Glows while its exact isolation is active. */
    .card-iso, .grp-iso {
      display: inline-flex; align-items: center; justify-content: center;
      width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%;
      background: none; cursor: pointer; color: var(--text-muted);
      font-size: 8px; font-weight: 700; line-height: 1; padding: 0;
      flex-shrink: 0; opacity: 0.85; box-sizing: border-box;
      font-family: var(--font-base);
    }
    /* Negative margins tuck the ① against the eye (the eye button/span
       carries its own internal padding). */
    .card-iso { margin-left: -4px; }
    .grp-iso { margin-left: -4px; }
    .card-iso:hover, .grp-iso:hover { color: var(--text-primary); opacity: 1; }
    .card-iso.is-active, .grp-iso.is-active {
      color: var(--accent, var(--accent-blue-soft));
      background: rgba(59, 130, 246, 0.12);
      box-shadow: 0 0 7px rgba(59, 130, 246, 0.65);
      opacity: 1;
    }
    .project-card.is-hidden { opacity: 0.5; }
    .project-card.is-hidden:hover { opacity: 0.85; }
    .isolate-label { font-size: 10px; font-weight: 500; color: var(--text-lighter); white-space: nowrap; user-select: none; }
    .isolate-toggle { position: relative; display: inline-flex; align-items: center; width: 26px; height: 14px; flex-shrink: 0; cursor: pointer; }
    .isolate-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .isolate-track {
      position: absolute; inset: 0; border-radius: 7px;
      background: var(--border-default); transition: background 0.18s;
    }
    .isolate-thumb {
      position: absolute; top: 2px; left: 2px;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--bg-white); transition: transform 0.18s; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }
    .isolate-toggle input:checked ~ .isolate-track { background: #0891b2; }
    .isolate-toggle input:checked ~ .isolate-thumb { transform: translateX(12px); }
    .filter-active-chip {
      display: flex; align-items: center; gap: 6px;
      padding: 5px 10px; margin: 0 0 8px; cursor: default;
      background: #e0f7fa; border: 1px solid #80deea; border-radius: var(--radius-md);
      font-size: 11px; font-weight: 500; color: #006064;
    }
    .filter-active-chip button {
      background: none; border: none; cursor: pointer; font-size: 13px;
      color: #006064; padding: 0; line-height: 1; margin-left: auto;
    }
    .card-move-btn {
      display: flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; border: none; background: none; cursor: pointer;
      color: var(--text-lighter); font-size: 11px; border-radius: var(--radius-sm);
      flex-shrink: 0; padding: 0; line-height: 1;
    }
    .card-move-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
    .card-move-btn:disabled { opacity: 0.25; cursor: default; }

    /* ── Tags ── */
    .tag-row {
      display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
      padding: 0 8px 10px; min-height: 30px;
    }
    .tag-add-btn {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 11px; color: var(--text-light); background: none;
      border: 1px dashed var(--border-default); border-radius: var(--radius-pill);
      padding: 3px 9px; cursor: pointer; line-height: 1; white-space: nowrap;
    }
    .tag-add-btn:hover { border-color: var(--text-muted); color: var(--text-secondary); background: var(--bg-hover); }
    .tag-pill {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 500; border-radius: var(--radius-pill);
      padding: 3px 8px 3px 6px; line-height: 1; white-space: nowrap;
    }
    .tag-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
    .tag-pill-remove {
      display: inline-flex; align-items: center; justify-content: center;
      width: 13px; height: 13px; border: none; background: none;
      cursor: pointer; font-size: 8px; border-radius: 50%;
      opacity: 0.55; padding: 0; line-height: 1; margin-left: 1px;
    }
    .tag-pill-remove:hover { opacity: 1; background: rgba(0,0,0,0.12); }
    .tag-picker {
      position: fixed; background: var(--bg-white); border: 1px solid var(--border-default);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-popup); z-index: 700;
      width: 220px; padding: 8px; display: flex; flex-direction: column; gap: 5px;
    }
    .tag-picker-input {
      width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
      padding: 6px 10px; font-size: 13px; outline: none; box-sizing: border-box;
    }
    .tag-picker-input:focus { border-color: var(--accent-active-text); }
    .tag-picker-list { display: flex; flex-direction: column; gap: 1px; max-height: 200px; overflow-y: auto; }
    .tag-picker-item {
      display: flex; align-items: center; gap: 8px; padding: 6px 8px;
      border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; user-select: none;
    }
    .tag-picker-item:hover { background: var(--bg-hover); }
    .tag-picker-item.already { opacity: 0.4; cursor: default; }
    .tag-picker-create {
      display: flex; align-items: center; gap: 6px; padding: 6px 8px;
      border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
      color: var(--accent-active-text); font-weight: 500;
    }
    .tag-picker-create:hover { background: var(--bg-focus); }
    .tag-picker-empty { font-size: 12px; color: var(--text-muted); padding: 4px 8px; }

    /* ── Tags feature: hidden for now (leaner, WhatsApp-style UI). ─────────
       The data model, picker, and renderTagRow code are all still in place.
       To bring tags back, delete this block. */
    .tag-row,
    .card-tags,
    .tag-picker { display: none !important; }
    /* ──────────────────────────────────────────────────────────────────── */

    .card-dropdown {
      position: fixed; background: var(--bg-white); border: 1px solid var(--border-default);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-popup); z-index: 500;
      min-width: 180px; padding: 8px;
    }
    .card-dropdown-scrim { position: fixed; inset: 0; z-index: 499; background: none; }
    .card-dropdown-label {
      font-size: 11px; font-weight: 600; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 4px 8px;
    }
    .card-color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 6px; }
    .card-color-swatch {
      width: 100%; aspect-ratio: 2/1; border-radius: var(--radius-sm); cursor: pointer;
      border: 2px solid transparent; transition: transform 0.1s; outline: none;
    }
    .card-color-swatch:hover { transform: scale(1.08); }
    .card-color-swatch.active { border-color: var(--accent); }
    .card-color-remove {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      width: 100%; padding: 6px; font-size: 12px; background: var(--bg-hover);
      border: 1px solid var(--border-default); border-radius: var(--radius-sm);
      cursor: pointer; margin-bottom: 6px; color: var(--text-secondary);
      font-family: var(--font-base);
    }
    .card-color-remove:hover { background: var(--bg-focus); }
    .card-dropdown-divider { border: none; border-top: 1px solid var(--border-light); margin: 4px 0; }
    .card-dropdown-action {
      display: block; width: 100%; padding: 8px 14px;
      font-size: 13px; text-align: left; background: none;
      border: none; cursor: pointer; color: var(--text-primary);
      font-family: var(--font-base);
    }
    .card-dropdown-action:hover { background: var(--bg-hover); }
    .card-dropdown-back {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 14px; font-size: 11px; color: var(--text-muted);
      background: none; border: none; cursor: pointer;
      font-family: var(--font-base);
    }
    .card-dropdown-back:hover { color: var(--text-primary); }
    .card-dropdown-board {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 8px 14px;
      font-size: 13px; text-align: left; background: none;
      border: none; cursor: pointer; color: var(--text-primary);
      font-family: var(--font-base);
    }
    .card-dropdown-board:hover { background: var(--bg-hover); }
    .card-dropdown-board-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    }
    .card-dropdown-empty {
      padding: 8px 14px; font-size: 12px; color: var(--text-muted);
    }
    .card-dropdown-del {
      display: block; width: 100%; text-align: left; padding: 7px 8px; font-size: 13px;
      background: none; border: none; cursor: pointer; font-family: var(--font-base);
      color: var(--accent-danger); border-radius: var(--radius-sm);
    }
    .card-dropdown-del:hover { background: var(--bg-hover); }
    .project-card-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; overflow-wrap: anywhere; padding-right: 6px; }
    .project-card-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
    }
    .avatar-stack { display: flex; }
    .avatar-sm {
      width: 22px;
      height: 22px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      color: var(--bg-white);
      border: 2px solid var(--bg-white);
      margin-left: -6px;
    }
    .avatar-sm:first-child { margin-left: 0; }
    .card-msg-count {
      font-size: 11px;
      color: var(--text-light);
      margin-left: 4px;
    }

    /* Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--overlay);
      z-index: 100;
      justify-content: center;
      align-items: center;
    }
    .modal-overlay.open { display: flex; }

    .modal {
      background: var(--bg-white);
      border-radius: var(--radius-xl);
      width: 1041px;
      max-width: 98vw;
      height: 88vh;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-modal);
      overflow: hidden;
      position: relative;
    }

    .modal-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 28px;
      flex-shrink: 0;
      border-bottom: 1px solid var(--border-light);
    }
    .modal-breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-lighter);
    }
    .breadcrumb-sep { color: var(--border-lighter); }
    .breadcrumb-current { color: var(--text-tertiary); font-weight: 500; }
    .modal-close {
      background: none;
      border: none;
      font-size: 20px;
      color: var(--text-light);
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .modal-close:hover { color: var(--accent-hover); }
    /* Big translucent back arrow — mobile only (hidden by default,
       shown inside the @media (max-width: 768px) block). Lives in the
       modal-title-row but positioned absolutely so it doesn't take
       part in the flex layout. Photo-gallery style: large, semi-
       transparent dark glyph that floats over the header. */
    .modal-back {
      display: none;
      position: absolute;
      left: 8px;
      top: 4px;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.42);
      transition: color 0.15s ease, transform 0.12s ease;
      z-index: 5;
    }
    .modal-back:hover { color: rgba(0, 0, 0, 0.6); }
    .modal-back:active { transform: scale(0.92); }
    .modal-back svg { display: block; }
    /* "+ Task" in the project modal header — desktop hides it (the Tasks
       section already has "+ Add Task"); shown only on mobile where that
       section is collapsed. Never shown while creating a new project. */
    .modal-add-task-btn {
      display: none;
      background: var(--accent); color: var(--text-on-accent); border: none;
      border-radius: 999px; font-size: 13px; font-weight: 600;
      padding: 7px 14px; cursor: pointer; font-family: var(--font-base);
      white-space: nowrap; line-height: 1;
    }
    .modal-add-task-btn:active { transform: scale(0.96); }
    .modal.create-mode .modal-add-task-btn { display: none !important; }

    .project-title-edit {
      font-size: 16px;
      font-weight: 700;
      color: var(--accent);
      outline: none;
      border-radius: var(--radius-sm);
      padding: 2px 8px;
      margin-bottom: 0;
      cursor: text;
      min-height: 24px;
      line-height: 1.3;
      word-break: break-word;
    }
    .project-title-edit:empty::before { content: 'Task name'; color: var(--text-placeholder); font-weight: 400; }
    .project-title-edit:hover:not(:focus) { background: var(--bg-hover); }
    .project-title-edit:focus { background: var(--bg-focus); }
    .project-created-date {
      font-size: 10px;
      color: var(--text-light);
      padding: 0 8px 2px;
      margin-top: 0;
    }
    /* Mobile-only horizontal "comma-separated names" line under the title
       (hidden on desktop — desktop keeps the dedicated members panel). */
    .member-names-line {
      display: none;
      font-size: 10px;
      color: var(--text-light);
      padding: 0 8px 2px;
      line-height: 1.4;
      word-break: break-word;
    }

    /* ── Info popup (WhatsApp-style "Group Info" for project/task title) ── */
    .info-popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 1500;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .info-popup-overlay.open { display: flex; }
    .info-popup {
      background: var(--bg-white, var(--bg-white));
      border-radius: 16px;
      width: 100%;
      max-width: 460px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
      padding: 24px 24px 20px;
      position: relative;
    }
    .info-popup-close {
      position: absolute;
      top: 12px;
      right: 14px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-muted, #6b7280);
      font-size: 18px;
      cursor: pointer;
    }
    .info-popup-close:hover { background: var(--border-light, var(--gray-100)); }
    .info-popup-breadcrumb {
      font-size: 11px;
      color: var(--text-light, var(--text-muted-cool));
      text-align: center;
      padding: 0 32px 8px;
      line-height: 1.4;
      word-break: break-word;
    }
    .info-popup-breadcrumb .breadcrumb-sep {
      margin: 0 4px;
      color: var(--border-lighter, #d1d5db);
    }
    .info-popup-titlewrap { text-align: center; padding: 4px 24px 14px; border-bottom: 1px solid var(--border-light, var(--gray-200)); }
    .info-popup-title {
      font-size: 22px;
      font-weight: 700;
      color: var(--text-primary, var(--text-strong));
      outline: none;
      line-height: 1.25;
      margin-bottom: 6px;
    }
    .info-popup-title:focus { background: var(--bg-light, var(--gray-50)); border-radius: 6px; padding: 2px 6px; }
    .info-popup-title:empty::before { content: attr(data-placeholder); color: var(--text-lighter, var(--text-muted-cool)); }
    .info-popup-date {
      font-size: 11px;
      color: var(--text-light, var(--text-muted-cool));
    }
    .info-popup-section { padding: 14px 0 4px; border-bottom: 1px solid var(--border-light, var(--gray-200)); }
    .info-popup-section:last-child { border-bottom: none; }
    .info-popup-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted, #6b7280);
      margin-bottom: 8px;
    }
    .info-popup-desc {
      font-size: 14px;
      color: var(--text-secondary, #374151);
      outline: none;
      line-height: 1.45;
      min-height: 20px;
      padding: 4px 0;
    }
    .info-popup-desc:focus { background: var(--bg-light, var(--gray-50)); border-radius: 6px; padding: 6px; }
    .info-popup-desc:empty::before { content: attr(data-placeholder); color: var(--text-lighter, var(--text-muted-cool)); }
    .info-popup-members {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .info-popup-member {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 6px 0;
    }
    .info-popup-member-avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-on-accent);
      font-size: 13px;
      font-weight: 600;
      flex-shrink: 0;
      overflow: hidden;
    }
    .info-popup-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .info-popup-member-name {
      font-size: 14px;
      color: var(--text-primary, var(--text-strong));
      font-weight: 500;
    }
    /* Tasks list inside the project info popup */
    .info-popup-tasks {
      display: flex; flex-direction: column; gap: 4px;
      max-height: 260px; overflow-y: auto;
    }
    .info-popup-task {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      background: var(--bg-light, var(--gray-50));
      cursor: pointer;
      transition: background 0.1s;
    }
    .info-popup-task:hover {
      background: var(--bg-hover, var(--gray-100));
    }
    .info-popup-task-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    /* Match the app's column conventions:
       Tasks (backlog) = yellow, Active = green, Completed = red */
    .info-popup-task-dot.task { background: #eab308; }
    .info-popup-task-dot.active { background: var(--success); }
    .info-popup-task-dot.completed { background: var(--danger-strong); }
    .info-popup-task-name {
      flex: 1; min-width: 0;
      font-size: 13px;
      color: var(--text-primary, var(--text-strong));
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .info-popup-task-name.completed {
      text-decoration: line-through;
      color: var(--text-muted, #888);
    }
    .info-popup-task-status {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .info-popup-task-status.review   { background: var(--info-bg); color: var(--accent-link); }
    .info-popup-task-status.revision { background: var(--warning-bg); color: var(--warning-strong); }
    .info-popup-tasks-empty {
      font-size: 13px;
      color: var(--text-muted, #888);
      padding: 4px 0;
      font-style: italic;
    }
    .project-desc-edit {
      font-size: 11px;
      color: var(--text-secondary);
      outline: none;
      border-radius: var(--radius-sm);
      padding: 8px;
      min-height: 32px;
      max-height: 51px;
      overflow-y: auto;
      cursor: text;
      line-height: 1.6;
      font-family: var(--font-base);
    }
    .project-desc-edit:empty::before { content: 'Add a description…'; color: var(--text-placeholder); }
    .project-desc-edit:hover:not(:focus) { background: var(--bg-hover); }
    .project-desc-edit:focus { background: var(--bg-focus); }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 0 28px 20px;
      flex-shrink: 0;
    }
    .btn {
      padding: 9px 20px;
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: background 0.15s;
    }
    .btn-cancel { background: var(--border-light); color: var(--text-tertiary); }
    .btn-cancel:hover { background: var(--border-default); }
    .btn-submit { background: var(--accent); color: var(--bg-white); }
    .btn-submit:hover { background: var(--accent-hover); }

    /* Discussion section */
    .discussion {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
      border-right: 1px solid var(--border-light);
    }
    .discussion-label {
      padding: 14px 28px 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-tertiary);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .discussion-label span {
      font-size: 11px;
      color: var(--text-light);
      font-weight: 400;
    }
    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 0 28px 12px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .message {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      background: var(--bg-subtle);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      border: 1px solid var(--border-light);
    }
    .avatar {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: var(--bg-white);
      flex-shrink: 0;
    }
    /* min-width: 0 is required so this flex child can shrink below its
       content's intrinsic width — without it, a long unbreakable child
       (like a nowrap reply quote) pushes the whole bubble past the
       viewport on mobile. */
    .message-body { flex: 1; min-width: 0; }
    .message-meta {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 3px;
    }
    .message-author { font-size: 13px; font-weight: 700; color: var(--text-primary); }
    .message-time { font-size: 11px; color: var(--text-lighter); }
    .message-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
    /* Attachments live in their own block below the text so they never
       wrap to the same line as the last word. The children (img / video /
       file-card / pdf-card) still flow horizontally and wrap among
       themselves, WhatsApp-style. */
    .msg-attachments {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
      align-items: flex-start;
    }
    .msg-attachments > img,
    .msg-attachments > video,
    .msg-attachments > .msg-pdf-card,
    .msg-attachments > .msg-file-card,
    .msg-attachments > .msg-audio {
      margin: 0 !important;  /* gap handles spacing */
    }
    .message-text ol, .message-text ul,
    .message-input ol, .message-input ul { padding-left: 20px; }
    .message-text img { max-width: 180px !important; max-height: 220px; border-radius: var(--radius-sm); margin: 6px 6px 0 0 !important; display: inline-block !important; vertical-align: top; cursor: pointer; object-fit: cover; }
    .message-text video { display: inline-block !important; vertical-align: top; margin: 6px 6px 0 0 !important; max-width: 240px !important; max-height: 220px; }
    .message-text img:hover { opacity: 0.9; }

    /* Message hover actions — minimal: no popup chrome, just icons. */
    .message { position: relative; }
    .msg-actions {
      display: none;
      position: absolute;
      top: 2px;
      right: 4px;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      flex-direction: row;
      align-items: center;
      gap: 2px;
      z-index: 10;
    }
    .message:hover .msg-actions { display: flex; }
    .msg-action-btn {
      width: 28px;
      height: 28px;
      border: none;
      background: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      opacity: 0.65;
      padding: 0;
      transition: opacity 0.12s, background-color 0.12s, color 0.12s;
    }
    .msg-action-btn svg { display: block; }
    .msg-action-btn:hover {
      opacity: 1;
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .msg-action-danger:hover { color: var(--accent-danger); }
    .msg-edited { font-size: 10px; color: var(--text-lighter); margin-left: 4px; font-style: italic; }
    /* Brief background-flash so the user can spot the message they
       jumped to when clicking a reply-quote bubble. */
    @keyframes msgJumpFlash {
      0%   { background-color: rgba(99, 102, 241, 0.18); }
      100% { background-color: transparent; }
    }
    .message.msg-jump-flash { animation: msgJumpFlash 1.6s ease-out; border-radius: 8px; }
    .msg-reply-quote {
      border-left: 3px solid var(--border-lighter); background: var(--bg-subtle);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      padding: 3px 8px; margin-bottom: 4px; font-size: 12px; color: var(--text-muted);
      cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      /* Without max-width, the element grows to fit content (nowrap),
         which overflows the message bubble on narrow viewports. */
      max-width: 100%; min-width: 0; box-sizing: border-box;
    }
    .msg-reply-quote strong { color: var(--text-secondary); }
    .msg-reply-quote { cursor: pointer; transition: background-color 0.12s; }
    .msg-reply-quote:hover { background: var(--bg-hover, var(--gray-100)); }
    .msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
    .reaction-chip {
      display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
      background: var(--bg-hover); border: 1px solid var(--border-default);
      border-radius: var(--radius-pill); font-size: 12px; cursor: pointer;
      transition: background 0.1s; user-select: none; font-family: var(--font-base);
    }
    .reaction-chip:hover, .reaction-chip.mine { background: var(--accent-active-bg); border-color: var(--accent-active-text); }
    .reaction-count { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
    .reply-preview {
      display: none; padding: 6px 12px; background: var(--bg-subtle);
      border-bottom: 1px solid var(--border-light); font-size: 12px;
      color: var(--text-muted); align-items: center; gap: 8px;
    }
    .reply-preview.open { display: flex; }
    .reply-preview-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .reply-preview-text strong { color: var(--text-secondary); }
    .reply-cancel { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
    .reply-cancel:hover { color: var(--text-primary); }
    .msg-edit-wrap { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; margin-top: 4px; }
    .msg-edit-input {
      min-height: 40px; max-height: 120px; overflow-y: auto; padding: 8px 10px;
      font-size: 13px; font-family: var(--font-base); color: var(--text-primary); outline: none; line-height: 1.5;
    }
    .msg-edit-footer {
      display: flex; align-items: center; gap: 6px; padding: 4px 8px;
      background: var(--bg-subtle); border-top: 1px solid var(--border-light);
    }
    .msg-edit-hint { font-size: 11px; color: var(--text-muted); flex: 1; }
    .msg-edit-cancel { padding: 4px 10px; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; font-family: var(--font-base); color: var(--text-muted); }
    .msg-edit-cancel:hover { border-color: var(--text-muted); }
    .msg-edit-save { padding: 4px 10px; background: var(--accent); color: var(--bg-white); border: none; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; font-family: var(--font-base); }
    .msg-edit-save:hover { background: var(--accent-hover); }
    /* ── Mobile collapsible section toggles ──────────────────────────────── */
    .m-section-toggle { display: none; }
    .m-desktop-label { }

    /* ── Image lightbox ─────────────────────────────────────────────────── */
    #imgLightbox {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,.82);
      z-index: 10050; align-items: center; justify-content: center; /* above the factory portal (10000) */
    }
    #imgLightbox.open { display: flex; }
    #imgLightbox img {
      width: 2000px; max-width: 95vw; max-height: 95vh; border-radius: 8px;
      box-shadow: 0 8px 40px rgba(0,0,0,.6); object-fit: contain;
      cursor: zoom-out;
      transition: transform 0.16s ease;
      touch-action: none; /* our own pan/swipe handling */
    }
    #imgLightbox img.is-panning { transition: none; }
    #imgLightbox img.is-zoomed { cursor: grab; }
    #imgLightbox img.is-zoomed:active { cursor: grabbing; }
    /* Bottom control bar — a dark pill holding ‹ count › so the nav
       arrows stay legible over light images (Slack-style). */
    #imgLightboxControls {
      position: fixed; left: 50%; transform: translateX(-50%);
      bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      display: flex; align-items: center; gap: 10px;
      background: rgba(0,0,0,0.62); border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px; padding: 6px 10px; z-index: 9001;
      -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    }
    .lightbox-nav-btn {
      width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
      background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
      color: var(--text-on-accent); font-size: 24px; cursor: pointer; padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s; user-select: none;
    }
    .lightbox-nav-btn:hover { background: rgba(255,255,255,0.28); }
    .lightbox-nav-btn:disabled { opacity: 0.3; cursor: default; }
    #imgLightboxCounter {
      color: var(--text-on-accent); font-size: 14px; font-weight: 600; user-select: none;
      min-width: 56px; text-align: center; letter-spacing: 0.3px;
    }
    .message-text img { cursor: zoom-in; }

    /* ── PDF thumbnail + viewer ──────────────────────────────────────────── */
    .msg-pdf-card {
      display: inline-block; vertical-align: top; margin: 6px 6px 0 0;
      border: 1px solid var(--border-default); border-radius: 8px;
      overflow: hidden; cursor: pointer; background: var(--bg-white);
      transition: box-shadow 0.15s, transform 0.05s;
      width: 200px; user-select: none;
    }
    .msg-pdf-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
    .msg-pdf-card:active { transform: scale(0.99); }
    .msg-pdf-thumb {
      width: 100%; height: 240px; object-fit: cover; display: block;
      background: var(--bg-app); border-bottom: 1px solid var(--border-light);
    }
    .msg-pdf-thumb-fallback {
      width: 100%; height: 240px; display: flex; align-items: center;
      justify-content: center; background: var(--bg-app);
      font-size: 48px; color: var(--danger-strong); border-bottom: 1px solid var(--border-light);
    }
    .msg-pdf-info {
      display: flex; align-items: center; gap: 8px; padding: 8px 10px;
      font-size: 12px; color: var(--text-secondary);
    }
    .msg-pdf-name {
      flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-weight: 500; color: var(--text-primary);
    }
    .msg-pdf-dl {
      color: var(--text-muted); text-decoration: none; padding: 2px 6px;
      border-radius: 4px; font-weight: 600;
    }
    .msg-pdf-dl:hover { background: var(--bg-hover); color: var(--text-primary); }

    #pdfViewer {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      z-index: 10100; align-items: center; justify-content: center; padding: 32px; /* above the factory portal (10000) */
    }
    #pdfViewer.open { display: flex; }
    #pdfViewerCard {
      background: var(--bg-white); border-radius: 12px;
      width: 100%; max-width: 1100px; height: 88vh;
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    }
    #pdfViewerHeader {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 18px; border-bottom: 1px solid var(--border-light);
      flex-shrink: 0; background: var(--bg-white);
    }
    #pdfViewerName {
      font-size: 14px; font-weight: 600; color: var(--text-primary);
      max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #pdfViewerPageInfo {
      font-size: 12px; color: var(--text-muted); padding: 0 6px;
    }
    #pdfViewerDownload {
      color: var(--text-primary); text-decoration: none; font-size: 13px;
      padding: 6px 12px; border: 1px solid var(--border-default); border-radius: 6px;
    }
    #pdfViewerDownload:hover { background: var(--bg-hover); }
    #pdfViewerAnnotate {
      background: var(--accent-active-text, var(--accent-blue)); color: var(--text-on-accent);
      border: 1px solid var(--accent-active-text, var(--accent-blue));
      font-size: 13px; padding: 6px 12px; border-radius: 6px;
      cursor: pointer;
    }
    #pdfViewerAnnotate:hover { filter: brightness(1.05); }
    #pdfViewerAnnotate:disabled { opacity: 0.6; cursor: progress; }
    #pdfViewerClose {
      background: none; border: none; color: var(--text-muted);
      font-size: 18px; cursor: pointer; padding: 4px 10px; border-radius: 4px;
    }
    #pdfViewerClose:hover { background: var(--bg-hover); color: var(--text-primary); }

    #pdfViewerBody {
      flex: 1; display: flex; min-height: 0; background: var(--gray-100);
      position: relative;
    }
    /* Loading overlay shown while the PDF is being fetched / parsed.
       Sits above the (empty) canvas until first paint, then fades out. */
    #pdfViewerLoading {
      position: absolute; inset: 0;
      display: none;
      flex-direction: column; align-items: center; justify-content: center;
      gap: 14px;
      background: rgba(255,255,255,0.92);
      z-index: 5;
      pointer-events: none;
    }
    #pdfViewerLoading.open { display: flex; }
    #pdfViewerLoading .pdf-spinner {
      width: 38px; height: 38px; border-radius: 50%;
      border: 3px solid var(--gray-200);
      border-top-color: var(--accent-active-text, var(--accent-blue));
      animation: spin 0.75s linear infinite;
    }
    #pdfViewerLoading .pdf-load-label {
      font-size: 13px; color: var(--text-secondary, var(--text-tertiary));
      font-weight: 500;
    }
    #pdfViewerLoading .pdf-load-progress {
      width: 200px; max-width: 80%;
      height: 6px; border-radius: 999px;
      background: var(--gray-200); overflow: hidden;
    }
    #pdfViewerLoading .pdf-load-progress-bar {
      height: 100%;
      background: var(--accent-active-text, var(--accent-blue));
      width: 0%;
      transition: width 0.2s ease-out;
    }
    #pdfViewerThumbs {
      width: 140px; flex-shrink: 0; background: #ececec;
      border-right: 1px solid var(--border-light);
      overflow-y: auto; padding: 12px 0;
    }
    .pdfViewerThumb {
      display: block; margin: 0 auto 10px; cursor: pointer;
      border: 2px solid transparent; border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      max-width: 110px; transition: border-color 0.12s, box-shadow 0.12s;
    }
    .pdfViewerThumb:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
    .pdfViewerThumb.active { border-color: var(--accent, var(--accent-blue-soft)); box-shadow: 0 2px 10px rgba(59,130,246,0.35); }
    .pdfViewerThumbLabel {
      text-align: center; font-size: 11px; color: var(--text-muted);
      margin: -4px 0 12px;
    }

    #pdfViewerStage {
      flex: 1; position: relative; display: flex; align-items: flex-start;
      justify-content: center; overflow: auto; padding: 24px;
    }
    /* Continuous mode: pages stack with breathing room; each page keeps
       the sheet shadow. */
    #pdfViewerStageInner { display: flex; flex-direction: column; gap: 18px; align-items: center; }
    .pdfViewerPageCanvas { background: var(--bg-white); box-shadow: 0 4px 24px rgba(0,0,0,0.15); max-width: 100%; height: auto; }
    #pdfViewerStageInner {
      max-width: 100%; max-height: 100%;
    }
    #pdfViewerCanvas {
      max-width: 100%; height: auto; background: var(--bg-white);
      box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    }
    .pdfViewerNav {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(0,0,0,0.55); color: var(--text-on-accent); border: 0;
      font-size: 22px; cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      transition: background 0.15s;
    }
    .pdfViewerNav:hover { background: rgba(0,0,0,0.75); }
    .pdfViewerNav:disabled { opacity: 0; pointer-events: none; }
    #pdfViewerPrev { left: 12px; }
    #pdfViewerNext { right: 12px; }

    /* Mobile PDF viewer — single column, full width, scroll-to-paginate.
       Hides the thumbnail sidebar and prev/next nav; openPdfViewer()
       renders each page as its own <canvas class="pdfViewerPageCanvas">
       inside #pdfViewerStageInner. */
    #pdfViewer.mobile-stack { padding: 0; }
    #pdfViewer.mobile-stack #pdfViewerCard {
      width: 100vw; max-width: 100vw;
      height: 100dvh; max-height: 100dvh;
      border-radius: 0;
    }
    #pdfViewer.mobile-stack #pdfViewerThumbs { display: none; }
    #pdfViewer.mobile-stack #pdfViewerCanvas { display: none; }
    #pdfViewer.mobile-stack .pdfViewerNav { display: none; }
    #pdfViewer.mobile-stack #pdfViewerPageInfo { display: none; }
    #pdfViewer.mobile-stack #pdfViewerStage {
      padding: 12px 8px;
      align-items: flex-start;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    #pdfViewer.mobile-stack #pdfViewerStageInner {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 100%;
      max-height: none;
    }
    #pdfViewer.mobile-stack .pdfViewerPageCanvas {
      width: 100%;
      height: auto;
      display: block;
      background: var(--bg-white);
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
      border-radius: 4px;
    }

    .reaction-picker {
      position: fixed; background: var(--bg-white); border: 1px solid var(--border-default);
      border-radius: var(--radius-lg); padding: 6px; display: none;
      grid-template-columns: repeat(7, 30px); gap: 2px; box-shadow: var(--shadow-popup); z-index: 600;
    }
    .reaction-picker.open { display: grid; }
    .reaction-item {
      width: 30px; height: 30px; border: none; background: none;
      border-radius: var(--radius-sm); font-size: 16px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .reaction-item:hover { background: var(--bg-hover); }

    .modal-two-col {
      display: grid;
      grid-template-columns: 1fr 258px;
      grid-template-rows: auto 1fr;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .modal-left-top {
      padding: 20px 28px 16px;
      border-bottom: 1px solid var(--border-light);
      border-right: 1px solid var(--border-light);
      display: flex;
      flex-direction: column;
    }
    .modal-members {
      border-bottom: 1px solid var(--border-light);
      display: flex;
      flex-direction: column;
      padding-bottom: 8px;
    }
    .tasks-section {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    .members-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 6px;
      padding: 4px 16px 10px;
    }
    .member-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px;
      background: var(--bg-hover);
      border-radius: var(--radius-pill);
      font-size: 12px;
      color: var(--accent-hover);
    }
    .member-chip .avatar {
      width: 22px;
      height: 22px;
      font-size: 9px;
      flex-shrink: 0;
    }
    .member-chip-name { flex: 1; font-weight: 500; }
    .member-remove {
      background: none;
      border: none;
      color: var(--text-placeholder);
      cursor: pointer;
      font-size: 12px;
      padding: 0;
      line-height: 1;
    }
    .member-remove:hover { color: var(--accent-danger); }
    .manage-members-btn {
      display: block;
      width: calc(100% - 32px);
      margin: 4px 16px 0;
      padding: 7px 10px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      font-size: 12px;
      font-family: var(--font-base);
      background: var(--bg-white);
      color: var(--text-muted);
      cursor: pointer;
      text-align: left;
    }
    .manage-members-btn:hover { border-color: var(--text-muted); color: var(--text-secondary); }

    /* Members sub-modal */
    .members-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--overlay);
      z-index: 300;
      align-items: center;
      justify-content: center;
    }
    .members-overlay.open { display: flex; }
    .members-submodal {
      background: var(--bg-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-modal);
      width: 360px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .members-submodal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-light);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .members-submodal-close {
      background: none;
      border: none;
      font-size: 18px;
      color: var(--text-muted);
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .members-submodal-close:hover { color: var(--text-primary); }
    .members-submodal-body { padding: 16px 20px; overflow-y: auto; }
    .members-submodal-section-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin-bottom: 10px;
    }
    .members-submodal-section-label + .members-submodal-section-label,
    .members-manage-list + .members-submodal-section-label { margin-top: 20px; }
    .members-manage-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
    .members-manage-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-md);
      background: var(--bg-subtle);
    }
    .members-manage-row .avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
    .members-manage-row-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .members-manage-row-role { font-size: 11px; color: var(--text-muted); }
    .members-manage-remove {
      background: none;
      border: none;
      color: var(--text-placeholder);
      cursor: pointer;
      font-size: 14px;
      padding: 0 2px;
      line-height: 1;
    }
    .members-manage-remove:hover { color: var(--accent-danger); }
    .members-add-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: background 0.1s;
    }
    .members-add-row:hover { background: var(--bg-hover); }
    .members-add-row.already-added { opacity: 0.4; cursor: default; }
    .members-add-row.already-added:hover { background: none; }
    .members-add-avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
    .members-add-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .members-add-icon { font-size: 16px; color: var(--text-muted); line-height: 1; }
    .member-status-badge {
      font-size: 10px;
      padding: 2px 7px;
      border-radius: var(--radius-pill);
      background: var(--bg-hover);
      color: var(--text-muted);
    }
    .invite-section-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      margin: 20px 0 10px;
    }
    .invite-form { display: flex; gap: 8px; }
    .invite-input-wrap { flex: 1; position: relative; }
    .invite-email-input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      font-size: 13px;
      font-family: var(--font-base);
      outline: none;
    }
    .invite-email-input:focus { border-color: var(--text-muted); }
    .invite-submit-btn {
      padding: 8px 14px;
      background: var(--accent);
      color: var(--text-on-accent);
      border: none;
      border-radius: var(--radius-md);
      font-size: 13px;
      font-family: var(--font-base);
      cursor: pointer;
      white-space: nowrap;
    }
    .invite-submit-btn:hover { background: var(--accent-hover); }

    /* Shared autocomplete dropdown (invite field + @mention) */
    .ac-dropdown {
      display: none;
      position: absolute;
      background: var(--bg-white);
      border: 1px solid var(--border-lighter);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-popup);
      z-index: 500;
      overflow: hidden;
      min-width: 220px;
      max-height: 220px;
      overflow-y: auto;
    }
    .ac-dropdown.open { display: block; }
    .ac-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      cursor: pointer;
    }
    .ac-item:hover, .ac-item.active { background: var(--bg-hover); }
    .ac-item-info { display: flex; flex-direction: column; min-width: 0; }
    .ac-item-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
    .ac-item-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ac-item-badge {
      font-size: 10px; padding: 2px 6px;
      border-radius: var(--radius-pill);
      background: var(--bg-hover); color: var(--text-muted);
      flex-shrink: 0;
    }

    /* @mention chip inside messages */
    .mention {
      display: inline-block;
      background: var(--accent-active-bg);
      color: var(--accent-active-text);
      border-radius: var(--radius-xs);
      padding: 0 4px;
      font-weight: 600;
      font-size: 0.95em;
      white-space: nowrap;
    }

    /* Tasks */
    .task-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .task-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-md);
      background: var(--bg-subtle);
      border: 1px solid var(--border-light);
    }
    .task-item:hover { background: var(--bg-hover); }
    .task-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      flex-shrink: 0;
      margin: 0;
      accent-color: var(--accent);
    }
    .task-item label {
      font-size: 13px;
      color: var(--accent-hover);
      flex: 1;
      cursor: pointer;
      line-height: 1.4;
      font-weight: 400;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .task-item.done label {
      text-decoration: line-through;
      color: var(--text-light);
    }
    .task-delete {
      background: none;
      border: none;
      color: var(--text-placeholder);
      cursor: pointer;
      font-size: 14px;
      padding: 0;
      line-height: 1;
      flex-shrink: 0;
    }
    .task-delete:hover { color: var(--accent-danger); }
    .task-input-row {
      display: flex;
      gap: 8px;
      padding: 10px 16px;
      border-top: 1px solid var(--border-light);
      flex-shrink: 0;
    }
    .task-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      font-size: 13px;
      font-family: var(--font-base);
      outline: none;
    }
    .task-input:focus { border-color: var(--text-muted); }
    .task-item label { cursor: default; }
    .task-item label.task-open-link {
      cursor: pointer;
      color: var(--accent-hover);
    }
    .task-item label.task-open-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

    /* Task link items in project modal */
    .task-link-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius-md); background:var(--bg-subtle); border:1px solid var(--border-light); cursor:pointer; transition:background 0.1s; }
    .task-link-item:hover { background:var(--bg-hover); }
    #pdProjOverlay .modal-two-col { grid-template-columns: 1fr 330px; }
    #pdProjOverlay .tasks-section { background: var(--bg-app); }
    #pdProjOverlay .task-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px; }
    #pdProjOverlay .task-link-item {
      align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--bg-white);
      border: none; border-radius: 14px;
      box-shadow: 0 1px 3px rgba(15, 18, 25, .07), 0 1px 1px rgba(15, 18, 25, .04);
      transition: box-shadow .12s ease, transform .05s ease;
    }
    #pdProjOverlay .task-link-item:hover {
      background: var(--bg-white);
      box-shadow: 0 3px 10px rgba(15, 18, 25, .10), 0 1px 2px rgba(15, 18, 25, .05);
    }
    #pdProjOverlay .task-link-item:active { transform: scale(.995); }
    #pdProjOverlay .task-link-arrow { align-self: flex-start; }
    .pd-link-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
    .pd-link-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
    .pd-link-meta .task-link-name {
      flex: 1; font-size: 15px; font-weight: 600; color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pd-link-due { font-size: 12.5px; color: var(--text-muted); }
    .pd-link-left { font-size: 12.5px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
    .pd-link-due .pd-link-left.ok { color: #1a9a4c; }
    .pd-link-due .pd-link-left.warn { color: #b45309; }
    .pd-link-due .pd-link-left.late { color: #b91c1c; }
    .pd-link-thumb {
      width: 44px; height: 44px; flex-shrink: 0;
      border-radius: 8px; object-fit: contain; padding: 2px;
      background: var(--bg-white); border: 1px solid var(--border-light);
      box-sizing: border-box;
    }
    .pd-link-thumb-empty { background: var(--bg-subtle); }
    .task-link-name { flex:1; font-size:13px; color:var(--text-secondary); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .task-link-arrow { font-size:13px; color:var(--text-placeholder); flex-shrink:0; }
    /* "+ Add Task" button — solid black so it reads as a real CTA, with
       breathing room on all sides instead of hugging the panel edges. */
    .add-task-big-btn {
      display: block;
      width: calc(100% - 32px);
      margin: 12px 16px 16px;
      padding: 11px 14px;
      background: var(--accent);
      border: none;
      border-radius: var(--radius-md);
      color: var(--text-on-accent);
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-base);
      cursor: pointer;
      transition: background 0.15s, transform 0.08s;
    }
    .add-task-big-btn:hover { background: #000; }
    .add-task-big-btn:active { transform: scale(0.98); }

    /* Task create popup */
    .tcreate-overlay { position:fixed; inset:0; background:var(--overlay); z-index:400; display:none; align-items:center; justify-content:center; }
    .tcreate-overlay.open { display:flex; }
    .tcreate-popup { background:var(--bg-white); border-radius:var(--radius-xl); padding:24px; width:360px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-modal); }
    .tcreate-header { display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:600; color:var(--text-primary); }
    .tcreate-input { width:100%; padding:10px 14px; border:1px solid var(--border-default); border-radius:var(--radius-md); font-size:14px; font-family:var(--font-base); outline:none; box-sizing:border-box; }
    .tcreate-input:focus { border-color:var(--accent-active-text); }
    .tcreate-submit { width:100%; padding:10px; background:var(--accent); color:var(--text-on-accent); border:none; border-radius:var(--radius-md); font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font-base); }
    .tcreate-submit:hover { opacity:0.85; }

    /* Task modal */
    .task-overlay {
      display: none; position: fixed; inset: 0;
      background: var(--overlay); z-index: 200;
      align-items: center; justify-content: center;
    }
    .task-overlay.open { display: flex; }
    .task-modal {
      background: var(--bg-white);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-modal);
      width: 1041px; max-width: 98vw;
      height: 88vh;
      display: flex; flex-direction: column;
      overflow: hidden;
      position: relative;
    }
    .col-add-btn {
      float: right; background: none; border: none; cursor: pointer;
      font-size: 16px; font-weight: 400; line-height: 1;
      color: var(--text-muted); padding: 0 4px; border-radius: var(--radius-sm);
      transition: color 0.12s, background 0.12s;
    }
    .col-add-btn:hover { color: var(--accent); background: var(--bg-hover); }
    /* Master eye on the PROJECTS header — one toggle over every project's
       task visibility (a board-wide version of the per-card/per-group eye). */
    .col-eye-btn {
      float: right; background: none; border: none; cursor: pointer;
      color: var(--text-muted); padding: 2px 4px; margin-right: 2px;
      border-radius: var(--radius-sm); display: inline-flex; align-items: center;
      transition: color 0.12s, background 0.12s;
    }
    .col-eye-btn svg { width: 15px; height: 15px; }
    .col-eye-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
    .col-eye-btn.is-hidden { color: var(--accent, var(--accent-blue-soft)); }
    .task-sched-row {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin: 6px 0 2px; font-size: 12px; color: var(--text-muted);
    }
    .task-sched-row input[type="date"] {
      font: inherit; font-size: 12px; color: var(--text-primary);
      border: 1px solid var(--border-default); border-radius: var(--radius-sm);
      padding: 3px 6px; background: var(--bg-white);
    }
    .task-sched-row button {
      font: inherit; font-size: 11px; cursor: pointer; color: var(--text-muted);
      background: none; border: 1px solid var(--border-default);
      border-radius: var(--radius-sm); padding: 3px 8px;
    }
    .task-sched-row button:hover { color: var(--text-primary); }
    .task-sched-note { font-size: 11px; color: var(--text-muted); }

    /* ── Invoices ─────────────────────────────────────────────────────── */
    .inv-overlay {
      position: fixed; inset: 0; background: var(--overlay, rgba(0,0,0,0.45));
      z-index: 3000; display: none; align-items: flex-start; justify-content: center;
      padding: 40px 16px; overflow-y: auto;
    }
    .inv-overlay.open { display: flex; }
    .inv-modal, .inv-pick-modal {
      background: var(--bg-white); border-radius: 12px; width: 100%; max-width: 860px;
      box-shadow: 0 18px 50px rgba(0,0,0,0.25); overflow: hidden; margin: auto;
    }
    .inv-pick-modal { max-width: 560px; }
    .inv-head {
      display: flex; align-items: center; gap: 10px; padding: 14px 18px;
      border-bottom: 1px solid var(--border-light); flex-wrap: wrap;
    }
    .inv-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
    .inv-head-sub { font-size: 12px; color: var(--text-muted); flex: 1; }
    .inv-x {
      background: none; border: none; font-size: 16px; cursor: pointer;
      color: var(--text-muted); padding: 2px 6px; margin-left: auto;
    }
    .inv-x:hover { color: var(--text-primary); }
    .inv-body { padding: 18px; }
    .inv-btn {
      font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
      border-radius: 7px; padding: 6px 12px; border: 1px solid var(--border-default);
      background: var(--bg-white); color: var(--text-primary); white-space: nowrap;
    }
    .inv-btn-primary { background: var(--text-primary, #111); color: #fff; border-color: transparent; }
    .inv-btn-ghost { background: none; color: var(--text-secondary); }
    .inv-btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
    .inv-btn-danger { color: var(--accent-danger, #e53e3e); border-color: transparent; background: none; }
    .inv-actions { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; }
    .inv-note { font-size: 12px; color: var(--text-muted); }
    /* List */
    .inv-row {
      display: flex; align-items: center; gap: 12px; padding: 11px 4px;
      border-bottom: 1px solid var(--border-light); cursor: pointer; font-size: 13px;
    }
    .inv-row:hover { background: var(--bg-hover); }
    .inv-row-num { font-weight: 700; color: var(--text-primary); min-width: 86px; }
    .inv-row-client { flex: 1; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .inv-row-total { font-weight: 700; color: var(--text-primary); }
    .inv-badge {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
      padding: 3px 8px; border-radius: var(--radius-full); background: var(--bg-hover); color: var(--text-secondary);
    }
    .inv-badge.draft   { background: rgba(100,116,139,0.15); color: #475569; }
    .inv-badge.sent    { background: rgba(59,130,246,0.15);  color: #1d4ed8; }
    .inv-badge.paid    { background: rgba(34,197,94,0.16);   color: #15803d; }
    .inv-badge.overdue { background: rgba(239,68,68,0.15);   color: #b91c1c; }
    .inv-badge.processing { background: #fef3c7; color: #b45309; }
    /* Big pay-state word under the invoice number on board cards. */
    /* Bottom-aligned with the amount on the same row. */
    .inv-paystate { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; margin: 0; line-height: 1.15; }
    .inv-paystate.paid { color: #dc2626; }
    .inv-paystate.processing { color: #d97706; }
    .inv-paystate.sent { color: #2563eb; }
    .inv-empty { padding: 28px 4px; text-align: center; color: var(--text-muted); font-size: 13px; }
    /* Settings grid */
    .inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .inv-grid label, .inv-bill-to { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
    .inv-bill-to select {
      font: inherit; font-size: 13px; color: var(--text-primary); padding: 7px 9px;
      border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-white); width: 100%;
    }
    .inv-grid input, .inv-grid textarea, .inv-bill-to input, .inv-bill-to textarea, .inv-notes-wrap textarea {
      font: inherit; font-size: 13px; color: var(--text-primary); padding: 7px 9px;
      border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-white); width: 100%;
    }
    @media (max-width: 640px) { .inv-grid { grid-template-columns: 1fr; } }
    /* Sheet */
    .inv-sheet { font-size: 13px; color: var(--text-primary); }
    .inv-sheet-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
    .inv-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; }
    .inv-from-name { font-weight: 700; font-size: 15px; }
    .inv-from-rest { color: var(--text-secondary); white-space: pre-line; font-size: 12px; }
    .inv-meta { text-align: right; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
    .inv-num { font-weight: 700; font-size: 15px; }
    .inv-mini { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
    .inv-mini input { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border-default); border-radius: 6px; }
    .inv-bill-to { margin-bottom: 16px; gap: 5px; max-width: 320px; }
    .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
    .inv-table th {
      text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--text-muted); border-bottom: 1px solid var(--border-default); padding: 6px 4px; font-weight: 700;
    }
    .inv-table td { border-bottom: 1px solid var(--border-light); padding: 4px; vertical-align: middle; }
    .inv-table input {
      font: inherit; font-size: 13px; border: 1px solid transparent; background: none;
      padding: 5px 6px; border-radius: 6px; width: 100%; color: var(--text-primary);
    }
    .inv-table input:focus { border-color: var(--border-default); background: var(--bg-white); outline: none; }
    .inv-c-qty, .inv-c-rate, .inv-c-amt { width: 92px; text-align: right; }
    .inv-table td.inv-c-amt { text-align: right; font-variant-numeric: tabular-nums; padding-right: 8px; }
    .inv-table .inv-c-qty input, .inv-table .inv-c-rate input { text-align: right; }
    .inv-del-line { background: none; border: none; cursor: pointer; color: var(--text-lighter); font-size: 14px; padding: 2px 6px; }
    .inv-del-line:hover { color: var(--accent-danger, #e53e3e); }
    .inv-add-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
    .inv-totals { margin-left: auto; max-width: 300px; font-size: 13px; }
    .inv-totals > div { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; gap: 12px; }
    .inv-totals input { width: 70px; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border-default); border-radius: 6px; text-align: right; }
    .inv-totals b { font-variant-numeric: tabular-nums; }
    .inv-total-final { border-top: 2px solid var(--border-default); margin-top: 4px; padding-top: 8px !important; font-size: 16px; font-weight: 700; }
    .inv-notes-wrap { margin-top: 22px; }
    .inv-payinfo { margin-top: 10px; font-size: 12px; color: var(--text-secondary); white-space: pre-line; }
    .inv-status-sel { font: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-white); color: var(--text-primary); }
    /* Invoice Board: dashboard entry card + columns + cards */
    .inv-board-card-banner {
      height: 52px; border-radius: 8px; margin-bottom: 14px;
      background: linear-gradient(135deg, #0f172a, #334155);
      display: flex; align-items: center; justify-content: center; color: #e2e8f0;
    }
    .inv-board-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    /* .inv-card .inv-card-total / .inv-card-due were pre-Warm-Paper rules
       left behind when the redesign landed. The compound selector beat the
       real Warm Paper .inv-card-total rule (index.html:2764) on specificity
       regardless of source order, so every invoice amount rendered bold
       15px instead of the intended light 19px. .inv-card-due's class was
       dropped from the markup entirely (superseded by .inv-card-status). */
    /* Send/share panel in the invoice editor */
    .inv-share { padding: 10px 22px; background: var(--bg-input, var(--bg-light)); border-bottom: 1px solid var(--border-light); }
    .inv-share-row { display: flex; gap: 8px; }
    .inv-share-row input { flex: 1; font: inherit; font-size: 12px; color: var(--text-primary); padding: 7px 9px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-white); }
    .inv-share-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
    /* Public invoice page (client-facing, logged out) */
    #publicInvoiceView { position: fixed; inset: 0; overflow-y: auto; background: var(--bg-light, #f3f4f6); z-index: 10000; }
    .pubinv-wrap { max-width: 760px; margin: 24px auto 60px; padding: 0 16px; }
    .pubinv-wrap .inv-sheet { background: var(--bg-white); border: 1px solid var(--border-light); border-radius: 12px; padding: 28px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
    .pubinv-banner { border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; font-size: 14px; font-weight: 600; background: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .pubinv-banner.err { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
    .pubinv-paywrap { text-align: center; margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .pubinv-pay { font-size: 16px; padding: 12px 36px; }
    .pubinv-paynote { margin-top: 0; }
    .inv-from-logo { display: block; max-height: 52px; max-width: 220px; margin: 2px 0 8px; }
    .inv-col-total { float: right; font-weight: 700; color: var(--text-secondary); letter-spacing: 0; }
    /* "This one's been emailed" pill — editor header + board cards. */
    .inv-emailed-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
      color: #15803d; background: #dcfce7; border-radius: 999px;
      padding: 2px 8px; white-space: nowrap; flex-shrink: 0;
    }
    .inv-emailed-badge.inv-sched { color: #b45309; background: #fef3c7; cursor: pointer; }
    /* Full send history inside the open invoice window. */
    .inv-email-log { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
    .inv-email-log div { font-size: 11px; color: #15803d; }
    .inv-email-log .inv-log-reminder { color: #b45309; }
    /* Invoice board group panels paint on the same underlay system as the
       regular board's Projects column. */
    #invClientList { position: relative; }
    #pdProjList { position: relative; }
    .pubinv-paynote { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
    .pubinv-foot { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 26px; }
    .pubinv-dlwrap { text-align: center; margin-top: 18px; }
    .pubinv-dl {
      font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
      padding: 10px 26px; border-radius: 8px;
      border: 1px solid var(--border-default);
      background: var(--bg-white); color: var(--text-primary);
    }
    .pubinv-dl:hover { background: var(--bg-hover); }
    .pubinv-dlhint { font-size: 12px; color: var(--text-muted); margin-top: 10px; max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.5; }
    .pubinv-nav { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .pubinv-nav-back { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
    .pubinv-nav-back:hover { color: var(--text-primary); text-decoration: underline; }
    .pubinv-nav-biz { font-size: 12px; color: var(--text-muted); }
    @media print { .pubinv-nav { display: none !important; } }
    /* Client portal (?client=<token>) */
    .pubcl-wrap { max-width: 720px; }
    .pubcl-head { margin-bottom: 18px; }
    .pubcl-logo { max-height: 48px; max-width: 200px; display: block; margin-bottom: 10px; }
    .pubcl-from { font-size: 13px; color: var(--text-secondary); white-space: pre-line; }
    .pubcl-for { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-top: 12px; }
    .pubcl-stats { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
    .pubcl-stat {
      flex: 1; min-width: 140px; background: var(--bg-white);
      border: 1px solid var(--border-light); border-radius: 10px; padding: 12px 14px;
    }
    .pubcl-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .pubcl-stat-val { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-top: 3px; }
    .pubcl-sec { margin-bottom: 24px; }
    .pubcl-sec-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 8px; }
    .pubcl-row {
      display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
      background: var(--bg-white); border: 1px solid var(--border-light);
      border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
    }
    .pubcl-row-main { flex: 1; min-width: 180px; }
    .pubcl-row-num { font-weight: 700; color: var(--text-primary); }
    .pubcl-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .pubcl-row-amt { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
    .pubcl-badge {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
      padding: 3px 8px; border-radius: 999px; white-space: nowrap;
    }
    .pubcl-badge.due { background: #e0e7ff; color: #3730a3; }
    .pubcl-badge.overdue { background: #fee2e2; color: #991b1b; }
    .pubcl-badge.paid { background: #dcfce7; color: #166534; }
    .pubcl-view {
      font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
      padding: 7px 16px; border-radius: 7px; border: 1px solid var(--border-default);
      background: var(--bg-white); color: var(--text-primary); white-space: nowrap;
    }
    .pubcl-view:hover { background: var(--bg-hover); }
    .pubcl-view.pay { background: var(--text-primary); color: var(--bg-white); border-color: var(--text-primary); }
    .pubcl-empty { font-size: 13px; color: var(--text-muted); padding: 6px 2px; }
    /* Sent-mail view */
    .inv-sent-list { display: flex; flex-direction: column; gap: 6px; }
    .inv-sent-row {
      display: flex; align-items: center; gap: 12px; cursor: pointer;
      border: 1px solid var(--border-light); border-radius: 9px; padding: 10px 14px;
      background: var(--bg-white);
    }
    .inv-sent-row:hover { background: var(--bg-hover); }
    .inv-sent-row.is-queued { border-style: dashed; }
    .inv-sent-main { flex: 1; min-width: 0; }
    .inv-sent-top { font-size: 13px; color: var(--text-primary); }
    .inv-sent-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .inv-sent-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 999px; }
    .inv-sent-badge.sent { background: #dcfce7; color: #166534; }
    .inv-sent-badge.queued { background: #e0e7ff; color: #3730a3; }
    .inv-sent-amt { font-weight: 700; font-size: 13px; color: var(--text-primary); white-space: nowrap; }
    /* Client window */
    .invc-modal { max-width: 620px; }
    .invc-summary { display: flex; gap: 10px; margin-bottom: 16px; }
    .invc-stat { flex: 1; background: var(--bg-input, var(--bg-light)); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
    .invc-stat-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); }
    .invc-stat-val { font-size: 16px; font-weight: 700; }
    .invc-open { color: #d97706; }
    .invc-paid { color: #16a34a; }
    .invc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
    .invc-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
    .invc-grid .invc-wide { grid-column: 1 / -1; }
    .invc-grid input, .invc-grid textarea, .invc-grid select {
      font: inherit; font-size: 13px; color: var(--text-primary); padding: 7px 9px;
      border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-white); resize: vertical;
    }
    .invc-colors { display: flex; gap: 8px; margin: 14px 0 4px; }
    .invc-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
    .invc-swatch.sel { border-color: var(--text-primary); }
    .invc-hist-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .invc-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-light); font-size: 13px; cursor: pointer; }
    .invc-row:hover { background: var(--bg-hover, rgba(0,0,0,0.03)); }
    .invc-row-num { font-weight: 600; }
    .invc-row-total { margin-left: auto; font-weight: 600; }
    .invc-actions { justify-content: flex-start; }
    .invc-ret-form { display: flex; gap: 8px; flex-wrap: wrap; }
    .invc-ret-form input, .invc-ret-form select { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--bg-white); }
    .invc-ret-form input:first-child { flex: 1; min-width: 140px; }
    .invc-ret-row { display: flex; align-items: center; gap: 8px; }
    .inv-auto { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-light); }
    .inv-auto-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
    .inv-auto select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-white); }
    .inv-recur-badge { font-size: 12px; margin-left: 6px; }
    /* .inv-ctx-menu's rules lived here. Nothing could ever render that
       class: its only builder was a duplicate _pdOpenMenu declaration
       that a later same-named declaration silently overwrote (JS
       function-declaration hoisting), so every invoice menu has always
       come out as .card-dropdown — the same one PD uses. Dead CSS and
       the dead builder both removed. */
    .inv-card[draggable="true"] { cursor: grab; }
    .inv-card.dragging { opacity: 0.5; }
    .inv-num-input { font: inherit; font-weight: inherit; font-size: inherit; color: inherit; background: transparent; border: 1px dashed transparent; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; width: 100%; max-width: 220px; text-align: inherit; }
    .inv-num-input:hover, .inv-num-input:focus { border-color: var(--border-default); background: var(--bg-white); outline: none; }
    @media print { .inv-num-input { border: none !important; background: none !important; } }
    .inv-due-print { display: none; }
    .inv-svc-card { border: 1px solid var(--border-light); border-radius: 10px; padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
    .inv-svc-line1 { display: flex; gap: 8px; }
    .inv-svc-line1 .inv-item-name { flex: 1; font-weight: 600; }
    .inv-svc-desc { font: inherit; font-size: 12px; color: var(--text-primary); padding: 6px 8px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-white); }
    .inv-svc-line2 { display: flex; gap: 8px; flex-wrap: wrap; }
    .inv-svc-billing, .inv-svc-freq { font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-white); }
    .inv-items-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .inv-items-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
    .inv-item-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
    .inv-item-row input { font: inherit; font-size: 13px; color: var(--text-primary); padding: 6px 8px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-white); }
    .inv-item-name { flex: 2; min-width: 0; }
    .inv-item-price { width: 90px; text-align: right; }
    .inv-item-unit { font: inherit; font-size: 12px; padding: 6px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-white); }
    .inv-item-del { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 14px; }
    .inv-pick-qty { width: 58px; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--border-default); border-radius: 6px; margin-left: auto; }
    .inv-pick-board {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted); padding: 12px 4px 4px;
    }
    .inv-pick-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
    .inv-pick-item label { flex: 1; cursor: pointer; }
    .inv-pick-proj { font-size: 11px; color: var(--text-muted); }
    /* ══════════════════════════════════════════════════════════════
       "Warm Paper" — invoicing surfaces redesign. Body font + generic
       buttons/fields scoped to the invoice board and its overlays;
       shared board chrome (.column, .column-header, .project-card
       geometry) restyled globally, per the design handoff — the task
       and product boards inherit the new chrome, not new card content.
       ══════════════════════════════════════════════════════════════ */
    #invoiceBoardView, .inv-overlay, .invc-modal, #invEditView, #publicInvoiceView,
    #publicClientView, .inv-pick-modal {
      font-family: var(--wp-font-body);
      color: var(--wp-ink);
    }
    /* Generic button kit for the invoicing surfaces. */
    .wp-btn {
      font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
      border-radius: var(--wp-radius); padding: 9px 16px; border: 1px solid transparent;
      white-space: nowrap; transition: background 0.12s, border-color 0.12s, opacity 0.12s;
    }
    .wp-btn-primary { background: var(--wp-accent); color: #fff; box-shadow: var(--wp-shadow-btn); }
    .wp-btn-primary:hover { background: var(--wp-accent-hover); }
    .wp-btn-ghost { background: var(--wp-surface); border-color: var(--wp-hairline-strong); color: var(--wp-ink-muted); padding: 7px 13px; font-size: 12px; }
    .wp-btn-ghost:hover { border-color: hsl(24 10% 10% / 0.2); }
    .wp-btn-danger { background: none; border: none; color: var(--wp-danger); padding: 0; font-size: 12.5px; }
    .wp-btn-danger:hover { text-decoration: underline; }

    /* ── Board header row ── */
    #invoiceBoardView { display: flex; flex-direction: column; background: var(--wp-bg); }
    /* No board-specific padding/align-items here anymore — the invoice
       topbar now falls back to the exact same shared .topbar rule the
       task/PD boards use (index.html:320-330 area, padding:16px 24px,
       align-items:center), and its background/border join theirs in
       one shared rule below, so the three boards' topbars can never
       silently drift apart in height again. */
    .wp-inv-heading { flex: 1; min-width: 200px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
    /* .wp-inv-title's own font rule now lives with .topbar-title's,
       index.html:211 — one declaration, all three boards. */
    .wp-inv-sub { font-size: 14px; color: var(--wp-ink-label); }
    .wp-inv-topbar .board-members-bar { gap: 8px; }
    .wp-fig-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp-ink-label); }
    .wp-fig-note { margin-left: auto; align-self: center; font-size: 12px; color: var(--wp-ink-label); }
    @media (min-width: 769px) {
      #invoiceBoardView .columns.wp-inv-columns {
        display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
      }
    }

    /* ── Shared column/card chrome — bleeds to the task & product boards
       intentionally (same DOM/CSS across all three, per the handoff). ── */
    .column { border-radius: var(--wp-radius); border-color: var(--wp-hairline); box-shadow: var(--wp-shadow-col); }
    #colProjects .column-header, #colTasks .column-header, #colActive .column-header, #colCompleted .column-header,
    #invColProjects .column-header, #invColTasks .column-header, #invColActive .column-header, #invColCompleted .column-header,
    #pdColProjects .column-header, #pdColDesign .column-header, #pdColTechpack .column-header,
    #pdColSample .column-header, #pdColShipped .column-header {
      background: transparent;
    }
    .column-header {
      display: flex; align-items: center; gap: 6px;
      font-size: 12.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
      color: var(--wp-ink-label);
      padding: 12px 16px; margin: 0 0 0; border-radius: var(--wp-radius) var(--wp-radius) 0 0;
      border-bottom: 1px solid var(--wp-hairline-strong);
    }
    .inv-col-total { float: none; margin-left: auto; font-weight: 700; color: var(--wp-ink); letter-spacing: 0; }
    #invColProjects { background: var(--wp-col-1); }
    #invColTasks    { background: var(--wp-col-2); }
    #invColActive   { background: var(--wp-col-3); }
    #invColCompleted{ background: var(--wp-col-4); }
    #invoiceBoardView .add-project {
      flex-shrink: 0; border-top: 1px solid var(--wp-hairline-strong);
      margin: 0; padding: 11px 16px 12px; color: var(--wp-ink-label); font-size: 12.5px;
    }
    .project-card, .inv-card, .inv-client-card {
      border-radius: var(--wp-radius); border-color: var(--wp-hairline); box-shadow: var(--wp-shadow-card);
      border-top: 3px solid var(--card-accent, var(--wp-client-grey));
    }
    @media (hover: hover) { .project-card:hover { box-shadow: var(--wp-shadow-card-hover); } }
    .card-footer { border-color: var(--wp-hairline); }
    .card-eye, .card-move-btn, .card-menu-btn { color: var(--wp-ink-icon); }
    .card-eye:hover, .card-move-btn:hover:not(:disabled), .card-menu-btn:hover { background: hsl(24 10% 10% / 0.06); color: var(--wp-ink); }

    /* ── Client card ── */
    .inv-client-card .project-card-title { font-family: var(--wp-font-heading); font-weight: 400; font-size: 19px; color: var(--wp-ink); overflow-wrap: anywhere; }
    .inv-client-card .project-card-desc { font-size: 12px; color: var(--wp-ink-label); margin-top: 2px; }
    .project-card.is-active, .inv-client-card.is-active { background: var(--wp-accent-tint); border-color: var(--wp-accent-tint-border); }
    .inv-client-card.is-hidden { opacity: 0.6; box-shadow: none; }
    .inv-client-card.is-hidden:hover { opacity: 0.85; }

    /* ── Invoice card ── */
    .inv-card-client { font-size: 15px; color: var(--wp-ink); overflow-wrap: anywhere; }
    .inv-card-number { font-size: 12px; color: var(--wp-ink-label); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
    .inv-recur-badge { font-size: 12px; color: var(--wp-ink-icon); }
    .inv-card-total { font-size: 19px; font-weight: 400; color: var(--wp-ink); white-space: nowrap; flex-shrink: 0; }
    .inv-card-total-accent { color: var(--wp-accent); }
    .inv-card-status { font-size: 12px; color: var(--wp-ink-label); display: flex; align-items: center; gap: 5px; }
    .inv-bell { font-size: 11px; }
    .inv-card.is-paid, .project-card.is-done { background: hsl(0 0% 100% / 0.5); border-color: hsl(24 10% 10% / 0.05); box-shadow: none; opacity: 0.72; cursor: default; }
    .inv-card.is-paid:hover, .project-card.is-done:hover { opacity: 0.9; box-shadow: none; }
    .column-body .inv-empty {
      border: 1px dashed hsl(24 10% 10% / 0.14); border-radius: var(--wp-radius);
      padding: 18px 12px; text-align: center; color: var(--wp-ink-label); font-size: 12px;
    }

    /* ── Client window (#invClientOverlay / .invc-modal) ── */
    .invc-modal {
      background: var(--wp-panel); border: 1px solid var(--wp-hairline); border-radius: var(--wp-radius);
      box-shadow: var(--wp-shadow-modal); overflow: hidden; margin: auto;
      display: flex; flex-direction: column; max-height: min(86vh, 860px); width: 100%; max-width: 1000px;
    }
    .invc-head {
      flex: none; background: var(--wp-surface); border-bottom: 1px solid var(--wp-rule);
      padding: 22px 24px 20px; display: flex; align-items: flex-start; gap: 20px; position: relative;
    }
    .invc-head-left { flex: 1; min-width: 0; }
    .invc-head-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp-ink-label); }
    .invc-head-name { display: flex; align-items: center; gap: 9px; font-family: var(--wp-font-heading); font-weight: 400; font-size: 30px; color: var(--wp-ink); margin-top: 2px; }
    .invc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .invc-head-meta { font-size: 13px; color: var(--wp-ink-label); margin-top: 6px; overflow-wrap: anywhere; }
    .invc-head-right { text-align: right; flex-shrink: 0; padding-right: 34px; }
    .invc-head-balance { font-size: clamp(30px, 3.4vw, 40px); font-weight: 400; color: var(--wp-accent); margin-top: 2px; font-variant-numeric: tabular-nums; }
    .invc-close {
      position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border-radius: var(--wp-radius);
      border: none; background: none; color: var(--wp-ink-icon); cursor: pointer; font-size: 15px;
      display: flex; align-items: center; justify-content: center;
    }
    .invc-close:hover { background: hsl(24 10% 10% / 0.06); color: var(--wp-ink); }
    .invc-body {
      flex: 1; min-height: 0; overflow-y: auto;
      display: grid; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
    }
    .invc-pane { padding: 22px 24px 26px; min-width: 0; }
    .invc-divider { background: hsl(24 10% 10% / 0.08); }
    .invc-summary { display: flex; gap: 24px; margin-bottom: 10px; }
    .invc-stat { flex: none; background: none; border: none; padding: 0; }
    .invc-stat-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--wp-ink-label); }
    .invc-stat-val { font-size: 26px; font-weight: 400; color: var(--wp-ink); font-variant-numeric: tabular-nums; }
    .invc-paid { color: var(--wp-ink-label); }
    .invc-progress { height: 4px; border-radius: 2px; background: hsl(24 10% 10% / 0.08); overflow: hidden; margin-bottom: 6px; }
    .invc-progress-fill { height: 100%; background: var(--wp-client-blue); border-radius: 2px; }
    .invc-progress-caption { font-size: 11px; color: var(--wp-ink-label); margin-bottom: 18px; }
    .invc-grid { gap: 14px 16px; }
    .invc-grid label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp-ink-label); min-width: 0; }
    .invc-grid input, .invc-grid textarea, .invc-grid select {
      background: var(--wp-surface); border: 1px solid var(--wp-hairline-strong); border-radius: var(--wp-radius);
      padding: 10px 12px; font-size: 14px; color: var(--wp-ink); overflow-wrap: anywhere;
    }
    .invc-grid textarea { min-height: 62px; }
    .invc-colors { margin: 8px 0 4px; }
    .invc-swatch.sel { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px currentColor; border-color: transparent; }
    .invc-hist-head { font-size: 12.5px; font-weight: 800; letter-spacing: 0.09em; color: var(--wp-ink-label); margin: 0 0 10px; }
    .invc-row { border-top: 1px solid var(--wp-hairline); border-bottom: none; padding: 12px 2px; }
    .invc-row:hover { background: var(--wp-surface); }
    .invc-row-num { font-weight: 400; color: var(--wp-ink); }
    .invc-row-total { font-weight: 400; color: var(--wp-ink); }
    .invc-contacts-wrap { margin: 2px 0 4px; }
.invc-contact-row { display: grid; grid-template-columns: 54px 1.1fr 1.3fr 0.9fr 26px; gap: 6px; align-items: center; margin-bottom: 6px; }
.invc-contact-row input { min-width: 0; }
.invc-contact-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.ct-del { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px; }
.ct-del:hover:not(:disabled) { color: #b91c1c; }
.ct-del:disabled { opacity: 0.3; cursor: default; }
.send-also { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
/* .send-compose label is a column (field stacks); these two are checkbox
   rows — checkbox first, text after, one line. */
.send-compose .send-also label, .send-also label { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.send-compose .send-also input[type="checkbox"], .send-also input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.send-compose label.send-others, .send-others { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.send-compose label.send-others input[type="checkbox"], .send-others input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.send-others input { accent-color: var(--accent, #1E3A5F); }
.invc-recur-toggle { font: inherit; border: none; background: none; cursor: pointer; padding: 0 2px; }
.invc-recur-toggle:hover { opacity: 1 !important; transform: scale(1.15); }
.invc-chip { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 999px; }
    .invc-chip-sent { background: var(--wp-accent-tint); border: 1px solid var(--wp-accent-tint-border); color: var(--wp-accent); }
    .invc-chip-plain { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wp-ink-label); }
    .invc-foot {
      flex: none; background: var(--wp-panel-footer); border-top: 1px solid var(--wp-rule);
      padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }
    .invc-foot-left { display: flex; align-items: center; gap: 10px; }
    .invc-foot-note { font-size: 12px; color: var(--wp-ink-label); }
    .invc-foot-right { display: flex; gap: 8px; }
    @media (max-width: 760px) { .invc-body { grid-template-columns: 1fr; } .invc-divider { display: none; } }

    /* ── Invoice editor (#invEditView) ── */
    .wpi-editor { display: flex; flex-direction: column; max-height: min(86vh, 860px); }
    #invOverlay .inv-modal:has(.wpi-editor) { max-width: 800px; background: var(--wp-panel); border-radius: var(--wp-radius); box-shadow: var(--wp-shadow-modal); border: 1px solid var(--wp-hairline); }
    .wpi-head { flex: none; background: var(--wp-surface); border-bottom: 1px solid var(--wp-rule); padding: 22px 24px 20px; display: flex; align-items: flex-start; gap: 20px; position: relative; }
    .wpi-head-left { flex: 1; min-width: 0; }
    .wpi-head-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp-ink-label); }
    .wpi-head-name { display: flex; align-items: center; gap: 9px; font-family: var(--wp-font-heading); font-weight: 400; font-size: 24px; color: var(--wp-ink); margin-top: 2px; flex-wrap: wrap; }
    .wpi-status-sel { font-family: var(--wp-font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--wp-accent-tint); border: 1px solid var(--wp-accent-tint-border); color: var(--wp-accent); border-radius: 999px; padding: 3px 10px; }
    .wpi-head-meta { font-size: 13px; color: var(--wp-ink-label); margin-top: 6px; }
    .wpi-head-badges { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
    .wpi-head-right { text-align: right; flex-shrink: 0; padding-right: 34px; }
    .wpi-head-total { font-size: 30px; font-weight: 400; color: var(--wp-accent); margin-top: 2px; font-variant-numeric: tabular-nums; }
    .wpi-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 26px; }
    .wpi-fromto {
      display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
      background: hsl(24 10% 10% / 0.08); border: 1px solid hsl(24 10% 10% / 0.08);
      border-radius: var(--wp-radius); overflow: hidden; margin-bottom: 22px;
    }
    .wpi-fromto-cell { background: var(--wp-surface); padding: 16px 18px; }
    .wpi-fromto-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .wpi-fromto-note { font-size: 11px; color: var(--wp-ink-label); }
    .wpi-textlink { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--wp-accent); text-decoration: none; }
    .wpi-textlink:hover { text-decoration: underline; }
    .wpi-client-sel { background: var(--wp-panel); border: 1px solid var(--wp-hairline-strong); border-radius: var(--wp-radius); padding: 8px 10px; font-size: 13px; margin-bottom: 8px; width: 100%; }
    .wpi-fromto-cell #invClientName, .wpi-fromto-cell #invClientEmail, .wpi-fromto-cell #invClientAddr {
      border: none; background: none; padding: 2px 0; font-size: 13px; color: var(--wp-ink-label); margin-bottom: 2px;
    }
    .wpi-fromto-cell input:read-only, .wpi-fromto-cell textarea:read-only { cursor: default; }
    .wpi-fieldsrow { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px 14px; margin-bottom: 4px; }
    .wpi-field { grid-column: span 1; }
    .inv-mini { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp-ink-label); }
    .inv-mini input, .inv-mini select { margin-top: 4px; background: var(--wp-surface); border: 1px solid var(--wp-hairline-strong); border-radius: var(--wp-radius); padding: 8px 10px; font-size: 13px; color: var(--wp-ink); width: 100%; }
    .wpi-schedule { margin: 14px 0 22px; padding-top: 14px; border-top: 1px solid var(--wp-hairline); }
    .wpi-schedule-row { display: flex; flex-wrap: wrap; gap: 11px 26px; margin-top: 8px; }
    .inv-auto-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--wp-ink-label); }
    .inv-auto-check input[type="checkbox"] { width: 16px; height: 16px; border-radius: 4px; accent-color: var(--wp-accent); }
    .wpi-items-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 12.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp-ink-label); margin: 4px 0 8px; }
    .wpi-items-count { font-weight: 600; text-transform: none; letter-spacing: 0; }
    .wpi-table { table-layout: fixed; }
    .wpi-table th:first-child, .wpi-table td:first-child { width: auto; }
    .wpi-table th { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp-ink-label); border-bottom: 1px solid var(--wp-rule-heavy); }
    .wpi-table tbody tr { background: var(--wp-surface); border: 1px solid var(--wp-hairline-strong); border-radius: var(--wp-radius); }
    .wpi-table td { border-bottom: none; padding: 10px 12px; }
    .wpi-table .inv-i-desc { font-size: 13px; }
    .wpi-line-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--wp-ink-label); margin-top: 4px; }
    .wpi-line-sub input { width: 52px; font-size: 12px; padding: 2px 4px; border: 1px solid transparent; background: none; border-radius: 4px; }
    .wpi-line-sub input:hover, .wpi-line-sub input:focus { border-color: var(--wp-hairline-strong); background: var(--wp-surface); outline: none; }
    .wpi-totals { margin-top: 10px; }
    .wpi-totals .inv-total-final { border-top: 1px solid var(--wp-rule-heavy); }
    .wpi-totals .inv-total-final b { font-size: 26px; font-weight: 400; color: var(--wp-accent); }
    .wpi-delivery { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--wp-hairline); }
    .wpi-delivery-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp-ink-label); margin-bottom: 10px; }
    .wpi-foot { flex: none; background: var(--wp-panel-footer); border-top: 1px solid var(--wp-rule); padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .wpi-foot > div:first-child { display: flex; align-items: center; gap: 10px; }

    /* ── Public pay page (#publicInvoiceView) ── */
    #publicInvoiceView { background: var(--wp-bg); font-family: var(--wp-font-body); }
    .pubinv-wrap { max-width: 700px; }
    .pubinv-wrap .inv-sheet {
      background: var(--wp-surface); border: 1px solid var(--wp-hairline); border-radius: var(--wp-radius);
      padding: 40px 42px 38px; box-shadow: 0 1px 2px hsl(24 10% 10% / 0.04), 0 10px 34px hsl(24 10% 10% / 0.06);
    }
    .pubinv-wrap .inv-from-logo { max-height: 36px; }
    .pubinv-wrap .inv-from-name { font-family: var(--wp-font-heading); font-weight: 400; font-size: 22px; color: var(--wp-ink); }
    .pubinv-wrap .inv-lbl { color: var(--wp-ink-label); }
    .pubinv-wrap .inv-from-rest { color: var(--wp-ink-label); font-size: 13px; }
    .pubinv-wrap .inv-bill-to { font-size: 14px; }
    .pubinv-wrap .inv-table { border: 1px solid var(--wp-hairline); border-radius: var(--wp-radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
    .pubinv-wrap .inv-table th { background: hsl(34 16% 96%); border-bottom: 1px solid var(--wp-hairline); padding: 8px 10px; }
    .pubinv-wrap .inv-table td { padding: 8px 10px; border-bottom: 1px solid var(--wp-hairline); }
    .pubinv-wrap .inv-totals > div span:first-child { color: var(--wp-ink-label); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
    .pubinv-wrap .inv-total-row { border-top: 1px solid var(--wp-rule-heavy); margin-top: 6px; padding-top: 8px !important; }
    .pubinv-wrap .inv-total-row span:first-child { font-size: 11px; font-weight: 600; }
    .pubinv-wrap .inv-total-row span:last-child { font-size: 24px; font-weight: 400; color: var(--wp-accent); }
    .pubinv-wrap .inv-badge.sent, .pubinv-wrap .inv-badge.due { background: var(--wp-accent-tint); color: var(--wp-accent); }
    .pubinv-wrap .inv-badge.paid { background: hsl(140 30% 92%); color: hsl(140 40% 30%); }
    .pubinv-wrap .inv-badge.overdue { background: hsl(8 40% 92%); color: var(--wp-danger); }
    .pubinv-payrow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
    .pubinv-pay {
      flex: 1; min-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 3px;
      border: none; border-radius: var(--wp-radius); padding: 14px 18px; font-size: 15px; font-weight: 500;
      cursor: pointer;
    }
    .pubinv-pay-sub { font-size: 11.5px; font-weight: 400; opacity: 0.8; }
    .pubinv-pay-bank { background: var(--wp-accent); color: #fff; box-shadow: var(--wp-shadow-btn); }
    .pubinv-pay-bank:hover { background: var(--wp-accent-hover); }
    .pubinv-pay-card { background: var(--wp-surface); color: var(--wp-ink); border: 1px solid hsl(24 10% 10% / 0.1); }
    .pubinv-pay-card:hover { border-color: hsl(24 10% 10% / 0.2); }
    .pubinv-paynote { font-size: 11px; color: var(--wp-ink-label); text-align: center; margin-top: 14px; }
    .wpi-lock-note { text-align: center; font-size: 12.5px; color: var(--wp-ink-label); margin-top: 22px; }
    .wpi-lock-icon { font-size: 11px; }
    .pubinv-dlwrap { margin-top: 10px; }
    .wpi-textlink-btn { background: none; border: none; color: var(--wp-accent); font-size: 13px; cursor: pointer; padding: 0; }
    .wpi-textlink-btn:hover { text-decoration: underline; }
    .pubinv-foot { color: var(--wp-ink-label); }

    /* ── Client portal (#publicClientView) ── */
    #publicClientView { background: var(--wp-bg); font-family: var(--wp-font-body); }
    .pubcl-wrap { max-width: 760px; background: var(--wp-panel); border-radius: var(--wp-radius); overflow: hidden; padding: 0; }
    .pubcl-head { background: var(--wp-surface); padding: 26px 28px 24px; margin: 0; }
    .pubcl-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
    .pubcl-head-right { text-align: right; flex-shrink: 0; }
    .pubcl-balance { font-size: 36px; font-weight: 400; color: var(--wp-accent); font-variant-numeric: tabular-nums; }
    .pubcl-updated { font-size: 12px; color: var(--wp-ink-label); margin-top: 8px; }
    .pubcl-logo { max-height: 32px; }
    .pubcl-for { font-family: var(--wp-font-heading); font-weight: 400; font-size: 26px; color: var(--wp-ink); }
    .pubcl-from { color: var(--wp-ink-label); }
    .pubcl-stats { padding: 22px 28px 0; margin-bottom: 0; }
    .pubcl-stat { background: var(--wp-surface); border-color: var(--wp-hairline); border-radius: var(--wp-radius); box-shadow: var(--wp-shadow-card); }
    .pubcl-stat-lbl { color: var(--wp-ink-label); }
    .pubcl-stat-val { font-weight: 400; color: var(--wp-ink); }
    .pubcl-sec { padding: 0 28px; }
    .pubcl-sec:first-of-type { margin-top: 22px; }
    .pubcl-sec-head { color: var(--wp-ink-label); font-weight: 800; letter-spacing: 0.09em; font-size: 12.5px; }
    .pubcl-row { background: var(--wp-surface); border-color: var(--wp-hairline); border-radius: var(--wp-radius); box-shadow: var(--wp-shadow-card); padding: 15px 18px; }
    .pubcl-row-num { font-weight: 400; color: var(--wp-ink); }
    .pubcl-row-sub { color: var(--wp-ink-label); }
    .pubcl-row-amt { font-weight: 400; font-size: 15px; color: var(--wp-ink); }
    .pubcl-badge.due { background: var(--wp-accent-tint); color: var(--wp-accent); }
    .pubcl-badge.overdue { background: hsl(8 40% 92%); color: var(--wp-danger); }
    .pubcl-badge.paid { background: hsl(140 30% 92%); color: hsl(140 40% 30%); }
    .pubcl-view { border-radius: var(--wp-radius); border-color: var(--wp-hairline-strong); color: var(--wp-ink-muted); }
    .pubcl-view.pay { background: var(--wp-accent); border-color: var(--wp-accent); color: #fff; }
    .pubcl-empty { color: var(--wp-ink-label); }

    /* ── Sidebar: navy chrome (product chrome, not board content —
       stays navy in every light theme; only Charcoal changes it) ── */
    .sidebar { background: #1E3A5F; border-right: 1px solid hsl(215 52% 18%); color: #fff; }
    .sidebar-collapse-btn { background: hsl(215 45% 27%); color: hsl(215 22% 80%); }
    .sidebar-collapse-btn:hover { background: hsl(215 45% 33%); color: #fff; }
    .sidebar .nav-link {
      color: hsl(215 22% 82%); border-radius: var(--wp-radius); font-size: 13.5px; font-weight: 400;
    }
    .sidebar .nav-link:hover { background: hsl(215 45% 25%); color: #fff; }
    .sidebar .nav-link.active { background: hsl(215 45% 27%); box-shadow: inset 0 1px 0 hsl(215 40% 42%); color: #fff; font-weight: 600; }
    .sidebar .nav-chevron { color: hsl(215 22% 72%); }
    .sidebar .nav-chevron:hover { color: #fff; }
    .nav-section-label {
      padding: 8px 24px 4px; margin: 10px 0 0;
      font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      color: hsl(215 25% 66%);
    }
    .sidebar .nav-sublist-item { color: hsl(215 22% 78%); }
    .sidebar .nav-sublist-item:hover { background: hsl(215 45% 25%); color: #fff; }
    .sidebar .nav-sublist-item.active { background: hsl(215 45% 27%); color: #fff; }
    .sidebar .nav-sublist-section { color: hsl(215 25% 66%); opacity: 1; }
    .sidebar .nav-sublist-empty { color: hsl(215 22% 70%); }
    .sidebar-user { border-top-color: hsl(215 40% 30%); }
    .sidebar-user-row:hover { background: hsl(0 0% 100% / 0.08); }
    .sidebar-user-name { color: #fff; }
    .theme-select { background: hsl(0 0% 100% / 0.06); color: hsl(215 22% 82%); border-color: hsl(0 0% 100% / 0.14); }
    .theme-select:hover { color: #fff; }
    .logout-btn { color: hsl(215 22% 78%); }
    .logout-btn:hover { color: #fff; }
    [data-theme="charcoal"] .sidebar { background: #201D1B; border-right-color: hsl(34 10% 96% / 0.1); }

    /* ── Theme-swatch picker (board settings / create-edit-board popup) ── */
    .wp-theme-picker { margin-top: 18px; }
    .wp-theme-note { font-size: 12px; color: var(--wp-ink-label, var(--text-muted)); margin: -2px 0 10px; }
    .wp-theme-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
    .wp-theme-swatch {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      width: 84px; padding: 10px 8px; border-radius: var(--wp-radius, 6px);
      border: 1.5px solid transparent; background: none; cursor: pointer;
      font: inherit; color: var(--text-primary);
    }
    .wp-theme-swatch:hover { background: var(--bg-hover); }
    .wp-theme-swatch.sel { border-color: var(--wp-accent, #1E3A5F); background: var(--wp-accent-tint, rgba(30,58,95,0.06)); }
    .wp-theme-swatch-cols { display: flex; width: 100%; height: 20px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
    .wp-theme-swatch-cols span { flex: 1; }
    .wp-theme-swatch-accent { width: 16px; height: 16px; border-radius: 50%; }
    .wp-theme-swatch-name { font-size: 11px; font-weight: 500; text-align: center; }

    /* Print: only the invoice sheet goes on paper. */
    @media print {
      body * { visibility: hidden !important; }
      #invSheet, #invSheet *, #pubinvSheet, #pubinvSheet * { visibility: visible !important; }
      #invSheet, #pubinvSheet { position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
      #pubinvSheet { box-shadow: none !important; border: none !important; }
      .inv-overlay { position: static !important; background: none !important; padding: 0 !important; overflow: visible !important; }
      .inv-modal { box-shadow: none !important; max-width: none !important; }
      .inv-noprint, .inv-noprint-inline, .inv-del-line, .inv-add-row { display: none !important; }
      /* The Due mode <select> is an editor control; print its value as text. */
      .inv-due-print { display: inline !important; }
      .inv-due-hide { display: none !important; }
      .inv-table input, .inv-bill-to input, .inv-bill-to textarea, .inv-notes-wrap textarea, .inv-mini input {
        border: none !important; padding: 2px 0 !important; background: none !important; resize: none;
      }
    }
    .qct-overlay {
      position: fixed; inset: 0; background: var(--overlay); z-index: 2000;
      display: flex; align-items: center; justify-content: center;
    }
    .qct-popup {
      background: var(--bg-white); border-radius: var(--radius-xl);
      box-shadow: var(--shadow-modal); padding: 24px; width: 320px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .qct-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .qct-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .qct-input, .qct-select {
      width: 100%; padding: 9px 12px; border: 1px solid var(--border-default);
      border-radius: var(--radius-md); font-size: 14px; color: var(--text-primary);
      background: var(--bg-subtle); outline: none; font-family: var(--font-base);
    }
    .qct-input:focus, .qct-select:focus { border-color: var(--accent); }
    .qct-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
    .qct-cancel {
      padding: 8px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
      background: var(--bg-white); color: var(--text-secondary); font-size: 14px; cursor: pointer;
    }
    .qct-submit {
      padding: 8px 16px; border: none; border-radius: var(--radius-md);
      background: var(--accent); color: var(--text-on-accent); font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .qct-submit:hover { background: var(--accent-hover); }
    .task-assignee-picker { padding: 0 16px 8px; display: flex; flex-wrap: wrap; gap: 6px; }
    .assignee-avatar-btn {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 10px 4px 4px; border-radius: 20px;
      border: 2px solid transparent; background: none;
      cursor: pointer; font-family: var(--font-base); font-size: 12px;
      color: var(--text-primary); transition: background 0.12s, border-color 0.12s;
    }
    .assignee-avatar-btn:hover { background: var(--bg-hover); }
    .assignee-avatar-btn.selected { border-color: var(--accent); background: var(--bg-hover); }
    .task-assignee-select {
      width: 100%; padding: 7px 10px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      font-size: 13px; font-family: var(--font-base);
      outline: none; background: var(--bg-white); cursor: pointer;
    }
    .task-assignee-select:focus { border-color: var(--text-muted); }
    /* task modal tabs — same pill-segmented style as .disc-tab */
    .tm-tab {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer; font-family: var(--font-base); white-space: nowrap;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .tm-tab:hover { color: var(--text-primary); }
    .tm-tab.active {
      background: var(--bg-white, var(--bg-white));
      color: var(--text-primary);
      font-weight: 600;
      border-color: var(--border-default, var(--gray-200));
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    /* Factory tabs in the product room read as FOLDER tabs — outlined,
       rounded on top, open at the bottom toward the room below — so the
       external rooms look like separate physical folders next to the
       internal pill tabs. */
    #pdRoomOverlay .disc-tabs { overflow: visible; align-items: flex-end; }
    #pdRoomOverlay .disc-tabs .tm-tab[data-pdtab^="factory:"] {
      border: 1.5px solid #a8a69f;
      border-bottom: none;
      border-radius: 11px 11px 0 0;
      padding: 8px 18px 12px;
      margin: 0 0 -7px 0;
      background: #e9e7e1;   /* unselected folders sit DIM behind */
      color: var(--text-muted);
      font-weight: 600;
      font-size: 11.5px;
      box-shadow: none;
      position: relative;
    }
    #pdRoomOverlay .disc-tabs .tm-tab[data-pdtab^="factory:"]:first-of-type { margin-left: 10px; }
    #pdRoomOverlay .disc-tabs .tm-tab[data-pdtab^="factory:"] + .tm-tab[data-pdtab^="factory:"] { margin-left: -2px; }
    #pdRoomOverlay .disc-tabs .tm-tab[data-pdtab^="factory:"]:hover { color: var(--text-primary); background: #f3f2ee; }
    #pdRoomOverlay .disc-tabs .tm-tab[data-pdtab^="factory:"].active {
      background: #fff;      /* the open folder is the bright one, fused with the room */
      color: var(--text-primary);
      border-color: #85847e;
      z-index: 2;
    }

    /* Task modal activity feed (right column) */
    .task-activity-panel {
      display: none;
    }

    /* ── Project modal: compact breadcrumb + two-column title area ── */
    .modal .modal-title-row {
      width: 50%;
      border-bottom: none;
      padding: 10px 20px;
    }
    .modal .modal-breadcrumb {
      font-size: 10px;
    }
    .modal #closeBtn, .modal #pdpjCloseBtn {
      position: absolute;
      right: 20px;
      top: 16px;
    }
    .modal .modal-left-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: 0;
      padding: 0;
    }
    .modal .proj-title-col {
      padding: 8px 16px 6px 28px;
      border-right: 1px solid var(--border-light);
      align-self: stretch;
    }
    .modal #mProjDescBody {
      padding: 8px 28px 6px 16px;
      display: flex;
      flex-direction: column;
    }
    .modal #projectDesc {
      flex: 1;
      min-height: 44px;
    }

    /* ── Project modal: members full-width horizontal strip ── */
    .modal .modal-two-col {
      grid-template-rows: auto auto 1fr;
    }
    .modal .modal-left-top {
      grid-column: 1 / -1;
      border-right: none;
    }
    .modal .modal-members {
      grid-column: 1 / -1;
      border-right: none;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      padding: 8px 16px 12px;
      gap: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    .modal .modal-members .discussion-label {
      padding: 0;
      flex-shrink: 0;
    }
    .modal .modal-members .m-section-body {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      flex: 1;
      gap: 8px;
    }
    .modal .members-list {
      padding: 0;
      flex-shrink: 0;
    }
    .modal .modal-members .manage-members-btn {
      display: inline-block;
      width: auto;
      margin: 0;
    }

    /* ── Task modal: compact breadcrumb bar ── */
    .task-modal .modal-title-row {
      width: 100%;
      border-bottom: none;
      padding: 10px 20px;
      position: relative;
    }
    .task-modal .modal-breadcrumb {
      font-size: 10px;
      flex: 1;
      min-width: 0;
    }
    .task-modal .modal-title-row .workflow-actions {
      flex-shrink: 0;
    }
    .task-modal #taskCloseBtn {
      position: absolute;
      right: 20px;
      top: 16px;
    }

    /* ── Task modal: fully single-column ── */
    .task-modal .modal-two-col {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto 1fr;
    }
    .task-modal .modal-left-top {
      border-right: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: 0;
      padding: 0;
    }
    .task-modal .task-title-col {
      padding: 8px 16px 6px 28px;
      border-right: 1px solid var(--border-light);
      align-self: stretch;
    }
    .task-modal #mTaskDescBody {
      padding: 8px 28px 6px 16px;
      display: flex;
      flex-direction: column;
    }
    .task-modal #taskDescInput {
      flex: 1;
      min-height: 44px;
    }
    .task-modal .modal-members {
      border-right: none;
    }
    .task-modal .modal-members {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      padding: 8px 16px 12px;
      gap: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    .task-modal .modal-members .discussion-label {
      padding: 0;
      border: none;
    }
    .task-modal .members-list {
      padding: 0;
    }
    .task-modal .discussion {
      border-right: none;
    }
    .task-activity-header {
      padding: 12px 16px 8px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--text-muted);
      border-bottom: 1px solid var(--border-light);
      flex-shrink: 0;
    }
    .task-activity-list {
      flex: 1; overflow-y: auto;
      padding: 8px 0;
    }
    .activity-entry {
      display: flex; gap: 10px; padding: 7px 16px;
      align-items: flex-start;
    }
    .activity-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--border-lighter); flex-shrink: 0; margin-top: 4px;
    }
    .activity-body { flex: 1; min-width: 0; }
    .activity-text {
      font-size: 12px; color: var(--text-secondary); line-height: 1.45;
    }
    .activity-text strong { font-weight: 600; color: var(--text-primary); }
    .activity-preview {
      font-size: 11px; color: var(--text-muted);
      margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .activity-time {
      font-size: 10px; color: var(--text-placeholder);
      flex-shrink: 0; white-space: nowrap; margin-top: 3px;
    }
    .task-activity-list:empty::after {
      content: 'No activity yet.';
      display: block; text-align: center;
      font-size: 12px; color: var(--text-placeholder);
      padding: 24px 16px;
    }

    .message-composer {
      margin: 0 16px 16px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      overflow: hidden;
      flex-shrink: 0;
    }
    .composer-toolbar {
      display: flex;
      gap: 2px;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border-light);
      background: var(--bg-subtle);
      flex-wrap: wrap;
    }
    .composer-toolbar.hidden { display: none; }
    .fmt-btn {
      width: 28px;
      height: 28px;
      border: none;
      border-radius: var(--radius-sm);
      background: none;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.1s;
    }
    .fmt-btn:hover { background: var(--border-default); }
    .fmt-btn.active { background: var(--accent-active-bg); color: var(--accent-active-text); }
    .toolbar-divider { width: 1px; background: var(--border-default); margin: 4px 2px; }
    .message-input {
      min-height: 52px;
      max-height: 120px;
      overflow-y: auto;
      padding: 10px 14px;
      font-size: 13px;
      font-family: var(--font-base);
      color: var(--text-primary);
      outline: none;
      line-height: 1.5;
    }
    .message-input:empty::before {
      content: attr(data-placeholder);
      color: var(--text-lighter);
      pointer-events: none;
    }
    .message-input a { color: var(--accent-link); text-decoration: underline; }
    .message-input code, .message-text code {
      background: var(--border-light);
      padding: 1px 5px;
      border-radius: var(--radius-xs);
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .message-input blockquote, .message-text blockquote {
      border-left: 3px solid var(--blockquote-border);
      margin: 2px 0;
      padding: 2px 10px;
      color: var(--text-tertiary);
    }
    .message-text a { color: var(--accent-link); text-decoration: underline; }
    /* Rich link preview (unfurl) card shown under a message with a URL. */
    .link-preview-card {
      display: flex; margin-top: 8px; max-width: 420px; width: fit-content;
      border: 1px solid var(--border-default); border-radius: 10px;
      overflow: hidden; text-decoration: none !important; background: var(--bg-white);
      transition: box-shadow .15s, border-color .15s; align-items: stretch;
    }
    .link-preview-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.08); border-color: var(--text-muted); }
    .link-preview-card .lp-thumb { flex-shrink: 0; width: 100px; background: var(--bg-subtle, #f4f4f4); }
    .link-preview-card .lp-thumb img { width: 100px; height: 100%; min-height: 68px; max-height: 128px; object-fit: cover; display: block; }
    .link-preview-card .lp-body { padding: 9px 12px; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
    .link-preview-card .lp-site { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
    .link-preview-card .lp-site span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .link-preview-card .lp-favicon { width: 13px; height: 13px; border-radius: 3px; object-fit: contain; flex-shrink: 0; }
    .link-preview-card .lp-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
      overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .link-preview-card .lp-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.35;
      overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    @media (max-width: 640px) { .link-preview-card { max-width: 100%; } }
    .attachment-strip {
      display: none; flex-direction: row; gap: 8px;
      padding: 8px 12px; overflow-x: auto; flex-shrink: 0;
      border-top: 1px solid var(--border-light); background: var(--bg-subtle);
    }
    .attachment-strip.has-items { display: flex; }
    .attachment-thumb {
      position: relative; width: 72px; height: 72px; flex-shrink: 0;
      border-radius: var(--radius-md); overflow: hidden;
      border: 1px solid var(--border-default); background: var(--bg-hover);
      cursor: grab;
    }
    .attachment-thumb.dragging { opacity: 0.35; }
    .attachment-thumb.drop-before { box-shadow: -3px 0 0 var(--accent-active-text); }
    .attachment-thumb img, .attachment-thumb video {
      width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
    }
    .attachment-file-icon {
      width: 100%; height: 100%; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 2px; padding: 4px;
    }
    .attachment-file-icon span:first-child { font-size: 26px; line-height: 1; }
    .attachment-file-ext { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
    .attachment-remove {
      display: none; position: absolute; top: 3px; right: 3px; z-index: 3;
      width: 18px; height: 18px; border-radius: var(--radius-full);
      background: rgba(0,0,0,0.65); color: var(--text-on-accent); border: none; cursor: pointer;
      font-size: 10px; align-items: center; justify-content: center; line-height: 1;
    }
    .attachment-thumb:hover .attachment-remove { display: flex; }
    .attachment-loading {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      background: var(--bg-hover);
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .attachment-spinner {
      width: 22px; height: 22px; border-radius: var(--radius-full);
      border: 2px solid var(--border-default); border-top-color: var(--accent-active-text);
      animation: spin 0.75s linear infinite;
    }
    .attachment-progress {
      font-size: 11px; font-weight: 600; color: var(--text-secondary);
      background: var(--bg-white); padding: 2px 6px; border-radius: var(--radius-sm);
    }

    /* Voice recording UI inside the composer */
    .voice-btn.recording { background: var(--danger-bg) !important; color: #b91c1c !important; }
    /* Dictation: blue tint while listening so it's distinct from the
       red voice-record state. */
    .dictate-btn.listening { background: var(--info-border) !important; color: var(--accent-link) !important; }
    .dictate-btn.unsupported { display: none; }
    .voice-rec {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; background: #fef2f2;
      border: 1px solid #fecaca; border-radius: var(--radius-md);
      margin: 8px 16px;
    }
    .voice-rec-pulse {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--danger-strong); flex-shrink: 0;
      animation: voicePulse 1.2s ease-in-out infinite;
    }
    @keyframes voicePulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }
    .voice-rec-label { font-size: 13px; font-weight: 600; color: var(--danger-deep); }
    .voice-rec-time { font-size: 13px; color: var(--danger-deep); font-variant-numeric: tabular-nums; }
    .voice-rec-cancel, .voice-rec-stop {
      width: 32px; height: 32px; border-radius: 50%;
      border: none; cursor: pointer; font-size: 14px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .voice-rec-cancel { background: var(--bg-white); color: var(--danger-deep); border: 1px solid #fecaca; }
    .voice-rec-cancel:hover { background: var(--danger-bg); }
    .voice-rec-stop { background: var(--danger-strong); color: var(--text-on-accent); }
    .voice-rec-stop:hover { background: var(--danger-deep); }

    /* Inline audio player in sent messages */
    .message-text audio, .msg-audio {
      display: inline-block; vertical-align: middle;
      max-width: 260px; height: 38px; margin: 6px 6px 0 0;
    }
    .attachment-error {
      font-size: 10px; font-weight: 600; color: var(--danger-strong); padding: 2px 6px;
      background: #fef2f2; border-radius: var(--radius-sm); text-align: center;
    }
    .composer-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 8px;
      border-top: 1px solid var(--border-light);
      background: var(--bg-subtle);
    }
    .composer-actions { display: flex; align-items: center; gap: 1px; }
    .send-btn {
      width: 30px;
      height: 30px;
      border-radius: var(--radius-full);
      background: var(--accent);
      color: var(--bg-white);
      border: none;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .send-btn:hover { background: var(--accent-hover); }
    /* Emoji picker — full searchable, categorized.
       Three rows: search input, scrollable category sections,
       category jump-tab bar at the bottom. */
    .emoji-picker {
      position: fixed;
      width: 340px;
      max-width: calc(100vw - 16px);
      height: 360px;
      max-height: calc(100vh - 80px);
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      display: none;
      flex-direction: column;
      overflow: hidden;
      box-shadow: var(--shadow-popup);
      z-index: 300;
    }
    .emoji-picker.open { display: flex; }
    .emoji-search-wrap {
      flex-shrink: 0;
      padding: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    .emoji-search {
      width: 100%;
      padding: 6px 10px;
      font-size: 13px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      outline: none;
      background: var(--bg-light, var(--gray-50));
      color: var(--text-primary);
      font-family: var(--font-base);
      box-sizing: border-box;
    }
    .emoji-search:focus { background: var(--bg-white); border-color: var(--text-muted); }
    .emoji-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 4px 8px 8px;
      scrollbar-width: thin;
    }
    .emoji-section-title {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      padding: 8px 2px 4px;
      position: sticky;
      top: 0;
      background: var(--bg-white);
      z-index: 1;
    }
    .emoji-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 2px;
    }
    .emoji-item {
      width: 100%;
      aspect-ratio: 1;
      border: none;
      background: none;
      border-radius: var(--radius-sm);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background-color 0.1s;
    }
    .emoji-item:hover { background: var(--border-light); }
    .emoji-empty {
      padding: 24px 8px;
      text-align: center;
      font-size: 13px;
      color: var(--text-muted);
    }
    .emoji-tabbar {
      flex-shrink: 0;
      display: flex;
      gap: 2px;
      padding: 6px;
      border-top: 1px solid var(--border-light);
      background: var(--bg-light, var(--gray-50));
    }
    .emoji-tab {
      flex: 1;
      height: 28px;
      border: none;
      background: none;
      border-radius: var(--radius-sm);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .emoji-tab:hover { background: var(--bg-white); }

    .attach-menu {
      position: fixed;
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: 28px;
      padding: 10px 14px;
      display: none;
      gap: 10px;
      align-items: center;
      box-shadow: var(--shadow-popup);
      z-index: 300;
    }
    .attach-menu.open { display: flex; }
    .attach-item {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      background: var(--border-light, var(--gray-100));
      color: var(--text-primary, var(--text-strong));
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: background 0.15s ease, transform 0.15s ease;
    }
    .attach-item:hover { background: var(--gray-200); }
    .attach-item:active { transform: scale(0.92); }
    .attach-aa {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.5px;
      line-height: 1;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      color: currentColor;
    }

    /* Lightbox */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.88);
      z-index: 500;
      justify-content: center;
      align-items: center;
      cursor: zoom-out;
    }
    .lightbox.open { display: flex; }
    .lightbox img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: var(--radius-md);
      object-fit: contain;
      cursor: default;
      box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    }
    .lightbox-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      font-size: 18px;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .lightbox-close:hover { background: rgba(255,255,255,0.3); }
    /* Pencil button to launch the annotator inside the lightbox */
    .lightbox-annotate {
      position: absolute;
      top: 20px;
      right: 66px;
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .lightbox-annotate:hover { background: rgba(255,255,255,0.3); }
    /* Download button — save the currently-viewed image to disk. */
    .lightbox-download {
      position: absolute;
      top: 20px;
      right: 112px;
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .lightbox-download:hover { background: rgba(255,255,255,0.3); }
    /* Magnifier pair — same pill style, queued left of the download. */
    .lightbox-zoom {
      position: absolute;
      top: 20px;
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .lightbox-zoom:hover { background: rgba(255,255,255,0.3); }
    .lightbox-zoom-in  { right: 158px; }
    .lightbox-zoom-out { right: 204px; }
    .lightbox-reply {
      position: absolute;
      top: 20px;
      right: 250px;
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .lightbox-reply:hover { background: rgba(255,255,255,0.3); }
    /* Tiny image quote inside reply previews and reply-quote bubbles. */
    .reply-thumb {
      height: 30px; width: auto; border-radius: 4px;
      vertical-align: middle; margin-left: 6px;
    }
    #imgLightbox .lightbox-close,
    #imgLightbox .lightbox-annotate,
    #imgLightbox .lightbox-download,
    #imgLightbox .lightbox-reply,
    #imgLightbox .lightbox-zoom { z-index: 9002; }

    /* Discussion tabs — pill-style segmented control.
       The .disc-tabs container is the light-grey rail; each .disc-tab is a
       pill that snaps to white-on-shadow when active. Icons stay full-size
       (14px); the label is dropped to 11px so the pills stay compact. */
    .disc-tabs {
      display: flex; align-items: center;
      padding: 6px 12px; flex-shrink: 0; gap: 2px;
      background: var(--bg-light, var(--gray-100));
      border-bottom: 1px solid var(--border-light);
    }
    .disc-tab {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer; font-family: var(--font-base); white-space: nowrap;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    }
    .tab-icon { flex-shrink: 0; opacity: 0.85; width: 14px; height: 14px; }
    .disc-tab.active .tab-icon, .tm-tab.active .tab-icon { opacity: 1; }
    .col-header-icon { vertical-align: -2px; margin-right: 6px; opacity: 0.7; }
    .disc-tab:hover { color: var(--text-primary); }
    .disc-tab.active {
      background: var(--bg-white, var(--bg-white));
      color: var(--text-primary);
      font-weight: 600;
      border-color: var(--border-default, var(--gray-200));
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .disc-count { margin-left: auto; font-size: 11px; color: var(--text-light); padding-right: 4px; }
    .disc-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; position: relative; }
    .disc-panel.hidden { display: none; }
    #discPanel.drag-over::after,
    #tmDiscPanel.drag-over::after {
      content: '📎 Drop to attach';
      position: absolute; inset: 0; z-index: 20; pointer-events: none;
      background: rgba(67,56,202,0.06); border: 2px dashed var(--accent-active-text);
      border-radius: var(--radius-md); display: flex; align-items: center;
      justify-content: center; font-size: 14px; color: var(--accent-active-text); font-weight: 600;
    }
    /* Media tab */
    .media-scroll { flex: 1; overflow-y: auto; padding: 16px 20px; }
    .media-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 10px; margin-top: 4px; }
    .media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 20px; }
    .media-thumb { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--bg-hover); border: 1px solid var(--border-light); position: relative; }
    .media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .media-thumb:hover { opacity: 0.82; }
    .media-empty { font-size: 13px; color: var(--text-muted); padding: 16px 0; }
    /* Files tab */
    .files-scroll { flex: 1; overflow-y: auto; padding: 12px 20px; }
    .file-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-subtle); margin-bottom: 8px; }
    .file-icon { flex-shrink: 0; color: var(--text-muted); display: inline-flex; align-items: center; }
    .file-icon svg { display: block; }
    .file-info { flex: 1; min-width: 0; }
    .file-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .file-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .file-download { color: var(--text-muted); font-size: 18px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); text-decoration: none; display: flex; align-items: center; }
    .file-download:hover { background: var(--bg-hover); color: var(--text-primary); }
    .files-empty-msg { font-size: 13px; color: var(--text-muted); padding: 24px 0; text-align: center; line-height: 1.7; }
    .links-scroll { flex: 1; overflow-y: auto; padding: 12px 20px; }
    .link-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-subtle); margin-bottom: 8px; text-decoration: none; color: inherit; }
    .link-item:hover { background: var(--bg-hover); }
    .link-favicon { width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; object-fit: contain; }
    .link-favicon-fallback { width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; background: var(--bg-hover); display: flex; align-items: center; justify-content: center; font-size: 12px; }
    .link-body { flex: 1; min-width: 0; }
    .link-title { font-size: 13px; font-weight: 500; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .link-url-text { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
    .link-meta { font-size: 11px; color: var(--text-lighter); margin-top: 3px; }
    .links-empty-msg { font-size: 13px; color: var(--text-muted); padding: 24px 0; text-align: center; line-height: 1.7; }
    /* Inline file card in messages */
    .msg-file-card { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-hover); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; color: var(--text-primary); margin: 4px 0; max-width: 280px; cursor: pointer; transition: background 0.12s; }
    .msg-file-card:hover { background: var(--bg-subtle, #f4f4f4); }
    .msg-file-icon { flex-shrink: 0; color: var(--text-muted); display: inline-flex; align-items: center; }
    .msg-file-icon svg { display: block; }
    .msg-file-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
    .msg-file-dl { color: var(--text-muted); text-decoration: none; font-size: 15px; padding: 2px 4px; flex-shrink: 0; }
    .msg-file-dl:hover { color: var(--accent); }

    /* create mode: show all sections blank, just hide add-task button */
    .modal.create-mode #addTaskBtn { display: none; }
    .modal.create-mode .modal-actions { border-top: 1px solid var(--border-light); padding-top: 16px; }
    /* hide button bar in view mode; hide cancel in create mode (X closes) */
    .modal:not(.create-mode) .modal-actions { display: none; }
    .modal.create-mode .btn-cancel { display: none; }

    /* Task modal create mode footer */
    .task-modal-footer {
      border-top: 1px solid var(--border-light);
      padding: 14px 20px;
      display: flex; justify-content: flex-end;
      flex-shrink: 0;
    }
    .task-modal.create-mode .task-modal-footer { display: flex; }
    .task-modal:not(.create-mode) .task-modal-footer { display: none; }
    .task-modal.create-mode .task-activity-panel { opacity: 0.35; pointer-events: none; }

    /* Login screen */
    .login-overlay {
      position: fixed; inset: 0; background: var(--bg-app);
      display: flex; align-items: center; justify-content: center;
      z-index: 1000;
    }
    .login-overlay.hidden { display: none; }
    .login-box {
      background: var(--bg-white); border-radius: var(--radius-xl);
      padding: 40px; width: 360px; box-shadow: var(--shadow-modal);
      display: flex; flex-direction: column; gap: 12px;
    }
    .login-box.hidden { display: none; }
    .login-logo { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    .login-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
    .login-input {
      padding: 10px 12px; border: 1px solid var(--border-default);
      border-radius: var(--radius-md); font-size: 14px; font-family: var(--font-base);
      outline: none; width: 100%;
    }
    .login-input:focus { border-color: var(--text-muted); }
    .login-btn {
      padding: 10px; background: var(--accent); color: white;
      border: none; border-radius: var(--radius-md); font-size: 14px;
      cursor: pointer; margin-top: 4px; font-family: var(--font-base);
    }
    .login-btn:hover { background: var(--accent-hover); }
    .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .login-error { color: var(--accent-danger); font-size: 13px; min-height: 18px; }
    .oauth-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 10px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
      background: var(--bg-white); font-size: 14px; cursor: pointer;
      font-family: var(--font-base); color: var(--text-primary); transition: background 0.15s;
    }
    .oauth-btn:hover { background: var(--bg-app); }
    .oauth-apple { background: #000; color: var(--text-on-accent); border-color: #000; }
    .oauth-apple:hover { background: var(--text-primary); }
    /* Google account-chooser fix: Clerk's prebuilt social button can't
       pass prompt=select_account, so Google silently reused the last
       session and never showed the account picker. We hide Clerk's social
       section + divider and use our own #oauthGoogleBtn (which passes
       prompt=select_account). NOTE: assumes Google is the only enabled
       social provider — if Apple/etc. get enabled in Clerk, they'd need
       their own custom button too. */
    #clerkSignIn .cl-socialButtons,
    #clerkSignIn .cl-socialButtonsBlockButton,
    #clerkSignIn .cl-socialButtonsIconButton,
    #clerkSignIn .cl-dividerRow { display: none !important; }
    #customSocialAuth .oauth-btn:disabled { opacity: 0.6; cursor: default; }
    #customSocialAuth .login-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; color: var(--text-muted); font-size: 12px; }
    #customSocialAuth .login-or::before, #customSocialAuth .login-or::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.25); }
    .login-or {
      display: flex; align-items: center; gap: 10px;
      color: var(--text-muted); font-size: 12px;
    }
    .login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--border-default); }
    .login-toggle { font-size: 13px; color: var(--text-muted); text-align: center; }
    .login-toggle a { color: var(--accent); text-decoration: none; }
    .login-toggle a:hover { text-decoration: underline; }
    .profile-avatar-wrap { display: flex; justify-content: center; margin: 4px 0 8px; }
    .profile-avatar-circle {
      width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; font-weight: 600; color: var(--text-on-accent); background: var(--indigo);
    }
    .profile-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
    .sidebar-avatar {
      width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 600; color: var(--text-on-accent); background: var(--indigo);
    }
    .sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .sidebar-user-row { display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: var(--radius-md); padding: 4px; margin: -4px; transition: background 0.12s; }
    .sidebar-user-row:hover { background: rgba(255,255,255,0.08); }

    /* Profile panel */
    .profile-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 500; display: none; align-items: flex-start; justify-content: flex-end; }
    .profile-overlay.open { display: flex; }
    .profile-panel { background: var(--bg-white); width: 380px; height: 100%; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.12); }
    .profile-panel-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .profile-panel-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .profile-panel-close { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-muted); padding: 0; line-height: 1; }
    .profile-panel-close:hover { color: var(--text-primary); }
    .profile-panel-body { flex: 1; overflow-y: auto; padding: 28px 24px; display: flex; flex-direction: column; gap: 24px; }

    /* ── View mode: read-only profile card (other members) ──────────── */
    .profile-view-header {
      display: flex; flex-direction: column; align-items: center;
      gap: 8px; padding: 4px 0 16px;
      border-bottom: 1px solid var(--border-light);
    }
    .profile-view-avatar {
      width: 96px; height: 96px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-on-accent); font-size: 32px; font-weight: 600;
      overflow: hidden; flex-shrink: 0;
    }
    .profile-view-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .profile-view-name { font-size: 19px; font-weight: 700; color: var(--text-primary); text-align: center; }
    .profile-view-handle { font-size: 13px; color: var(--text-muted); }
    .profile-view-section { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-light); }
    .profile-view-section:last-of-type { border-bottom: none; }
    .profile-view-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
    .profile-view-row { display: flex; flex-direction: column; gap: 2px; }
    .profile-view-row-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .profile-view-row-value { font-size: 14px; color: var(--text-primary); word-break: break-word; }
    .profile-view-shared { display: flex; flex-direction: column; gap: 6px; }
    .profile-view-shared-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
    .profile-view-shared-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .profile-view-empty { font-size: 12px; color: var(--text-muted); padding: 4px 0; }
    .profile-view-actions { padding: 12px 0 4px; display: flex; gap: 8px; }
    .profile-view-action-btn {
      flex: 1; padding: 10px 14px; background: var(--accent); color: var(--text-on-accent); border: none;
      border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
      font-family: var(--font-base); cursor: pointer; transition: background 0.12s, transform 0.08s;
    }
    .profile-view-action-btn:hover { background: #000; }
    .profile-view-action-btn:active { transform: scale(0.98); }
    /* Unread indicator on the "Send message" button in profile view. */
    .profile-view-action-btn.has-unread::after {
      content: '';
      display: inline-block; width: 8px; height: 8px;
      border-radius: 50%; background: var(--danger); margin-left: 8px;
      vertical-align: middle;
    }

    /* ── Today view — AI coach chat surface ────────────────────────── */
    #todayView { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg-cream); }
    #todayView .topbar { flex-shrink: 0; }
    .today-restart-btn, .today-setup-toggle {
      background: transparent;
      border: 1px solid var(--border-default);
      color: var(--text-secondary);
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      margin-left: 8px;
    }
    .today-restart-btn:hover, .today-setup-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
    .today-setup-toggle { font-size: 14px; padding: 4px 10px; }

    /* Two-column layout: chat in the middle, coach-setup panel on the right */
    .today-layout {
      flex: 1; min-height: 0;
      display: grid;
      grid-template-columns: 1fr 320px;
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      gap: 12px;
      padding: 0 20px;
    }
    .today-stage {
      min-height: 0;
      display: flex; flex-direction: column;
      max-width: 720px;
      width: 100%;
      margin: 0 auto;
      padding: 0;
    }
    .today-chat {
      flex: 1; min-height: 0;
      overflow-y: auto;
      padding: 28px 0;
      display: flex; flex-direction: column;
      gap: 18px;
    }
    .today-msg { display: flex; gap: 12px; max-width: 100%; }
    .today-msg.coach { align-self: flex-start; }
    .today-msg.user  { align-self: flex-end; flex-direction: row-reverse; }
    .today-msg-avatar {
      width: 30px; height: 30px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      color: var(--text-on-accent);
      font-weight: 600;
    }
    .today-msg.coach .today-msg-avatar { background: linear-gradient(135deg, #f59e0b 0%, var(--danger) 100%); }
    .today-msg.user  .today-msg-avatar { background: var(--accent); }
    .today-msg-bubble {
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 15px;
      line-height: 1.5;
      max-width: 540px;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .today-msg.coach .today-msg-bubble { background: var(--bg-white); color: var(--text-primary); border: 1px solid var(--border-light); border-bottom-left-radius: 4px; }
    .today-msg.user  .today-msg-bubble { background: var(--accent); color: var(--text-on-accent); border-bottom-right-radius: 4px; }
    .today-msg-bubble.typing {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 14px 16px;
    }
    .today-msg-bubble.typing .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text-muted);
      animation: todayTyping 1.2s infinite;
    }
    .today-msg-bubble.typing .dot:nth-child(2) { animation-delay: 0.15s; }
    .today-msg-bubble.typing .dot:nth-child(3) { animation-delay: 0.3s; }
    @keyframes todayTyping {
      0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
      30%           { opacity: 1;   transform: translateY(-2px); }
    }
    .today-composer {
      flex-shrink: 0;
      display: flex; gap: 10px; align-items: end;
      padding: 12px 0 24px;
      border-top: 1px solid var(--border-light);
    }
    .today-input {
      flex: 1;
      padding: 12px 16px;
      font-size: 15px;
      font-family: var(--font-base);
      border: 1px solid var(--border-default);
      border-radius: 22px;
      background: var(--bg-white);
      outline: none;
      resize: none;
      max-height: 160px;
      line-height: 1.4;
    }
    .today-input:focus { border-color: var(--text-muted); }
    .today-send {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--accent); color: var(--text-on-accent);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.12s, transform 0.08s;
    }
    .today-send:hover { background: #000; }
    .today-send:active { transform: scale(0.95); }
    .today-send:disabled { background: var(--text-lighter); cursor: not-allowed; }
    .today-send svg { stroke: #fff; }
    .today-plan-card {
      align-self: flex-start;
      margin-top: 6px;
      padding: 14px 16px;
      background: #fff8e6;
      border: 1px solid #fde68a;
      border-radius: 14px;
      max-width: 540px;
      font-size: 13px;
      line-height: 1.5;
    }
    .today-plan-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warning-deep); margin-bottom: 8px; }
    .today-plan-card-row { display: flex; gap: 8px; padding: 4px 0; align-items: flex-start; }
    .today-plan-card-row::before { content: '•'; color: var(--warning-deep); font-weight: 700; flex-shrink: 0; }
    .today-plan-card-cat { font-weight: 600; color: var(--text-primary); }
    /* Coach Setup right-side panel */
    .today-setup-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      background: var(--bg-white);
      border: 1px solid var(--border-light);
      border-radius: 12px;
      margin: 12px 0 24px;
      overflow: hidden;
    }
    .today-setup-header {
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-light);
      background: var(--bg-cream);
    }
    .today-setup-title { font-size: 13px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em; }
    .today-setup-close {
      background: none; border: none; color: var(--text-muted);
      font-size: 14px; cursor: pointer; padding: 2px 6px;
      border-radius: 4px;
      display: none;
    }
    .today-setup-close:hover { background: var(--bg-hover); color: var(--text-primary); }
    .today-setup-export {
      background: none; border: none; color: var(--text-muted);
      font-size: 14px; cursor: pointer; padding: 2px 6px;
      border-radius: 4px;
      margin-left: auto;
    }
    .today-setup-export:hover { background: var(--bg-hover); color: var(--accent-active-text, var(--accent-blue)); }
    /* Export preview modal */
    .today-export-overlay {
      position: fixed; inset: 0;
      background: rgba(15,23,42,0.55);
      display: none;
      align-items: center; justify-content: center;
      z-index: 9000;
      padding: 16px;
    }
    .today-export-overlay.open { display: flex; }
    .today-export-modal {
      background: var(--bg-white);
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
      width: 100%; max-width: 640px;
      max-height: 80vh;
      display: flex; flex-direction: column;
    }
    .today-export-head {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-light);
      display: flex; align-items: center; gap: 8px;
    }
    .today-export-title {
      font-size: 14px; font-weight: 700; color: var(--text-primary);
      flex: 1;
    }
    .today-export-body {
      flex: 1; overflow: auto;
      padding: 14px 18px;
      background: var(--bg-cream);
    }
    .today-export-textarea {
      width: 100%;
      min-height: 320px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      line-height: 1.5;
      padding: 12px;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      background: var(--bg-white);
      color: var(--text-primary);
      resize: vertical;
      outline: none;
    }
    .today-export-foot {
      padding: 12px 18px;
      border-top: 1px solid var(--border-light);
      display: flex; gap: 8px; justify-content: flex-end;
    }
    .today-export-btn {
      font-size: 12px;
      padding: 7px 14px;
      border-radius: 8px;
      border: 1px solid var(--border-default);
      background: var(--bg-white);
      color: var(--text-secondary);
      cursor: pointer;
    }
    .today-export-btn.primary {
      background: var(--accent-active-text, var(--accent-blue));
      color: var(--text-on-accent);
      border-color: var(--accent-active-text, var(--accent-blue));
    }
    .today-export-btn:hover { background: var(--bg-hover); }
    .today-export-btn.primary:hover { filter: brightness(1.05); }
    .today-export-status {
      font-size: 11px; color: var(--text-muted);
      margin-right: auto;
      align-self: center;
    }
    /* History modal rows */
    .today-history-row {
      display: flex; gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 12px;
    }
    .today-history-row:last-child { border-bottom: none; }
    .today-history-when {
      flex-shrink: 0;
      width: 78px;
      color: var(--text-muted);
      font-family: ui-monospace, monospace;
      font-size: 11px;
      padding-top: 2px;
    }
    .today-history-body { flex: 1; min-width: 0; }
    .today-history-head {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
      margin-bottom: 2px;
    }
    .today-history-action {
      font-size: 10px; font-weight: 700;
      padding: 1px 6px; border-radius: 8px;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .today-history-action.add { background: #dcfce7; color: #166534; }
    .today-history-action.remove { background: var(--danger-bg); color: var(--danger-deep); }
    .today-history-action.complete { background: var(--info-border); color: #1e40af; }
    .today-history-action.reopen { background: #fef3c7; color: var(--warning-deep); }
    .today-history-action.update { background: #ede9fe; color: #5b21b6; }
    .today-history-type { font-size: 11px; color: var(--text-muted); }
    .today-history-source { font-size: 10px; color: var(--text-muted); margin-left: auto; }
    .today-history-text {
      color: var(--text-primary);
      word-break: break-word;
    }
    .today-history-empty {
      text-align: center;
      padding: 24px;
      color: var(--text-muted);
      font-size: 12px;
    }
    .today-setup-body {
      flex: 1; overflow-y: auto;
      padding: 8px;
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .today-setup-loading {
      padding: 24px 16px; text-align: center;
      font-size: 12px; color: var(--text-muted);
    }
    .today-setup-section {
      padding: 10px 12px;
      border-radius: 8px;
      transition: background 0.1s;
    }
    .today-setup-section:hover { background: var(--bg-cream); }
    .today-setup-section + .today-setup-section { border-top: 1px solid var(--border-light); }
    .today-setup-section-head {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 4px;
    }
    .today-setup-section-status {
      width: 18px; height: 18px;
      border-radius: 50%;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700;
    }
    .today-setup-section-status.done { background: var(--success); color: var(--text-on-accent); }
    .today-setup-section-status.partial { background: #f59e0b; color: var(--text-on-accent); }
    .today-setup-section-status.todo { background: var(--border-default); color: var(--text-muted); }
    .today-setup-section-status.todo::before { content: '○'; }
    .today-setup-section-status.partial::before { content: '◐'; }
    .today-setup-section-status.done::before { content: '✓'; }
    .today-setup-section-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      flex: 1;
    }
    .today-setup-section-value {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      padding-left: 26px;
      word-wrap: break-word;
    }
    .today-setup-section-tags {
      display: flex; flex-wrap: wrap; gap: 4px;
      padding-left: 26px; margin-top: 4px;
    }
    .today-setup-tag {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
      background: var(--bg-light);
      color: var(--text-secondary);
      border: 1px solid var(--border-light);
    }
    .today-setup-section-action {
      margin-left: 26px; margin-top: 6px;
      background: transparent;
      border: 1px solid var(--border-default);
      color: var(--text-secondary);
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.1s, color 0.1s;
    }
    .today-setup-section-action:hover { background: var(--bg-hover); color: var(--text-primary); }
    .today-setup-section.coming-soon { opacity: 0.6; }
    /* Inline editor surfaces (Tier 2) */
    .today-setup-editor {
      padding-left: 26px;
      margin-top: 8px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .today-setup-editor-chip {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 11px;
      padding: 3px 4px 3px 10px;
      border-radius: 12px;
      background: var(--bg-light);
      color: var(--text-secondary);
      border: 1px solid var(--border-light);
      max-width: 100%;
    }
    .today-setup-editor-chip.complete {
      text-decoration: line-through;
      opacity: 0.55;
    }
    .today-setup-editor-chip-text {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      max-width: 180px;
    }
    .today-setup-editor-chip-btn {
      background: none; border: none; cursor: pointer;
      width: 18px; height: 18px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      font-size: 12px; line-height: 1;
      color: var(--text-muted);
      padding: 0;
    }
    .today-setup-editor-chip-btn:hover {
      background: rgba(0,0,0,0.05);
      color: var(--text-primary);
    }
    .today-setup-editor-chips {
      display: flex; flex-wrap: wrap; gap: 4px;
    }
    .today-setup-editor-add {
      display: flex; gap: 6px; align-items: center;
    }
    .today-setup-editor-input {
      flex: 1 1 0%;
      min-width: 0;
      font-size: 12px;
      padding: 5px 8px;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      background: var(--bg-white);
      color: var(--text-primary);
      outline: none;
    }
    .today-setup-editor-input:focus {
      border-color: var(--accent-active-text, var(--accent-blue));
    }
    .today-setup-editor-btn {
      font-size: 11px;
      padding: 5px 10px;
      border-radius: 8px;
      border: 1px solid var(--border-default);
      background: var(--bg-white);
      color: var(--text-secondary);
      cursor: pointer;
    }
    .today-setup-editor-btn.primary {
      background: var(--accent-active-text, var(--accent-blue));
      border-color: var(--accent-active-text, var(--accent-blue));
      color: var(--text-on-accent);
    }
    .today-setup-editor-btn:hover { background: var(--bg-hover); }
    .today-setup-editor-btn.primary:hover { filter: brightness(1.05); }
    .today-setup-editor-styles {
      display: flex; flex-wrap: wrap; gap: 4px;
    }
    .today-setup-editor-style {
      font-size: 11px;
      padding: 4px 10px;
      border-radius: 12px;
      border: 1px solid var(--border-default);
      background: var(--bg-white);
      color: var(--text-secondary);
      cursor: pointer;
    }
    .today-setup-editor-style.active {
      background: var(--accent-active-bg, var(--info-bg));
      border-color: var(--accent-active-text, var(--accent-blue));
      color: var(--accent-active-text, var(--accent-blue));
      font-weight: 600;
    }
    /* Board-priority editor — list of boards, each with a 4-chip priority picker */
    .today-board-priority-list {
      display: flex; flex-direction: column; gap: 8px;
    }
    .today-board-priority-row {
      display: flex; align-items: center; gap: 8px;
      padding: 4px 0;
    }
    .today-board-priority-name {
      flex: 0 0 auto;
      max-width: 130px;
      font-size: 12px; font-weight: 500;
      color: var(--text-primary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .today-board-priority-chips {
      display: flex; gap: 3px; flex-wrap: wrap;
      flex: 1;
    }
    .today-board-priority-chip {
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 10px;
      border: 1px solid var(--border-default);
      background: var(--bg-white);
      color: var(--text-secondary);
      cursor: pointer;
      transition: background 0.1s, color 0.1s;
    }
    .today-board-priority-chip:hover {
      background: var(--bg-hover);
    }
    .today-board-priority-chip.active {
      color: var(--text-on-accent);
      border-color: transparent;
      font-weight: 600;
    }
    .today-board-priority-note {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.4;
      margin-top: 8px;
      font-style: italic;
    }
    .today-setup-editor-actions {
      display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px;
    }
    .today-setup-editor-link {
      background: none; border: none;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      align-self: flex-start;
    }
    .today-setup-editor-link:hover { color: var(--accent-active-text, var(--accent-blue)); }
    .today-setup-editor-empty {
      font-size: 11px;
      color: var(--text-muted);
      font-style: italic;
    }
    .today-setup-coming-tag {
      font-size: 10px; font-weight: 700;
      color: var(--text-muted);
      background: var(--bg-light);
      padding: 1px 6px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    @media (max-width: 1024px) {
      .today-layout { grid-template-columns: 1fr; padding: 0 12px; gap: 0; }
      .today-setup-panel {
        display: none;
        position: fixed;
        inset: 0;
        margin: 0;
        border-radius: 0;
        z-index: 600;
      }
      .today-setup-panel.open { display: flex; }
      .today-setup-close { display: inline-block; }
    }
    @media (max-width: 768px) {
      .today-stage { padding: 0 12px; max-width: 100%; }
      .today-msg-bubble { font-size: 14px; max-width: calc(100vw - 80px); }
      .today-input { font-size: 14px; }
    }

    /* Floating compose FAB (Messenger-style pencil icon, bottom-right).
       Shown only when a board is open. Tap → popup expands upward
       with that board's members. */
    .dm-fab {
      position: fixed;
      right: 24px; bottom: 24px;
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--text-on-accent);
      border: none;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 20px rgba(0,0,0,0.25);
      z-index: 580;  /* above DM window's minimized header (z-index 600 is the DM window itself) */
      transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.12s;
    }
    .dm-fab.visible { display: flex; }
    .dm-fab:hover { background: #000; box-shadow: 0 10px 26px rgba(0,0,0,0.32); transform: translateY(-1px); }
    .dm-fab:active { transform: scale(0.95); }
    .dm-fab svg { display: block; }
    /* Hide the FAB while a DM window is open and expanded — no need to
       compete with the active conversation. JS toggles .hidden-by-dm
       when the DM window opens/closes. */
    .dm-fab.hidden-by-dm { display: none !important; }
    /* FAB "+" rotates to an "×" when the speed-dial is open. */
    .dm-fab.menu-open #dmFabIcon { transform: rotate(45deg); transition: transform 0.18s ease; }
    #dmFabIcon { transition: transform 0.18s ease; }

    /* Quick-create speed-dial menu (sits above the FAB) */
    .dm-fab-menu {
      position: fixed;
      right: 24px; bottom: 92px;  /* just above the 56px FAB + gap */
      z-index: 580;
      display: none;
      flex-direction: column; align-items: flex-end; gap: 8px;
    }
    .dm-fab-menu.open { display: flex; }
    .dm-fab-menu-item {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg-white); color: var(--text-primary);
      border: 1px solid var(--border-default); border-radius: 24px;
      padding: 9px 16px; font-size: 13px; font-weight: 600;
      font-family: var(--font-base); cursor: pointer; white-space: nowrap;
      box-shadow: 0 4px 14px rgba(0,0,0,0.14);
      transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
      animation: dmFabItemIn 0.16s ease-out both;
    }
    .dm-fab-menu-item:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.22); background: var(--bg-light); }
    .dm-fab-menu-item:active { transform: scale(0.97); }
    .dm-fab-menu-ic { display: inline-flex; color: var(--text-secondary); }
    @keyframes dmFabItemIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

    .dm-fab-popup {
      position: fixed;
      right: 24px; bottom: 92px;  /* sit just above the 56px FAB + 12px gap */
      width: 280px;
      max-height: 50vh;
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.18);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 580;
      transform: translateY(6px); opacity: 0;
      transition: transform 0.16s ease-out, opacity 0.16s ease-out;
    }
    .dm-fab-popup.open { display: flex; transform: translateY(0); opacity: 1; }
    .dm-fab-popup-header {
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-light);
    }
    .dm-fab-popup-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
    .dm-fab-popup-close {
      background: none; border: none; color: var(--text-muted);
      font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 4px;
    }
    .dm-fab-popup-close:hover { background: var(--bg-hover); color: var(--text-primary); }
    .dm-fab-popup-search-wrap {
      flex-shrink: 0;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border-light);
    }
    .dm-fab-popup-search {
      width: 100%;
      padding: 6px 10px;
      font-size: 12px;
      border: 1px solid var(--border-default);
      border-radius: 14px;
      background: var(--bg-light);
      outline: none;
      box-sizing: border-box;
      font-family: var(--font-base);
    }
    .dm-fab-popup-search:focus { background: var(--bg-white); border-color: var(--text-muted); }
    .dm-fab-popup-body { flex: 1; overflow-y: auto; }
    .dm-fab-popup-row {
      display: flex; align-items: center; gap: 9px;
      padding: 7px 12px;
      cursor: pointer;
      border-bottom: 1px solid var(--border-light);
      transition: background 0.1s;
    }
    .dm-fab-popup-row:last-child { border-bottom: none; }
    .dm-fab-popup-row:hover { background: var(--bg-hover); }
    .dm-fab-popup-row-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-on-accent); font-size: 11px; font-weight: 600;
      flex-shrink: 0; overflow: hidden;
    }
    .dm-fab-popup-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .dm-fab-popup-row-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-fab-popup-empty {
      padding: 24px 14px; text-align: center;
      font-size: 12px; color: var(--text-muted);
    }

    @media (max-width: 768px) {
      .dm-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }
      .dm-fab-popup {
        right: 16px; left: 16px; bottom: 76px;
        width: auto; max-height: 60vh;
      }
    }

    /* Sidebar nav badge (e.g. unread DM count) */
    .nav-link {
      display: flex !important; align-items: center; justify-content: space-between;
      gap: 8px;
    }
    .nav-badge {
      background: var(--danger);
      color: var(--text-on-accent);
      font-size: 11px; font-weight: 700;
      min-width: 18px; height: 18px;
      border-radius: 9px;
      padding: 0 6px;
      display: inline-flex; align-items: center; justify-content: center;
      line-height: 1;
    }

    /* DM Inbox dropdown — list of recent conversations */
    .dm-inbox {
      position: fixed;
      left: 232px;            /* sidebar width (220) + 12px gap */
      top: 80px;              /* below the logo */
      width: 320px;
      max-height: 60vh;
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.18);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 550;
    }
    .dm-inbox.open { display: flex; }
    .dm-inbox-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border-light);
      flex-shrink: 0;
      gap: 8px;
    }
    .dm-inbox-title { font-size: 14px; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; }
    .dm-inbox-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
    .dm-inbox-back, .dm-inbox-compose, .dm-inbox-close {
      background: none; border: none; color: var(--text-muted);
      cursor: pointer; padding: 4px 8px; border-radius: 4px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px;
    }
    .dm-inbox-back:hover, .dm-inbox-compose:hover, .dm-inbox-close:hover {
      background: var(--bg-hover); color: var(--text-primary);
    }
    .dm-inbox-back svg, .dm-inbox-compose svg { display: block; }

    /* Compose mode (new message) */
    .dm-inbox-compose-mode {
      display: none;
      flex-direction: column;
      flex: 1; min-height: 0;
    }
    .dm-inbox.compose-open .dm-inbox-body { display: none; }
    .dm-inbox.compose-open .dm-inbox-compose-mode { display: flex; }
    .dm-inbox-search-wrap {
      flex-shrink: 0;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border-light);
    }
    .dm-inbox-search {
      width: 100%;
      padding: 7px 12px;
      font-size: 13px;
      border: 1px solid var(--border-default);
      border-radius: 16px;
      background: var(--bg-light, var(--gray-50));
      outline: none;
      font-family: var(--font-base);
      box-sizing: border-box;
    }
    .dm-inbox-search:focus { background: var(--bg-white); border-color: var(--text-muted); }
    .dm-inbox-people { flex: 1; overflow-y: auto; }
    .dm-inbox-person-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border-light);
      transition: background 0.1s;
    }
    .dm-inbox-person-row:hover { background: var(--bg-hover); }
    .dm-inbox-person-row:last-child { border-bottom: none; }
    .dm-inbox-person-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-on-accent); font-size: 12px; font-weight: 600;
      flex-shrink: 0; overflow: hidden;
    }
    .dm-inbox-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .dm-inbox-person-info { flex: 1; min-width: 0; }
    .dm-inbox-person-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-inbox-person-email { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
    .dm-inbox-people-empty {
      padding: 32px 16px; text-align: center;
      font-size: 12px; color: var(--text-muted);
    }
    .dm-inbox-body {
      flex: 1; overflow-y: auto;
      display: flex; flex-direction: column;
    }
    .dm-inbox-empty {
      padding: 32px 16px; text-align: center;
      font-size: 13px; color: var(--text-muted);
    }
    .dm-inbox-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border-light);
      transition: background 0.12s;
      position: relative;
    }
    .dm-inbox-row:last-child { border-bottom: none; }
    .dm-inbox-row:hover { background: var(--bg-hover); }
    .dm-inbox-row.unread .dm-inbox-name { font-weight: 700; color: var(--text-primary); }
    .dm-inbox-row.unread::after {
      content: ''; position: absolute; right: 12px; top: 50%;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--danger);
      transform: translateY(-50%);
    }
    .dm-inbox-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-on-accent); font-size: 13px; font-weight: 600;
      flex-shrink: 0; overflow: hidden;
    }
    .dm-inbox-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .dm-inbox-info { flex: 1; min-width: 0; padding-right: 16px; }
    .dm-inbox-name { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-inbox-preview { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
    .dm-inbox-time { font-size: 10px; color: var(--text-lighter); flex-shrink: 0; align-self: flex-start; padding-top: 2px; }

    @media (max-width: 768px) {
      .dm-inbox {
        left: 0; right: 0; top: 0; bottom: 0;
        width: 100vw; max-height: none;
        border: none; border-radius: 0;
        height: 100dvh;
      }
    }

    /* ── Direct-message window (bottom-right popup on desktop, fullscreen on mobile) ── */
    .dm-window {
      position: fixed;
      right: 24px; bottom: 0;
      width: 320px; height: 460px;
      background: var(--bg-white, var(--bg-white));
      border: 1px solid var(--border-default, var(--gray-200));
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      box-shadow: 0 6px 28px rgba(0,0,0,0.18);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 600;
      transform: translateY(20px);
      opacity: 0;
      transition: transform 0.18s ease-out, opacity 0.18s ease-out, height 0.18s ease;
    }
    .dm-window.open { display: flex; transform: translateY(0); opacity: 1; }
    .dm-window.minimized { height: 44px !important; }
    .dm-window.minimized .dm-body,
    .dm-window.minimized .dm-composer { display: none; }
    .dm-header {
      flex-shrink: 0;
      display: flex; align-items: center;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border-light, var(--gray-200));
      background: var(--bg-light, var(--gray-50));
      cursor: pointer;  /* whole header is clickable to minimize/restore */
      user-select: none;
    }
    .dm-back { display: none; }  /* shown on mobile only */
    .dm-header-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .dm-header-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-on-accent); font-size: 11px; font-weight: 600; flex-shrink: 0;
      overflow: hidden;
    }
    .dm-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .dm-header-name {
      font-size: 13px; font-weight: 600; color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .dm-header-btn {
      background: none; border: none; color: var(--text-muted);
      font-size: 14px; cursor: pointer; padding: 4px 8px;
      border-radius: 4px; flex-shrink: 0;
    }
    .dm-header-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
    .dm-body {
      flex: 1; overflow-y: auto;
      padding: 10px 12px;
      display: flex; flex-direction: column; gap: 4px;
      background: var(--bg-white);
    }
    .dm-bubble {
      max-width: 78%;
      padding: 7px 11px;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.4;
      word-wrap: break-word;
      overflow-wrap: anywhere;
    }
    .dm-bubble.mine { align-self: flex-end; background: var(--accent-blue); color: var(--text-on-accent); border-bottom-right-radius: 4px; }
    .dm-bubble.theirs { align-self: flex-start; background: var(--bg-light, var(--gray-100)); color: var(--text-primary); border-bottom-left-radius: 4px; }
    .dm-bubble + .dm-bubble.same-sender { margin-top: -2px; }

    /* Each bubble lives inside a wrapper so we can position hover
       actions next to it without breaking the bubble's flex alignment. */
    .dm-bubble-wrap {
      display: flex; align-items: center; gap: 6px;
      max-width: 100%;
      position: relative;
    }
    .dm-bubble-wrap.mine   { justify-content: flex-end;  align-self: flex-end; }
    .dm-bubble-wrap.theirs { justify-content: flex-start; align-self: flex-start; }
    .dm-bubble-actions {
      display: flex; gap: 2px;
      opacity: 0;
      transition: opacity 0.12s;
    }
    .dm-bubble-wrap:hover .dm-bubble-actions { opacity: 1; }
    .dm-bubble-action {
      width: 24px; height: 24px;
      border: none; background: transparent; border-radius: 50%;
      color: var(--text-muted);
      cursor: pointer; padding: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.1s, color 0.1s;
    }
    .dm-bubble-action:hover { background: var(--bg-hover); color: var(--text-primary); }
    .dm-bubble-action svg { display: block; }

    /* Inline reply quote — small inset above the bubble's body text */
    .dm-reply-quote {
      align-self: flex-end;
      max-width: 78%;
      margin-bottom: -2px;
      padding: 6px 10px 12px;
      border-left: 3px solid var(--border-default, #d1d5db);
      background: var(--bg-light, var(--gray-100));
      color: var(--text-muted);
      font-size: 11px;
      line-height: 1.3;
      border-radius: 10px 10px 4px 4px;
      cursor: pointer;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      transition: background 0.1s;
    }
    .dm-reply-quote:hover { background: var(--border-light); }
    .dm-reply-quote.theirs { align-self: flex-start; }
    .dm-reply-quote strong { color: var(--text-secondary); font-weight: 600; }

    /* Reactions row below the bubble */
    .dm-reactions {
      display: flex; flex-wrap: wrap; gap: 3px;
      margin-top: 2px;
    }
    .dm-reactions.mine   { align-self: flex-end; }
    .dm-reactions.theirs { align-self: flex-start; }
    .dm-reaction-chip {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 1px 7px;
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: 10px;
      font-size: 11px;
      cursor: pointer;
      transition: background 0.1s, border-color 0.1s;
      line-height: 1.4;
    }
    .dm-reaction-chip:hover { background: var(--bg-hover); }
    .dm-reaction-chip.mine { background: var(--accent-active-bg, var(--info-bg)); border-color: var(--accent-active-text, var(--accent-blue)); }
    .dm-reaction-chip-count { font-size: 10px; color: var(--text-secondary); font-weight: 500; }

    /* Reaction picker popup */
    .dm-react-picker {
      position: fixed;
      display: none;
      gap: 2px;
      padding: 6px;
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      z-index: 700;
    }
    .dm-react-picker.open { display: flex; }
    .dm-react-picker-emoji {
      width: 28px; height: 28px;
      border: none; background: none;
      border-radius: 50%;
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      padding: 0;
      transition: background 0.1s, transform 0.1s;
    }
    .dm-react-picker-emoji:hover { background: var(--bg-hover); transform: scale(1.15); }

    /* Reply preview bar above the composer */
    .dm-reply-preview {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px;
      background: var(--bg-light);
      border-top: 1px solid var(--border-light);
      font-size: 11px;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .dm-reply-preview-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .dm-reply-preview-text strong { color: var(--text-secondary); }
    .dm-reply-cancel {
      background: none; border: none; color: var(--text-muted);
      font-size: 13px; cursor: pointer; padding: 0 4px; line-height: 1;
      flex-shrink: 0;
    }
    .dm-reply-cancel:hover { color: var(--text-primary); }

    /* Brief landing flash when scrolling to a reply target */
    @keyframes dmJumpFlash {
      0%   { background-color: rgba(99, 102, 241, 0.20); }
      100% { background-color: transparent; }
    }
    .dm-bubble.dm-jump-flash { animation: dmJumpFlash 1.6s ease-out; }
    .dm-day-divider {
      align-self: center;
      font-size: 10px; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.06em;
      padding: 8px 4px 4px;
    }
    .dm-empty {
      margin: auto; text-align: center; padding: 16px;
      font-size: 12px; color: var(--text-muted);
    }
    .dm-composer {
      flex-shrink: 0;
      display: flex; align-items: end; gap: 6px;
      padding: 8px;
      border-top: 1px solid var(--border-light, var(--gray-200));
      background: var(--bg-white);
    }
    .dm-input {
      flex: 1 1 0%; min-width: 0;
      max-height: 100px; min-height: 32px;
      padding: 7px 12px;
      font-size: 13px; line-height: 1.4;
      border: 1px solid var(--border-default, var(--gray-200));
      border-radius: 16px;
      background: var(--bg-light, var(--gray-50));
      outline: none;
      overflow-y: auto;
      overflow-wrap: anywhere;
    }
    .dm-input:focus { background: var(--bg-white); border-color: var(--text-muted); }
    .dm-input:empty::before {
      content: attr(data-placeholder);
      color: var(--text-lighter, var(--text-muted-cool));
      pointer-events: none;
    }
    .dm-send {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--accent); color: var(--text-on-accent);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.12s, transform 0.08s;
    }
    .dm-send:hover { background: #000; }
    .dm-send:active { transform: scale(0.92); }
    .dm-send svg { stroke: #fff; }
    .dm-send:disabled { background: var(--text-lighter); cursor: not-allowed; }

    @media (max-width: 768px) {
      /* Fullscreen takeover on mobile — same shell as the project modal. */
      .dm-window {
        right: 0; bottom: 0; left: 0; top: 0;
        width: 100vw; height: 100dvh;
        border: none; border-radius: 0;
      }
      .dm-window.minimized {
        height: 44px !important; top: auto;
        right: 8px; left: auto;
        width: 240px;
        border-radius: 12px 12px 0 0;
        border: 1px solid var(--border-default);
        border-bottom: none;
      }
      .dm-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: none; padding: 0; color: rgba(0,0,0,0.5); cursor: pointer; flex-shrink: 0; }
      .dm-back svg { display: block; }
      .dm-header { padding: 10px 8px; }
      .dm-header-avatar { width: 32px; height: 32px; font-size: 12px; }
      .dm-header-name { font-size: 15px; }
      .dm-minimize-hide-on-mobile { display: none; }
      /* The minimize button is mostly a desktop affordance — hide on mobile */
      #dmMinimizeBtn { display: none; }
    }
    /* Visually mark "tappable" on member chips and message authors —
       a hint that you can click to open the profile drawer. */
    .member-chip { cursor: pointer; }
    .panel-member-row { cursor: pointer; }
    .message-author { cursor: pointer; }
    .message-author:hover { text-decoration: underline; }
    .profile-avatar-section { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .profile-avatar-lg { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; color: var(--text-on-accent); flex-shrink: 0; }
    .profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
    .profile-avatar-wrap { position: relative; display: inline-block; cursor: pointer; }
    .profile-avatar-edit-btn {
      position: absolute; bottom: 2px; right: 2px;
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--accent); color: var(--text-on-accent); border: 2px solid #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; cursor: pointer; transition: opacity 0.15s;
      pointer-events: none;
    }
    .profile-avatar-wrap:hover .profile-avatar-edit-btn { opacity: 0.85; }
    .profile-field { display: flex; flex-direction: column; gap: 4px; }
    .profile-field-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .profile-field-input { padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 14px; color: var(--text-primary); font-family: var(--font-base); background: var(--bg-white); outline: none; transition: border-color 0.15s; }
    .profile-field-input:focus { border-color: var(--accent); }
    .profile-field-static { padding: 8px 12px; background: var(--bg-subtle); border-radius: var(--radius-md); font-size: 14px; color: var(--text-secondary); }
    .profile-field-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .profile-username-row { display: flex; align-items: stretch; gap: 6px; }
    .profile-username-prefix {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      background: var(--bg-subtle);
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
    }
    .profile-username-input { flex: 1; }
    .profile-tz-row { display: flex; align-items: stretch; gap: 6px; }
    .profile-tz-select {
      flex: 1;
      font-family: var(--font-base);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      /* Custom chevron with breathing room on the right. */
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 12px 12px;
      padding-right: 34px;
    }
    .profile-tz-detect {
      padding: 0 12px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      background: var(--bg-white);
      color: var(--text-secondary);
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s;
    }
    .profile-tz-detect:hover { background: var(--bg-hover); color: var(--text-primary); }
    .profile-boards-list { display: flex; flex-direction: column; gap: 6px; }
    .profile-board-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-subtle); }
    .profile-board-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .profile-board-name { font-size: 13px; font-weight: 500; color: var(--text-primary); flex: 1; }
    .profile-board-role { font-size: 11px; color: var(--text-muted); }
    .profile-save-btn { padding: 9px 20px; background: var(--accent); color: var(--text-on-accent); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.15s; align-self: flex-start; }
    .profile-save-btn:hover { opacity: 0.88; }
    .profile-save-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .profile-save-btn.just-saved {
      background: var(--success);
      opacity: 1 !important;
    }
    .profile-save-btn.just-saved:disabled { cursor: default; }
    .profile-action-row { display: flex; align-items: stretch; gap: 10px; }
    .profile-action-row .profile-save-btn,
    .profile-action-row .profile-cancel-btn { flex: 1 1 50%; align-self: stretch; }
    .profile-cancel-btn {
      padding: 9px 20px;
      background: var(--bg-white);
      color: var(--text-strong);
      border: 1px solid var(--accent);
      border-radius: var(--radius-md);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s, color 0.15s;
      font-family: var(--font-base);
    }
    .profile-cancel-btn:hover { background: var(--bg-app); }
    .profile-saved-msg { font-size: 12px; color: var(--accent); display: none; }

    /* Sidebar user / logout */
    .sidebar-user {
      margin-top: auto; padding: 16px 20px;
      border-top: 1px solid var(--border-sidebar);
      display: flex; flex-direction: column; gap: 6px;
    }
    .sidebar-user-name { color: var(--text-sidebar); font-size: 13px; }
    /* Board member avatar stack retired (boards are personal now —
       members live on projects; the Members button covers the rest).
       Element stays in the DOM so its renderer stays harmless. */
    #boardMemberStack { display: none !important; }

    /* ── Global search (topbar, upper right) ── */
    .topbar-search {
      position: relative; display: flex; align-items: center; gap: 6px;
      background: var(--bg-subtle); border: 1px solid var(--border-default);
      border-radius: var(--radius-pill); padding: 4px 10px;
      color: var(--text-muted);
    }
    .topbar-search input {
      border: none; background: none; outline: none;
      font-size: 12.5px; color: var(--text-primary); width: 110px;
      transition: width 0.18s ease; font-family: var(--font-base);
    }
    .topbar-search input:focus { width: 220px; }
    .topbar-search input::placeholder { color: var(--text-placeholder); }
    .search-results {
      position: absolute; top: calc(100% + 6px); right: 0; z-index: 3000;
      width: 340px; max-height: 60vh; overflow-y: auto;
      background: var(--bg-white); border: 1px solid var(--border-default);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-popup);
      padding: 6px;
    }
    .search-group-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--text-muted); padding: 8px 8px 4px;
    }
    .search-hit {
      display: block; width: 100%; text-align: left; background: none; border: none;
      padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer;
      font-family: var(--font-base);
    }
    .search-hit:hover { background: var(--bg-hover); }
    .search-hit-title { font-size: 13px; color: var(--text-primary); font-weight: 500; }
    .search-hit-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .search-empty { font-size: 12px; color: var(--text-muted); padding: 12px; text-align: center; }
    @media (max-width: 768px) { .topbar-search { display: none; } }

    .theme-select {
      margin: 6px 0 2px; width: 100%;
      background: rgba(255,255,255,0.06); color: var(--text-sidebar, #aaa);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
      font-size: 11px; padding: 4px 6px; cursor: pointer;
      -webkit-appearance: none; appearance: none;
    }
    .theme-select:hover { color: var(--text-sidebar-active, #fff); }
    body.sidebar-mini .theme-select { display: none; }
    .logout-btn {
      background: none; border: none; color: var(--text-sidebar);
      font-size: 12px; cursor: pointer; text-align: left;
      padding: 0; font-family: var(--font-base);
    }
    .logout-btn:hover { color: var(--text-sidebar-active); }

    /* ── Image annotator overlay (Konva-backed, custom UI) ─────── */
    .ann-overlay {
      position: fixed; inset: 0;
      z-index: 10150; /* above the pdf viewer and the factory portal */
      display: flex;
      flex-direction: column;
      background: rgba(15,15,15,0.96);
      font-family: var(--font-base);
      color: var(--text-on-accent);
      animation: ann-fade-in 150ms ease-out;
      /* Kill iOS Safari's tap-and-hold word selection, the magnifier
         loupe, the gray tap highlight, and any in-flight text
         selection while drawing with a finger or pen. */
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: transparent;
    }
    /* The inline text editor is the one place selection IS allowed. */
    .ann-overlay .ann-text-editor {
      user-select: text !important;
      -webkit-user-select: text !important;
      -webkit-touch-callout: default;
    }
    @keyframes ann-fade-in { from { opacity: 0; } to { opacity: 1; } }
    .ann-header {
      flex-shrink: 0;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.4);
    }
    .ann-title {
      flex: 1;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 12px;
    }
    .ann-header-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,0.10);
      color: var(--text-on-accent);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.15s, transform 0.1s;
      padding: 0;
      flex-shrink: 0;
    }
    .ann-header-btn:hover { background: rgba(255,255,255,0.20); }
    .ann-header-btn:active { transform: scale(0.94); }
    .ann-header-btn:disabled { opacity: 0.5; cursor: default; }
    .ann-save-btn { background: var(--accent, var(--accent-blue-soft)); }
    .ann-save-btn:hover { background: var(--accent, var(--accent-blue-soft)); filter: brightness(1.1); }
    .ann-stage-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      min-height: 0;
      padding: 12px;
    }
    .ann-stage {
      max-width: 100%;
      max-height: 100%;
      background: var(--bg-white);
      border-radius: 6px;
      box-shadow: 0 12px 36px rgba(0,0,0,0.55);
      overflow: hidden;
      cursor: crosshair;
    }
    .ann-stage canvas { display: block; }
    .ann-toolbar {
      flex-shrink: 0;
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 14px;
      background: rgba(0,0,0,0.45);
      border-top: 1px solid rgba(255,255,255,0.08);
      gap: 14px;
      flex-wrap: wrap;
    }
    .ann-tool-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ann-tool-divider {
      width: 1px;
      height: 22px;
      background: rgba(255,255,255,0.12);
    }
    .ann-tool-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: rgba(255,255,255,0.06);
      border: 1px solid transparent;
      color: rgba(255,255,255,0.85);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background-color 0.12s, border-color 0.12s;
    }
    .ann-tool-btn:hover { background: rgba(255,255,255,0.12); }
    .ann-tool-btn.is-active {
      background: rgba(59,130,246,0.25);
      border-color: rgba(59,130,246,0.7);
      color: var(--text-on-accent);
    }
    .ann-color-swatch {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
      transition: transform 0.1s, border-color 0.12s;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
    }
    .ann-color-swatch:hover { transform: scale(1.12); }
    .ann-color-swatch.is-active {
      border-color: #fff;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.25);
    }
    /* WhatsApp-style continuous color picker */
    .ann-color-picker { gap: 6px; }
    .ann-color-fixed {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      padding: 0;
      transition: transform 0.1s, border-color 0.12s;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    }
    .ann-color-fixed:hover { transform: scale(1.12); }
    .ann-color-fixed.is-active {
      border-color: #fff;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.25);
    }
    .ann-hue-wrap {
      position: relative;
      display: flex;
      align-items: center;
      height: 22px;
    }
    .ann-hue-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 180px;
      height: 14px;
      border-radius: 7px;
      cursor: pointer;
      background: linear-gradient(to right,
        hsl(0, 85%, 50%),
        hsl(36, 85%, 50%),
        hsl(72, 85%, 50%),
        hsl(108, 85%, 50%),
        hsl(144, 85%, 50%),
        hsl(180, 85%, 50%),
        hsl(216, 85%, 50%),
        hsl(252, 85%, 50%),
        hsl(288, 85%, 50%),
        hsl(324, 85%, 50%),
        hsl(359, 85%, 50%));
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
    }
    .ann-hue-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--thumb-color, var(--danger));
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.25);
      cursor: grab;
    }
    .ann-hue-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--thumb-color, var(--danger));
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.25);
      cursor: grab;
    }
    .ann-thickness {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ann-thickness input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 120px;
      height: 4px;
      background: rgba(255,255,255,0.20);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .ann-thickness input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--bg-white);
      cursor: grab;
      border: 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    }
    .ann-thickness input[type="range"]::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--bg-white);
      cursor: grab;
      border: 0;
      box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    }
    .ann-thickness-preview {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ann-thickness-preview-dot {
      border-radius: 50%;
      background: var(--bg-white);
      transition: width 0.1s, height 0.1s, background 0.12s;
    }
    .ann-toolbar-hint {
      font-size: 13px;
      color: rgba(255,255,255,0.45);
    }
    .ann-text-editor {
      z-index: 10152;
      background: transparent;
      border: 1px dashed rgba(255,255,255,0.6);
      border-radius: 3px;
      padding: 2px 4px;
      margin: 0;
      outline: none;
      resize: none;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 4px 18px rgba(0,0,0,0.35);
      caret-color: currentColor;
    }

    /* Friendly tip bubble above the sidebar user block */
    .sidebar-tip {
      margin: 8px 16px 0;
      padding: 10px 28px 10px 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.10);
      border-radius: 10px;
      position: relative;
      color: var(--text-sidebar);
      font-size: 12px;
      line-height: 1.4;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      transition: opacity 280ms ease;
      opacity: 1;
    }
    .sidebar-tip.fading { opacity: 0; }
    .sidebar-tip-icon { flex-shrink: 0; font-size: 13px; line-height: 1.3; }
    .sidebar-tip-text { flex: 1; min-width: 0; }
    .sidebar-tip-close {
      position: absolute;
      top: 4px; right: 6px;
      background: transparent;
      border: none;
      color: var(--text-sidebar);
      opacity: 0.5;
      font-size: 16px;
      line-height: 1;
      padding: 2px 6px;
      cursor: pointer;
      font-family: var(--font-base);
      border-radius: 4px;
      transition: opacity 0.12s, background 0.12s;
    }
    .sidebar-tip-close:hover { opacity: 1; background: rgba(255,255,255,0.06); }

    /* Create / Edit Board Modal */
    .cb-overlay { position: fixed; inset: 0; z-index: 200; background: var(--overlay); display: none; align-items: center; justify-content: center; }
    .cb-overlay.open { display: flex; }
    .cb-popup { background: var(--bg-white); border-radius: var(--radius-xl); width: 320px; box-shadow: var(--shadow-modal); overflow: hidden; }
    .cb-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-light); }
    .cb-title { flex: 1; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .cb-close { background: none; border: none; font-size: 18px; color: var(--text-light); cursor: pointer; line-height: 1; padding: 0; }
    .cb-close:hover { color: var(--text-primary); }
    .cb-body { padding: 16px; }
    .cb-preview { height: 80px; border-radius: var(--radius-md); margin-bottom: 14px; transition: background 0.2s; background-size: cover; background-position: center; overflow: hidden; position: relative; }
    .cb-photo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .cb-photo-btn { font-size: 12px; font-weight: 500; color: var(--text-muted); background: var(--bg-hover); border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: 5px 10px; cursor: pointer; font-family: var(--font-base); transition: background 0.12s, color 0.12s; white-space: nowrap; }
    .cb-photo-btn:hover { background: var(--bg-app); color: var(--text-primary); }
    .cb-photo-filename { font-size: 11px; color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cb-photo-clear { background: none; border: none; font-size: 14px; color: var(--text-lighter); cursor: pointer; padding: 0 2px; line-height: 1; font-family: var(--font-base); flex-shrink: 0; }
    .cb-photo-clear:hover { color: var(--accent-danger); }
    .cb-section-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
    .cb-colors { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
    .cb-field-label { font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 6px; }
    .cb-required { color: var(--accent-danger); }
    .cb-error { color: var(--accent-danger); font-size: 12px; min-height: 16px; margin-bottom: 10px; display: none; }
    .cb-hint { font-size: 11px; color: var(--text-light); margin-bottom: 14px; line-height: 1.5; }
    .cb-submit { width: 100%; padding: 9px; background: var(--accent); color: var(--bg-white); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-base); }
    .cb-submit:hover { background: var(--accent-hover); }

    /* Confirmation Modal */
    .conf-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 400; display: flex; align-items: center; justify-content: center; }
    .conf-card { background: var(--bg-white); border-radius: var(--radius-xl); width: 320px; box-shadow: var(--shadow-modal); overflow: hidden; }
    .conf-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; }
    .conf-title { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: var(--text-primary); }
    .conf-close { background: none; border: none; font-size: 18px; color: var(--text-light); cursor: pointer; line-height: 1; padding: 0; margin-left: 8px; }
    .conf-close:hover { color: var(--text-primary); }
    .conf-body-wrap { padding: 0 18px 18px; }
    .conf-body { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }
    .conf-btn { width: 100%; padding: 11px; background: var(--accent-danger); color: var(--bg-white); border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-base); }
    .conf-btn:hover { opacity: 0.9; }

    /* ── Pre-auth landing screen ────────────────────────────────────────── */
    #preAuthScreen {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--bg-sidebar);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    #preAuthScreen.hidden { display: none; }

    /* Auth splash — shown until Clerk confirms the session, so a
       signed-in returning user never sees the sign-in landing flash. */
    #authSplash {
      position: fixed; inset: 0; z-index: 100000;
      background: var(--bg-sidebar);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 22px;
      transition: opacity 0.35s ease-out;
    }
    #authSplash.fade-out { opacity: 0; pointer-events: none; }
    .auth-splash-logo { width: 100%; max-width: 150px; height: auto; opacity: 0.96; }
    .auth-splash-spinner {
      width: 26px; height: 26px; border-radius: 50%;
      border: 2.5px solid rgba(255,255,255,0.18);
      border-top-color: rgba(255,255,255,0.75);
      animation: spin 0.8s linear infinite;
    }

    /* ── Demo mode banner ───────────────────────────────────────────────── */
    #demoBanner {
      flex-shrink: 0;
      background: var(--accent); color: var(--text-on-accent);
      font-size: 13px; font-weight: 500;
      display: flex; align-items: center; justify-content: center;
      gap: 10px; padding: 8px 16px;
    }
    #demoBanner span { opacity: 0.6; }

    /* ── Subscription paywall overlay ──────────────────────────────────── */
    #paywallOverlay {
      position: fixed; inset: 0; z-index: 9998;
      background: var(--bg-sidebar);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 0;
    }
    #paywallOverlay.hidden { display: none; }
    .paywall-box {
      background: var(--bg-white);
      border-radius: 16px;
      padding: 40px 40px 36px;
      max-width: 400px;
      width: 90%;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    }
    .paywall-logo {
      font-size: 22px; font-weight: 700; color: var(--text-primary);
      letter-spacing: -0.3px; margin-bottom: 24px;
    }
    .paywall-title {
      font-size: 20px; font-weight: 700; color: var(--text-primary);
      margin-bottom: 10px; line-height: 1.3;
    }
    .paywall-desc {
      font-size: 14px; color: var(--text-muted);
      line-height: 1.6; margin-bottom: 20px;
    }
    .paywall-company-input {
      display: block; width: 100%;
      border: 1px solid var(--border); border-radius: 8px;
      padding: 11px 14px; font-size: 14px;
      font-family: var(--font-base); color: var(--text-primary);
      background: var(--bg-card); margin-bottom: 20px;
      box-sizing: border-box; outline: none;
      transition: border-color 0.15s;
    }
    .paywall-company-input:focus { border-color: var(--accent); }
    .paywall-btn {
      display: block; width: 100%;
      background: var(--accent); color: var(--text-on-accent);
      border: none; border-radius: 8px;
      padding: 14px 24px;
      font-size: 15px; font-weight: 600;
      cursor: pointer; font-family: var(--font-base);
      transition: opacity 0.15s; text-decoration: none;
      margin-bottom: 12px;
    }
    .paywall-btn:hover { opacity: 0.8; }
    .paywall-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .paywall-signout {
      font-size: 13px; color: var(--text-muted);
      background: none; border: none; cursor: pointer;
      font-family: var(--font-base); text-decoration: underline;
    }
    .paywall-signout:hover { color: var(--text-primary); }
    .paywall-success {
      font-size: 14px; color: var(--success);
      margin-bottom: 16px; display: none;
    }

    /* Clerk sign-in overlay */
    #clerkOverlay {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--bg-sidebar);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 32px;
    }
    #clerkBranding {
      text-align: center;
    }
    #clerkBranding .brand-logo {
      font-size: 28px; font-weight: 700;
      color: var(--text-sidebar-active);
      letter-spacing: -0.5px;
    }
    #clerkBranding .brand-tagline {
      font-size: 14px; color: var(--text-sidebar);
      margin-top: 6px;
    }

  /* ─────────────────────────────────────────────
     Mobile — edit themes/mobile.css then paste here
     ───────────────────────────────────────────── */
  @media (max-width: 768px) {
    /* Lock horizontal axis: blocks page-level drag and iOS rubber-band */
    html, body { overflow-x: hidden; overscroll-behavior-x: none; }

    /* Pagination dots for the column carousel */
    .columns-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
      background: var(--bg-white);
      border-top: 1px solid var(--border-light);
      flex-shrink: 0;
    }
    .columns-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.18);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background-color 200ms ease, transform 200ms ease, width 200ms ease;
    }
    .columns-dot.is-active {
      background: var(--accent, var(--accent-blue-soft));
      width: 20px;
      border-radius: 4px;
    }

    /* Sign-in overlay: keep logo visible when content is taller than viewport */
    #clerkOverlay { justify-content: safe center; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 24px 16px; }

    /* Task modal workflow buttons (mobile/tablet): laid out as a 50/50
       row. JS relocates the element into .modal-two-col, right above
       the discussion tabs, so this targets both the original title-row
       slot and the relocated modal-two-col slot. */
    .task-modal .workflow-actions {
      flex-direction: row !important;
      align-items: stretch !important;
      gap: 8px !important;
      border-top: 1px solid var(--border-light) !important;
      padding: 10px 14px !important;
      margin: 0 !important;
      background: var(--bg-white, var(--bg-white));
      flex: 0 0 auto !important;  /* don't grow vertically inside modal-two-col */
      height: auto !important;
    }
    /* In the title-row (when present): take a full row via flex-wrap. */
    .task-modal .modal-title-row .workflow-actions {
      flex-basis: 100%;
    }
    .task-modal .workflow-actions .workflow-btn {
      flex: 1 1 0 !important;
      padding: 10px 8px !important;
      font-size: 12px !important;
      height: auto !important;
      min-height: 0 !important;
    }

    .sidebar { position: fixed; top: 0; left: -240px; height: 100dvh; width: 220px; z-index: 1000; transition: left 0.22s ease; }
    .sidebar.sidebar-open { left: 0; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; }
    .sidebar-backdrop.visible { display: block; opacity: 1; pointer-events: auto; }
    .hamburger-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: 10px; flex-shrink: 0; background: none; border: none; border-radius: var(--radius-md); color: var(--text-primary); font-size: 20px; cursor: pointer; transition: background 0.12s; }
    .hamburger-btn:hover { background: var(--bg-hover); }
    .main { width: 100%; min-width: 0; }
    /* Clear the iPhone status bar in standalone (home-screen) mode so
       the board/dashboard/today header + its back arrow stay tappable. */
    .topbar { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; }
    .columns { flex: 1; display: flex; flex-direction: row; padding: 12px; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; align-items: stretch; }
    .columns::-webkit-scrollbar { display: none; }
    .column {
      flex: 0 0 calc(100vw - 24px);
      scroll-snap-align: start;
      /* Let the column stretch to fill .columns' height (flex parent
         with align-items: stretch by default). Hard-coding a viewport-
         based height fights the flex layout and used to overflow the
         pagination dots off-screen on iOS Safari. */
      align-self: stretch;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .column-body { flex: 1; overflow-y: auto; min-height: 0; }
    .column-header   { font-size: 13px !important; padding: 16px 18px; letter-spacing: 0.1em; }

    /* Document-size warning banner — sits above the topbar inside .main */
    .doc-size-banner {
      padding: 10px 16px;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      border-bottom: 1px solid transparent;
      line-height: 1.4;
    }
    .doc-size-banner.warn-yellow {
      background: #fef3c7;
      color: var(--warning-deep);
      border-bottom-color: #fcd34d;
    }
    .doc-size-banner.warn-red {
      background: var(--danger-bg);
      color: var(--danger-deep);
      border-bottom-color: #fca5a5;
    }
    .project-card-title { font-size: 20px !important; }
    .boards-grid { grid-template-columns: repeat(2, 1fr); }
    .board-member-stack { display: none; }

    /* ── Project & task modal — mobile layout ── */
    /* Overlay scrolls like a page */
    /* Modal contains itself to the visible viewport. Top sections
       (title, description, members) take their natural collapsed
       height; the discussion fills the rest of the modal; inside the
       discussion, the message list scrolls and the composer is
       pinned at the bottom — always within reach. */
    .modal-overlay, .task-overlay {
      align-items: stretch;
      overflow: hidden;
    }
    .modal, .task-modal {
      width: 100vw; max-width: 100vw;
      height: 100dvh; max-height: 100dvh; min-height: 100dvh;
      border-radius: 0;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    /* modal-two-col becomes a flex column instead of a grid. Its
       direct children (title/desc, members, discussion) lay out
       vertically; discussion gets flex:1 to fill the remaining space. */
    .modal-two-col {
      display: flex;
      flex-direction: column;
      grid-template-columns: 1fr; /* harmless when display:flex wins */
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .modal-two-col > .modal-left-top,
    .modal-two-col > .modal-members,
    .modal-two-col > .tasks-section { flex-shrink: 0; }
    /* Remove desktop right-borders */
    .modal-left-top, .modal-members, .discussion, .tasks-section {
      border-right: none;
    }
    /* Discussion is the bulk of the modal — it takes whatever height
       is left after the (collapsed by default) top sections. */
    .discussion {
      flex: 1;
      min-height: 0;
      display: flex; flex-direction: column;
      overflow: hidden;
      padding-bottom: 0;
    }
    .disc-tabs { flex-shrink: 0; }
    /* The actual chat surface: tabs at top (above), messages scroll,
       composer pinned at the bottom of the discussion (= bottom of
       the modal viewport). */
    .disc-panel {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    /* WhatsApp / iMessage feel: when the conversation is short, the
       bubbles dock to the BOTTOM of the messages area (just above the
       composer) instead of starting at the top. When the conversation
       gets long enough to need scrolling, regular overflow-y kicks in.
       The trick: justify-content: flex-end inside a flex column.
       (Existing render code already calls scrollTop = scrollHeight
       after rendering, so the initial position when there IS overflow
       still lands at the latest message.) */
    .messages {
      flex: 1;
      min-height: 0;
      max-height: none;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    /* WhatsApp-style mobile composer:
       [+]   [-- input pill --]   [mic ↔ send]
       Each piece is its own element on a single flex row. The pill
       is the only thing with a border/shadow — the +/mic buttons
       sit on the dark page background to either side. */
    .message-composer {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      gap: 6px;
      /* Sit the composer lower — hug the home-indicator safe area with
         only a hair of clearance instead of an extra 8px, and tighten
         the top gap. Applies to both project + task windows. */
      margin: 2px 8px calc(2px + env(safe-area-inset-bottom, 0px)) !important;
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      overflow: visible;
      position: relative; /* anchor for the emoji icon inside the pill */
    }
    /* Reply preview + attachment strip take a full row above the input. */
    .reply-preview, .attachment-strip { flex: 1 1 100%; }
    /* Hide everything not in the minimal lineup. The composer-toolbar
       itself is NOT in this list — it's revealed via the attach-menu's
       "Aa" rich-text option, and its own `.hidden` class controls
       visibility (so it stays hidden by default, but can appear when
       the user activates it). */
    #toggleToolbarBtn, #tmToggleToolbarBtn,
    #mentionBtn, #tmMentionBtn,
    .dictate-btn,
    #enterToggleBtn, #tmEnterToggle {
      display: none !important;
    }
    /* Emoji icon lives INSIDE the input pill, anchored to its right
       edge — like WhatsApp / iMessage. Absolutely positioned just to
       the left of the mic/send button. */
    #emojiBtn, #tmEmojiBtn {
      position: absolute;
      right: 50px; /* mic/send button (38px) + gap (~12px) */
      bottom: 4px;
      width: 32px; height: 32px;
      border-radius: 50%;
      color: var(--text-muted);
      opacity: 0.75;
      z-index: 2;
    }
    #emojiBtn:hover, #tmEmojiBtn:hover { opacity: 1; }
    .composer-footer label { display: none !important; }
    /* Hoist footer + action children up to the composer's flex row.
       Also hoist the sibling inline-styled wrapper div that wraps the
       send-btn + 'Return to Send' label — otherwise the send button
       inherits order:0 from that wrapper and floats to the left. */
    .composer-footer { display: contents !important; }
    .composer-actions { display: contents !important; }
    .composer-footer > div:not(.composer-actions) { display: contents !important; }
    /* + button (attach) — far left, outside the pill */
    #imgUploadBtn, #tmImgUploadBtn {
      position: static;
      flex-shrink: 0;
      width: 38px; height: 38px;
      border-radius: 50%;
      order: 1;
    }
    /* Mic / send — far right, outside the pill */
    .voice-btn {
      position: static;
      flex-shrink: 0;
      width: 38px; height: 38px;
      border-radius: 50%;
      order: 3;
    }
    /* When the user has typed anything, the mic is replaced by a
       solid black circle with a white arrow inside — the universal
       "ready to send" affordance. */
    .send-btn {
      position: static;
      flex-shrink: 0;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--accent) !important;
      color: var(--text-on-accent) !important;
      border: none;
      display: none !important;
      order: 3;
    }
    .send-btn:hover { background: #000 !important; }
    .send-btn svg { stroke: #fff; }
    .message-composer.has-text .send-btn { display: flex !important; }
    .message-composer.has-text .voice-btn { display: none !important; }
    /* The input pill — the only piece with chrome. Right padding
       reserves space for the emoji icon sitting inside the pill.
       flex: 1 1 0% (not `1 1 auto`) so the pill grows from zero into
       whatever space is left after the +/mic buttons take theirs. With
       `auto`, flex-basis = content-size; a long sentence pushes basis
       way past viewport width and the wrap rule sends the buttons to
       their own rows. With 0% the pill happily shrinks to fit no matter
       how long the text, and content just wraps within the pill. */
    .message-input {
      order: 2;
      flex: 1 1 0%;
      width: 0;             /* belt-and-suspenders for Safari's flex sizing */
      min-width: 0;
      padding: 7px 40px 7px 16px;
      min-height: 36px;
      max-height: 140px;
      line-height: 1.35;
      font-size: 15px;
      background: var(--bg-white);
      border: 1px solid var(--border-default);
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      overflow-wrap: anywhere;   /* never let a long unbroken token expand the pill */
    }

    /* Wider message list — drop the heavy 28px side padding so the
       discussion uses the full width on phone/tablet. */
    .messages {
      padding: 0 8px 12px !important;
    }
    /* Hide tasks/activity section on mobile */
    .tasks-section { display: none; }
    /* Tabs scroll horizontally if they don't fit, but we try hard to make
       all five fit on a phone (Discussion / Images / Videos / Files / Links). */
    .disc-tabs {
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      scrollbar-width: none;
      touch-action: pan-x;
      overscroll-behavior-x: contain;
      padding: 4px 4px !important;
      gap: 0 !important;
      justify-content: space-between;
    }
    .disc-tabs::-webkit-scrollbar { display: none; }
    /* Tighter tab pills on mobile so all five fit across a phone screen. */
    .disc-tab, .tm-tab {
      padding: 4px 6px !important;
      font-size: 9px !important;
      gap: 3px !important;
      flex: 0 1 auto;
      letter-spacing: -0.1px;
    }
    .disc-tab .tab-icon, .tm-tab .tab-icon {
      width: 12px !important;
      height: 12px !important;
    }
    /* The "· 3 messages" counter on the right of the tabs is desktop-only —
       on mobile it eats space and clutters the pill bar. */
    .disc-count { display: none !important; }
    /* Darker grey behind the message list so individual bubbles stand
       out more on mobile (was white — too low contrast with the bubbles). */
    .disc-panel,
    .messages,
    #discPanel,
    #tmDiscPanel {
      background: #d8dbe0;
    }
    /* Collapsible section toggles */
    .m-desktop-label { display: none; }
    .m-section-toggle {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 20px; width: 100%; cursor: pointer;
      border: none; border-bottom: 1px solid var(--border-light);
      background: none; font-size: 13px; font-weight: 600;
      color: var(--text-secondary); text-align: left;
    }
    .m-section-toggle .m-chevron {
      font-size: 18px; color: var(--text-muted); transition: transform 0.2s; line-height: 1;
    }
    .m-section-toggle[aria-expanded="true"] .m-chevron { transform: rotate(90deg); }
    .m-section-body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
    .m-section-body.open { max-height: 1000px; }
    /* Task modal: revert to stacked on mobile */
    .task-modal .modal-left-top {
      display: flex; flex-direction: column; padding: 0;
    }
    .task-modal .task-title-col {
      padding: 16px 20px 4px; border-right: none;
    }
    .task-modal #mTaskDescBody {
      padding: 0;
    }
    /* Project modal: revert to stacked on mobile */
    .modal .modal-left-top {
      display: flex; flex-direction: column; padding: 0;
    }
    .modal .proj-title-col {
      padding: 16px 20px 4px; border-right: none;
    }
    .modal #mProjDescBody {
      padding: 0;
    }
    /* Title row should fill the modal on mobile (was 50% on desktop).
       The breadcrumb itself is hidden on mobile (lives in the Group Info
       popup instead) — we keep the row visible only as a wrapper for the
       X close button. */
    .modal .modal-title-row,
    .task-modal .modal-title-row {
      width: 100%;
      box-sizing: border-box;
      /* env(safe-area-inset-top) clears the iPhone status bar / notch
         when the app runs full-screen from the home screen (standalone
         PWA with viewport-fit=cover). Without it the header sits UNDER
         the status bar and the back arrow can't be tapped. */
      padding: calc(4px + env(safe-area-inset-top, 0px)) 20px 1px !important;
      border-bottom: none !important;
      min-height: 14px;
    }
    .modal .modal-breadcrumb,
    .task-modal .modal-breadcrumb {
      display: none !important;
    }
    /* Raise the absolutely-positioned X to match the tighter title-row. */
    .modal #closeBtn,
    .task-modal #taskCloseBtn {
      top: 6px !important;
    }
    /* Big back arrow takes over as the "exit" on mobile; hide the X.
       Tap the arrow to drop back to the board. Offset by the safe-area
       inset so it clears the status bar in standalone (home-screen) mode
       and stays tappable. */
    .modal-back { display: flex; top: calc(4px + env(safe-area-inset-top, 0px)); }
    .modal #closeBtn,
    .task-modal #taskCloseBtn {
      display: none !important;
    }
    /* Mobile project header: surface "+ Task" top-right (the X is hidden
       here and the Tasks section is collapsed). */
    .modal .modal-add-task-btn {
      display: inline-flex; align-items: center;
      position: absolute; right: 16px;
      top: calc(4px + env(safe-area-inset-top, 0px));
      z-index: 6;
    }
    /* Pull the title block up against the breadcrumb. */
    .modal .proj-title-col,
    .task-modal .task-title-col {
      padding-top: 1px !important;
      padding-bottom: 4px !important;
      border-bottom: 1px solid var(--border-light);
    }
    /* Hide created date, description toggle/body, and members section
       on mobile. Their content is surfaced in the "Group Info" popup
       that opens when the title is tapped. */
    .modal .project-created-date,
    .task-modal .project-created-date,
    .modal #mProjDescToggle, .modal #mProjDescBody,
    .task-modal #mTaskDescToggle, .task-modal #mTaskDescBody,
    .modal .modal-members,
    .task-modal .modal-members {
      display: none !important;
    }
    /* Show the comma-separated member names line directly under the title. */
    .modal .member-names-line,
    .task-modal .member-names-line {
      display: block;
      padding: 2px 20px 0;
      text-align: center;
    }
    /* Make the title look tappable on mobile and center it. */
    .modal .project-title-edit,
    .task-modal .project-title-edit {
      cursor: pointer;
      padding: 0 20px;
      text-align: center;
    }
    /* Wrap workflow buttons under breadcrumb so they don't overflow on narrow screens */
    .task-modal .modal-title-row {
      flex-wrap: wrap;
      gap: 8px;
    }
    .task-modal .modal-title-row .workflow-actions {
      margin-right: 0 !important;
    }
    /* Allow grid children to shrink instead of expanding their tracks past the viewport */
    .modal-two-col,
    .modal-left-top, .modal-members, .discussion, .tasks-section,
    .modal-members .m-section-body,
    .members-list {
      min-width: 0;
    }
    .modal .members-list {
      flex-shrink: 1;
      flex-wrap: wrap;
      max-width: 100%;
    }
    /* Clip any stray overflow at the modal boundary */
    .modal, .task-modal {
      overflow-x: hidden;
    }
    .modal-overlay, .task-overlay {
      justify-content: stretch;
    }
    .project-title-edit, .project-desc-edit {
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    /* Force images/videos in messages to fit their bubble even when inline styles
       (e.g. max-width:300px) would otherwise let them overflow */
    .message-text img,
    .message-text video,
    .message-input img {
      max-width: 100% !important;
      height: auto !important;
    }
    /* Hide user name in app header on mobile — keep avatar only */
    .app-header .sidebar-user-name { display: none; }
    .app-header { padding: 8px 16px; }
    .app-header-logo { height: 24px; }
  }
    /* ══ Product Development (Stage A) ═══════════════════════════════
       Five columns (Projects | Design | Tech Pack | Sample | Shipped);
       Shipped intentionally overflows off-screen — horizontal scroll.
       Stage colors are the board's visual system for this surface. */
    /* Darker canvas behind the PD columns so the tinted stage columns
       and white cards read as raised (--pd-board-bg is redirected to a
       warm depth above, alongside the rest of the Warm Paper look). */
    #pdBoardView { background: var(--pd-board-bg, #d9d9d6); }
    /* REMOVED 2026-09-05: `#pdBoardView .column { flex: 1 0 240px;
       max-width: 360px }` and `#pdBoardView .columns { overflow-x: auto }`.

       At (1,1,0) the first outranked `.col-complete.is-collapsed
       { flex: 0 0 46px }` (0,2,0) in structure.css, so PD's Production
       column never actually narrowed when collapsed: min-width took
       effect, flex-basis did not, and the column stayed 240px wide with
       its header and body display:none — a 240px hole with the rail
       floating in it. The comment that used to sit here already recorded
       this rule silently overriding the mobile carousel once before.
       An ID cannot be outranked by classes, so the rule had to go rather
       than be fought.

       `.column { flex: 1 1 0 }` in structure.css governs all three
       workspaces now: columns share the width equally, which is what
       Task and Invoices always did. The second selector was already dead
       — `.columns` was renamed `.canvas`. */
    /* Shipped is an archive: collapsed to a slim rail by default. */
    #pdColShipped.pd-collapsed { flex: 0 0 46px; min-width: 46px; cursor: pointer; }
    #pdColShipped.pd-collapsed .column-header, #pdColShipped.pd-collapsed .column-body { display: none; }
    .pd-shipped-rail { display: none; }
    #pdColShipped.pd-collapsed .pd-shipped-rail {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      padding: 14px 0; height: 100%;
    }
    .pd-shipped-rail .rail-label {
      writing-mode: vertical-rl; text-orientation: mixed;
      font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: var(--text-muted, #9ca3af);
    }
    .pd-shipped-rail .rail-count {
      font-size: 10.5px; font-weight: 700; min-width: 20px; height: 20px;
      border-radius: 999px; display: flex; align-items: center; justify-content: center;
      background: #dbe9fb; color: #1d4fa5;
    }
    #pdColShipped.pd-collapsed:hover { background: var(--bg-hover, #f3f4f6); }
    .pd-board-card .inv-board-card-banner { background: #ecdff8; color: #6a3fa0; }

    /* .pd-card-badges is now .card-body — the shared free region. */
    /* Baseline modal division: vertical rule between title and description,
       horizontal rules closing each band — same lines the task modal draws. */
    /* Editorial 2×2 grid — label/value quadrants with hairline rules.
       Values set in Shree Devanagari 714 (ships with macOS/iOS). */
    .pd-room-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 0; padding: 0; flex-shrink: 0;
      border-bottom: 1px solid var(--border-light, #eceae6);
      --pd-value-font: "Shree Devanagari 714", "Gill Sans", "Trebuchet MS", -apple-system, "Segoe UI", sans-serif;
    }
    .pd-cell {
      min-width: 0; padding: 14px 32px 13px 36px;
      display: flex; flex-direction: column; gap: 7px; justify-content: flex-start;
    }
    .pd-cell:nth-child(n+3) { padding-top: 9px; padding-bottom: 9px; gap: 5px; }
    .pd-cell:nth-child(odd) { border-right: 1px solid var(--border-light, #eceae6); }
    .pd-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border-light, #eceae6); }
    .pd-cell-title { flex-direction: row; align-items: center; gap: 18px; }
    .pd-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .pd-edit-link {
      font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
      background: none; border: none; cursor: pointer; color: #b6b6b0; padding: 0;
    }
    .pd-edit-link:hover { color: var(--text-primary, #16181d); }
    .pd-value-title {
      font-family: var(--pd-value-font); font-size: 25px; font-weight: 400;
      line-height: 1.1; outline: none; letter-spacing: .01em;
    }
    .pd-value-big {
      font-family: var(--pd-value-font); font-size: 25px; font-weight: 400;
      line-height: 1.1; letter-spacing: .01em; font-variant-numeric: tabular-nums;
    }
    .pd-value-big.slip { color: #b91c1c; }
    .pd-value-mid { font-family: var(--pd-value-font); font-size: 17px; font-weight: 400; line-height: 1.2; }
    .pd-due-left { font-size: 11px; font-weight: 700; text-align: right; letter-spacing: .02em; margin-top: 0; }
    .pd-due-left.ok { color: #1a9a4c; }
    .pd-due-left.warn { color: #b45309; }
    .pd-due-left.late { color: #b91c1c; }
    .pd-desc-line {
      font-size: 12.5px; color: var(--text-secondary, #6b7280); outline: none;
      margin-top: 9px; min-height: 16px;
    }
    .pd-desc-line:empty::before { content: attr(data-placeholder); color: var(--text-muted, #b0b0ab); }
    .pd-thumb-box {
      width: 64px; height: 64px; flex-shrink: 0; cursor: pointer; padding: 0;
      border: 1.5px dashed var(--border-default, #d1d5db); border-radius: 13px;
      background: var(--bg-subtle, #f8f8f7) center/contain no-repeat;
      font: inherit; font-size: 10.5px; font-weight: 600; color: var(--text-muted, #9ca3af);
      line-height: 1.35;
    }
    .pd-thumb-box.has-photo { border-style: solid; }
    .pd-thumb-box.has-photo span { display: none; }
    .pd-thumb-box:hover { filter: brightness(.96); }
    .pd-mini-label {
      font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
      color: #b6b6b0;
    }
    .pd-half-content { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; }
    .pd-room-overlay .modal-title-row .modal-breadcrumb { flex: 1; min-width: 0; }
    .pd-room-overlay .pd-room-icon-btn { padding: 7px; border-radius: 8px; display: inline-flex; }
    .pd-due { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
    .pd-due-label {
      font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted, #9ca3af);
    }
    .pd-due-date { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, #16181d); }
    .pd-due-date.slip { color: #b91c1c; }
    .pd-fac-shell {
      font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
      display: inline-flex; align-items: center; gap: 6px;
      border: 1px solid var(--border-default, #e5e7eb); border-radius: 999px;
      background: var(--bg-white, #fff); color: var(--text-secondary, #4b5563);
      padding: 4px 12px; max-width: 100%;
    }
    .pd-fac-shell.empty { border-style: dashed; color: var(--text-muted, #9ca3af); }
    .pd-fac-shell:hover { background: var(--bg-hover, #f3f4f6); }
    .pd-fac-shell .f-sub { font-weight: 500; color: var(--text-muted, #9ca3af); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 640px) {
      .pd-room-grid { grid-template-columns: 1fr; }
      .pd-cell:nth-child(odd) { border-right: none; }
      .pd-cell { border-bottom: 1px solid var(--border-light, #eceae6); padding-left: 20px; }
      .pd-cell:last-child { border-bottom: none; }
    }
    .pd-img-hover-menu {
      position: fixed; z-index: 400;
      display: none; align-items: center; gap: 4px;
      background: var(--bg-white, #fff);
      border: 1px solid var(--border-default, #e5e7eb);
      border-radius: 9px; padding: 3px;
      box-shadow: 0 4px 14px rgba(10,10,12,.16);
    }
    .pd-img-hover-menu.show { display: flex; }
    .pd-img-hover-menu button {
      font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
      border: none; background: none; color: var(--text-secondary, #4b5563);
      padding: 5px 9px; border-radius: 6px; white-space: nowrap;
    }
    .pd-img-hover-menu button:hover { background: var(--bg-hover, #f3f4f6); color: var(--text-primary, #111827); }
    .pd-room-thumb-btn {
      width: 38px; height: 38px; flex-shrink: 0;
      border-radius: 9px; border: 1px dashed var(--border-default, #d1d5db);
      background: var(--bg-subtle, #f5f5f4) center/contain no-repeat;
      cursor: pointer; padding: 0; font-size: 15px; color: var(--text-muted, #9ca3af);
    }
    .pd-room-thumb-btn.has-photo { border-style: solid; }
    .pd-room-thumb-btn:hover { filter: brightness(.95); }
    /* .pd-card-thumb is now the shared .card-thumb — see structure.css.
       Task cards use the same object, so it cannot stay PD's. */
    .pd-badge { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-subtle, #f3f4f6); color: var(--text-secondary, #4b5563); white-space: nowrap; }
    .pd-badge.ok    { background: #ddf2e2; color: #17703a; }
    .pd-badge.warn  { background: #fcefd4; color: #8a5a0b; }
    .pd-badge.late  { background: #fde3e3; color: #b91c1c; }
    .pd-badge.home  { background: transparent; border: 1px solid var(--border-default, #e5e7eb); font-weight: 500; }
    .pd-badge.home.slip { color: #b91c1c; border-color: #f3c1c1; }

    /* ── Product Room ── */
    .pd-room-overlay { position: fixed; inset: 0; background: rgba(15,18,25,.45); display: none; align-items: center; justify-content: center; padding: 18px; z-index: 300; }
    .pd-room-overlay.open { display: flex; }
    .pd-room { background: var(--bg-white, #fff); border-radius: 16px; width: 100%; max-width: 760px; height: min(860px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 18px 60px rgba(10,12,18,.28); position: relative; }
    .pd-room-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-default, #e5e7eb); flex-shrink: 0; }
    .pd-room-head .rh-crumb { font-size: 11px; color: var(--text-muted, #9ca3af); }
    .pd-room-head .rh-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
    .pd-room-head .rh-chip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-default, #e5e7eb); color: var(--text-secondary, #4b5563); white-space: nowrap; }
    .pd-room-head .rh-chip.slip { color: #b91c1c; border-color: #f3c1c1; }
    .pd-room-icon-btn { background: none; border: none; cursor: pointer; color: var(--text-muted, #9ca3af); font-size: 16px; padding: 6px; border-radius: 8px; line-height: 1; }
    .pd-room-icon-btn:hover { background: var(--bg-hover, #f3f4f6); color: var(--text-primary, #111827); }

    .pd-timeline { display: flex; padding: 12px 6px 10px; border-bottom: 1px solid var(--border-default, #e5e7eb); flex-shrink: 0; }
    .pd-tstage { flex: 1; text-align: center; cursor: pointer; background: none; border: none; font: inherit; color: inherit; padding: 0; }
    .pd-tstage .rail { display: flex; align-items: center; }
    .pd-tstage .rail .seg { flex: 1; height: 2px; background: var(--border-default, #e5e7eb); }
    .pd-tstage .rail .seg.hide { background: transparent; }
    .pd-tstage .dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; flex-shrink: 0; border: 2px solid var(--border-default, #e5e7eb); color: var(--text-muted, #9ca3af); background: var(--bg-white, #fff); }
    .pd-tstage .tname { font-size: 11.5px; font-weight: 600; margin-top: 5px; color: var(--text-muted, #9ca3af); }
    .pd-tstage .tsub { font-size: 10px; color: var(--text-muted, #9ca3af); margin-top: 1px; min-height: 12px; }
    .pd-tstage.done .dot { color: #fff; }
    .pd-tstage.done .tname { color: var(--text-primary, #111827); }

    .pd-thread { flex: 1; overflow-y: auto; scroll-behavior: smooth; background: var(--bg-white, #fff); }
    .pd-sec { padding: 0 16px 14px; }
    .pd-sec-head { position: sticky; top: 0; z-index: 6; margin: 0 -16px 10px; padding: 7px 12px 7px 16px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; min-height: 40px; }
    .pd-sec-head .sdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .pd-sec-head .swhen { font-weight: 500; opacity: .78; font-size: 11px; }
    .pd-sec-head .sactions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
    .pd-sh-btn { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 6px 11px; border-radius: 999px; border: 1px solid transparent; background: var(--bg-white, #fff); color: inherit; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 1px 3px rgba(10,10,12,.12); white-space: nowrap; }
    .pd-sh-btn:hover { filter: brightness(.97); }
    .pd-sh-btn.approve { background: #1a9a4c; color: #fff; }
    .pd-sh-chip { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #fcefd4; color: #8a5a0b; white-space: nowrap; }
    .pd-sec-body { display: flex; flex-direction: column; gap: 9px; }

    .pd-msg { display: flex; gap: 8px; max-width: 84%; }
    .pd-msg .av { width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: #e3edfb; color: #1d4fa5; }
    .pd-msg .bubble { background: var(--bg-subtle, #f5f5f4); border-radius: 4px 13px 13px 13px; padding: 8px 12px; font-size: 13px; line-height: 1.5; word-break: break-word; }
    .pd-msg .who { font-size: 10.5px; font-weight: 600; color: var(--text-muted, #9ca3af); margin-bottom: 2px; }
    .pd-msg.me { align-self: flex-end; flex-direction: row-reverse; }
    .pd-msg.me .av { display: none; }
    .pd-msg.me .bubble { background: #16181d; color: #f5f5f3; border-radius: 13px 4px 13px 13px; }

    .pd-marker { text-align: center; margin: 2px 0; }
    .pd-marker span { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; display: inline-block; }
    .pd-marker.rev span { background: #fcefd4; color: #8a5a0b; }
    .pd-marker.ok span { background: #ddf2e2; color: #17703a; }
    .pd-marker.info span { background: var(--bg-subtle, #f3f4f6); color: var(--text-secondary, #4b5563); }

    .pd-subcard { border: 2px solid #2563eb; border-radius: 13px; padding: 11px 13px; margin: 3px 0; background: var(--bg-white, #fff); }
    .pd-subcard.approved { border-color: #1a9a4c; }
    .pd-subcard.rejected { border-color: var(--border-default, #d1d5db); opacity: .88; }
    .pd-sub-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; }
    .pd-sub-top .meta { font-size: 11px; color: var(--text-muted, #9ca3af); margin-left: auto; font-weight: 500; }
    .pd-sub-note { font-size: 12.5px; color: var(--text-secondary, #4b5563); margin-top: 5px; font-style: italic; }
    .pd-sub-status { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
    .pd-sub-status.pending  { background: #fcefd4; color: #8a5a0b; }
    .pd-sub-status.approved { background: #ddf2e2; color: #17703a; }
    .pd-sub-status.rejected { background: var(--bg-subtle, #f3f4f6); color: var(--text-muted, #9ca3af); }
    .pd-sub-verdict { font-size: 12px; color: var(--text-secondary, #4b5563); margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-default, #e5e7eb); }

    .pd-event { border: 1px dashed var(--border-default, #d1d5db); border-radius: 11px; padding: 9px 12px; font-size: 12px; color: var(--text-secondary, #4b5563); line-height: 1.5; }
    .pd-event .pd-air-btn { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; margin-top: 7px; padding: 6px 12px; border-radius: 999px; border: none; background: #16181d; color: #fff; }

    .pd-composer-wrap { border-top: 1px solid var(--border-default, #e5e7eb); flex-shrink: 0; background: var(--bg-white, #fff); }
    .pd-composer-wrap .voice-rec { margin: 8px 12px 0; }
    .pd-composer-wrap .attachment-strip { margin: 8px 12px 0; }
    .pd-composer { display: flex; align-items: flex-end; gap: 4px; padding: 10px 12px 12px; }
    .pd-input {
      flex: 1; min-width: 0; font: inherit; font-size: 13px;
      border: 1px solid var(--border-default, #d1d5db); border-radius: 18px;
      padding: 8px 14px; min-height: 20px; max-height: 120px; overflow-y: auto;
      background: var(--bg-white, #fff); color: var(--text-primary, #111827);
      outline: none; word-break: break-word;
    }
    .pd-input:empty::before { content: attr(data-placeholder); color: var(--text-muted, #9ca3af); pointer-events: none; }
    .pd-msg .bubble .message-text { font-size: 13px; line-height: 1.5; }
    .pd-msg .bubble .message-text img { max-width: 180px; max-height: 220px; border-radius: 8px; cursor: pointer; }
    .pd-msg.me .bubble a { color: inherit; }
    .pd-composer input { flex: 1; font: inherit; font-size: 13px; border: 1px solid var(--border-default, #d1d5db); border-radius: 999px; padding: 9px 14px; min-width: 0; background: var(--bg-white, #fff); color: var(--text-primary, #111827); }
    .pd-send-btn { width: 35px; height: 35px; border-radius: 50%; flex-shrink: 0; border: none; cursor: pointer; background: #16181d; color: #fff; display: flex; align-items: center; justify-content: center; }

    .pd-sheet-overlay { position: fixed; inset: 0; background: rgba(15,18,25,.5); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 320; }
    .pd-sheet-overlay.open { display: flex; }
    .pd-sheet { background: var(--bg-white, #fff); border-radius: 16px; padding: 20px; width: 100%; max-width: 440px; max-height: calc(100vh - 60px); overflow-y: auto; }
    .pd-sheet h3 { font-size: 15px; font-weight: 700; margin: 0; }
    .pd-sheet .hint { font-size: 12.5px; color: var(--text-secondary, #4b5563); margin-top: 6px; line-height: 1.5; }
    .pd-sheet label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted, #9ca3af); margin: 13px 0 5px; }
    .pd-sheet input, .pd-sheet select, .pd-sheet textarea { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--border-default, #d1d5db); border-radius: 9px; padding: 9px 12px; background: var(--bg-white, #fff); color: var(--text-primary, #111827); box-sizing: border-box; }
    .pd-sheet .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
    .pd-btn { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 8px 15px; border-radius: 9px; border: 1px solid var(--border-default, #d1d5db); background: var(--bg-white, #fff); color: var(--text-secondary, #4b5563); }
    .pd-btn.primary { background: #16181d; border-color: #16181d; color: #fff; }
    .pd-ladder { margin-top: 14px; }
    .pd-lad-card {
      border: 1px solid var(--border-light, #ebebe9);
      border-radius: 14px; padding: 16px 18px 8px;
      background: var(--bg-white, #fff);
    }
    .pd-lad-row { display: flex; align-items: center; gap: 14px; }
    .pd-lad-rail { width: 28px; display: flex; flex-direction: column; align-items: center; align-self: stretch; }
    .pd-lad-ico {
      width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--bg-subtle, #f5f5f4);
      border: 1px solid var(--border-light, #ebebe9);
      color: var(--text-secondary, #52525b);
    }
    .pd-lad-row.home .pd-lad-ico { background: #16181d; border-color: #16181d; color: #fff; }
    .pd-lad-line { width: 1px; flex: 1; background: var(--border-light, #e8e8e6); min-height: 12px; }
    .pd-lad-main { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 2px 0; }
    .pd-lad-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #16181d); white-space: nowrap; }
    .pd-lad-row.home .pd-lad-label { font-size: 13px; font-weight: 700; }
    .pd-lad-dotsep { flex: 1; border-bottom: 1px dotted var(--border-default, #ddd); transform: translateY(-3px); }
    .pd-lad-date { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, #16181d); white-space: nowrap; }
    .pd-lad-gap { display: flex; align-items: center; gap: 12px; }
    .pd-lad-gap .pd-lad-rail { min-height: 26px; }
    .pd-lad-gap .g-lbl { font-size: 11px; font-weight: 500; color: var(--text-muted, #a1a1aa); padding: 2px 0; }
    .pd-lad-verdict {
      margin-top: 10px; border-radius: 11px; padding: 9px 13px;
      font-size: 12px; font-weight: 600; line-height: 1.45;
      display: flex; gap: 8px; align-items: flex-start;
    }
    .pd-lad-verdict.bad  { background: #fef2f2; color: #b91c1c; border: 1px solid #fbdcdc; }
    .pd-lad-verdict.warn { background: #fefbec; color: #92650c; border: 1px solid #f5ead0; }
    .pd-lad-verdict.ok   { background: #f2faf4; color: #1a7f43; border: 1px solid #d9efdf; }
    .pd-lad-verdict .v-icon { flex-shrink: 0; }

    /* Claude-style pass on the PD sheets: quiet labels, hairline inputs,
       soft focus ring, generous rhythm. Scoped to the PD overlays. */
    #pdOverlay .cb-field-label {
      font-size: 12.5px; font-weight: 500; color: var(--text-secondary, #52525b);
      text-transform: none; letter-spacing: 0; margin-bottom: 6px; display: block;
    }
    #pdOverlay .board-name-input, #pdOverlay textarea.board-name-input, #pdOverlay select.board-name-input {
      border: 1px solid var(--border-default, #e4e4e7);
      border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
      background: var(--bg-white, #fff); color: var(--text-primary, #16181d);
      transition: border-color .12s ease, box-shadow .12s ease;
      width: 100%; box-sizing: border-box;
    }
    #pdOverlay .board-name-input:focus {
      outline: none; border-color: #a1a1aa;
      box-shadow: 0 0 0 3px rgba(22, 24, 29, .07);
    }
    #pdOverlay .cb-hint { font-size: 12px; color: var(--text-muted, #a1a1aa); line-height: 1.5; }
    #pdOverlay details > summary {
      font-size: 12.5px; font-weight: 500; color: var(--text-secondary, #52525b);
      cursor: pointer; padding: 8px 0; user-select: none; list-style: none;
    }
    #pdOverlay details > summary::before { content: '›'; display: inline-block; margin-right: 7px; transition: transform .15s ease; color: var(--text-muted, #a1a1aa); }
    #pdOverlay details[open] > summary::before { transform: rotate(90deg); }
    #pdOverlay details > summary::-webkit-details-marker { display: none; }
    #pdOverlay .pd-durgrid { gap: 12px 14px; }
    #pdOverlay .pd-btn { border-radius: 10px; font-size: 13px; padding: 9px 16px; }
    #pdOverlay .pd-btn.primary { background: #16181d; border-color: #16181d; }
    #pdOverlay .pd-btn.primary:hover { background: #2b2d33; }
    .pd-durgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .pd-fac-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-default, #e5e7eb); border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
    .pd-fac-row .f-meta { font-size: 11.5px; color: var(--text-muted, #9ca3af); }

    /* ── Factory portal (?factory=<token>) — external page, own chrome ── */
    #factoryPortalView { position: fixed; inset: 0; z-index: 10000; background: #ececea; overflow-y: auto; }
    .fp-wrap { max-width: 640px; margin: 0 auto; padding: 24px 12px 40px; }
    .fp-card { background: #fff; border: 1px solid #e3e3df; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100vh - 80px); }
    .fp-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #e3e3df; }
    .fp-brand { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
    .fp-product { font-size: 17px; font-weight: 700; color: #16181d; }
    /* Split-view masthead: "Brand × Factory" headline on the standing portal. */
    .fp-product.fp-masthead { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
    @media (max-width: 640px) { .fp-product.fp-masthead { font-size: 21px; } }
    .fp-chip { font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: #fadfe8; color: #be185d; white-space: nowrap; }
    .fp-body { flex: 1; padding: 4px 16px 16px; }
    /* Standing-link chrome: the way back from a room to the product list. */
    .fp-nav { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #eeeeea; background: #fafaf8; }
    .fp-back { font: inherit; font-size: 12.5px; font-weight: 600; color: #4b5563; background: none; border: none; cursor: pointer; padding: 2px 0; }
    .fp-back:hover { color: #16181d; }
    .fp-nav-fac { font-size: 11.5px; color: #b4b2a9; margin-left: auto; }
    /* Board mode: the standing link's home page. The columns and cards
       are the app's own .canvas / .column / .card — the only job here is
       to give them room and a height to fill, since the portal's sheet is
       sized for a conversation, not a board. */
    #factoryPortalView.fp-board .fp-wrap { max-width: 1120px; }
    #factoryPortalView.fp-board .fp-body { display: flex; flex-direction: column; min-height: 0; padding: 0; }
    #factoryPortalView.fp-board .canvas { padding: 16px; gap: 12px; }
    /* A factory sees two columns, so they get half the board each rather
       than the narrow strip five columns' worth of flex would leave. */
    #factoryPortalView.fp-board .column { flex: 1 1 0; }
    #factoryPortalView.fp-board .column-body { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
    .fp-col-empty { padding: 26px 8px; text-align: center; font-size: 12.5px; color: var(--ink-label, #9ca3af); line-height: 1.5; }
    /* Phones: one column at a time, swiped — same as the app's own board. */
    @media (max-width: 768px) {
      #factoryPortalView.fp-board .canvas { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
      #factoryPortalView.fp-board .column { flex: 0 0 85%; scroll-snap-align: center; }
    }
    .fp-loading { padding: 60px 0; text-align: center; color: #9ca3af; font-size: 14px; }
    /* WhatsApp-style split: one list of cards left, the open conversation
       right. All additions, gated behind .fp-split — the brand app and the
       legacy per-product page never carry the class. */
    #factoryPortalView.fp-split .fp-card { height: calc(100vh - 48px); min-height: 0; }
    #factoryPortalView.fp-split .fp-body { min-height: 0; }
    .fp-split-panes { flex: 1; display: flex; min-height: 0; }
    .fp-split-list { width: 340px; min-width: 260px; border-right: 1px solid #e8e6e0; overflow-y: auto; padding: 12px; background: #fafaf8; }
    /* Messages as white sheets on the stage wash — the same read as the
       app's PD rooms, in the portal chat and the brand's factory tab. */
    #factoryPortalView .messages .message,
    .pdf-items.messages .message {
      background: #fff;
      border: 1px solid #e8e6e0;
      border-radius: 12px;
      box-shadow: 0 1px 2px rgba(20, 18, 12, 0.05);
      padding: 10px 12px;
      margin: 0 0 10px;
    }
    .fp-split-list .column { width: auto; }
    /* Portal cards carry a stage-coded accent strip (inline, from
       cardHtml) instead of the brand board's arbitrary card colors. */
    .fp-split-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .fp-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #e8e6e0; background: #fff; }
    .fp-chat-head .fp-back { font-size: 22px; line-height: 1; padding: 0 4px; }
    .fp-chat-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #16181d; }
    .fp-chat-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fp-chat-thumb { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex: none; }
    .fp-chat-scroll { flex: 1; overflow-y: auto; padding: 14px 18px; }
    .fp-chat-empty { height: 100%; display: flex; align-items: center; justify-content: center; color: #b4b2a9; font-size: 13.5px; text-align: center; padding: 20px; }
    #factoryPortalView.fp-split .card.fp-active { outline: 2px solid #16181d; outline-offset: -2px; }
    @media (min-width: 769px) {
      /* Desktop: the list never leaves, so the back arrow has no job. */
      .fp-chat-head .fp-back { display: none; }
    }
    .fp-split-chat { position: relative; }
    @media (max-width: 768px) {
      /* Phone: WhatsApp exactly — full-screen list, tap a card, the chat
         slides in with ‹ back in its header. */
      .fp-split-list { width: 100%; min-width: 0; border-right: none; }
      .fp-split-chat { display: none; }
      #factoryPortalView.fp-chat-open .fp-split-list { display: none; }
      #factoryPortalView.fp-chat-open .fp-split-chat { display: flex; }

      /* The LIST view too: on a phone the screen is the only container.
         Header on top, cards scrolling edge to edge under it — no sheet
         inside a sheet inside a column box. */
      .fp-wrap { max-width: none; padding: 0; }
      .fp-card { border: none; border-radius: 0; box-shadow: none; margin: 0; min-height: 100dvh; background: transparent; }
      #factoryPortalView.fp-split .fp-card { height: auto; min-height: 100dvh; }
      .fp-head { background: #fff; padding: 16px 16px 12px; }
      .fp-body { padding: 0; }
      .fp-split-list { padding: 12px 12px 28px; background: transparent; }
      /* !important: the mobile board CSS re-tints .column at higher
         specificity; on this page the phone is the only container. */
      .fp-split-list .column { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0; }
      .fp-split-list .column-header { background: transparent; border: none; box-shadow: none; padding: 2px 4px 8px; }
      .fp-split-list .column-body { background: transparent; padding: 0; }
      .fp-foot { border-top: none; background: transparent; }

      /* An open chat IS the page — no card chrome, no masthead, no
         footer, edge to edge, like the app's own mobile rooms. The only
         chrome is a floating ‹ back to the product list. */
      #factoryPortalView.fp-chat-open { overflow: hidden; }
      #factoryPortalView.fp-chat-open .fp-wrap { max-width: none; padding: 0; height: 100dvh; }
      #factoryPortalView.fp-chat-open .fp-card {
        border: none; border-radius: 0; box-shadow: none; margin: 0;
        height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
      }
      #factoryPortalView.fp-chat-open .fp-head,
      #factoryPortalView.fp-chat-open .fp-foot { display: none; }
      #factoryPortalView.fp-chat-open .fp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
      #factoryPortalView.fp-chat-open .fp-split-panes { flex: 1; min-height: 0; display: flex; }
      #factoryPortalView.fp-chat-open .fp-split-chat { min-height: 0; }
      #factoryPortalView.fp-chat-open .fp-chat-head {
        position: absolute; top: 10px; left: 10px; right: 10px; z-index: 30;
        padding: 0; border: none; background: transparent; gap: 8px;
      }
      /* The product name rides beside the arrow in its own floating
         pill, so you always know which room you're in. */
      #factoryPortalView.fp-chat-open .fp-chat-title {
        flex: 0 1 auto; display: flex; align-items: center; gap: 8px;
        background: #fff; border: 1px solid #e5e5e0;
        border-radius: 999px; box-shadow: 0 2px 10px rgba(20, 18, 12, 0.12);
        height: 40px; box-sizing: border-box; padding: 0 14px 0 6px; font-size: 14px;
      }
      #factoryPortalView.fp-chat-open .fp-chat-thumb {
        width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
        border: 1px solid #eeeeea; background: #f4f4f1;
      }
      #factoryPortalView.fp-chat-open .fp-chat-title:not(:has(.fp-chat-thumb)) { padding-left: 14px; }
      #factoryPortalView.fp-chat-open #fpChatChip { display: none; }
      #factoryPortalView.fp-chat-open #fpChatBack {
        width: 40px; height: 40px; border-radius: 50%;
        background: #fff; border: 1px solid #e5e5e0;
        box-shadow: 0 2px 10px rgba(20, 18, 12, 0.16);
        font-size: 21px; display: flex; align-items: center; justify-content: center;
      }
      #factoryPortalView.fp-chat-open .fp-chat-scroll { padding-top: 60px; }
    }
    .fp-sec-head { position: sticky; top: 0; z-index: 5; margin: 0 -16px 10px; padding: 8px 16px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .fp-sec { padding-bottom: 8px; }
    .fp-msg { display: flex; gap: 8px; max-width: 86%; margin-bottom: 9px; }
    .fp-msg .fw { font-size: 10.5px; font-weight: 600; color: #9ca3af; margin-bottom: 2px; }
    .fp-msg .fb { background: #f0f0ed; border-radius: 4px 13px 13px 13px; padding: 8px 12px; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
    .fp-msg.mine { margin-left: auto; flex-direction: row-reverse; }
    .fp-msg.mine .fb { background: #16181d; color: #f5f5f3; border-radius: 13px 4px 13px 13px; }
    .fp-msg .fb img { max-width: 200px; border-radius: 8px; display: block; margin-top: 6px; }
    .fp-event { border: 1px dashed #d1d5db; border-radius: 11px; padding: 8px 12px; font-size: 12px; color: #4b5563; margin-bottom: 9px; }
    .fp-marker { text-align: center; margin: 6px 0; }
    .fp-marker span { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: #f3f4f6; color: #4b5563; display: inline-block; }
    .fp-sub { border: 2px solid #2563eb; border-radius: 13px; padding: 10px 13px; margin-bottom: 9px; background: #fff; font-size: 13px; }

    /* ── Owner-side factory tab (product room 🏭 tabs) ─────────────── */
    #pdFactoryPanel { display: flex; flex-direction: column; min-height: 0; }
    .pdf-head {
      flex: none; padding: 10px 16px; font-size: 12.5px; color: var(--text-secondary);
      background: var(--bg-subtle, #f6f5f2); border-bottom: 1px solid var(--border-light);
    }
    .pdf-head-note { margin-left: 8px; color: var(--text-muted); font-size: 11px; }
    .pdf-items { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 10px; }
    .pdf-msg { display: flex; margin-bottom: 10px; }
    .pdf-msg.mine { justify-content: flex-end; }
    .pdf-bubble {
      max-width: 78%; background: var(--bg-white); border: 1px solid var(--border-light);
      border-radius: 12px; padding: 8px 12px; font-size: 13.5px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .pdf-msg.mine .pdf-bubble { background: var(--bg-subtle, #f2f4f8); }
    .pdf-who { font-size: 11.5px; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
    .pdf-when { margin-left: 8px; font-weight: 400; color: var(--text-muted); font-size: 10.5px; }
    .pdf-event { text-align: center; margin: 12px 0; }
    .pdf-event span {
      font-size: 12px; color: var(--text-muted); background: var(--bg-subtle, #f6f5f2);
      border-radius: 999px; padding: 4px 12px;
    }
    .pdf-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 30px 16px; }
    /* Pending-attachment strip above the factory-tab composer. */
    .pdf-attach-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 0; background: #fff; border-top: 1px solid #eeeeea; }
    .pdf-att { position: relative; display: inline-flex; align-items: center; }
    .pdf-att img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e5e0; }
    .pdf-att-file { font-size: 12px; background: #f4f4f1; border: 1px solid #e5e5e0; border-radius: 8px; padding: 6px 26px 6px 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pdf-att.uploading img { opacity: 0.45; }
    .pdf-att-pct { position: absolute; inset: auto 0 2px 0; text-align: center; font-size: 10px; font-weight: 700; color: #16181d; }
    .pdf-att-file .pdf-att-pct { position: static; margin-left: 6px; }
    .pdf-att button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #16181d; color: #fff; font-size: 10px; line-height: 1; cursor: pointer; }
    .pdf-att-file button { top: 50%; right: 4px; transform: translateY(-50%); background: transparent; color: #6b7280; }
    .pdf-composer {
      flex: none; display: flex; gap: 8px; padding: 10px 14px;
      border-top: 1px solid var(--border-light); background: var(--bg-white);
    }
    .pdf-composer input {
      flex: 1; min-width: 0; border: 1px solid var(--border-default); border-radius: 999px;
      padding: 9px 14px; font: inherit; font-size: 14px; background: var(--bg-subtle, #fafaf8);
    }
    .fp-sub.approved { border-color: #1a9a4c; }
    .fp-sub.rejected { border-color: #d1d5db; opacity: .88; }
    .fp-sub .fs-status { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #fcefd4; color: #8a5a0b; }
    .fp-sub.approved .fs-status { background: #ddf2e2; color: #17703a; }
    .fp-sub.rejected .fs-status { background: #f3f4f6; color: #9ca3af; }
    .fp-composer { border-top: 1px solid #e3e3df; padding: 10px 14px 12px; }
    .fp-composer-row { display: flex; align-items: flex-end; gap: 8px; }
    .fp-composer textarea { flex: 1; font: inherit; font-size: 14px; border: 1px solid #d2d2cc; border-radius: 14px; padding: 9px 13px; resize: none; max-height: 110px; }
    .fp-composer .fp-input { flex: 1; min-width: 0; font: inherit; font-size: 14px; line-height: 1.4; border: 1px solid #d2d2cc; border-radius: 14px; padding: 9px 13px; min-height: 38px; max-height: 160px; overflow-y: auto; outline: none; background: #fff; }
    .fp-composer .fp-input:focus { border-color: #9a9892; }
    .fp-composer .fp-input:empty::before { content: attr(data-placeholder); color: #9a9892; pointer-events: none; }
    .fp-composer .fp-input ul, .fp-composer .fp-input ol { padding-left: 20px; margin: 2px 0; }
    .fp-composer .fp-toolbar { display: flex; margin-bottom: 6px; }
    .fp-icon-btn { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 8px 6px; }
    .fp-send-btn { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; background: #16181d; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .fp-submit-btn { margin-top: 10px; width: 100%; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 11px; border-radius: 10px; border: none; background: #db2777; color: #fff; }
    .fp-attach-preview { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
    .fp-attach-preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid #e3e3df; }
    .fp-foot { padding: 10px; text-align: center; font-size: 11px; color: #b4b2a9; border-top: 1px solid #eeeeea; }

  
/* PD shared-collection guest view: read + chat, owner chrome hidden.
   The eye and isolate stay — they're personal VIEW controls (what do I
   want on my screen), not edits; a guest's toggles persist locally and
   never touch the owner's data. */
body.pd-guest #pdBoardView .card-move-btn,
body.pd-guest #pdBoardView .col-add-btn { display: none !important; }
/* …except the Production collapse toggle: collapsing a column is a
   personal view control, same as the eye and isolate. */
body.pd-guest #pdBoardView #pdShippedToggle { display: inline-flex !important; }
/* Editors and admins are working members, not spectators: they move
   products between stages and add products — the server rules already
   allow exactly that, only this chrome was hiding it. Viewers stay
   read-and-chat. */
body.pd-guest.pd-role-editor #pdBoardView .card-move-btn,
body.pd-guest.pd-role-admin #pdBoardView .card-move-btn,
body.pd-guest.pd-role-editor #pdBoardView #pdNewBtn,
body.pd-guest.pd-role-admin #pdBoardView #pdNewBtn { display: inline-flex !important; }
/* NOT #pdAddProjBtn: a new COLLECTION is board structure, which still
   lives in the owner's profile doc — a member's save would silently
   vanish. That one stays owner-only until structure moves server-side. */
/* Viewers: no product chrome, no ceremony controls. Editors: no approve. */
body.pd-role-viewer #pdBoardView .pd-card-menu,
body.pd-role-viewer #pdBoardView .pd-add-row,
body.pd-role-viewer #submitForReviewBtn,
body.pd-role-viewer .pd-sh-btn,
body.pd-role-editor .pd-sh-btn.approve { display: none !important; }
.pdm-role { font: inherit; font-size: 12px; padding: 3px 6px; }
.pdm-new-role { font: inherit; font-size: 13px; padding: 6px 8px; }
.pdm-role-help { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.pdm-pending .pdm-who { opacity: 0.7; }
.pd-shared-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; padding: 12px 14px 4px; }
.pd-shared-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: calc(100% - 12px); margin: 2px 6px; padding: 7px 9px; border: none; border-radius: 7px; background: rgba(255,255,255,0.06); color: inherit; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.pd-shared-item:hover { background: rgba(255,255,255,0.12); }
.pd-shared-item span { font-size: 10.5px; opacity: 0.55; }
.pdm-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.pdm-who { font-weight: 600; font-size: 13px; }
.pdm-mail { flex: 1; font-size: 12px; color: var(--text-muted); }

.pds-photo-row { display: flex; gap: 12px; align-items: center; }
.pds-photo-preview { width: 120px; height: 56px; border-radius: 8px; background: var(--bg-subtle, #f3f1ec) center/cover no-repeat; border: 1px solid var(--border-light); }

.pdpj-members-link { border: none; background: none; font: inherit; font-size: 11px; font-weight: 600; color: var(--accent, #1E3A5F); cursor: pointer; padding: 0 0 0 8px; text-transform: none; letter-spacing: normal; }
.pdpj-members-link:hover { text-decoration: underline; }

/* Drop target highlight while dragging files over a discussion. */
#pdRoomOverlay.pd-droppable .pd-room,
#pdProjOverlay.pd-droppable .modal-content,
#pdProjOverlay.pd-droppable > div { outline: 2px dashed var(--accent, #1E3A5F); outline-offset: -8px; }
#pdRoomOverlay.pd-droppable::after, #pdProjOverlay.pd-droppable::after {
  content: 'Drop to attach'; position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  background: var(--accent, #1E3A5F); color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 999px; z-index: 4000; pointer-events: none;
}

.pdm-viaboard { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; padding: 3px 8px; background: var(--bg-subtle, #f3f1ec); border-radius: 999px; }

.pdm-sec-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-primary); margin-bottom: 4px; }
.pdm-sec-sub { font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--text-muted); }
.pdm-avatar { flex: none; display: inline-flex; }

/* Product room members: uniform chips — avatar beside first name. */
.pd-member-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 4px 0; vertical-align: middle; }
.pd-member-chip .avatar { flex: none; }
.pd-member-chip-name { font-weight: 600; font-size: 13px; }

/* PD ceremony pills — outlined, uppercase, per the reference. */
.card-status-pill {
  display: inline-block; padding: 4px 10px; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.3; border: 1.5px solid currentColor;
}
.card-status-pill.is-submitted { color: #D93A35; }
.card-status-pill.is-revision { color: #3B9EFF; }
.card-footer-due { margin-left: auto; margin-right: 8px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.card-footer-due + .card-moves { margin-left: 0; }

/* Overdue is a quiet word, not an alarm — 25% opacity, deliberately. */
.card-status-pill.is-overdue { color: #D93A35; opacity: 0.25; }
.card-status-pill.is-delivered { color: #2E7D4F; }
.card-status-pill.is-transit { color: #5B7A99; }
/* Factory portal: unread activity — filled, so it reads before the rest. */
.card-status-pill.is-new { color: #fff; background: #D93A35; border-color: #D93A35; }
.card-status-pill.is-sampling { color: #be185d; }
.card-status-pill.is-progress { color: var(--text-muted, #8a8578); border-color: currentColor; opacity: 0.85; }

/* PDF viewer zoom */
.pdf-zoom-ctrls { display: flex; align-items: center; gap: 2px; margin-right: 10px; }
.pdf-zoom-ctrls button { border: 1px solid var(--border-default); background: var(--bg-white); border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; padding: 3px 9px; }
.pdf-zoom-ctrls button:hover { background: var(--bg-hover); }
#pdfZoomLabel { min-width: 52px; font-size: 12px; color: var(--text-secondary); }
/* Zoomed: lift the fit clamps so the canvas can exceed the stage and scroll. */
#pdfViewer.zoomed #pdfViewerStage { align-items: flex-start; justify-content: flex-start; }
#pdfViewer.zoomed #pdfViewerStageInner { max-width: none; max-height: none; }
#pdfViewer.zoomed #pdfViewerCanvas, #pdfViewer.zoomed .pdfViewerPageCanvas { max-width: none; }

    /* ═══════════════ Email workspace ═══════════════
       Everything below is email-only. The board, columns, cards, windows
       and composer are the universal ones; these rules add what a
       conversation needs that a task, invoice or product does not. */
    .em-board-card .inv-board-card-banner { background: #e3ecf5; color: #1E3A5F; }

    /* Thread cards: sender under the subject, a two-line snippet in the body. */
    .em-who { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
    .em-draft-flag { color: #b3261e; }
    .card.has-unread .em-who { font-weight: 600; color: var(--text-primary); }
    .em-inbox-who { font-size: 13px; color: var(--text-secondary); }
    .em-inbox-row.is-unread .em-inbox-who, .em-inbox-row.is-unread .em-inbox-subj { font-weight: 700; color: var(--text-primary); }
    .em-inbox-subj { color: var(--text-primary); }
    .em-from { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .em-who .em-count, .em-inbox-who .em-count, .em-from .em-count {
      flex: none; font-size: 10px; font-weight: 700; line-height: 1;
      padding: 3px 5px; border-radius: 999px;
      background: var(--wash-ink, rgba(32,29,27,.07)); color: var(--text-secondary);
    }
    .em-snippet {
      font-size: 12px; line-height: 1.4; color: var(--text-lighter);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      overflow-wrap: anywhere;
    }
    .card-status-pill.is-draft { color: #5B7A99; }
    .em-empty { padding: 14px 10px; font-size: 12px; color: var(--text-lighter); text-align: center; }
    #emailBoardView .column.pd-cross-hover { outline: 2px solid var(--accent, #1E3A5F); outline-offset: -2px; }

    /* Toast: one line at the bottom, briefly. */
    .em-toast {
      position: fixed; z-index: 400; bottom: 84px; left: 50%; transform: translateX(-50%);
      max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px;
      background: #173f35; color: #fff; font-size: 13.5px; line-height: 1.4;
      box-shadow: 0 6px 22px rgba(0,0,0,.22); overflow-wrap: anywhere;
    }
    .em-toast.is-error { background: #8c302a; }

    /* Account window. */
    .em-acct { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding: 0 28px 24px; }
    .em-acct-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
    .em-acct-cell {
      background: var(--surface, var(--bg-white)); border: 1px solid var(--hairline, var(--border-light));
      border-radius: var(--radius, 10px); padding: 12px 14px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .em-acct-cell .pd-mini-label {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-primary);
    }
    .em-acct-status { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
    .em-acct-status .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #b0b0ab; vertical-align: middle; }
    .em-acct-status .dot.on { background: #2E7D4F; }
    .em-acct-status .dot.err { background: #D93A35; }
    .em-acct-status .dot.busy { background: #A8841C; }
    .em-acct-btns { display: flex; flex-wrap: wrap; gap: 6px; }
    .em-mode label { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; cursor: pointer; font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
    .em-mode label input { margin-top: 3px; accent-color: var(--accent); }
    .em-mode label b { display: block; color: var(--text-primary); font-size: 13px; }
    .em-mode label.is-locked { opacity: .5; cursor: not-allowed; }
    .em-acct-counts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 12px; font-size: 12.5px; color: var(--text-secondary); }
    .em-acct-counts b { color: var(--text-primary); font-weight: 600; }
    .em-danger { color: #b33 !important; }
    .em-inbox-wrap { display: flex; flex-direction: column; min-height: 0; }
    .em-inbox { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--hairline, var(--border-light)); border-radius: var(--radius, 10px); background: var(--surface, var(--bg-white)); }
    .em-inbox-row {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
      padding: 10px 14px; border-bottom: 1px solid var(--border-light); cursor: pointer;
    }
    .em-inbox-row:hover { background: var(--bg-hover, rgba(0,0,0,.03)); }
    .em-inbox-row:last-child { border-bottom: 0; }
    .em-inbox-subject { font-size: 13.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .em-inbox-row.is-unread .em-inbox-subject { font-weight: 700; }
    .em-inbox-from { font-size: 12px; color: var(--text-lighter); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .em-inbox-date { grid-column: 2; grid-row: 1; font-size: 11.5px; color: var(--text-lighter); white-space: nowrap; }
    .em-chip {
      grid-column: 2; grid-row: 2; justify-self: end;
      font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
      padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.4; white-space: nowrap;
    }
    .em-chip.is-none { color: var(--text-lighter); border-style: dashed; }
    .em-inbox .em-empty { padding: 28px 12px; }
    .em-snoozed-wrap { margin-bottom: 14px; }
    .em-snoozed { max-height: 220px; }
    .em-chip.em-wake { cursor: pointer; background: none; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .em-status input[type="datetime-local"] { font: inherit; font-size: 13px; padding: 6px 8px; }

    /* Conversation window. */
    .em-thread-head { gap: 16px; }
    .em-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; }
    .em-actions .wp-btn { text-decoration: none; }
    .em-status {
      margin: 0 0 4px; padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.45;
      background: #eef3f9; color: #172f5c; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    }
    .em-mode-note { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, #A8841C 9%, var(--bg-white)); margin-bottom: 4px; }
    .em-mode-note[hidden] { display: none; }
    .em-mode-note b { color: #A8841C; }
    .em-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, #1E3A5F); text-decoration: underline; cursor: pointer; }
    .em-actions .wp-btn.is-off { opacity: .45; }
    .em-status[hidden] { display: none; }
    .em-status.is-error { background: #fbe9e7; color: #8c302a; }
    .em-status.is-confirm { background: #fff0e8; color: #6b3627; }
    .em-status > span { flex-basis: 100%; }
    .em-status a { color: inherit; font-weight: 600; }
    .em-status .wp-btn { font-size: 12.5px; }
    .em-status .wp-btn.is-danger { background: #9e3f3a; border-color: #9e3f3a; color: #fff; }
    /* The conversation reads like mail at every width: full-width rows
       under hairlines, avatar beside name and time, the body running the
       full width beneath. The body dissolves into the grid for that. */
    .em-thread .messages { padding: 0 !important; gap: 0 !important; background: var(--surface, var(--bg-white)) !important; }
    .em-thread .em-msg {
      display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start;
      background: none !important; border: 0; border-radius: 0; border-top: 1px solid var(--rule, var(--border-light));
      padding: 12px 18px 14px; max-width: none; box-shadow: none;
    }
    .em-thread .em-msg:first-child { border-top: 0; }
    .em-thread .em-msg .avatar { width: 36px !important; height: 36px !important; font-size: 13px !important; grid-column: 1; grid-row: 1; }
    .em-thread .em-msg .message-body { display: contents; }
    .em-thread .em-msg .message-body > * { grid-column: 2; min-width: 0; }
    .em-thread .em-msg .message-author { font-size: 14px; font-weight: 600; }
    .em-thread .em-msg .message-time { font-size: 12px; }
    .em-thread .em-msg .message-text,
    .em-thread .em-msg .em-msg-attachments { grid-column: 1 / -1; margin-top: 6px; }
    .em-thread .em-msg .message-text { font-size: 14px; }
    .em-thread .em-frame { border-radius: 0; }
    /* Collapsed message: one line of preview, nothing else. */
    .em-msg .em-msg-preview { display: none; font-size: 12.5px; color: var(--text-lighter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .em-msg.is-collapsed .em-msg-preview { display: block; }
    .em-msg.is-collapsed .message-text,
    .em-msg.is-collapsed .em-msg-to,
    .em-msg.is-collapsed .em-msg-details,
    .em-msg.is-collapsed .em-msg-attachments { display: none; }
    .em-msg .message-meta { cursor: pointer; }
    .em-msg-to { background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px; color: var(--text-lighter); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; margin-bottom: 4px; }
    .em-msg-to .chev { font-size: 9px; }
    .em-msg-to.is-open .chev { transform: rotate(180deg); }
    .em-msg-details { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin: 2px 0 8px; overflow-wrap: anywhere; }
    .em-msg-details b { color: var(--text-primary); font-weight: 600; }
    .em-msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .em-msg-attachments .em-attachment { max-width: 240px; }
    .em-mobile-head, .em-draft-row, .em-mobile-bar { display: none; }
    .em-thread .message.is-own { background: color-mix(in srgb, var(--accent, #1E3A5F) 8%, var(--bg-subtle, #f5f3ef)); }
    .em-msg-to { font-size: 11px; color: var(--text-lighter); margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .em-frame { display: block; width: 100%; border: 0; background: #fff; border-radius: 8px; min-height: 60px; }
    .em-text { white-space: pre-wrap; overflow-wrap: anywhere; }
    .em-msg-toggle { background: none; border: 0; padding: 0; margin-top: 6px; font: inherit; font-size: 11.5px; color: var(--text-lighter); cursor: pointer; }
    .em-msg-toggle:hover { color: var(--accent); }
    .em-fold { flex: none; }
    .em-fold .em-fold-head { width: 100%; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; justify-content: space-between; }
    .em-fold-chev { font-size: 11px; color: var(--text-lighter); transition: transform .15s ease; }
    .em-fold.is-folded .em-fold-chev { transform: rotate(-90deg); }
    .em-fold.is-folded .em-fold-body { display: none; }
    .em-fold-count { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-lighter); margin-left: 2px; }
    .em-details { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin-top: 6px; overflow-wrap: anywhere; }
    .em-details b { color: var(--text-primary); font-weight: 600; }
    .em-details .em-label-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
    .em-details .em-label-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .em-attachments { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
    .em-attachment {
      display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
      border: 1px solid var(--hairline, var(--border-light)); background: var(--surface, var(--bg-white));
      font: inherit; font-size: 12.5px; color: var(--text-primary); cursor: pointer; text-align: left; min-width: 0;
    }
    .em-attachment:hover { border-color: var(--accent); }
    .em-attachment .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .em-attachment .size { flex: none; font-size: 11px; color: var(--text-lighter); }
    .em-composer { margin: 0 16px 16px; flex-shrink: 0; }
    .em-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 0; }
    .em-draft-head .pd-mini-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-primary); }
    .em-draft-state { font-size: 11.5px; color: var(--text-lighter); }
    .em-draft-state.is-ok { color: #2E7D4F; }
    .em-draft-state.is-busy { color: #A8841C; }
    #emtReplyInput { white-space: pre-wrap; min-height: 72px; }
    .em-composer.is-locked #emtReplyInput { opacity: .6; }

    /* The conversation's assistant: a cell in the side column that takes
       the remaining height; its thread scrolls, its composer is pinned. */
    .em-agent { flex: 1; min-height: 260px; display: flex; flex-direction: column; padding: 10px 12px 10px; }
    .em-agent .pd-cell-head { flex: none; }
    .em-agent-state { font-size: 11px; color: var(--text-lighter); margin-left: auto; }
    .em-agent-close { display: none !important; }
    .em-agent .em-agent-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; gap: 10px; }
    /* Flat: full-width rows divided by hairlines, no bubbles, no avatars.
       A small label says who is speaking; a proposal is set apart by a
       rule above and its button, not by a box inside a box. */
    .em-agent .em-agent-thread { gap: 0; padding: 0; justify-content: flex-start; }
    .em-agent .em-agent-thread > :first-child { margin-top: 0 !important; }
    .em-agent .message { display: block; background: none !important; border: 0; border-radius: 0; border-bottom: 1px solid var(--border-light); padding: 10px 2px 12px; max-width: none; }
    .em-agent .message:last-child { border-bottom: 0; }
    .em-agent .message .avatar { display: none; }
    .em-agent .message.is-mine { align-self: auto; flex-direction: row; }
    .em-agent .message.is-mine::before { content: 'You'; display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lighter); margin-bottom: 3px; }
    .em-agent .message-body { min-width: 0; }
    .em-agent .message-meta { margin-bottom: 3px; }
    .em-agent .message-author { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lighter); }
    .em-agent .message-text { font-size: 13px; line-height: 1.5; }
    .em-agent-proposal {
      margin-top: 8px; padding: 8px 0 0; border-top: 1px solid var(--border-light); font-size: 13px; line-height: 1.5;
      white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary);
    }
    .em-use-reply { margin-top: 8px; font-size: 12px; padding: 6px 10px; }
    .em-act { display: block; margin-right: 6px; }
    .em-act.is-done { background: #2E7D4F; border-color: #2E7D4F; }
    .em-agent-composer { flex: none; display: flex; align-items: flex-end; gap: 8px; border-top: 1px solid var(--border-light); padding-top: 8px; }
    .em-agent-composer .message-input { flex: 1; min-height: 36px; max-height: 120px; overflow-y: auto; font-size: 12.5px; }
    .em-thread { position: relative; }
    .em-agent-fab {
      display: none; position: absolute; right: 16px; bottom: 96px; z-index: 6;
      width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
      background: var(--accent, #1E3A5F); color: #fff; align-items: center; justify-content: center;
      box-shadow: 0 6px 20px rgba(0,0,0,.25);
    }
    .em-agent-fab-badge { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #A8841C; border: 2px solid #fff; }
    .em-agent-fab-badge[hidden] { display: none; }

    @media (max-width: 768px) {
      /* Phone: the side column is normally hidden inside the room; for
         Email it becomes the assistant's sheet, slid up by the bubble. */
      .pd-room.em-thread .pd-room-side {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 86dvh; z-index: 650;
        transform: translateY(102%); transition: transform .25s ease;
        background: var(--panel, var(--bg-white)); border-radius: 16px 16px 0 0; padding: 14px 10px 10px;
        box-shadow: 0 -8px 30px rgba(0,0,0,.28); overflow: hidden;
      }
      .pd-room.em-thread .pd-room-side::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--border-default, #ccc); }
      .pd-room.em-thread .pd-room-side.open { transform: none; }
      .pd-room.em-thread .pd-room-side .pd-cell:not(.em-agent) { display: none; }
      .pd-room.em-thread .em-agent { min-height: 0; height: 100%; }
      .pd-room.em-thread .em-agent-close { display: inline !important; margin-left: 8px; }
      .pd-room.em-thread .em-agent-fab { display: flex; }

      /* ── The phone conversation reads like a mail app, not a chat ──
         The same DOM the desktop room renders as bubbles: here every
         message is a full-width row under a hairline, the newest open,
         the rest folded to a preview line, subject at the top, actions
         behind ⋯, reply on demand. */
      .pd-room.em-thread .pd-room-head, .pd-room.em-thread .em-actions { display: none; }
      /* Mail headers carry the subject, not an avatar. */
      .pd-room.em-thread .chat-head__mark, .em-acct-modal .chat-head__mark { display: none; }
      .pd-room.em-thread .pd-thread { background: var(--surface, var(--bg-white)); }
      .pd-room.em-thread .chat-head__text { visibility: hidden; }
      .em-mobile-head { display: block; padding: 14px 16px 12px; }
      .em-mobile-subject { display: block; font-family: var(--font-heading); font-size: 21px; line-height: 1.25; color: var(--text-primary); overflow-wrap: anywhere; }
      .em-mobile-sub { font-size: 12.5px; color: var(--text-lighter); margin-top: 4px; }
      /* Inside the sheet the cell is the sheet: no card within a card. */
      .pd-room.em-thread .em-agent { padding: 6px 14px 10px; background: none; border: 0; box-shadow: none; border-radius: 0; }
      .pd-room.em-thread .pd-room-side { background: var(--surface, var(--bg-white)); }
      .pd-room.em-thread .em-agent .pd-cell-head { padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
      .pd-room.em-thread .em-msg { padding: 12px 16px 14px; }
      .pd-room.em-thread .em-msg .message-author { font-size: 15px; }
      .pd-room.em-thread .em-msg .em-msg-preview { font-size: 14px; }
      .pd-room.em-thread .em-msg .message-text { font-size: 15px; }
      .pd-room.em-thread .em-msg-attachments .em-attachment { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; min-width: 150px; max-width: 220px; border-radius: 10px; }
      .em-draft-row {
        display: flex; width: 100%; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-top: 1px solid var(--rule, var(--border-light));
        background: none; font: inherit; text-align: left; cursor: pointer;
      }
      .em-draft-row[hidden] { display: none; }
      .em-draft-row-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-default, #ccc); display: flex; align-items: center; justify-content: center; color: var(--text-lighter); flex: none; }
      .em-draft-row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
      .em-draft-row-label { color: #b3261e; font-weight: 600; font-size: 15px; }
      .em-draft-row-preview { font-size: 14px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .em-mobile-bar { display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule, var(--border-light)); background: var(--surface, var(--bg-white)); flex: none; }
      .em-mobile-bar .wp-btn { border-radius: 999px; padding: 10px 18px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
      /* Reply on demand: the universal chat bar forces every composer
         visible on a phone; the mail reader shows it only after Reply. */
      .pd-room.em-thread .em-composer:not(.is-open) { display: none !important; }
      .pd-room.em-thread .em-composer.is-open { display: flex !important; }
      .pd-room.em-thread .em-composer .em-draft-head, .pd-room.em-thread .em-composer .em-draft-note { flex-basis: 100%; }
      .pd-room.em-thread .em-composer .send-btn { display: flex !important; order: 4; }
      .pd-room.em-thread .em-composer #emtSaveDraftBtn { display: inline-flex !important; order: 3; margin-left: auto; font-size: 13px; }
      .pd-room.em-thread .em-composer.is-open ~ .em-mobile-bar, .pd-room.em-thread .em-mobile-bar:has(+ .em-composer.is-open) { display: none; }

      /* The reading header carries the actions, like Gmail: back on the
         left, the common three plus overflow on the right, subject in
         the body below. The empty middle was doing nothing. */
      .pd-room.em-thread .chat-head { padding: 4px 6px; gap: 2px; }
      .pd-room.em-thread .chat-head__text { display: none; }
      .em-head-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
      .pd-room.em-thread .em-head-acts .chat-head__act {
        width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
        border: 0; background: none; color: var(--text-primary); border-radius: 50%; cursor: pointer;
      }
      .pd-room.em-thread .em-head-acts .chat-head__act:active { background: rgba(0,0,0,.07); }

      /* Gmail's overflow sheet: big taps, hairlines between rows, a
         heavier rule between groups, destructive last and in red. */
      .card-dropdown.em-sheet-menu {
        min-width: 58vw; max-width: 84vw; padding: 0; overflow: hidden;
        border: 0; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.28);
      }
      .card-dropdown.em-sheet-menu .card-dropdown-action {
        padding: 15px 20px; font-size: 16px; line-height: 1.25;
        border-top: 1px solid var(--border-light);
      }
      .card-dropdown.em-sheet-menu .card-dropdown-action:first-child { border-top: 0; }
      .card-dropdown.em-sheet-menu .card-dropdown-action:active { background: var(--bg-hover, rgba(0,0,0,.05)); }
      .card-dropdown.em-sheet-menu .card-dropdown-action.is-danger { color: #d93025; }
      .card-dropdown.em-sheet-menu .card-dropdown-divider {
        margin: 0; border: 0; border-top: 6px solid var(--bg-subtle, #f1f0ec);
      }

      /* The reply box is a mail compose field, not a chat bubble. The
         universal composer styles .message-input as a 20px-radius pill
         sized from zero, which turned a paragraph into an oval. */
      .pd-room.em-thread .em-composer { flex-wrap: wrap; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
      .pd-room.em-thread .em-composer #emtReplyInput {
        flex: 1 1 100%; width: auto; order: 2;
        padding: 12px 14px; min-height: 96px; max-height: 40vh; overflow-y: auto;
        border: 1px solid var(--border-default); border-radius: 10px; box-shadow: none;
        font-size: 15px; line-height: 1.45;
      }
      /* The assistant bubble floats over the composer's send button, so
         it stands down while a reply is open. */
      .pd-room.em-thread:has(.em-composer.is-open) .em-agent-fab,
      .pd-room.em-thread.is-replying .em-agent-fab { display: none !important; }
    }

    @media (max-width: 760px) {
      .em-acct { grid-template-columns: 1fr; padding: 0 12px 16px; }
      .em-acct-side { overflow: visible; }
      .em-inbox-wrap { min-height: 50vh; }
      .em-actions { justify-content: flex-start; }
      .em-thread-head { flex-wrap: wrap; }
    }