/* Webmail: a full-screen client like Gmail / Outlook on the web (three panes) and like their phone apps (one pane at a time,
   a left drawer for folders, avatar + swipe rows, a floating compose button, a bottom action bar when reading).
   Colours come from index.html's variables. 900px is the switch between the two layouts. */
#mailapp { position:fixed; inset:0; z-index:12; background:var(--bg); display:grid; grid-template-rows:auto 1fr; height:100vh; height:100dvh; -webkit-tap-highlight-color:transparent; }
#mailapp[hidden] { display:none !important; }
#mailapp button { touch-action:manipulation; }
.m-only { display:none !important; }

/* top bar */
.mt { display:flex; align-items:center; gap:8px; padding:6px 12px; padding-top:calc(6px + env(safe-area-inset-top)); background:var(--card); border-bottom:1px solid var(--line); }
.mt b { font-size:17px; white-space:nowrap; }
.mt .grow { flex:1; }
.mt input.msearch { flex:1; max-width:560px; min-width:0; font:inherit; font-size:16px; padding:9px 14px; border:1px solid transparent; border-radius:22px; background:#eef1f5; outline:0; }
.mt input.msearch:focus { background:#fff; border-color:var(--acc); }
.mbtn { min-height:40px; min-width:40px; padding:2px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:15px; color:var(--ink); }
.mbtn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.mbtn.danger { color:var(--bad); border-color:#f0b4ba; }
.mbtn.on { color:#b8860b; border-color:#e5c76b; background:#fff8e1; }
.mbtn.ghost { border-color:transparent; background:none; }
.mav { flex:none; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:#fff; font-weight:600; font-size:15px; text-transform:uppercase; }
.mav.sm { width:28px; height:28px; font-size:13px; }
.mchip { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:24px; background:#fff; padding:2px 10px 2px 3px; min-height:42px; max-width:280px; }
.mchip .tx { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; max-width:190px; }
.mchip .dot { position:relative; }
.mchip .dot i { position:absolute; top:-3px; right:-3px; background:var(--bad); color:#fff; border-radius:9px; font:600 10px/16px sans-serif; min-width:16px; text-align:center; padding:0 3px; }

.mbody { display:grid; grid-template-columns:248px minmax(300px,400px) 1fr; min-height:0; position:relative; }
.mside, .mlist, .mread { min-height:0; overflow-y:auto; background:var(--card); overscroll-behavior:contain; }
.mside { border-right:1px solid var(--line); padding:8px 6px 24px; background:#fafbfc; }
.mlist { border-right:1px solid var(--line); display:flex; flex-direction:column; position:relative; }
.mlist > * { flex-shrink:0; }   /* rows have overflow:hidden (swipe), so a flex column would otherwise squash them to fit */
.mscrim { display:none; }

/* sidebar / drawer */
.mside .compose { width:100%; min-height:46px; margin:2px 0 10px; border-radius:23px; font-size:16px; }
.mside .back { width:100%; text-align:left; margin-bottom:6px; }
.mnav { display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:4px 12px; border:0; border-radius:8px; background:none; text-align:left; color:var(--ink); font-size:15px; }
.mnav:hover { background:#eef1f5; }
.mnav.sel { background:#dbe8fd; font-weight:600; }
.mnav .lbl { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mnav .cnt { font-size:12px; color:var(--acc); font-weight:700; }
.mside h4 { margin:14px 12px 4px; font-size:12px; color:var(--mute); font-weight:500; }
.mside .addacc { margin-top:12px; width:100%; }

/* list */
.mltool { display:flex; align-items:center; gap:6px; padding:6px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:1; }
.mltool b { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.mptr { text-align:center; color:var(--mute); font-size:13px; height:0; overflow:hidden; transition:height .15s; }
.mswipe { position:relative; overflow:hidden; border-bottom:1px solid #eef0f3; }
.mswipe .u { position:absolute; top:0; bottom:0; display:flex; align-items:center; padding:0 22px; color:#fff; font-size:14px; font-weight:600; }
.mswipe .u.l { right:0; background:var(--bad); }
.mswipe .u.r { left:0; background:var(--acc); }
.mrow { position:relative; display:grid; grid-template-columns:44px 1fr auto; gap:1px 10px; padding:10px 12px; cursor:pointer; align-items:center; background:var(--card); touch-action:pan-y; user-select:none; }
.mrow:hover { background:#f6f8fb; }
.mrow.sel { background:#e7f0fe; }
.mrow .mav { grid-row:1 / span 2; }
.mrow .from { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.mrow .date { font-size:12px; color:var(--mute); white-space:nowrap; text-align:right; }
.mrow .subj { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:#4a525c; }
.mrow .star { border:0; background:none; font-size:19px; color:#c4c9d0; min-height:30px; min-width:30px; padding:0; text-align:right; }
.mrow .star.on { color:#e3a008; }
.mrow.isnew .from, .mrow.isnew .subj { font-weight:700; color:var(--ink); }
.mrow .acc { font-size:11px; color:var(--mute); background:#eef0f3; border-radius:6px; padding:0 5px; margin-left:6px; font-weight:400; }
.mempty { padding:40px 16px; text-align:center; color:var(--mute); }
.mpager { display:flex; align-items:center; gap:8px; justify-content:center; padding:10px; margin-top:auto; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--card); }
.mpager span { font-size:13px; color:var(--mute); }
.merr { margin:12px; padding:10px 12px; border:1px solid #f0b4ba; background:#fff5f5; border-radius:8px; color:#8a1520; font-size:14px; }
.mskel { height:64px; margin:6px 12px; border-radius:8px; background:linear-gradient(90deg,#eef0f3,#f6f7f9,#eef0f3); background-size:200% 100%; animation:msk 1.2s linear infinite; }
@keyframes msk { to { background-position:-200% 0; } }

/* reading */
.mread { position:relative; }
.mtool { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); z-index:1; }
.mhdr { padding:14px 18px 6px; }
.mhdr h2 { margin:0 0 10px; font-size:20px; line-height:1.3; word-break:break-word; }
.mhdr .from { display:flex; align-items:center; gap:10px; }
.mhdr .from .meta { min-width:0; flex:1; }
.mhdr .from .meta b { display:block; font-size:15px; }
.mhdr .from .meta span { display:block; font-size:12px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mhdr .det { font-size:13px; color:var(--mute); margin-top:6px; display:grid; gap:2px; }
.mhdr .det b { color:var(--ink); font-weight:600; }
.mhdr .tog { border:0; background:none; color:var(--acc); font-size:13px; padding:0; min-height:28px; }
.mimg { margin:8px 18px 0; padding:8px 12px; background:#fff8e1; border:1px solid #f0d58a; border-radius:8px; font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.matts { display:flex; gap:8px; padding:8px 18px; overflow-x:auto; }
.matt { flex:none; display:inline-flex; gap:6px; align-items:center; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:#fafbfc; color:var(--ink); text-decoration:none; font-size:13px; max-width:240px; min-height:40px; }
.matt span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matt em { color:var(--mute); font-style:normal; }
.mframe { width:100%; border:0; display:block; min-height:120px; }
.mnone { height:100%; display:flex; align-items:center; justify-content:center; color:var(--mute); padding:24px; text-align:center; }
.mbar { display:none; }

/* compose */
.mcomp { position:fixed; right:24px; bottom:0; width:min(640px,100vw); max-height:88vh; z-index:14; background:var(--card); border:1px solid var(--line); border-radius:12px 12px 0 0; box-shadow:0 -4px 24px rgba(0,0,0,.22); display:flex; flex-direction:column; }
.mcomp .ch { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#1f2328; color:#fff; border-radius:12px 12px 0 0; }
.mcomp .ch b { flex:1; font-weight:500; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcomp .ch button { background:none; border:0; color:#fff; font-size:18px; min-width:40px; min-height:40px; }
.mcomp .ch .hsend { background:var(--acc); border-radius:20px; font-size:15px; padding:0 18px; min-height:38px; }
.mcomp .cf { overflow-y:auto; padding:4px 12px 8px; flex:1; }
.mcomp .fr { display:flex; align-items:center; gap:6px; border-bottom:1px solid #eef0f3; }
.mcomp .fr label { width:50px; font-size:13px; color:var(--mute); flex:none; }
.mcomp .fr input, .mcomp .fr select { flex:1; min-width:0; font:inherit; font-size:16px; padding:11px 4px; border:0; outline:0; background:transparent; }
.mcomp .fr .more { border:0; background:none; color:var(--acc); font-size:13px; min-height:40px; }
.mcomp textarea { width:100%; min-height:240px; border:0; outline:0; resize:vertical; font:16px/1.6 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif; padding:10px 4px; }
.mcomp .ca { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 6px; }
.mcomp .chip { display:inline-flex; gap:6px; align-items:center; background:#eef1f5; border-radius:16px; padding:4px 12px; font-size:13px; }
.mcomp .chip button { border:0; background:none; color:var(--mute); padding:0 2px; min-height:24px; min-width:24px; }
.mcomp .cb { display:flex; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid var(--line); }
.mcomp .cb .grow { flex:1; font-size:12px; color:var(--mute); }

/* account picker (popover on desktop, bottom sheet on phones) and small dialogs */
.mshade { position:fixed; inset:0; z-index:15; background:rgba(0,0,0,.28); }
.msheet { position:fixed; z-index:16; top:56px; right:12px; width:340px; max-height:75vh; overflow-y:auto; background:var(--card); border-radius:14px; box-shadow:0 8px 32px rgba(0,0,0,.25); padding:8px; }
.msheet .acc { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:6px 10px; border:0; border-radius:10px; background:none; text-align:left; color:var(--ink); }
.msheet .acc:hover { background:#f1f4f8; }
.msheet .acc.sel { background:#e7f0fe; }
.msheet .acc .meta { flex:1; min-width:0; }
.msheet .acc .meta b { display:block; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msheet .acc .meta span { display:block; font-size:12px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msheet .acc .n { background:var(--acc); color:#fff; border-radius:10px; font-size:12px; font-weight:600; padding:0 7px; line-height:20px; }
.msheet .acc .gear { border:0; background:none; font-size:18px; color:var(--mute); min-width:40px; min-height:40px; }
.msheet hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
.mmodal { position:fixed; inset:0; z-index:17; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:12px; }
.mmodal > div { background:var(--card); border-radius:14px; padding:16px; width:min(480px,100%); max-height:90vh; overflow-y:auto; }
.mmodal h3 { margin:0 0 8px; }
.mprov { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.mprov button { border:1px solid var(--line); background:#fff; border-radius:18px; padding:2px 14px; min-height:40px; font-size:14px; }
.mfab { display:none; }

/* phones: one pane at a time, folders in a left drawer, bottom action bar, full-screen compose */
@media (max-width: 900px) {
  .m-only { display:revert !important; }
  .d-only { display:none !important; }
  #mailapp[data-pane="read"] > .mt { display:none; }
  .mbody { grid-template-columns:1fr; }
  .mlist, .mread { border-right:0; }
  #mailapp[data-pane="list"] .mread, #mailapp[data-pane="read"] .mlist { display:none; }
  .mside { position:fixed; z-index:15; top:0; bottom:0; left:0; width:min(84vw,330px); transform:translateX(-102%); transition:transform .22s ease; padding-top:calc(8px + env(safe-area-inset-top)); padding-bottom:calc(24px + env(safe-area-inset-bottom)); box-shadow:2px 0 16px rgba(0,0,0,.2); background:var(--card); }
  #mailapp.drawer .mside { transform:none; }
  #mailapp.drawer .mscrim { display:block; position:fixed; inset:0; z-index:14; background:rgba(0,0,0,.35); }
  .mt { gap:6px; padding:6px 8px; padding-top:calc(6px + env(safe-area-inset-top)); }
  .mt input.msearch { max-width:none; }
  .mchip { padding:0; border:0; background:none; min-height:44px; }
  .mchip .tx { display:none; }
  .mav { width:40px; height:40px; }
  .mav.sm { width:30px; height:30px; }
  .mrow { padding:12px 14px; grid-template-columns:44px 1fr auto; }
  .mrow .from { font-size:16px; }
  .mrow .subj { font-size:14px; }
  .mrow:hover { background:var(--card); }
  .mrow.sel { background:var(--card); }
  .mpager { position:static; margin-top:0; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }   /* at the end of the list, not floating over the rows */
  .mlist { padding-bottom:84px; }
  .mfab { display:flex; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:6; align-items:center; gap:6px; min-height:52px; padding:0 20px; border:0; border-radius:26px; background:var(--acc); color:#fff; font-size:16px; font-weight:600; box-shadow:0 4px 14px rgba(31,111,235,.45); }
  #mailapp[data-pane="read"] .mfab, #mailapp.drawer .mfab { display:none; }
  .mtool { flex-wrap:nowrap; padding:6px 8px; padding-top:calc(6px + env(safe-area-inset-top)); }
  .mtool .grow { flex:1; }
  .mhdr { padding:12px 16px 4px; }
  .mhdr h2 { font-size:19px; }
  .mimg, .matts { margin-left:16px; margin-right:16px; }
  .matts { margin:0; padding:8px 16px; }
  .mread { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .mbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:5; gap:8px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line); }
  .mbar button { flex:1; min-height:46px; border-radius:23px; font-size:15px; }
  .mcomp { right:0; left:0; top:0; bottom:0; width:100%; max-height:none; height:100vh; height:100dvh; border-radius:0; border:0; }
  .mcomp .ch { border-radius:0; padding-top:calc(8px + env(safe-area-inset-top)); }
  .mcomp .cf { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .mcomp textarea { min-height:50vh; }
  .mcomp .cb { padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  .mcomp .cb .primary { display:none; }
  .msheet { top:auto; left:0; right:0; bottom:0; width:auto; max-height:80vh; border-radius:18px 18px 0 0; padding:10px 10px calc(14px + env(safe-area-inset-bottom)); }
  .msheet::before { content:""; display:block; width:40px; height:4px; border-radius:2px; background:#d0d5dc; margin:0 auto 8px; }
  .msheet .acc { min-height:60px; }
  .mmodal { align-items:flex-end; padding:0; }
  .mmodal > div { width:100%; border-radius:18px 18px 0 0; max-height:92vh; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
}
@media (hover: none) { .mrow:hover, .mnav:hover, .msheet .acc:hover { background:inherit; } }

.mcomp input::-webkit-calendar-picker-indicator { display:none !important; }   /* the datalist arrow is noise on an address field */