/* MailAfrrik v5 refinement layer */
:root{--panel:#ffffff;--panel-2:#f8faff;--panel-3:#eef4fb;--blue-glow:0 12px 34px rgba(23,105,224,.14);--focus:0 0 0 3px rgba(23,105,224,.15);--mobile-nav:0px}
body{background:radial-gradient(circle at 45% -20%,rgba(23,105,224,.08),transparent 34%),var(--bg)}
body.dark{--panel:#18212f;--panel-2:#1d2939;--panel-3:#263447}
.topbar{backdrop-filter:saturate(140%) blur(14px)}
.search-cluster{position:relative;min-width:0}.search-wrap{width:100%;background:linear-gradient(180deg,#eef4fb,#e8eff7);border:1px solid rgba(100,116,139,.07)}body.dark .search-wrap{background:linear-gradient(180deg,#223044,#1f2b3b)}
.search-options-panel{position:absolute;top:56px;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px;z-index:90}.search-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.search-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted);font-weight:700}.search-grid input{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 11px;background:var(--surface-soft);color:var(--ink);outline:0}.search-grid input:focus{border-color:var(--brand);box-shadow:var(--focus)}.search-switches{display:flex;gap:18px;flex-wrap:wrap;padding:14px 0 4px;font-size:12px}.search-switches label{display:flex;align-items:center;gap:7px}.search-actions{display:flex;justify-content:flex-end;gap:8px}.primary-btn,.ghost-btn{height:38px;border-radius:10px;padding:0 16px;font-weight:700;cursor:pointer}.primary-btn{background:var(--brand);color:#fff}.ghost-btn{border:1px solid var(--line);color:var(--muted)}
.command-trigger{height:32px;min-width:42px;border:1px solid var(--line);background:var(--surface);border-radius:9px;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}.command-trigger:hover{background:var(--surface-hover);color:var(--ink)}
.micro-icon{width:28px;height:28px;border-radius:50%;font-size:20px;color:var(--muted);cursor:pointer}.micro-icon:hover{background:var(--surface-hover);color:var(--brand)}
.mail-surface{box-shadow:0 10px 30px rgba(15,23,42,.055),0 1px 2px rgba(15,23,42,.04)}.main-toolbar{border-bottom:1px solid var(--line)}.mail-row{transition:background .12s ease,box-shadow .12s ease,transform .12s ease}.mail-row:hover{transform:translateY(-1px)}.mail-row .attachment-dot{width:15px;height:15px;margin-left:6px;vertical-align:-3px;opacity:.68}.mail-row .thread-count{margin-left:5px;color:var(--muted);font-size:11px}.mail-row.unread .thread-count{color:var(--ink)}
.message-content{background:linear-gradient(180deg,var(--surface),var(--panel-2))}.message-body{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 2px 10px rgba(15,23,42,.035)}.remote-image-blocked{display:inline-flex;padding:7px 10px;border:1px dashed var(--line-strong);border-radius:8px;color:var(--muted);font-size:11px;background:var(--surface-soft)}
.toggle-row{justify-content:space-between!important}.full-width{width:100%;justify-content:center;margin-top:14px}.account-detail-grid{border:1px solid var(--line)}
.command-palette{width:min(650px,calc(100vw - 28px));background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 80px rgba(15,23,42,.28);overflow:hidden;align-self:start;margin-top:11vh}.command-search{height:58px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line)}.command-search img{width:20px}.command-search input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}.command-search kbd{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:3px 6px;border-radius:6px}.command-results{max-height:390px;overflow:auto;padding:8px}.command-item{width:100%;height:46px;border-radius:10px;display:flex;align-items:center;gap:12px;padding:0 12px;cursor:pointer;text-align:left}.command-item:hover,.command-item.active{background:var(--brand-soft);color:var(--brand-deep)}.command-item img{width:18px}.command-item span{flex:1}.command-item small{color:var(--muted)}
.contact-suggestions{position:absolute;left:42px;right:52px;top:38px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:4;max-height:220px;overflow:auto}.recipient-row{position:relative}.contact-item{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:9px 12px;text-align:left;cursor:pointer}.contact-item:hover{background:var(--surface-soft)}.contact-initial{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-deep);font-size:11px;font-weight:800}.contact-item strong,.contact-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-item small{color:var(--muted);font-size:11px}
.attachment-tray{display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);background:var(--surface-soft)}.attachment-pill{max-width:260px;height:34px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:0 8px 0 10px;font-size:11px}.attachment-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-pill button{width:22px;height:22px;border-radius:50%;cursor:pointer}.attachment-pill button:hover{background:var(--surface-hover)}.compose-drop-zone{position:absolute;inset:44px 0 58px 0;z-index:9;background:rgba(23,105,224,.08);backdrop-filter:blur(3px);border:2px dashed var(--brand);display:grid;place-items:center;color:var(--brand);font-weight:800;font-size:18px}
.mobile-nav{display:none}
@media(max-width:700px){:root{--mobile-nav:66px}.mobile-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--mobile-nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);z-index:45;box-shadow:0 -10px 30px rgba(15,23,42,.08)}.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--muted)}.mobile-nav img{width:20px}.main-area{padding-bottom:var(--mobile-nav)}.compose-window{bottom:var(--mobile-nav)}.search-options-panel{position:fixed;left:8px;right:8px;top:64px}.search-grid{grid-template-columns:1fr}.command-trigger{display:none}.connection-pill{display:none}.message-body{padding:16px}.message-content{padding-bottom:calc(90px + var(--mobile-nav))}}

body.dark .brand-logo{content:url("/static/assets/branding/mailafrrik-logo-dark.svg")}