:root { --fg:#1a1a1a; --muted:#666; --line:#e3e3e3; --accent:#1a5fb4; --bg:#fff; }
* { box-sizing: border-box; }
body { margin:0; font:0.95rem/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
       color:var(--fg); background:var(--bg); }
.banner { background:#fff3cd; border-bottom:1px solid #e0c97f; padding:.5rem 1rem;
          font-size:0.9rem; }
.app { display:grid; grid-template-columns:200px 1fr; height:100vh; }
.folders { border-right:1px solid var(--line); padding:1rem; }
.brand { font-size:1.1rem; margin:0 0 1rem; }
.folders nav a { display:block; padding:.35rem .5rem; color:var(--fg);
                 text-decoration:none; border-radius:4px; }
.folders nav a.active, .folders nav a:hover { background:#f0f4fa; color:var(--accent); }
main { display:grid; grid-template-rows:auto 1fr 1fr; min-width:0; }
.searchbar { padding:.6rem 1rem; border-bottom:1px solid var(--line); }
.searchbar input { width:100%; max-width:480px; padding:.45rem .6rem;
                   border:1px solid var(--line); border-radius:6px; font-size:0.95rem; }
.list { overflow-y:auto; overflow-x:hidden; border-bottom:1px solid var(--line); }
.row { display:grid; grid-template-columns:170px 1fr auto; gap:.5rem;
       padding:.5rem 1rem; border-bottom:1px solid var(--line); cursor:pointer; }
.row:hover { background:#f7f9fc; }
/* min-width:0 overrides the grid-item default of min-width:auto (= intrinsic
   content size), which otherwise refuses to shrink below a long unbroken
   subject/name and defeats the ellipsis rules below entirely. */
.row > * { min-width:0; }
.from { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* .subject was missing this truncation in the original template -- a long
   subject line (or one glued together with no spaces) pushed the row wider
   than its grid track instead of eliding, unlike .from/.snippet. */
.subject { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.snippet { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.count { background:#eef; border-radius:10px; padding:0 .4rem; font-size:.8rem; }
time { color:var(--muted); font-size:.85rem; }
/* Subject/from/snippet are attacker-controlled mail headers. HTML-escaping
   (Jinja autoescape) stops markup injection, but a Unicode bidi override
   character (U+202E RLO and friends) is not markup -- it can still visually
   reorder the glyphs after it on screen. unicode-bidi:isolate bounds that
   reordering to inside each span so a hostile subject can't visually bleed
   into the count badge, the date, or the next row. */
.from, .subject, .snippet { unicode-bidi: isolate; }
.detail { overflow-y:auto; padding:1rem; }
.empty { color:var(--muted); padding:1rem; }
.htmx-indicator { opacity:0; } .htmx-request .htmx-indicator { opacity:1; }
mark { background:#fff2a8; }
.msg { border:1px solid var(--line); border-radius:8px; margin-bottom:1rem; }
.msg header { padding:.6rem .8rem; border-bottom:1px solid var(--line); }
.msg iframe { width:100%; border:0; min-height:220px; }
.msg .plain { white-space:pre-wrap; margin:.8rem; font:inherit; }
.msg .quoted-toggle { margin:.5rem .8rem; cursor:pointer; color:var(--accent); }
.imgblock { margin:.5rem .8rem; font-size:.85rem; color:var(--muted); }
#ctx { position:absolute; background:#fff; border:1px solid var(--line);
       border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,.14); padding:.25rem;
       display:none; z-index:50; min-width:220px; }
#ctx button { display:block; width:100%; text-align:left; background:none; border:0;
              padding:.4rem .6rem; font:inherit; cursor:pointer; border-radius:4px; }
#ctx button:hover { background:#f0f4fa; }
.compose { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; }
.compose input, .compose textarea { width: 100%; box-sizing: border-box; }
.compose-actions { display: flex; gap: .5rem; align-items: center; }
.send-result.ok { color: #1a7f37; } .send-result.warn { color: #9a6700; }
.send-error { color: #b30000; }
.attachment-list { list-style: none; padding: 0; margin: .25rem 0; }
.msg-actions button { margin-right: .25rem; }

.drafts { list-style: none; padding: 0; margin: 0; }
.draft { display: flex; gap: .5rem; align-items: baseline; padding: .5rem 1rem;
         border-bottom: 1px solid var(--line, #e3e3e3); }
.d-subject { font-weight: 600; }
.d-to, time { color: #666; font-size: .85rem; }
.badge { font-size: .75rem; border-radius: 10px; padding: 0 .5rem; }
.badge.editable { background: #eef; }
.badge.delivered { background: #fff3cd; }
.badge.uncertain { background: #f8d7da; }
.d-action { margin-left: .25rem; }

.source-link { font-size: 0.85rem; padding: 0.5rem 1rem; opacity: 0.7; }