/* Mana Workspace styles: shared by the workspace (index.html) and the admin console (admin/). */
@font-face{font-family:"Vazirmatn";src:url(fonts/Vazirmatn-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(fonts/Vazirmatn-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Vazirmatn";src:url(fonts/Vazirmatn-Bold.ttf) format("truetype");font-weight:600 700;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/Manrope-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/Manrope-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/Manrope-Bold.ttf) format("truetype");font-weight:600 700;font-display:swap}
/* icons: a self-hosted subset of Material Symbols Rounded (dev/icons.py rebuilds it after an icon is added) */
@font-face{font-family:"Material Symbols Rounded";src:url(fonts/MaterialSymbolsRounded.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}

/* Layout: app shell — top bar, app rail on the start edge, contextual sidebar, one rounded work surface. Brand: Sarve Mana (forest / sand / moss / gold). */
:root{
  --bg:#F1EDE4; --surface:#FDFCF9; --surface-2:#F7F4EE; --hover:#ECE7DC; --press:#E3DDD0;
  --line:#E2DBCD; --line-2:#ECE7DE;
  --text:#22262A; --muted:#55595C; --faint:#676C6F; --outline:#938977; --star:#A5832C;
  --primary:#0F3D2E; --on-primary:#F5F1E9; --primary-soft:#DCE6DA; --primary-ink:#0F3D2E;
  --sel:#E4ECDF; --gold:#C7A458; --gold-soft:#F4EDDE; --gold-ink:#7E6120;
  --danger:#A8323F; --on-danger:#FFFFFF; --danger-soft:#F7E3E2; --warn:#94600F; --warn-soft:#FAEED6; --info:#2F5DA8; --info-soft:#E4EBF6; --ok:#2F6B52; --ok-soft:#E1EDE5;
  --scrim:rgba(20,28,24,.42);
  --inverse:#22262A; --on-inverse:#F2EFE8; --inverse-accent:#BFE3CE;
  --shadow:0 1px 2px rgba(34,38,42,.07),0 6px 18px rgba(34,38,42,.08);
  --shadow-lg:0 12px 36px rgba(15,61,46,.18),0 2px 8px rgba(0,0,0,.08);
  --logo:url(img/logo.svg);
  --paper:#FFFFFF; --paper-ink:#22262A; --paper-line:#E3E1DB; --paper-head:#EEF3EF; --doc-bg:#F1EDE4; --doc-h:#0F3D2E; --sh-head:#E6EEE7; --sh-tot:#F4EDDE; --sh-bar:#9FB1AB;
  --font-fa:"Vazirmatn","Manrope",system-ui,sans-serif;
  --font-en:"Manrope","Vazirmatn",system-ui,sans-serif;
  --font:var(--font-fa);
  --r:14px; --hh:48px;
  --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1412; --surface:#171D1A; --surface-2:#1C2320; --hover:#232B27; --press:#2A332E;
  --line:#2B3430; --line-2:#222A26;
  --text:#E8E6E0; --muted:#A3AAA5; --faint:#8A928D; --outline:#68736D; --star:#D6BB7E;
  --primary:#9DCDB3; --on-primary:#0C261C; --primary-soft:#213A2E; --primary-ink:#B9DEC9;
  --sel:#1F3329; --gold:#D6BB7E; --gold-soft:#2D271A; --gold-ink:#E3CA92;
  --danger:#EE8C95; --on-danger:#3A0D13; --danger-soft:#3A1E22; --warn:#E9B866; --warn-soft:#33281A; --info:#93B3EA; --info-soft:#1C2940; --ok:#9DCDB3; --ok-soft:#1D3328;
  --scrim:rgba(0,0,0,.6);
  --inverse:#E8E6E0; --on-inverse:#22262A; --inverse-accent:#0F3D2E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:0 12px 36px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --paper:#1C2320; --paper-ink:#E8E6E0; --paper-line:#333D38; --paper-head:#24302A; --doc-bg:#121816; --doc-h:#B9DEC9; --sh-head:#21372D; --sh-tot:#2D271A; --sh-bar:#4E6B5E;
  --logo:url(img/logo-rev.svg); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0F1412; --surface:#171D1A; --surface-2:#1C2320; --hover:#232B27; --press:#2A332E;
  --line:#2B3430; --line-2:#222A26;
  --text:#E8E6E0; --muted:#A3AAA5; --faint:#8A928D; --outline:#68736D; --star:#D6BB7E;
  --primary:#9DCDB3; --on-primary:#0C261C; --primary-soft:#213A2E; --primary-ink:#B9DEC9;
  --sel:#1F3329; --gold:#D6BB7E; --gold-soft:#2D271A; --gold-ink:#E3CA92;
  --danger:#EE8C95; --on-danger:#3A0D13; --danger-soft:#3A1E22; --warn:#E9B866; --warn-soft:#33281A; --info:#93B3EA; --info-soft:#1C2940; --ok:#9DCDB3; --ok-soft:#1D3328;
  --scrim:rgba(0,0,0,.6);
  --inverse:#E8E6E0; --on-inverse:#22262A; --inverse-accent:#0F3D2E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:0 12px 36px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --paper:#1C2320; --paper-ink:#E8E6E0; --paper-line:#333D38; --paper-head:#24302A; --doc-bg:#121816; --doc-h:#B9DEC9; --sh-head:#21372D; --sh-tot:#2D271A; --sh-bar:#4E6B5E;
  --logo:url(img/logo-rev.svg); color-scheme:dark;
}
html[lang="en"]{--font:var(--font-en)}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.55;overflow:hidden;-webkit-font-smoothing:antialiased;accent-color:var(--primary);caret-color:var(--primary)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
input,select,textarea{background:transparent}
::selection{background:var(--primary-soft)}
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
bdi{unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}

/* icons; the width 1lh (= 1em, as line-height is 1) also follows the Android text size setting, which enlarges the glyph but not 1em */
.ms{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"opsz" 24;user-select:none;flex:none;width:1em;width:1lh;overflow:hidden}
.ms.fill{font-variation-settings:"FILL" 1,"opsz" 24}
[dir="rtl"] .flip{transform:scaleX(-1)}
.ib{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;color:var(--muted);flex:none;transition:background .15s}
.ib:hover{background:var(--hover);color:var(--text)}
.ib:active{background:var(--press)}
.ib.sm{width:32px;height:32px}.ib.sm .ms{font-size:18px}
.ib[disabled]{opacity:.4;pointer-events:none}
.ib.on{color:var(--primary-ink);background:var(--primary-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding-inline:16px;border-radius:999px;font-weight:500;white-space:nowrap;transition:background .15s,box-shadow .15s}
.btn .ms{font-size:18px}
.btn.primary{background:var(--primary);color:var(--on-primary)}
.btn.primary:hover{box-shadow:var(--shadow)}
.btn.tonal{background:var(--primary-soft);color:var(--primary-ink)}
.btn.tonal:hover{filter:brightness(.97)}
.btn.ghost{color:var(--primary-ink)}
.btn.ghost:hover{background:var(--hover)}
.btn.line{border:1px solid var(--line);color:var(--text)}
.btn.line:hover{background:var(--hover)}
.btn.danger{background:var(--danger);color:var(--on-danger)}
.btn[disabled]{opacity:.45;pointer-events:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px;background:var(--surface)}
.seg button{height:30px;padding-inline:12px;border-radius:999px;color:var(--muted);font-weight:500;font-size:13px;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--primary-soft);color:var(--primary-ink)}
.chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding-inline:8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--hover);color:var(--muted)}
.chip .ms{font-size:14px}
.cls1{background:var(--gold-soft);color:var(--gold-ink)}
.cls2{background:var(--warn-soft);color:var(--warn)}
.cls3,.cls4{background:var(--danger-soft);color:var(--danger)}
.av{--s:32px;width:var(--s);height:var(--s);border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;color:#fff;font-weight:600;font-size:calc(var(--s)*.42);background:var(--primary);line-height:1}
.av.me{background:var(--primary);color:var(--on-primary)}
.sw{width:12px;height:12px;border-radius:4px;flex:none;display:inline-block}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* shell */
#app{height:100%;display:grid;grid-template-rows:64px 1fr;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
#top{display:flex;align-items:center;gap:8px;padding-inline:12px 16px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;padding-inline-end:12px;min-width:max-content;text-decoration:none;color:inherit}
.brand .logo{width:26px;height:40px;background:var(--logo) center/contain no-repeat}
.wm{position:relative;font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--primary-ink);padding-top:6px}
.wm sup{position:absolute;inset-inline-start:-4px;top:-5px;font-size:10px;font-weight:600;color:var(--gold-ink)}
html[lang="en"] .wm{font-size:18px}
.wm{padding-top:0;white-space:nowrap}
.appn{font-size:20px;color:var(--muted);font-weight:400;padding-inline-start:14px;border-inline-start:1px solid var(--line);line-height:1.2}
.search{flex:1;min-width:0;max-width:720px;height:46px;display:flex;align-items:center;gap:4px;padding-inline:6px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;margin-inline:auto;transition:box-shadow .15s,background .15s}
.search:focus-within{box-shadow:var(--shadow);border-color:var(--line)}
/* min-width:0 on .search and its input: with a large system font (text zoom) an input's default width would widen the page */
.search input{flex:1;min-width:0;width:0;border:0;outline:0;height:100%;font-size:15px;padding-inline:4px}
.search input::-webkit-search-cancel-button{display:none}
.search kbd{font:inherit;font-size:12px;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:0 6px;margin-inline-end:8px}
.tact{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.tz{display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:10px;border-radius:999px;color:var(--muted);font-size:12.5px;border:1px solid var(--line-2);white-space:nowrap}
.tz .ms{font-size:16px}
.acct{margin-inline-start:6px;border-radius:50%;padding:3px;display:grid}
.acct:hover{background:var(--hover)}
.body{display:grid;grid-template-columns:72px 256px minmax(0,1fr);min-height:0}
body.collapsed .body{grid-template-columns:72px 0 minmax(0,1fr)}
body.collapsed #side{visibility:hidden}
#rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:8px}
.ri{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;font-size:12px;color:var(--muted);font-weight:500;position:relative}
.ri .pill{width:52px;height:32px;border-radius:16px;display:grid;place-items:center;transition:background .15s}
.ri:hover .pill{background:var(--hover)}
.ri.on{color:var(--text)}
.ri.on .pill{background:var(--primary-soft);color:var(--primary-ink)}
.ri.on .ms{font-variation-settings:"FILL" 1}
.ri .bdg{position:absolute;top:0;inset-inline-start:36px;background:var(--danger);color:var(--on-danger);border-radius:999px;font-size:11px;font-variant-numeric:tabular-nums;min-width:18px;height:16px;padding-inline:4px;display:grid;place-items:center;font-weight:600}
.ri.soon{opacity:.55;cursor:default}
.ri .calic{position:relative;width:20px;height:20px;display:grid;place-items:center}
.ri .calic b{position:absolute;top:6px;font-size:9.5px;font-weight:700;line-height:1;left:0;right:0;text-align:center}
.rsep{width:32px;height:1px;background:var(--line);margin-block:6px}
#side{overflow-y:auto;padding-block:8px 16px;padding-inline:4px 12px;min-width:0}
#main{background:var(--surface);border-radius:var(--r);margin-inline-end:16px;margin-block-end:16px;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;position:relative;box-shadow:0 0 0 1px var(--line-2)}
.create{display:inline-flex;align-items:center;gap:12px;height:56px;padding-inline:18px 24px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);font-weight:600;font-size:14.5px;margin-block:4px 16px;margin-inline-start:4px;color:var(--text);transition:box-shadow .15s,background .15s}
.create:hover{box-shadow:var(--shadow-lg)}
.create .ms{font-size:22px;color:var(--primary-ink)}
.nav{display:flex;flex-direction:column}
.ni{display:flex;align-items:center;gap:14px;height:34px;padding-inline:16px 12px;border-radius:999px;color:var(--text);font-size:14px;width:100%;text-align:start}
.ni:hover{background:var(--hover)}
.ni.on{background:var(--sel);font-weight:600;color:var(--primary-ink)}
.ni.on .ms{font-variation-settings:"FILL" 1}
.ni .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni .cnt{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.shead{display:flex;align-items:center;justify-content:space-between;padding-inline:16px 4px;margin-block:16px 4px;font-size:13px;font-weight:600;color:var(--muted)}
.scrim-d{display:none}

/* popovers, modals, toast */
.pop{position:fixed;z-index:60;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--line-2);max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;animation:popin .14s var(--ease-out)}
@keyframes popin{from{opacity:0;transform:translateY(-4px)}}
.menu{padding-block:6px;min-width:220px}
.mi{display:flex;align-items:center;gap:12px;width:100%;height:38px;padding-inline:16px;text-align:start;font-size:14px;white-space:nowrap}
.mi:hover{background:var(--hover)}
.mi .ms{color:var(--muted)}
.mi .hint{margin-inline-start:auto;color:var(--faint);font-size:12px;padding-inline-start:16px}
.mi[disabled]{opacity:.5;pointer-events:none}
.msep{height:1px;background:var(--line-2);margin-block:6px}
.mlabel{padding:8px 16px 4px;font-size:12px;color:var(--faint);font-weight:600}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:57;display:grid;place-items:center;padding:16px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.985)}}
.modal{background:var(--surface);border-radius:20px;box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px;animation:rise .2s var(--ease-out)}
.modal h2{font-size:20px;font-weight:600;margin:0 0 16px;text-wrap:balance}
.mfoot{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:20px;flex-wrap:wrap}
#toast{position:fixed;z-index:70;inset-block-end:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(24px + env(safe-area-inset-left,0px));background:var(--inverse);color:var(--on-inverse);border-radius:12px;padding:6px 6px 6px 16px;animation:rise .2s var(--ease-out);display:flex;align-items:center;gap:4px;box-shadow:var(--shadow-lg);max-width:calc(100vw - 32px);box-sizing:border-box;font-size:14px}
[dir="rtl"] #toast{padding:6px 16px 6px 6px}
#toast[hidden]{display:none}
#toast .tmsg{padding-inline-end:12px}
#toast .tbtn{color:var(--inverse-accent);font-weight:600;padding:8px 10px;border-radius:8px;white-space:nowrap}
#toast .tbtn:hover{background:color-mix(in srgb,var(--on-inverse) 10%,transparent)}
#toast .ib{color:color-mix(in srgb,var(--on-inverse) 75%,transparent)}
#toast .ib:hover{background:color-mix(in srgb,var(--on-inverse) 10%,transparent);color:var(--on-inverse)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span{font-size:12.5px;color:var(--muted);font-weight:500}
.inp{height:40px;border:1px solid var(--outline);border-radius:10px;padding-inline:12px;outline:0;background:var(--surface);width:100%}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
select.inp{padding-inline:10px}
.tgl{display:flex;align-items:flex-start;gap:12px;padding-block:10px;cursor:pointer}
.tgl input{appearance:none;width:40px;height:24px;border-radius:999px;background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--outline);position:relative;flex:none;margin:0;cursor:pointer;transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.tgl input::after{content:"";position:absolute;top:6px;inset-inline-start:6px;width:12px;height:12px;border-radius:50%;background:var(--outline);transition:all .2s var(--ease)}
.tgl input:checked{background:var(--primary);box-shadow:none}
.tgl input:checked::after{top:4px;inset-inline-start:20px;width:16px;height:16px;background:var(--on-primary)}
.tgl b{display:block;font-weight:500}
.tgl small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
.banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.6}
.banner .ms{font-size:20px;margin-top:1px}
.banner b{font-weight:600}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.banner.danger{background:var(--danger-soft);color:var(--danger)}
.banner.info{background:var(--info-soft);color:var(--info)}
.banner.gold{background:var(--gold-soft);color:var(--gold-ink)}
.banner.ok{background:var(--ok-soft);color:var(--ok)}
.banner .bt{color:var(--text)}
.banner ul{margin:6px 0 0;padding-inline-start:18px}
.banner .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* settings */
.sets{padding:16px 18px;width:340px;box-sizing:border-box;max-width:calc(100vw - 18px)}
.sets h3{margin:0 0 12px;font-size:15px;font-weight:600}
.srow{display:flex;flex-direction:column;gap:6px;padding-block:8px}
.srow>span{font-size:12.5px;color:var(--muted)}
.sets .seg{flex-wrap:wrap}
.kbdl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px;color:var(--muted);margin-top:6px}
.kbdl kbd{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:5px;padding:0 6px;color:var(--text);justify-self:start}

/* ---------- MAIL ---------- */
.mtool{display:flex;align-items:center;gap:2px;height:52px;padding-inline:8px 12px;border-bottom:1px solid var(--line-2);flex:none}
.mtool .sp{flex:1}
.mtool .pg{font-size:12.5px;color:var(--muted);padding-inline:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cb{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;flex:none;cursor:pointer}
.cb:hover{background:var(--hover)}
.cb input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;margin:0}
.tabs{display:flex;border-bottom:1px solid var(--line-2);flex:none;overflow-x:auto;scrollbar-width:none}
.tab{display:flex;align-items:center;gap:12px;white-space:nowrap;height:52px;padding-inline:16px 20px;min-width:180px;font-weight:500;color:var(--muted);position:relative;text-align:start}
.tab:hover{background:var(--surface-2)}
.tab.on{color:var(--primary-ink)}
.tab.on::after{content:"";position:absolute;inset-inline:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--primary)}
.tab .new{white-space:nowrap;font-size:12px;font-weight:600;background:var(--primary);color:var(--on-primary);border-radius:999px;padding:1px 8px}
.list{flex:1;overflow-y:auto;min-height:0}
.row{display:grid;grid-template-columns:40px 32px 32px minmax(120px,190px) minmax(0,1fr) auto;align-items:center;gap:0 8px;height:44px;padding-inline:8px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;position:relative;background:var(--surface-2)}
.row.unread{background:var(--surface)}
.row:hover{box-shadow:inset 0 -1px 0 var(--line),0 1px 3px rgba(0,0,0,.06);z-index:1}
.row.sel{background:var(--sel)}
.row .star{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--faint)}
.row .star:hover{background:var(--hover)}
.row .star.on{color:var(--star)}
.row .from{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-start:4px}
.row .from .n{color:var(--faint);font-size:12px}
.row .from .dr{color:var(--danger)}
.row.unread .from,.row.unread .s{font-weight:700}
.row .line{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.row .s{flex:none;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.row .snip{color:var(--muted);overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.row .lb{font-size:12px;height:20px;padding-inline:6px;border-radius:5px;font-weight:500;flex:none}
.row .meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.row.unread .meta .dt{color:var(--text);font-weight:700}
.row .meta .ms{font-size:16px}
.row .hov{display:none;position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);background:inherit;padding-inline-start:8px;gap:2px}
.row:hover .hov,.row:focus-within .hov{display:flex}
.row:hover .meta,.row:focus-within .meta{visibility:hidden}
.row .sep{flex:none;color:var(--faint)}
[dir="rtl"] .row .snip[dir="ltr"]{text-align:right}
[dir="ltr"] .row .snip[dir="rtl"]{text-align:left}
.row .warnic{color:var(--danger)}
.sugg{margin:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.sugg button{color:var(--primary-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.empty{display:grid;place-items:center;text-align:center;padding:64px 24px;color:var(--muted);gap:8px}
.empty .ms{font-size:48px;color:var(--faint)}
.qhead{padding:14px 20px 6px;font-size:13px;color:var(--muted)}
/* read */
.read{flex:1;overflow-y:auto;min-height:0;padding-bottom:40px}
.rhead{display:flex;align-items:flex-start;gap:12px;padding:20px 24px 8px 24px;padding-inline-start:72px;flex-wrap:wrap}
.rhead h1{font-size:22px;font-weight:500;margin:0;line-height:1.45;text-wrap:balance;flex:1 1 320px;min-width:0}
.rhead .chips{display:flex;gap:6px;flex-wrap:wrap;padding-top:6px}
.rbanners{display:flex;flex-direction:column;gap:10px;padding:6px 24px 6px 72px}
[dir="rtl"] .rbanners{padding:6px 72px 6px 24px}
.msg{padding:14px 24px;border-bottom:1px solid var(--line-2)}
.msg .mh{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start}
.msg .who{min-width:0}
.msg .who b{font-weight:600}
.msg .who .em{color:var(--muted);font-size:12.5px}
.msg .who .to{color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.trust{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--ok);font-weight:500}
.trust .ms{font-size:14px}
.trust.bad{color:var(--danger)}
.trust.ext{color:var(--warn)}
.msg .when{font-size:12.5px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:2px}
.msg .mb{padding-inline-start:52px;padding-top:6px;font-size:14.5px;line-height:1.85;max-width:80ch}
.msg .mb p{margin:0 0 .8em;unicode-bidi:plaintext;text-align:start}
.msg .mb ul,.msg .mb ol{margin:0 0 .8em;padding-inline-start:22px}
.msg .mb li{unicode-bidi:plaintext}
.msg .mb a{color:var(--info);text-underline-offset:2px}
.msg .mb a.dead{color:var(--danger);text-decoration:line-through;pointer-events:none}
.msg.clp{cursor:pointer}
.msg.clp .mb{display:none}
.msg.clp .snip{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .mb .ltr{direction:ltr;text-align:left}
.atts{display:flex;gap:10px;flex-wrap:wrap;padding-inline-start:52px;padding-top:8px}
.att{width:200px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);text-align:start}
.att:hover{box-shadow:var(--shadow)}
.att .th{height:96px;display:grid;place-items:center;background:var(--surface-2);overflow:hidden;position:relative}
.att .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.att .th .ms{font-size:40px}
.att .an{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12.5px;border-top:1px solid var(--line-2)}
.att .an bdi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.att .an .ms{font-size:18px}
.att .sz{font-size:12px;color:var(--muted);padding:0 10px 8px}
.invite{margin:12px 24px 0;margin-inline-start:76px;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;max-width:560px}
.invite .dbox{grid-row:span 3;width:56px;border-radius:10px;overflow:hidden;text-align:center;border:1px solid var(--line)}
.invite .dbox .dmo{background:var(--primary);color:var(--on-primary);font-size:12px;padding:2px 0}
.invite .dbox .dd{font-size:22px;font-weight:700;line-height:1.5}
.invite .dbox .wd{font-size:12px;color:var(--muted);padding-bottom:4px}
.invite h4{margin:0;font-size:15px;font-weight:600}
.invite .rs{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
.invite .rs .btn{height:32px;padding-inline:14px}
.invite .rs .btn.on{background:var(--primary);color:var(--on-primary)}
.replies{display:flex;gap:8px;flex-wrap:wrap;padding:16px 24px 0;padding-inline-start:76px}
.replies .btn{height:34px}
.ractions{display:flex;gap:8px;padding:12px 24px;padding-inline-start:76px;flex-wrap:wrap}
/* compose */
#compose{position:fixed;z-index:40;inset-block-end:0;inset-inline-end:calc(24px + env(safe-area-inset-left,0px));width:min(560px,calc(100vw - 32px));background:var(--surface);border-radius:14px 14px 0 0;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:calc(100vh - 80px);animation:rise .22s var(--ease-out)}
[dir="ltr"] #compose{inset-inline-end:calc(24px + env(safe-area-inset-right,0px))}
#compose[hidden]{display:none}
#compose.min{width:300px}
#compose.min .cbody{display:none}
#compose.max{inset:5vh 8vw auto;width:auto;height:90vh;max-height:none;border-radius:14px;z-index:55}
.chead{display:flex;align-items:center;gap:2px;height:44px;padding-inline:16px 6px;background:var(--surface-2);border-radius:14px 14px 0 0;font-weight:600;font-size:14px;cursor:pointer;flex:none}
.chead .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .ib{width:32px;height:32px}
.cbody{display:flex;flex-direction:column;min-height:0;flex:1}
.crow{display:flex;align-items:center;gap:8px;min-height:42px;border-bottom:1px solid var(--line-2);margin-inline:16px;flex-wrap:wrap;position:relative}
.crow>label{color:var(--muted);font-size:13px}
.crow input{border:0;outline:0;flex:1;min-width:120px;height:40px}
.crow .ccx{color:var(--muted);font-size:13px;margin-inline-start:auto}
.crow .ccx button:hover{text-decoration:underline}
.rcp{display:inline-flex;align-items:center;gap:6px;height:28px;padding-inline:3px 8px;border-radius:999px;border:1px solid var(--line);font-size:13px;max-width:100%}
.rcp .av{--s:22px}
.rcp.ext{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.rcp button{display:grid;color:var(--muted)}
.rcp button .ms{font-size:16px}
.ac{position:absolute;top:100%;inset-inline-start:0;z-index:5;background:var(--surface);box-shadow:var(--shadow-lg);border-radius:12px;padding-block:6px;min-width:300px;border:1px solid var(--line-2)}
.ac .mi{height:48px}
.ac .mi small{display:block;color:var(--muted);font-size:12px}
.ac .mi.on{background:var(--hover)}
.cedit{flex:1;min-height:220px;padding:14px 16px;outline:0;overflow-y:auto;font-size:14.5px;line-height:1.85;unicode-bidi:plaintext;text-align:start}
.cedit>*{unicode-bidi:plaintext;text-align:start;margin:0}
.cedit:empty::before{content:attr(data-ph);color:var(--faint)}
.cedit blockquote{border-inline-start:2px solid var(--line);margin:8px 0;padding-inline-start:12px;color:var(--muted)}
.cmeta{display:flex;flex-direction:column;gap:8px;padding:0 16px 8px}
.cmeta:empty{display:none}
.cfoot{display:flex;align-items:center;gap:4px;padding:10px 12px 12px 16px;flex-wrap:wrap;border-top:1px solid var(--line-2)}
.sendg{display:inline-flex;border-radius:999px;overflow:hidden;background:var(--primary);color:var(--on-primary)}
.sendg button{height:38px;display:flex;align-items:center;gap:6px;font-weight:600;padding-inline:20px 16px}
.sendg button:hover{background:color-mix(in srgb,var(--on-primary) 12%,transparent)}
.sendg .dd{padding-inline:8px;border-inline-start:1px solid color-mix(in srgb,var(--on-primary) 30%,transparent)}
.fmt{display:flex;gap:0;align-items:center;padding:4px 12px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.fmt .ib{width:30px;height:30px}
.fmt .ib .ms{font-size:18px}
.fmt .vs{width:1px;height:18px;background:var(--line);margin-inline:4px}
.hintline{font-size:12px;color:var(--faint);padding:0 16px 6px}
.clsel{height:30px;border:1px solid var(--outline);border-radius:999px;padding-inline:8px;font-size:12.5px;outline:0;background:var(--surface)}


/* preview */
.pv{position:fixed;inset:0;z-index:58;background:rgba(18,22,20,.92);display:flex;flex-direction:column;color:#EEE;animation:fade .15s}
.pv .pvh{display:flex;align-items:center;gap:10px;height:60px;padding-inline:12px 16px;flex:none}
.pv .pvh .ib{color:#ddd}
.pv .pvh .ib:hover{background:rgba(255,255,255,.1)}
.pv .pvh .fname{flex:1;font-size:15px;text-align:start}
[dir="rtl"] .pv .pvh .fname{text-align:right}
.pv .pvh .btn.tonal{background:#D9E8DF;color:#0F3D2E}

/* ---------- CALENDAR ---------- */
.ctool{display:flex;align-items:center;gap:6px;min-height:60px;padding-block:8px;padding-inline:16px 12px;flex-wrap:wrap;flex:none;border-bottom:1px solid var(--line-2)}
.ctitle{display:flex;flex-direction:column;line-height:1.3;margin-inline-start:8px;min-width:0}
.ctitle b{font-size:20px;font-weight:600;white-space:nowrap}
.ctitle small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.ctool .sp{flex:1}
.mini{padding-block:4px 8px;padding-inline:12px 8px}
.mini .mh{display:flex;align-items:center;justify-content:space-between;padding-inline:8px 0;font-weight:600;font-size:13.5px}
.mini .mh small{font-weight:400;color:var(--muted);font-size:11.5px;display:block}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px}
.mgrid .wh{color:var(--faint);font-size:11px;height:26px;display:grid;place-items:center;font-weight:600}
.mgrid button{height:30px;width:30px;margin:1px auto;border-radius:50%;display:grid;place-items:center;font-size:12px;position:relative}
.mgrid button:hover{background:var(--hover)}
.mgrid button.out{color:var(--faint)}
.mgrid button.off{color:var(--danger)}
.mgrid button.inwk{background:var(--sel)}
.mgrid button.today{background:var(--primary);color:var(--on-primary);font-weight:700}
.mgrid button.cur:not(.today){background:var(--primary-soft);color:var(--primary-ink);font-weight:700}
.cals{padding-inline:4px}
.calrow{display:flex;align-items:center;gap:12px;height:34px;padding-inline:14px 8px;border-radius:8px;cursor:pointer;font-size:13.5px}
.calrow:hover{background:var(--hover)}
.calrow input{appearance:none;width:18px;height:18px;border-radius:5px;border:2px solid var(--c);flex:none;display:grid;place-items:center;cursor:pointer;margin:0}
.calrow input:checked{background:var(--c)}
.calrow input:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.calrow span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnote{margin:16px 12px 0;font-size:12px;color:var(--muted);line-height:1.6;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.calwrap{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.wk{display:flex;flex-direction:column;min-height:0;flex:1}
.wk.multi{min-width:560px}
.wk-head,.wk-all,.wk-grid{display:grid;grid-template-columns:64px repeat(var(--n),minmax(0,1fr))}
.wk-head{flex:none;border-bottom:1px solid var(--line-2)}
.dh{padding:8px 4px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.dh .w{font-size:11.5px;color:var(--muted);font-weight:600}
.dh .d{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:500;line-height:1}
.dh .d:hover{background:var(--hover)}
.dh.today .d{background:var(--primary);color:var(--on-primary)}
.dh.today .w{color:var(--primary-ink)}
.dh.off .d,.dh.off .w{color:var(--danger)}
.dh.today.off .d{color:var(--on-primary)}
.dh .s2{font-size:11px;color:var(--faint);white-space:nowrap}
.gut{font-size:10.5px;color:var(--faint);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;text-align:center;line-height:1.3}
.wk-all{flex:none;border-bottom:1px solid var(--line);position:relative;grid-auto-rows:24px;padding-block:3px;row-gap:2px;min-height:30px}
.wk-all .gut{align-items:center;padding:0}
.ad{margin-inline:2px;border-radius:6px;color:#fff;font-size:12px;font-weight:500;padding-inline:8px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;cursor:pointer;min-width:0}
.ad.hol{background:var(--danger-soft);color:var(--danger)}
.ad.occ{background:var(--gold-soft);color:var(--gold-ink)}
.wk-scroll{flex:1;overflow-y:auto;min-height:0;position:relative}
.wk-grid{position:relative}
.hours{position:relative}
.hours div{height:var(--hh);font-size:10.5px;color:var(--faint);text-align:center;position:relative}
.hours div span{position:relative;top:-8px;background:var(--surface);padding-inline:4px}
.hours div:first-child span{display:none}
.col{position:relative;border-inline-start:1px solid var(--line-2);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hh) - 1px),var(--line-2) calc(var(--hh) - 1px),var(--line-2) var(--hh));height:calc(var(--hh)*24);cursor:default}
.col.we{background-color:var(--surface-2)}
.col .off-hours{position:absolute;inset-inline:0;background:repeating-linear-gradient(135deg,transparent 0 6px,var(--line-2) 6px 7px);opacity:.5;pointer-events:none}
.ev{position:absolute;border-radius:7px;padding:3px 7px;color:#fff;font-size:12px;line-height:1.35;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px var(--surface);user-select:none;touch-action:none}
.ev b{font-weight:600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc,2);white-space:normal;overflow:hidden;overflow-wrap:break-word}
.ev .t{opacity:.9;font-size:11.5px}
.ev.short{display:flex;gap:6px;align-items:center;white-space:nowrap}
.ev.short b{-webkit-line-clamp:1;flex:0 1 auto;min-width:0}
.ev.drag{opacity:.85;box-shadow:var(--shadow-lg);z-index:5}
.ev .rz{position:absolute;inset-inline:0;bottom:0;height:7px;cursor:ns-resize}
.ev.tent{background:var(--surface)!important;border:1.5px dashed var(--c);color:var(--c)}
.ev.declined{opacity:.5;text-decoration:line-through}
.dghost{position:absolute;inset-inline:2px;border-radius:7px;background:var(--primary);opacity:.85;color:var(--on-primary);font-size:12px;padding:3px 7px;pointer-events:none}
.now{position:absolute;inset-inline:0;height:2px;background:var(--danger);z-index:4;pointer-events:none}
.now::before{content:"";position:absolute;inset-inline-start:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--danger)}
/* month */
.mo{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
.mo-h{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line-2);flex:none}
.mo-h div{text-align:center;font-size:11.5px;color:var(--muted);font-weight:600;padding:8px 2px}
.mo-h div.off{color:var(--danger)}
.mo-g{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(96px,1fr));min-height:0}
.cell{border-inline-start:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:4px 4px 2px;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;cursor:default}
.cell:nth-child(7n+1){border-inline-start:0}
.cell.we{background:var(--surface-2)}
.cell .ch{display:flex;align-items:center;gap:6px;padding-inline:2px}
.cell .dn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:500;flex:none}
.cell .dn:hover{background:var(--hover)}
.cell .s2{font-size:10.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.out .dn,.cell.out .s2{color:var(--faint);opacity:.75}
.cell.off .dn{color:var(--danger)}
.cell.today .dn{background:var(--primary);color:var(--on-primary)}
.cell .hn{font-size:11px;color:var(--danger);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:4px}
.cell .hn.occ{color:var(--gold-ink)}
.mev{display:flex;align-items:center;gap:6px;font-size:12px;padding:1px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;cursor:pointer;min-height:20px}
.mev:hover{background:var(--hover)}
.mev .dot{width:8px;height:8px;border-radius:50%;flex:none}
.mev .tm{color:var(--muted);font-size:11px}
.mev.all{color:#fff}
.mev.all:hover{filter:brightness(1.08);background:var(--c)}
.more{font-size:11.5px;font-weight:600;color:var(--muted);text-align:start;padding-inline:6px;border-radius:6px}
.more:hover{background:var(--hover)}
/* event popover */
.evp{width:400px;padding:8px 8px 16px}
.evp .tb{display:flex;justify-content:flex-end;gap:2px}
.evp .er{display:grid;grid-template-columns:40px 1fr;gap:4px 10px;padding-inline:12px 16px;align-items:start;margin-top:10px}
.evp .er>.ms,.evp .er>.sw{justify-self:center;margin-top:2px;color:var(--muted)}
.evp .er>.sw{width:14px;height:14px;margin-top:8px}
.evp h3{margin:0;font-size:20px;font-weight:500;line-height:1.4}
.evp .sub{color:var(--muted);font-size:13px}
.evp .gl{display:flex;flex-direction:column;gap:6px}
.evp .gl div{display:flex;align-items:center;gap:8px;font-size:13px}
.evp .gl .av{--s:26px}
.evp .gl small{color:var(--muted)}
.pal{display:grid;grid-template-columns:repeat(6,26px);gap:8px;padding-top:4px}
.pal button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff}
.pal button .ms{font-size:16px}
.pal button:hover{transform:scale(1.1)}
.qc{width:420px;padding:16px 18px}
.qc .ttl{font-size:20px;border:0;border-bottom:1px solid var(--line);width:100%;outline:0;padding:6px 2px;margin-bottom:12px}
.qc .ttl:focus{border-bottom:2px solid var(--primary)}
.qc .r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:13.5px}
.qc .r .ms{color:var(--muted)}
.qc select.inp{height:34px;width:auto}
.qc .r2{font-size:12px;color:var(--muted);padding-inline-start:28px;margin-top:-6px;margin-bottom:10px}

/* calendar: web app additions */
.calrow{gap:4px;padding-inline:4px}
.calrow label{display:flex;align-items:center;gap:12px;flex:1;min-width:0;height:34px;padding-inline:10px 4px;cursor:pointer}
.calrow .more{visibility:hidden;width:30px;height:30px}
.calrow:hover .more,.calrow .more:focus-visible{visibility:visible}
.shead .chip{height:20px}
.invl{display:flex;flex-direction:column;padding-inline:4px}
.invi{display:flex;align-items:center;gap:12px;padding:6px 14px;border-radius:10px;text-align:start;width:100%}
.invi:hover{background:var(--hover)}
.invi .lbl{display:flex;flex-direction:column;min-width:0;font-size:13.5px}
.invi .lbl bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invi small{color:var(--muted);font-size:12px}
.invi .sw{border:1.5px dashed var(--c,currentColor)}
.ctool .vmenu{display:none;height:34px;padding-inline:12px 6px;gap:2px}
.ev.flash,.ad.flash{outline:3px solid var(--gold);outline-offset:1px}
.ev.maybe,.ad.maybe,.mev.all.maybe{background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(255,255,255,.18) 6px 12px)}
.ad.tent,.mev.all.tent{background:var(--surface)!important;border:1.5px dashed var(--c);color:var(--c)}
.ad.declined,.mev.declined{opacity:.55;text-decoration:line-through}
.mev.tent .dot{background:transparent!important;border:1.5px dashed var(--c,var(--muted))}
.ad[data-k]:focus-visible,.ev:focus-visible,.mev:focus-visible{outline:2px solid var(--text);outline-offset:1px}
@media (pointer:fine){.ev{touch-action:none}}
.ev{touch-action:manipulation}
.evp .desc{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto}
.evp .gl>div:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.evp .rs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.evp .rs .btn{height:32px;padding-inline:14px}
.evp{max-height:calc(100vh - 24px);overflow:auto}
.evf .pal,.modal .pal{grid-template-columns:repeat(7,26px)}
.pal .none{background:var(--surface);border:2px solid var(--c);color:var(--c)}
.mini.dp{width:280px;padding:10px 10px 12px}
.mgrid button.cur{background:var(--primary-soft);color:var(--primary-ink);font-weight:700}
/* agenda & search */
.agenda{flex:1;overflow-y:auto;min-height:0;padding-block:6px 80px}
.ag-day{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:4px 12px;padding:10px 16px;border-bottom:1px solid var(--line-2)}
.ag-d{display:flex;gap:10px;align-items:flex-start}
.ag-d .dn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:600;flex:none}
.ag-d .dn:hover{background:var(--hover)}
.ag-day.today .ag-d .dn{background:var(--primary);color:var(--on-primary)}
.ag-d div{display:flex;flex-direction:column;min-width:0;padding-top:5px}
.ag-d b{font-weight:500;font-size:13.5px}
.ag-d small{color:var(--muted);font-size:12px}
.ag-d small.hol{color:var(--danger)}
.ag-d small.occ{color:var(--gold-ink)}
.ag-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-e{display:grid;grid-template-columns:12px minmax(96px,auto) minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 10px;border-radius:10px;text-align:start;width:100%}
.ag-e:hover{background:var(--hover)}
.ag-e .dot{width:10px;height:10px;border-radius:50%}
.ag-e .tm{color:var(--muted);font-size:12.5px;white-space:nowrap}
.ag-e .tt{display:flex;flex-direction:column;min-width:0}
.ag-e .tt bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.ag-e .tt small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-e .rp{font-size:16px;color:var(--faint)}
.ag-e.declined .tt bdi{text-decoration:line-through;opacity:.6}
.ag-e.tent .dot{background:transparent!important;border:1.5px dashed var(--muted)}
.cfab{display:none}
/* event editor */
.modal.evm{width:min(680px,100%);padding:0;display:flex;flex-direction:column;overflow:hidden}
.evf{display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 32px)}
.evf-h{display:flex;align-items:center;gap:8px;padding:12px 16px 12px 12px;border-bottom:1px solid var(--line-2);flex:none}
.evf-h h2{flex:1;margin:0;font-size:17px}
.evf-b{overflow-y:auto;padding:16px 20px 24px;display:flex;flex-direction:column;gap:6px;min-height:0}
.evf .ttl{font-size:21px;border:0;border-bottom:1px solid var(--line);width:100%;outline:0;padding:6px 2px;margin:0 0 8px 0;background:transparent}
.evf .ttl:focus{border-bottom:2px solid var(--primary)}
.evf .er{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding-block:6px}
.evf .er>.ms{color:var(--muted);margin-top:9px}
.evf .when{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.evf .dbtn{height:38px;padding-inline:12px;font-weight:500}
.evf select.inp{width:auto;height:38px}
.evf .r2{font-size:12px;color:var(--muted);margin-top:4px}
.evf .ends{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13.5px}
.evf .ends .chk{color:var(--text)}
.evf .ends .cnt{width:72px;height:34px}
.evf .crow{margin:0;border:1px solid var(--line);border-radius:10px;padding-inline:10px;min-height:40px}
.evf .crow input{height:38px}
.evf .crow .ac{inset-inline:0;min-width:0}
.evf .gsts{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.evf .gst{display:flex;align-items:center;gap:10px;padding:4px 2px;font-size:13.5px}
.evf .gst .gn{display:flex;flex-direction:column;min-width:0;flex:1}
.evf .gst .gn bdi,.evf .gst .gn small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evf .gst .gn small{color:var(--muted);font-size:12px;text-align:start}
.evf .rems{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.evf .rem{display:flex;align-items:center;gap:4px}
.evf .rems .btn.ghost{height:32px;padding-inline:8px 12px}
.evf .calsel select{min-width:200px;max-width:100%}
.evf textarea.inp{height:auto;min-height:96px;padding-block:10px;resize:vertical;line-height:1.7}
.evf .er>.inp{max-width:100%}
.evf .banner{margin-top:8px}
.scopes{display:flex;flex-direction:column;gap:4px}
.scopes .sc{font-size:14.5px;color:var(--text);padding:8px 4px;border-radius:8px}
.scopes .sc:hover{background:var(--hover)}
/* calendar: review fixes */
.ev{box-sizing:border-box}
.cx{display:inline-block;font-size:10.5px;font-weight:600;line-height:1.5;padding-inline:4px;border-radius:4px;background:var(--danger-soft);color:var(--danger);text-decoration:none;margin-inline-end:2px;vertical-align:1px}
.ad .cx,.mev .cx{flex:none}
/* a title too long for a narrow day column ends in «…» instead of being cut mid-word */
.ad>bdi{min-width:0;overflow:hidden;text-overflow:ellipsis}
.evp h3.cxd{text-decoration:line-through;text-decoration-thickness:1px}
.evp .cxn{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.evp .cxn .banner{padding:8px 12px}
.evp .cxn .btn{height:32px}
.mi[aria-checked="false"] .ms{visibility:hidden}
.dghost{box-sizing:border-box;overflow:hidden;line-height:1.35}
.dghost b{font-weight:600}
.cell .m1{font-size:12px;font-weight:600;white-space:nowrap}
.cell.out .m1{color:var(--faint)}
.mev bdi{min-width:0;overflow:hidden;text-overflow:ellipsis}
.evf .when{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:start}
.evf .when .wl{font-size:13.5px;line-height:38px}
.evf .when .wr{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.evf .when .wsec{flex-basis:100%;font-size:12px;color:var(--muted);margin-block-start:-2px}
.qc .qw{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;min-width:0;flex:1}
.qc .qt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.chip.itip{background:var(--primary-soft);color:var(--primary-ink);height:20px;padding-inline:7px;vertical-align:2px;margin-inline-end:2px}
.rhead h1 .chip.itip{font-size:13px;height:24px;vertical-align:4px}
.wk-all .ad.adghost{background:var(--primary);color:var(--on-primary);opacity:.85;pointer-events:none}
.evf .crow.bad{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.evf .ferr{color:var(--danger);font-size:12.5px;margin-block-start:6px;line-height:1.6}
.modal.evm{position:relative}
.evov{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px;background:var(--scrim)}
.evov-b{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:20px;width:min(380px,100%);box-sizing:border-box}
.evov h3{margin:0 0 12px;font-size:16px;font-weight:600;line-height:1.6}
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  .ctool{gap:2px;padding:6px 8px;min-height:52px;flex-wrap:nowrap}
  .ctool #cToday{height:32px;padding-inline:10px}
  .ctool .ib{width:34px;height:34px}
  .ctitle{margin-inline-start:4px;min-width:0;flex:1}
  .ctitle b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis}
  .ctitle small{overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
  .ctool .sp{display:none}
  .ctool .vsel{display:none}
  .ctool .vmenu{display:inline-flex;height:32px;padding-inline:10px 4px;font-size:13px}
  .wk.multi{min-width:0}
  .wk-head,.wk-all,.wk-grid{grid-template-columns:44px repeat(var(--n),minmax(0,1fr))}
  .wk.multi .dh .d{width:30px;height:30px;font-size:15px}
  .wk.multi .dh .s2{display:none}
  .wk.multi .ev{padding:2px 3px;font-size:11px}
  .wk.multi .ev .t{display:none}
  .wk.multi .ad{padding-inline:4px;font-size:11px}
  .wk.multi .ad .ms{display:none}
  .gut{font-size:9.5px;padding-inline:5px 1px}
  .mo-h div{padding:6px 0}
  .cell{padding:2px 1px}
  .cell .ch{justify-content:center;padding:0}
  .cell .dn{width:26px;height:26px;font-size:12.5px}
  .cell .s2{display:none}
  .cell .hn{font-size:9.5px;padding-inline:2px;text-align:center}
  .mev{padding:0 3px;font-size:10.5px;gap:3px;min-height:16px;border-radius:4px}
  .mev .tm{display:none}
  .mev .dot{width:6px;height:6px}
  .more{font-size:10.5px;padding-inline:2px;text-align:center}
  .ag-day{grid-template-columns:minmax(0,1fr);padding:10px 12px}
  .ag-e{grid-template-columns:10px minmax(0,auto) minmax(0,1fr) auto;gap:8px;padding:8px 6px}
  .ag-e .tm{font-size:11.5px}
  .cfab{display:grid;place-items:center;position:fixed;inset-block-end:calc(76px + env(safe-area-inset-bottom,0px));inset-inline-end:16px;width:56px;height:56px;border-radius:16px;background:var(--primary-soft);color:var(--primary-ink);box-shadow:var(--shadow-lg);z-index:31}
  .cfab .ms{font-size:26px}
  .modal.evm{width:100%;height:100%;max-height:none;border-radius:0}
  .scrim:has(.modal.evm){padding:0}
  .evf{max-height:none;height:100%}
  .evf-b{padding:12px 16px 40px;flex:1}
  .evf .er{grid-template-columns:22px minmax(0,1fr);gap:10px}
  .evf .when .dbtn{padding-inline:10px;font-size:13px}
  .evp,.qc,.sets{width:calc(100vw - 16px)}
  .evp,.qc{box-sizing:border-box}
  .mini.dp{width:calc(100vw - 16px)}
  .calrow .more{visibility:visible}
  .wk.multi .ev b{-webkit-line-clamp:var(--lc,2);font-weight:500;line-height:1.3}
  .wk.multi .ev.short{display:block;white-space:normal}
  .wk.multi .ev.short b{-webkit-line-clamp:var(--lc,1)}
  .mev{min-width:0}
  .cell .ch{gap:2px}
  .cell .m1{font-size:9.5px;font-weight:500}
  #main:has(#calwrap){padding-bottom:0} /* the grid runs down to the bottom bar */
  /* touch targets */
  .mgrid button{width:40px;height:40px}
  .mini .mh .ib,.ctool .ib{width:40px;height:40px}
  .ctool #cToday,.ctool .vmenu{height:40px}
  .calrow{min-height:44px}
  .calrow .more,#newCal{width:40px;height:40px}
  .wk.multi .dh .d{width:36px;height:36px;position:relative}
  .wk.multi .dh .d::after{content:"";position:absolute;inset:-4px}
  .cell .dn{position:relative}
  .cell .dn::after{content:"";position:absolute;inset:-8px}
}

/* ---------- web app additions (real mail) ---------- */
[hidden]{display:none!important}
:root[data-theme="light"]{color-scheme:light}
.ni{position:relative}
.ni .more{display:none;position:absolute;inset-inline-end:4px;top:1px;width:32px;height:32px;border-radius:50%;place-items:center;color:var(--muted)}
.ni:hover .more,.ni .more:focus-visible{display:grid}
.ni:hover .cnt{visibility:hidden}
.ni .more:hover{background:var(--press)}
.quota{margin:20px 16px 0;font-size:12px;color:var(--muted)}
.quota .bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:6px}
.quota .bar i{display:block;height:100%;background:var(--primary)}
.quota .bar i.hi{background:var(--danger)}
.row .from .me{color:var(--muted)}
.row .chip.cls1,.row .chip.cls2,.row .chip.cls3,.row .chip.cls4{height:20px;font-size:12px}
.mtool .btn{height:32px;padding-inline:12px;font-size:13px}
#main.busy::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;z-index:3;background:linear-gradient(90deg,transparent,var(--primary),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:bar 1s linear infinite}
@keyframes bar{from{background-position:-40% 0}to{background-position:140% 0}}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--primary-soft);border-top-color:var(--primary);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid;place-items:center;padding:72px 24px}
/* placeholder rows while a list is on its way, and placeholder lines while message bodies load */
.sk{display:block;height:10px;border-radius:6px;background:var(--line);opacity:.7;animation:skp 1.3s ease-in-out infinite}
@keyframes skp{50%{opacity:.35}}
.row.skr{cursor:default;pointer-events:none;background:var(--surface)}
.row.skr .av.sk{height:var(--s);border-radius:50%;background:var(--line)}
.row.skr .from .sk{max-width:150px}
.row.skr .line .sk{flex:none}
.mbwait{display:flex;flex-direction:column;gap:10px;padding-block:6px 10px}
.mbwait p{margin:0 0 4px;color:var(--muted);line-height:1.9;overflow-wrap:anywhere}
#boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:90}
#boot[hidden]{display:none}
.msg .mb.html{max-width:none}
.msg .mb.html.plain{max-width:80ch}
.msg .mb iframe.plain{background:transparent;border-radius:0}
.msg .mb.text p{white-space:pre-wrap;overflow-wrap:anywhere}
.msg .mb iframe{width:100%;border:0;display:block;height:60px;border-radius:8px;background:#fff}
.msg .mb .quoted{color:var(--muted)}
.msg .mb details.q{margin-top:6px}
.msg .mb details.q summary{list-style:none;cursor:pointer;width:34px;height:18px;border-radius:9px;background:var(--hover);display:grid;place-items:center;color:var(--muted);font-size:14px;line-height:1}
.msg .mb details.q summary::-webkit-details-marker{display:none}
.msg .who .to .ms{font-size:16px}
.msg .hdrs{font-size:12.5px;color:var(--muted);display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;margin-top:8px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;max-width:560px}
.msg .hdrs span:nth-child(odd){color:var(--faint)}
.att{position:relative}
.att .dl{position:absolute;top:6px;inset-inline-end:6px;background:var(--surface);border-radius:50%;width:30px;height:30px;display:none;place-items:center;box-shadow:var(--shadow)}
.att:hover .dl{display:grid}
.att .th .spin{width:20px;height:20px;border-width:2px}
.pv .pvb iframe{width:min(900px,100%);height:calc(100vh - 110px);border:0;border-radius:6px;background:#fff}
.pv .pvb .nopv{display:grid;place-items:center;gap:12px;padding:80px 0;color:#ccc;text-align:center}
.pv .pvb .nopv .ms{font-size:56px}
.catts{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 8px}
.catt{display:inline-flex;align-items:center;gap:6px;height:32px;padding-inline:10px 2px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;max-width:260px;background:var(--surface-2);position:relative;overflow:hidden}
.catt bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.catt small{color:var(--muted);white-space:nowrap}
.catt .ib{width:26px;height:26px}
.catt .ib .ms{font-size:16px}
.catt i{position:absolute;inset-block-end:0;inset-inline-start:0;height:2px;background:var(--primary);transition:width .2s}
#compose.drag::after{content:attr(data-drop);position:absolute;inset:44px 0 0;display:grid;place-items:center;background:color-mix(in srgb,var(--primary-soft) 88%,transparent);color:var(--primary-ink);font-weight:600;border:2px dashed var(--primary);border-radius:0 0 14px 14px;pointer-events:none}
.crow .from{flex:1;min-width:0;height:40px;border:0;outline:0;background:transparent}
.crow .saved{font-size:12px;color:var(--faint);white-space:nowrap}
.ac{max-height:300px;overflow-y:auto}
.cedit .sig{color:var(--muted)}
.sched-row .meta .ms{color:var(--info)}
.form-grid{display:flex;flex-direction:column;gap:4px}
.form-grid textarea.inp{height:auto;min-height:96px;padding-block:10px;resize:vertical;line-height:1.7}
.form-grid h3{font-size:14px;font-weight:600;margin:14px 0 6px}
/* round 1 UX fixes */
.ferr,.field>.ferr{color:var(--danger);font-size:12.5px;line-height:1.6}
/* password & security */
.secm{width:min(600px,100%)}
/* sections sit on the dialog surface, divided by a hairline (no boxes inside the box) */
.secsec{border-block-start:1px solid var(--line-2);padding-block:20px 6px}
.secm h2+.secsec{border-block-start:0;padding-block-start:4px}
.secsec h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin:0 0 12px}
.secsec h3 .ms{font-size:20px;color:var(--primary-ink)}
.secsec h3 .chip{margin-inline-start:auto}
.secsec h3 .chip:empty{display:none}
.chip.on{background:var(--ok-soft);color:var(--ok)}
.secsec .chk{margin-bottom:10px}
.secnote,.sectxt{font-size:12.5px;line-height:1.8;margin:0 0 12px}
.sectxt{font-size:13.5px;color:var(--muted)}
.secact{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:12px}
.secact .btn.wait,.msec .btn.wait{opacity:.6;cursor:progress}
.secact .btn.wait[aria-busy]{opacity:.85}
.secact .btn .spin{width:16px;height:16px;border-width:2px;border-color:color-mix(in srgb,currentColor 30%,transparent);border-block-start-color:currentColor;flex:none}
.secsec .otp{letter-spacing:.3em;font-variant-numeric:tabular-nums;font-size:17px;text-align:center;max-width:220px}
.pwm{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:4px}
.pwm i{height:4px;border-radius:2px;background:var(--line)}
.pwm[data-s="0"] i:nth-child(-n+1),.pwm[data-s="1"] i:nth-child(-n+1){background:var(--danger)}
.pwm[data-s="2"] i:nth-child(-n+2){background:var(--warn)}
.pwm[data-s="3"] i:nth-child(-n+3),.pwm[data-s="4"] i{background:var(--ok)}
.pwlvl{font-size:12px;color:var(--muted);min-height:1em}
.pwhint{font-size:12px;line-height:1.7}
.secsteps{margin:0 0 14px;padding-inline-start:20px;font-size:13.5px;line-height:1.8;display:flex;flex-direction:column;gap:8px}
[lang="fa"] .secsteps{list-style-type:persian}
.qrwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px}
.qr{width:168px;height:168px;flex:none;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.qrkey{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;font-size:12.5px}
.qrkey code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:.04em;background:var(--hover);padding:6px 10px;border-radius:8px;overflow-wrap:anywhere;user-select:all}
.btn.show-touch{display:none}
@media (pointer:coarse){.btn.show-touch{display:inline-flex}}
.msec{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:12.5px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line-2)}
.msec .ferr{flex-basis:100%}
.inp[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.crow input.bad{color:var(--danger);text-decoration:underline wavy var(--danger);text-underline-offset:4px}
.nav.show-m,.btn.show-m{display:none}
.mtool .ib.m-more{display:none}
/* toolbars follow their own width, not the window's: in a narrow work surface (tablet, or a phone with a
   four-digit counter) the secondary actions fold into «بیشتر», then the icon buttons narrow a little */
.mtool{container-type:inline-size}
@container (max-width:500px){.mtool .m-ov{display:none}.mtool .ib.m-more{display:inline-grid}.mtool>.ib{flex:none}.mtool .pg.num{flex:none;padding-inline:4px}}
@container (max-width:400px){.mtool>.ib{width:36px}}
/* Android single-purpose app (body.single-app[data-app]): no launcher, and no entries of the other apps */
body.single-app #appsBtn,body.single-app #rail .rsep,body.single-app #rail .soon,
body.single-app[data-app="mail"] #rail [data-app]:not([data-app="mail"]),
body.single-app[data-app="calendar"] #rail [data-app]:not([data-app="calendar"]){display:none}
.msg .who .dchip{background:var(--danger-soft);color:var(--danger);height:20px;font-size:12px;vertical-align:1px}
.msg .when .btn{height:30px;padding-inline:10px 12px;font-size:12.5px}
.fab{display:none}
.vacbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;margin:10px 16px 2px;border-radius:12px;background:var(--gold-soft);color:var(--gold-ink);font-size:13.5px}
.vacbar .vt{flex:1;min-width:160px}
.vacbar .btn{height:30px;padding-inline:12px;font-size:13px}
.vacbar .btn.line{border-color:currentColor;color:inherit}
.vdates{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.qops-in{padding:14px 16px;width:min(440px,calc(100vw - 32px))}
.opch{display:flex;flex-wrap:wrap;gap:6px}
.opch .chip{height:28px;padding-inline:10px;cursor:pointer;font-family:var(--font-en);font-size:12.5px;color:var(--text)}
.opch .chip:hover{background:var(--press)}
.empty .btn{margin-top:8px}
.offline{position:fixed;top:0;inset-inline:0;z-index:43;border-radius:0;justify-content:center;align-items:center;padding:6px 16px;padding-top:calc(6px + env(safe-area-inset-top,0px));font-size:13px;line-height:1.5}
/* the app moves down by the strip's height (--offh, measured in app.js), so nothing under it is covered */
body:has(>.offline) #app{box-sizing:border-box;padding-top:var(--offh,36px)}

/* sign-in */
#login{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:var(--bg);z-index:80}
#login[hidden]{display:none}
.lg-art{position:relative;background:#2c3a2f url(img/login.jpg) center 40%/cover no-repeat;margin:16px;margin-inline-end:0;border-radius:20px;overflow:hidden}
.lg-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,38,28,.72),rgba(12,38,28,0) 50%)}
.lg-art .cap{position:absolute;inset-inline:36px;bottom:32px;color:#F5F1E9;z-index:1;font-size:14.5px;line-height:1.8;max-width:420px}
.lg-art .cap b{display:block;font-size:22px;font-weight:700;margin-bottom:4px;color:#fff}
.lg-art .cap span{color:#E3CA92;font-family:var(--font-en);font-size:12.5px;letter-spacing:.04em}
.lg-pane{display:grid;place-items:center;padding:32px 24px;overflow:auto}
.lg-card{width:min(380px,100%);display:flex;flex-direction:column;gap:16px}
.lg-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.lg-brand .logo{width:30px;height:46px;background:var(--logo) center/contain no-repeat}
.lg-brand .wm{font-size:22px}
.lg-card h1{font-size:26px;font-weight:700;margin:0;line-height:1.4;color:var(--text)}
.lg-card .sub{margin:-8px 0 4px;color:var(--muted)}
/* password field with a show/hide button on its right edge (the field is left-to-right) */
.pwbox{position:relative;display:block}
.pwbox .inp{padding-right:44px}
.pwbox .ib.sm{position:absolute;right:4px;top:4px}
.lg-card .field{margin:0}
.inp{box-sizing:border-box}
.lg-card .inp{height:48px;font-size:15px;border-radius:12px}
.lg-card .inp[dir="ltr"]{text-align:left}
.lg-card .btn.primary{height:48px;justify-content:center;font-size:15px;border-radius:12px;margin-top:4px}
.lg-card .btn.primary .spin{width:18px;height:18px;border-width:2px;border-color:color-mix(in srgb,var(--on-primary) 30%,transparent);border-top-color:var(--on-primary)}
.lg-card .otp{letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;font-size:20px}
.chk{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--muted);cursor:pointer}
.chk input{accent-color:var(--primary);width:16px;height:16px;margin:0}
.lg-foot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:12px;color:var(--faint);margin-top:12px;padding-top:16px;border-top:1px solid var(--line-2)}
.lg-foot .seg button{height:26px;font-size:12px;padding-inline:10px}
.lg-foot a{color:var(--muted)}
.lg-card .ferr{margin-top:2px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .appn{display:none}
  .tz{display:none}
}
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  #app{grid-template-rows:60px 1fr 64px}
  #top{padding-inline:max(8px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));gap:4px}
  .brand .wm,.brand .appn{display:none}
  .brand{padding-inline-end:0}
  .search{height:42px}
  .search kbd{display:none}
  .tact .hide-m{display:none}
  .body{grid-template-columns:minmax(0,1fr)!important;grid-row:2}
  #rail{position:fixed;inset:auto 0 0 0;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);flex-direction:row;justify-content:space-around;background:var(--surface);border-top:1px solid var(--line-2);z-index:30;padding-block:6px 0}
  #rail .rsep,#rail .soon{display:none}
  #side{position:fixed;inset-block:0;inset-inline-start:0;width:min(300px,86vw);background:var(--bg);z-index:45;transform:translateX(105%);transition:transform .28s var(--ease);padding-top:calc(12px + env(safe-area-inset-top,0px));visibility:visible!important;box-shadow:var(--shadow-lg)}
  [dir="ltr"] #side{transform:translateX(-105%)}
  body.drawer #side{transform:none}
  body.drawer .scrim-d{display:block;position:fixed;inset:0;background:var(--scrim);z-index:44}
  #main{margin:0;border-radius:0;box-shadow:none;padding-bottom:64px}
  .row{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"av from meta" "av line star";height:auto;padding-block:10px;padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px));gap:2px 12px;background:var(--surface)}
  .row .cb{display:none}
  .row .av{grid-area:av;--s:40px;align-self:start}
  .row .from{grid-area:from;padding:0}
  .row .line{grid-area:line;flex-direction:column;align-items:stretch;gap:0}
  .row .s{max-width:none}
  .row .line>.lb,.row .line>.chip,.row .line>.warnic{align-self:flex-start}
  .row .meta{grid-area:meta}
  .row .star{grid-area:star;justify-self:end;width:28px;height:28px}
  .row .hov{display:none!important}
  .msg .mb,.atts{padding-inline-start:0}
  .rhead{padding-inline:16px}
  .rbanners,[dir="rtl"] .rbanners{padding-inline:16px}
  .msg{padding-inline:16px}
  .replies,.ractions{padding-inline:16px}
  #compose,#compose.max{inset:0;width:auto;height:auto;max-height:none;border-radius:0;z-index:55;padding-top:env(safe-area-inset-top,0px)}
  /* full screen already: no minimise / full-screen buttons */
  #compose .chead [data-cm="min"],#compose .chead [data-cm="max"]{display:none}
  .sets{width:calc(100vw - 18px)}
  /* phones: the sign-in form takes the full width; the photo is only for wide screens */
  #login{grid-template-columns:minmax(0,1fr)}
  .lg-art{display:none}
  .lg-pane{padding:max(40px,env(safe-area-inset-top,0px)) 16px 24px;place-items:start center}
  /* phones: bulk actions keep the main ones; read, unread and move go into «بیشتر»; the pager hides while rows are selected */
  .mtool .m-ov{display:none}
  .mtool .ib.m-more{display:inline-grid}
  .mtool.selm .pg.num,.mtool.selm #pgPrev,.mtool.selm #pgNext{display:none}
  /* phones, reading: spam, unread, move and star go into «بیشتر»; newer/older and the whole counter always stay */
  .mtool>.ib{flex:none}
  .mtool .pg.num{flex:none;padding-inline:4px}
  .row:hover .meta,.row:focus-within .meta{visibility:visible}
  .row .sep{display:none}
  /* phones: settings in the drawer and account menu, a floating compose button, selection by long press or avatar */
  .nav.show-m{display:flex}
  .btn.show-m{display:inline-flex}
  .fab{display:inline-flex;align-items:center;gap:10px;position:fixed;z-index:31;inset-inline-end:max(16px,env(safe-area-inset-right,0px));bottom:calc(64px + 16px + env(safe-area-inset-bottom,0px));height:56px;padding-inline:18px 22px;border-radius:16px;background:var(--primary-soft);color:var(--primary-ink);box-shadow:var(--shadow-lg);font-weight:600;font-size:14.5px}
  .fab .ms{font-size:22px}
  /* phones: a bottom bar needs at least two destinations; with one (mail alone, or a single-purpose Android app) it goes and its space returns to the content */
  body.single-app #rail,#rail:not(:has([data-app] ~ [data-app])){display:none}
  body.single-app #app,body:not(:has(#rail [data-app] ~ [data-app])) #app{grid-template-rows:60px 1fr}
  body.single-app #main,body:not(:has(#rail [data-app] ~ [data-app])) #main{padding-bottom:env(safe-area-inset-bottom,0px)}
  body.single-app .fab,body:not(:has(#rail [data-app] ~ [data-app])) .fab{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  /* the last row can scroll clear of the floating compose button */
  .list{padding-bottom:88px}
  .row.sel .av{position:relative;background:var(--primary)!important;color:transparent}
  .row.sel .av::after{content:"check";position:absolute;inset:0;display:grid;place-items:center;font-family:"Material Symbols Rounded";font-feature-settings:"liga";font-size:24px;color:var(--on-primary)}
  /* touch targets of at least 44px, icons unchanged */
  .row .star{position:relative}
  .row .star::after{content:"";position:absolute;inset:-8px}
  .chead .ib{width:40px;height:40px}
  .ni{height:44px}
  .shead .ib.sm{position:relative}
  .shead .ib.sm::after{content:"";position:absolute;inset:-6px}
  /* message header: time and actions on their own row; name and address on one line each */
  .msg .mh{grid-template-columns:40px minmax(0,1fr);gap:4px 12px}
  .msg .when{grid-column:2;flex-wrap:wrap}
  .msg .who>div:first-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0}
  .msg .who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .msg .who .em{flex-basis:100%;order:3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  [dir="rtl"] .msg .who .em{text-align:right}
  .trust{white-space:nowrap}
  .rbanners{gap:6px}
  .rbanners .banner{padding:8px 12px;gap:8px;font-size:12.5px;line-height:1.55}
  .rbanners .banner .ms{font-size:18px}
  .rbanners .banner .acts{margin-top:6px;gap:6px}
  .rbanners .banner .btn{height:30px;padding-inline:12px;font-size:12.5px}
  .vdates{grid-template-columns:1fr}
}
/* touch keyboards have their own half-space key */
@media (pointer:coarse){.hintline{display:none}}
/* reduced motion: no slides or scaling, short fades instead; loading feedback (spinner, busy bar) keeps moving, slower */
/* ---------- Ganjeh (files) ---------- */
.ghead{position:relative;flex:none}
.gtool{display:flex;align-items:center;gap:6px;min-height:60px;padding:8px 12px 4px;padding-inline-start:20px;flex:none;box-sizing:border-box}
/* the selection bar lies over the toolbar, so selecting never moves the list under the pointer */
#gsb{position:absolute;inset:0;z-index:4;display:flex;align-items:center;padding:4px 12px 0;background:var(--surface)}
#gsb:empty,body.gdragging #gsb{display:none}
.chip.gro{flex:none;margin-inline-start:6px;height:24px}
#gNew[disabled],.gfab[disabled]{opacity:.5;cursor:default;box-shadow:none}
.gtool .sp{flex:1}
.gct{font-size:20px;font-weight:500;margin:0;line-height:1.4;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 2px}
.gcr{display:flex;align-items:center;gap:2px;min-width:0;flex-wrap:nowrap;overflow:hidden}
.gcr button{font-size:20px;padding:4px 10px;border-radius:999px;white-space:nowrap;color:var(--muted);max-width:240px;overflow:hidden;text-overflow:ellipsis;flex:none}
.gcr button:hover{background:var(--hover);color:var(--text)}
.gcr .gct{padding-inline:10px;flex:0 1 auto}
.gcr .sep{color:var(--faint);font-size:18px}
.gcr.sm button{font-size:14px;padding:4px 8px;max-width:180px}
.gcr button.dropon,.gr.dropon,.gfold.dropon{background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--primary);color:var(--primary-ink)}
.gvseg button{width:40px;height:32px;display:grid;place-items:center;padding:0}
.gvseg .ms{font-size:18px}
.gsortb,.gempty{height:36px;padding-inline:10px 12px;font-size:13px}
.gsortb[hidden]{display:none!important}
.gsortb .ms:last-child{font-size:16px}
.gnote{display:flex;gap:8px;align-items:center;margin:0 20px 8px;padding:8px 12px;border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:12.5px;flex:none}
.gnote .ms{font-size:18px}
.gselbar{display:flex;align-items:center;gap:4px;flex:1;min-width:0;padding:4px 8px;border-radius:999px;background:var(--sel);color:var(--primary-ink);min-height:44px;box-sizing:border-box}
.gselbar .btn.sm{height:34px}
.gselbar .gdanger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.gselbar b{font-weight:600;font-size:14px;padding-inline:4px;white-space:nowrap}
.gselbar .sp{flex:1}
.gselbar .ib{color:var(--primary-ink)}
.gselbar .ib[disabled]{opacity:.38;cursor:default}
.gwrap{flex:1;display:flex;min-height:0}
.gmain{flex:1;overflow-y:auto;padding:0 12px 96px;min-width:0;position:relative}
.gmain.drop::after{content:attr(data-drop);position:absolute;inset:8px;border:2px dashed var(--primary);border-radius:16px;background:color-mix(in srgb,var(--primary-soft) 70%,transparent);display:grid;place-items:center;font-size:17px;font-weight:600;color:var(--primary-ink);z-index:5;pointer-events:none;padding:24px;text-align:center}
.gmain.drop.nodrop::after{border-color:var(--outline);color:var(--muted);background:color-mix(in srgb,var(--surface-2) 85%,transparent)}
.gempty-st{gap:10px;max-width:460px;margin:0 auto;line-height:1.8}
.gempty-st>.ms{font-size:56px;color:var(--faint)}
.gempty-st b{font-size:16px;color:var(--text)}
.gacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
/* list: columns drop out as the list gets narrower (gFit in drive.js): size, then date, then location; then two-line rows */
.glist{--gcols:40px minmax(0,1fr) 150px 120px 40px;display:flex;flex-direction:column}
.glist.c2{--gcols:40px minmax(0,1fr) minmax(120px,190px) 150px 120px 40px}
.glist.ns{--gcols:40px minmax(0,1fr) 140px 40px}
.glist.c2.ns{--gcols:40px minmax(0,1fr) minmax(120px,170px) 140px 40px}
.glist.c2.ns.nm{--gcols:40px minmax(0,1fr) minmax(120px,190px) 40px}
.glist.ns .gcs,.glist.nm .gcm{display:none}
.glist.g2l,.glist.c2.ns.nm.g2l{--gcols:40px minmax(0,1fr) 40px}
.glist.g2l .hm{display:none}
.glist.g2l .gr{height:60px}
.glist.g2l .grh{height:40px}
.glist.g2l .gnm{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:0}
.glist.g2l .gnm>.ms:first-child{grid-row:1/3;align-self:center}
.glist.g2l .gnm .gsub{display:block;grid-column:2;font-size:12px;color:var(--muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grh,.gr{display:grid;grid-template-columns:var(--gcols);align-items:center;gap:0 8px;padding-inline:4px 8px}
.grh{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line);height:44px}
.gh{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted);text-align:start;justify-self:start;padding:6px 8px;border-radius:8px;margin-inline-start:-8px;white-space:nowrap}
button.gh:hover{background:var(--hover);color:var(--text)}
.gh.on{color:var(--primary-ink)}
.gh .ms{font-size:16px}
.gr{height:48px;border-bottom:1px solid var(--line-2);cursor:default;border-radius:0;position:relative;user-select:none}
.gr:hover{background:var(--surface-2)}
.gr.sel{background:var(--sel)}
.gr:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:8px}
.gr .cb,.grh .cb{width:36px;height:36px}
.gnm{display:flex;align-items:center;gap:12px;min-width:0;font-weight:500}
.gnm bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gnt{display:flex;align-items:center;gap:6px;min-width:0}
.gnm mark,.gfn mark,.gfold mark{background:var(--gold-soft);color:var(--gold-ink);border-radius:3px;padding:0 1px}
.gnm .ms{font-size:22px}
.gnm .gsub{display:none}
.gsh{color:var(--faint);font-size:16px!important}
.gmuted{color:var(--muted);font-size:13px;white-space:nowrap}
.gc2{min-width:0;color:var(--muted);font-size:13px}
.gloc,.gown{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0}
.gloc bdi,.gown bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmore{opacity:0;color:var(--muted)}
.gr:hover .gmore,.gr.sel .gmore,.gr:focus-within .gmore,.gfold:hover .gmore,.gfold.sel .gmore,.gfold:focus-within .gmore,.gfc:hover .gmore,.gfc.sel .gmore,.gfc:focus-within .gmore,.gmore:focus-visible{opacity:1}
@media (pointer:coarse){.gmore{opacity:1}}
.gr.dragging,.gfold.dragging,.gfc.dragging{opacity:.45}
.gdrag{position:fixed;top:-100px;inset-inline-start:0;background:var(--primary);color:var(--on-primary);padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* grid */
.gsec{font-size:14px;font-weight:600;margin:12px 8px 10px;color:var(--text)}
.gfold-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding-inline:8px}
.gfold{display:flex;align-items:center;gap:12px;height:52px;padding-inline:14px 4px;border-radius:12px;background:var(--surface-2);min-width:0;border:1px solid transparent;user-select:none}
.gfold:hover{background:var(--hover)}
.gfold.sel{background:var(--sel);border-color:var(--primary)}
.gfold bdi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.gfile-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding-inline:8px}
.gfc{border-radius:12px;background:var(--surface-2);padding:8px;display:flex;flex-direction:column;gap:6px;border:1px solid transparent;min-width:0;user-select:none}
.gfc:hover{background:var(--hover)}
.gfc.sel{background:var(--sel);border-color:var(--primary)}
.gfold:focus-visible,.gfc:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.gth{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--surface);display:grid;place-items:center}
.gth.img,.gbig.img{background:var(--hover)}
.gth img,.gbig img{width:100%;height:100%;object-fit:cover;display:block}
.gfn{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500;padding-inline:4px 0}
.gfn bdi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfs{font-size:12px;color:var(--muted);padding-inline:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* details */
.gdet{width:320px;flex:none;border-inline-start:1px solid var(--line-2);overflow-y:auto;padding:12px 16px 24px;box-sizing:border-box}
.gdet.inmodal{width:auto;border:0;padding:0;overflow:visible}
.gdh{display:flex;align-items:center;gap:10px;min-height:44px}
.gdh h2{flex:1;font-size:15px;font-weight:600;margin:0;min-width:0;overflow-wrap:anywhere;line-height:1.6}
.gbig{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center;margin:8px 0 4px}
.gdet h3{font-size:13px;font-weight:600;margin:18px 0 8px;color:var(--muted)}
.gdet dl{display:grid;grid-template-columns:1fr;margin:0}
.gdet dt{font-size:12px;color:var(--muted);margin-top:10px}
.gdet dd{margin:0;font-size:13.5px;overflow-wrap:anywhere}
.gacc{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;font-size:13px;line-height:1.7}
.gacc>.ms{font-size:18px;color:var(--muted);margin-top:2px}
.gacc small{display:block;color:var(--muted)}
.gppl{list-style:none;margin:2px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.gppl li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.gppl li bdi{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gppl li small{margin-inline-start:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.gdeh{font-size:15px;font-weight:600;margin:0;color:var(--text)}
.gnt2{overflow-wrap:anywhere}
.gmorebar{display:flex;justify-content:center;padding:16px 0 8px}
.btn.sm{height:32px;padding-inline:12px;font-size:13px}
.glink{display:inline-flex;align-items:center;gap:6px;color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px;text-align:start}
.gstore{margin:20px 16px 0;font-size:12px;color:var(--muted)}
.gstore>div:first-child{display:flex;align-items:center;gap:6px;min-width:0}
.gstore .gst{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gstore .ms{font-size:18px}
.gstore .bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
.gstore .bar i{display:block;height:100%;background:var(--primary)}
.gstore .bar i.hi{background:var(--danger)}
.gfab{display:none}
/* move dialog */
.modal.gmove{width:min(520px,100%)}
.modal.gmove h2 bdi,.modal.gshare h2 bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.modal.gmove h2,.modal.gshare h2{display:flex;align-items:center;gap:8px}
.gmh{display:flex;align-items:center;gap:4px;min-height:40px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.gml{display:flex;flex-direction:column;height:min(44vh,320px);overflow-y:auto;margin-inline:-8px}
.gmul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gmul .gmi{width:100%;box-sizing:border-box}
.gmnew{display:flex;align-items:flex-start;gap:8px;padding:6px 12px}
.gmnew>.ms{margin-top:9px}
.gmnew .field{flex:1;margin:0;min-width:0}
.gmnew .btn,.gmnew .ib{margin-top:2px}
.gmcur{font-size:12.5px;margin-top:8px;min-height:1.8em;line-height:1.8}
.gmi{display:flex;align-items:center;gap:12px;height:44px;padding-inline:12px;border-radius:10px;text-align:start;font-weight:500;min-width:0}
.gmi bdi{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmi:hover:not([disabled]){background:var(--hover)}
.gmi[disabled]{opacity:.45;cursor:default}
.gmi .chev{color:var(--faint);font-size:18px}
.gmnone{color:var(--muted);padding:32px 12px;text-align:center;font-size:13px}
.gconf{margin:0 0 8px;line-height:1.8;font-size:14.5px}
/* share dialog */
.modal.gshare{width:min(560px,100%)}
.gss{margin:-4px 0 14px;font-size:13px;line-height:1.8}
.gsadd{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;position:relative}
.gsadd .field{margin:0}
.gsadd select{width:auto}
.gsac{position:absolute;inset-inline:0;top:46px;z-index:5;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-lg);border:1px solid var(--line-2)}
.gsac .mi{display:flex;gap:10px;align-items:center;width:100%;text-align:start}
.gsac .mi small{display:block;color:var(--muted);font-size:12px}
.gsac .mi.on{background:var(--hover)}
#gsErr{margin-top:6px}
.gsh3{font-size:14px;font-weight:600;margin:18px 0 6px}
.gsl{display:flex;flex-direction:column}
.gsr{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0}
.gsr>div{min-width:0}
.gsr bdi{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsr small{display:block;color:var(--muted);font-size:12.5px;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsr select{border:0;outline:0;color:var(--text);font-size:13px;padding:6px 8px;border-radius:8px;background:var(--surface);cursor:pointer}
.gsr select:hover,.gsr select:focus-visible{background:var(--hover)}
.gsr select:focus-visible{outline:2px solid var(--primary)}
.gsnone{font-size:13px;margin:4px 0 0}
/* upload panel */
.gup{position:fixed;z-index:52;inset-block-end:calc(24px + env(safe-area-inset-bottom,0px));inset-inline-end:24px;width:min(380px,calc(100vw - 32px));background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);border:1px solid var(--line-2);overflow:hidden;animation:rise .2s var(--ease-out)}
.gup header{display:flex;align-items:center;gap:8px;padding:10px 8px;padding-inline-start:16px;background:var(--surface-2);min-height:48px;box-sizing:border-box}
.gup header b{font-size:14px;font-weight:600}
.gup header span{font-size:12px;color:var(--muted);white-space:nowrap}
.gup header .sp{flex:1}
.gup ul{list-style:none;margin:0;padding:4px 0;max-height:min(300px,40vh);overflow-y:auto}
.gup li{display:flex;align-items:center;gap:12px;padding:6px 8px;padding-inline-start:16px;min-height:44px}
.gup .un{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.gup .un>bdi,.gup .un>small{max-width:100%}
.gup .un .ubar{align-self:stretch}
.gup .un bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.gup .un small{font-size:12px;color:var(--muted)}
.gup li.err .un small{color:var(--danger)}
.gup .ubar{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.gup .ubar i{display:block;height:100%;background:var(--primary);transition:width .2s linear}
.gup .ms.ok{color:var(--ok)}
.gup .ms.bad{color:var(--danger);padding:6px}
.gup .ms.ok{padding:6px}
.gup ul[hidden]{display:none}
.gup .ushow{text-align:start;border-radius:8px;padding:2px 6px;margin-inline:-6px;cursor:pointer}
.gup .ushow:hover{background:var(--hover)}
.gup .ushow:hover bdi{text-decoration:underline;text-underline-offset:3px}
/* the panel steps aside while a file is previewed */
body:has(>.pv) .gup{display:none}
/* preview */
.gpv .pvh{gap:8px}
.gpv .pvh .fname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.gpv .pvsz{color:#bbb;font-size:12.5px;white-space:nowrap}
.gpv .pvb{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:0 64px 24px}
.gpv .pvc{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-height:0}
.gpv .pvc img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;background:repeating-conic-gradient(#2b2f2d 0 25%,#353a37 0 50%) 0 0/16px 16px}
.gpv .pvc video{max-width:100%;max-height:100%;border-radius:6px;background:#000}
.gpv .pvc iframe{width:min(960px,100%);height:100%;border:0;border-radius:6px;background:#fff}
.gpv .pvmedia{display:flex;flex-direction:column;align-items:center;gap:24px}
.gpv .pvtext.prose{font-family:var(--font);font-size:14px}
.gpv .pvtext{width:min(960px,100%);max-height:100%;overflow:auto;margin:0;background:var(--paper,#fff);color:var(--paper-ink,#22262A);padding:24px 28px;border-radius:6px;font:13px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;unicode-bidi:plaintext;box-sizing:border-box}
.gpv .pvnav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.08);color:#eee;z-index:2}
.gpv .pvnav:hover:not([disabled]){background:rgba(255,255,255,.18)}
.gpv .pvnav[disabled]{opacity:.25;cursor:default}
.gpv .pvnav.prev{inset-inline-start:8px}
.gpv .pvnav.next{inset-inline-end:8px}
.gpv .nopv{color:#ccc}
.gpv .nopv .btn.tonal{background:#D9E8DF;color:#0F3D2E}
.gpv .nopvb{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pv .pvb .nopv .btn .ms{font-size:20px}
.gpv .pvc .pvpdf{align-self:stretch;width:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 0 16px;box-sizing:border-box;-webkit-overflow-scrolling:touch}
.gpv .pvc .pvpdf img{width:calc(min(960px,100%) * var(--pz,1));max-width:100%;max-height:none;height:auto;object-fit:initial;background:#fff;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.4);flex:none}
/* touch zoom (pinchZoom in core.js): pages and images grow past the screen and pan; ltr keeps the scroll maths simple */
.gpv .pvc .pvpdf{direction:ltr}
.gpv .pvc .pvpdf.zoomed{align-items:flex-start}
.gpv .pvc .pvpdf.zoomed img{max-width:none;margin-inline:auto}
.pvzoom{width:100%;height:100%;overflow:auto;display:flex;direction:ltr}
.pvzoom img{margin:auto;flex:none}
.spin.sm{width:16px;height:16px;border-width:2px}
@media (max-width:1100px){.gdet:not(.inmodal){display:none}}
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  .gtool{padding:6px 8px;padding-inline-start:12px;min-height:52px;gap:2px}
  .gct,.gcr button{font-size:17px}
  /* the folder you are in keeps its name; the parent crumbs give up their room first */
  .gcr button{max-width:120px;padding-inline:6px;flex:0 6 auto;min-width:2.6em}
  .gcr .gct{padding-inline:6px;flex-shrink:0;max-width:65%}
  .gvseg button{width:40px;height:36px}
  .gsortb .gsl1,.gsortb .ms:last-child{display:none}
  .gsortb,.gempty{width:40px;padding:0;justify-content:center}
  .gempty span:last-child{display:none}
  .gmain{padding:0 4px 96px}
  .gfold-g{grid-template-columns:minmax(0,1fr)}
  .gfile-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gfold,.gfc{padding-inline-end:0}
  .gmore{width:40px!important;height:40px!important}
  #gsb{padding:2px 8px 0}
  .gfab{display:grid;place-items:center;position:fixed;inset-block-end:calc(76px + env(safe-area-inset-bottom,0px));inset-inline-end:16px;width:56px;height:56px;border-radius:16px;background:var(--primary-soft);color:var(--primary-ink);box-shadow:var(--shadow-lg);z-index:31}
  .gfab .ms{font-size:26px}
  /* above the + button */
  .gup{inset-inline:8px;width:auto;inset-block-end:calc(144px + env(safe-area-inset-bottom,0px))}
  .gpv .pvb{padding:0 0 12px}
  .gpv{background:#121614}
  .gpv .pvnav{top:auto;bottom:16px;transform:none;background:rgba(0,0,0,.45)}
  .gpv .pvsz{display:none}
  .gpv .pvtext{padding:16px;border-radius:0}
  .gsadd{grid-template-columns:minmax(0,1fr) auto}
  .gsadd .field{grid-column:1/-1}
  .gsadd #gsAdd{justify-self:stretch}
  .modal.gmove,.modal.gshare{width:100%}
  .gml{max-height:50vh}
  .gpv .hide-m,.gmove .hide-m,.gshare .hide-m{display:none}
}
body.single-app .gfab{inset-block-end:calc(16px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px),(max-height:500px) and (pointer:coarse){body.single-app .gup{inset-block-end:calc(84px + env(safe-area-inset-bottom,0px))}}
@media (max-width:760px),(max-height:500px) and (pointer:coarse){
  /* plain dialogs keep their margins: the padding is inside the width */
  .modal{box-sizing:border-box}
  /* a long toast keeps 16px from both edges of the screen */
  #toast{inset-inline-start:calc(16px + env(safe-area-inset-left,0px))}
  /* a toast sits above the floating «نوشتن» / + button instead of over it */
  body:has(.fab,.cfab) #toast{inset-block-end:calc(148px + env(safe-area-inset-bottom,0px))}
  body.single-app:has(.fab,.gfab) #toast{inset-block-end:calc(84px + env(safe-area-inset-bottom,0px))}
}
/* touch: small icon buttons get a 44px touch area around their 32px circle */
@media (pointer:coarse){
  .ib.sm{position:relative}
  .ib.sm::after{content:"";position:absolute;inset:-6px}
  /* Mail's refresh and newer/older (36–40 × 40): 44px tall; only 1px wider, as the two pager buttons are 2px apart */
  .mtool>.ib{position:relative}
  .mtool>.ib::after{content:"";position:absolute;inset:-2px -1px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
  .pop,.modal,#compose,#toast,.scrim,.pv{animation:fade .15s linear!important}
  .spin{animation-duration:1.6s!important}
  #main.busy::before{animation-duration:2.4s!important}
}

/* sign-in with a mobile number (app.js phoneLogin) */
#lgAlt:empty{display:none}
.lg-phrow{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:-8px}
.lg-phrow .btn{padding-inline:10px}
.lg-phrow .btn[disabled]{opacity:.6}