/* email.css — ✉️ email card. mock-first. */

/* ── ✒️ LETTER-DESK SKIN (IC: a physical object, not peak-SaaS) ──────────────────────────────
   email is an old-fashioned writing desk: aged letter paper, ink, a typewriter hand. scoped TOKEN
   overrides recolor the whole card to parchment + ink — Sum's "letter in the mail" top-bar png lands later. */
.card.p-email {
  --surface:    #f4ecd8;           /* letter paper */
  --surface-2:  #e9dcc0;           /* the desk blotter / a folded leaf */
  --text:       #2f271d;           /* sepia ink */
  --text-dim:   #8c7d63;           /* faded ink */
  --line:       #d9cbac;           /* paper fold / desk seam */
  --btn:        #efe3c9;
  --btn-sh:     #cdbd97;
  --lav:        #46568a;           /* ink blue — borders, the unread dot, the active mark */
  --lav-bright: #2f3e6b;           /* deep ink — accent text */
  --lav-deep:   #e6d9bb;           /* stamped parchment — active-tab bg */
  --lav-shadow: #c7b58f;
  --font:       'American Typewriter', 'Courier New', 'Iowan Old Style', Georgia, serif;
  border-color: #cdbf9d;
  font-family: var(--font);
}
.card.p-email .card-head,
.card.p-email .card-body { background: #f4ecd8; color: var(--text); font-family: var(--font); }
.card.p-email .card-head   { border-bottom-color: #cdbf9d; box-shadow: inset 0 -3px 0 #b9243a; }   /* a wax-seal red tray line */
.card.p-email .card-bottom { border-top-color: #cdbf9d; box-shadow: inset 0 2px 0 #cdbf9d; }
/* the desk grain — warm paper under lamplight on a writing desk */
.card.p-email .email-body {
  background:
    radial-gradient(130% 80% at 75% -10%, rgba(255,244,214,.5), transparent 55%),
    linear-gradient(180deg, #f6efdc, #efe6cf);
}
/* the unread dot reads like a drop of ink */
.card.p-email .email-unread-dot { background: var(--lav-bright); box-shadow: 0 0 0 2px rgba(47,62,107,.18); }

/* ── ⚙️ setup / OAuth panel ── */
.email-setup { position: absolute; inset: 0; z-index: 10; background: var(--surface); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.email-setup[hidden] { display: none; }
.email-setup-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-label); font-weight: 700; color: var(--text); }
.email-setup-x { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-chrome); }
.email-setup-x:hover { background: var(--surface-2); }
.email-setup p { font-size: var(--fs-chrome); line-height: 1.55; color: var(--text-dim); }
.email-setup b { color: var(--text); }
.email-setup ol { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.email-setup li { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.6; }
.email-setup code { background: var(--surface-2); padding: 2px 6px; border-radius: 4px; color: var(--lav-bright); font-size: var(--fs-chrome); }
.email-connect-btn { background: var(--surface-2); border: 1px solid var(--lav); color: var(--lav-bright); border-radius: var(--r-sm); padding: 10px 18px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; min-height: 34px; box-shadow: 0 2px 0 var(--lav-deep); }
.email-connect-btn:hover { background: var(--lav-deep); color: var(--text); }
.email-setup-note { font-size: var(--fs-chrome); color: var(--text-dim); line-height: 1.45; }

/* ── body layout: list left / reader right ── */
.email-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.email-list-panel  { flex: 0 0 38%; display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); }
.email-reader-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ── tabs ── */
.email-tabs { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; flex-wrap: wrap; }
.email-tab { background: var(--btn); border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-chrome); cursor: pointer; min-height: 30px; box-shadow: 0 2px 0 var(--btn-sh); }
.email-tab:hover { color: var(--text); border-color: var(--lav); }
.email-tab.em-active { background: var(--lav-deep); border-color: var(--lav); color: var(--lav-bright); box-shadow: 0 2px 0 var(--lav-shadow); }

/* ── search bar ── */
.email-search-bar { display: flex; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.email-search-input { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); font-family: var(--font); font-size: var(--fs-chrome); padding: 5px 9px; outline: none; min-height: 30px; }
.email-search-input:focus { border-color: var(--lav); }
.email-search-go { background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-dim); cursor: pointer; font-size: var(--fs-chrome); padding: 5px 12px; min-height: 30px; }
.email-search-go:hover { border-color: var(--lav); color: var(--lav-bright); }

/* ── thread list ── */
.email-thread-list { flex: 1; overflow-y: auto; min-height: 0; }
.email-thread-row { padding: 10px 12px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 60px; }
.email-thread-row:hover { background: var(--surface-2); }
.email-thread-row.em-active { background: rgba(167,139,250,0.12); border-left: 3px solid var(--lav); padding-left: 9px; }
.email-thread-top { display: flex; align-items: center; gap: 6px; }
.email-from    { font-size: var(--fs-chrome); color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-date    { font-size: var(--fs-chrome); color: var(--text-dim); flex-shrink: 0; }
.email-subject { font-size: var(--fs-chrome); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-snippet { font-size: var(--fs-chrome); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.email-unread-dot    { width: 8px; height: 8px; border-radius: 50%; background: var(--lav); flex-shrink: 0; }
.email-unread-spacer { width: 8px; display: inline-block; flex-shrink: 0; }
.email-count { font-size: var(--fs-chrome); color: var(--text-dim); background: var(--surface-2); border-radius: 10px; padding: 1px 6px; flex-shrink: 0; }
.email-empty { padding: 20px; font-size: var(--fs-chrome); color: var(--text-dim); }

/* unread emphasis */
.email-thread-row.unread .email-from    { font-weight: 700; color: var(--text); }
.email-thread-row.unread .email-subject { font-weight: 700; color: var(--text); }

/* ── category badges ── */
.email-badge { font-size: var(--fs-ui); padding: 2px 8px; border-radius: 30px; font-weight: 600; flex-shrink: 0; }
.email-badge.promo    { background: rgba(167,139,250,0.18); color: var(--lav-bright); border: 1px solid rgba(167,139,250,0.4); }
.email-badge.purchases { background: rgba(61,220,132,0.12); color: var(--ok);   border: 1px solid rgba(61,220,132,0.3); }
.email-badge.social   { background: rgba(96,165,250,0.12); color: var(--cool); border: 1px solid rgba(96,165,250,0.3); }
.email-badge.spam     { background: rgba(248,113,113,0.12); color: var(--bad); border: 1px solid rgba(248,113,113,0.3); }

/* ── suggested actions queue (below thread list) ── */
.email-queue-panel { border-top: 1px solid var(--line); background: var(--surface-2); flex-shrink: 0; max-height: 220px; overflow: hidden; display: flex; flex-direction: column; }
.email-queue-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; cursor: pointer; }
.email-queue-label  { font-size: var(--fs-chrome); color: var(--text-dim); flex: 1; }
.email-queue-count  { font-size: var(--fs-chrome); background: var(--lav-deep); color: var(--lav-bright); border-radius: 10px; padding: 1px 7px; }
.email-queue-execute { font-size: var(--fs-chrome); padding: 3px 10px; border-radius: var(--r-sm); border: none; background: var(--bad-btn); color: var(--bad-text); cursor: pointer; min-height: 30px; }
.email-queue-execute:hover { background: var(--bad-btn-hover); }
.email-queue-list { overflow-y: auto; flex: 1; padding: 4px 0; }
.email-q-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.email-q-item:last-child { border-bottom: none; }
.email-q-cb { width: 18px; height: 18px; accent-color: var(--bad); flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.email-q-info { flex: 1; min-width: 0; }
.email-q-subject { font-size: var(--fs-chrome); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-q-from    { font-size: var(--fs-chrome); color: var(--text-dim); }
.email-q-reason  { font-size: var(--fs-chrome); color: #fb923c; margin-top: 1px; }

/* ── reading pane ── */
.email-reader-actions { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 8px; flex-shrink: 0; }
.email-compose-btn { background: var(--btn); border: 1px solid var(--lav-deep); color: var(--lav-bright); border-radius: var(--r-sm); padding: 6px 14px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; min-height: 30px; box-shadow: 0 2px 0 var(--btn-sh); }
.email-compose-btn:hover { background: var(--lav-deep); color: var(--text); }
.email-reader-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: var(--fs-chrome); }
.email-reader-head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.email-reader-back { background: var(--btn); border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-chrome); cursor: pointer; min-height: 30px; box-shadow: 0 2px 0 var(--btn-sh); }
.email-reader-back:hover { color: var(--text); border-color: var(--lav); }
.email-reader-subject { font-size: var(--fs-chrome); font-weight: 700; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-reader-body { flex: 1; overflow-y: auto; padding: 14px; }
.email-msg-block { padding: 12px 0; border-bottom: 1px solid var(--line); }
.email-msg-meta { display: flex; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.email-msg-from { font-size: var(--fs-chrome); font-weight: 700; color: var(--text); }
.email-msg-date { font-size: var(--fs-chrome); color: var(--text-dim); }
.email-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.email-attach-chip { font-size: var(--fs-chrome); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 8px; color: var(--text-dim); }
.email-msg-body { font-size: var(--fs-chrome); line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* ── compose ── */
.email-compose { display: flex; flex-direction: column; height: 100%; }
.email-compose-header { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.email-compose-title { font-size: var(--fs-label); font-weight: 700; color: var(--lav-bright); }
.email-compose-close { background: none; border: 1px solid var(--line); color: var(--text-dim); border-radius: var(--r-sm); width: 30px; height: 30px; cursor: pointer; font-size: var(--fs-chrome); }
.email-compose-close:hover { border-color: var(--lav); color: var(--lav-bright); }
.email-compose-field { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.email-compose-label { font-size: var(--fs-chrome); color: var(--text-dim); width: 55px; flex-shrink: 0; }
.email-compose-input { flex: 1; background: none; border: none; color: var(--text); font-size: var(--fs-chrome); font-family: var(--font); outline: none; min-height: 30px; }
.email-compose-attach-row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.email-compose-attach-btn { background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-dim); cursor: pointer; font-size: var(--fs-chrome); padding: 3px 10px; min-height: 30px; }
.email-compose-attach-btn:hover { border-color: var(--lav); color: var(--lav-bright); }
.email-compose-attach-list { font-size: var(--fs-chrome); color: var(--text-dim); flex: 1; }
.email-compose-file-input { display: none; }
.email-compose-textarea { flex: 1; background: none; border: none; color: var(--text); font-size: var(--fs-chrome); font-family: var(--font); padding: 12px 14px; resize: none; outline: none; line-height: 1.65; min-height: 0; }
.email-compose-send { margin: 10px 14px 14px; background: var(--lav-deep); border: none; color: var(--lav-bright); border-radius: var(--r-sm); padding: 10px; font-size: var(--fs-chrome); font-weight: 700; cursor: pointer; min-height: 34px; box-shadow: 0 3px 0 var(--lav-shadow); flex-shrink: 0; }
.email-compose-send:hover { background: var(--lav); color: #fff; }