:root{
  --bg:#0a0a0f;
  --bg-2:#11121a;
  --bg-3:#171823;
  --fg:#f5f5f7;
  --muted:#8a8a96;
  --gold:#d4b48a;
  --gold-2:#e8c79b;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --danger:#e57373;
  --success:#7cc97c;
  --radius:14px;
  --radius-sm:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
.bg{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 20% 10%, rgba(212,180,138,.12), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(212,180,138,.08), transparent 50%),
    var(--bg);
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:#000;
  padding:8px 14px;border-radius:6px;z-index:100;
}
.skip-link:focus{left:8px;top:8px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(10,10,15,.85);backdrop-filter:blur(12px);
  z-index:10;
}
.brand{
  display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}
.brand:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.topnav{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted)}
.topnav a{color:var(--gold-2);text-decoration:none;font-size:13px}
.topnav a:hover{text-decoration:underline}
.topnav .user-email{color:var(--muted)}

.wrap{
  max-width:980px;
  margin:0 auto;
  padding:48px 24px 96px;
}
.wrap.narrow{max-width:480px}
.wrap.medium{max-width:680px}

h1{
  font-size:clamp(32px,5vw,48px);
  line-height:1.1;
  margin:0 0 16px;
  font-weight:600;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,var(--fg) 0%, #c8c8d4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
h1:focus{outline:none}
h2{font-size:22px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
h3{font-size:16px;font-weight:600;margin:0 0 8px}
.lede{font-size:17px;color:var(--muted);margin:0 0 32px;max-width:560px}
.gold{color:var(--gold-2)}

.panel{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  margin:0 0 20px;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}
.panel-eyebrow{
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gold);margin:0 0 12px;font-weight:600;
}

/* Form */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--muted);font-weight:500}
.field .hint{font-size:12px;color:var(--muted);margin-top:2px}
.field .err{font-size:12px;color:var(--danger);margin-top:2px;min-height:1em}
.field input, .field select, .field textarea{
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  color:var(--fg);
  font-size:15px;
  font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,180,138,.18);
}
.field input[aria-invalid="true"]{border-color:var(--danger)}

.strength{display:flex;gap:4px;margin-top:6px;height:4px}
.strength span{flex:1;background:var(--line);border-radius:2px;transition:background .2s}
.strength.s1 span:nth-child(-n+1){background:var(--danger)}
.strength.s2 span:nth-child(-n+2){background:#e5a463}
.strength.s3 span:nth-child(-n+3){background:var(--gold)}
.strength.s4 span:nth-child(-n+4){background:var(--success)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);
  color:#0a0a0f;
  border:none;border-radius:var(--radius-sm);
  padding:12px 20px;
  font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease, opacity .15s;
  text-decoration:none;
}
.btn:hover{background:var(--gold-2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.btn.secondary{background:transparent;color:var(--fg);border:1px solid var(--line-2)}
.btn.secondary:hover{background:var(--bg-3);border-color:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold-2);padding:6px 10px;font-weight:500}
.btn.ghost:hover{background:rgba(212,180,138,.08)}
.btn.danger{background:transparent;color:var(--danger);border:1px solid rgba(229,115,115,.4)}
.btn.danger:hover{background:rgba(229,115,115,.08)}
.btn.full{width:100%}
.btn.small{padding:8px 14px;font-size:13px}

.linkrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;gap:12px;flex-wrap:wrap;margin-top:6px}
.linkrow a{color:var(--gold-2);text-decoration:none}
.linkrow a:hover{text-decoration:underline}

.alert{
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14px;
  margin:0 0 16px;
  border:1px solid;
  display:flex;gap:10px;align-items:flex-start;
}
.alert.error{background:rgba(229,115,115,.08);border-color:rgba(229,115,115,.4);color:#f3b8b8}
.alert.success{background:rgba(124,201,124,.08);border-color:rgba(124,201,124,.4);color:#b8e6b8}
.alert.info{background:rgba(212,180,138,.06);border-color:rgba(212,180,138,.3);color:var(--gold-2)}
.alert.warn{background:rgba(229,165,99,.1);border-color:rgba(229,165,99,.4);color:#f0c397}
/* `.alert{display:flex}` was overriding the HTML `hidden` attribute, leaving
   empty red/green strips at the top of any view with a pre-hidden errBox/okBox
   (visible on /compose where both stack). Restore the expected behaviour. */
.alert[hidden]{display:none}

/* Plan cards */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:24px 0 0}
.plan-card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s, transform .12s;
}
.plan-card.featured{border-color:rgba(212,180,138,.5);position:relative}
.plan-card.featured::before{
  content:"Most popular";
  position:absolute;top:-10px;left:24px;
  background:var(--gold);color:#0a0a0f;
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.06em;
}
.plan-card h3{font-size:18px;margin:0}
.plan-price{font-size:32px;font-weight:600;letter-spacing:-.02em}
.plan-price small{font-size:13px;color:var(--muted);font-weight:400}
.plan-features{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--fg)}
.plan-features li{display:flex;gap:8px;align-items:flex-start}
.plan-features li::before{content:"✓";color:var(--gold);font-weight:700;flex-shrink:0}

/* Mailbox list */
.mailbox-row{
  display:flex;flex-direction:column;gap:8px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.mailbox-row:last-child{border-bottom:none;padding-bottom:0}
.mailbox-row:first-child{padding-top:0}
.mailbox-row .head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mailbox-row .addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;color:var(--fg)}
.mailbox-row .meta{font-size:12px;color:var(--muted)}
.mailbox-row .actions{display:flex;gap:8px;flex-wrap:wrap}
.quota{background:var(--bg-3);height:6px;border-radius:3px;overflow:hidden}
.quota .fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .3s}
.quota .fill.warn{background:#e5a463}
.quota .fill.full{background:var(--danger)}

/* Code block (credentials) */
.creds{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px;
  white-space:pre;overflow-x:auto;
  position:relative;
  color:var(--fg);
}
.copy-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line)}
.copy-row:last-child{border-bottom:none}
.copy-row .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500;min-width:90px}
.copy-row .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--fg);flex:1;word-break:break-all;text-align:right}
.copy-row button{background:transparent;border:1px solid var(--line-2);color:var(--gold-2);padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit}
.copy-row button:hover{background:var(--bg-3)}

.password-reveal{
  background:linear-gradient(180deg,rgba(212,180,138,.12),rgba(212,180,138,.03));
  border:1px solid rgba(212,180,138,.4);
  border-radius:var(--radius);
  padding:20px;margin:16px 0;
}
.password-reveal .pwd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:18px;font-weight:600;
  background:var(--bg);
  padding:14px;border-radius:var(--radius-sm);
  margin:12px 0;word-break:break-all;
  letter-spacing:.02em;
  color:var(--gold-2);
}

/* Accordion */
.acc{border:1px solid var(--line);border-radius:var(--radius-sm);margin:8px 0;overflow:hidden}
.acc summary{
  padding:14px 16px;cursor:pointer;font-weight:500;font-size:14px;
  display:flex;align-items:center;gap:10px;list-style:none;
  background:var(--bg-3);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:"›";color:var(--gold);font-size:18px;transition:transform .2s;display:inline-block}
.acc[open] summary::before{transform:rotate(90deg)}
.acc .acc-body{padding:14px 16px;font-size:14px;color:var(--muted);line-height:1.6}
.acc .acc-body ol{padding-left:18px;margin:8px 0}
.acc .acc-body li{margin:4px 0}

/* Stepper */
.stepper{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.stepper .step{
  flex:1;min-width:80px;
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:8px 0;border-top:2px solid var(--line);
  transition:border-color .2s, color .2s;
}
.stepper .step.active{color:var(--gold);border-top-color:var(--gold)}
.stepper .step.done{color:var(--fg);border-top-color:rgba(212,180,138,.4)}

/* Live address preview shown beneath the mailbox-name field in setup. */
.address-preview{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:8px 0 16px;padding:12px 14px;
  border:1px dashed var(--line);border-radius:8px;
  background:rgba(212,180,138,.04);
}
.address-preview .preview-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
}
.address-preview .preview-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;color:var(--fg);
  word-break:break-all;
}
.address-preview .preview-value .muted{color:var(--muted)}
.address-preview .preview-local:not(.muted){color:var(--gold);font-weight:600}

/* ════════════════════════════════════════════════════════════════════════════
   Webmail shell (session 1)
   Two-pane Gmail-style layout: left sidebar (compose + folders), main pane
   (header + folder title + list area / composer). Uses position:fixed to
   break out of the page's .wrap max-width and fill the viewport below the
   sticky topbar.
   ════════════════════════════════════════════════════════════════════════════ */
.webmail{
  position:fixed; left:0; right:0; bottom:0; top:64px;
  display:grid; grid-template-columns:260px 1fr;
  background:var(--bg);
  overflow:hidden;
}
.wm-sidebar{
  border-right:1px solid var(--line);
  padding:18px 8px 18px 12px;
  overflow-y:auto;
  display:flex; flex-direction:column;
  gap:4px;
  background:linear-gradient(180deg, rgba(212,180,138,.02), transparent 200px);
}
.wm-compose{
  display:flex; align-items:center; gap:10px;
  margin:4px 4px 14px;
  padding:14px 22px;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:#0a0a0f;
  border:none; border-radius:28px;
  font-weight:600; font-size:14px;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(212,180,138,.28);
  transition:transform .15s ease, box-shadow .2s ease;
  font-family:inherit;
  letter-spacing:.01em;
}
.wm-compose:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(212,180,138,.45);
}
.wm-compose:active{ transform:translateY(0) }
.wm-compose-icon{ font-size:16px; line-height:1 }

.wm-mbx-switch{
  margin:6px 4px 16px;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:10px;
}
.wm-mbx-switch .label{
  color:var(--muted); font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; font-weight:600;
}
.wm-mbx-switch .addr{
  color:var(--fg); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  margin-top:6px; font-size:13px; word-break:break-all;
}
.wm-mbx-select{
  width:100%; margin-top:6px;
  padding:8px 10px;
  background:var(--bg-2); color:var(--fg);
  border:1px solid var(--line); border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  cursor:pointer;
}
.wm-mbx-select:focus{ outline:none; border-color:var(--gold) }

.wm-folders{ display:flex; flex-direction:column; gap:1px; margin:4px 0 }
.wm-folder{
  display:flex; align-items:center; gap:14px;
  padding:10px 16px;
  margin-right:8px;
  border-radius:0 22px 22px 0;
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  transition:background .12s ease, color .12s ease;
}
.wm-folder:hover{ background:rgba(255,255,255,.04); color:var(--fg) }
.wm-folder.active{
  background:rgba(212,180,138,.14);
  color:var(--gold-2);
  font-weight:600;
}
.wm-folder .icon{ font-size:15px; width:22px; text-align:center; flex-shrink:0 }
.wm-folder .label{ flex:1 }
.wm-folder .count{ font-size:12px; color:var(--muted) }
.wm-folder.active .count{ color:var(--gold-2) }

.wm-side-footer{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.wm-side-eyebrow{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  padding:10px 14px 4px;
  font-weight:600;
  opacity:.7;
}
.wm-side-eyebrow + a{ padding-top:6px }
.wm-side-footer a{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  color:var(--muted); font-size:13px;
  text-decoration:none; border-radius:8px;
}
.wm-side-footer a:hover{ background:rgba(255,255,255,.04); color:var(--fg) }
.wm-side-footer a .icon{ width:18px; text-align:center; font-size:14px }

.wm-main{
  display:flex; flex-direction:column;
  overflow:hidden;
  min-width:0;
}
.wm-header{
  display:flex; align-items:center; gap:16px;
  padding:14px 28px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.wm-search{
  flex:1; max-width:720px;
  padding:11px 18px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:24px;
  color:var(--fg);
  font-family:inherit; font-size:14px;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wm-search::placeholder{ color:var(--muted) }
.wm-search:focus{
  outline:none;
  border-color:rgba(212,180,138,.4);
  background:var(--bg-3);
  box-shadow:0 0 0 4px rgba(212,180,138,.06);
}
.wm-account{
  color:var(--muted); font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.wm-folder-title{
  padding:18px 28px 10px;
  margin:0;
  font-size:24px; font-weight:600;
  color:var(--fg);
  letter-spacing:-.01em;
}
.wm-list-area{ flex:1; overflow-y:auto; padding:8px 28px 32px; min-height:0 }

.wm-empty{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  max-width:560px; margin:48px auto 0;
  padding:24px;
}
.wm-empty .badge{
  display:inline-block;
  padding:4px 12px;
  background:rgba(212,180,138,.12);
  color:var(--gold-2);
  border-radius:14px;
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  margin-bottom:18px;
}
.wm-empty h2{
  font-size:24px; margin:0 0 12px;
  color:var(--fg); font-weight:600;
  letter-spacing:-.01em;
}
.wm-empty p{
  color:var(--muted); margin:0 0 24px;
  line-height:1.6; font-size:15px;
}
.wm-empty .actions{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-bottom:36px;
}

.wm-roadmap{
  text-align:left;
  width:100%;
  margin-top:8px;
  padding:18px 22px;
  background:rgba(212,180,138,.04);
  border:1px dashed var(--line-2);
  border-radius:12px;
}
.wm-roadmap h3{
  margin:0 0 10px;
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold-2); font-weight:700;
}
.wm-roadmap ul{
  list-style:none; padding:0; margin:0;
  display:grid; gap:6px;
}
.wm-roadmap li{
  position:relative; padding-left:20px;
  color:var(--muted); font-size:13px;
}
.wm-roadmap li::before{
  content:"→"; position:absolute; left:0;
  color:var(--gold); font-weight:600;
}

/* Mailbox password reveal section on /dashboard/mailbox/{addr} */
.wm-pwd-section{
  margin:8px 0 18px;
  padding:14px 16px;
  background:rgba(212,180,138,.05);
  border:1px solid var(--line);
  border-radius:10px;
}
.wm-pwd-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold-2); font-weight:600;
  margin-bottom:8px;
}
.wm-pwd-row{
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap;
}
.wm-pwd-value{
  flex:1; min-width:200px;
  padding:9px 12px;
  background:var(--bg-2);
  border:1px solid var(--line); border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;
  color:var(--fg);
  word-break:break-all;
  letter-spacing:.02em;
}
.wm-pwd-value[data-state="hidden"]{ color:var(--muted); letter-spacing:.4em }
.wm-pwd-value[data-state="missing"]{ color:var(--muted); font-style:italic }
.wm-pwd-actions{ display:flex; gap:6px }

/* Enable-webmail variant of the unlock panel */
.wm-enable .alert.info{
  text-align:left;
  margin-top:12px; margin-bottom:18px;
}

/* Unlock panel — first-run flow before the user enters their mailbox pwd. */
.wm-unlock{
  max-width:480px; margin:36px auto 0; padding:24px;
}
.wm-unlock .badge{
  display:inline-block; padding:4px 12px;
  background:rgba(212,180,138,.12); color:var(--gold-2);
  border-radius:14px;
  font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em;
  margin-bottom:14px;
}
.wm-unlock h2{ font-size:24px; margin:0 0 10px; color:var(--fg) }
.wm-unlock > p{ color:var(--muted); margin:0 0 18px; line-height:1.55 }

/* Message list (real IMAP-backed rows) */
.wm-list{ display:flex; flex-direction:column }
.wm-list-status{
  display:flex; align-items:center; gap:10px;
  padding:24px 4px; color:var(--muted); font-size:13px;
}
.wm-msg-rows{ display:flex; flex-direction:column }
.wm-row{
  display:grid;
  grid-template-columns:34px 200px 1fr 90px;
  align-items:center; gap:14px;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  color:var(--fg); text-decoration:none;
  transition:background .1s ease;
  cursor:pointer;
}
.wm-row:hover{ background:rgba(255,255,255,.04) }
.wm-row.unread{ background:rgba(212,180,138,.04) }
.wm-row.unread .wm-row-from,
.wm-row.unread .wm-row-subject{ font-weight:600; color:var(--fg) }
.wm-row .wm-row-from{
  color:var(--fg); font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wm-row .wm-row-body{
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.wm-row .wm-row-subject{
  color:var(--fg); font-size:14px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0;
}
.wm-row .wm-attach{ color:var(--muted); font-size:13px; flex-shrink:0 }
.wm-row .wm-row-date{
  color:var(--muted); font-size:12px; text-align:right;
  white-space:nowrap;
}
.wm-row.unread .wm-row-date{ color:var(--fg); font-weight:600 }
.wm-star{
  background:none; border:none; cursor:pointer;
  font-size:18px; line-height:1; padding:6px;
  border-radius:50%; transition:background .12s ease, color .12s ease;
  color:var(--muted);
}
.wm-star:hover{ background:rgba(255,255,255,.06); color:var(--gold) }
.wm-row.starred .wm-star{ color:var(--gold) }

.wm-empty-small{
  padding:48px 24px;
  text-align:center;
  color:var(--muted);
}
.wm-empty-small strong{ color:var(--fg); font-size:16px }
.wm-empty-small p{ margin:8px 0 0; font-size:13px }

/* Single message view */
.wm-view{ display:flex; flex-direction:column; max-width:900px; margin:0 auto }
.wm-msg-actions{
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  padding:8px 0 14px;
}
.wm-msg-subject{
  font-size:22px; font-weight:600; color:var(--fg);
  margin:8px 0 14px; letter-spacing:-.01em;
}
.wm-msg-envelope{
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:16px;
}
.wm-msg-envelope .label{
  display:inline-block; min-width:44px;
  color:var(--muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  margin-right:10px;
}
.wm-msg-envelope .value{ color:var(--fg); font-size:14px }
.wm-msg-date{ margin-left:12px; color:var(--muted); font-size:12px }
.wm-msg-attachments{
  margin:8px 0 16px; padding:10px 14px;
  background:rgba(212,180,138,.04);
  border:1px dashed var(--line-2); border-radius:10px;
  font-size:13px;
}
.wm-attachment-chip{
  display:inline-block; margin:6px 8px 0 0; padding:4px 10px;
  background:var(--bg-3); border:1px solid var(--line); border-radius:14px;
  font-size:12px; color:var(--muted);
}
.wm-msg-html{
  width:100%; min-height:300px;
  border:1px solid var(--line); border-radius:10px;
  background:#fafafa;
}
.wm-msg-text{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px; line-height:1.6;
  color:var(--fg);
  white-space:pre-wrap; word-wrap:break-word;
  padding:14px 16px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px;
  margin:0;
}

/* Small variants of utility classes used in row actions */
.btn.small{ padding:6px 12px; font-size:13px }
.btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--fg) }
.btn.ghost:hover{ background:rgba(255,255,255,.04); border-color:var(--gold-2) }

/* Mobile tweaks for message list/view */
@media (max-width:720px){
  .wm-row{
    grid-template-columns:34px 1fr 80px;
    gap:8px;
  }
  .wm-row .wm-row-from{ display:none }
  .wm-msg-actions .btn{ padding:6px 10px; font-size:12px }
}

/* ════════════════════════════════════════════════════════════════════════════
   Heaven Eco Hub banner — compact single-line pill row at the top of the
   webmail main pane. Collapsible to a single line via the chevron toggle.
   ════════════════════════════════════════════════════════════════════════════ */
.wm-ecohub{
  display:flex; align-items:center; gap:12px;
  padding:8px 18px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(212,180,138,.04), transparent);
  min-height:42px;
  overflow:hidden;
}
.wm-ecohub-label{
  flex-shrink:0;
  font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2);
  white-space:nowrap;
}
.wm-ecohub-pills{
  display:flex; gap:6px;
  flex:1; min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
  padding-bottom:2px;
}
.wm-ecohub-pills::-webkit-scrollbar{ display:none }
.wm-ecohub.collapsed .wm-ecohub-pills{ display:none }

.wm-ecohub-pill{
  display:inline-flex; align-items:center; gap:6px;
  flex-shrink:0;
  padding:5px 11px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--fg);
  text-decoration:none;
  font-size:12px;
  line-height:1;
  transition:background .12s ease, border-color .15s ease, transform .12s ease, color .15s ease;
}
.wm-ecohub-pill:hover{
  background:color-mix(in srgb, var(--card-accent) 10%, transparent);
  border-color:color-mix(in srgb, var(--card-accent) 40%, var(--line));
  color:var(--card-accent, var(--gold-2));
  transform:translateY(-1px);
}
.wm-ecohub-pill:focus-visible{
  outline:2px solid var(--card-accent, var(--gold));
  outline-offset:2px;
}
.wm-ecohub-pill .wm-ecohub-icon{
  font-size:13px;
  line-height:1;
}
.wm-ecohub-pill .wm-ecohub-name{
  font-weight:500;
  letter-spacing:.005em;
  white-space:nowrap;
}

.wm-ecohub-toggle{
  flex-shrink:0;
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
  padding:4px 6px;
  border-radius:4px;
  transition:color .15s ease, background .15s ease;
  font-family:inherit;
}
.wm-ecohub-toggle:hover{
  color:var(--gold-2);
  background:rgba(212,180,138,.06);
}

@media (max-width:720px){
  .wm-ecohub{ padding:6px 14px }
  .wm-ecohub-label{ font-size:9px }
}

/* ─── Luna reply chips ─────────────────────────────────────────────────────
   3 AI-generated reply suggestions under each open message. Skeletons fade
   in while Claude generates; once ready, chips become clickable. */
.wm-luna{
  margin:20px 0 16px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:linear-gradient(135deg, rgba(212,180,138,.05), rgba(212,180,138,.02));
}
.wm-luna-header{
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.wm-luna-spark{
  font-size:14px; color:var(--gold-2);
  filter:drop-shadow(0 0 4px rgba(212,180,138,.6));
}
.wm-luna-header strong{
  font-size:13px; color:var(--fg);
  letter-spacing:.02em;
}
.wm-luna-sub{
  font-size:12px; color:var(--muted);
  margin-left:auto;
}
.wm-luna-chips{
  display:flex; flex-direction:column; gap:6px;
}
.wm-luna-chip{
  text-align:left;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:18px;
  color:var(--fg);
  font-family:inherit; font-size:13px;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
.wm-luna-chip:hover{
  background:rgba(212,180,138,.06);
  border-color:rgba(212,180,138,.3);
}
.wm-luna-chip:active{ transform:translateY(1px) }
.wm-luna-skeleton{
  height:38px;
  background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-size:200% 100%;
  animation:wm-skeleton 1.4s ease-in-out infinite;
  border-radius:18px;
}
@keyframes wm-skeleton{
  0%{ background-position:200% 0 }
  100%{ background-position:-200% 0 }
}
.wm-luna-empty{
  padding:8px 4px; color:var(--muted); font-size:12px; font-style:italic;
}

/* ─── Composer signature toggle ────────────────────────────────────────── */
.wm-compose-actions{
  display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;
  align-items:center;
}
.wm-sig-toggle{
  display:flex; align-items:center; gap:6px;
  margin-left:auto;
  color:var(--muted); font-size:12px;
  cursor:pointer;
  user-select:none;
}
.wm-sig-toggle input{ accent-color:var(--gold) }
.wm-sig-edit{
  color:var(--gold-2); font-size:12px; text-decoration:none;
}
.wm-sig-edit:hover{ text-decoration:underline }

/* ─── Attachment download chips (now clickable buttons) ───────────────── */
.wm-attachment-chip{
  display:inline-flex; align-items:center; gap:6px;
  margin:6px 8px 0 0; padding:5px 12px;
  background:var(--bg-3); border:1px solid var(--line); border-radius:14px;
  font-size:12px; color:var(--muted);
  cursor:pointer; font-family:inherit;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.wm-attachment-chip:hover:not(:disabled){
  background:rgba(212,180,138,.08);
  border-color:rgba(212,180,138,.3);
  color:var(--fg);
}
.wm-attachment-chip:disabled{ opacity:.5; cursor:not-allowed }

/* Composer (full-screen variant; later sessions will move it to an overlay) */
.wm-compose-pane{ max-width:780px; margin:8px auto 0 }
.wm-compose-pane .field input,
.wm-compose-pane .field textarea{
  font-family:inherit;
}
.wm-compose-body{
  width:100%;
  min-height:280px;
  padding:14px 16px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--fg);
  font-size:15px; line-height:1.6;
  font-family:inherit;
  resize:vertical;
}
.wm-compose-body:focus{
  outline:none;
  border-color:rgba(212,180,138,.4);
  background:var(--bg-3);
  box-shadow:0 0 0 4px rgba(212,180,138,.06);
}

@media (max-width:900px){
  .webmail{ grid-template-columns:220px 1fr }
  .wm-folder-title{ padding:14px 18px 8px }
  .wm-header{ padding:12px 18px }
  .wm-list-area{ padding:8px 18px 24px }
}
@media (max-width:640px){
  .webmail{ grid-template-columns:1fr; top:56px }
  .wm-sidebar{
    position:absolute; inset:0; right:auto; width:260px;
    transform:translateX(-100%);
    transition:transform .2s ease;
    z-index:5;
    background:var(--bg);
    box-shadow:8px 0 32px rgba(0,0,0,.4);
  }
  .webmail.sidebar-open .wm-sidebar{ transform:translateX(0) }
  .wm-account{ display:none }
}

/* Footer */
.footer{
  border-top:1px solid var(--line);
  padding:24px;
  font-size:13px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;
  max-width:980px;margin:0 auto;
}
.footer a{color:var(--gold-2);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Toasts */
.toasts{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:200;max-width:340px}
.toast{
  background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:12px 16px;font-size:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  animation:slideIn .2s ease;
}
.toast.success{border-color:rgba(124,201,124,.5)}
.toast.error{border-color:rgba(229,115,115,.5)}
@keyframes slideIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Spinner */
.spinner{
  display:inline-block;width:16px;height:16px;
  border:2px solid var(--line-2);border-top-color:var(--gold);
  border-radius:50%;animation:spin .8s linear infinite;
  vertical-align:middle;
}
.btn .spinner{border-color:rgba(0,0,0,.2);border-top-color:#0a0a0f}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-initial{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--muted);padding:80px 0}

/* Dashboard layout */
.dash-grid{display:grid;grid-template-columns:1fr;gap:20px}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;gap:12px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{color:var(--fg);font-weight:500;text-align:right}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tag.active{background:rgba(124,201,124,.14);color:var(--success)}
.tag.pending{background:rgba(229,165,99,.14);color:#f0c397}
.tag.paused{background:rgba(229,115,115,.14);color:var(--danger)}
.tag.free{background:rgba(255,255,255,.06);color:var(--muted)}
.tag.pro{background:rgba(212,180,138,.16);color:var(--gold-2)}
.tag.business{background:linear-gradient(135deg,rgba(212,180,138,.3),rgba(232,199,155,.2));color:var(--gold-2)}

/* Event list */
.events{display:flex;flex-direction:column;gap:0}
.event{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.event:last-child{border-bottom:none}
.event .event-time{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.event .event-body{flex:1}
.event .event-type{color:var(--gold-2);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}

@media (max-width:600px){
  .topbar{padding:14px 16px}
  .wrap{padding:32px 16px 64px}
  h1{font-size:28px}
  .copy-row .v{text-align:left}
  .copy-row{flex-wrap:wrap}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ════════════════════════════════════════════════════════════════════════════
   Composer v2 (Phase 1 + 2) — rich-text, attachments, CC/BCC,
   autocomplete, Luna prompt bar, selection menu, proofread bar.
   Composer takes over .wm-main on /compose. Drafts panel slots into
   .wm-sidebar (replacing the read-folder list).
   ════════════════════════════════════════════════════════════════════════════ */

/* Wider composer column — old pane was 780px max; v2 needs room for the
   toolbar + Luna chips + recipient autocomplete. */
.wm-compose-v2{ max-width:920px; margin:8px auto 0; padding:0 4px 32px }

/* Recipient field with chip-style entered addresses + autocomplete popup. */
.wm-recip{ position:relative }
.wm-recip-input-row{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:8px 10px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  min-height:42px;
  align-items:center;
  cursor:text;
}
.wm-recip-input-row:focus-within{
  border-color:rgba(212,180,138,.4);
  box-shadow:0 0 0 4px rgba(212,180,138,.06);
}
.wm-recip-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 4px 3px 10px;
  background:rgba(212,180,138,.12);
  border:1px solid rgba(212,180,138,.3);
  color:var(--gold-2);
  border-radius:14px;
  font-size:12.5px;
}
.wm-recip-chip.bad{ background:rgba(229,115,115,.12); border-color:rgba(229,115,115,.4); color:#f3b8b8 }
.wm-recip-chip-remove{
  background:none; border:none; color:inherit; cursor:pointer;
  font-size:16px; line-height:1; padding:0 6px; opacity:.7;
}
.wm-recip-chip-remove:hover{ opacity:1 }
.wm-recip-input{
  flex:1; min-width:140px;
  background:transparent;
  border:none; outline:none;
  color:var(--fg);
  font-family:inherit; font-size:14px;
  padding:4px 0;
}
.wm-recip-popup{
  position:absolute; z-index:20;
  left:0; right:0; top:100%;
  margin-top:4px;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  box-shadow:0 10px 32px rgba(0,0,0,.5);
  max-height:260px; overflow-y:auto;
  padding:4px;
}
.wm-recip-popup-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 10px;
  border-radius:6px;
  cursor:pointer; color:var(--fg);
  font-size:13.5px;
}
.wm-recip-popup-item:hover,
.wm-recip-popup-item.focused{ background:rgba(212,180,138,.08) }
.wm-recip-popup-name{ font-weight:500 }
.wm-recip-popup-addr{ color:var(--muted); font-size:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace }

/* CC/BCC toggle row */
.wm-ccbcc-toggle{
  display:flex; gap:14px;
  justify-content:flex-end;
  margin-top:-8px; margin-bottom:6px;
  font-size:12px;
}
.wm-ccbcc-toggle button{
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-family:inherit; font-size:12px;
  padding:2px 6px; border-radius:4px;
}
.wm-ccbcc-toggle button:hover{ color:var(--gold-2) }
.wm-ccbcc-toggle button.active{ color:var(--gold-2); font-weight:500 }

/* Rich-text toolbar */
.wm-rt-toolbar{
  display:flex; flex-wrap:wrap; gap:2px;
  padding:6px 8px;
  background:var(--bg-3);
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.wm-rt-toolbar button{
  background:none; border:none; cursor:pointer;
  color:var(--muted); font-family:inherit; font-size:14px;
  width:32px; height:30px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s ease, color .12s ease;
}
.wm-rt-toolbar button:hover{ background:rgba(255,255,255,.05); color:var(--fg) }
.wm-rt-toolbar button.active{ background:rgba(212,180,138,.16); color:var(--gold-2) }
.wm-rt-sep{ width:1px; background:var(--line); margin:4px 4px }

/* Rich-text editable body */
.wm-rt-body{
  width:100%;
  min-height:280px;
  padding:14px 16px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  color:var(--fg);
  font-size:15px; line-height:1.6;
  font-family:inherit;
  outline:none;
  overflow-y:auto;
  max-height:60vh;
}
.wm-rt-body:focus{ background:var(--bg-3) }
.wm-rt-body[data-empty="true"]::before{
  content:attr(data-placeholder);
  color:var(--muted);
  pointer-events:none;
}
.wm-rt-body blockquote{
  border-left:3px solid var(--line-2);
  margin:8px 0; padding:4px 12px;
  color:var(--muted);
}
.wm-rt-body a{ color:var(--gold-2) }
.wm-rt-body ul, .wm-rt-body ol{ padding-left:24px; margin:8px 0 }
.wm-rt-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--bg);
  padding:1px 6px; border-radius:4px; font-size:13px;
}

/* Luna prompt bar — above the body. */
.wm-luna-bar{
  display:flex; align-items:center; gap:8px;
  margin:14px 0 10px;
  padding:8px 10px;
  background:linear-gradient(180deg, rgba(212,180,138,.08), rgba(212,180,138,.02));
  border:1px solid rgba(212,180,138,.24);
  border-radius:var(--radius-sm);
}
.wm-luna-bar-spark{ font-size:16px; line-height:1 }
.wm-luna-bar-input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--fg); font-size:14px; font-family:inherit;
}
.wm-luna-bar-input::placeholder{ color:var(--muted); font-style:italic }
.wm-luna-bar-btn{
  background:var(--gold); color:#0a0a0f;
  border:none; padding:6px 12px;
  border-radius:6px; font-size:12px; font-weight:600;
  font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.wm-luna-bar-btn:hover{ background:var(--gold-2) }
.wm-luna-bar-btn:disabled{ opacity:.5; cursor:not-allowed }

/* Floating Luna selection menu — appears next to a text selection. */
.wm-luna-select-menu{
  position:absolute; z-index:30;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  padding:4px;
  display:flex; flex-wrap:wrap; gap:2px;
  max-width:340px;
}
.wm-luna-select-menu button{
  background:none; border:none; cursor:pointer;
  color:var(--fg); font-family:inherit; font-size:12px;
  padding:6px 10px; border-radius:5px;
}
.wm-luna-select-menu button:hover{ background:rgba(212,180,138,.12); color:var(--gold-2) }
.wm-luna-select-menu .sep{ width:1px; background:var(--line); margin:4px 2px }

/* Attachments tray */
.wm-att-tray{
  margin:14px 0 0;
  padding:14px;
  border:1.5px dashed var(--line-2);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.015);
  transition:background .12s ease, border-color .12s ease;
}
.wm-att-tray.dragover{
  background:rgba(212,180,138,.08);
  border-color:rgba(212,180,138,.5);
}
.wm-att-tray-empty{
  display:flex; align-items:center; gap:10px;
  color:var(--muted); font-size:13px;
  padding:6px 4px;
}
.wm-att-tray-empty .picker{
  background:none; border:1px solid var(--line-2); color:var(--gold-2);
  padding:4px 12px; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:12px;
}
.wm-att-tray-empty .picker:hover{ background:rgba(212,180,138,.06) }
.wm-att-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.wm-att-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 6px 5px 12px;
  background:var(--bg-3);
  border:1px solid var(--line-2);
  border-radius:14px;
  font-size:12px; color:var(--fg);
}
.wm-att-chip-meta{ color:var(--muted); font-size:11px }
.wm-att-chip-remove{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:16px; line-height:1; padding:0 6px;
}
.wm-att-chip-remove:hover{ color:var(--danger) }
.wm-att-chip.uploading{ opacity:.7 }
.wm-att-chip-progress{
  display:inline-block; width:46px; height:4px;
  background:var(--line); border-radius:2px; overflow:hidden;
  margin-left:6px;
}
.wm-att-chip-progress span{
  display:block; height:100%; background:var(--gold); transition:width .2s ease;
}
.wm-att-add{
  background:none; border:1px solid var(--line-2); color:var(--gold-2);
  padding:5px 14px; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:12px;
}
.wm-att-add:hover{ background:rgba(212,180,138,.06) }
.wm-att-total{ color:var(--muted); font-size:11px; margin-left:auto }

/* Pre-send proofread report */
.wm-proofread-bar{
  display:flex; align-items:flex-start; gap:10px;
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  font-size:13px;
}
.wm-proofread-bar.ok{ background:rgba(124,201,124,.08); border:1px solid rgba(124,201,124,.4); color:#b8e6b8 }
.wm-proofread-bar.warning{ background:rgba(229,165,99,.08); border:1px solid rgba(229,165,99,.4); color:#f0c397 }
.wm-proofread-bar.stop{ background:rgba(229,115,115,.08); border:1px solid rgba(229,115,115,.4); color:#f3b8b8 }
.wm-proofread-bar-body{ flex:1 }
.wm-proofread-bar-issues{ margin:8px 0 0; padding-left:20px; font-size:12.5px }
.wm-proofread-bar-issues li{ margin:4px 0 }
.wm-proofread-bar-issues .sev{
  display:inline-block; padding:1px 6px; border-radius:8px;
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  margin-right:6px; font-weight:700;
}
.wm-proofread-bar-issues .sev.high{ background:rgba(229,115,115,.2); color:#f3b8b8 }
.wm-proofread-bar-issues .sev.medium{ background:rgba(229,165,99,.2); color:#f0c397 }
.wm-proofread-bar-issues .sev.low{ background:rgba(255,255,255,.08); color:var(--muted) }
.wm-proofread-bar-actions{ display:flex; gap:6px }

/* Save-state pill (Saved · Saving · Unsaved) */
.wm-save-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; color:var(--muted);
  margin-left:auto; padding:3px 10px;
  background:rgba(255,255,255,.04); border-radius:10px;
}
.wm-save-pill.saving::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--gold); animation:pulse 1s infinite;
}
.wm-save-pill.saved::before{
  content:"✓"; color:var(--success); font-weight:700;
}
.wm-save-pill.unsaved::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--muted);
}
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }

/* Compose header — wraps subject + save state + minimise */
.wm-compose-header{
  display:flex; align-items:center; gap:10px;
  padding:18px 0 8px;
}
.wm-compose-header h2{ margin:0 }
.wm-compose-min{
  background:none; border:none; cursor:pointer;
  font-size:14px; color:var(--muted);
  padding:4px 10px; border-radius:6px;
}
.wm-compose-min:hover{ color:var(--gold-2); background:rgba(255,255,255,.05) }

/* Minimised floating chip — bottom-right, persistent across nav */
.wm-compose-mini{
  position:fixed; right:24px; bottom:24px;
  z-index:50;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:#0a0a0f;
  border-radius:24px;
  box-shadow:0 8px 26px rgba(212,180,138,.5);
  cursor:pointer;
  font-size:13px; font-weight:600;
  max-width:280px;
}
.wm-compose-mini-text{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wm-compose-mini-close{
  background:rgba(0,0,0,.18); border:none; color:#0a0a0f;
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:14px; line-height:1;
}
.wm-compose-mini-close:hover{ background:rgba(0,0,0,.32) }

/* Thread-summary bar (when replying) */
.wm-thread-summary{
  margin:14px 0;
  padding:12px 14px;
  background:rgba(212,180,138,.04);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13px; color:var(--fg);
}
.wm-thread-summary h4{
  margin:0 0 8px;
  font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold-2); font-weight:600;
}
.wm-thread-summary ul{ margin:0; padding-left:18px; color:var(--muted) }
.wm-thread-summary li{ margin:4px 0 }

/* Subject-suggest button — small icon next to subject input */
.wm-subj-row{ position:relative }
.wm-subj-suggest{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:rgba(212,180,138,.12); border:1px solid rgba(212,180,138,.3);
  color:var(--gold-2); padding:3px 10px; border-radius:14px;
  cursor:pointer; font-size:11px; font-family:inherit;
  display:inline-flex; align-items:center; gap:4px;
}
.wm-subj-suggest:hover{ background:rgba(212,180,138,.2) }
.wm-subj-suggest:disabled{ opacity:.5; cursor:not-allowed }
.wm-subj-popup{
  position:absolute; right:0; top:calc(100% + 4px); z-index:25;
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  box-shadow:0 10px 32px rgba(0,0,0,.5);
  padding:6px;
  min-width:280px; max-width:520px;
}
.wm-subj-popup-item{
  display:block; width:100%;
  padding:8px 10px;
  background:none; border:none; cursor:pointer;
  color:var(--fg); font-family:inherit; font-size:13.5px;
  text-align:left; border-radius:5px;
}
.wm-subj-popup-item:hover{ background:rgba(212,180,138,.08); color:var(--gold-2) }

/* Translate-target dropdown */
.wm-translate-bar{
  display:flex; align-items:center; gap:8px;
  margin:8px 0 0; padding:6px 4px;
  font-size:12px; color:var(--muted);
}
.wm-translate-bar select{
  background:var(--bg-3);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:6px;
  padding:3px 8px; font-size:12px; font-family:inherit;
}
.wm-translate-bar button{
  background:none; border:1px solid var(--line-2); color:var(--gold-2);
  padding:3px 10px; border-radius:10px; cursor:pointer;
  font-family:inherit; font-size:12px;
}
.wm-translate-bar button:hover{ background:rgba(212,180,138,.06) }
.wm-translate-bar button:disabled{ opacity:.5; cursor:not-allowed }

/* Drafts sidebar (replaces folder nav in compose mode) */
.wm-drafts-side{ display:flex; flex-direction:column; gap:2px; padding:4px 0 }
.wm-drafts-side-title{
  font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); padding:10px 14px 6px; font-weight:600;
}
.wm-drafts-item{
  display:block; padding:10px 14px;
  border-radius:8px;
  color:var(--fg); text-decoration:none;
  cursor:pointer; font-size:13px;
  border:1px solid transparent;
}
.wm-drafts-item:hover{ background:rgba(255,255,255,.04); border-color:var(--line) }
.wm-drafts-item.active{ background:rgba(212,180,138,.1); border-color:rgba(212,180,138,.3) }
.wm-drafts-item-subj{
  color:var(--fg); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wm-drafts-item-meta{
  display:flex; justify-content:space-between; gap:8px;
  color:var(--muted); font-size:11px; margin-top:3px;
}
.wm-drafts-empty{
  padding:14px; font-size:12px; color:var(--muted); font-style:italic;
}
.wm-drafts-new{
  display:flex; align-items:center; gap:8px;
  margin:6px 4px;
  padding:9px 14px;
  background:transparent;
  border:1px dashed var(--line-2);
  border-radius:10px;
  color:var(--gold-2); font-size:12px;
  cursor:pointer;
  font-family:inherit;
}
.wm-drafts-new:hover{ background:rgba(212,180,138,.06); border-color:rgba(212,180,138,.3) }

/* Keyboard-shortcut hints in the action bar */
.wm-compose-actions kbd{
  display:inline-block; padding:1px 5px; border-radius:3px;
  background:rgba(255,255,255,.08); border:1px solid var(--line-2);
  font-size:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);
  margin-left:6px;
}

/* Inline "Luna is thinking…" indicator (used inside buttons) */
.wm-luna-spinner{
  display:inline-block; width:11px; height:11px;
  border:1.5px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .9s linear infinite;
  margin-right:6px;
  vertical-align:-1px;
}

/* Tone-match button next to body */
.wm-tone-match{
  background:none; border:1px solid var(--line-2);
  color:var(--muted); padding:3px 10px; border-radius:10px;
  font-family:inherit; font-size:11px; cursor:pointer;
  margin-left:6px;
}
.wm-tone-match:hover{ background:rgba(212,180,138,.06); color:var(--gold-2) }
.wm-tone-match:disabled{ opacity:.5; cursor:not-allowed }

/* Send button + dropdown for schedule-send (placeholder, Phase 4) */
.wm-send-group{ display:inline-flex }

/* ─── RTL (Arabic) layout overrides ────────────────────────────────────────
   The composer renders in `dir="rtl"` when the active locale is Arabic.
   These rules flip the few asymmetric pieces — the rest of the layout uses
   logical properties or symmetric grids and handles RTL automatically. */
.wm-compose-v2[dir="rtl"] .wm-recip-chip-remove{ margin-left:0; margin-right:auto }
.wm-compose-v2[dir="rtl"] .wm-subj-suggest{
  right:auto; left:8px;
}
.wm-compose-v2[dir="rtl"] .wm-subj-popup{ right:auto; left:0 }
.wm-compose-v2[dir="rtl"] .wm-ccbcc-toggle{ justify-content:flex-start }
.wm-compose-v2[dir="rtl"] .wm-att-total{ margin-left:0; margin-right:auto }
.wm-compose-v2[dir="rtl"] .wm-save-pill{ margin-left:0; margin-right:auto }
.wm-compose-v2[dir="rtl"] .wm-thread-summary{
  border-left:none; border-right:3px solid var(--gold);
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
}
.wm-compose-v2[dir="rtl"] .wm-luna-bar-input{ text-align:right }
.wm-compose-v2[dir="rtl"] .wm-rt-body{ text-align:right }
.wm-compose-v2[dir="rtl"] .wm-rt-body[data-empty="true"]::before{
  /* Placeholder text reads RTL too. */
  display:inline-block; direction:rtl; text-align:right;
}
.wm-compose-v2[dir="rtl"] .wm-recip-popup-addr{ text-align:left }
.wm-compose-v2[dir="rtl"] .wm-compose-actions kbd{ margin-left:0; margin-right:6px }

/* Mobile composer adjustments */
@media (max-width:640px){
  .wm-compose-v2{ padding:0 4px 80px }
  .wm-rt-body{ min-height:200px; max-height:50vh }
  .wm-compose-mini{ right:12px; bottom:12px; max-width:220px }
  .wm-subj-suggest{ position:static; transform:none; margin-top:6px }
  .wm-luna-bar{ flex-wrap:wrap }
  .wm-luna-bar-input{ width:100%; order:2; margin-top:6px }
  .wm-luna-bar-btn{ order:1; margin-left:auto }
}