/* ── GMAIL INTEGRATION ───────────────────────────────────────────────────── */

/* Loan-label banner */
.gmail-label-banner { display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:2px solid var(--accent2); background:rgba(59,130,246,.07); flex-wrap:wrap; }
.gmail-label-banner-icon { font-size:14px; flex-shrink:0; }
.gmail-label-banner-name { font-family:var(--font-head); font-size:12px; font-weight:700; color:var(--accent2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gmail-label-banner-count { font-family:var(--font-mono); font-size:10px; color:var(--text3); flex-shrink:0; }
.gmail-label-banner-btn { font-size:9px; padding:2px 8px; }
.gmail-section-divider { padding:6px 14px 4px; background:var(--surface2); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; }
.gmail-section-divider-label { font-family:var(--font-mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--text3); flex:1; }
.gmail-labeled-thread { opacity:.85; }

/* Thread list */
.gmail-thread { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; display:flex; align-items:flex-start; gap:8px; }
.gmail-thread:last-child { border-bottom: none; }
.gmail-thread:hover { background: var(--surface2); }
.gmail-thread.selected { background: rgba(59,130,246,.08); }
.gmail-thread.unread .gmail-subject { font-weight: 700; color: var(--text); }
.gmail-thread.unread .gmail-from { font-weight: 600; }
.gmail-thread-cb { width:14px; height:14px; border-radius:3px; border:1px solid var(--border2); flex-shrink:0; margin-top:2px; cursor:pointer; accent-color:var(--accent); }
.gmail-thread-body { flex:1; min-width:0; }
.gmail-subject { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.gmail-from   { font-family: var(--font-mono); font-size: 10px; color: var(--text2); margin-bottom: 3px; }
.gmail-snippet { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmail-meta   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.gmail-date   { font-family: var(--font-mono); font-size: 9px; color: var(--text3); flex-shrink: 0; }
.gmail-count  { font-family: var(--font-mono); font-size: 9px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 1px 5px; color: var(--text3); }
.gmail-icons  { font-size: 11px; display:flex; gap:4px; align-items:center; }
.gmail-att-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: 9px;
  background: rgba(59,130,246,.12); color: var(--accent2);
  border: 1px solid rgba(59,130,246,.25); border-radius: 3px;
  padding: 1px 5px; flex-shrink: 0; white-space: nowrap;
}

/* Threads with attachments: red left accent + tinted background + red
 * attachment badge so the user can spot attachment-bearing threads at
 * a glance while scanning the list. User-requested 2026-05-23 ("add a
 * red outline or something to make it obvious"). Uses --danger directly
 * — the only overload of "danger" outside of errors, but the user
 * explicitly chose red for visibility over palette purity. The badge
 * itself is also recolored red so the visual signal is consistent
 * across border + badge. */
.gmail-thread.has-attachments {
  border-left: 4px solid var(--danger);
  background: rgba(220, 38, 38, .05);
}
.gmail-thread.has-attachments.selected { background: rgba(59,130,246,.10); }
.gmail-thread.has-attachments .gmail-att-badge {
  background: rgba(220,38,38,.14); color: var(--danger);
  border-color: rgba(220,38,38,.40); font-weight: 600;
}

/* Expanded thread message */
.gmail-message-expand { border-top:1px solid var(--border); background:var(--surface); }
.gmail-message-head { padding:10px 14px 6px; display:flex; justify-content:space-between; align-items:center; }
.gmail-message-body-text { padding:0 14px 10px; font-size:12px; color:var(--text3); line-height:1.6; white-space:pre-wrap; max-height:220px; overflow-y:auto; }

/* Attachment chips — user-requested 2026-05-23 to make obvious where the
 * actual attached file is inside an expanded email. Container gets a red-
 * tinted band (matching the .gmail-thread.has-attachments accent on the
 * row above) and a "Attachments" label so the user's eye lands on it the
 * moment the message expands. Chips themselves carry a red border + red
 * filename text by default so they stand out from message body content.
 * Hover stays the existing blue treatment so drag-target affordance is
 * unchanged. */
.att-chips {
  padding: 8px 14px 12px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  background: rgba(220, 38, 38, .06);
  border-top: 1px solid rgba(220, 38, 38, .25);
  border-left: 3px solid var(--danger);
  position: relative;
}
/* "📎 Attachments" label injected via ::before so we don't have to
 * touch the message-render HTML to add it. Sits as a small uppercase
 * banner above the chips. */
.att-chips::before {
  content: "📎 Attachments";
  display: block; width: 100%;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--danger); font-weight: 700;
  margin-bottom: 4px;
}
.att-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(220, 38, 38, .10);
  border: 1.5px solid rgba(220, 38, 38, .45);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--danger); font-weight: 600;
  cursor: grab; text-decoration: none; transition: all .12s;
}
.att-chip:hover {
  border-color: var(--accent);
  color: var(--accent2);
  background: rgba(59, 130, 246, .08);
  font-weight: 600;
}
.att-chip[draggable]:active { cursor: grabbing; opacity: .75; }
.att-chip-wrap { display: inline-flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }