/* MailAfrrik V5 Final — refinement and productivity layer */
:root{--v5-accent:#0b57d0;--v5-accent-2:#0a47ad;--v5-cyan:#00a7a5;--v5-success:#137333;--v5-danger:#b3261e;--v5-warn:#b06000;--v5-glass:rgba(255,255,255,.78);--v5-radius:18px;--v5-row:48px}
body{min-height:100dvh;background:linear-gradient(135deg,rgba(11,87,208,.045),transparent 35%),radial-gradient(circle at 85% 10%,rgba(0,167,165,.055),transparent 24%),var(--bg)}
body.dark{--v5-glass:rgba(24,33,47,.82)}
.topbar{background:var(--v5-glass);border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent);box-shadow:0 1px 0 rgba(15,23,42,.03)}
.brand-logo{height:34px;max-width:176px}.sidebar{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 92%,var(--brand-soft)));border-right:1px solid var(--line)}
.compose-btn{box-shadow:0 5px 18px rgba(11,87,208,.16);transition:transform .16s ease,box-shadow .16s ease}.compose-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(11,87,208,.22)}
.nav-item{position:relative}.nav-item.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 4px 4px 0;background:var(--brand)}
.main-area{min-width:0}.mail-surface{border-radius:20px;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 88%,transparent)}
.mail-tabs{background:var(--surface);position:sticky;top:0;z-index:3}.mail-tab{transition:background .15s ease,color .15s ease}.mail-tab.active{background:linear-gradient(180deg,var(--brand-soft),color-mix(in srgb,var(--brand-soft) 55%,transparent))}
.mail-list{contain:content}.mail-row{min-height:var(--v5-row);grid-template-columns:38px 38px minmax(150px,210px) minmax(0,1fr) 90px;border-bottom-color:color-mix(in srgb,var(--line) 78%,transparent)}.mail-row:hover{z-index:1;box-shadow:0 3px 14px rgba(15,23,42,.08);background:var(--surface)}.mail-row.unread{background:color-mix(in srgb,var(--brand-soft) 32%,var(--surface))}.mail-row.selected{background:color-mix(in srgb,var(--brand-soft) 70%,var(--surface))}
.move-btn{height:32px;padding:0 10px;border-radius:8px;display:flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer}.move-btn img{width:18px}.move-btn:hover{background:var(--surface-hover);color:var(--ink)}
.move-menu{position:absolute;top:48px;left:188px;width:250px;max-height:350px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(15,23,42,.18);padding:7px;z-index:80}.move-menu button{width:100%;height:38px;padding:0 10px;border-radius:9px;text-align:left;display:flex;align-items:center;gap:9px;color:var(--ink);cursor:pointer}.move-menu button:hover{background:var(--surface-hover)}.move-menu img{width:17px}
.sync-pill{height:30px;padding:0 9px;border:1px solid var(--line);border-radius:999px;display:flex;gap:7px;align-items:center;font-size:11px;color:var(--muted);background:var(--surface)}.sync-orbit{width:9px;height:9px;border-radius:50%;border:2px solid color-mix(in srgb,var(--brand) 28%,transparent);border-top-color:var(--brand);animation:v5spin 1.5s linear infinite}.sync-pill.idle .sync-orbit{animation:none;border-color:var(--v5-success);background:var(--v5-success)}.sync-pill.error .sync-orbit{animation:none;border-color:var(--v5-danger);background:var(--v5-danger)}@keyframes v5spin{to{transform:rotate(360deg)}}
.offline-banner{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:999;height:38px;padding:0 14px;border-radius:999px;background:#202124;color:#fff;display:flex;align-items:center;gap:9px;box-shadow:0 8px 30px rgba(0,0,0,.22);font-size:12px}.offline-banner strong{color:#fbbc04}.offline-banner.hidden{display:none}
.thread-summary{padding:18px 24px 0;display:flex;align-items:center;gap:10px;color:var(--muted)}.thread-summary.hidden{display:none}.thread-summary strong{font-size:13px;color:var(--ink)}.thread-count-chip{border-radius:999px;background:var(--brand-soft);color:var(--brand-deep);padding:3px 8px;font-size:11px;font-weight:800}
.thread-stack{display:flex;flex-direction:column;gap:12px}.thread-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.03)}.thread-card-head{min-height:64px;padding:12px 16px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;cursor:pointer}.thread-card-head:hover{background:var(--surface-soft)}.thread-card-body{padding:0 16px 18px 64px}.thread-card.collapsed .thread-card-body{display:none}.thread-card .sender-avatar{width:36px;height:36px}.thread-card-meta strong,.thread-card-meta small{display:block}.thread-card-meta small{color:var(--muted);margin-top:3px}.thread-card-time{font-size:11px;color:var(--muted);white-space:nowrap}.thread-body-html,.thread-body-text{line-height:1.65;overflow-wrap:anywhere}.thread-body-text{white-space:pre-wrap}.thread-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mail-toolbar-progress{height:2px;position:absolute;left:0;right:0;bottom:0;overflow:hidden}.mail-toolbar-progress:after{content:"";display:block;height:100%;width:28%;background:var(--brand);animation:v5progress 1.15s ease-in-out infinite}@keyframes v5progress{0%{transform:translateX(-110%)}100%{transform:translateX(470%)}}
.compose-window{border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 24px 70px rgba(15,23,42,.28);border-radius:16px 16px 0 0}.compose-head{background:linear-gradient(135deg,#202124,#2e3238);color:#fff}.compose-body{line-height:1.55}.send-btn{background:linear-gradient(180deg,#0b57d0,#0a4fbd);box-shadow:0 3px 10px rgba(11,87,208,.2)}
.search-wrap:focus-within{box-shadow:0 0 0 1px var(--brand),0 7px 24px rgba(11,87,208,.12);background:var(--surface)}
.status{margin:8px 12px;border-radius:10px}.server-card{border:1px solid color-mix(in srgb,var(--line) 78%,transparent);background:color-mix(in srgb,var(--surface) 88%,var(--brand-soft));border-radius:14px}
@media(max-width:980px){.sync-pill{display:none}.mail-row{grid-template-columns:34px 34px minmax(120px,170px) minmax(0,1fr) 74px}.thread-card-body{padding-left:16px}}
@media(max-width:700px){.mail-surface{border-radius:0;border-left:0;border-right:0}.mail-row{grid-template-columns:34px 34px minmax(0,1fr) 60px;min-height:58px}.mail-row .sender{grid-column:3}.mail-row .subject-wrap{grid-column:3;grid-row:2}.mail-row .date{grid-column:4;grid-row:1}.thread-summary{padding:12px 14px 0}.thread-card-head{grid-template-columns:34px minmax(0,1fr);}.thread-card-time{grid-column:2}.thread-card-body{padding:0 14px 16px}.offline-banner{max-width:calc(100vw - 20px);white-space:nowrap;overflow:hidden}.offline-banner span{overflow:hidden;text-overflow:ellipsis}}