:root {
  --topbar-h: 4rem;
  --rail-w: 4.4rem;
  --folder-w: 17.5rem;
  --reader-h: 43%;
  --bg: #f3f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #eef3f8;
  --text: #172234;
  --muted: #68758a;
  --line: #dfe5ed;
  --line-soft: #ebeff4;
  --primary: #316fea;
  --primary-dark: #2059c9;
  --primary-soft: #eaf1ff;
  --sidebar: #182437;
  --sidebar-2: #202e43;
  --shadow: 0 .65rem 2rem rgba(31, 46, 69, .12);
  --radius: .8rem;
  --row-h: 4.1rem;
  --mail-grid: 2.35rem 2.25rem 2.6rem minmax(9.5rem, 18%) minmax(17rem, 1fr) 4.1rem 5.4rem 5.8rem;
}

[data-bs-theme="dark"] {
  --bg: #111722;
  --surface: #17202d;
  --surface-2: #1c2634;
  --surface-3: #222e3e;
  --text: #e7edf6;
  --muted: #9aa8bb;
  --line: #2e3b4d;
  --line-soft: #263344;
  --primary-soft: #20375e;
  --sidebar: #0d1420;
  --sidebar-2: #152032;
  --shadow: 0 .65rem 2rem rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .875rem;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-w) var(--folder-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  background: var(--bg);
}

.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 1040;
  display: grid;
  grid-template-columns: calc(var(--rail-w) + var(--folder-w) - 1.25rem) minmax(16rem, 42rem) 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  color: #eaf0f9;
  background: var(--sidebar);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.brand-wrap, .brand, .top-actions, .user-menu, .sync-state, .pane-heading,
.toolbar-actions, .toolbar-title, .sender-card, .attachment-heading, .settings-toolbar,
.user-cell, .account-row, .compose-header, .compose-footer { display: flex; align-items: center; }

.brand-wrap { gap: .5rem; }
.brand { gap: .7rem; color: #fff; text-decoration: none; }
.brand-mark { display:grid; place-items:center; width: 2.15rem; aspect-ratio:1; border-radius: .65rem; background:linear-gradient(145deg,#5d91ff,#2866e7); box-shadow:0 .35rem 1rem rgba(40,102,231,.32); font-size:1.1rem; }
.brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.brand-name span { color:#75a2ff; }

.icon-btn { display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; padding:0; border:0; border-radius:.55rem; color:inherit; background:transparent; transition:.18s ease; }
.icon-btn:hover { background: var(--surface-3); }
.topbar .icon-btn:hover { background:rgba(255,255,255,.1); }

.global-search { position:relative; display:flex; align-items:center; height:2.5rem; border:1px solid rgba(255,255,255,.12); border-radius:.7rem; background:rgba(255,255,255,.08); transition:.2s ease; }
.global-search:focus-within { border-color:#6e9cff; background:rgba(255,255,255,.12); box-shadow:0 0 0 .2rem rgba(80,130,235,.14); }
.global-search > i { margin:0 .7rem 0 .85rem; color:#9eacc1; }
.global-search input { flex:1; min-width:0; height:100%; border:0; outline:0; color:#fff; background:transparent; }
.global-search input::placeholder { color:#9eacc1; }
.global-search kbd, .compose-btn kbd { padding:.08rem .38rem; border:1px solid rgba(255,255,255,.14); border-radius:.3rem; color:#aebad0; background:rgba(255,255,255,.06); font-size:.68rem; font-weight:500; }
.search-options { width:2.2rem; height:100%; border:0; color:#b8c3d4; background:transparent; }

.top-actions { justify-content:flex-end; gap:.3rem; min-width:0; }
.sync-state { gap:.45rem; margin-right:.5rem; color:#aebad0; font-size:.74rem; }
.live-dot { width:.45rem; aspect-ratio:1; border-radius:50%; background:#3dce83; box-shadow:0 0 0 .22rem rgba(61,206,131,.13); }
.notification-dot { position:absolute; top:.35rem; right:.35rem; width:.42rem; aspect-ratio:1; border:2px solid var(--sidebar); border-radius:50%; background:#ff5d69; }
.user-menu { gap:.65rem; padding:.28rem .35rem .28rem .55rem; border:0; border-radius:.65rem; color:#fff; background:transparent; text-align:left; }
.user-menu:hover { background:rgba(255,255,255,.08); }
.user-copy { line-height:1.15; }
.user-copy strong,.user-copy small { display:block; }
.user-copy strong { font-size:.8rem; }
.user-copy small { margin-top:.16rem; color:#9eacc1; font-size:.66rem; }

.avatar { display:inline-grid; flex:0 0 auto; place-items:center; width:2rem; aspect-ratio:1; border-radius:.62rem; color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.02em; }
.avatar-xl { width:4rem; border-radius:1.15rem; font-size:1.15rem; }
.avatar-blue{background:#3478e5}.avatar-orange{background:#e88a31}.avatar-green{background:#36a573}.avatar-violet{background:#7657d9}.avatar-pink{background:#d85894}.avatar-red{background:#d9515b}.avatar-dark{background:#35455c}

.account-rail {
  grid-column:1; grid-row:2;
  display:flex; flex-direction:column; align-items:center; gap:.65rem;
  padding:.9rem .55rem max(.9rem,env(safe-area-inset-bottom));
  color:#b6c0cf; background:var(--sidebar);
}
.account-badge { position:relative; display:grid; place-items:center; width:2.75rem; aspect-ratio:1; padding:0; border:1px solid transparent; border-radius:.85rem; color:#aeb9cb; background:transparent; font-size:1.15rem; transition:.18s ease; }
.account-badge:hover { color:#fff; background:rgba(255,255,255,.08); }
.account-badge.active { color:#fff; background:var(--primary); box-shadow:0 .3rem 1rem rgba(49,111,234,.3); }
.account-badge .avatar { width:2.45rem; border-radius:.78rem; }
.account-badge:not(.active):has(.avatar):hover { transform:translateY(-1px); }
.account-count { position:absolute; top:-.28rem; right:-.28rem; min-width:1.15rem; height:1.15rem; padding:0 .22rem; border:2px solid var(--sidebar); border-radius:1rem; color:#fff; background:#ec5b64; font-size:.58rem; line-height:.9rem; }
.status-dot { position:absolute; right:.05rem; bottom:.05rem; width:.55rem; aspect-ratio:1; border:2px solid var(--sidebar); border-radius:50%; }
.rail-divider { width:1.65rem; height:1px; margin:.05rem 0; background:rgba(255,255,255,.1); }
.rail-spacer { flex:1; }
.add-account { border:1px dashed rgba(255,255,255,.25); font-size:.95rem; }

.folder-pane {
  grid-column:2; grid-row:2;
  z-index:1030;
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  background:var(--surface); border-right:1px solid var(--line);
}
.pane-heading { justify-content:space-between; padding:1rem 1rem .65rem; }
.pane-heading small,.eyebrow { display:block; margin-bottom:.18rem; color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.11em; }
.pane-heading h1 { margin:0; font-size:1.05rem; font-weight:750; }
.compose-btn { display:flex; align-items:center; gap:.65rem; height:2.65rem; margin:.35rem .8rem .85rem; padding:0 .75rem; border:0; border-radius:.7rem; color:#fff; background:var(--primary); box-shadow:0 .38rem 1rem rgba(49,111,234,.22); font-weight:700; transition:.18s ease; }
.compose-btn:hover { background:var(--primary-dark); transform:translateY(-1px); }
.compose-btn i { font-size:1rem; }.compose-btn kbd{margin-left:auto;color:#dbe7ff}
.folder-tree { flex:1; min-height:0; overflow:auto; padding:0 .55rem .8rem; scrollbar-width:thin; }
.folder-item { display:grid; grid-template-columns:1.3rem minmax(0,1fr) auto; align-items:center; gap:.55rem; width:100%; height:2.15rem; padding:0 .55rem; border:0; border-radius:.48rem; color:var(--muted); background:transparent; text-align:left; white-space:nowrap; transition:.14s ease; }
.folder-item:hover { color:var(--text); background:var(--surface-2); }
.folder-item.active { color:var(--primary); background:var(--primary-soft); font-weight:700; }
.folder-item span { overflow:hidden; text-overflow:ellipsis; }
.folder-item strong { padding:.08rem .38rem; border-radius:1rem; color:inherit; background:var(--surface-3); font-size:.65rem; font-weight:700; }
.folder-item.active strong { background:rgba(49,111,234,.12); }
.folder-item.custom-red i{color:#e34e59}.folder-item.custom-blue i{color:#3274de}.folder-item.custom-orange i{color:#e3892f}.folder-item.custom-green i{color:#32a16f}.folder-item.custom-purple i{color:#7958d8}
.tree-section { margin-top:.9rem; }
.tree-section.compact { margin-top:.4rem; }
.section-heading { display:flex; align-items:center; height:1.9rem; padding:0 .25rem; }
.section-toggle { display:flex; flex:1; align-items:center; gap:.35rem; padding:0; border:0; color:var(--muted); background:transparent; font-size:.64rem; font-weight:800; letter-spacing:.07em; text-align:left; }
.section-toggle i { font-size:.62rem; transition:.2s ease; }.section-toggle.collapsed i{transform:rotate(-90deg)}
.mini-action,.branch-toggle,.branch-menu { display:grid; place-items:center; padding:0; border:0; color:var(--muted); background:transparent; }
.mini-action { width:1.65rem; height:1.65rem; border-radius:.35rem; }.mini-action:hover{background:var(--surface-3);color:var(--text)}
.folder-branch { position:relative; }.branch-row{display:grid;grid-template-columns:1rem minmax(0,1fr) 1rem;align-items:center}.branch-toggle,.branch-spacer{width:1rem}.branch-toggle{font-size:.58rem}.branch-menu{width:1rem;opacity:0;font-size:.8rem}.branch-row:hover .branch-menu{opacity:1}.branch-children{margin-left:1rem;border-left:1px solid var(--line);padding-left:.15rem}.branch-children:empty{display:none}.folder-branch.collapsed>.branch-children{display:none}.folder-branch.collapsed>.branch-row .branch-toggle{transform:rotate(-90deg)}
.storage-card { padding:.7rem .95rem .9rem; border-top:1px solid var(--line-soft); background:var(--surface); }
.storage-card>div:first-child{display:flex;justify-content:space-between;color:var(--muted);font-size:.65rem}.storage-card strong{color:var(--text);font-weight:650}.storage-card .progress{height:.28rem;margin-top:.45rem;background:var(--surface-3)}

.workspace { grid-column:3; grid-row:2; display:grid; min-width:0; min-height:0; background:var(--bg); }
.mail-panel,.reader-panel { min-width:0; min-height:0; overflow:hidden; background:var(--surface); }
body[data-layout="bat"] .workspace { grid-template-rows:minmax(17rem, calc(100% - var(--reader-h))) minmax(14rem, var(--reader-h)); }
body[data-layout="bat"] .reader-panel { border-top:1px solid var(--line); }
body[data-layout="outlook"] .workspace,body[data-layout="thunderbird"] .workspace { grid-template-columns:minmax(26rem,42%) minmax(28rem,1fr); grid-template-rows:1fr; }
body[data-layout="outlook"] .reader-panel,body[data-layout="thunderbird"] .reader-panel { border-left:1px solid var(--line); }
body[data-layout="gmail"] .workspace { grid-template-columns:1fr;grid-template-rows:1fr}.gmail .reader-panel{display:none}
body[data-layout="gmail"] .reader-panel { position:absolute; z-index:1050; top:var(--topbar-h); right:0; bottom:0; width:min(55rem,calc(100% - var(--rail-w) - var(--folder-w))); transform:translateX(105%); box-shadow:var(--shadow); transition:.25s ease; }
body[data-layout="gmail"].reader-open .reader-panel { transform:none; }
body.preview-hidden .workspace { grid-template:1fr/1fr!important } body.preview-hidden .reader-panel{display:none!important}

.mail-panel { display:flex; flex-direction:column; }
.workspace-toolbar { display:flex; align-items:center; justify-content:space-between; min-height:4rem; padding:.7rem 1rem; border-bottom:1px solid var(--line-soft); }
.toolbar-title { gap:.35rem;min-width:0}.toolbar-title h2{margin:0;font-size:1.1rem;font-weight:760}.toolbar-title small{display:block;margin-top:.12rem;color:var(--muted);font-size:.68rem}
.toolbar-actions { gap:.25rem; }
.toolbar-btn { display:flex;align-items:center;gap:.38rem;height:2.25rem;padding:0 .62rem;border:0;border-radius:.55rem;color:var(--muted);background:transparent}.toolbar-btn:hover{color:var(--text);background:var(--surface-3)}
.folder-tabs-wrap { display:flex; min-height:2.85rem; padding:0 .75rem; border-bottom:1px solid var(--line); background:var(--surface); }
.folder-tabs { display:flex; min-width:0; overflow-x:auto; scrollbar-width:none; }.folder-tabs::-webkit-scrollbar{display:none}
.folder-tab { position:relative; flex:0 0 auto; padding:0 .75rem; border:0; color:var(--muted); background:transparent; font-size:.73rem;font-weight:600;white-space:nowrap}.folder-tab:after{content:"";position:absolute;right:.6rem;bottom:0;left:.6rem;height:.16rem;border-radius:.2rem .2rem 0 0;background:transparent}.folder-tab.active{color:var(--primary)}.folder-tab.active:after{background:var(--primary)}.folder-tab span{margin-left:.25rem;color:inherit;font-size:.63rem}
.add-tab-box { position:relative; display:flex;align-items:center;flex:0 0 auto}.add-tab-btn{display:grid;place-items:center;width:1.8rem;height:1.8rem;border:1px dashed var(--line);border-radius:.45rem;color:var(--muted);background:transparent}.add-tab-btn:hover{color:var(--primary);border-color:var(--primary)}
.tab-search-form { position:absolute;z-index:5;right:0;top:.35rem;display:none;align-items:center;width:15rem;height:2.2rem;padding-left:.55rem;border:1px solid var(--primary);border-radius:.55rem;background:var(--surface);box-shadow:var(--shadow)}.tab-search-form.show{display:flex}.tab-search-form input{flex:1;min-width:0;border:0;outline:0;background:transparent}.tab-search-form button{width:1.8rem;height:100%;padding:0;border:0;background:transparent}.tab-search-form>i{margin-right:.4rem;color:var(--muted)}
.bulk-toolbar { display:flex; align-items:center; gap:.18rem; min-height:2.55rem; padding:0 .55rem; border-bottom:1px solid var(--line-soft); background:var(--surface-2); }
.bulk-toolbar>button,.reader-actions button,.reader-nav button { display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.45rem;color:var(--muted);background:transparent}.bulk-toolbar>button:hover:not(:disabled),.reader-actions button:hover,.reader-nav button:hover{color:var(--text);background:var(--surface-3)}.bulk-toolbar>button:disabled{opacity:.35}.bulk-separator{width:1px;height:1.15rem;margin:0 .3rem;background:var(--line)}.list-range{color:var(--muted);font-size:.66rem}
.mail-check{display:grid;place-items:center;margin:0}.mail-check .form-check-input{margin:0;cursor:pointer}
.mail-table{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden}.mail-columns,.mail-row{display:grid;grid-template-columns:var(--mail-grid);align-items:center;column-gap:.25rem}.mail-columns{min-height:1.85rem;padding:0 .55rem;border-bottom:1px solid var(--line-soft);color:var(--muted);background:var(--surface);font-size:.61rem;font-weight:750;text-transform:uppercase;letter-spacing:.035em}.mail-list{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}.mail-row{position:relative;min-height:var(--row-h);padding:0 .55rem;border-bottom:1px solid var(--line-soft);background:var(--surface);cursor:pointer;transition:.12s ease}.mail-row:hover{z-index:1;background:var(--surface-2)}.mail-row.active{background:var(--primary-soft);box-shadow:inset .18rem 0 var(--primary)}.mail-row.selected{background:color-mix(in srgb,var(--primary-soft) 72%,var(--surface));box-shadow:inset .18rem 0 var(--primary)}.mail-row.long-pressing{transform:scale(.995);background:var(--primary-soft)}.mail-row.unread{background:color-mix(in srgb,var(--primary-soft) 38%,var(--surface))}.mail-row.unread:hover,.mail-row.unread.active,.mail-row.unread.selected{background:var(--primary-soft)}.mail-row.unread .mail-sender strong,.mail-row.unread .mail-subject>strong,.mail-row.unread .mail-date{font-weight:800;color:var(--text)}
.star-btn{display:grid;place-items:center;width:1.8rem;height:1.8rem;padding:0;border:0;color:#a8b1be;background:transparent}.star-btn.starred{color:#f5ae22}.star-btn.starred i:before{content:"\f586"}
.mail-label{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:.42rem;color:#fff;font-size:.68rem}.mail-label:empty,.mail-label.no-label{background:transparent!important}.mail-sender,.mail-subject{min-width:0}.mail-sender strong,.mail-sender small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mail-sender strong{font-size:.76rem;font-weight:650}.mail-sender small{margin-top:.15rem;color:var(--muted);font-size:.62rem}.mail-subject{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.3rem}.mail-subject>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:650}.mail-subject p{grid-column:1/-1;margin:.2rem 0 0;overflow:hidden;color:var(--muted);font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}.thread-count{padding:.02rem .28rem;border-radius:1rem;color:var(--muted);background:var(--surface-3);font-size:.58rem}.mail-owner{display:grid;place-items:center}.mail-owner .avatar{width:1.65rem;border-radius:50%;font-size:.55rem}.mail-attachment{color:var(--muted);font-size:.78rem;text-align:center}.mail-date{color:var(--muted);font-size:.64rem;text-align:right;white-space:nowrap}.mobile-meta,.mobile-account-dot{display:none}
.mail-attachment{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:.16rem;line-height:1}.mail-attachment>i{font-size:.82rem}.mail-attachment>small{display:block;max-width:100%;overflow:hidden;color:var(--muted);font-size:.5rem;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.mail-attachment.empty{visibility:hidden}
.empty-state{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center}.empty-state.show{display:flex}.empty-state i{font-size:2.5rem;opacity:.35}.empty-state h3{margin:.7rem 0 .2rem;color:var(--text);font-size:1rem}.empty-state p{margin:0;font-size:.75rem}
body.compact-mode{--row-h:3.25rem}body.compact-mode .mail-sender small,body.compact-mode .mail-subject p{display:none}
body.hide-col-label .col-label,body.hide-col-owner .col-owner,body.hide-col-attachment .col-attachment,body.hide-col-date .col-date{display:none}
body.hide-col-label{--mail-grid:2.35rem 2.25rem minmax(9.5rem,18%) minmax(17rem,1fr) 4.1rem 5.4rem 5.8rem}
body.hide-col-owner{--mail-grid:2.35rem 2.25rem 2.6rem minmax(9.5rem,18%) minmax(17rem,1fr) 5.4rem 5.8rem}

.reader-panel{position:relative}.reader-empty{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-align:center}.empty-illustration{display:grid;place-items:center;width:4.5rem;aspect-ratio:1;border-radius:1.35rem;color:var(--primary);background:var(--primary-soft);font-size:1.8rem}.reader-empty h3{margin:.8rem 0 .25rem;color:var(--text);font-size:1rem}.reader-empty p{margin:0;font-size:.75rem}.message-view{display:none;height:100%;flex-direction:column}.message-view.show{display:flex}.reader-toolbar{display:flex;align-items:center;min-height:2.8rem;padding:0 .7rem;border-bottom:1px solid var(--line-soft);background:var(--surface)}.reader-actions{display:flex;gap:.15rem}.reader-close{margin-right:.4rem}.reader-nav{display:flex}.message-scroll{flex:1;min-height:0;overflow:auto;padding:1rem clamp(1rem,4vw,3rem) 2rem}.message-label-line{display:flex;gap:.4rem;margin-bottom:.55rem}.label-pill,.account-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .5rem;border-radius:1rem;font-size:.62rem;font-weight:700}.account-pill{color:var(--muted);background:var(--surface-3)}.message-scroll>h2{margin:0 0 1rem;max-width:58rem;font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.3;font-weight:750}.sender-card{position:relative;gap:.7rem;padding-bottom:1rem;border-bottom:1px solid var(--line-soft)}.sender-info{min-width:0}.sender-info strong,.sender-info span{display:block}.sender-info strong{font-size:.78rem}.sender-info span{color:var(--muted);font-size:.66rem}.recipient-details{padding:0;border:0;color:var(--muted);background:transparent;font-size:.62rem}.sender-card time{margin-left:auto;color:var(--muted);font-size:.65rem;white-space:nowrap}.message-body{max-width:58rem;padding:1.2rem 0;color:var(--text);font-size:.8rem;line-height:1.7;white-space:pre-line}.message-body p{margin:0 0 .75rem}.attachments{display:none;max-width:58rem;padding:1rem 0;border-top:1px solid var(--line-soft)}.attachments.show{display:block}.attachment-heading{justify-content:space-between;margin-bottom:.7rem}.attachment-heading strong{font-size:.74rem}.attachment-heading button{border:0;color:var(--primary);background:transparent;font-size:.66rem}.attachment-list{display:flex;flex-wrap:wrap;gap:.55rem}.attachment-card{display:grid;grid-template-columns:2rem minmax(0,1fr) 1.8rem;align-items:center;gap:.55rem;width:min(15rem,100%);padding:.55rem;border:1px solid var(--line);border-radius:.65rem;background:var(--surface-2)}.file-icon{display:grid;place-items:center;width:2rem;aspect-ratio:1;border-radius:.45rem;color:#e0525e;background:#fff0f1}.attachment-card div{min-width:0}.attachment-card strong,.attachment-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-card strong{font-size:.67rem}.attachment-card small{color:var(--muted);font-size:.6rem}.attachment-card button{width:1.8rem;height:1.8rem;padding:0;border:0;color:var(--muted);background:transparent}.quick-reply{display:flex;align-items:center;gap:.45rem;max-width:58rem;padding-top:1rem;border-top:1px solid var(--line-soft)}.quick-reply button{height:2.2rem;padding:0 .75rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface)}

.label-red{color:#fff!important;background:#df4d58!important}.label-blue{color:#fff!important;background:#3979dc!important}.label-orange{color:#3d2c08!important;background:#f2b84b!important}.label-green{color:#fff!important;background:#34a16f!important}.label-purple{color:#fff!important;background:#7758d6!important}
.modal-content{border:1px solid var(--line);border-radius:1rem;background:var(--surface);box-shadow:var(--shadow)}.modal-header,.modal-footer{border-color:var(--line-soft)}.modal-header{padding:1rem 1.15rem}.modal-title{font-size:1.05rem;font-weight:750}.modal-body{padding:1rem 1.15rem}.modal-footer{padding:.75rem 1.15rem}.btn{border-radius:.55rem}.btn-primary{background:var(--primary);border-color:var(--primary)}.form-control,.form-select{border-color:var(--line);border-radius:.55rem;background-color:var(--surface);color:var(--text)}
.label-options{display:flex;min-width:0;flex-direction:column;gap:.35rem}.label-option{display:grid;grid-template-columns:2rem minmax(0,1fr) 1.2rem;align-items:center;gap:.7rem;width:100%;min-width:0;padding:.55rem;border:1px solid transparent;border-radius:.65rem;background:transparent;text-align:left}.label-option:hover{background:var(--surface-2)}.label-option.active{border-color:var(--primary);background:var(--primary-soft)}.label-option>span:nth-child(2){min-width:0}.label-option>span:nth-child(2) strong,.label-option>span:nth-child(2) small{display:block;overflow-wrap:anywhere}.label-option small{margin-top:.1rem;color:var(--muted);font-size:.62rem}.label-option>i{display:none;color:var(--primary)}.label-option.active>i{display:block}.label-preview{display:grid;place-items:center;width:2rem;aspect-ratio:1;border-radius:.5rem}
.add-custom-label-btn{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;min-height:2.45rem;margin-top:.65rem;border:1px dashed var(--primary);border-radius:.6rem;color:var(--primary);background:transparent;font-weight:700}.add-custom-label-btn:hover{background:var(--primary-soft)}.custom-label-editor{display:none;margin-top:.75rem;padding:.85rem;border:1px solid var(--line);border-radius:.75rem;background:var(--surface-2)}.custom-label-editor.show{display:block}.custom-label-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem}.custom-label-heading h6{margin:0;font-weight:750}.custom-label-preview-wrap{display:grid;place-items:center;min-height:4.2rem;margin-bottom:.75rem;border:1px dashed var(--line);border-radius:.65rem;background:var(--surface)}.custom-label-preview{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:.55rem;background:#316fea;color:#fff}.custom-label-preview strong{font-size:inherit}.custom-icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.35rem}.custom-icon-choice{display:grid;place-items:center;min-width:0;aspect-ratio:1;border:1px solid var(--line);border-radius:.5rem;color:var(--muted);background:var(--surface);font-size:.9rem}.custom-icon-choice:hover{color:var(--primary);border-color:var(--primary)}.custom-icon-choice.active{color:#fff;border-color:var(--primary);background:var(--primary)}.custom-label-actions{display:flex;justify-content:flex-end;gap:.45rem;margin-top:.85rem}
.alert-soft{display:flex;gap:.6rem;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));color:var(--muted);background:var(--primary-soft)}.column-settings{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.column-settings label{display:grid;grid-template-columns:1.2rem 1.3rem 1fr 1rem;align-items:center;gap:.5rem;padding:.65rem;border:1px solid var(--line);border-radius:.6rem;cursor:pointer}.column-settings label>i:last-child{color:var(--muted)}
.settings-toolbar{justify-content:space-between;gap:1rem;margin-bottom:1rem}.settings-toolbar strong,.settings-toolbar small{display:block}.settings-toolbar small{color:var(--muted);font-size:.68rem}.account-list{display:flex;flex-direction:column;gap:.45rem}.account-row{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto 2rem;gap:.7rem;padding:.7rem;border:1px solid var(--line);border-radius:.7rem}.account-row>div strong,.account-row>div small{display:block}.account-row>div small{color:var(--muted);font-size:.67rem}.sync-badge{color:#319766;font-size:.66rem}.sync-badge.warning{color:#d48a25}.sync-badge.error{color:#d9535f}.account-form{display:none}.account-form.show{display:block}.form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.account-form-title,.account-section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.account-form-title{margin:.85rem 0}.account-form-title h6{margin:0}.account-settings-section{margin-top:.75rem;padding:1rem;border:1px solid var(--line);border-radius:.8rem;background:var(--surface-2)}.account-section-heading{margin-bottom:.9rem}.account-section-heading>span{display:flex;align-items:center;gap:.5rem}.account-section-heading>span>i{display:grid;place-items:center;width:2rem;aspect-ratio:1;border-radius:.55rem;color:var(--primary);background:var(--primary-soft)}.account-section-heading strong{font-size:.78rem}.protocol-choice{display:flex;align-items:center;padding:.18rem;border:1px solid var(--line);border-radius:.58rem;background:var(--surface)}.protocol-choice label{margin:0}.protocol-choice span{display:block;min-width:4.2rem;padding:.4rem .75rem;border-radius:.4rem;color:var(--muted);font-size:.68rem;font-weight:750;text-align:center;cursor:pointer}.protocol-choice .btn-check:checked+span{color:#fff;background:var(--primary)}.account-switches{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.5rem;padding:.65rem .75rem;border:1px solid var(--line-soft);border-radius:.65rem;background:var(--surface)}.account-switches .form-check,.account-section-heading>.form-check{margin:0}.account-switches .form-check-label,.account-section-heading .form-check-label{font-size:.68rem;font-weight:650}.auth-fields{margin-top:.75rem;padding:.75rem;border:1px dashed var(--line);border-radius:.65rem;background:var(--surface)}.auth-fields.auth-disabled,.smtp-fields.smtp-disabled{opacity:.48}.password-field{position:relative}.password-field .form-control{padding-right:2.5rem}.toggle-password{position:absolute;top:50%;right:.35rem;display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.4rem;color:var(--muted);background:transparent;transform:translateY(-50%)}.toggle-password:hover{color:var(--primary);background:var(--surface-2)}
.mail-test-actions{display:flex;align-items:center;gap:.75rem;margin-top:.85rem}.mail-test-actions small{color:var(--muted);font-size:.62rem;line-height:1.35}.mail-test-button{display:inline-flex;flex:0 0 auto;align-items:center;gap:.4rem;min-width:10.8rem;justify-content:center}.mail-test-result{display:none;margin-top:.75rem;padding:.75rem;border:1px solid var(--line);border-radius:.68rem;background:var(--surface)}.mail-test-result.show{display:block}.mail-test-result.is-success{border-color:color-mix(in srgb,#2f9d69 45%,var(--line));background:color-mix(in srgb,#2f9d69 8%,var(--surface))}.mail-test-result.is-error{border-color:color-mix(in srgb,#d9535f 45%,var(--line));background:color-mix(in srgb,#d9535f 7%,var(--surface))}.mail-test-summary{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:.55rem}.mail-test-summary>i{margin-top:.05rem;font-size:1rem}.mail-test-summary strong,.mail-test-summary small{display:block}.mail-test-summary strong{font-size:.72rem}.mail-test-summary small{margin-top:.08rem;color:var(--muted);font-size:.6rem;line-height:1.35}.mail-test-steps{display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none}.mail-test-step{display:grid;grid-template-columns:1.1rem minmax(7rem,.7fr) minmax(0,1.3fr);align-items:start;gap:.45rem;padding-top:.35rem;border-top:1px solid var(--line-soft);font-size:.64rem}.mail-test-step i{margin-top:.05rem}.mail-test-step strong{font-size:.64rem}.mail-test-step span{min-width:0;color:var(--muted);overflow-wrap:anywhere}.mail-test-step.status-success i{color:#2f9d69}.mail-test-step.status-error i{color:#d9535f}.mail-test-step.status-warning i{color:#d48a25}.mail-test-step.status-skipped i,.mail-test-step.status-info i{color:var(--muted)}
.permissions-table{min-width:55rem}.permissions-table th{color:var(--muted);font-size:.63rem;text-transform:uppercase}.permissions-table td{font-size:.72rem}.user-cell{gap:.6rem}.user-cell strong,.user-cell small{display:block;white-space:nowrap}.user-cell small{color:var(--muted);font-size:.62rem}.role-badge{padding:.25rem .5rem;border-radius:1rem;font-size:.61rem;font-weight:700}.role-badge.admin{color:#704dbf;background:#efe9ff}.role-badge.senior{color:#2461bf;background:#e5efff}.role-badge.agent{color:#217850;background:#e3f7ec}.role-badge.viewer{color:#6c7785;background:#edf0f3}.permission-on{color:#31a06d;font-size:1rem}
.assign-user-search{display:flex;align-items:center;gap:.55rem;min-height:2.65rem;padding:0 .7rem;border:1px solid var(--line);border-radius:.65rem;background:var(--surface-2)}.assign-user-search input{flex:1;min-width:0;border:0;outline:0;color:var(--text);background:transparent}.assign-user-search button{display:grid;place-items:center;width:1.8rem;height:1.8rem;padding:0;border:0;color:var(--muted);background:transparent}.assign-user-list{display:flex;flex-direction:column;gap:.35rem;max-height:25rem;margin-top:.75rem;overflow:auto}.assign-user-option{display:grid;grid-template-columns:1.2rem 2.2rem minmax(0,1fr) auto 1.1rem;align-items:center;gap:.65rem;min-height:3.65rem;padding:.5rem .65rem;border:1px solid var(--line);border-radius:.65rem;background:var(--surface);cursor:pointer}.assign-user-option:hover{background:var(--surface-2)}.assign-user-option:has(.assign-user-check:checked){border-color:var(--primary);background:var(--primary-soft)}.assign-user-option.user-disabled{opacity:.48;cursor:not-allowed}.assign-user-option>.avatar{width:2.1rem;border-radius:50%}.assign-user-copy{min-width:0}.assign-user-copy strong,.assign-user-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assign-user-copy strong{font-size:.73rem}.assign-user-copy small{color:var(--muted);font-size:.61rem}.assign-user-option>i{visibility:hidden;color:var(--primary)}.assign-user-option:has(.assign-user-check:checked)>i{visibility:visible}.assign-user-empty{display:none;flex-direction:column;align-items:center;gap:.35rem;padding:2rem;color:var(--muted)}.assign-user-empty.show{display:flex}.assign-selected-count{color:var(--muted);font-size:.66rem}.mail-owner{display:flex;align-items:center;justify-content:center}.mail-owner .avatar+.avatar{margin-left:-.48rem}.mail-owner .avatar-owner-more{color:var(--text);background:var(--surface-3);box-shadow:0 0 0 2px var(--surface)}
.user-editor-form{display:none;margin-bottom:1rem;padding:1rem;border:1px solid var(--primary);border-radius:.8rem;background:var(--primary-soft)}.user-editor-form.show{display:block}.user-form-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}.user-form-heading h6{margin:0;font-weight:750}.user-form-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.permissions-table tr.user-disabled{opacity:.52}.permissions-table tr.user-disabled .user-cell strong{text-decoration:line-through}.user-status{display:inline-block;margin-top:.15rem;padding:.08rem .32rem;border-radius:1rem;color:#a13c45;background:#ffe8ea;font-size:.55rem;font-weight:700}
.layout-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.layout-card{display:grid;grid-template-columns:4rem 1fr;grid-template-rows:auto auto;column-gap:.7rem;width:100%;padding:.65rem;border:1px solid var(--line);border-radius:.7rem;background:var(--surface);text-align:left}.layout-card.active{border-color:var(--primary);background:var(--primary-soft)}.layout-card strong{align-self:end;font-size:.75rem}.layout-card small{color:var(--muted);font-size:.61rem}.layout-thumb{grid-row:1/3;position:relative;display:grid;grid-template-columns:22% 38% 40%;height:2.8rem;overflow:hidden;border:1px solid var(--line);border-radius:.35rem;background:var(--surface)}.layout-thumb i{background:var(--sidebar)}.layout-thumb b{background:var(--surface-3);border-right:1px solid var(--line)}.layout-thumb em{background:var(--surface)}.thumb-bat{grid-template-columns:20% 80%;grid-template-rows:55% 45%}.thumb-bat i{grid-row:1/3}.thumb-bat b{border-bottom:1px solid var(--line)}.thumb-bat em{grid-column:2}.thumb-gmail{grid-template-columns:20% 80%}.thumb-gmail em{display:none}.thumb-thunderbird{grid-template-columns:20% 30% 50%}
.compose-window{position:fixed;z-index:1060;right:1rem;bottom:0;display:none;width:min(38rem,calc(100% - 2rem));height:min(35rem,calc(100dvh - 5rem));flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:.8rem .8rem 0 0;background:var(--surface);box-shadow:0 0 2.5rem rgba(16,29,48,.25)}.compose-window.show{display:flex}.compose-window.minimized{height:3rem}.compose-header{justify-content:space-between;min-height:3rem;padding:0 .8rem;color:#fff;background:var(--sidebar)}.compose-header button{width:2rem;height:2rem;padding:0;border:0;color:#cdd5e2;background:transparent}.compose-fields>div{display:flex;align-items:center;min-height:2.7rem;padding:0 .8rem;border-bottom:1px solid var(--line-soft)}.compose-fields label{width:3.5rem;color:var(--muted);font-size:.7rem}.compose-fields input,.compose-fields select{flex:1;min-width:0;border:0;outline:0;background:transparent}.compose-fields .form-select{padding:.25rem 2rem .25rem 0}.compose-fields button{border:0;color:var(--primary);background:transparent;font-size:.7rem}.compose-editor{flex:1;min-height:0;overflow:auto;padding:1rem;outline:0}.compose-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}.compose-footer{gap:.25rem;min-height:3.5rem;padding:0 .75rem;border-top:1px solid var(--line-soft)}.compose-footer button{width:2.15rem;height:2.15rem;padding:0;border:0;border-radius:.45rem;color:var(--muted);background:transparent}.compose-footer .send-btn{width:auto;padding:0 1rem;color:#fff;background:var(--primary)}
.toast{border-color:var(--line);background:var(--surface);color:var(--text)}.toast-body{display:flex;align-items:center;gap:.5rem}
.mobile-nav,.mobile-backdrop{display:none}
.mobile-folder-search{display:none}
.folder-search-hidden{display:none!important}

@media (max-width: 1199.98px) {
  :root{--rail-w:4rem;--folder-w:17rem}
  .app-shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .topbar{grid-template-columns:14rem minmax(14rem,1fr) auto}
  .account-rail{grid-column:1}.workspace{grid-column:2}
  .folder-pane{position:fixed;top:var(--topbar-h);bottom:0;left:var(--rail-w);width:var(--folder-w);transform:translateX(-110%);box-shadow:var(--shadow);transition:transform .22s ease}
  body.folders-open .folder-pane{transform:none}.mobile-backdrop{position:fixed;z-index:1020;inset:var(--topbar-h) 0 0 var(--rail-w);background:rgba(8,15,25,.35)}body.folders-open .mobile-backdrop{display:block}
  body[data-layout="gmail"] .reader-panel{width:calc(100% - var(--rail-w))}
}

@media (max-width: 899.98px) {
  :root{--mail-grid:2.1rem 2rem 2.3rem minmax(7rem,20%) minmax(13rem,1fr) 5rem 5rem}
  .col-owner{display:none}.mail-columns,.mail-row{grid-template-columns:var(--mail-grid)}
  body[data-layout="outlook"] .workspace,body[data-layout="thunderbird"] .workspace{grid-template-columns:minmax(21rem,46%) minmax(24rem,1fr)}
  .global-search kbd,.sync-state{display:none!important}
}

@media (max-width: 767.98px) {
  :root{--topbar-h:3.7rem;--mobile-nav-h:4rem;--row-h:4.8rem}
  body{font-size:.9rem}
  .app-shell{display:grid;grid-template:var(--topbar-h) minmax(0,1fr) var(--mobile-nav-h)/1fr}
  .topbar{grid-column:1;grid-row:1;grid-template-columns:auto minmax(0,1fr) auto;padding:0 .55rem;gap:.45rem}.brand-name{display:none}.brand-mark{width:2rem}.global-search{height:2.35rem}.global-search input{font-size:.78rem}.global-search .search-options{display:none}.top-actions>.icon-btn,.user-copy+.bi{display:none!important}.user-menu{padding:.15rem}.top-actions .avatar{width:2rem}.account-rail{display:none}
  .folder-pane{top:var(--topbar-h);bottom:var(--mobile-nav-h);left:0;width:min(20rem,88vw)}.mobile-backdrop{inset:var(--topbar-h) 0 var(--mobile-nav-h) 0}
  .workspace{grid-column:1;grid-row:2;display:block;position:relative;min-height:0}.mail-panel{height:100%}
  body[data-layout] .workspace{display:block}.reader-panel,body[data-layout="gmail"] .reader-panel{position:absolute;z-index:1025;inset:0;display:block;width:100%;border:0;transform:translateX(105%);transition:transform .22s ease}.reader-open .reader-panel,body[data-layout="gmail"].reader-open .reader-panel{transform:none}.reader-empty{display:none}.message-scroll{padding:1rem}.reader-toolbar{min-height:3rem}.reader-actions button:nth-child(n+5){display:none}
  .workspace-toolbar{min-height:3.65rem;padding:.55rem .7rem}.toolbar-actions>.icon-btn:not(:last-child),.toolbar-actions>.dropdown:not(:last-child){display:none}.toolbar-title h2{font-size:1rem}.folder-tabs-wrap{min-height:2.7rem;padding-left:.4rem}.folder-tab{padding:0 .55rem}.bulk-toolbar{min-height:2.5rem}.bulk-toolbar>button:nth-of-type(n+5),.bulk-separator,.list-range{display:none}
  .mail-columns{display:none}.mail-list{padding-bottom:.3rem}.mail-row,.mail-columns{grid-template-columns:1.8rem 1.6rem 2rem minmax(0,1fr) 4.1rem}.mail-row{align-items:start;min-height:var(--row-h);padding:.68rem .5rem;column-gap:.22rem}.mail-row .col-select,.mail-row .col-star{padding-top:.08rem}.mail-row .col-label{margin-top:.02rem}.mail-row .col-sender{grid-column:4;grid-row:1;display:flex;align-items:center;gap:.35rem;min-width:0}.mail-sender strong{font-size:.76rem}.mail-sender small{display:none}.mail-row .col-subject{grid-column:4/6;grid-row:2;margin-top:.2rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem}.mail-subject>strong{font-size:.77rem}.mail-subject p{display:block;grid-column:1/-1;margin-top:.12rem;font-size:.66rem}.mail-row .col-date{grid-column:5;grid-row:1;padding-top:.12rem;font-size:.61rem}.mail-row .col-owner,.mail-row .col-attachment{display:none}.mobile-account-dot{display:inline-block;width:.38rem;aspect-ratio:1;border-radius:50%;background:var(--primary)}.mobile-meta{display:flex!important;grid-column:2;color:var(--muted);font-size:.6rem}.thread-count{display:none}
  .mobile-nav{grid-column:1;grid-row:3;z-index:1035;display:grid;grid-template-columns:1fr 1fr 1.05fr 1fr 1fr;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);background:var(--surface)}.mobile-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.14rem;padding:0;border:0;color:var(--muted);background:transparent;font-size:.58rem}.mobile-nav button>i{font-size:1.05rem}.mobile-nav button.active{color:var(--primary)}.mobile-nav button b{position:absolute;top:.28rem;left:calc(50% + .35rem);min-width:.95rem;height:.95rem;padding:0 .18rem;border-radius:1rem;color:#fff;background:#e2525e;font-size:.5rem;line-height:.95rem}.mobile-nav .mobile-compose{align-self:center;justify-self:center;width:2.8rem;height:2.8rem;margin-top:-1.15rem;border-radius:50%;color:#fff;background:var(--primary);box-shadow:0 .35rem 1rem rgba(49,111,234,.3)}.mobile-nav .mobile-compose i{font-size:1.2rem}
  .compose-window{right:0;bottom:var(--mobile-nav-h);width:100%;height:calc(100dvh - var(--topbar-h) - var(--mobile-nav-h));border:0;border-radius:0}.column-settings,.layout-cards{grid-template-columns:1fr}.settings-toolbar{align-items:flex-start}.settings-toolbar .btn{white-space:nowrap}.attachments{padding-bottom:.5rem}.quick-reply{position:sticky;bottom:-2rem;padding:1rem 0;background:var(--surface)}
}

@media (max-width: 420px) {
  .folder-tab:nth-child(3){font-size:0}.folder-tab:nth-child(3) i,.folder-tab:nth-child(3) span{font-size:.72rem}.global-search input::placeholder{color:transparent}.global-search input:focus::placeholder{color:#9eacc1}.mail-row,.mail-columns{grid-template-columns:1.65rem 1.45rem 1.8rem minmax(0,1fr) 3.7rem}.account-row{grid-template-columns:2.2rem minmax(0,1fr) 2rem}.account-row .sync-badge{display:none}.message-scroll>h2{font-size:1.08rem}.sender-card time{position:absolute;right:0;bottom:.3rem}.quick-reply .avatar{display:none}.quick-reply button{flex:1}
}

@media (prefers-reduced-motion: reduce) { *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} }

/* Interactive column sorting */
.column-sort {
  display: flex;
  align-items: center;
  gap: .28rem;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}
.column-sort:hover { color: var(--primary); }
.column-sort.active { color: var(--primary); }
.column-sort i { font-size: .55rem; }
.column-sort.col-date { justify-content: flex-end; }
.column-sort.col-attachment { justify-content: center; }

/* Folder ownership, moving and drag/drop */
.folder-item.drop-ready { outline: 1px dashed var(--primary); outline-offset: -2px; }
.folder-item.drop-target { color: var(--primary); background: var(--primary-soft); outline: 2px solid var(--primary); }
.mail-row.dragging { opacity: .45; }
.move-search, .language-search {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.65rem;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: var(--surface);
}
.move-search input, .language-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
.move-folder-list { display: flex; flex-direction: column; gap: .25rem; max-height: 20rem; margin-top: .75rem; overflow: auto; }
.move-folder-option { display: grid; grid-template-columns: 1.5rem minmax(0,1fr) 1.2rem; align-items: center; gap: .6rem; width: 100%; padding: .58rem .65rem; border: 1px solid transparent; border-radius: .6rem; color: var(--text); background: transparent; text-align: left; }
.move-folder-option:hover { background: var(--surface-2); }
.move-folder-option.active { border-color: var(--primary); background: var(--primary-soft); }
.move-folder-option > i:first-child { color: #e2a833; }
.move-folder-option > i:last-child { display: none; color: var(--primary); }
.move-folder-option.active > i:last-child { display: block; }
.move-folder-option strong, .move-folder-option small { display: block; }
.move-folder-option small { margin-top: .1rem; color: var(--muted); font-size: .62rem; }
.move-create { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line-soft); }
.move-create > button { padding: .3rem 0; border: 0; color: var(--primary); background: transparent; font-weight: 650; }
#moveCreateFolderForm { display: none; grid-template-columns: minmax(0,1fr) auto auto; gap: .4rem; }
#moveCreateFolderForm.show { display: grid; }

/* Searchable, region-grouped language picker */
.language-setting { position: relative; }
.language-select-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); }
.language-select-btn > span { display: flex; align-items: center; gap: .55rem; }
.language-select-btn > span > i { color: var(--primary); }
.language-select-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--primary) 14%,transparent); }
.language-picker { display: none; margin-top: .5rem; overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); box-shadow: var(--shadow); }
.language-picker.show { display: block; }
.language-search { margin: .65rem; }
.language-search button { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: .4rem; color: var(--muted); background: transparent; }
.language-regions { max-height: 19rem; overflow: auto; border-top: 1px solid var(--line-soft); }
.language-region + .language-region { border-top: 1px solid var(--line-soft); }
.language-region-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 2.65rem; padding: .45rem .75rem; border: 0; background: var(--surface-2); text-align: left; }
.language-region-head > span { display: grid; grid-template-columns: 1.4rem auto; align-items: center; column-gap: .45rem; }
.language-region-head > span > i { grid-row: 1 / 3; color: var(--primary); font-size: 1rem; }
.language-region-head strong, .language-region-head small { display: block; }
.language-region-head strong { font-size: .74rem; }
.language-region-head small { color: var(--muted); font-size: .6rem; }
.language-region-head.collapsed > i { transform: rotate(-90deg); }
.language-list { display: grid; grid-template-columns: 1fr 1fr; padding: .25rem; }
.language-list.collapsed { display: none; }
.language-option { display: grid; grid-template-columns: minmax(0,1fr) 3.5rem 1rem; align-items: center; gap: .35rem; min-height: 2.2rem; padding: .3rem .5rem; border: 0; border-radius: .45rem; background: transparent; text-align: left; }
.language-option:hover { background: var(--surface-2); }
.language-option.active { color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.language-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-option small { color: var(--muted); font-size: .58rem; text-align: right; }
.language-option > i { display: none; }
.language-option.active > i { display: block; }
.language-empty { display: none; flex-direction: column; align-items: center; gap: .35rem; padding: 1.5rem; color: var(--muted); }
.language-empty.show { display: flex; }
.settings-action-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.settings-action-row > div { display: flex; align-items: center; gap: .65rem; }
.settings-action-row > div > i { display: grid; place-items: center; width: 2.3rem; aspect-ratio: 1; border-radius: .6rem; color: var(--primary); background: var(--primary-soft); font-size: 1.05rem; }
.settings-action-row strong, .settings-action-row small { display: block; }
.settings-action-row small { color: var(--muted); font-size: .65rem; }

/* The Bat!-style incoming sorting rules */
.rules-modal-content { height: min(48rem, calc(100dvh - 3rem)); }
.rules-modal-content .modal-body { min-height: 0; padding: 0; }
.rules-layout { display: grid; grid-template-columns: 18rem minmax(0,1fr); }
.rules-sidebar { display: flex; flex-direction: column; min-height: 0; padding: .85rem; border-right: 1px solid var(--line); background: var(--surface-2); }
.rules-account label { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .65rem; font-weight: 700; }
.rules-list-head { display: flex; align-items: center; justify-content: space-between; margin: .85rem 0 .4rem; }
.rules-list-head strong { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.rules-list-head button { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: .4rem; color: var(--primary); background: var(--primary-soft); }
.rules-list { flex: 1; min-height: 0; overflow: auto; }
.rule-list-item { display: grid; grid-template-columns: 1.8rem minmax(0,1fr) 1rem; align-items: center; gap: .45rem; width: 100%; min-height: 3rem; padding: .4rem .45rem; border: 0; border-radius: .55rem; background: transparent; text-align: left; }
.rule-list-item:hover { background: var(--surface-3); }
.rule-list-item.active { color: var(--primary); background: var(--primary-soft); }
.rule-list-item.disabled { opacity: .55; }
.rule-list-item .rule-state { display: grid; place-items: center; width: 1.75rem; aspect-ratio: 1; border-radius: .45rem; color: var(--primary); background: var(--surface); }
.rule-list-item strong, .rule-list-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-list-item strong { font-size: .7rem; }
.rule-list-item small { color: var(--muted); font-size: .58rem; }
.rules-sidebar-actions { display: flex; gap: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.rules-sidebar-actions .btn-primary { flex: 1; }
.rule-editor { min-width: 0; min-height: 0; overflow: auto; padding: 1rem; }
.rule-editor-empty { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.rule-editor-empty > i { font-size: 2.5rem; opacity: .35; }
.rule-editor-empty h6 { margin-top: .65rem; }
#ruleEditorFields { display: none; }
#ruleEditorFields.show { display: block; }
.rule-flags { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: .8rem 0; padding: .65rem .75rem; border-radius: .6rem; background: var(--surface-2); font-size: .7rem; }
.rule-section { margin-top: .9rem; overflow: hidden; border: 1px solid var(--line); border-radius: .75rem; }
.rule-action-section { overflow: visible; }
.rule-section-title { display: flex; align-items: center; justify-content: space-between; min-height: 2.7rem; padding: .45rem .75rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font-weight: 750; }
.rule-section-title .form-select { width: 11rem; }
#ruleConditions { padding: .65rem; }
.rule-condition { display: grid; grid-template-columns: 9rem 8rem minmax(8rem,1fr) 2rem; gap: .4rem; margin-bottom: .45rem; }
.remove-condition { display: grid; place-items: center; width: 2rem; height: 2.35rem; padding: 0; border: 0; border-radius: .45rem; color: var(--muted); background: transparent; }
.remove-condition:hover { color: #dc4f5a; background: #fff0f1; }
.add-condition-btn { margin: 0 .65rem .65rem; padding: .35rem .55rem; border: 1px dashed var(--line); border-radius: .45rem; color: var(--primary); background: transparent; }
.rule-action-row { display: grid; grid-template-columns: 1.5rem minmax(9rem,1fr) minmax(12rem,1.4fr); align-items: center; gap: .6rem; padding: .75rem; }
.rule-action-row > i { color: var(--primary); font-size: 1rem; }
.rule-folder-picker { position: relative; min-width: 0; }
.rule-folder-select { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 2.35rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--text); background: var(--surface); text-align: left; }
.rule-folder-select > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-folder-select[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--primary) 13%,transparent); }
.rule-folder-dropdown { position: absolute; z-index: 30; top: calc(100% + .35rem); right: 0; display: none; width: min(26rem, 80vw); padding: .45rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); box-shadow: var(--shadow); }
.rule-folder-dropdown.show { display: block; }
.rule-folder-dropdown.open-up { top: auto; bottom: calc(100% + .35rem); }
.rule-folder-search { display: flex; align-items: center; gap: .5rem; min-height: 2.35rem; padding: 0 .6rem; border: 1px solid var(--line); border-radius: .55rem; }
.rule-folder-search:focus-within { border-color: var(--primary); }
.rule-folder-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
.rule-folder-search button { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: .35rem; color: var(--muted); background: transparent; }
.rule-folder-options { max-height: 16rem; margin-top: .35rem; overflow: auto; }
.rule-folder-option { display: grid; grid-template-columns: 1.35rem minmax(0,1fr) 1rem; align-items: center; gap: .45rem; width: 100%; min-height: 2.55rem; padding: .35rem .5rem; border: 0; border-radius: .5rem; color: var(--text); background: transparent; text-align: left; }
.rule-folder-option:hover { background: var(--surface-2); }
.rule-folder-option.active { color: var(--primary); background: var(--primary-soft); }
.rule-folder-option > i:first-child { color: #e2a833; }
.rule-folder-option > i:last-child { display: none; }
.rule-folder-option.active > i:last-child { display: block; }
.rule-folder-option strong, .rule-folder-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-folder-option strong { font-size: .7rem; }
.rule-folder-option small { color: var(--muted); font-size: .58rem; }
.rule-folder-empty { display: none; padding: 1rem; color: var(--muted); text-align: center; }
.rule-folder-empty.show { display: block; }

/* Universal ellipsis action popover */
.context-popover { position: fixed; z-index: 1210; display: none; width: 15rem; max-height: calc(100dvh - 1rem); overflow-y: auto; padding: .3rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); box-shadow: var(--shadow); }
.context-popover.show { display: block; }
.context-popover button { display: grid; grid-template-columns: 1.3rem minmax(0,1fr); align-items: center; gap: .45rem; width: 100%; min-height: 2.1rem; padding: 0 .5rem; border: 0; border-radius: .4rem; background: transparent; text-align: left; }
.context-popover button:hover { background: var(--surface-2); }
.context-popover hr { margin: .25rem 0; border-color: var(--line); }

@media (max-width: 767.98px) {
  html, body { width: 100%; max-width: 100vw; overflow-x: clip !important; overscroll-behavior-x: none; }
  .app-shell { position: fixed; inset: 0; width: 100vw; max-width: 100vw; overflow: hidden; touch-action: pan-y; }
  .workspace, .mail-panel, .workspace-toolbar, .folder-tabs-wrap, .bulk-toolbar, .mail-table { width: 100%; max-width: 100%; overflow-x: hidden; }
  .reader-panel, body[data-layout="gmail"] .reader-panel { visibility: hidden; pointer-events: none; }
  .reader-open .reader-panel, body[data-layout="gmail"].reader-open .reader-panel { visibility: visible; pointer-events: auto; }
  .modal-backdrop { z-index: 1140 !important; }
  .modal { z-index: 1150 !important; padding: 0 !important; background: var(--surface) !important; }
  .modal.fade .modal-dialog, .modal.show .modal-dialog { transform: none !important; }
  .modal .modal-dialog, .modal .modal-dialog-centered { width: 100%; max-width: none !important; height: 100dvh; min-height: 100dvh; margin: 0 !important; }
  .modal .modal-content { display: flex; width: 100%; height: 100dvh; max-height: 100dvh; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; opacity: 1 !important; background: var(--surface) !important; box-shadow: none; }
  .modal .modal-header { flex: 0 0 auto; padding-top: max(1rem, env(safe-area-inset-top)); opacity: 1 !important; background: var(--surface) !important; }
  .modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; opacity: 1 !important; background: var(--surface) !important; -webkit-overflow-scrolling: touch; }
  .modal .modal-footer { flex: 0 0 auto; flex-wrap: wrap; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); opacity: 1 !important; background: var(--surface) !important; }
  .modal .btn, .modal button, .modal input, .modal select, .modal textarea { opacity: 1 !important; }
  #labelsModal .modal-header { padding-right: 1.5rem !important; }
  #labelsModal .modal-body { padding-right: 1rem; padding-left: 1rem; }
  #labelsModal .label-options { width: auto; max-width: 100%; margin-right: .75rem; padding: 0; }
  #labelsModal .label-option { width: auto !important; max-width: none; align-self: stretch; }
  #labelsModal .modal-footer { padding-right: 1.25rem !important; }
  #labelsModal .custom-icon-grid { grid-template-columns: repeat(5, 1fr); }
  #labelsModal .custom-label-actions { flex-direction: column-reverse; }
  #labelsModal .custom-label-actions .btn { width: 100%; }
  #settingsModal { padding: 0 !important; background: var(--surface); }
  #settingsModal .modal-dialog { width: 100%; max-width: none; height: 100dvh; min-height: 100dvh; margin: 0; }
  #settingsModal .modal-content { display: flex; width: 100%; height: 100dvh; max-height: 100dvh; flex-direction: column; overflow: hidden; border: 0; border-radius: 0; opacity: 1 !important; background: var(--surface) !important; box-shadow: none; }
  #settingsModal .modal-header { flex: 0 0 auto; padding-top: max(1rem, env(safe-area-inset-top)); background: var(--surface) !important; }
  #settingsModal .modal-body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1rem; opacity: 1 !important; background: var(--surface) !important; -webkit-overflow-scrolling: touch; }
  #settingsModal .modal-footer { flex: 0 0 auto; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); background: var(--surface) !important; }
  #settingsModal .layout-card, #settingsModal .language-select-btn, #settingsModal .language-picker { opacity: 1 !important; background-color: var(--surface) !important; }
  #settingsModal .settings-action-row { align-items: stretch; flex-direction: column; }
  #settingsModal .settings-action-row > div { align-items: flex-start; }
  #settingsModal .settings-action-row > .btn { width: 100%; min-height: 2.7rem; }
  #settingsModal .language-regions { max-height: 55dvh; }
  #usersModal .user-editor-form { padding: .85rem; }
  #usersModal .user-form-actions { flex-direction: column-reverse; }
  #usersModal .user-form-actions .btn { width: 100%; }
  #usersModal .settings-toolbar { align-items: stretch; flex-direction: column; gap: .8rem; }
  #usersModal .settings-toolbar .btn { width: 100%; min-height: 2.7rem; }
  #usersModal .table-responsive { overflow: visible; }
  #usersModal .permissions-table { min-width: 0; table-layout: fixed; width: 100%; }
  #usersModal .permissions-table th:nth-child(n+4),
  #usersModal .permissions-table td:nth-child(n+4) { display: none; }
  #usersModal .permissions-table th:first-child,
  #usersModal .permissions-table td:first-child { width: 50%; }
  #usersModal .permissions-table th:nth-child(2),
  #usersModal .permissions-table td:nth-child(2) { width: 32%; }
  #usersModal .permissions-table th:nth-child(3),
  #usersModal .permissions-table td:nth-child(3) { width: 18%; text-align: center; }
  #usersModal .user-cell { min-width: 0; }
  #usersModal .user-cell > div { min-width: 0; }
  #usersModal .user-cell strong,
  #usersModal .user-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #usersModal .role-badge { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  #usersModal .modal-footer { align-items: stretch; flex-direction: column-reverse; }
  #usersModal .modal-footer .btn { width: 100%; }
  #assignUsersModal .assign-user-list { max-height: none; }
  #assignUsersModal .assign-user-option { grid-template-columns: 1.2rem 2.2rem minmax(0,1fr) 1.1rem; }
  #assignUsersModal .assign-user-option .role-badge { display: none; }
  #assignUsersModal .assign-selected-count { width: 100%; text-align: center; }
  #assignUsersModal .modal-footer .btn:not(.btn-link) { flex: 1; }
  #accountsModal .modal-dialog { height: 100dvh; min-height: 100dvh; margin: 0; }
  #accountsModal .modal-content { height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  #accountsModal .account-form-title, #accountsModal .account-section-heading { align-items: flex-start; flex-direction: column; }
  #accountsModal .account-form-title { position: relative; padding-right: 2.5rem; }
  #accountsModal .account-form-title .icon-btn { position: absolute; top: 0; right: 0; }
  #accountsModal .account-settings-section { padding: .8rem; }
  #accountsModal .protocol-choice { width: 100%; }
  #accountsModal .protocol-choice label { flex: 1; }
  #accountsModal .protocol-choice span { min-width: 0; }
  #accountsModal .account-switches { align-items: flex-start; flex-direction: column; }
  #accountsModal .mail-test-actions { align-items: stretch; flex-direction: column; }
  #accountsModal .mail-test-button { width: 100%; }
  #accountsModal .mail-test-step { grid-template-columns: 1.1rem minmax(0,1fr); }
  #accountsModal .mail-test-step span { grid-column: 2; }
  #accountsModal .form-actions { position: sticky; bottom: -.05rem; z-index: 2; margin: 1rem -.1rem -.1rem; padding: .75rem .1rem max(.1rem, env(safe-area-inset-bottom)); background: var(--surface); }
  #accountsModal .form-actions .btn { flex: 1; }
  .folder-pane { right: 0; width: 100%; max-width: none; opacity: 1; background: var(--surface); box-shadow: none; }
  body.folders-open .mobile-backdrop { display: none; }
  .mobile-folder-search { display: flex; align-items: center; gap: .55rem; min-height: 2.65rem; margin: 0 .75rem .65rem; padding: 0 .7rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface-2); }
  .mobile-folder-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
  .mobile-folder-search button { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; color: var(--muted); background: transparent; }
  .folder-pane .folder-item { min-height: 2.55rem; }
  .folder-pane .folder-tree { padding-bottom: 1rem; }
  .toolbar-title { position: relative; z-index: 3; pointer-events: auto; }
  .toolbar-title > div { min-width: 0; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
  .language-list { grid-template-columns: 1fr; }
  .rules-modal-content { height: 100dvh; }
  .rules-layout { grid-template-columns: 1fr; overflow: auto; }
  .rules-sidebar { min-height: 16rem; max-height: 42%; border-right: 0; border-bottom: 1px solid var(--line); }
  .rule-editor { overflow: visible; }
  .rule-condition { grid-template-columns: 1fr 1fr 2rem; }
  .rule-condition .rule-value { grid-column: 1 / 3; }
  .rule-condition .remove-condition { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .rule-action-row { grid-template-columns: 1.5rem 1fr; }
  .rule-action-row .form-select, .rule-folder-picker { grid-column: 1 / 3; }
  .rule-folder-dropdown, .rule-folder-dropdown.open-up { position: fixed; top: 50%; right: .75rem; bottom: auto; left: .75rem; width: auto; max-height: calc(100dvh - 1.5rem); transform: translateY(-50%); }
  #moveCreateFolderForm { grid-template-columns: 1fr auto; }
  #moveCancelCreate { grid-column: 1 / 3; }
}

body[data-capture="compose"] .topbar,
body[data-capture="compose"] .mobile-nav { display: none !important; }
body[data-capture="compose"] .compose-window {
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
}

html[dir="rtl"] body[data-capture="compose"] .compose-window { direction: ltr; }
html[dir="rtl"] body[data-capture="compose"] .compose-header { flex-direction: row-reverse; }
html[dir="rtl"] body[data-capture="compose"] .compose-fields > div { flex-direction: row-reverse; }
html[dir="rtl"] body[data-capture="compose"] .compose-fields label,
html[dir="rtl"] body[data-capture="compose"] .compose-fields input,
html[dir="rtl"] body[data-capture="compose"] .compose-editor { direction: rtl; text-align: right; }
html[dir="rtl"] body[data-capture="compose"] .compose-footer { flex-direction: row-reverse; }
body.capture-rtl .compose-header { flex-direction: row-reverse; }
body.capture-rtl { width: 100vw; max-width: 100vw; overflow: hidden; direction: ltr; }
body.capture-rtl .compose-window { right: auto !important; left: 0 !important; width: 100vw !important; max-width: 100vw !important; transform: none !important; }
body.capture-rtl .compose-header strong { display: block; min-width: 0; direction: rtl; text-align: right; }
body.capture-rtl .compose-fields > div { flex-direction: row-reverse; }
body.capture-rtl .compose-fields label,
body.capture-rtl .compose-fields input,
body.capture-rtl .compose-editor { direction: rtl; text-align: right; }
body.capture-rtl .compose-footer { flex-direction: row-reverse; }
/* Web/Cordova shell */
.xmailcrm-loader{position:fixed;inset:0;z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;color:#56657a;background:#fff;font-size:.8rem}.auth-gate{position:fixed;inset:0;z-index:4500;display:none;place-items:center;padding:1rem;background:radial-gradient(circle at 20% 15%,rgba(49,111,234,.18),transparent 35%),rgba(244,247,251,.98)}.auth-gate.show{display:grid}.auth-card{width:min(420px,100%);max-height:calc(100dvh - 2rem);overflow:auto;padding:1.7rem;border:1px solid #dfe5ee;border-radius:1.2rem;background:#fff;box-shadow:0 24px 75px rgba(25,40,70,.18)}.auth-logo{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:.9rem;border-radius:.85rem;color:#fff;background:linear-gradient(135deg,#316fea,#7049e7);font-size:1.25rem}.auth-card h1{margin:0;font-size:1.55rem}.auth-card>p{margin:.25rem 0 1.2rem;color:#78859a;font-size:.78rem}.auth-error{display:none;margin-bottom:.8rem;padding:.65rem .75rem;border-radius:.55rem;color:#a33642;background:#fff0f1;font-size:.72rem}.auth-error.show{display:block}.auth-switch,.auth-demo{width:100%;margin-top:.8rem;padding:.55rem;border:0;background:transparent;color:#316fea;font-size:.72rem}.auth-demo{border-top:1px solid #e6eaf0;color:#718096}.runtime-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .45rem;border-radius:1rem;color:#316fea;background:#eaf0ff;font-size:.58rem;font-weight:750}.billing-button{border:0;color:#fff;background:transparent}.cordova-only{display:none}body.runtime-cordova .cordova-only{display:initial}body.runtime-cordova .web-only{display:none!important}

/* Organization team chat */
.team-chat-root[hidden] { display: none !important; }
.team-chat-root { position: fixed; z-index: 1220; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); }
.team-chat-launcher { position: relative; display: grid; place-items: center; width: 3.35rem; height: 3.35rem; padding: 0; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--primary), #7049e7); box-shadow: 0 .7rem 1.8rem rgba(49,111,234,.34); font-size: 1.35rem; transition: transform .18s ease, box-shadow .18s ease; }
.team-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 .85rem 2.1rem rgba(49,111,234,.42); }
.team-chat-launcher:focus-visible { outline: 3px solid rgba(49,111,234,.28); outline-offset: 3px; }
.team-chat-unread { position: absolute; top: -.28rem; right: -.3rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border: 2px solid var(--surface); border-radius: 1rem; color: #fff; background: #dc3545; font-size: .62rem; font-weight: 800; line-height: 1.05rem; }
.team-chat-panel { position: absolute; left: 0; bottom: 4.2rem; display: flex; visibility: hidden; flex-direction: column; width: min(24rem, calc(100vw - 2rem)); height: min(34rem, calc(100dvh - 7rem)); overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; opacity: 0; background: var(--surface); box-shadow: 0 1rem 3rem rgba(20,34,55,.24); transform: translateY(1rem) scale(.98); transform-origin: left bottom; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.team-chat-panel.show { visibility: visible; opacity: 1; transform: translateY(0) scale(1); }
.team-chat-header { display: flex; align-items: center; gap: .7rem; min-height: 4.1rem; padding: .7rem .75rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.team-chat-header-icon { display: grid; flex: 0 0 auto; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: .75rem; color: var(--primary); background: var(--primary-soft); }
.team-chat-header > div { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.team-chat-header strong { overflow: hidden; color: var(--text); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.team-chat-header small { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .65rem; }
.team-chat-header small::before { width: .45rem; height: .45rem; border-radius: 50%; background: #f0ad31; content: ''; }
.team-chat-panel[data-connection="online"] .team-chat-header small::before { background: #2eb67d; }
.team-chat-panel[data-connection="offline"] .team-chat-header small::before { background: #dc6570; }
.team-chat-close { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: .6rem; color: var(--muted); background: transparent; }
.team-chat-close:hover { color: var(--text); background: var(--surface-2); }
.team-chat-messages { display: flex; flex: 1 1 auto; flex-direction: column; gap: .65rem; min-height: 0; overflow-y: auto; padding: .9rem; background: var(--surface-2); overscroll-behavior: contain; scrollbar-width: thin; }
.team-chat-empty { display: grid; flex: 1; place-items: center; align-content: center; gap: .45rem; color: var(--muted); font-size: .72rem; }
.team-chat-empty i { font-size: 2rem; opacity: .55; }
.team-chat-message { align-self: flex-start; width: fit-content; max-width: 88%; padding: .55rem .68rem; border: 1px solid var(--line); border-radius: .2rem .8rem .8rem .8rem; color: var(--text); background: var(--surface); box-shadow: 0 .15rem .5rem rgba(20,34,55,.06); }
.team-chat-message.is-own { align-self: flex-end; border-color: transparent; border-radius: .8rem .2rem .8rem .8rem; background: var(--primary-soft); }
.team-chat-meta { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .2rem; }
.team-chat-author { overflow: hidden; max-width: 12rem; color: var(--primary); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.team-chat-time { color: var(--muted); font-size: .57rem; white-space: nowrap; }
.team-chat-text { margin: 0; overflow-wrap: anywhere; font-size: .75rem; line-height: 1.42; white-space: pre-wrap; }
.team-chat-form { display: grid; grid-template-columns: minmax(0,1fr) 2.55rem; gap: .55rem; padding: .7rem; border-top: 1px solid var(--line); background: var(--surface); }
.team-chat-form textarea { min-height: 2.55rem; max-height: 7rem; resize: none; color: var(--text); background: var(--surface-2); font-size: .74rem; }
.team-chat-form .btn { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; padding: 0; border-radius: .7rem; }

@media (max-width: 575.98px) {
  .team-chat-root { left: max(.7rem, env(safe-area-inset-left)); bottom: max(.7rem, env(safe-area-inset-bottom)); }
  .team-chat-panel { bottom: 4rem; width: calc(100vw - 1.4rem); height: min(35rem, calc(100dvh - 5.7rem)); border-radius: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .team-chat-launcher, .team-chat-panel { transition: none; }
}