/* ============================================================================
   Personal Inbox — SGM-694
   Two-pane mailbox (conversations + thread), bubble/email-list conversation
   views, and a right-side compose drawer. Colors/radius/shadow are app.css
   tokens only (zero raw hex); spacing is px on an 8px rhythm (app.css has no
   spacing tokens — matching its own convention).
   ============================================================================ */

.inbox-page { display: flex; height: calc(100vh - var(--topbar-h) - 32px); min-height: 480px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

/* ── Threads pane ── */
.inbox-threads { width: 340px; flex-shrink: 0; background: var(--bg-card); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.inbox-threads-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.inbox-threads-title { font-weight: 700; font-size: 14px; color: var(--text); }
.inbox-threads-count { font-size: 12px; color: var(--text-muted); }
.inbox-threads-head .btn { margin-left: auto; }
.inbox-threads-search { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.inbox-threads-search input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; background: var(--bg-input); color: var(--text); }
.inbox-threads-search input:focus { outline: none; border-color: var(--border-focus); }
.inbox-tlist { flex: 1; overflow-y: auto; min-height: 0; }

.inbox-trow { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; border-left: 3px solid transparent; transition: background var(--transition); }
.inbox-trow:hover { background: var(--bg-card-hover); }
.inbox-trow.sel { background: var(--primary-bg); border-left-color: var(--primary); }
.inbox-av { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--primary-bg); color: var(--primary); font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.inbox-av.lg { width: 38px; height: 38px; }
.inbox-tmid { min-width: 0; flex: 1; }
.inbox-tname { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-tname .inbox-co, .inbox-co { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.inbox-tsnip { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.inbox-tright { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.inbox-ttime { font-size: 11px; color: var(--text-dim); }
.inbox-unread { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--danger); }
.inbox-trow.hasunread .inbox-tname { font-weight: 800; }
.inbox-trow.hasunread .inbox-tsnip { color: var(--text-secondary); font-weight: 600; }
.inbox-empty-list { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
.inbox-empty-list i { width: 32px; height: 32px; color: var(--text-dim); }

/* ── Conversation pane ── */
.inbox-convo { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.inbox-convo-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.inbox-cname { font-weight: 700; font-size: 15px; color: var(--text); }
.inbox-cmeta { font-size: 12px; color: var(--text-muted); }
.inbox-sp { flex: 1; }
.inbox-viewtoggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.inbox-vt { width: 32px; height: 28px; border: none; background: var(--bg-card); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.inbox-vt:hover { background: var(--bg-card-hover); }
.inbox-vt.on { background: var(--primary-bg); color: var(--primary); }
.inbox-vt i { width: 15px; height: 15px; }
.inbox-convo-body { flex: 1; overflow-y: auto; padding: 20px 18px; min-height: 0; }
.inbox-convo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; color: var(--text-muted); padding: 40px 24px; }
.inbox-convo-empty i { width: 40px; height: 40px; color: var(--text-dim); margin-bottom: 12px; }
.inbox-convo-empty h3 { font-size: 15px; color: var(--text-secondary); margin: 0 0 4px; }
.inbox-convo-empty p { font-size: 13px; margin: 0 0 16px; max-width: 44ch; line-height: 1.5; }

/* Bubble view */
.inbox-convo-body.view-bubble { display: flex; flex-direction: column; gap: 14px; }
.inbox-msg { max-width: 74%; }
.inbox-msg .inbox-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.inbox-bubble { padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-xs); }
.inbox-msg.out { align-self: flex-end; }
.inbox-msg.out .inbox-meta { text-align: right; }
.inbox-msg.out .inbox-bubble { background: var(--primary); color: var(--text-inverse); border-bottom-right-radius: 4px; }
.inbox-msg.out .inbox-subj { font-weight: 700; margin-bottom: 4px; }
.inbox-msg.in { align-self: flex-start; }
.inbox-msg.in .inbox-bubble { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.inbox-body-html a { color: inherit; text-decoration: underline; }

/* SGM-699: per-email engagement trail (sent/delivered/opened/clicked/…) */
.inbox-ev-trail { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; }
.inbox-msg.out .inbox-ev-trail { justify-content: flex-end; }
.inbox-ev { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.inbox-ev i { width: 12px; height: 12px; }
.inbox-ev em { font-style: normal; color: var(--text-dim); }
.inbox-ev.sent i, .inbox-ev.ev-delivered i { color: var(--success); }
.inbox-ev.ev-open i, .inbox-ev.ev-click i { color: var(--primary); }
.inbox-ev.ev-bounce i, .inbox-ev.ev-dropped i, .inbox-ev.ev-spamreport i { color: var(--danger); }
.inbox-ev.ev-deferred i { color: var(--warning); }
.inbox-ev.ev-unsubscribe i { color: var(--text-muted); }

/* Email-list view */
.inbox-convo-body.view-list { display: flex; flex-direction: column; gap: 10px; }
.inbox-mailrow { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.inbox-mailrow.out { border-left: 3px solid var(--primary); }
.inbox-mailrow-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.inbox-mailrow-who { font-weight: 700; font-size: 13px; color: var(--text); }
.inbox-mailrow-subj { font-size: 13px; color: var(--text-secondary); }
.inbox-mailrow-time { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.inbox-mailrow-body { font-size: 13.5px; line-height: 1.55; color: var(--text); }

/* ── Compose drawer ── */
/* z-index 900 (below the global #modal-overlay at 1000) so the AI-draft and
   Add-link modals launched from inside the drawer render ON TOP of it, not
   occluded behind it. SGM-698. */
.inbox-drawer-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: 900; display: flex; justify-content: flex-end; }
.inbox-drawer { width: 50vw; min-width: 560px; max-width: 96vw; height: 100%; background: var(--bg-sidebar); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.inbox-drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.inbox-drawer-head > i { width: 18px; height: 18px; color: var(--primary); }
.inbox-drawer-title { font-weight: 700; font-size: 16px; color: var(--text); }
.inbox-drawer-flav { margin-left: auto; font-size: 11px; color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-border); border-radius: var(--radius-full); padding: 3px 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.inbox-drawer-flav i { width: 13px; height: 13px; }
.inbox-drawer-x { border: none; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px; }
.inbox-drawer-x:hover { color: var(--text); }
.inbox-drawer-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 16px 20px; min-height: 0; }
.inbox-field { margin-bottom: 14px; position: relative; flex-shrink: 0; }
/* The message field grows to fill the drawer; the editor scrolls internally. */
.inbox-field.msg { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
.inbox-field.msg > label { flex-shrink: 0; }
.inbox-field > label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.inbox-from { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 11px; }
.inbox-from i { width: 14px; height: 14px; color: var(--text-muted); }
.inbox-sender-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 14px; background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius); font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.inbox-sender-banner > i { width: 16px; height: 16px; color: var(--warning); flex-shrink: 0; margin-top: 1px; }
.inbox-sender-banner-msg { flex: 1; }
.inbox-sender-banner .btn { flex-shrink: 0; }
.inbox-inp { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 11px; font-size: 13.5px; background: var(--bg-input); color: var(--text); }
.inbox-inp:focus, #inbox-to-search:focus { outline: none; border-color: var(--border-focus); }
#inbox-to-search { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 11px; font-size: 13.5px; background: var(--bg-input); color: var(--text); }
.inbox-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-bg); border: 1px solid var(--primary-border); color: var(--primary); border-radius: var(--radius-full); padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.inbox-chip-av { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--primary); color: var(--text-inverse); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.inbox-chip i { cursor: pointer; width: 13px; height: 13px; color: var(--primary); }
.inbox-picker { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); margin-top: 4px; max-height: 240px; overflow-y: auto; }
.inbox-pr { display: flex; gap: 9px; align-items: center; padding: 8px 11px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.inbox-pr:last-child { border-bottom: none; }
.inbox-pr:hover { background: var(--bg-card-hover); }
.inbox-pr.muted { color: var(--text-muted); cursor: default; }
.inbox-pr-name { font-weight: 600; color: var(--text); }
.inbox-compose-toolbar { display: flex; gap: 6px; margin-bottom: 6px; flex-shrink: 0; }
.inbox-tb { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-border); border-radius: var(--radius-full); padding: 4px 10px; cursor: pointer; }
.inbox-tb:hover { background: var(--bg-card-hover); }
.inbox-tb i { width: 14px; height: 14px; }
#inbox-rte { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); flex: 1 1 auto; min-height: 320px; display: flex; flex-direction: column; overflow: hidden; }
/* Let the Quill editor (or textarea fallback) fill #inbox-rte and scroll inside. */
#inbox-rte .ql-container { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#inbox-rte .ql-editor { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#inbox-rte textarea { flex: 1 1 auto; min-height: 0; resize: none; }
.inbox-link-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.inbox-link-row .btn { margin-left: auto; }
.inbox-drawer-foot { display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-top: 1px solid var(--border); }
.inbox-drawer-sender { flex: 1; font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.inbox-drawer-sender i { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .inbox-threads { width: 260px; }
  .inbox-drawer { width: 100%; }
}