:root{
  color-scheme:light;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --navy:#071a33;
  --navy-2:#0c2e59;
  --blue:#2563eb;
  --blue-2:#1d4ed8;
  --cyan:#38bdf8;
  --bg:#f3f6fa;
  --surface:#fff;
  --surface-2:#f8fafc;
  --surface-3:#eef3f8;
  --text:#17263b;
  --muted:#66788f;
  --soft:#8b9aad;
  --border:#dfe6ee;
  --border-strong:#cad5e2;
  --danger:#d92d48;
  --success:#0f9f6e;
  --warning:#d88b0b;
  --shadow:0 12px 34px rgba(24,49,79,.08);
  --row-height:76px;
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1520;
  --surface:#172130;
  --surface-2:#1d2939;
  --surface-3:#263448;
  --text:#e5edf7;
  --muted:#a2b1c4;
  --soft:#7e8ea3;
  --border:#2c3b4e;
  --border-strong:#3b4b60;
  --shadow:none;
}

html[data-density="compact"]{--row-height:61px}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text)}
body{min-width:320px;font-synthesis:none;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button,input,textarea,select{outline:none}
button{color:inherit}
img,svg{display:block;max-width:100%}
.hidden{display:none!important}
.icon-svg{flex:0 0 auto}

/* Brand */
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-symbol{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-weight:950;font-size:1.15rem}
.brand-words{display:grid;line-height:1}
.brand-words strong{font-size:.92rem;letter-spacing:.06em}
.brand-words span{margin-top:5px;color:var(--cyan);font-size:.57rem;font-weight:900;letter-spacing:.25em}

/* Common */
.primary-button,.secondary-button,.danger-button{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border-radius:10px;font-size:.75rem;font-weight:850}
.primary-button{border:0;background:var(--blue);color:#fff}
.primary-button:hover{background:var(--blue-2)}
.secondary-button{border:1px solid var(--border);background:var(--surface);color:var(--text)}
.danger-button{border:1px solid #f0b6c2;background:#fff3f5;color:var(--danger)}
.error-box,.warning-box{padding:11px 13px;border-radius:10px;font-size:.72rem;line-height:1.5}
.error-box{border:1px solid #f0bbc5;background:#fff2f4;color:#a82139}
.warning-box{border:1px solid #efd497;background:#fff9e8;color:#755409}

/* Boot */
.boot-screen{height:100dvh;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--bg)}
.boot-screen p{margin:0;color:var(--muted);font-size:.75rem;font-weight:750}
.boot-loader{display:flex;gap:6px}
.boot-loader span{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:bootPulse 1s infinite ease-in-out}
.boot-loader span:nth-child(2){animation-delay:.13s}.boot-loader span:nth-child(3){animation-delay:.26s}
@keyframes bootPulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}

/* Login */
.login-page{height:100dvh;overflow:auto;padding:14px;background:linear-gradient(145deg,#eaf1fa,#f5f8fc)}
.login-shell{width:min(1260px,100%);min-height:min(690px,calc(100dvh - 28px));margin:auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);overflow:hidden;border:1px solid #d5dfeb;border-radius:26px;background:#fff;box-shadow:0 28px 80px rgba(8,34,72,.14)}
.login-visual{position:relative;min-height:650px;overflow:hidden;padding:34px 40px;color:#fff;background:linear-gradient(145deg,#06152e,#0a3677 68%,#0a5caf)}
.login-visual::before{content:"";position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);background-size:48px 48px}
.login-brand,.login-message,.login-mascot{position:relative;z-index:2}
.login-brand{display:flex;align-items:center;justify-content:space-between}
.login-brand .brand{color:#fff}
.secure-badge{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.08);font-size:.62rem;font-weight:800;color:#d7e9ff}
.login-message{width:61%;margin-top:76px}
.kicker,.form-kicker{display:block;color:#79dcff;font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.login-message h1{margin:17px 0;font-size:clamp(2.75rem,4.4vw,4.95rem);line-height:.94;letter-spacing:-.06em}
.login-message h1 em{color:#7bdcff;font-style:normal}
.login-message p{margin:0;color:#c4d8f1;font-size:.94rem;line-height:1.67}
.login-points{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.login-points span{display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:rgba(255,255,255,.07);font-size:.63rem;font-weight:800}
.login-mascot{position:absolute;right:14px;bottom:-7px;width:35%;height:59%;display:grid;place-items:end center}
.login-mascot img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 20px rgba(0,0,0,.18))}
.login-form-wrap{display:grid;place-content:center;padding:42px 48px;background:#fff}
.login-form{width:min(405px,100%);display:grid;gap:14px}
.mobile-login-brand{display:none}
.login-form h2{margin:2px 0 0;color:var(--navy);font-size:2rem;letter-spacing:-.04em}
.login-form>p{margin:-6px 0 4px;color:#75869a;font-size:.8rem;line-height:1.55}
.login-form label>span{display:block;margin-bottom:6px;color:#415875;font-size:.69rem;font-weight:850}
.login-input{min-height:50px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #d8e3ef;border-radius:12px;background:#f8fafc}
.login-input:focus-within{border-color:#7faef0;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.09)}
.login-input svg{color:#7890ab}.login-input input{min-width:0;width:100%;height:48px;border:0;background:transparent;color:#17263b;font-size:.92rem}
.login-input button{border:0;background:none;color:var(--blue);font-size:.64rem;font-weight:900}
.remember-line{display:flex!important;align-items:center;gap:8px;color:#637891!important;font-size:.67rem!important;font-weight:700!important}
.remember-line input{accent-color:var(--blue)}
.login-submit{width:100%;min-height:49px}
.privacy-note{color:#8a9aad;text-align:center;font-size:.61rem;line-height:1.5}

/* Workspace layout */
.workspace-shell{height:100dvh;display:grid;grid-template-columns:246px minmax(0,1fr);background:var(--bg)}
.workspace-sidebar{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:14px;padding:18px 14px 14px;color:#dbe8f6;background:#081a35;border-right:1px solid rgba(255,255,255,.04)}
.workspace-sidebar>header{display:flex;align-items:center;justify-content:space-between;padding:0 7px}
.workspace-sidebar .brand{color:#fff}
.sidebar-mobile-close{display:none;width:36px;height:36px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff}
.compose-main{min-height:48px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:13px;background:#fff;color:#13325a;font-size:.76rem;font-weight:900;box-shadow:0 8px 20px rgba(0,0,0,.13)}
.primary-nav,.secondary-nav{min-height:0;overflow:auto;display:grid;align-content:start;gap:2px;scrollbar-width:thin}
.nav-item{min-height:39px;display:flex;align-items:center;gap:11px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#a9bfd9;text-align:left;font-size:.7rem;font-weight:760}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}.nav-item.active{background:#163b70;color:#fff;box-shadow:inset 3px 0 0 #5dd7ff}
.nav-item.sub{min-height:35px;padding-left:15px;font-size:.66rem}
.label-dot{width:10px;height:10px;border-radius:3px;background:var(--label);flex:0 0 auto}.label-dot.large{width:14px;height:14px}
.sidebar-section-title{display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:#7590b1;font-size:.58rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.sidebar-section-title button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#8facce}
.sidebar-empty{padding:9px 14px;color:#7890ad;font-size:.58rem;line-height:1.45}
.sidebar-footer{display:grid;gap:4px;padding-top:9px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-footer>button{min-height:36px;display:flex;align-items:center;gap:10px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#9db5d1;font-size:.66rem;font-weight:760}
.sidebar-footer>button:hover{background:rgba(255,255,255,.06);color:#fff}
.account-mini{min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr) 31px;align-items:center;gap:8px;margin-top:7px;padding:9px;border-radius:11px;background:#0e294e}
.account-mini>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:.68rem;font-weight:900}
.account-mini div{min-width:0;display:grid;gap:2px}.account-mini strong,.account-mini small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-mini strong{font-size:.67rem}.account-mini small{color:#87a1bf;font-size:.54rem}
.account-mini button{width:31px;height:31px;display:grid;place-items:center;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:#a8c1dc}
.workspace-main{min-width:0;min-height:0;display:grid;grid-template-rows:66px minmax(0,1fr)}
.topbar{min-width:0;display:grid;grid-template-columns:auto minmax(300px,680px) 1fr auto auto auto;align-items:center;gap:9px;padding:9px 15px;border-bottom:1px solid var(--border);background:var(--surface)}
.top-icon{width:39px;height:39px;display:grid;place-items:center;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted)}
.top-icon:hover{border-color:var(--border);background:var(--surface-2);color:var(--text)}
.menu-trigger{display:none}
.global-search{height:44px;display:flex;align-items:center;gap:9px;padding:0 8px 0 13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.global-search:focus-within{border-color:#8bb4eb;background:var(--surface);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.global-search>span{color:var(--soft)}.global-search input{min-width:0;width:100%;border:0;background:transparent;color:var(--text);font-size:.77rem}.global-search select{height:29px;max-width:95px;border:0;border-left:1px solid var(--border);padding-left:7px;background:transparent;color:var(--muted);font-size:.59rem;font-weight:800}.global-search button{width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--soft)}
.mail-stage{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(390px,430px) minmax(0,1fr) 0;gap:11px;padding:11px;overflow:hidden;background:var(--bg);transition:grid-template-columns .2s}
.mail-stage:has(.utility-column.open){grid-template-columns:minmax(360px,410px) minmax(0,1fr) 285px}
.mail-column,.reader-column,.utility-column{min-width:0;min-height:0;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow)}
.mail-column{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden}
.reader-column{overflow:auto;scrollbar-width:thin}
.utility-column{overflow:hidden;border-width:0;opacity:0;pointer-events:none;transform:translateX(10px);transition:opacity .18s,transform .18s}
.utility-column.open{border-width:1px;opacity:1;pointer-events:auto;transform:none}

/* Toolbars */
.mail-toolbar{min-height:61px;border-bottom:1px solid var(--border);background:var(--surface)}
.standard-toolbar,.bulk-toolbar{height:100%;display:flex;align-items:center;gap:8px;padding:9px 11px}
.standard-toolbar>div{display:grid;gap:2px}.standard-toolbar h1{margin:0;font-size:.96rem;letter-spacing:-.02em}.standard-toolbar small{color:var(--soft);font-size:.56rem}
.toolbar-spacer{flex:1}.select-toggle,.standard-toolbar button,.bulk-toolbar button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted)}
.standard-toolbar button:hover,.bulk-toolbar button:hover,.select-toggle:hover{background:var(--surface-3);color:var(--text)}
.toolbar-button{width:auto!important;display:flex!important;grid-auto-flow:column;gap:6px;padding:0 9px}.toolbar-button span{font-size:.59rem;font-weight:800}
.bulk-toolbar strong{font-size:.7rem}.bulk-toolbar{background:#edf5ff;color:#153c70}
html[data-theme="dark"] .bulk-toolbar{background:#1c3656;color:#dcecff}
.category-tabs{min-height:44px;display:flex;align-items:stretch;border-bottom:1px solid var(--border);background:var(--surface)}
.category-tabs[hidden]{display:none}
.category-tabs button{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--muted);font-size:.61rem;font-weight:800}
.category-tabs button:hover{background:var(--surface-2)}.category-tabs button.active{color:var(--blue)}.category-tabs button.active::after{content:"";position:absolute;right:16%;bottom:0;left:16%;height:3px;border-radius:3px 3px 0 0;background:var(--blue)}

/* Message list */
.message-list{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--surface)}
.mail-row{position:relative;min-height:var(--row-height);display:grid;grid-template-columns:25px 25px 24px 39px minmax(0,1fr);gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface);content-visibility:auto;contain-intrinsic-size:auto var(--row-height)}
.mail-row:hover{background:var(--surface-2)}.mail-row.unread{background:#fbfdff}html[data-theme="dark"] .mail-row.unread{background:#192534}.mail-row.selected{background:#eaf3ff}html[data-theme="dark"] .mail-row.selected{background:#213a58}.mail-row.opened::before{content:"";position:absolute;top:7px;bottom:7px;left:0;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}
.row-check,.row-star,.row-important{width:25px;height:25px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#9aa9bb}.row-star.active{color:#e6a116}.row-important.active{color:#e0980d}.row-check:hover,.row-star:hover,.row-important:hover{background:var(--surface-3);color:var(--text)}
.row-avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#2563eb,#38bdf8);color:#fff;font-size:.62rem;font-weight:900}
.row-main{min-width:0;cursor:pointer}.row-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.row-head strong{overflow:hidden;color:var(--text);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.mail-row.unread .row-head strong,.mail-row.unread .row-subject span{font-weight:900}.row-head time{color:var(--soft);font-size:.55rem;font-weight:750}.row-subject{min-width:0;display:flex;align-items:center;gap:5px;margin-top:3px;color:#43566f}.row-subject span{overflow:hidden;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.row-meta{min-width:0;display:flex;align-items:center;gap:5px;margin-top:3px;overflow:hidden}.row-meta>span{overflow:hidden;color:var(--soft);font-size:.53rem;text-overflow:ellipsis;white-space:nowrap}.row-meta i{flex:0 0 auto;padding:2px 5px;border-radius:999px;color:var(--label);background:color-mix(in srgb,var(--label) 11%,transparent);font-size:.48rem;font-style:normal;font-weight:800}.row-meta b{flex:0 0 auto;display:flex;align-items:center;gap:3px;color:#9a6b08;font-size:.48rem}
.row-actions{position:absolute;right:8px;display:none;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:9px;background:var(--surface);box-shadow:0 5px 14px rgba(29,52,82,.09)}.mail-row:hover .row-actions{display:flex}.row-actions button{width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--muted)}.row-actions button:hover{background:var(--surface-3);color:var(--text)}
.list-footer{min-height:42px;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border);background:var(--surface-2);color:var(--soft);font-size:.56rem}.list-footer button{min-height:31px;padding:0 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:.58rem;font-weight:800}
.list-loading{padding:7px}.skeleton-row{height:68px;display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;border-bottom:1px solid var(--border);opacity:calc(1 - var(--i)*.06)}.skeleton-row span:first-child{width:36px;height:36px;border-radius:50%;background:var(--surface-3)}.skeleton-row span:nth-child(2){height:10px;border-radius:6px;background:var(--surface-3)}.skeleton-row span:nth-child(3){display:none}
.empty-mail{height:100%;display:grid;place-content:center;justify-items:center;padding:25px;text-align:center}.empty-mail picture{width:76px;height:76px;overflow:hidden;border-radius:25px;background:#e7f2ff}.empty-mail img{width:140%;height:140%;max-width:none;object-fit:contain;transform:translate(-14%,-5%)}.empty-mail h2{margin:16px 0 5px;font-size:.95rem}.empty-mail p{max-width:300px;margin:0 0 16px;color:var(--muted);font-size:.68rem;line-height:1.55}

/* Reader */
.reader-empty{height:100%;display:grid;place-content:center;justify-items:center;padding:35px;text-align:center}.reader-empty-icon{width:70px;height:70px;display:grid;place-items:center;border-radius:22px;background:var(--surface-3);color:var(--blue)}.reader-empty h2{margin:17px 0 5px;font-size:1rem}.reader-empty p{max-width:380px;margin:0;color:var(--muted);font-size:.7rem;line-height:1.55}.shortcut-hints{display:flex;gap:10px;margin-top:18px}.shortcut-hints span{display:flex;align-items:center;gap:5px;color:var(--soft);font-size:.55rem}.shortcut-hints kbd{padding:3px 5px;border:1px solid var(--border);border-radius:5px;background:var(--surface-2);color:var(--text);font-size:.52rem}
.reader-loading{height:100%;display:grid;place-content:center;justify-items:center;gap:12px;color:var(--muted);font-size:.68rem}.reader-loading span{width:31px;height:31px;border:3px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.reader-card{min-height:100%;background:var(--surface)}
.reader-toolbar{position:sticky;top:0;z-index:4;min-height:55px;display:flex;align-items:center;justify-content:space-between;padding:8px 13px;border-bottom:1px solid var(--border);background:var(--surface)}
.reader-back{display:none;transform:rotate(180deg)}.reader-actions{display:flex;align-items:center;gap:4px;margin-left:auto}.reader-actions button,.reader-back{min-height:34px;display:flex;align-items:center;gap:6px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.58rem;font-weight:800}.reader-actions button:hover,.reader-back:hover{background:var(--surface-3);color:var(--text)}
.reader-header{padding:25px 28px 18px;border-bottom:1px solid var(--border)}.reader-title-line{display:flex;align-items:flex-start;gap:10px}.reader-title-line h1{flex:1;margin:0;color:var(--text);font-size:clamp(1.25rem,2vw,1.8rem);line-height:1.25;letter-spacing:-.035em}.reader-star{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:#a5b2c2}.reader-star.active{color:#e5a217}
.sender-line{display:grid;grid-template-columns:45px minmax(0,1fr) 34px;gap:11px;align-items:center;margin-top:20px}.sender-avatar{width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:.68rem;font-weight:900}.sender-line>div:nth-child(2){min-width:0;display:grid;gap:2px}.sender-line strong{font-size:.72rem}.sender-line span,.sender-line small{overflow:hidden;color:var(--muted);font-size:.58rem;text-overflow:ellipsis;white-space:nowrap}.sender-line>button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted)}
.remote-images{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 13px;border-bottom:1px solid #efd99b;background:#fff8e3;color:#79580c;font-size:.61rem;font-weight:700}.remote-images button{padding:5px 8px;border:1px solid #e5ca76;border-radius:7px;background:#fff;color:#735300;font-size:.57rem;font-weight:850}
.email-frame{display:block;width:calc(100% - 48px);min-height:430px;margin:20px 24px;border:0;background:#fff}
.reader-attachments{padding:0 28px 24px}.reader-attachments h3{display:flex;align-items:center;gap:7px;font-size:.7rem}.reader-attachments>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.reader-attachments a{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr) 20px;gap:9px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);text-decoration:none}.reader-attachments a>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#e7f1ff;color:var(--blue)}.reader-attachments a div{min-width:0;display:grid;gap:2px}.reader-attachments strong{overflow:hidden;font-size:.62rem;text-overflow:ellipsis;white-space:nowrap}.reader-attachments small{color:var(--soft);font-size:.52rem}
.smart-replies{display:flex;flex-wrap:wrap;gap:7px;padding:0 28px 20px}.smart-replies button{min-height:34px;padding:0 12px;border:1px solid #bcd3ef;border-radius:999px;background:var(--surface);color:var(--blue);font-size:.59rem;font-weight:800}.smart-replies button:hover{background:#edf5ff}
.reader-productivity{display:flex;flex-wrap:wrap;gap:7px;padding:16px 28px;border-top:1px solid var(--border);background:var(--surface-2)}.reader-productivity button{min-height:33px;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--muted);font-size:.57rem;font-weight:800}.message-note{margin:0 28px 25px;padding:12px;border-left:3px solid #e7a923;border-radius:0 8px 8px 0;background:#fff8e6}.message-note strong{font-size:.61rem}.message-note p{margin:5px 0 0;color:#6c5a2a;font-size:.62rem;line-height:1.5}
.pane-hidden{display:none}.mail-stage:has(.pane-hidden){grid-template-columns:minmax(0,1fr) 0 0}.mail-stage:has(.pane-hidden) .mail-column{max-width:none}
html[data-pane="bottom"] .mail-stage{grid-template-columns:minmax(0,1fr) 0 0;grid-template-rows:minmax(280px,45%) minmax(0,55%)}html[data-pane="bottom"] .mail-column{grid-column:1;grid-row:1}html[data-pane="bottom"] .reader-column{grid-column:1;grid-row:2}html[data-pane="bottom"] .utility-column{display:none}

/* Utility */
.utility-column>header{display:flex;align-items:center;justify-content:space-between;padding:17px;border-bottom:1px solid var(--border)}.utility-column>header span{color:var(--soft);font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.utility-column>header h2{margin:3px 0 0;font-size:.9rem}.utility-column>header button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted)}
.utility-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px}.utility-summary article{display:grid;justify-items:center;gap:2px;padding:10px 3px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.utility-summary b{color:var(--blue);font-size:1rem}.utility-summary span{color:var(--soft);font-size:.48rem}
.utility-block{padding:10px 13px}.utility-block h3{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:var(--muted);font-size:.61rem}.utility-block>button{width:100%;display:grid;gap:2px;padding:8px;border:0;border-bottom:1px solid var(--border);background:transparent;text-align:left}.utility-block>button strong{overflow:hidden;font-size:.59rem;text-overflow:ellipsis;white-space:nowrap}.utility-block>button small{color:var(--soft);font-size:.5rem}.utility-block p{margin:0;color:var(--soft);font-size:.55rem;line-height:1.5}.utility-settings{min-height:36px;display:flex;align-items:center;gap:7px;margin:8px 13px;padding:0 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--muted);font-size:.56rem;font-weight:800}

/* Modals */
#modalRoot:empty{display:none}.modal-layer,.settings-layer,.command-layer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px}.modal-scrim{position:absolute;inset:0;border:0;background:rgba(4,17,39,.62)}
.date-modal,.picker-modal,.scheduled-modal{position:relative;z-index:2;width:min(440px,100%);overflow:hidden;border:1px solid var(--border-strong);border-radius:17px;background:var(--surface);box-shadow:0 30px 90px rgba(5,24,54,.32)}.date-modal>header,.picker-modal>header,.scheduled-modal>header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}.date-modal h2,.picker-modal h2,.scheduled-modal h2{margin:0;font-size:.9rem}.date-modal header button,.picker-modal header button,.scheduled-modal header button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted)}.date-modal>label{display:grid;gap:6px;padding:16px;color:var(--muted);font-size:.65rem;font-weight:800}.date-modal input{height:42px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text)}.date-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:16px 16px 0}.date-presets button{min-height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);font-size:.62rem}.date-modal footer,.picker-modal footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-2)}.picker-list{max-height:370px;overflow:auto;padding:10px}.picker-list label,.picker-list>button{width:100%;min-height:39px;display:flex;align-items:center;gap:9px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:.65rem;text-align:left}.picker-list label:hover,.picker-list>button:hover{background:var(--surface-2)}.picker-list input{accent-color:var(--blue)}.picker-list i{width:10px;height:10px;border-radius:3px;background:var(--label)}
.scheduled-modal{padding-bottom:16px}.scheduled-modal header span{color:var(--soft);font-size:.54rem;text-transform:uppercase}.scheduled-modal header h2{margin-top:3px}.scheduled-modal dl{display:grid;gap:10px;margin:0;padding:17px}.scheduled-modal dl div{display:grid;grid-template-columns:105px 1fr}.scheduled-modal dt{color:var(--soft);font-size:.58rem}.scheduled-modal dd{margin:0;font-size:.64rem}.scheduled-modal>.danger-button{margin-left:17px}

/* Composer */
.composer-window{position:fixed;z-index:220;right:22px;bottom:18px;width:min(690px,calc(100vw - 44px));height:min(690px,calc(100dvh - 36px));display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid #bfcddd;border-radius:16px;background:var(--surface);box-shadow:0 30px 90px rgba(5,24,54,.32)}
.composer-window>header{min-height:54px;display:flex;align-items:center;justify-content:space-between;padding:10px 13px;color:#fff;background:#0b2d59}.composer-window>header>div:first-child{display:grid;gap:2px}.composer-window>header span{color:#a9c7e8;font-size:.52rem;text-transform:uppercase;letter-spacing:.1em}.composer-window>header strong{font-size:.77rem}.composer-window>header>div:last-child{display:flex;gap:4px}.composer-window>header button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#fff}
#composeForm{min-height:0;display:grid;grid-template-rows:auto auto auto auto minmax(180px,1fr) auto auto;position:relative}.recipient-line{min-height:45px;display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;padding:0 13px;border-bottom:1px solid var(--border)}.recipient-line label{color:var(--soft);font-size:.58rem;font-weight:800}.recipient-line input{height:43px;border:0;background:transparent;color:var(--text);font-size:.72rem}.recipient-line button{border:0;background:transparent;color:var(--blue);font-size:.56rem;font-weight:850}
.compose-tools{min-height:41px;display:flex;align-items:center;gap:3px;padding:5px 12px;border-bottom:1px solid var(--border);background:var(--surface-2)}.compose-tools button{min-width:31px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.61rem}.compose-tools button:hover{background:var(--surface-3)}.compose-tools select{height:30px;margin-left:auto;border:1px solid var(--border);border-radius:7px;padding:0 8px;background:var(--surface);color:var(--muted);font-size:.55rem}
.compose-editor{min-height:0;overflow:auto;padding:18px;color:var(--text);font-size:.78rem;line-height:1.6}.compose-editor:empty::before{content:attr(data-placeholder);color:var(--soft)}.signature-separator{color:var(--muted)}
.compose-files{display:flex;flex-wrap:wrap;gap:5px;padding:0 12px}.compose-files span{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;background:var(--surface-3);font-size:.54rem}.compose-files small{color:var(--soft)}
#composeForm>footer{min-height:57px;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--border);background:var(--surface-2)}#composeForm>footer>div{display:flex;align-items:center;gap:3px}#composeForm>footer button{height:37px;border:0;border-radius:8px;background:transparent;color:var(--muted)}.send-main{padding:0 18px!important;border-radius:8px 0 0 8px!important;background:var(--blue)!important;color:#fff!important;font-size:.65rem;font-weight:900}.send-menu{width:34px;border-left:1px solid rgba(255,255,255,.3)!important;border-radius:0 8px 8px 0!important;background:var(--blue)!important;color:#fff!important}.discard{width:37px}.send-options-menu{position:absolute;bottom:55px;left:12px;width:180px;display:grid;padding:5px;border:1px solid var(--border);border-radius:10px;background:var(--surface);box-shadow:var(--shadow)}.send-options-menu button{min-height:36px;display:flex;align-items:center;gap:8px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:var(--text);font-size:.59rem;text-align:left}.send-options-menu button:hover{background:var(--surface-2)}

/* Settings */
.settings-panel{position:relative;z-index:2;width:min(1040px,100%);height:min(720px,calc(100dvh - 36px));display:grid;grid-template-columns:205px minmax(0,1fr);overflow:hidden;border:1px solid var(--border-strong);border-radius:19px;background:var(--surface);box-shadow:0 30px 90px rgba(5,24,54,.32)}
.settings-panel>aside{display:grid;align-content:start;gap:3px;padding:14px;background:#0a2244;color:#c5d8ee}.settings-panel>aside header{padding:3px 7px 16px}.settings-panel>aside .brand{color:#fff}.settings-panel>aside>button{min-height:38px;display:flex;align-items:center;gap:9px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:#9db5d2;font-size:.62rem;font-weight:800;text-align:left}.settings-panel>aside>button.active,.settings-panel>aside>button:hover{background:#173b6c;color:#fff}
.settings-panel>main{min-width:0;min-height:0;display:grid;grid-template-rows:70px minmax(0,1fr)}.settings-panel>main>header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border)}.settings-panel>main>header span{color:var(--soft);font-size:.54rem;text-transform:uppercase;letter-spacing:.1em}.settings-panel>main>header h2{margin:3px 0 0;font-size:1rem}.settings-panel>main>header button{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--muted)}.settings-body{min-height:0;overflow:auto;padding:20px}
.settings-form{display:grid;gap:16px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.settings-form label{display:grid;gap:6px;color:var(--muted);font-size:.62rem;font-weight:800}.settings-form input,.settings-form select{height:42px;border:1px solid var(--border);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--text)}.setting-switches{display:grid;gap:7px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}.setting-switches label,.setting-toggle{display:flex!important;grid-auto-flow:column;align-items:center;justify-content:flex-start;gap:8px!important}.setting-switches input,.setting-toggle input{height:auto;accent-color:var(--blue)}.settings-form footer{display:flex;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border)}
.mini-editor-tools{display:flex;gap:3px;padding:6px;border:1px solid var(--border);border-bottom:0;border-radius:10px 10px 0 0;background:var(--surface-2)}.mini-editor-tools button{min-width:32px;height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted)}.signature-editor{min-height:220px;padding:14px;border:1px solid var(--border);border-radius:0 0 10px 10px;background:var(--surface);font-size:.72rem;line-height:1.6}.signature-editor:focus{border-color:#80aeea;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.inline-create,.contact-form,.rule-form{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2)}.inline-create{grid-template-columns:minmax(0,1fr) auto auto}.contact-form{grid-template-columns:1fr 1.2fr 1fr auto}.rule-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}.rule-form label{display:flex!important;align-items:center;gap:6px}.manage-list{display:grid;margin-top:10px;border:1px solid var(--border);border-radius:11px;overflow:hidden}.manage-list article{min-height:53px;display:flex;align-items:center;gap:10px;padding:8px 11px;border-bottom:1px solid var(--border);background:var(--surface)}.manage-list article:last-child{border-bottom:0}.manage-list article>div{min-width:0;display:grid;gap:2px}.manage-list strong{font-size:.64rem}.manage-list small{color:var(--soft);font-size:.54rem}.manage-list article>button{min-height:30px;margin-left:auto;padding:0 8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:.55rem}.manage-list article>button+button{margin-left:0}.manage-list>p{padding:16px;color:var(--soft);font-size:.62rem}.contact-badge{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e7f1ff;color:var(--blue);font-size:.57rem;font-weight:900}

/* Command palette & toast */
.command-palette{position:relative;z-index:2;width:min(600px,100%);overflow:hidden;border:1px solid var(--border-strong);border-radius:15px;background:var(--surface);box-shadow:0 30px 90px rgba(5,24,54,.32)}.command-palette header{height:57px;display:flex;align-items:center;gap:10px;padding:0 15px;border-bottom:1px solid var(--border)}.command-palette input{min-width:0;width:100%;border:0;background:transparent;color:var(--text)}.command-palette kbd{padding:3px 5px;border:1px solid var(--border);border-radius:5px;color:var(--soft);font-size:.52rem}.command-palette>div{display:grid;padding:7px}.command-palette>div button{min-height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:.65rem;text-align:left}.command-palette>div button:hover{background:var(--surface-2)}
#toastHost{position:fixed;z-index:400;right:18px;bottom:18px;display:grid;gap:8px}.toast{min-width:260px;max-width:420px;display:flex;align-items:center;gap:15px;padding:12px 14px;border-radius:11px;background:#102a4e;color:#fff;box-shadow:0 16px 45px rgba(5,24,54,.25);font-size:.65rem;font-weight:750}.toast span{flex:1}.toast button{border:0;background:transparent;color:#79d7ff;font-size:.62rem;font-weight:900}.toast.error{background:#9b2439}

/* Responsive */
.mobile-scrim{display:none}
@media(max-width:1180px){.mail-stage{grid-template-columns:minmax(350px,395px) minmax(0,1fr) 0}.mail-stage:has(.utility-column.open){grid-template-columns:minmax(330px,370px) minmax(0,1fr) 260px}.workspace-shell{grid-template-columns:226px minmax(0,1fr)}}
@media(max-width:980px){.workspace-shell{grid-template-columns:1fr}.workspace-sidebar{position:fixed;z-index:120;inset:0 auto 0 -270px;width:260px;transition:transform .2s}.sidebar-open .workspace-sidebar{transform:translateX(270px)}.sidebar-mobile-close,.menu-trigger{display:grid}.mobile-scrim{position:fixed;z-index:110;inset:0;border:0;background:rgba(4,17,39,.48)}.sidebar-open .mobile-scrim{display:block}.topbar{grid-template-columns:auto minmax(240px,650px) 1fr auto auto auto}.mail-stage{grid-template-columns:minmax(330px,390px) minmax(0,1fr) 0}.mail-stage:has(.utility-column.open){grid-template-columns:minmax(315px,360px) minmax(0,1fr) 250px}.login-shell{grid-template-columns:minmax(0,1fr) 380px}.login-message{width:64%}.login-form-wrap{padding:35px 28px}}
@media(max-width:760px){html,body{overflow:hidden}.login-page{padding:0}.login-shell{display:block;min-height:100dvh;border:0;border-radius:0}.login-visual{display:none}.login-form-wrap{min-height:100dvh;padding:max(27px,env(safe-area-inset-top)) max(21px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(21px,env(safe-area-inset-left))}.mobile-login-brand{display:block;margin-bottom:38px}.topbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"menu search tools";height:108px;padding:max(8px,env(safe-area-inset-top)) 9px 8px}.menu-trigger{grid-area:menu}.global-search{grid-area:search}.topbar>.top-icon:nth-last-child(-n+3){display:none}.mail-stage{display:block;padding:0;background:var(--surface)}.mail-column,.reader-column{position:absolute;inset:108px 0 0;border:0;border-radius:0;box-shadow:none}.reader-column{z-index:40;transform:translateX(102%);transition:transform .2s}.mobile-reader-open .reader-column{transform:translateX(0)}.utility-column{display:none}.mail-toolbar{min-height:55px}.category-tabs{min-height:41px;overflow:auto}.category-tabs button{min-width:92px}.message-list{height:calc(100dvh - 108px - 55px - 41px - 42px)}.mail-row{grid-template-columns:25px 23px 36px minmax(0,1fr);gap:5px;padding:8px 9px}.row-important{display:none}.row-avatar{width:34px;height:34px}.row-actions{display:none!important}.row-meta i:nth-of-type(n+2){display:none}.reader-back{display:grid;place-items:center}.reader-actions button span{display:none}.reader-header{padding:19px 15px 14px}.email-frame{width:calc(100% - 24px);margin:14px 12px}.reader-attachments,.smart-replies,.reader-productivity{padding-right:15px;padding-left:15px}.reader-attachments>div{grid-template-columns:1fr}.composer-window{inset:0;width:100%;height:100dvh;border:0;border-radius:0}.settings-layer{padding:0}.settings-panel{width:100%;height:100dvh;grid-template-columns:1fr;border:0;border-radius:0}.settings-panel>aside{display:flex;gap:4px;overflow-x:auto;padding:8px}.settings-panel>aside header{display:none}.settings-panel>aside>button{flex:0 0 auto;min-height:34px}.settings-panel>main{grid-template-rows:62px minmax(0,1fr)}.settings-body{padding:14px}.settings-grid,.contact-form,.rule-form{grid-template-columns:1fr}.inline-create{grid-template-columns:1fr auto}.shortcut-hints{display:none}.toolbar-button span{display:none}.standard-toolbar h1{font-size:.86rem}}
@media(max-width:430px){.global-search select{display:none}.mail-row{grid-template-columns:24px 22px 33px minmax(0,1fr)}.row-avatar{width:32px;height:32px}.row-head time{font-size:.5rem}.row-meta>span{max-width:120px}.standard-toolbar{padding:7px}.toolbar-button{width:34px!important;padding:0!important}.category-tabs button{min-width:82px}.compose-tools select{max-width:120px}.date-presets{grid-template-columns:1fr}}

.composer-window.minimized{height:54px}
.composer-window.minimized #composeForm{display:none}
.row-check.passive,.row-star.passive,.row-important.passive{display:grid;place-items:center;color:var(--soft)}
.workspace-main{overflow:hidden}
@media(max-width:760px){.mail-stage{position:relative;overflow:hidden}.mail-column,.reader-column{width:100%}}


/* ================================================================
   ZUPLIX MAIL UNIVERSAL V7
   ================================================================ */
.provider-detection{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:11px;
  margin:13px 0;
  padding:10px 12px;
  border:1px solid #dce6f2;
  border-radius:13px;
  color:#5c708a;
  background:#f7faff;
}

.provider-detection.detected{
  border-color:#b9d7fb;
  background:#eef6ff;
}

.provider-detection.loading .provider-dot{
  animation:providerPulse 1s ease-in-out infinite;
}

.provider-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#94a7bd;
}

.provider-badge{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#2563eb,#38bdf8);
  font-weight:950;
}

.provider-detection>div{
  min-width:0;
  display:grid;
  gap:2px;
}

.provider-detection strong,
.provider-detection small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.provider-detection strong{
  color:#29425f;
  font-size:.72rem;
}

.provider-detection small,
.login-helper{
  color:#7e90a6;
  font-size:.61rem;
}

@keyframes providerPulse{
  50%{opacity:.35;transform:scale(.78)}
}

.signature-help{
  display:grid;
  gap:4px;
  padding:12px;
  border:1px solid #dce7f3;
  border-radius:12px;
  color:#647991;
  background:#f7faff;
  font-size:.67rem;
  line-height:1.45;
}

.signature-help strong{
  color:#29435f;
  font-size:.74rem;
}

.signature-editor img{
  max-width:100%;
  height:auto;
}

.signature-save-status{
  min-height:20px;
  color:#617893;
  font-size:.65rem;
  font-weight:750;
}

.attachment-limit-note{
  padding:7px 16px;
  color:#7a8ba0;
  border-top:1px solid #edf1f6;
  background:#fbfcfe;
  font-size:.59rem;
}

.compose-warning{
  margin:7px 14px;
  padding:9px 11px;
  border:1px solid #efd18a;
  border-radius:10px;
  color:#76530b;
  background:#fff9e8;
  font-size:.65rem;
  font-weight:800;
}

.upload-progress{
  position:relative;
  height:28px;
  margin:7px 14px;
  overflow:hidden;
  border-radius:9px;
  background:#eaf1f9;
}

.upload-progress span{
  position:absolute;
  inset:0 auto 0 0;
  width:2%;
  background:linear-gradient(90deg,#2563eb,#38bdf8);
  transition:width .18s linear;
}

.upload-progress small{
  position:relative;
  z-index:2;
  height:100%;
  display:grid;
  place-items:center;
  color:#15385f;
  font-size:.58rem;
  font-weight:900;
}

@media(max-width:760px){
  .provider-detection{
    margin:11px 0;
  }

  .attachment-limit-note{
    padding-left:11px;
    padding-right:11px;
  }
}


/* ================================================================
   ZUPLIX MAIL V8 — TEMAS, ASSINATURA E IA
   ================================================================ */
:root{
  --accent-1:#2563eb;
  --accent-2:#38bdf8;
  --accent-3:#1d4ed8;
  --accent-gradient:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  --blue:var(--accent-1);
  --blue-2:var(--accent-3);
  --cyan:var(--accent-2);
}

html[data-accent="ocean"]{
  --accent-1:#2563eb;
  --accent-2:#38bdf8;
  --accent-3:#1d4ed8;
}

html[data-accent="aurora"]{
  --accent-1:#6d28d9;
  --accent-2:#22d3ee;
  --accent-3:#4f46e5;
}

html[data-accent="sunset"]{
  --accent-1:#f97316;
  --accent-2:#ec4899;
  --accent-3:#e11d48;
}

html[data-accent="emerald"]{
  --accent-1:#059669;
  --accent-2:#2dd4bf;
  --accent-3:#047857;
}

html[data-accent="violet"]{
  --accent-1:#7c3aed;
  --accent-2:#a78bfa;
  --accent-3:#5b21b6;
}

html[data-accent="ruby"]{
  --accent-1:#dc2626;
  --accent-2:#db2777;
  --accent-3:#b91c1c;
}

html[data-accent="tropical"]{
  --accent-1:#0284c7;
  --accent-2:#10b981;
  --accent-3:#eab308;
}

html[data-accent="graphite"]{
  --accent-1:#334155;
  --accent-2:#3b82f6;
  --accent-3:#0f172a;
}

.primary-button,
.compose-main,
.brand-symbol,
.provider-badge{
  background:var(--accent-gradient);
}

.compose-main:hover{
  filter:brightness(.96);
}

.sidebar-brand-mascot{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.sidebar-brand-mascot picture{
  flex:0 0 auto;
  width:54px;
  height:52px;
  overflow:hidden;
  border-radius:17px;
  background:linear-gradient(
    145deg,
    color-mix(in srgb,var(--accent-1) 20%,white),
    color-mix(in srgb,var(--accent-2) 26%,white)
  );
}

.sidebar-brand-mascot img{
  width:72px;
  height:72px;
  max-width:none;
  object-fit:contain;
  transform:translate(-9px,-5px);
}

.assistant-sidebar-button{
  width:100%;
  min-height:54px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid color-mix(in srgb,var(--accent-2) 34%,transparent);
  border-radius:12px;
  color:#eaf6ff;
  text-align:left;
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--accent-1) 35%,#081a36),
    color-mix(in srgb,var(--accent-2) 20%,#081a36)
  );
}

.assistant-sidebar-button>span{
  min-width:0;
  display:grid;
  gap:2px;
}

.assistant-sidebar-button strong{
  font-size:.7rem;
  letter-spacing:.05em;
}

.assistant-sidebar-button small{
  overflow:hidden;
  color:#a9c4e3;
  font-size:.56rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ai-top-button{
  color:var(--accent-1);
  border-color:color-mix(in srgb,var(--accent-1) 25%,var(--border));
  background:color-mix(in srgb,var(--accent-1) 8%,var(--surface));
}

/* Aparência */
.appearance-intro{
  display:grid;
  gap:4px;
  color:var(--muted);
  font-size:.7rem;
  line-height:1.5;
}

.appearance-intro strong{
  color:var(--text);
  font-size:.84rem;
}

.gradient-theme-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.gradient-theme-card{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:10px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:13px;
  cursor:pointer;
  background:var(--surface);
}

.gradient-theme-card:hover{
  border-color:var(--border-strong);
  background:var(--surface-2);
}

.gradient-theme-card.selected{
  border-color:var(--accent-1);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-1) 12%,transparent);
}

.gradient-theme-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.gradient-theme-card i{
  grid-row:1 / span 2;
  width:48px;
  height:48px;
  border-radius:12px;
}

.gradient-theme-card strong{
  align-self:end;
  font-size:.72rem;
}

.gradient-theme-card span{
  align-self:start;
  color:var(--muted);
  font-size:.59rem;
}

.gradient-preview.theme-ocean{background:linear-gradient(135deg,#2563eb,#38bdf8)}
.gradient-preview.theme-aurora{background:linear-gradient(135deg,#6d28d9,#22d3ee)}
.gradient-preview.theme-sunset{background:linear-gradient(135deg,#f97316,#ec4899)}
.gradient-preview.theme-emerald{background:linear-gradient(135deg,#059669,#2dd4bf)}
.gradient-preview.theme-violet{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.gradient-preview.theme-ruby{background:linear-gradient(135deg,#dc2626,#db2777)}
.gradient-preview.theme-tropical{background:linear-gradient(135deg,#0284c7,#10b981,#eab308)}
.gradient-preview.theme-graphite{background:linear-gradient(135deg,#334155,#3b82f6)}

/* Assinatura */
.signature-settings-v8{
  gap:13px;
}

.signature-main-toolbar{
  flex-wrap:wrap;
}

.signature-upload-button{
  min-width:180px!important;
  color:#fff!important;
  border-color:transparent!important;
  background:var(--accent-gradient)!important;
}

.signature-image-controls{
  display:grid;
  gap:9px;
  padding:12px;
  border:1px solid color-mix(in srgb,var(--accent-1) 30%,var(--border));
  border-radius:12px;
  background:color-mix(in srgb,var(--accent-1) 6%,var(--surface));
}

.signature-image-controls>div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:.67rem;
}

.signature-image-controls input[type="range"]{
  width:100%;
  accent-color:var(--accent-1);
}

.signature-size-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.signature-size-presets button{
  min-height:31px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  background:var(--surface);
  font-size:.61rem;
  font-weight:800;
}

.signature-editor{
  min-height:230px;
}

.signature-editor img{
  cursor:pointer;
}

.signature-editor img.signature-image-selected{
  outline:3px solid color-mix(in srgb,var(--accent-1) 58%,transparent);
  outline-offset:3px;
}

.signature-preview-card{
  display:grid;
  gap:7px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
}

.signature-preview-card>span{
  color:var(--muted);
  font-size:.59rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.signature-preview-card>div{
  min-height:70px;
  padding:12px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;
  color:#17263b;
}

.signature-preview-card img{
  max-width:100%;
  height:auto;
}

/* Assistente IA */
.utility-column{
  width:min(390px,92vw);
}

.utility-header{
  min-height:65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}

.utility-header>div{
  display:grid;
  gap:2px;
}

.utility-header span{
  color:var(--muted);
  font-size:.56rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.utility-header h2{
  margin:0;
  font-size:1rem;
}

.utility-header button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
}

.utility-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:7px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}

.utility-tabs button{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:0;
  border-radius:8px;
  color:var(--muted);
  background:transparent;
  font-size:.66rem;
  font-weight:850;
}

.utility-tabs button.active{
  color:#fff;
  background:var(--accent-gradient);
}

.assistant-chat{
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding:12px;
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb,var(--accent-2) 9%,transparent),
      transparent 32%
    ),
    var(--surface);
}

.assistant-message{
  display:grid;
  grid-template-columns:31px minmax(0,1fr);
  gap:8px;
  margin-bottom:12px;
}

.assistant-message.user{
  grid-template-columns:minmax(0,1fr) 31px;
}

.assistant-message.user .assistant-message-avatar{
  grid-column:2;
  grid-row:1;
  color:#fff;
  background:var(--accent-gradient);
}

.assistant-message.user .assistant-message-body{
  grid-column:1;
  grid-row:1;
  justify-self:end;
  color:#fff;
  background:var(--accent-gradient);
}

.assistant-message-avatar{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  color:var(--text);
  background:var(--surface-3);
  font-size:.67rem;
  font-weight:900;
}

.assistant-message-avatar img{
  width:43px;
  height:43px;
  max-width:none;
  object-fit:contain;
  transform:translate(-6px,-3px);
}

.assistant-message-body{
  max-width:100%;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:4px 13px 13px 13px;
  background:var(--surface-2);
}

.assistant-message-body p{
  margin:0;
  font-size:.7rem;
  line-height:1.5;
}

.assistant-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:10px;
}

.assistant-stat-grid article{
  display:grid;
  gap:2px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
}

.assistant-stat-grid b{
  font-size:1rem;
}

.assistant-stat-grid span{
  color:var(--muted);
  font-size:.56rem;
}

.assistant-top-senders{
  display:grid;
  gap:5px;
  margin-top:9px;
  padding:9px;
  border-radius:9px;
  background:var(--surface);
}

.assistant-top-senders>strong{
  font-size:.64rem;
}

.assistant-top-senders span{
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:var(--muted);
  font-size:.59rem;
}

.assistant-results{
  display:grid;
  gap:6px;
  margin-top:10px;
}

.assistant-results button{
  min-width:0;
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  gap:7px;
  align-items:center;
  padding:8px;
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  text-align:left;
  background:var(--surface);
}

.assistant-results button:hover{
  border-color:var(--accent-1);
  background:color-mix(in srgb,var(--accent-1) 5%,var(--surface));
}

.assistant-results button>span{
  color:var(--accent-1);
}

.assistant-results button>div{
  min-width:0;
  display:grid;
  gap:3px;
}

.assistant-results strong,
.assistant-results small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.assistant-results strong{
  font-size:.64rem;
}

.assistant-results small{
  color:var(--muted);
  font-size:.54rem;
}

.assistant-thinking{
  display:flex;
  align-items:center;
  gap:4px;
  height:31px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:4px 13px 13px 13px;
  background:var(--surface-2);
}

.assistant-thinking i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-1);
  animation:assistantThinking .9s infinite alternate;
}

.assistant-thinking i:nth-child(2){animation-delay:.16s}
.assistant-thinking i:nth-child(3){animation-delay:.32s}

@keyframes assistantThinking{
  to{opacity:.25;transform:translateY(-3px)}
}

.assistant-suggestions{
  display:flex;
  gap:5px;
  padding:8px 10px;
  overflow-x:auto;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  scrollbar-width:none;
}

.assistant-suggestions::-webkit-scrollbar{
  display:none;
}

.assistant-suggestions button{
  flex:0 0 auto;
  min-height:29px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:var(--surface);
  font-size:.56rem;
  font-weight:750;
}

.assistant-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 39px;
  gap:7px;
  padding:9px;
  border-top:1px solid var(--border);
  background:var(--surface);
}

.assistant-form textarea{
  min-height:42px;
  max-height:100px;
  padding:9px 10px;
  resize:none;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  background:var(--surface-2);
  font-size:.67rem;
  line-height:1.4;
}

.assistant-form textarea:focus{
  border-color:var(--accent-1);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-1) 10%,transparent);
}

.assistant-form button{
  width:39px;
  height:39px;
  align-self:end;
  display:grid;
  place-items:center;
  border:0;
  border-radius:11px;
  color:#fff;
  background:var(--accent-gradient);
}

@media(max-width:760px){
  .gradient-theme-grid{
    grid-template-columns:1fr;
  }

  .sidebar-brand-mascot picture{
    width:50px;
    height:48px;
  }

  .utility-column{
    width:100%;
  }
}


/* ================================================================
   ZUPLIX MAIL V9 — CORREÇÕES E NOVOS RECURSOS
   ================================================================ */
.sidebar-brand-header{
  position:relative;
  min-width:0;
  min-height:55px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 48px auto;
  align-items:center;
  gap:5px;
  padding:0 2px 0 7px!important;
  overflow:visible;
}

.sidebar-brand-header .brand{
  min-width:0;
}

.sidebar-brand-header .brand-symbol{
  flex:0 0 auto;
}

.sidebar-corner-mascot{
  position:static;
  z-index:2;
  width:48px;
  height:55px;
  display:block;
  overflow:visible;
  pointer-events:none;
  opacity:.94;
}

.sidebar-corner-mascot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.18));
}

.sidebar-brand-mascot,
.assistant-sidebar-button{
  display:none!important;
}

:root{
  --theme-sidebar-start:#071a36;
  --theme-sidebar-end:#0c376f;
  --theme-stage:#eaf3fd;
  --theme-soft:#edf6ff;
  --theme-soft-2:#d8edff;
  --theme-strong:#174d91;
  --theme-topbar:#f6faff;
}

html[data-accent="aurora"]{
  --theme-sidebar-start:#25104d;
  --theme-sidebar-end:#174a78;
  --theme-stage:#f0ecff;
  --theme-soft:#f3efff;
  --theme-soft-2:#e5dcff;
  --theme-strong:#5934a8;
  --theme-topbar:#faf7ff;
}

html[data-accent="sunset"]{
  --theme-sidebar-start:#5a2115;
  --theme-sidebar-end:#872c59;
  --theme-stage:#fff0e9;
  --theme-soft:#fff4ee;
  --theme-soft-2:#ffe3d5;
  --theme-strong:#c54e43;
  --theme-topbar:#fffaf7;
}

html[data-accent="rose"]{
  --accent-1:#ec4899;
  --accent-2:#c084fc;
  --accent-3:#db2777;
  --theme-sidebar-start:#4c1739;
  --theme-sidebar-end:#762b70;
  --theme-stage:#fceef7;
  --theme-soft:#fff0f8;
  --theme-soft-2:#f9d8ea;
  --theme-strong:#a62f73;
  --theme-topbar:#fff8fc;
}

html[data-accent="emerald"]{
  --theme-sidebar-start:#073f35;
  --theme-sidebar-end:#0a675d;
  --theme-stage:#e9f8f3;
  --theme-soft:#effbf7;
  --theme-soft-2:#d5f3e8;
  --theme-strong:#087a65;
  --theme-topbar:#f7fdfa;
}

html[data-accent="violet"]{
  --theme-sidebar-start:#28115d;
  --theme-sidebar-end:#53249a;
  --theme-stage:#f0ebfc;
  --theme-soft:#f5f0ff;
  --theme-soft-2:#e5d9fb;
  --theme-strong:#6336aa;
  --theme-topbar:#fbf9ff;
}

html[data-accent="ruby"]{
  --theme-sidebar-start:#4c111d;
  --theme-sidebar-end:#7b1945;
  --theme-stage:#faecef;
  --theme-soft:#fff1f3;
  --theme-soft-2:#f8d9e1;
  --theme-strong:#a72b51;
  --theme-topbar:#fff8f9;
}

html[data-accent="tropical"]{
  --theme-sidebar-start:#07324e;
  --theme-sidebar-end:#087b68;
  --theme-stage:#e8f8f4;
  --theme-soft:#effcf8;
  --theme-soft-2:#d7f4e9;
  --theme-strong:#07806f;
  --theme-topbar:#f6fdfb;
}

html[data-accent="graphite"]{
  --theme-sidebar-start:#111827;
  --theme-sidebar-end:#27364d;
  --theme-stage:#edf1f6;
  --theme-soft:#f1f5f9;
  --theme-soft-2:#dfe7f0;
  --theme-strong:#334f73;
  --theme-topbar:#f8fafc;
}

.workspace-sidebar{
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb,var(--accent-2) 20%,transparent),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      var(--theme-sidebar-start),
      var(--theme-sidebar-end)
    )!important;
}

.workspace-main,
.mail-stage{
  background:var(--theme-stage)!important;
}

.topbar{
  background:var(--theme-topbar)!important;
}

.nav-item.active{
  background:var(--theme-strong)!important;
  box-shadow:inset 3px 0 0 var(--accent-2)!important;
}

.account-mini{
  background:
    color-mix(
      in srgb,
      var(--theme-strong) 65%,
      #071a35
    )!important;
}

.category-tabs button.active,
.utility-tabs button.active{
  color:#fff!important;
  background:var(--accent-gradient)!important;
}

.mail-row.selected,
.mail-row:hover{
  background:var(--theme-soft)!important;
}

.reader-empty-icon,
.contact-badge,
.row-avatar{
  background:var(--theme-soft-2)!important;
  color:var(--accent-1)!important;
}

.settings-panel>aside{
  background:
    linear-gradient(
      180deg,
      var(--theme-sidebar-start),
      var(--theme-sidebar-end)
    )!important;
}

.settings-panel>aside>button.active,
.settings-panel>aside>button:hover{
  background:var(--theme-strong)!important;
}

.composer-window>header,
.attachment-preview-modal>header{
  background:
    linear-gradient(
      135deg,
      var(--theme-sidebar-start),
      var(--theme-strong)
    )!important;
}

.login-visual{
  background:
    radial-gradient(
      circle at 80% 20%,
      color-mix(in srgb,var(--accent-2) 28%,transparent),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      var(--theme-sidebar-start),
      var(--theme-sidebar-end)
    )!important;
}

.gradient-preview.theme-rose{
  background:linear-gradient(135deg,#ec4899,#c084fc);
}

.workspace-shell,
.workspace-main,
.mail-stage,
.mail-column,
.reader-column{
  min-width:0;
  max-width:100%;
}

.mail-stage,
.mail-stage:has(.utility-column.open){
  grid-template-columns:
    minmax(310px,400px)
    minmax(0,1fr)!important;
}

.utility-column{
  position:fixed!important;
  z-index:310;
  right:18px;
  bottom:84px;
  width:min(390px,calc(100vw - 36px));
  height:min(650px,calc(100dvh - 112px));
  display:flex!important;
  flex-direction:column;
  border:1px solid var(--border)!important;
  border-radius:18px!important;
  background:var(--surface)!important;
  box-shadow:0 28px 85px rgba(6,24,52,.28)!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(15px) scale(.98);
  transition:
    opacity .16s,
    transform .16s,
    visibility .16s;
}

.utility-column.open{
  opacity:1!important;
  visibility:visible;
  pointer-events:auto!important;
  transform:none!important;
}

.floating-ai-button{
  position:fixed;
  z-index:300;
  right:18px;
  bottom:18px;
  min-width:174px;
  height:56px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:3px 12px 3px 3px;
  border:0;
  border-radius:18px;
  color:#fff;
  text-align:left;
  background:var(--accent-gradient);
  box-shadow:
    0 15px 38px
    color-mix(in srgb,var(--accent-1) 30%,transparent);
}

.floating-ai-button picture{
  width:48px;
  height:50px;
  overflow:visible;
}

.floating-ai-button img{
  width:53px;
  height:58px;
  object-fit:contain;
  transform:translateY(-4px);
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.18));
}

.floating-ai-button>span{
  min-width:0;
  display:grid;
  gap:1px;
}

.floating-ai-button strong{
  font-size:.67rem;
}

.floating-ai-button small{
  color:rgba(255,255,255,.78);
  font-size:.54rem;
}

.composer-window.fullscreen{
  inset:12px!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:16px!important;
}

.word-editor-toolbar{
  flex-wrap:wrap;
  gap:3px;
  padding:6px 10px!important;
  max-height:110px;
  overflow-y:auto;
}

.word-editor-toolbar select{
  height:31px;
  min-width:94px;
  border:1px solid var(--border);
  border-radius:7px;
  padding:0 6px;
  color:var(--text);
  background:var(--surface);
  font-size:.61rem;
}

.word-editor-toolbar button{
  min-width:31px!important;
  height:31px!important;
  padding:0 7px!important;
}

.toolbar-divider{
  width:1px;
  height:24px;
  margin:3px;
  background:var(--border);
}

.editor-color-button{
  position:relative;
  width:32px;
  height:31px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:7px;
  font-size:.74rem;
  font-weight:900;
}

.editor-color-button input{
  position:absolute;
  inset:auto 2px 2px;
  width:28px;
  height:5px;
  padding:0;
  border:0;
}

.emoji-picker{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-height:112px;
  padding:8px 11px;
  overflow:auto;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}

.emoji-picker button{
  width:34px;
  height:34px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  font-size:1.05rem;
}

.emoji-picker button:hover{
  border-color:var(--border);
  background:var(--surface);
}

.composer-window.fullscreen .compose-editor{
  min-height:0;
  font-size:.88rem;
}

.reader-attachment-card{
  min-width:0;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
}

.reader-attachment-card>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--accent-1);
  background:var(--theme-soft-2);
}

.reader-attachment-card>div:nth-child(2){
  min-width:0;
  display:grid;
  gap:2px;
}

.reader-attachment-card strong,
.reader-attachment-card small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.reader-attachment-card strong{
  font-size:.65rem;
}

.reader-attachment-card small{
  color:var(--muted);
  font-size:.55rem;
}

.attachment-card-actions{
  display:flex;
  align-items:center;
  gap:5px;
}

.attachment-card-actions button,
.attachment-card-actions a{
  min-height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
  background:var(--surface);
  font-size:.57rem;
  font-weight:800;
}

.attachment-preview-layer{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  padding:18px;
}

.attachment-preview-scrim{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(4,15,34,.72);
}

.attachment-preview-modal{
  position:relative;
  z-index:2;
  width:min(1100px,100%);
  height:min(820px,calc(100dvh - 36px));
  display:grid;
  grid-template-rows:62px minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:17px;
  background:#fff;
  box-shadow:0 34px 100px rgba(0,0,0,.36);
}

.attachment-preview-modal>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:10px 14px;
  color:#fff;
}

.attachment-preview-modal>header>div:first-child{
  min-width:0;
  display:grid;
  gap:2px;
}

.attachment-preview-modal>header span{
  font-size:.54rem;
  opacity:.72;
  text-transform:uppercase;
}

.attachment-preview-modal>header h2{
  overflow:hidden;
  margin:0;
  font-size:.78rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.attachment-preview-modal>header>div:last-child{
  display:flex;
  gap:5px;
}

.attachment-preview-modal>header a,
.attachment-preview-modal>header button{
  min-height:35px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,.08);
  font-size:.61rem;
}

.attachment-preview-content{
  min-height:0;
  display:grid;
  place-items:center;
  overflow:auto;
  background:#e9edf3;
}

.attachment-preview-content img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.attachment-preview-content iframe{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

.settings-panel{
  max-width:calc(100vw - 24px);
}

.settings-body{
  min-width:0;
}

@media(max-width:1180px){
  .workspace-shell{
    grid-template-columns:
      220px minmax(0,1fr)!important;
  }

  .mail-stage,
  .mail-stage:has(.utility-column.open){
    grid-template-columns:
      minmax(300px,365px)
      minmax(0,1fr)!important;
  }

  .topbar{
    grid-template-columns:
      auto minmax(220px,1fr)
      auto auto auto auto!important;
  }
}

@media(max-width:980px){
  .mail-stage,
  .mail-stage:has(.utility-column.open){
    grid-template-columns:
      minmax(300px,350px)
      minmax(0,1fr)!important;
  }

  .topbar{
    grid-template-columns:
      auto minmax(190px,1fr)
      auto auto!important;
  }
}

@media(max-width:760px){
  .utility-column{
    right:10px;
    bottom:78px;
    width:calc(100vw - 20px);
    height:min(660px,calc(100dvh - 96px));
  }

  .floating-ai-button{
    right:11px;
    bottom:11px;
    min-width:58px;
    width:58px;
    height:58px;
    padding:2px;
  }

  .floating-ai-button>span{
    display:none;
  }

  .floating-ai-button picture{
    width:54px;
    height:57px;
  }

  .mail-stage,
  .mail-stage:has(.utility-column.open){
    display:block!important;
  }

  .composer-window.fullscreen{
    inset:0!important;
    border-radius:0!important;
  }

  .reader-actions{
    overflow-x:auto;
  }

  .reader-actions button{
    flex:0 0 auto;
  }

  .attachment-preview-layer{
    padding:0;
  }

  .attachment-preview-modal{
    width:100%;
    height:100dvh;
    border:0;
    border-radius:0;
  }

  .settings-panel{
    max-width:none;
  }
}

@media(max-width:430px){
  .reader-attachment-card{
    grid-template-columns:
      34px minmax(0,1fr);
  }

  .attachment-card-actions{
    grid-column:2;
  }
}


@media(max-width:760px){
  .sidebar-brand-header{
    grid-template-columns:minmax(0,1fr) 45px 36px;
    gap:3px;
  }

  .sidebar-corner-mascot{
    width:45px;
    height:52px;
  }
}


/* ZUPLIX Mail v9.2 — assinatura padrão */
.setting-toggle:has(#signatureDefault){
  align-items:flex-start;
  padding:13px 14px;
  border:1px solid color-mix(in srgb,var(--accent-1) 28%,var(--border));
  border-radius:12px;
  background:color-mix(in srgb,var(--accent-1) 6%,var(--surface));
  font-weight:850;
}

.zuplix-default-signature{
  margin-top:10px;
}


/* ================================================================
   ZUPLIX MAIL V10 — COMPOSITOR E ORGANIZAÇÃO
   ================================================================ */
body:has(#composerWindow) .floating-ai-button{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(12px) scale(.92)!important;
}

.composer-window[data-mode="normal"]{
  inset:auto 22px 18px auto!important;
  right:22px!important;
  bottom:18px!important;
  width:min(690px,calc(100vw - 44px))!important;
  height:min(690px,calc(100dvh - 36px))!important;
  max-width:none!important;
  max-height:none!important;
}

.composer-window[data-mode="fullscreen"]{
  inset:12px!important;
  right:12px!important;
  bottom:12px!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:16px!important;
}

.composer-window[data-mode="minimized"]{
  inset:auto 18px 18px auto!important;
  width:min(410px,calc(100vw - 36px))!important;
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  border-radius:13px!important;
}

.composer-window[data-mode="minimized"]>header{
  min-height:56px;
  cursor:pointer;
}

.composer-window[data-mode="minimized"]>header>div:first-child span::after{
  content:" • clique para restaurar";
  color:rgba(255,255,255,.62);
  text-transform:none;
  letter-spacing:0;
}

.composer-window[data-mode="minimized"] #composeForm{
  display:none!important;
}

.sender-tools-modal{
  position:relative;
  z-index:2;
  width:min(560px,100%);
  max-height:min(760px,calc(100dvh - 36px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 30px 90px rgba(5,24,54,.32);
}

.sender-tools-modal>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:16px 17px;
  color:#fff;
  background:linear-gradient(
    135deg,
    var(--theme-sidebar-start),
    var(--theme-strong)
  );
}

.sender-tools-modal>header>div{
  min-width:0;
  display:grid;
  gap:2px;
}

.sender-tools-modal>header span{
  font-size:.54rem;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.sender-tools-modal>header h2{
  overflow:hidden;
  margin:0;
  font-size:.9rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sender-tools-modal>header small{
  overflow:hidden;
  font-size:.58rem;
  opacity:.75;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sender-tools-modal>header button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:9px;
  color:#fff;
  background:rgba(255,255,255,.08);
}

.sender-tools-intro{
  display:grid;
  gap:3px;
  padding:13px 16px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}

.sender-tools-intro strong{
  font-size:.72rem;
}

.sender-tools-intro span{
  color:var(--muted);
  font-size:.61rem;
  line-height:1.45;
}

.sender-quick-steps{
  min-height:0;
  display:grid;
  gap:7px;
  padding:13px 16px;
  overflow:auto;
}

.sender-quick-steps>button{
  min-height:61px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:11px;
  color:var(--text);
  text-align:left;
  background:var(--surface);
}

.sender-quick-steps>button:hover{
  border-color:var(--accent-1);
  background:var(--theme-soft);
}

.sender-quick-steps>button>svg{
  color:var(--accent-1);
}

.sender-quick-steps>button>span{
  display:grid;
  gap:3px;
}

.sender-quick-steps strong{
  font-size:.67rem;
}

.sender-quick-steps small{
  color:var(--muted);
  font-size:.56rem;
}

.sender-move-all{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:12px 16px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
}

.sender-move-all select{
  min-width:0;
  height:39px;
  border:1px solid var(--border);
  border-radius:9px;
  padding:0 9px;
  color:var(--text);
  background:var(--surface);
}

.sender-tools-modal>footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
  padding:12px 16px;
  border-top:1px solid var(--border);
}

.assistant-stat-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

@media(max-width:760px){
  .composer-window[data-mode="normal"],
  .composer-window[data-mode="fullscreen"]{
    inset:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100dvh!important;
    border:0!important;
    border-radius:0!important;
  }

  .composer-window[data-mode="minimized"]{
    right:10px!important;
    bottom:10px!important;
    width:calc(100vw - 20px)!important;
  }

  .sender-tools-layer{
    padding:10px;
  }

  .sender-tools-modal{
    width:100%;
    max-height:calc(100dvh - 20px);
  }

  .sender-move-all{
    grid-template-columns:1fr;
  }
}


/* ================================================================
   ZUPLIX MAIL V10.1 — CORREÇÕES DEFINITIVAS
   ================================================================ */

/* Segurança visual: nunca mostra dois botões principais. */
.workspace-sidebar .compose-main ~ .compose-main{
  display:none!important;
}

/* O botão da IA some por classe JavaScript, inclusive em browsers
   que não aplicam :has() corretamente. */
body.composer-active .floating-ai-button{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(14px) scale(.9)!important;
}

/* A janela de composição sempre fica acima dos controles flutuantes. */
.composer-window{
  z-index:460!important;
}

/* Estados exclusivos e previsíveis. */
.composer-window[data-mode="normal"]{
  inset:auto 22px 18px auto!important;
  right:22px!important;
  bottom:18px!important;
  width:min(690px,calc(100vw - 44px))!important;
  height:min(690px,calc(100dvh - 36px))!important;
  min-height:420px!important;
  max-width:none!important;
  max-height:none!important;
}

.composer-window[data-mode="fullscreen"]{
  inset:10px!important;
  right:10px!important;
  bottom:10px!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  border-radius:15px!important;
}

.composer-window[data-mode="minimized"]{
  inset:auto 18px 18px auto!important;
  right:18px!important;
  bottom:18px!important;
  width:min(430px,calc(100vw - 36px))!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;
  overflow:hidden!important;
  border-radius:13px!important;
}

.composer-window[data-mode="minimized"]>header{
  position:relative;
  z-index:3;
  min-height:58px!important;
  cursor:pointer;
}

.composer-window[data-mode="minimized"]>header:hover{
  filter:brightness(1.08);
}

.composer-window[data-mode="minimized"] #composeForm{
  display:none!important;
}

/* Mensagem atualmente aberta fica claramente marcada. */
.mail-row.opened{
  background:var(--theme-soft)!important;
  box-shadow:
    inset 4px 0 0 var(--accent-1),
    inset 0 0 0 1px
      color-mix(in srgb,var(--accent-1) 18%,transparent);
}

.mail-row.opened.unread{
  background:
    color-mix(
      in srgb,
      var(--accent-1) 8%,
      #ffffff
    )!important;
}

.mail-row.opened .row-subject span,
.mail-row.opened .row-head strong{
  color:var(--theme-strong)!important;
}

/* Aviso exato de novas mensagens, com aparência de não lida. */
.new-mail-banner{
  position:sticky;
  z-index:12;
  top:0;
  width:calc(100% - 16px);
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:8px;
  padding:7px 12px;
  border:1px solid
    color-mix(in srgb,var(--accent-1) 28%,var(--border));
  border-radius:11px;
  color:var(--theme-strong);
  background:
    color-mix(
      in srgb,
      var(--accent-1) 9%,
      #ffffff
    );
  box-shadow:0 6px 18px rgba(20,53,92,.08);
  font-size:.65rem;
}

.new-mail-banner svg{
  color:var(--accent-1);
}

.new-mail-banner strong{
  font-size:.68rem;
}

.new-mail-banner span{
  color:var(--muted);
  font-size:.58rem;
}

.new-mail-banner:hover{
  border-color:var(--accent-1);
  background:
    color-mix(
      in srgb,
      var(--accent-1) 14%,
      #ffffff
    );
}

@media(max-width:760px){
  .composer-window[data-mode="normal"],
  .composer-window[data-mode="fullscreen"]{
    inset:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    border-radius:0!important;
  }

  .composer-window[data-mode="minimized"]{
    right:8px!important;
    bottom:8px!important;
    width:calc(100vw - 16px)!important;
  }

  .new-mail-banner{
    width:calc(100% - 12px);
    margin:6px;
  }
}


/* ================================================================
   ZUPLIX MAIL V10.2 — MOBILE UNIVERSAL + SEGURANÇA
   ================================================================ */

/* Evita qualquer largura herdada que corte o aplicativo. */
html,
body,
#app{
  width:100%;
  max-width:100%;
  min-width:0;
}

.security-settings-hero{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:14px;
  border:1px solid
    color-mix(in srgb,var(--accent-1) 25%,var(--border));
  border-radius:13px;
  background:var(--theme-soft);
}

.security-settings-hero>span{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:var(--accent-gradient);
}

.security-settings-hero>div{
  min-width:0;
  display:grid;
  gap:4px;
}

.security-settings-hero strong{
  font-size:.78rem;
}

.security-settings-hero small{
  color:var(--muted);
  font-size:.63rem;
  line-height:1.5;
}

.security-switches label{
  align-items:flex-start!important;
}

.security-switches label>span{
  display:grid;
  gap:3px;
}

.security-switches strong{
  font-size:.68rem;
}

.security-switches small{
  color:var(--muted);
  font-size:.58rem;
  line-height:1.45;
}

.security-locked{
  opacity:.78;
}

.security-info-card{
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
}

.security-info-card strong{
  font-size:.68rem;
}

.security-info-card p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:.6rem;
  line-height:1.5;
}

.message-security{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  margin:11px 14px 0;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
}

.message-security.security-low{
  border-color:#b9dfcc;
  background:#f1fbf6;
}

.message-security.security-medium{
  border-color:#ebcd84;
  background:#fff9e9;
}

.message-security.security-high{
  border-color:#efaaa8;
  background:#fff0f0;
}

.security-main{
  min-width:0;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:9px;
}

.security-shield{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#fff;
  background:#16a34a;
}

.security-medium .security-shield{
  background:#d97706;
}

.security-high .security-shield{
  background:#dc2626;
}

.security-main>div{
  min-width:0;
  display:grid;
  gap:3px;
}

.security-main strong{
  font-size:.69rem;
}

.security-main small{
  color:#5e7085;
  font-size:.57rem;
  line-height:1.4;
}

.security-auth{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}

.auth-badge{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:24px;
  padding:0 7px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.7);
  font-size:.51rem;
  white-space:nowrap;
}

.auth-badge b{
  font-size:.51rem;
}

.auth-pass{
  color:#087544;
  border-color:#a8dec4;
}

.auth-fail,
.auth-softfail,
.auth-permerror{
  color:#a51f1f;
  border-color:#efb3b3;
}

.security-actions{
  display:flex;
  gap:5px;
}

.security-actions button{
  min-height:31px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  background:rgba(255,255,255,.75);
  font-size:.56rem;
  font-weight:850;
}

.security-actions .danger-action{
  color:#fff;
  border-color:#dc2626;
  background:#dc2626;
}

.security-details-modal{
  position:relative;
  z-index:2;
  width:min(700px,100%);
  max-height:min(840px,calc(var(--app-height,100dvh) - 32px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 32px 100px rgba(4,20,46,.36);
}

.security-details-modal>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 17px;
  color:#fff;
  background:linear-gradient(
    135deg,
    var(--theme-sidebar-start),
    var(--theme-strong)
  );
}

.security-details-modal>header>div{
  display:grid;
  gap:2px;
}

.security-details-modal>header span{
  font-size:.54rem;
  opacity:.7;
  text-transform:uppercase;
}

.security-details-modal>header h2{
  margin:0;
  font-size:.9rem;
}

.security-details-modal>header button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  color:#fff;
  background:rgba(255,255,255,.08);
}

.security-score{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px 17px;
  border-bottom:1px solid var(--border);
}

.security-score>i{
  position:relative;
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:#e8eef5;
}

.security-score>i::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--risk);
  border-radius:inherit;
  background:linear-gradient(90deg,#16a34a,#f59e0b,#dc2626);
}

.security-score>div{
  display:grid;
  gap:1px;
  text-align:right;
}

.security-score strong{
  font-size:.85rem;
}

.security-score span{
  color:var(--muted);
  font-size:.53rem;
}

.security-details-modal>section{
  padding:12px 17px;
  overflow:auto;
}

.security-details-modal h3{
  margin:0 0 8px;
  font-size:.68rem;
}

.security-auth.large .auth-badge{
  min-height:30px;
  font-size:.57rem;
}

.security-reason-list,
.security-link-list{
  display:grid;
  gap:7px;
}

.security-reason-list article{
  display:grid;
  grid-template-columns:31px minmax(0,1fr);
  gap:8px;
  padding:9px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
}

.security-reason-list article>span{
  color:#d97706;
}

.security-reason-list .reason-high>span{
  color:#dc2626;
}

.security-reason-list article>div{
  display:grid;
  gap:2px;
}

.security-reason-list strong,
.security-link-list strong{
  font-size:.62rem;
}

.security-reason-list p{
  margin:0;
  color:var(--muted);
  font-size:.56rem;
  line-height:1.45;
}

.security-link-list article{
  display:grid;
  gap:2px;
  padding:9px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
}

.security-link-list small{
  color:var(--muted);
  font-size:.55rem;
  line-height:1.4;
}

.security-details-modal>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 17px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
}

.security-details-modal>footer>span{
  color:var(--muted);
  font-size:.54rem;
}

.danger-button{
  min-height:35px;
  padding:0 11px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:#dc2626;
  font-size:.59rem;
  font-weight:900;
}

.link-guard-modal{
  position:relative;
  z-index:2;
  width:min(520px,100%);
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:17px;
  background:var(--surface);
  box-shadow:0 30px 95px rgba(4,20,46,.38);
}

.link-guard-modal>header{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:15px 16px;
  background:var(--theme-soft);
}

.link-guard-modal.dangerous>header{
  color:#8e1717;
  background:#fff0f0;
}

.link-guard-modal>header>span{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  background:#d97706;
}

.link-guard-modal.dangerous>header>span{
  background:#dc2626;
}

.link-guard-modal>header>div{
  display:grid;
  gap:2px;
}

.link-guard-modal>header small{
  color:var(--muted);
  font-size:.55rem;
}

.link-guard-modal>header h2{
  margin:0;
  font-size:.82rem;
}

.link-domain{
  display:grid;
  gap:4px;
  margin:13px 16px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
}

.link-domain span{
  color:var(--muted);
  font-size:.52rem;
  text-transform:uppercase;
}

.link-domain strong{
  overflow-wrap:anywhere;
  font-size:.7rem;
}

.link-guard-modal>p,
.link-guard-modal>ul{
  margin:0;
  padding:0 16px 13px;
  color:var(--muted);
  font-size:.61rem;
  line-height:1.5;
}

.link-guard-modal>ul{
  padding-left:34px;
}

.link-guard-modal>footer{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  padding:11px 16px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
}

.risky-download{
  color:#fff!important;
  border-color:#dc2626!important;
  background:#dc2626!important;
}

/* ---------------------------------------------------------------
   RESPONSIVIDADE UNIVERSAL: iPhone SE até Android grande/tablet
   --------------------------------------------------------------- */
@media(max-width:820px){
  html,
  body,
  #app{
    width:100%!important;
    max-width:100%!important;
    height:var(--app-height,100dvh)!important;
    min-height:var(--app-height,100dvh)!important;
    overflow:hidden!important;
    overscroll-behavior:none;
  }

  body{
    position:fixed;
    inset:0;
  }

  .workspace-shell{
    width:100%!important;
    max-width:100%!important;
    height:var(--app-height,100dvh)!important;
    min-height:0!important;
    display:block!important;
    overflow:hidden!important;
  }

  .workspace-main{
    width:100%!important;
    max-width:100%!important;
    height:var(--app-height,100dvh)!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    overflow:hidden!important;
  }

  .topbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:calc(58px + env(safe-area-inset-top))!important;
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    grid-template-areas:"menu search ai"!important;
    gap:7px!important;
    padding:
      max(8px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      8px
      max(8px,env(safe-area-inset-left))!important;
  }

  .menu-trigger{
    grid-area:menu!important;
  }

  .global-search{
    grid-area:search!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }

  .global-search input{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }

  .global-search select{
    display:none!important;
  }

  .global-search button{
    flex:0 0 auto;
  }

  .topbar .top-icon{
    display:none!important;
  }

  .topbar .menu-trigger,
  .topbar .ai-top-button{
    display:grid!important;
  }

  .ai-top-button{
    grid-area:ai!important;
  }

  .mail-stage,
  .mail-stage:has(.utility-column.open){
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    display:block!important;
    padding:0!important;
    overflow:hidden!important;
    background:var(--surface)!important;
  }

  .mail-column,
  .reader-column{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .mail-column{
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    overflow:hidden!important;
  }

  .reader-column{
    z-index:40!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translate3d(102%,0,0)!important;
    transition:transform .18s ease!important;
    background:var(--surface)!important;
  }

  .mobile-reader-open .reader-column{
    transform:translate3d(0,0,0)!important;
  }

  .message-list{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }

  .mail-toolbar{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    padding:7px 8px!important;
  }

  .standard-toolbar{
    min-width:0!important;
    gap:5px!important;
    padding:0!important;
  }

  .standard-toolbar>div:first-child{
    min-width:0!important;
  }

  .standard-toolbar h1{
    max-width:42vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .toolbar-button{
    flex:0 0 34px!important;
    width:34px!important;
    min-width:34px!important;
    padding:0!important;
  }

  .category-tabs{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:4px 7px!important;
    scrollbar-width:none;
  }

  .category-tabs::-webkit-scrollbar{
    display:none;
  }

  .category-tabs button{
    flex:0 0 auto!important;
    min-width:auto!important;
    padding:0 11px!important;
  }

  .mail-row{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:
      24px 22px 34px minmax(0,1fr)!important;
    gap:5px!important;
    padding:9px 8px!important;
  }

  .row-main,
  .row-head,
  .row-subject,
  .row-meta{
    min-width:0!important;
    max-width:100%!important;
  }

  .row-head strong,
  .row-subject span,
  .row-meta>span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .row-important,
  .row-actions{
    display:none!important;
  }

  .row-avatar{
    width:33px!important;
    height:33px!important;
  }

  .list-footer{
    min-height:38px!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }

  .reader-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .reader-toolbar{
    position:sticky!important;
    z-index:15!important;
    top:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:
      max(7px,env(safe-area-inset-top))
      8px
      7px!important;
    background:var(--surface)!important;
  }

  .reader-actions{
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .reader-actions::-webkit-scrollbar{
    display:none;
  }

  .reader-actions button{
    flex:0 0 36px!important;
    width:36px!important;
    min-width:36px!important;
    padding:0!important;
  }

  .reader-actions button span{
    display:none!important;
  }

  .reader-header{
    width:100%!important;
    min-width:0!important;
    padding:14px 12px 10px!important;
  }

  .reader-title-line,
  .sender-line{
    min-width:0!important;
  }

  .reader-title-line h1{
    min-width:0!important;
    font-size:1.02rem!important;
    overflow-wrap:anywhere!important;
  }

  .sender-line>div:nth-child(2){
    min-width:0!important;
  }

  .sender-line strong,
  .sender-line span,
  .sender-line small{
    display:block!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .message-security{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    margin:8px 10px 0!important;
    padding:10px!important;
  }

  .security-auth{
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
  }

  .security-auth::-webkit-scrollbar{
    display:none;
  }

  .security-actions{
    justify-content:flex-end;
  }

  .email-frame{
    display:block!important;
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    min-width:0!important;
    margin:10px!important;
    border:0!important;
  }

  .remote-images,
  .reader-attachments,
  .smart-replies,
  .reader-productivity,
  .message-note{
    width:100%!important;
    max-width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .reader-attachments>div{
    grid-template-columns:1fr!important;
  }

  .reader-attachment-card{
    width:100%!important;
    min-width:0!important;
  }

  .attachment-card-actions{
    flex-wrap:wrap!important;
  }

  .floating-ai-button{
    right:max(9px,env(safe-area-inset-right))!important;
    bottom:max(9px,env(safe-area-inset-bottom))!important;
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    padding:1px!important;
  }

  .floating-ai-button>span{
    display:none!important;
  }

  .floating-ai-button picture{
    width:51px!important;
    height:54px!important;
  }

  .utility-column{
    position:fixed!important;
    z-index:330!important;
    inset:
      max(7px,env(safe-area-inset-top))
      max(7px,env(safe-area-inset-right))
      max(7px,env(safe-area-inset-bottom))
      max(7px,env(safe-area-inset-left))!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    border-radius:15px!important;
  }

  .settings-layer,
  .modal-layer{
    padding:
      max(0px,env(safe-area-inset-top))
      max(0px,env(safe-area-inset-right))
      max(0px,env(safe-area-inset-bottom))
      max(0px,env(safe-area-inset-left))!important;
  }

  .settings-panel{
    width:100%!important;
    max-width:100%!important;
    height:var(--app-height,100dvh)!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    border:0!important;
    border-radius:0!important;
  }

  .settings-panel>aside{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    gap:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:
      max(7px,env(safe-area-inset-top))
      7px
      7px!important;
    scrollbar-width:none;
  }

  .settings-panel>aside::-webkit-scrollbar{
    display:none;
  }

  .settings-panel>aside>button{
    flex:0 0 auto!important;
    min-height:34px!important;
  }

  .settings-panel>main{
    min-width:0!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
  }

  .settings-panel>main>header{
    min-width:0!important;
    padding:9px 11px!important;
  }

  .settings-body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:11px!important;
    -webkit-overflow-scrolling:touch;
  }

  .settings-form,
  .settings-grid,
  .contact-form,
  .rule-form,
  .gradient-theme-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:1fr!important;
  }

  .settings-form input,
  .settings-form select,
  .settings-form textarea{
    max-width:100%!important;
    font-size:16px!important;
  }

  .composer-window[data-mode="normal"],
  .composer-window[data-mode="fullscreen"]{
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    height:var(--app-height,100dvh)!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
  }

  .composer-window[data-mode="minimized"]{
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    width:calc(
      100% -
      max(14px,calc(env(safe-area-inset-left) + env(safe-area-inset-right)))
    )!important;
    max-width:none!important;
  }

  .composer-window>header{
    padding-top:max(9px,env(safe-area-inset-top))!important;
  }

  #composeForm{
    min-width:0!important;
    min-height:0!important;
  }

  .recipient-line{
    min-width:0!important;
    grid-template-columns:54px minmax(0,1fr) auto!important;
  }

  .recipient-line input{
    min-width:0!important;
    max-width:100%!important;
    font-size:16px!important;
  }

  .word-editor-toolbar{
    width:100%!important;
    min-width:0!important;
    max-height:116px!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
    flex-wrap:nowrap!important;
    -webkit-overflow-scrolling:touch;
  }

  .word-editor-toolbar>*{
    flex:0 0 auto!important;
  }

  .compose-editor{
    min-width:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    font-size:16px!important;
  }

  .attachment-preview-modal,
  .security-details-modal{
    width:100%!important;
    max-width:100%!important;
    height:var(--app-height,100dvh)!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
  }

  .link-guard-modal{
    width:calc(100% - 18px)!important;
    max-width:none!important;
  }

  .security-details-modal>footer{
    flex-direction:column!important;
    align-items:stretch!important;
    padding-bottom:max(11px,env(safe-area-inset-bottom))!important;
  }

  .security-details-modal>footer button{
    width:100%!important;
  }
}

@media(
  max-width:950px
) and (orientation:landscape) and (max-height:600px){
  .topbar{
    min-height:50px!important;
    padding:
      max(4px,env(safe-area-inset-top))
      max(7px,env(safe-area-inset-right))
      4px
      max(7px,env(safe-area-inset-left))!important;
  }

  .mail-row{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  .category-tabs{
    min-height:34px!important;
  }

  .reader-toolbar{
    padding-top:4px!important;
  }

  .utility-column{
    inset:4px!important;
  }
}

@media(max-width:360px){
  .topbar{
    grid-template-columns:36px minmax(0,1fr) 36px!important;
    gap:4px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }

  .mail-row{
    grid-template-columns:
      22px 20px 31px minmax(0,1fr)!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }

  .row-avatar{
    width:30px!important;
    height:30px!important;
  }

  .security-actions{
    flex-direction:column!important;
  }

  .security-actions button{
    width:100%!important;
  }
}


/* ================================================================
   ZUPLIX MAIL V10.3 — MOBILE DEFINITIVO + CARD DE SEGURANÇA
   ================================================================ */

/* Mascote no lugar do antigo quadrado com Z. */
.brand{
  gap:7px!important;
}

.brand-symbol,
.sidebar-corner-mascot{
  display:none!important;
}

.brand-mascot{
  flex:0 0 auto;
  width:43px;
  height:50px;
  display:block;
  overflow:visible;
}

.brand-mascot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.18));
}

.workspace-sidebar .brand-words{
  display:flex;
  align-items:baseline;
  gap:6px;
}

.workspace-sidebar .brand-words span{
  margin:0!important;
  letter-spacing:.13em!important;
}

.sidebar-brand-header{
  grid-template-columns:minmax(0,1fr) auto!important;
  min-height:58px!important;
  padding-left:5px!important;
}

/* Card de segurança compacto. */
.message-security{
  display:block!important;
  margin:8px 12px 0!important;
  padding:8px 9px!important;
}

.security-compact-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
}

.security-main{
  grid-template-columns:32px minmax(0,1fr)!important;
  gap:7px!important;
}

.security-shield{
  width:32px!important;
  height:32px!important;
}

.security-main strong{
  font-size:.64rem!important;
}

.security-main small{
  display:block;
  overflow:hidden;
  max-width:100%;
  font-size:.54rem!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.security-card-score{
  display:grid;
  gap:0;
  min-width:34px;
  text-align:center;
}

.security-card-score b{
  font-size:.77rem;
}

.security-card-score span{
  color:var(--muted);
  font-size:.45rem;
  text-transform:uppercase;
}

.security-card-controls{
  display:flex;
  align-items:center;
  gap:4px;
}

.security-card-controls button{
  min-height:29px;
  padding:0 7px;
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--text);
  background:rgba(255,255,255,.8);
  font-size:.52rem;
  font-weight:850;
}

.security-card-controls .security-close{
  width:29px;
  min-width:29px;
  padding:0;
}

.security-expanded-content{
  display:none;
  gap:8px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid
    color-mix(in srgb,currentColor 12%,var(--border));
}

.message-security.expanded .security-expanded-content{
  display:grid;
}

.security-expanded-content p{
  margin:0;
  color:var(--muted);
  font-size:.57rem;
  line-height:1.45;
}

.security-mini-card{
  width:auto;
  max-width:calc(100% - 24px);
  min-height:32px;
  display:flex;
  align-items:center;
  gap:6px;
  margin:8px 12px 0;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  background:var(--surface-2);
  font-size:.54rem;
  font-weight:850;
}

.security-mini-card.security-low{
  border-color:#a8dec4;
  background:#f1fbf6;
}

.security-mini-card.security-medium{
  border-color:#ebcd84;
  background:#fff9e9;
}

.security-mini-card.security-high{
  border-color:#efaaa8;
  background:#fff0f0;
}

.security-mini-card b{
  margin-left:auto;
}

.trusted-domain-field{
  display:grid!important;
  gap:6px!important;
}

.trusted-domain-field textarea{
  width:100%;
  min-height:92px;
  resize:vertical;
  border:1px solid var(--border);
  border-radius:9px;
  padding:9px 10px;
  color:var(--text);
  background:var(--surface);
  font:inherit;
  line-height:1.5;
}

.trusted-domain-field small{
  color:var(--muted);
  font-size:.56rem;
  line-height:1.45;
}

/* ---------------------------------------------------------------
   Reset final das regras móveis antigas.
   Não usa body fixed nem visualViewport como dimensão do aplicativo.
   --------------------------------------------------------------- */
@media(max-width:900px){
  html{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }

  body{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #app{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    min-height:100svh!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .workspace-shell{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    display:block!important;
    overflow:hidden!important;
  }

  .workspace-main{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .topbar{
    position:relative!important;
    z-index:30!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:56px!important;
    max-width:100%!important;
    grid-template-columns:38px minmax(0,1fr) 38px!important;
    grid-template-areas:"menu search ai"!important;
    gap:5px!important;
    padding:
      max(7px,env(safe-area-inset-top))
      max(6px,env(safe-area-inset-right))
      7px
      max(6px,env(safe-area-inset-left))!important;
  }

  .topbar .top-icon{
    display:none!important;
  }

  .topbar .menu-trigger,
  .topbar .ai-top-button{
    display:grid!important;
  }

  .global-search{
    width:100%!important;
    min-width:0!important;
  }

  .global-search input{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
  }

  .global-search select{
    display:none!important;
  }

  .mail-stage,
  .mail-stage:has(.utility-column.open){
    position:relative!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-width:100%!important;
    display:block!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
  }

  .mail-column,
  .reader-column{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  .mail-column{
    z-index:1!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    overflow:hidden!important;
  }

  .reader-column{
    z-index:40!important;
    display:block!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translate3d(100%,0,0)!important;
    transition:transform .18s ease!important;
    background:var(--surface)!important;
    -webkit-overflow-scrolling:touch;
  }

  body.mobile-reader-open .reader-column{
    transform:translate3d(0,0,0)!important;
  }

  .message-list{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-width:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .workspace-sidebar{
    position:fixed!important;
    z-index:360!important;
    inset:0 auto 0 0!important;
    width:min(86vw,300px)!important;
    height:100dvh!important;
    max-width:300px!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .2s ease!important;
  }

  body.sidebar-open .workspace-sidebar{
    transform:translate3d(0,0,0)!important;
  }

  .mobile-scrim{
    position:fixed!important;
    z-index:350!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }

  .reader-card,
  .reader-header,
  .reader-body,
  .email-frame,
  .reader-attachments,
  .smart-replies,
  .reader-productivity,
  .message-note{
    max-width:100%!important;
    min-width:0!important;
  }

  .email-frame{
    width:calc(100% - 16px)!important;
    margin:8px!important;
  }

  .message-security{
    margin:7px 8px 0!important;
  }

  .security-compact-row{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  .security-card-score{
    display:none!important;
  }

  .security-card-controls{
    grid-column:2!important;
    grid-row:1!important;
  }

  .security-expanded-content{
    grid-column:1 / -1!important;
  }

  .security-auth{
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
  }

  .settings-panel,
  .attachment-preview-modal,
  .security-details-modal{
    width:100%!important;
    height:100dvh!important;
    max-width:100%!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
  }

  .settings-body{
    min-width:0!important;
    overflow-x:hidden!important;
  }

  .settings-form input,
  .settings-form select,
  .settings-form textarea,
  .recipient-line input,
  .compose-editor{
    font-size:16px!important;
  }

  .utility-column{
    position:fixed!important;
    z-index:420!important;
    inset:
      max(6px,env(safe-area-inset-top))
      max(6px,env(safe-area-inset-right))
      max(6px,env(safe-area-inset-bottom))
      max(6px,env(safe-area-inset-left))!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
  }

  .composer-window[data-mode="normal"],
  .composer-window[data-mode="fullscreen"]{
    position:fixed!important;
    z-index:500!important;
    inset:0!important;
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
  }

  .composer-window[data-mode="minimized"]{
    position:fixed!important;
    z-index:500!important;
    right:max(7px,env(safe-area-inset-right))!important;
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    width:calc(
      100% -
      max(
        14px,
        calc(
          env(safe-area-inset-left) +
          env(safe-area-inset-right)
        )
      )
    )!important;
    max-width:none!important;
  }

  .login-page,
  .login-shell,
  .login-form-wrap{
    width:100%!important;
    min-height:100dvh!important;
    max-width:100%!important;
  }
}

@media(max-width:390px){
  .security-main small{
    max-width:170px;
  }

  .security-card-controls button:first-child{
    padding:0 6px;
  }

  .brand-mascot{
    width:39px;
    height:46px;
  }
}


/* ================================================================
   ZUPLIX MAIL V10.4 — CLIQUE SUAVE, OCEANO E QUOTA
   ================================================================ */

html{
  -webkit-tap-highlight-color:transparent;
}

.mail-row{
  content-visibility:visible!important;
  contain:none!important;
  transition:
    background-color .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    transform .1s ease!important;
}

.mail-row .row-main,
.mail-row button{
  -webkit-tap-highlight-color:transparent;
}

.mail-row:active{
  transform:scale(.998);
}

.mail-row.opened{
  transition:
    background-color .16s ease,
    box-shadow .16s ease!important;
}

.reader-column{
  position:relative;
}

.reader-switch-indicator{
  position:absolute;
  z-index:80;
  top:10px;
  right:12px;
  min-height:31px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border:1px solid
    color-mix(in srgb,var(--accent-1) 24%,var(--border));
  border-radius:999px;
  color:var(--theme-strong);
  background:
    color-mix(in srgb,var(--accent-1) 7%,#fff);
  box-shadow:0 6px 18px rgba(12,45,88,.12);
  pointer-events:none;
  animation:readerIndicatorIn .14s ease both;
}

.reader-switch-indicator>span{
  width:13px;
  height:13px;
  border:2px solid
    color-mix(in srgb,var(--accent-1) 25%,transparent);
  border-top-color:var(--accent-1);
  border-radius:50%;
  animation:spin .65s linear infinite;
}

.reader-switch-indicator small{
  font-size:.52rem;
  font-weight:850;
}

@keyframes readerIndicatorIn{
  from{
    opacity:0;
    transform:translateY(-4px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.reader-preview{
  animation:none!important;
}

.reader-soft-loading{
  display:grid;
  gap:11px;
  padding:18px 16px;
}

.reader-soft-loading>span{
  width:100%;
  height:160px;
  border-radius:13px;
  background:
    linear-gradient(
      90deg,
      var(--surface-2),
      var(--surface-3),
      var(--surface-2)
    );
  background-size:220% 100%;
  animation:softShimmer 1.15s ease infinite;
}

.reader-soft-loading>i{
  display:block;
  height:10px;
  border-radius:999px;
  background:var(--surface-3);
}

.reader-soft-loading>i:nth-child(2){
  width:92%;
}

.reader-soft-loading>i:nth-child(3){
  width:76%;
}

.reader-soft-loading>i:nth-child(4){
  width:48%;
}

@keyframes softShimmer{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

.mailbox-quota{
  display:grid;
  gap:7px;
  margin:4px 3px 8px;
  padding:10px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:11px;
  color:#fff;
  background:rgba(255,255,255,.07);
}

.quota-head,
.quota-values{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.quota-head strong{
  font-size:.59rem;
}

.quota-head span,
.mailbox-quota>small{
  color:rgba(255,255,255,.64);
  font-size:.49rem;
}

.mailbox-quota>i{
  position:relative;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}

.mailbox-quota>i>b{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--quota);
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    var(--accent-2),
    #72d6ff
  );
}

.quota-values span{
  display:grid;
  gap:1px;
  color:rgba(255,255,255,.61);
  font-size:.46rem;
}

.quota-values span:last-child{
  text-align:right;
}

.quota-values b{
  color:#fff;
  font-size:.53rem;
}

.mailbox-quota.unsupported{
  grid-template-columns:minmax(0,1fr) 28px;
  align-items:center;
}

.mailbox-quota.unsupported>div{
  min-width:0;
  display:grid;
  gap:2px;
}

.mailbox-quota.unsupported strong{
  font-size:.57rem;
}

.mailbox-quota.unsupported small{
  color:rgba(255,255,255,.59);
  font-size:.47rem;
  line-height:1.35;
}

.mailbox-quota.unsupported button{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
}

.mailbox-quota.loading{
  opacity:.68;
}

.login-helper strong{
  color:var(--accent-1);
}

@media(max-width:900px){
  .reader-switch-indicator{
    position:fixed;
    top:max(62px,calc(env(safe-area-inset-top) + 54px));
    right:9px;
  }

  .mailbox-quota{
    margin-right:5px;
    margin-left:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .mail-row,
  .reader-switch-indicator,
  .reader-soft-loading>span{
    transition:none!important;
    animation:none!important;
  }
}


/* ================================================================
   ZUPLIX MAIL V10.5 — ENVIO, LEITURA, MOVER E QUOTA
   ================================================================ */

.toast.success{
  color:#fff!important;
  background:#15803d!important;
}

.toast.warning{
  color:#fff!important;
  background:#a16207!important;
}

.mail-row[draggable="true"]{
  cursor:default;
}

.mail-row.dragging{
  opacity:.46;
  transform:scale(.985)!important;
}

body.dragging-mail [data-drop-folder]{
  transition:
    background-color .13s ease,
    box-shadow .13s ease,
    transform .13s ease!important;
}

body.dragging-mail [data-drop-folder]::after{
  content:"Soltar para mover";
  margin-left:auto;
  color:rgba(255,255,255,.65);
  font-size:.43rem;
}

[data-drop-folder].mail-drop-target{
  color:#fff!important;
  background:
    color-mix(
      in srgb,
      var(--accent-1) 68%,
      var(--theme-strong)
    )!important;
  box-shadow:
    inset 3px 0 0 #8ee5ff,
    0 7px 18px rgba(0,0,0,.15)!important;
  transform:translateX(3px);
}

.row-actions{
  max-width:205px;
}

.quota-head span{
  white-space:nowrap;
}

.mailbox-quota>small{
  line-height:1.35;
}

@media(max-width:900px){
  body.dragging-mail [data-drop-folder]::after{
    display:none;
  }
}


/* ZUPLIX Mail v10.6 — desarquivar */
.mail-row .row-actions
button[data-action="unarchive-message"]{
  color:var(--accent-1);
  background:var(--theme-soft);
}

.reader-actions
button[data-action="reader-archive-toggle"]{
  min-width:36px;
}

@media(max-width:900px){
  .reader-actions
  button[data-action="reader-archive-toggle"] span{
    display:none!important;
  }
}


/* ZUPLIX Mail v10.7 — progresso sem falso anexo */
.upload-progress.message-only span{
  width:42%;
  animation:
    zuplix-send-progress
    1.15s
    ease-in-out
    infinite alternate;
}

.upload-progress.message-only small{
  color:var(--theme-strong);
  font-weight:850;
}

@keyframes zuplix-send-progress{
  from{
    transform:translateX(-12%);
    opacity:.72;
  }

  to{
    transform:translateX(20%);
    opacity:1;
  }
}