/* Structural (theme-independent) tokens */
:root{ --radius:12px; --sidebar:232px; --topbar:54px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif; }
html:not(.dark){color-scheme:light} html.dark{color-scheme:dark}
/* Theme palettes — light by default, dark via the .dark class (JS-resolved). A 'custom' theme is injected inline per-page. */
:root, [data-theme="default"]{ --bg:#F7F6F3; --surface:#fff; --text:#1A1A1A; --muted:#6E6E6E; --border:#E4E1DA; --primary:#FFB81C; --brand:#FFB81C; --primary-ink:#1A1A1A; --accent:#307FE2; }
:root.dark, [data-theme="default"].dark{ --bg:#17181C; --surface:#1F2126; --text:#ECECEC; --muted:#9A9A9A; --border:#33353B; --primary:#FFB81C; --brand:#FFB81C; --primary-ink:#1A1A1A; --accent:#5B9CF0; }
[data-theme="slate"]{ --bg:#F1F5F9; --surface:#ffffff; --text:#0F172A; --muted:#64748B; --border:#E2E8F0; --primary:#475569; --brand:#475569; --primary-ink:#FFFFFF; --accent:#2563EB; }
[data-theme="slate"].dark{ --bg:#0F172A; --surface:#1E293B; --text:#E2E8F0; --muted:#94A3B8; --border:#334155; --primary:#94A3B8; --brand:#94A3B8; --primary-ink:#0F172A; --accent:#60A5FA; }
[data-theme="forest"]{ --bg:#F3F7F3; --surface:#ffffff; --text:#14261A; --muted:#5C6B5F; --border:#DCE7DC; --primary:#2F855A; --brand:#2F855A; --primary-ink:#FFFFFF; --accent:#2C7A7B; }
[data-theme="forest"].dark{ --bg:#10190F; --surface:#17231A; --text:#E4EEE4; --muted:#93A594; --border:#2A3A2C; --primary:#48BB78; --brand:#48BB78; --primary-ink:#0B160D; --accent:#4FD1C5; }
[data-theme="plum"]{ --bg:#F7F3FA; --surface:#ffffff; --text:#241827; --muted:#6B5B70; --border:#E7DCEC; --primary:#7C3AED; --brand:#7C3AED; --primary-ink:#FFFFFF; --accent:#DB2777; }
[data-theme="plum"].dark{ --bg:#17111B; --surface:#211826; --text:#EDE4F1; --muted:#A593AC; --border:#362B3D; --primary:#A78BFA; --brand:#A78BFA; --primary-ink:#160B1B; --accent:#F472B6; }
[data-theme="ocean"]{ --bg:#EFF7F9; --surface:#ffffff; --text:#0B2530; --muted:#4C6B73; --border:#D6E7EC; --primary:#0E7490; --brand:#0E7490; --primary-ink:#FFFFFF; --accent:#2563EB; }
[data-theme="ocean"].dark{ --bg:#0A1A1F; --surface:#12242B; --text:#E0EEF2; --muted:#8DA9B1; --border:#223A42; --primary:#22B8CF; --brand:#22B8CF; --primary-ink:#06171C; --accent:#60A5FA; }
[data-theme="rose"]{ --bg:#FBF2F5; --surface:#ffffff; --text:#2A1720; --muted:#7A5563; --border:#F0D9E1; --primary:#D6336C; --brand:#D6336C; --primary-ink:#FFFFFF; --accent:#8E44AD; }
[data-theme="rose"].dark{ --bg:#1B1015; --surface:#241820; --text:#F3E4EB; --muted:#B58C9C; --border:#3A2530; --primary:#F06595; --brand:#F06595; --primary-ink:#1B1015; --accent:#C77DFF; }
[data-theme="sand"]{ --bg:#F7F1E8; --surface:#FFFDF9; --text:#2C2419; --muted:#7A6A54; --border:#E7DAC5; --primary:#B5892B; --brand:#B5892B; --primary-ink:#FFFFFF; --accent:#2F855A; }
[data-theme="sand"].dark{ --bg:#1A160F; --surface:#241E15; --text:#EFE7D7; --muted:#A99A80; --border:#392F20; --primary:#E0A93B; --brand:#E0A93B; --primary-ink:#1A160F; --accent:#48BB78; }
[data-theme="graphite"]{ --bg:#F4F4F5; --surface:#FFFFFF; --text:#18181B; --muted:#71717A; --border:#E4E4E7; --primary:#3F3F46; --brand:#3F3F46; --primary-ink:#FFFFFF; --accent:#2563EB; }
[data-theme="graphite"].dark{ --bg:#101012; --surface:#1B1B1F; --text:#ECECEE; --muted:#9A9AA2; --border:#2E2E34; --primary:#A1A1AA; --brand:#A1A1AA; --primary-ink:#101012; --accent:#60A5FA; }
[data-theme="indigo"]{ --bg:#F1F2FB; --surface:#ffffff; --text:#171A2E; --muted:#5D6280; --border:#DCDEF3; --primary:#4F46E5; --brand:#4F46E5; --primary-ink:#FFFFFF; --accent:#0EA5E9; }
[data-theme="indigo"].dark{ --bg:#101228; --surface:#191C33; --text:#E6E8F7; --muted:#9AA0C6; --border:#2A2E4D; --primary:#818CF8; --brand:#818CF8; --primary-ink:#0B0D1F; --accent:#38BDF8; }
[data-theme="crimson"]{ --bg:#FBF1F1; --surface:#ffffff; --text:#2A1616; --muted:#7C5252; --border:#F1D5D5; --primary:#DC2626; --brand:#DC2626; --primary-ink:#FFFFFF; --accent:#C2410C; }
[data-theme="crimson"].dark{ --bg:#1A1010; --surface:#241717; --text:#F3E3E3; --muted:#B58C8C; --border:#3A2525; --primary:#F87171; --brand:#F87171; --primary-ink:#1A1010; --accent:#FB923C; }

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar);display:flex;align-items:center;gap:1rem;
  padding:0 1rem;background:var(--surface);border-bottom:1px solid var(--border);z-index:30}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem}
.brand-logo{height:26px;width:auto;max-width:120px;object-fit:contain;border-radius:5px;display:block}
.mode-switch{display:flex;gap:.25rem;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px}
.mode-switch a{padding:.3rem .95rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--muted)}
.mode-switch a.active{background:var(--primary);color:var(--primary-ink)}
.topbar-right{margin-left:auto;display:flex;align-items:center}
.usermenu{position:relative}
.usermenu summary{list-style:none;cursor:pointer}
.usermenu summary::-webkit-details-marker{display:none}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:var(--primary);color:var(--primary-ink);font-weight:700;font-size:.85rem}
.usermenu-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);min-width:210px;padding:.4rem;display:flex;flex-direction:column}
.usermenu-email{padding:.5rem .6rem;color:var(--muted);font-size:.82rem;border-bottom:1px solid var(--border);margin-bottom:.3rem;overflow:hidden;text-overflow:ellipsis}
.usermenu-pop a,.usermenu-pop button{text-align:left;padding:.5rem .6rem;border:0;background:none;font:inherit;color:inherit;cursor:pointer;border-radius:7px}
.usermenu-pop a:hover,.usermenu-pop button:hover{background:var(--bg)}

.shell{display:flex;padding-top:var(--topbar);min-height:100vh}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);border-right:1px solid var(--border);background:var(--surface);
  padding:1rem .75rem;position:fixed;top:var(--topbar);bottom:0;left:0;overflow-y:auto}
.main{margin-left:var(--sidebar);flex:1;padding:1.5rem 2rem;max-width:100%;width:100%}
.compose-btn{display:block;text-align:center;background:var(--primary);color:var(--primary-ink);font-weight:700;
  padding:.6rem;border-radius:10px;margin-bottom:1rem}
.folders{display:flex;flex-direction:column;gap:2px}
.folders a{padding:.5rem .7rem;border-radius:8px;color:var(--muted);font-weight:500}
.folders a:hover{background:var(--bg)}
.folders a.active{background:var(--bg);color:var(--text);font-weight:700}

.inbox-head{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1rem}
.inbox-head h1{font-size:1.4rem;text-transform:capitalize}
.count{color:var(--muted);font-size:.85rem}
.email-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.email-row{display:grid;grid-template-columns:200px 1fr auto;gap:.75rem;align-items:center;padding:.7rem 1rem;border-bottom:1px solid var(--border)}
.email-row:last-child{border-bottom:0}
.email-row:hover{background:var(--bg)}
.email-from{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-subject{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.email-preview{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2}
.email-meta{color:var(--muted);font-size:.82rem;white-space:nowrap}
.empty{padding:2rem;text-align:center;color:var(--muted)}

@media(max-width:820px){
  .sidebar{transform:translateX(-100%);transition:transform .2s;z-index:25;width:240px}
  .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .main{margin-left:0;padding:1rem}
  .email-row{grid-template-columns:1fr auto}
  .email-preview{grid-column:1}
}

/* ---- shared button + utility (idempotent additions) ---- */
.hidden{display:none!important}
.muted{color:var(--muted);font-size:.85rem}
.btn{display:inline-block;padding:.4rem .8rem;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:none;line-height:1.3}
.btn:hover{background:var(--bg)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);font-weight:600}
.btn.danger{color:#B42318;border-color:#F0C4BF}
.btn.danger:hover{background:#FDEDEA}

/* ---- message view ---- */
.msg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.msg-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.message{padding:1.25rem 1.5rem;max-width:900px}
.msg-subject{font-size:1.4rem;margin:0 0 .75rem}
.msg-headers{color:var(--muted);font-size:.9rem;margin-bottom:1rem;line-height:1.6}
.msg-headers .msg-from strong{color:var(--text)}
.msg-body-frame{width:100%;height:65vh;border:1px solid var(--border);border-radius:8px;background:#fff}
.msg-body-text{white-space:pre-wrap;word-wrap:break-word;font:inherit;margin:0}
.msg-attachments{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1rem}
.msg-attachments ul{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.msg-attachments a{display:inline-block;padding:.4rem .7rem;border:1px solid var(--border);border-radius:8px;
  text-decoration:none;color:var(--text);background:var(--surface)}

/* ---- compose ---- */
.compose-head{display:flex;align-items:baseline;gap:.75rem;padding:1rem 1.5rem 0}
.compose-head h1{font-size:1.3rem;margin:0}
.compose{display:flex;flex-direction:column;gap:.75rem;padding:1rem 1.5rem;max-width:820px}
.compose .field{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted)}
.compose .field input,.compose .field select{font:inherit;font-size:.95rem;color:var(--text);
  padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.compose-body-wrap{border:1px solid var(--border);border-radius:8px;transition:border-color .15s,background .15s}
.compose-body-wrap.dragover{border-color:var(--primary);background:#FFF9EC}
.compose-body-wrap textarea{width:100%;min-height:320px;border:0;border-radius:8px;padding:.7rem;
  font:inherit;font-size:.95rem;resize:vertical;background:transparent;box-sizing:border-box}
.compose-body-wrap textarea:focus{outline:none}
.compose-attachments{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.compose-attachments li{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;
  border:1px solid var(--border);border-radius:8px;font-size:.85rem;background:var(--surface)}
.compose-attachments li button{border:0;background:none;cursor:pointer;font-size:1rem;color:var(--muted);line-height:1}
.compose-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
#compose-status{color:var(--muted);font-size:.85rem;min-height:1.2em}

/* ---- shared list/head/card ---- */
.list-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;flex-wrap:wrap}
.list-head h1{font-size:1.3rem;margin:0}
.head-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.empty{color:var(--muted);padding:1.5rem;text-align:center}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin:1rem 1.5rem}
.card h2{font-size:1.05rem;margin:0 0 .75rem}
.field{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;color:var(--text);padding:.5rem .6rem;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);box-sizing:border-box;width:100%}
.field textarea{resize:vertical}
.check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:.4rem 0}
.row-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.75rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.secret{display:inline-block;background:var(--bg);padding:.4rem .6rem;border-radius:6px;font-family:monospace;word-break:break-all}
@media (max-width:640px){.two-col{grid-template-columns:1fr}}

/* ---- drafts row delete ---- */
.email-row .email-row-main{display:grid;grid-template-columns:200px 1fr auto;gap:.75rem;align-items:center;flex:1;text-decoration:none;color:inherit}
.draft-row{display:flex;align-items:center;gap:.5rem;padding-right:1rem}
.row-del{padding:.2rem .55rem}
.col-subject .preview{color:var(--muted);font-weight:400;margin-left:.4rem}
@media (max-width:640px){.email-row .email-row-main{grid-template-columns:1fr auto}}

/* ---- contacts ---- */
.contact-list{padding:0 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);flex-wrap:wrap}
.contact-name{font-weight:600}
.contact-sub{color:var(--muted);font-size:.85rem}
.contact-actions{display:flex;gap:.4rem;flex-wrap:wrap}

/* ---- settings ---- */
.settings h1{padding:1rem 1.5rem 0;font-size:1.3rem;margin:0}
.identity-block{border-top:1px solid var(--border);padding-top:.75rem;margin-top:.75rem}
.identity-addr{font-weight:600;margin-bottom:.4rem}

/* ---- calendar ---- */
.cal-wrap{padding-bottom:2rem}
.cal-label{font-weight:600;min-width:9rem;text-align:center;display:inline-block}
.cal-grid{padding:0 1.5rem}
.cal-row{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dow-cell{padding:.4rem;font-size:.75rem;color:var(--muted);text-align:center;text-transform:uppercase}
.cal-cell{min-height:88px;border:1px solid var(--border);margin:-0.5px;padding:.25rem;cursor:pointer;background:var(--surface);overflow:hidden}
.cal-cell:hover{background:var(--bg)}
.cal-cell.off{background:var(--bg);color:var(--muted)}
.cal-daynum{font-size:.8rem;color:var(--muted);text-align:right}
.cal-ev{background:var(--primary);color:var(--primary-ink);border-radius:5px;padding:.1rem .35rem;
  font-size:.75rem;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- admin ---- */
.admin h1{padding:1rem 1.5rem 0;font-size:1.3rem;margin:0}
.tabs{display:flex;gap:.25rem;padding:.75rem 1.5rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{border:0;background:none;padding:.5rem .9rem;cursor:pointer;font:inherit;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--text);border-bottom-color:var(--primary);font-weight:600}
.tab-pane{padding:1rem 1.5rem}
.inline-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.inline-form input[type=text]{font:inherit;padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;min-width:12rem;flex:1}
.admin-list{display:flex;flex-direction:column;gap:.75rem}
.admin-card{border:1px solid var(--border);border-radius:10px;padding:.85rem;background:var(--surface)}
.admin-card-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.badge{font-size:.7rem;padding:.1rem .45rem;border-radius:20px;background:var(--bg);color:var(--muted);border:1px solid var(--border)}
.badge.ok{background:#E6F4EA;color:#137333;border-color:#C6E7CE}
.admin-table,.dns{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.5rem}
.admin-table th,.admin-table td,.dns th,.dns td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--border);vertical-align:top}
.dns .mono,.mono{font-family:monospace;word-break:break-all}
.cred-box{background:#FFF9EC;border:1px solid var(--border);border-radius:10px;padding:.85rem;margin-bottom:1rem}
.cred-box code{font-family:monospace;background:var(--surface);padding:.1rem .35rem;border-radius:4px}

/* ---- auth (login) ---- */
.auth-body{background:var(--bg);min-height:100vh}
.auth-root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:2rem;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.auth-brand{text-align:center;margin-bottom:1.5rem}
.auth-logo{max-height:64px;max-width:180px;object-fit:contain;margin-bottom:.5rem}
.auth-brand h1{font-size:1.4rem;margin:.25rem 0}
.auth-sub{color:var(--muted);font-size:.9rem;margin:0}
.auth-form{display:flex;flex-direction:column;gap:.35rem}
.auth-form label{font-size:.85rem;color:var(--muted);margin-top:.4rem}
.auth-form input{font:inherit;font-size:.95rem;padding:.6rem;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.auth-btn{width:100%;margin-top:1rem;padding:.65rem;font-size:1rem}
.auth-error{background:#FDEDEA;color:#B42318;border:1px solid #F0C4BF;border-radius:8px;padding:.5rem .7rem;font-size:.85rem}
.link-btn{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:.85rem;margin-top:.5rem}

/* ---- signup wizard ---- */
.signup-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem}
.signup-head{display:flex;align-items:center;gap:.5rem;margin:1rem 0}
.signup-symbol{height:30px}
.signup-wordmark{font-weight:700;font-size:1.1rem}
.signup-card{max-width:560px}
.signup-stepper{list-style:none;display:flex;gap:.25rem;padding:0;margin:0 0 1.25rem;flex-wrap:wrap;justify-content:center}
.signup-stepper li{display:flex;align-items:center;gap:.3rem;color:var(--muted);font-size:.72rem}
.signup-step-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--bg);border:1px solid var(--border);font-size:.72rem}
.signup-stepper li.current .signup-step-dot{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.signup-stepper li.done .signup-step-dot{background:#E6F4EA;color:#137333;border-color:#C6E7CE}
.signup-stepper li.current{color:var(--text);font-weight:600}
.signup-step h1{font-size:1.4rem;margin:0 0 .35rem}
.signup-lead{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
.signup-hint,.signup-step small{color:var(--muted);font-size:.78rem}
.signup-code{font-size:1.8rem;letter-spacing:.5rem;text-align:center;padding:.6rem;width:100%;
  border:1px solid var(--border);border-radius:8px;box-sizing:border-box}
.signup-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.25rem;flex-wrap:wrap}
.signup-foot{color:var(--muted);font-size:.85rem;margin-top:1rem}
.signup-palettes{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.signup-palette{display:flex;flex-direction:column;gap:.4rem;padding:.6rem;border:2px solid var(--border);
  border-radius:10px;background:var(--surface);cursor:pointer;text-align:left}
.signup-palette.selected{border-color:var(--primary)}
.signup-palette-swatches{display:flex;height:24px;border-radius:6px;overflow:hidden}
.signup-palette-swatch{flex:1}
.signup-palette-name{font-size:.82rem;font-weight:600}
.signup-logo-drop{border:2px dashed var(--border);border-radius:12px;padding:2rem;text-align:center;
  cursor:pointer;color:var(--muted)}
.signup-logo-drop img{max-height:120px}
.signup-value{display:flex;align-items:center;gap:.4rem}
.signup-creds{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0}
.signup-cred-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.signup-cred-label{font-size:.8rem;color:var(--muted);min-width:9rem}
.signup-cred-value{font-family:monospace;background:var(--bg);padding:.25rem .5rem;border-radius:6px;flex:1;word-break:break-all}
.signup-copy{padding:.2rem .5rem;font-size:.78rem}
.dns-ok{color:#137333;font-weight:700}
.dns-bad{color:#B42318}
.alert{border-radius:8px;padding:.5rem .7rem;font-size:.85rem;margin-top:.75rem;background:#FFF8E1;color:#7A5B00;border:1px solid #F3E3B3}
.alert.success{background:#E6F4EA;color:#137333;border:1px solid #C6E7CE}
.alert.error{background:#FDEDEA;color:#B42318;border:1px solid #F0C4BF}
.dark .alert{background:#332B12;color:#F0D9A0;border-color:#5C4A1E}
@media (max-width:560px){.signup-palettes{grid-template-columns:1fr}}

/* ---- Tidli Team: chat ---- */
.team-side{display:flex;flex-direction:column;height:100%}
.team-side-actions{display:flex;gap:.4rem;padding:.6rem .5rem}
.team-side-actions .btn{flex:1;font-size:.82rem;padding:.4rem .5rem}
.conv-list{display:flex;flex-direction:column;overflow-y:auto;flex:1}
.conv{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;text-decoration:none;color:inherit;border-bottom:1px solid var(--border)}
.conv:hover{background:var(--bg)}
.conv.active{background:var(--bg);box-shadow:inset 3px 0 0 var(--primary)}
.conv-emoji{width:1.5rem;text-align:center;flex-shrink:0}
.conv-main{min-width:0;flex:1;display:flex;flex-direction:column}
.conv-title{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv.unread .conv-title{font-weight:700}
.conv-sub{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-badge{background:var(--primary);color:var(--primary-ink);border-radius:20px;font-size:.7rem;
  min-width:1.1rem;height:1.1rem;padding:0 .35rem;display:inline-flex;align-items:center;justify-content:center;font-weight:700}

.team-thread{display:flex;flex-direction:column;height:100%}
.team-empty{padding:3rem 1.5rem;text-align:center;color:var(--muted)}
.thread-head{padding:.7rem 1rem;border-bottom:1px solid var(--border);background:var(--surface)}
.thread-title{display:flex;align-items:center;gap:.5rem;font-weight:700}
.thread-topic{color:var(--muted);font-size:.82rem;margin-top:.15rem}
.thread-scroll{flex:1;overflow-y:auto;padding:1rem;background:var(--bg)}
.messages{display:flex;flex-direction:column;gap:.5rem;max-width:820px;margin:0 auto}
.msg{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.45rem .7rem;max-width:80%;align-self:flex-start}
.msg.mine{align-self:flex-end;background:#FFF6E5;border-color:#F3E3BE}
.msg.pending{opacity:.6}
.msg.failed{border-color:#F0C4BF;background:#FDEDEA}
.msg.deleted{opacity:.7}
.msg-meta{display:flex;gap:.4rem;align-items:baseline;font-size:.72rem;color:var(--muted);margin-bottom:.1rem}
.msg-author{font-weight:600;color:var(--text)}
.msg-edited{font-style:italic}
.msg-body{white-space:pre-wrap;word-wrap:break-word;font-size:.92rem;line-height:1.4}

.composer{display:flex;gap:.5rem;align-items:flex-end;padding:.6rem 1rem;border-top:1px solid var(--border);background:var(--surface)}
.composer textarea{flex:1;resize:none;font:inherit;font-size:.95rem;padding:.55rem .7rem;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);max-height:160px;box-sizing:border-box}
.composer textarea:focus{outline:none;border-color:var(--primary)}
@media (max-width:640px){.msg{max-width:92%}}

/* ---- Team: reactions, tools, edit ---- */
.msg{position:relative}
.msg-reactions{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem}
.react-chip{border:1px solid var(--border);background:var(--bg);border-radius:20px;padding:.05rem .45rem;
  font-size:.8rem;cursor:pointer;line-height:1.5}
.react-chip.mine{background:#FFF0CC;border-color:var(--primary)}
.react-chip:hover{background:var(--surface)}
.msg-tools{position:absolute;top:-.6rem;right:.4rem;display:none;gap:.1rem;background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:.1rem;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.msg:hover .msg-tools{display:flex}
.msg-tool{border:0;background:none;cursor:pointer;font-size:.85rem;padding:.15rem .3rem;border-radius:6px;line-height:1}
.msg-tool:hover{background:var(--bg)}
.react-picker{position:absolute;top:1rem;right:.4rem;z-index:10;display:flex;gap:.1rem;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;padding:.2rem;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.react-picker button{border:0;background:none;cursor:pointer;font-size:1.1rem;padding:.15rem .3rem;border-radius:6px}
.react-picker button:hover{background:var(--bg)}
.edit-box{margin:.2rem 0}
.edit-ta{width:100%;font:inherit;font-size:.92rem;padding:.4rem;border:1px solid var(--primary);border-radius:8px;box-sizing:border-box;resize:vertical;min-height:2.5rem}
.edit-actions{display:flex;gap:.4rem;margin-top:.3rem}
.btn-sm{padding:.2rem .6rem;font-size:.8rem}
.msg-body code{background:var(--bg);padding:.05rem .3rem;border-radius:4px;font-family:monospace;font-size:.88em}
.msg-body pre.code{background:var(--bg);padding:.5rem .7rem;border-radius:8px;overflow-x:auto;margin:.3rem 0}
.msg-body pre.code code{background:none;padding:0}
.msg-body a{color:var(--accent)}
.msg-body ul,.msg-body ol{margin:.2rem 0;padding-left:1.3rem}

/* ---- Team C3: header actions, modals, roster, receipts ---- */
.thread-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.thread-head-main{min-width:0}
.thread-actions{display:flex;gap:.4rem;flex-shrink:0}
.msg-receipt{color:var(--accent);font-size:.72rem}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;
  justify-content:center;z-index:1000;padding:1rem}
.modal-card{background:var(--surface);border-radius:14px;padding:1.25rem;width:100%;max-width:420px;
  max-height:85vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.2)}
.modal-card h2{margin:0 0 .75rem;font-size:1.15rem}
.modal-card h3{margin:1rem 0 .4rem;font-size:.95rem}
.pick-list{display:flex;flex-direction:column;gap:.3rem;margin:.5rem 0;max-height:40vh;overflow-y:auto}
.pick-row{text-align:left;padding:.45rem .6rem;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);cursor:pointer;font:inherit;font-size:.9rem;display:flex;align-items:center;gap:.5rem}
.pick-row:hover{background:var(--bg)}
.mem-list{display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0}
.mem-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .5rem;
  border-bottom:1px solid var(--border);font-size:.92rem}

/* ---- Team C4: reply quote + composer chip ---- */
.msg-quote{display:block;border-left:3px solid var(--primary);background:var(--bg);border-radius:0 6px 6px 0;
  padding:.2rem .5rem;margin-bottom:.3rem;font-size:.8rem;text-decoration:none;color:var(--muted);
  max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msg-quote .quote-author{font-weight:600;color:var(--text)}
.composer{flex-direction:column;align-items:stretch;gap:.4rem}
.composer-row{display:flex;gap:.5rem;align-items:flex-end}
.composer-row textarea{flex:1}
.reply-chip{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--bg);
  border-left:3px solid var(--primary);border-radius:0 6px 6px 0;padding:.25rem .5rem;font-size:.8rem;color:var(--muted)}
.reply-chip-x{border:0;background:none;cursor:pointer;font-size:1.1rem;color:var(--muted);line-height:1}

/* ---- Notifications bell ---- */
.notif{position:relative}
.notif > summary{list-style:none;cursor:pointer;font-size:1.15rem;padding:.15rem .35rem;border-radius:8px;position:relative}
.notif > summary::-webkit-details-marker{display:none}
.notif > summary:hover{background:var(--bg)}
.notif-badge{position:absolute;top:-.15rem;right:-.15rem;background:#E5484D;color:#fff;border-radius:20px;
  font-size:.62rem;min-width:1rem;height:1rem;padding:0 .25rem;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.notif-pop{position:absolute;right:0;top:2.2rem;width:320px;max-width:92vw;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.16);z-index:1000;overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.85rem}
.notif-list{max-height:60vh;overflow-y:auto}
.notif-item{display:block;padding:.55rem .75rem;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:#FFF9EC}
.notif-item.unread:hover{background:#FFF3D6}
.notif-title{font-weight:600;font-size:.85rem}
.notif-body{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hidden{display:none!important}

/* ---- Team documents: doc cards + attach + dropzone ---- */
.msg-docs{display:flex;flex-direction:column;gap:.35rem;margin-top:.35rem}
.doc-card{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border:1px solid var(--border);
  border-radius:8px;background:var(--bg);text-decoration:none;color:inherit;max-width:320px}
.doc-card:hover{background:var(--surface)}
.doc-icon{font-size:1.3rem;flex-shrink:0}
.doc-meta{min-width:0;display:flex;flex-direction:column}
.doc-name{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-sub{color:var(--muted);font-size:.72rem}
.doc-img{display:inline-block;max-width:280px;border-radius:8px;overflow:hidden}
.doc-img img{display:block;max-width:100%;height:auto;border-radius:8px}
.composer-attach{padding:.4rem .55rem;font-size:1.1rem;line-height:1}
.team-thread.dragover{outline:2px dashed var(--primary);outline-offset:-6px}
.team-thread.dragover .thread-scroll{background:#FFF9EC}

/* ---- Team search + doc view ---- */
.team-search{position:relative;padding:.5rem}
.team-search input{width:100%;box-sizing:border-box;font:inherit;font-size:.85rem;padding:.4rem .6rem;
  border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.team-search-results{position:absolute;left:.5rem;right:.5rem;top:2.6rem;z-index:50;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.14);max-height:60vh;overflow-y:auto}
.search-hit{display:block;padding:.45rem .6rem;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.search-hit:hover{background:var(--bg)}
.search-hit-title{display:block;font-weight:600;font-size:.82rem}
.search-hit-snip{display:block;color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-view{padding:1.25rem 1.5rem;max-width:820px}
.doc-view-head{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.doc-view-head h1{font-size:1.3rem;margin:0;flex:1;min-width:0}
.doc-view-actions{display:flex;gap:.4rem}
.doc-body{line-height:1.6}
.doc-body h1,.doc-body h2,.doc-body h3{margin:1rem 0 .4rem}
.doc-file-info{padding:1rem;border:1px solid var(--border);border-radius:10px;background:var(--bg)}
.doc-file-name{font-weight:600}
.doc-file-preview{max-width:100%;border-radius:8px;margin-top:.75rem}

/* ---- Team note editor + doc placements ---- */
.note-edit{display:flex;flex-direction:column;gap:.75rem;max-width:760px}
.note-title{font:inherit;font-size:1.15rem;font-weight:600;padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px}
.note-body{font:inherit;font-size:.95rem;min-height:50vh;padding:.7rem;border:1px solid var(--border);border-radius:8px;resize:vertical;line-height:1.5}
.doc-places{margin-top:1.5rem;border-top:1px solid var(--border);padding-top:.75rem}
.doc-places h3{font-size:.9rem;margin:0 0 .5rem}
.doc-place{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem 0;font-size:.9rem}

/* ---- Team project board ---- */
.board-wrap{display:flex;flex-direction:column;height:100%}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);background:var(--surface)}
.board-title{display:flex;align-items:center;gap:.6rem}
.board-title h1{font-size:1.15rem;margin:0}
.board{flex:1;overflow:auto;padding:1rem;background:var(--bg)}
.board-cols{display:flex;gap:.8rem;align-items:flex-start;min-height:100%}
.board-col{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:270px;flex-shrink:0;display:flex;flex-direction:column;max-height:100%}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .7rem;border-top:3px solid var(--primary);border-radius:12px 12px 0 0;font-weight:600;font-size:.9rem}
.col-count{color:var(--muted);font-size:.8rem;background:var(--bg);border-radius:20px;padding:0 .45rem}
.col-drop{padding:.5rem;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;min-height:40px}
.task-card{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:.5rem .6rem;cursor:pointer;transition:box-shadow .1s}
.task-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.task-card.dragging{opacity:.5}
.task-card.done .task-title,.task-card.cancelled .task-title{text-decoration:line-through;color:var(--muted)}
.task-top{display:flex;align-items:flex-start;gap:.4rem}
.task-title{font-size:.88rem;line-height:1.35}
.task-prio{width:.55rem;height:.55rem;border-radius:50%;margin-top:.3rem;flex-shrink:0;background:var(--muted)}
.task-prio.prio-1{background:#9bb0c9}.task-prio.prio-2{background:#f2b134}.task-prio.prio-3{background:#e5484d}
.task-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.35rem}
.task-tag{font-size:.68rem;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0 .4rem;color:var(--muted)}
.task-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.4rem}
.task-assignee{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-due{font-size:.72rem;color:var(--muted)}
.task-due.late,.task-card.late .task-title{color:#e5484d}
@media (max-width:640px){.board-col{width:82vw}}

/* ---- Team polls + cards ---- */
.poll{margin-top:.4rem;display:flex;flex-direction:column;gap:.25rem}
.poll-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border:1px solid var(--border);border-radius:8px;padding:.35rem .6rem;background:var(--surface);cursor:pointer;overflow:hidden;font:inherit;font-size:.85rem;text-align:left}
.poll-opt .poll-bar{position:absolute;inset:0 auto 0 0;background:#FFF0CC;z-index:0}
.poll-opt.mine .poll-bar{background:#FFE0A3}
.poll-opt-text,.poll-opt-n{position:relative;z-index:1}
.poll-opt-n{color:var(--muted);font-size:.78rem}
.poll-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.15rem}
.poll-opts{display:flex;flex-direction:column;gap:.35rem;margin:.5rem 0}
.poll-opt-in{font:inherit;padding:.4rem .5rem;border:1px solid var(--border);border-radius:8px}
.msg-cardbadge{display:inline-block;font-size:.7rem;padding:.05rem .4rem;border-radius:20px;border:1px solid var(--border);
  background:var(--bg);color:var(--muted);text-decoration:none;margin-bottom:.2rem}
.card-body{padding:.6rem 1rem;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.9rem;line-height:1.5}
.conv-emoji.card-red,.msg-cardbadge.card-red{color:#e5484d}
.conv-emoji.card-green,.msg-cardbadge.card-green{color:#17c26a}
.conv-emoji.card-blue,.msg-cardbadge.card-blue{color:#2d7ff9}
.conv-emoji.card-amber,.msg-cardbadge.card-amber{color:#f2b134}
.conv-emoji.card-violet,.msg-cardbadge.card-violet{color:#8b5cf6}

/* ---- Team calls ---- */
.call-banner{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:2000;
  display:flex;align-items:center;gap:.75rem;background:var(--text);color:#fff;
  padding:.6rem 1rem;border-radius:30px;box-shadow:0 8px 30px rgba(0,0,0,.3);max-width:92vw}
.call-banner .call-status{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-banner .btn{padding:.35rem .8rem}

/* ==== Mail UI polish: brand font, folder icons, inbox avatars (compact) ==== */
@font-face{font-family:"Grazler";src:url("/app/static/Grazler.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap}
.brand-word{font-family:"Grazler",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.18rem}
.inbox-head h1,.list-head h1,.compose-head h1,.settings h1,.admin h1,.auth-brand h1,.doc-view-head h1{
  font-family:"Grazler",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
.signup-wordmark{font-family:"Grazler",system-ui,sans-serif;font-weight:800}

/* folder list with icons */
.folders a{display:flex;align-items:center;gap:.6rem;padding:.42rem .7rem;border-radius:8px;color:var(--text);text-decoration:none;font-size:.9rem}
.folders a svg{width:18px;height:18px;flex-shrink:0;opacity:.62}
.folders a:hover{background:var(--bg)}
.folders a.active{background:#FFF3D6;font-weight:600}
.folders a.active svg{opacity:1;color:#B8860B}
.compose-btn{display:flex;align-items:center;gap:.5rem;justify-content:center}
.compose-btn svg{width:18px;height:18px}

/* inbox rows: avatar + compact two-line main */
.email-row{grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.55rem 1rem}
.email-avatar{width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:var(--muted);flex-shrink:0;text-transform:uppercase}
.email-main{min-width:0;display:flex;flex-direction:column;gap:.05rem}
.email-from{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-subject{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-preview{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.email-meta{display:flex;align-items:center;gap:.35rem;color:var(--muted);font-size:.76rem;white-space:nowrap;align-self:flex-start;padding-top:.15rem}
.email-meta .attach-ico{opacity:.7}
@media (max-width:640px){.email-subject,.email-preview{display:inline}}

/* ---- Team timeline (Gantt) ---- */
.gantt{display:flex;flex-direction:column;gap:.4rem;margin-top:.5rem}
.gantt-row{display:grid;grid-template-columns:200px 1fr;gap:.75rem;align-items:center}
.gantt-label{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:inherit}
.gantt-track{position:relative;height:26px;background:var(--bg);border-radius:6px;overflow:hidden}
.gantt-bar{position:absolute;top:3px;bottom:3px;background:var(--primary);border-radius:5px;min-width:8px;
  display:flex;align-items:center;padding:0 .4rem;text-decoration:none;color:var(--primary-ink);font-size:.7rem;overflow:hidden}
.gantt-bar.done{background:#17c26a;color:#fff}
.gantt-bar.late{background:#e5484d;color:#fff}
.gantt-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.gantt-row{grid-template-columns:110px 1fr}}

/* monochrome notification bell (matches folder-icon stroke style) */
.notif > summary{display:flex;align-items:center;color:var(--muted)}
.notif > summary .notif-ico{display:block}
.notif > summary:hover{color:var(--text)}

/* ---- Team forward label + highlights ---- */
.msg-fwd{font-size:.72rem;color:var(--muted);font-style:italic;margin-bottom:.15rem}
.hl-list{display:flex;flex-direction:column;gap:.75rem}
.hl{border:1px solid var(--border);border-radius:10px;padding:.75rem;background:var(--surface)}
.hl blockquote{margin:0;border-left:3px solid var(--primary);padding-left:.7rem;color:var(--text)}
.hl-note{color:var(--muted);font-size:.85rem;margin-top:.4rem}
.hl-foot{display:flex;align-items:center;gap:.5rem;margin-top:.5rem}

/* ---- Team media: audio/video, stickers, mic ---- */
.msg-audio{max-width:280px;height:38px}
.msg-video{max-width:320px;border-radius:8px}
#mic-btn.recording{background:#e5484d;color:#fff}
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,72px);gap:.5rem;margin:.5rem 0;max-height:50vh;overflow-y:auto}
.sticker-cell{position:relative}
.sticker-cell img,.sticker-pick img{width:72px;height:72px;object-fit:cover;border-radius:10px}
.sticker-cell .btn{position:absolute;top:-.4rem;right:-.4rem;padding:.05rem .35rem}
.sticker-pick{border:0;background:none;cursor:pointer;padding:0}
.sticker-picker-body{max-height:60vh;overflow-y:auto}
.sticker-set-pick{margin-bottom:.75rem}
.sticker-set-pick h3{font-size:.8rem;font-weight:600;margin:.25rem 0;opacity:.8}
.sticker-set-pick .sticker-grid{max-height:none;overflow:visible}
.sticker-set{border:1px solid var(--line,#e5e5e5);border-radius:12px;padding:.75rem 1rem;margin:.75rem 0}
.sticker-set.is-hidden{opacity:.6}
.sticker-set-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.sticker-set-head h2{font-size:1rem;margin:0}
.sticker-set-head .sticker-dl{margin-left:auto}
.sticker-toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin:.5rem 0}
.sticker-owner{font-size:.8rem}
.sticker-upload{margin:.5rem 0}
.sticker-emoji-in{max-width:9rem}
.badge{font-size:.7rem;background:var(--line,#eee);border-radius:999px;padding:.05rem .5rem}
.img-open{display:inline-block;cursor:zoom-in}
/* Full-screen image viewer (Android app draws its own; browsers use a new tab).
   Sits BELOW the call banner (z 2000) so a call in progress is never covered. */
.img-viewer{position:fixed;inset:0;background:#000;z-index:1500;display:flex;align-items:center;justify-content:center;touch-action:none;overflow:hidden}
.img-viewer img{max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;transform-origin:center center;will-change:transform}
.img-viewer .img-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:14px;z-index:2;background:rgba(0,0,0,.5);color:#fff;border:0;border-radius:999px;width:40px;height:40px;font-size:1.5rem;line-height:1;cursor:pointer}
.msg-docs img{max-width:220px}

/* Monochrome inline icons — inherit text colour so they adapt to any template. */
.ic{width:1em;height:1em;vertical-align:-0.14em;display:inline-block;flex:none}
.ic-lg{width:1.25em;height:1.25em}

/* Inbox swipe actions (touch): swipe right = archive, swipe left = delete */
.swipe-wrap{position:relative;overflow:hidden}
.swipe-wrap .email-row{position:relative;background:var(--surface);will-change:transform;touch-action:pan-y}
.swipe-wrap.sw-animate .email-row{transition:transform .2s ease}
.swipe-action{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;gap:.5rem;padding:0 1.15rem;color:#fff;font-weight:700;font-size:.9rem;line-height:1;box-sizing:border-box}
.swipe-action .ic{width:1.2em;height:1.2em}
.swipe-archive{background:#007672;justify-content:flex-start}
.swipe-delete{background:#c5221f;justify-content:flex-end}
.swipe-wrap.sw-right .swipe-archive{display:flex}
.swipe-wrap.sw-left  .swipe-delete{display:flex}

/* Mobile nav drawer toggle */
.navtoggle{display:none;background:none;border:0;padding:6px;margin-right:.15rem;color:var(--text);cursor:pointer;border-radius:8px;align-items:center}
.navtoggle:hover{background:var(--bg)}
.navtoggle .ic{width:22px;height:22px}
.nav-backdrop{position:fixed;inset:var(--topbar) 0 0 0;background:rgba(0,0,0,.35);z-index:24;opacity:0;pointer-events:none;transition:opacity .2s}
.nav-backdrop.show{opacity:1;pointer-events:auto}
@media(max-width:820px){ .navtoggle{display:inline-flex} }
/* bigger, clearer swipe action icons */
.swipe-action{font-size:.95rem}
.swipe-action .ic{width:1.55em;height:1.55em}

/* Type-to-confirm destructive dialog (e.g., delete domain) */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.confirm-box{background:var(--surface);border-radius:14px;padding:22px;max-width:430px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.confirm-box h3{margin:0 0 .5rem}
.confirm-box p{color:var(--muted);font-size:.95rem;margin:.35rem 0}
.confirm-box .confirm-ask{color:var(--text)}
.danger-input{width:100%;padding:.7rem .8rem;border:2px solid #c5221f;border-radius:10px;font:inherit;margin-top:.3rem;background:#fff5f5;color:#1a1a1a}
.danger-input:focus{outline:2px solid #c5221f;outline-offset:1px}
.confirm-err{color:#c5221f;font-size:.85rem;min-height:1.1em;margin-top:.45rem}
.confirm-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.1rem}
.btn.danger[disabled]{opacity:.5;cursor:not-allowed}

/* Icon-only action buttons (e.g. message toolbar) — monochrome, adapt to template */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem;line-height:0}
.icon-btn .ic{width:1.2em;height:1.2em}
.msg-toolbar .msg-actions{flex-wrap:nowrap;gap:.3rem}
.msg-toolbar{gap:.5rem}

/* Team composer overflow ("⋯") menu — keeps only text + mic + send inline */
.composer-more{position:relative;display:flex}
.composer-more-menu[hidden]{display:none}
.composer-more-menu{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:4px;display:flex;flex-direction:column;gap:2px;z-index:30;min-width:190px}
.composer-more-menu button{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:0;background:none;font:inherit;color:inherit;text-align:left;border-radius:7px;cursor:pointer;white-space:nowrap}
.composer-more-menu button:hover{background:var(--bg)}
.composer-more-menu .ic{width:1.15em;height:1.15em;flex:none}
.composer-send{padding:.5rem .7rem}

/* Chat/new dropdown menus (details/summary) + icon layout */
.team-side-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.team-side-global{display:flex;gap:.25rem;margin-left:auto}
.chat-menu{position:relative;display:inline-block}
.chat-menu>summary{list-style:none}
.chat-menu>summary::-webkit-details-marker{display:none}
.chat-menu>summary::marker{content:""}
.chat-menu-pop{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.18);padding:5px;min-width:210px;z-index:40;display:flex;flex-direction:column;gap:1px}
.new-menu .chat-menu-pop{left:0;right:auto}
.menuitem{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:0;background:none;font:inherit;color:inherit;text-align:left;border-radius:7px;cursor:pointer;white-space:nowrap;text-decoration:none;width:100%}
.menuitem:hover{background:var(--bg)}
.menuitem.danger{color:#c5221f}
.menuitem .ic{width:1.1em;height:1.1em;flex:none}
.menuitem-sep{height:1px;background:var(--border);margin:4px 2px}
.react-who{max-height:50vh;overflow-y:auto}
.react-who-row{display:flex;gap:.6rem;align-items:baseline;padding:.35rem 0;border-bottom:1px solid var(--border)}
.react-who-row:last-child{border-bottom:0}
.react-who-emoji{font-size:1.1rem}
.react-who-names{font-size:.9rem}
.task-file{display:inline-flex;align-items:center;gap:.25rem}
.task-file-x{padding:.05rem .4rem;line-height:1}

/* ---- upload progress overlay (sticker import/upload) ---- */
.busy-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1600;display:flex;align-items:center;justify-content:center;padding:16px}
.busy-card{background:var(--surface);color:var(--text);border-radius:12px;padding:1.25rem 1.5rem;min-width:260px;max-width:90vw;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.busy-label{font-size:.95rem;margin-bottom:.6rem}
.busy-bar{height:8px;background:var(--border);border-radius:999px;overflow:hidden}
.busy-fill{height:100%;width:0;background:var(--primary);transition:width .2s ease}

/* ---- theme swatches (settings + admin appearance) ---- */
.theme-swatches{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}
.theme-swatch{display:flex;align-items:center;gap:.4rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);padding:.35rem .65rem;cursor:pointer;font:inherit;font-size:.85rem}
.theme-swatch:hover{border-color:var(--primary)}
.theme-swatch .sw{width:15px;height:15px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.12)}
.theme-swatch .sw-b{margin-left:-7px}
.theme-swatch[data-theme-preview="default"] .sw-a{background:#FFB81C}.theme-swatch[data-theme-preview="default"] .sw-b{background:#307FE2}
.theme-swatch[data-theme-preview="slate"] .sw-a{background:#475569}.theme-swatch[data-theme-preview="slate"] .sw-b{background:#2563EB}
.theme-swatch[data-theme-preview="forest"] .sw-a{background:#2F855A}.theme-swatch[data-theme-preview="forest"] .sw-b{background:#2C7A7B}
.theme-swatch[data-theme-preview="plum"] .sw-a{background:#7C3AED}.theme-swatch[data-theme-preview="plum"] .sw-b{background:#DB2777}
.theme-swatch[data-theme-preview="ocean"] .sw-a{background:#0E7490}.theme-swatch[data-theme-preview="ocean"] .sw-b{background:#2563EB}

/* ---- dark-mode fixes for accent tints that are hardcoded light ---- */
.dark .msg.mine{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.dark .react-chip.mine{background:rgba(255,255,255,.13);border-color:var(--primary)}
.dark .notif-item.unread{background:rgba(255,255,255,.05)}
.dark .notif-item.unread:hover{background:rgba(255,255,255,.09)}
.dark .folders a.active{background:rgba(255,255,255,.08)}
.dark .compose-body-wrap.dragover,.dark .team-thread.dragover .thread-scroll{background:rgba(255,255,255,.06)}
.dark .cred-box{background:rgba(255,255,255,.05)}
.dark .poll-opt .poll-bar{background:rgba(255,255,255,.10)}
.dark .poll-opt.mine .poll-bar{background:rgba(255,255,255,.16)}
.dark .danger-input{background:#2A1414;color:var(--text)}
.dark .btn.danger{color:#FCA5A5;border-color:#7F1D1D}
.dark .btn.danger:hover{background:#3B1414}
.dark .auth-error,.dark .alert.error,.dark .msg.failed{background:#3B1414;color:#FCA5A5;border-color:#7F1D1D}
.dark .alert.success{background:#13351F;color:#8CD9A6;border-color:#1F5233}

/* ---- share sheet (Android "Share with → Tidli") ---- */
body.bare .topbar, body.bare .sidebar, body.bare .navtoggle{display:none!important}
body.bare .shell{padding-top:0;min-height:100vh}
body.bare .main{margin-left:0;padding:0}
.share-sheet{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg)}
.share-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 50px rgba(0,0,0,.18);width:100%;max-width:440px;padding:1.25rem 1.25rem 1rem}
.share-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.25rem}
.share-head .share-logo{width:28px;height:28px;object-fit:contain}
.share-head h1{font-size:1.2rem;margin:0}
.share-sep{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:1rem 0 .4rem}
.share-list{display:flex;flex-direction:column;gap:.25rem;max-height:44vh;overflow-y:auto}
.share-choice{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:.65rem .8rem;cursor:pointer;font:inherit}
.share-choice:hover{background:var(--bg);border-color:var(--primary)}
.share-choice-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--bg);flex:0 0 auto}
.share-choice-ic .ic{width:18px;height:18px}
.share-choice-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.share-choice-txt strong{font-weight:600}
.share-choice-txt .muted{font-size:.8rem}
.share-foot{margin-top:1rem;text-align:right}

/* swatch previews for the added palettes */
.theme-swatch[data-theme-preview="rose"] .sw-a{background:#D6336C}.theme-swatch[data-theme-preview="rose"] .sw-b{background:#8E44AD}
.theme-swatch[data-theme-preview="sand"] .sw-a{background:#B5892B}.theme-swatch[data-theme-preview="sand"] .sw-b{background:#2F855A}
.theme-swatch[data-theme-preview="graphite"] .sw-a{background:#3F3F46}.theme-swatch[data-theme-preview="graphite"] .sw-b{background:#2563EB}
.theme-swatch[data-theme-preview="indigo"] .sw-a{background:#4F46E5}.theme-swatch[data-theme-preview="indigo"] .sw-b{background:#0EA5E9}
.theme-swatch[data-theme-preview="crimson"] .sw-a{background:#DC2626}.theme-swatch[data-theme-preview="crimson"] .sw-b{background:#C2410C}
.theme-swatch[data-theme-preview="custom"] .sw-a{background:linear-gradient(135deg,#FFB81C,#307FE2)}.theme-swatch[data-theme-preview="custom"] .sw-b{background:linear-gradient(135deg,#D6336C,#2F855A)}
/* custom palette editor */
.custom-palette{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.6rem 0}
.custom-palette[hidden]{display:none}
.custom-color{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.custom-color input[type=color]{width:34px;height:28px;border:1px solid var(--border);border-radius:6px;background:none;padding:0;cursor:pointer;flex:0 0 auto}
.custom-color input[type=text]{width:100%;padding:.35rem .5rem;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;font-size:.85rem}
.custom-color .cc-label{flex:0 0 7.5rem;color:var(--muted)}
@media(max-width:560px){.custom-palette{grid-template-columns:1fr}}

/* admin domain check-DNS status line */
.dns-status{font-size:.85rem;margin:.35rem 0;min-height:1.1em}
.dns-status.muted{color:var(--muted)}
.dns-status.ok{color:#137333}
.dns-status.bad{color:#B42318}
.dark .dns-status.ok{color:#8CD9A6}
.dark .dns-status.bad{color:#FCA5A5}
.inline-arrow{color:var(--muted);align-self:center;padding:0 .15rem}

/* account switcher in the user menu */
.usermenu-acct{display:flex;align-items:center;gap:.5rem;width:100%}
.usermenu-acct .ic{width:16px;height:16px;flex:0 0 auto;opacity:.7}
.usermenu-acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usermenu-sep{height:1px;background:var(--border);margin:.35rem 0}
.usermenu-signoutall{color:var(--muted);font-size:.85rem}
.domain-sending{display:flex;align-items:center;gap:.45rem;margin:.6rem 0 .2rem;font-size:.85rem;color:var(--text)}

/* external-link interstitial */
.linkout-card{text-align:center}
.linkout-ic{color:var(--accent)}
.linkout-card h1{font-size:1.2rem;margin:.25rem 0 .5rem}
.linkout-domain{font-size:1.15rem;font-weight:700;word-break:break-all;margin:.4rem 0;color:var(--text)}
.linkout-url{font-size:.78rem;word-break:break-all;max-height:4.5rem;overflow:auto;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;margin:.4rem 0}
.linkout-actions{display:flex;gap:.6rem;justify-content:center;margin-top:1rem}
.linkout-actions .btn{min-width:100px}
.linkout-hint{font-size:.75rem;margin-top:.6rem}

/* account switcher list (all signed-in accounts; current is marked) */
.usermenu-accounts{display:flex;flex-direction:column;gap:1px;margin-bottom:.25rem}
.usermenu-acct-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usermenu-acct.is-current{cursor:default;font-weight:600}
.usermenu-acct.is-current:hover{background:none}
.usermenu-current{display:inline-flex;margin-left:auto}
.usermenu-current .ic{color:var(--accent);opacity:1}