/* ════════════════════════════════════════════════════════════════
   css/mail.css — Email module
   ════════════════════════════════════════════════════════════════ */

#mail-root { height: 100%; }
.mail-loading, .mail-error, .mail-list-empty, .mail-reader-empty, .mail-list-loading { padding: 2rem; color: var(--text-muted, #888); display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.mail-error { color: var(--danger, #c0392b); }

/* spinner */
.mail-spinner { width: 22px; height: 22px; border: 2px solid var(--border, #ddd); border-top-color: var(--gold, #a67c00); border-radius: 50%; animation: mail-spin .7s linear infinite; }
@keyframes mail-spin { to { transform: rotate(360deg); } }

/* ── connect ── */
.mail-connect { max-width: 460px; margin: 3rem auto; }
.mail-connect-title { font-family: 'EB Garamond', serif; font-size: 1.6rem; margin-bottom: .25rem; }
.mail-connect-sub { color: var(--text-muted, #888); margin-bottom: 1.5rem; }
.mail-connect-form label { display: block; font-size: .85rem; margin-bottom: .9rem; color: var(--text, #333); }
.mail-connect-form input { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; border: 1px solid var(--border, #ddd); border-radius: 8px; font: inherit; }
.mail-adv { margin: .5rem 0 1rem; }
.mail-adv summary { cursor: pointer; font-size: .82rem; color: var(--gold, #a67c00); }
.mail-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin-top: .6rem; }
.mail-adv-note { font-size: .75rem; color: var(--text-muted, #999); margin-top: .5rem; }
.mail-adv-note code { background: var(--surface-2, #f3f3f0); padding: 1px 4px; border-radius: 4px; }
.mail-connect-status { margin-top: .8rem; font-size: .82rem; color: var(--danger, #c0392b); min-height: 1.1em; }

/* ── shell: rail | list | reader ── */
.mail-shell { display: flex; height: calc(100vh - 140px); min-height: 480px; }
.mail-rail { width: 160px; flex-shrink: 0; border-right: 1px solid var(--border, #eee); padding: .5rem .4rem; overflow-y: auto; }
.mail-rail-item { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; border: none; background: none; padding: .5rem .7rem; border-radius: 8px; font: inherit; font-size: .88rem; color: var(--text, #444); cursor: pointer; margin-bottom: 2px; }
.mail-rail-item:hover { background: var(--surface-2, #faf9f6); }
.mail-rail-item.active { background: var(--surface-2, #f0efe9); font-weight: 600; color: var(--text, #1a1a1a); }
.mail-rail-badge { background: var(--gold, #a67c00); color: #fff; font-size: .7rem; font-weight: 600; border-radius: 999px; padding: 0 .4rem; min-width: 18px; text-align: center; }

.mail-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mail-top { display: flex; align-items: center; justify-content: space-between; padding: .5rem .5rem 1rem; border-bottom: 1px solid var(--border, #eee); }
.mail-cur-folder { font-family: 'EB Garamond', serif; font-size: 1.2rem; font-weight: 600; }
.mail-actions { display: flex; align-items: center; gap: .6rem; }
.mail-acct { font-size: .8rem; color: var(--text-muted, #999); }

.mail-body { display: flex; flex: 1; min-height: 0; }
.mail-list { width: 40%; max-width: 420px; overflow-y: auto; border-right: 1px solid var(--border, #eee); }
.mail-reader { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 1.2rem 1.4rem; }

/* ── list ── */
.mail-item { display: block; width: 100%; text-align: left; border: none; background: none; border-bottom: 1px solid var(--border, #f0f0f0); padding: .8rem 1rem; cursor: pointer; font: inherit; }
.mail-item:hover { background: var(--surface-2, #faf9f6); }
.mail-item.unread .mail-item-who, .mail-item.unread .mail-item-subj { font-weight: 700; }
.mail-item.unread { border-left: 3px solid var(--gold, #a67c00); }
.mail-item-row1 { display: flex; justify-content: space-between; align-items: baseline; }
.mail-item-who { font-size: .9rem; color: var(--text, #222); }
.mail-item-date { font-size: .72rem; color: var(--text-muted, #aaa); flex-shrink: 0; margin-left: .5rem; }
.mail-item-subj { font-size: .86rem; color: var(--text, #333); margin: .15rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-snip { font-size: .78rem; color: var(--text-muted, #999); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-clip { font-size: .7rem; }

/* ── reader ── */
.mail-reader-head { border-bottom: 1px solid var(--border, #eee); padding-bottom: .9rem; margin-bottom: .5rem; }
.mail-reader-subj { font-family: 'EB Garamond', serif; font-size: 1.35rem; margin-bottom: .5rem; }
.mail-reader-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--text, #444); }
.mail-reader-date { color: var(--text-muted, #999); font-size: .78rem; flex-shrink: 0; margin-left: 1rem; }
.mail-reader-to { font-size: .78rem; color: var(--text-muted, #999); margin-top: .2rem; }
.mail-reader-cta { margin-top: .6rem; }
.mail-reader-frame { flex: 1; width: 100%; border: none; min-height: 320px; margin-top: .5rem; background: #fff; }
.mail-atts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.mail-att { border: 1px solid var(--border, #ddd); background: var(--surface-2, #faf9f6); border-radius: 8px; padding: .4rem .7rem; font: inherit; font-size: .8rem; cursor: pointer; }
.mail-att-sz { color: var(--text-muted, #aaa); font-size: .72rem; }

/* ── attachment preview modal ── */
.mail-preview-body { padding: 0 1rem; }
.mail-preview-img { text-align: center; }
.mail-preview-img img { max-width: 100%; max-height: 74vh; border-radius: 6px; }
.mail-preview-frame { width: 100%; height: 76vh; border: none; }
.mail-preview-none { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted, #888); }

/* ── minimisable composer ── */
.mail-composer { position: fixed; right: 24px; bottom: 0; width: 560px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100vh - 40px); background: #fff; border: 1px solid var(--border, #ddd); border-bottom: none; border-radius: 10px 10px 0 0; box-shadow: 0 8px 40px rgba(0,0,0,.22); z-index: 1200; display: flex; flex-direction: column; }
.mail-composer.minimized { height: auto; width: 300px; }
.mail-composer.minimized .mail-composer-body { display: none; }
.mail-composer-head { display: flex; align-items: center; justify-content: space-between; background: var(--text, #2a2a28); color: #fff; padding: .6rem .9rem; border-radius: 10px 10px 0 0; cursor: pointer; }
.mail-composer-title { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-composer-winbtns { display: flex; gap: .3rem; flex-shrink: 0; }
.mail-composer-winbtns button { background: none; border: none; color: #fff; cursor: pointer; font-size: .95rem; padding: 0 .35rem; opacity: .85; }
.mail-composer-winbtns button:hover { opacity: 1; }
.mail-composer-body { flex: 1; display: flex; flex-direction: column; padding: .6rem .9rem .9rem; overflow-y: auto; }
.mail-compose-row { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--border, #eee); padding: .4rem 0; }
.mail-compose-row label { width: 56px; font-size: .8rem; color: var(--text-muted, #999); }
.mail-compose-row input { flex: 1; border: none; font: inherit; padding: .3rem 0; outline: none; background: transparent; }
.mail-compose-toolbar { display: flex; gap: .3rem; align-items: center; padding: .5rem 0; flex-wrap: wrap; }
.mail-compose-toolbar button { border: 1px solid var(--border, #ddd); background: #fff; border-radius: 6px; padding: .25rem .5rem; cursor: pointer; font-size: .8rem; }
.mail-attach-btn { border: 1px solid var(--border, #ddd); border-radius: 6px; padding: .25rem .6rem; cursor: pointer; font-size: .8rem; margin-left: auto; }
.mail-compose-body-edit { flex: 1; min-height: 180px; overflow-y: auto; border: 1px solid var(--border, #eee); border-radius: 8px; padding: .8rem; font: inherit; line-height: 1.5; outline: none; }
.mail-compose-atts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.mail-chip { background: var(--surface-2, #f3f3f0); border-radius: 999px; padding: .2rem .6rem; font-size: .76rem; }
.mail-chip span { cursor: pointer; color: var(--danger, #c0392b); margin-left: .2rem; }
.mail-composer-foot { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }
.mail-composer-status { font-size: .78rem; color: var(--text-muted, #999); }

/* ── nav-tab unread count ── */
.lex-tab-count { display: inline-block; background: var(--gold, #a67c00); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 0 .35rem; min-width: 16px; text-align: center; margin-left: .3rem; vertical-align: middle; }

@media (max-width: 768px) {
  .mail-shell { flex-direction: column; height: auto; }
  .mail-rail { width: 100%; display: flex; gap: .3rem; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border, #eee); }
  .mail-rail-item { width: auto; white-space: nowrap; }
  .mail-body { flex-direction: column; }
  .mail-list { width: 100%; max-width: none; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border, #eee); }
  .mail-composer { right: 0; width: 100%; max-width: 100%; border-radius: 0; }
}