/**
 * LifeOS — Communications Module (shared base styles)
 *
 * Loaded unconditionally via app.html alongside two platform-specific sheets:
 *   - css/communications.desktop.css  (media: min-width 901px)
 *   - css/communications.mobile.css   (media: max-width 900px)
 *
 * Brand tokens come from css/app.css :root — never hardcoded literals.
 * Migrated from css/app.css 2026-05-09 per docs/ui-platform-convention.md.
 *
 * Visibility contract (Option B always-render-both-toolbar-slots):
 *   - This sheet is NEUTRAL on .comm-page-actions and .comm-mobile-actions display.
 *   - communications.desktop.css hides .comm-mobile-actions.
 *   - communications.mobile.css hides .comm-page-actions.
 */

/* ─── Inbox layout: filter bar + row list ─────────────────────────────── */
.comm-filter-bar { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.comm-inbox { display: flex; flex-direction: column; gap: 8px; }
.comm-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: var(--sp-3) var(--sp-3) var(--sp-5);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.comm-row:hover { border-color: var(--accent); transform: translateX(2px); }
/* Keyboard focus ring — j/k navigation highlights the active row. */
.comm-row.key-focused { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.comm-row-acct-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Account chip — per-row badge showing which Gmail account the message
   arrived in. Only renders when the Account filter is set to "All" and
   there are multiple accounts connected. One letter + account color. */
.comm-row-acct-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; font-size: 11px; font-weight: 800;
  flex-shrink: 0; line-height: 1;
}

/* Reserved slot — same footprint as a .btn-icon so when an optional
   per-row action (unsubscribe, expand-thread) is absent, adjacent buttons
   don't reflow. Keeps archive/reply/etc. pinned to the same x-position
   across every row so the user can triage down the list without mis-taps. */
.comm-action-slot-reserved {
  display: inline-block; width: 38px; height: 38px; flex-shrink: 0;
  pointer-events: none;
}

/* Priority pill becomes a button — click opens per-sender priority override.
   Override the default button chrome to keep the existing pill look. */
.priority-pill { border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: transform .12s; }
.priority-pill:hover { transform: scale(1.08); }
.priority-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Toolbar slot layout — Option B always-render-both, visibility owned by
   per-platform sheets. */
.comm-page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Toolbar buttons are pills — consistent shape for Compose / Bulk / Sync Now.
   Sync Now stays accent-filled (the primary action); Compose + Bulk are
   outline pills (same shape, lower visual weight). */
.btn.comm-toolbar-btn {
  /* Use inline-flex with center-center so the label sits in the geometric
     middle of the pill regardless of label length. The Pacific .btn default
     padding (10px 18px) was centering visually off because it didn't
     enforce content alignment. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 18px;
  border: 1px solid var(--accent);
  background: var(--accent-dim);   /* tinted shade so Compose/Bulk read as filled-light pills */
  color: var(--accent);
  font-weight: 600;
}
.btn.comm-toolbar-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}
.btn.comm-toolbar-btn.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn.comm-toolbar-btn.btn-accent:hover {
  background: var(--accent);
  filter: brightness(1.08);
}
.btn.comm-toolbar-btn.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
/* The keyboard-shortcut icon button stays compact (no fill / no label).
   NB: selector renamed from #comm-shortcuts-btn to .js-comm-shortcuts-btn as
   part of the Option B duplicate-id refactor (both desktop + mobile slots
   render the button). */
.js-comm-shortcuts-btn {
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 7px 10px;
}
.js-comm-shortcuts-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

/* Communications secondary toolbar — account filter + sort dropdown + small
   chips showing which accounts are connected. */
.comm-toolbar-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.comm-toolbar-control { display: flex; align-items: center; gap: var(--sp-2); }
.comm-toolbar-lbl { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.comm-toolbar-control .form-control-sm { width: auto; min-width: 160px; }
.comm-accounts-summary { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: auto; flex-wrap: wrap; }
.comm-account-chip { padding: 2px var(--sp-2); border-radius: 10px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }

.comm-thread-summary-pill { display: inline-block; padding: 1px var(--sp-1); background: var(--accent-dim); color: var(--accent); border-radius: 4px; font-size: var(--fs-xxs); font-weight: 700; margin-right: var(--sp-1); vertical-align: middle; }

/* Split Inbox lane bar — scrollable horizontal row above the filter chips. */
.comm-lane-bar { display: flex; align-items: center; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: none; }
.comm-lane-bar::-webkit-scrollbar { display: none; }
.comm-lane { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: var(--fs-md); white-space: nowrap; flex-shrink: 0; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.comm-lane:hover { color: var(--text); border-color: var(--border-2); }
.comm-lane.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.comm-lane-icon { font-size: var(--fs-base); }
.comm-lane-name { }
.comm-lane-count { font-size: var(--fs-xs); background: var(--border); color: var(--text-muted); padding: 1px var(--sp-2); border-radius: 10px; font-weight: 700; min-width: 20px; text-align: center; }
.comm-lane.selected .comm-lane-count { background: var(--accent); color: #fff; }
.comm-lane-add, .comm-lane-edit { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; flex-shrink: 0; font-size: var(--fs-base); transition: all .15s; -webkit-tap-highlight-color: transparent; }
.comm-lane-add:hover, .comm-lane-edit:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }

/* AI search / QA row — single input ('Ask about your inbox…'). Press / to
   focus, Enter to submit, Esc to clear. Server decides search vs QA from
   phrasing. */
.comm-ai-search-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.comm-ai-search-icon { font-size: var(--fs-lg); color: var(--accent); }
.comm-ai-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text); font-size: var(--fs-base); font-family: inherit; padding: var(--sp-1); }
.comm-ai-search-input::placeholder { color: var(--text-dim); }
.comm-ai-result { padding: var(--sp-4); margin-bottom: var(--sp-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.comm-ai-result-header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.comm-ai-mode { font-weight: 700; color: var(--accent); font-size: var(--fs-md); }
.comm-ai-conf { padding: 2px var(--sp-2); border-radius: 10px; font-size: var(--fs-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.comm-ai-conf-high { background: var(--success-dim); color: var(--success); }
.comm-ai-conf-medium { background: var(--gold-dim); color: var(--gold); }
.comm-ai-conf-low { background: var(--danger-dim); color: var(--danger); }
.comm-ai-answer { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text); margin-bottom: var(--sp-3); white-space: pre-wrap; }
.comm-ai-hits-label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: var(--sp-2); font-weight: 700; }
.comm-ai-hit { padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); margin-bottom: var(--sp-2); cursor: pointer; transition: border-color .15s; }
.comm-ai-hit:hover { border-color: var(--accent); }
.comm-ai-hit-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.comm-ai-hit-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.comm-ai-hit-why { font-size: var(--fs-sm); color: var(--text-dim); margin-top: var(--sp-1); }
.comm-ai-empty { color: var(--text-dim); font-size: var(--fs-sm); padding: var(--sp-3); text-align: center; }

/* Undo-send toast — 10 sec hold between clicking Send and the actual send.
   The whole toast is the Undo affordance (role=button + click anywhere). */
.comm-undo-toast { display: flex; align-items: center; gap: var(--sp-3); max-width: 420px; border-left: 3px solid var(--accent); }
.comm-undo-msg { flex: 1; font-size: var(--fs-sm); color: var(--text); }
.comm-undo-cta {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.comm-undo-cta [data-count] {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text-muted);
  min-width: 32px;
  display: inline-block;
  text-align: right;
}
.comm-undo-toast-clickable {
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.comm-undo-toast-clickable:hover,
.comm-undo-toast-clickable:focus-visible {
  background: var(--accent-glow);
  border-color: var(--accent);
  outline: none;
}
.comm-undo-toast-clickable:hover .comm-undo-cta,
.comm-undo-toast-clickable:focus-visible .comm-undo-cta { filter: brightness(1.15); }

/* Row state + thread grouping */
.comm-row.unread { background: var(--card-2); }
.comm-row.unread .comm-row-subject { font-weight: 700; }
/* Thread grouping — one representative row per threadId. Badge + chevron
   surface the thread size; clicking reveals sibling summaries inline. */
.comm-row.is-thread .comm-row-subject::before { content: ''; }
.comm-row.expanded { background: var(--card-2); border-color: var(--accent); }
.comm-thread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 var(--sp-2); background: var(--accent-dim); color: var(--accent); border-radius: 10px; font-size: var(--fs-xs); font-weight: 800; cursor: pointer; }
.comm-thread-badge:hover { background: var(--accent); color: #fff; }
.comm-row-sender-extra { font-weight: 400; color: var(--text-muted); font-size: var(--fs-xs); margin-left: var(--sp-1); }
.comm-thread-siblings { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface); border-radius: var(--radius-xs); border-left: 2px solid var(--border); }
.comm-thread-sibling { display: grid; grid-template-columns: 70px 120px 1fr; gap: var(--sp-3); padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.comm-thread-sibling-time { color: var(--text-dim); }
.comm-thread-sibling-from { color: var(--text-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-thread-sibling-summary { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-row-priority { font-size: var(--fs-xl); font-weight: 800; text-align: center; }
.comm-row-main { min-width: 0; }
.comm-row-top { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-1); flex-wrap: wrap; font-size: var(--fs-sm); }
.comm-row-from { font-weight: 700; color: var(--text); }
.comm-row-cat { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-2); background: var(--accent-dim); color: var(--accent); border-radius: 10px; font-weight: 600; }
.comm-row-time { color: var(--text-muted); margin-left: auto; min-width: 70px; text-align: right; flex-shrink: 0; }

/* Single archive glow + slide-out */
@keyframes archiveGlow {
  0%   { box-shadow: inset 0 0 0 rgba(0,0,0,0); }
  50%  { box-shadow: inset 0 0 30px var(--accent-dim), 0 0 20px var(--accent-glow); }
  100% { box-shadow: inset 0 0 0 rgba(0,0,0,0); }
}
.comm-row-glow { animation: archiveGlow .3s ease; }

@keyframes archiveSlideOut {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  40%  { transform: translateX(30px) scale(1.02); opacity: 0.8; }
  100% { transform: translateX(120%) scale(0.8); opacity: 0; max-height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden; }
}
.comm-row-archive-out {
  animation: archiveSlideOut .35s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}

/* Black hole vortex (bulk-archive animation) */
.black-hole-vortex {
  position: fixed;
  width: 120px; height: 120px;
  margin-left: -60px; margin-top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, rgba(0,0,0,.9) 50%, transparent 70%);
  box-shadow: 0 0 60px var(--accent-glow), 0 0 120px var(--accent-dim), 0 0 200px rgba(0,0,0,.5), inset 0 0 40px rgba(0,0,0,.9);
  z-index: 9999;
  animation: vortexPulse .5s ease-in-out infinite alternate;
  pointer-events: none;
}
.black-hole-vortex::after {
  content: ''; position: absolute; inset: -20px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: .3;
  animation: vortexRing 1s linear infinite;
}
@keyframes vortexRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.black-hole-count {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff; text-shadow: 0 0 10px var(--accent);
}
@keyframes vortexPulse {
  from { transform: scale(1); box-shadow: 0 0 60px var(--accent-glow), 0 0 120px var(--accent-dim); }
  to   { transform: scale(1.15); box-shadow: 0 0 80px var(--accent-glow), 0 0 160px var(--accent-dim); }
}
.black-hole-collapse { animation: vortexCollapse .3s ease-in forwards; }
@keyframes vortexCollapse { to { transform: scale(0); opacity: 0; } }

/* Row body */
.comm-row-subject { font-size: var(--fs-base); font-weight: 500; color: var(--text); margin-bottom: var(--sp-1); line-height: 1.3; }
.comm-row-summary { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.comm-row-actions { display: flex; gap: 4px; opacity: .3; transition: opacity .2s; }
.comm-row:hover .comm-row-actions { opacity: 1; }
.comm-row-actions [data-row-action="reply"] { color: var(--accent); }
.comm-row-actions [data-row-action="archive"] { color: var(--text-muted); }
.comm-row-actions [data-row-action="unsubscribe"] { color: var(--danger); }

/* Bulk-select mode */
.comm-row.bulk-mode { grid-template-columns: 28px 36px 1fr auto; }
.comm-bulk-check {
  width: 18px; height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  justify-self: center;
}
.comm-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--card-2);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-md);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.comm-bulk-bar .bulk-select-all { display: flex; gap: 6px; align-items: center; cursor: pointer; user-select: none; }
.comm-bulk-bar .bulk-select-all input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.comm-bulk-bar .bulk-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.comm-bulk-bar .bulk-spacer { flex: 1; }
.comm-bulk-bar .bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Open-message modal: meta block + body */
.comm-msg-meta { padding: var(--sp-4) var(--sp-4); background: var(--surface); border-radius: var(--radius-sm); margin-bottom: var(--sp-4); font-size: var(--fs-md); line-height: 1.7; }
.comm-msg-meta strong { color: var(--text-muted); margin-right: var(--sp-2); }
.comm-msg-body { padding: var(--sp-4) 0; max-height: 60vh; overflow-y: auto; }

/* Attachments — rendered above the email body when present */
.comm-msg-attachments { padding: var(--sp-3) 0 var(--sp-2); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); }
.comm-msg-attachments-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--sp-2); }
.comm-msg-attachments-list { display: flex; flex-direction: column; gap: 6px; }
.comm-attachment { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: background 0.12s ease, border-color 0.12s ease; }
.comm-attachment:hover { background: var(--card-2); border-color: var(--accent); }
.comm-attachment-icon { font-size: 18px; flex: 0 0 auto; line-height: 1; }
.comm-attachment-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.comm-attachment-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-attachment-sub { font-size: var(--fs-xs); color: var(--text-dim); }
.comm-attachment-action { color: var(--text-muted); font-size: 16px; flex: 0 0 auto; }
.comm-attachment:hover .comm-attachment-action { color: var(--accent); }
.comm-text-body { white-space: pre-wrap; word-wrap: break-word; font-size: var(--fs-base); line-height: 1.65; color: var(--text); font-family: inherit; }
.comm-html-body { font-size: var(--fs-base); line-height: 1.65; color: var(--text); }
.comm-html-body img { max-width: 100%; height: auto; }
.comm-html-body a { color: var(--link); }
.comm-html-body table { max-width: 100%; }

/* Compose / Reply modal */
.compose-context {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.compose-context-label { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .6px; margin-bottom: var(--sp-1); }
.compose-context-from { font-size: var(--fs-md); font-weight: 600; }
.compose-context-subject { font-size: var(--fs-md); color: var(--text-muted); margin-bottom: var(--sp-2); }
.compose-context details { margin-top: var(--sp-2); }
.compose-context details summary { font-size: var(--fs-sm); color: var(--link); cursor: pointer; }
.compose-context-body {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--card-2);
  border-radius: var(--radius-xs);
  max-height: 240px;
  overflow-y: auto;
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-muted);
}
.compose-ai-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--accent-glow);
  border: 1px solid rgba(91,110,245,.2);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-2);
}
.compose-ai-row .form-hint { margin-left: auto; }

/* ─── Compose attachments (chips + dropzone + paperclip) ──────────────── */
/* Chip layout is shared; dropzone display state is owned by per-platform
   sheets (desktop shows it, mobile hides it). */
.comp-attachments-group { /* reuse .form-group base */ }
.comp-attachment-list {
  display: none; /* flips to flex when populated */
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.comp-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  max-width: 100%;
}
.comp-attachment-chip-icon { font-size: var(--fs-base); flex: 0 0 auto; line-height: 1; }
.comp-attachment-chip-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.comp-attachment-chip-size {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.comp-attachment-chip-remove {
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 50%;
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
.comp-attachment-chip-remove:hover {
  color: var(--danger);
  background: var(--danger-dim);
}

/* Dropzone — visibility owned by per-platform sheets. Layout/box-model
   shared so a single set of cosmetics drives both presented + hidden states. */
.comp-attachment-dropzone {
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  transition: border-color .15s, background .15s, color .15s;
}
.comp-attachment-dropzone-icon { font-size: var(--fs-lg); }
.comp-attachment-dropzone-meta {
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.comp-attachment-dropzone .link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comp-attachment-dropzone .link-button:hover {
  filter: brightness(1.1);
}

/* Paperclip toolbar button in the modal footer. */
.btn-icon.comp-attach-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.btn-icon.comp-attach-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Modal-footer spacer pushes Cancel left while paperclip + Send pin right. */
.modal-footer .footer-spacer { flex: 1; }

/* Unread accent bar — overrides shared base border-left + adds pulsing dot.
   Order preserved from app.css L3916-3921: this rule sat AFTER L1429
   .comm-row.unread, so keep the cascade order with the !important winning. */
.comm-row.unread { border-left: 3px solid var(--accent) !important; }
.comm-row.unread::after {
  content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
  transform: translateY(-50%); animation: pulse 2s infinite;
}

/* ─── Per-row icon-action buttons (archive/reply/snooze/unsub/etc.) ─── */
.btn-icon.comm-act {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
}
.btn-icon.comm-act:hover {
  background: var(--accent-glow);
  border-color: var(--accent-dim);
  color: var(--accent);
  transform: translateY(-1px);
}
.btn-icon.comm-act:active { transform: translateY(0); }
.btn-icon.comm-act svg { display: block; }
.comm-action-slot-reserved { width: 34px; height: 34px; display: inline-block; }

/* ─── Modal grids: priority + snooze presets (base; mobile collapses) ─── */
/* Comms priority grid — base 10-col on desktop. Mobile collapses (mobile sheet). */
.prio-grid { grid-template-columns: repeat(10, 1fr); }

/* Comms snooze preset grid — base 2-col, mobile collapses to 1fr */
.snooze-preset-grid { grid-template-columns: 1fr 1fr; }

/* ─── Re-categorize email picker — clean tappable list ──────────────── */
.cat-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-pick-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.cat-pick-row:hover { border-color: var(--accent); background: var(--card-2); }
.cat-pick-row:active { transform: scale(0.99); }
.cat-pick-row.is-current { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.cat-pick-name { flex: 1; min-width: 0; }
.cat-pick-arrow { color: var(--text-dim); font-size: 18px; flex-shrink: 0; }
.cat-pick-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent); color: #fff;
  flex-shrink: 0;
}

/* ─── Open-email modal: collapsible meta block + footer rebuild ───────── */
.comm-msg-meta-collapse {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-3);
}
.comm-msg-meta-collapse > summary { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-4); }
.comm-msg-meta-collapse > summary::-webkit-details-marker { display: none; }
.comm-msg-meta-summary {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-md);
}
.comm-msg-meta-chevron {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .15s ease;
}
.comm-msg-meta-collapse[open] .comm-msg-meta-chevron { transform: rotate(90deg); }
.comm-msg-meta-strip {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 1; min-width: 0;
  color: var(--text-muted);
}
.comm-msg-meta-strip strong { color: var(--text); }
.comm-msg-meta-dot { color: var(--text-dim); }
.comm-msg-meta-prio { font-weight: 700; margin-left: auto; flex-shrink: 0; }
.comm-msg-meta-body {
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: 1.65;
}
.comm-msg-meta-body > div { margin-top: var(--sp-2); }
.comm-msg-meta-body strong { color: var(--text); margin-right: 4px; }

/* Open-email modal: title row hosts the Gmail "G" launcher to the right of
   the subject. Footer becomes a 2x2 utility grid + a primary Reply button. */
.comm-msg-header {
  gap: var(--sp-2);
}
.comm-msg-title {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}
.btn-icon.comm-msg-gmail {
  background: transparent;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.btn-icon.comm-msg-gmail:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.btn-icon.comm-msg-gmail svg { display: block; }

/* Footer rebuild — 2x2 utility grid stacked above a full-width Reply */
.comm-msg-footer {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--sp-2);
}
.comm-msg-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  width: 100%;
}
.comm-msg-actions-grid .btn {
  width: 100%;
  justify-content: center;
}
.comm-msg-reply {
  width: 100%;
}