/* Scribly signed-in app shell (public/app.html, also the Windows app's main window).
   Layout, sizes and colours follow product-studio/artifacts/jalase/ux-mockup.html ("MOCK"):
   .shell/.side/.nav/.credit-card/.me-card/.main-head/.main-body/.mrow/.badge/.toast.
   Aurora, scrollbars and glass come from Circly v2 (CIRCLY: Product Roadmap/public/css/ui2.css, ui2-shell.css).
   Tokens (--d-*, --r-*, --dur-*) come from css/tokens.css under data-ui="2". No external origins. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; block-size: 100%; }
/* MOCK body */
body { background: var(--d-main); color: var(--d-text); font: 400 14px/1.6 Vazirmatn, Tahoma, sans-serif; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; font-weight: 700; } h1 { font-size: 20px; } h2 { font-size: 15px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--d-ring); outline-offset: 2px; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dim { color: var(--d-dim); } .small { font-size: 12px; } .xs { font-size: 11px; } .grow { flex: 1; }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* MOCK scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(112, 146, 194, .28) transparent; }
*:hover { scrollbar-color: rgba(112, 146, 194, .45) transparent; }
::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(112, 146, 194, .24); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

/* CIRCLY ui2.css: aurora backdrop (three blurred blobs) */
@keyframes ui2-drift-a { to { transform: translate(-8vw, 6vw) scale(1.1); } }
@keyframes ui2-drift-b { to { transform: translate(10vw, -6vw) scale(1.15); } }
:root[data-ui="2"] .ui-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
:root[data-ui="2"] .ui-aurora i { position: absolute; border-radius: 50%; filter: blur(var(--d-aurora-blur)); }
:root[data-ui="2"] .ui-aurora i:nth-child(1) { inline-size: 60vw; block-size: 60vw; inset-inline-end: -15vw; inset-block-start: -25vw; background: var(--d-aurora-a); animation: ui2-drift-a 26s ease-in-out infinite alternate; }
:root[data-ui="2"] .ui-aurora i:nth-child(2) { inline-size: 45vw; block-size: 45vw; inset-inline-start: -10vw; inset-block-end: -20vw; background: var(--d-aurora-b); animation: ui2-drift-b 32s ease-in-out infinite alternate; }
:root[data-ui="2"] .ui-aurora i:nth-child(3) { inline-size: 35vw; block-size: 35vw; inset-inline-end: 35%; inset-block-start: 30%; background: var(--d-aurora-c); animation: ui2-drift-a 40s ease-in-out infinite alternate-reverse; }

/* MOCK .glass / CIRCLY .ui-glass: panel fill, blur, hairline, radius, shadow */
.glass { background: var(--d-glass-solid); border: 1px solid var(--d-glass-line); border-radius: var(--r-16); box-shadow: var(--d-shadow-panel); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass { background: var(--d-glass); -webkit-backdrop-filter: blur(var(--d-glass-blur)) saturate(var(--d-glass-saturate)); backdrop-filter: blur(var(--d-glass-blur)) saturate(var(--d-glass-saturate)); }
}

/* MOCK .shell: the workspace rail (Circly's server rail), the sidebar, the main panel */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 64px 248px minmax(0, 1fr); gap: 10px; padding: 10px; block-size: 100dvh; }
.side { display: flex; flex-direction: column; overflow: hidden; min-block-size: 0; }
.side-head { padding: 14px 14px 10px; border-block-end: 1px solid var(--d-glass-line); display: flex; flex-direction: column; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--d-text); text-decoration: none; font-weight: 700; }
.brand-name { font-family: system-ui, Vazirmatn, sans-serif; direction: ltr; font-size: 15px; }
/* MOCK .logo */
.logo { inline-size: 22px; block-size: 22px; border-radius: 7px; background: linear-gradient(135deg, var(--d-accent), var(--d-accent-2)); display: grid; place-items: center; color: var(--d-accent-fg); flex: none; }
.logo svg { inline-size: 14px; block-size: 14px; }

/* The current workspace's name under the brand (CIRCLY: the server name heads the channel sidebar) */
.side-ws { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.4; }
.ws-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Workspace rail. CIRCLY: ui2-shell.css .server-rail / .rail-item / .server-icon / .rail-sep, app.css .wc-tip.
   Not a panel: it floats on the aurora. 48px round tiles that become rounded squares on hover and when current;
   the start-edge pill: 0 idle, 18px hover, 32px accent when current. ---- */
.ws-rail { display: flex; flex-direction: column; min-block-size: 0; overflow-y: auto; scrollbar-width: none; margin-inline: -6px; padding: 4px 6px; }
.ws-rail::-webkit-scrollbar { display: none; }
.rail-list { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rail-items { display: flex; flex-direction: column; align-items: center; gap: 10px; inline-size: 100%; }
.rail-item { position: relative; inline-size: 100%; display: flex; justify-content: center; }
.rail-item::before { content: ""; position: absolute; inset-inline-start: calc(50% - 34px); inset-block-start: 50%; inline-size: 4px; block-size: 0; transform: translateY(-50%); border-radius: 2px; background: var(--d-text); transition: block-size var(--dur-3); }
.rail-item:hover::before { block-size: 18px; }
.rail-item.active::before { block-size: 32px; background: var(--d-accent); }
.rail-item.add::before { display: none; }
.rail-sep { flex: none; inline-size: 28px; block-size: 2px; border-radius: 2px; background: var(--d-glass-line); }
.ws-icon { --ws-c: var(--d-av-1); inline-size: 48px; block-size: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--d-glass-line); border-radius: var(--r-circle, 50%); background: var(--ws-c); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: border-radius var(--dur-3), transform var(--dur-3), box-shadow var(--dur-3); }
.ws-icon:hover { border-radius: var(--r-16); transform: translateY(-1px); }
.ws-icon .ws-ini { line-height: 1; letter-spacing: 0; }
.ws-icon .icon { inline-size: 22px; block-size: 22px; }
.ws-icon.home { background: color-mix(in srgb, var(--ws-c) 22%, var(--d-float)); color: var(--ws-c); border-radius: var(--r-16); box-shadow: var(--d-shadow-panel); }
.rail-item.active .ws-icon { border-radius: var(--r-16); box-shadow: 0 0 0 2px var(--d-main), 0 0 0 4px var(--d-accent), 0 10px 24px -8px color-mix(in srgb, var(--d-glow, var(--d-accent)) 70%, transparent); }
/* «+»: a ghost tile, dashed until hover */
.ws-icon.add { background: var(--d-glass); color: var(--d-accent-text, var(--d-accent)); border-style: dashed; }
.ws-icon.add:hover { border-style: solid; background: color-mix(in srgb, var(--d-accent) 12%, transparent); }
.ws-icon.add .icon { inline-size: 20px; block-size: 20px; }
.ws-icon:focus-visible { outline: 2px solid var(--d-ring); outline-offset: 3px; }
/* One fixed tooltip node on <body>: an ::after in the scrolling rail would be clipped */
.ws-tip { position: fixed; z-index: 450; pointer-events: none; opacity: 0; max-inline-size: 240px; padding: 7px 10px; border-radius: 6px; background: var(--d-float); color: var(--d-text); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--d-shadow-menu); transition: opacity var(--dur-1, 80ms); }
.ws-tip.on { opacity: 1; }

/* «فضای کاری جدید» dialog */
.ws-scrim { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .5); }
.ws-dlg { inline-size: min(420px, 100%); max-block-size: calc(100dvh - 32px); overflow: auto; background: var(--d-float); box-shadow: var(--d-shadow-menu); }
.ws-dlg-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 6px; }
.ws-dlg-head h2 { flex: 1; }
.ws-dlg-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.ws-form { display: flex; flex-direction: column; gap: 10px; }
.ws-lbl { font-size: 12px; font-weight: 600; color: var(--d-dim); padding: 0; }
.ws-form input[type=text] { inline-size: 100%; padding: 8px 10px; border-radius: var(--r-3); border: 1px solid var(--d-glass-line); background: var(--d-side); }
.ws-form input[type=text]:focus { outline: none; border-color: var(--d-accent); }
.ws-colors { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ws-colors legend { margin-block-end: 6px; }
.ws-sw { --ws-c: var(--d-av-1); inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--ws-c); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1px var(--d-glass-line); }
.ws-sw input { appearance: none; -webkit-appearance: none; margin: 0; inline-size: 100%; block-size: 100%; border-radius: 50%; cursor: pointer; }
.ws-sw input:checked { box-shadow: 0 0 0 2px var(--d-float), 0 0 0 4px var(--ws-c); }
.ws-sw input:focus-visible { outline: 2px solid var(--d-ring); outline-offset: 4px; }
.ws-dlg-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-limit { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-12); background: var(--d-accent-soft); }
.ws-limit-ic { inline-size: 32px; block-size: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--d-accent); background: var(--d-float); }
.ws-limit b { display: block; margin-block-end: 2px; }

/* MOCK .nav */
.nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.nav button, .nav a { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; background: transparent; border: 0; border-radius: var(--r-3); padding: 6px 10px; color: var(--d-dim); cursor: pointer; }
.nav a { text-decoration: none; }
.nav button:hover, .nav a:hover { background: var(--d-hover); color: var(--d-text); }
.nav button.active, .nav a.active { background: var(--d-active); color: var(--d-text); }
.nav a.active .icon, .nav button.active .icon { color: var(--d-accent); }
.nav button[aria-disabled="true"] { cursor: not-allowed; color: var(--d-faint); }
.nav button[aria-disabled="true"]:hover { background: transparent; color: var(--d-faint); }
.icon { inline-size: 16px; block-size: 16px; flex: none; display: inline-grid; place-items: center; }
.icon svg { inline-size: 100%; block-size: 100%; }
.soon { margin-inline-start: auto; display: inline-flex; border-radius: var(--r-pill); padding: 1px 8px; font-size: 11px; font-weight: 500; background: var(--d-hover); color: var(--d-dim); white-space: nowrap; }
.btn .soon { margin-inline-start: 0; }

/* MOCK .credit-slot / .credit-card / .meter (real balance from /api/credits) */
.credit-slot { margin-block-start: auto; padding: 8px 10px 10px; }
.credit-card { display: flex; flex-direction: column; gap: 6px; inline-size: 100%; text-align: start; padding: 10px; border-radius: var(--r-12); background: var(--d-side); border: 1px solid var(--d-glass-line); }
.credit-card .icon { color: var(--d-accent); }
.meter { block-size: 5px; border-radius: 2px; background: var(--d-hover); overflow: hidden; }
.meter i { display: block; block-size: 100%; inline-size: 0; background: linear-gradient(90deg, var(--d-accent), var(--d-accent-2)); transition: inline-size var(--dur-2); }

/* MOCK .me-card, .av */
.me-card { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-block-start: 1px solid var(--d-glass-line); }
.av { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; font-weight: 700; font-size: 12px; color: #fff; flex: none; background: var(--d-av-1); }
.me-txt { flex: 1; min-inline-size: 0; line-height: 1.4; }
.me-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { inline-size: 28px; block-size: 28px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-3); color: var(--d-dim); cursor: pointer; }
.icon-btn:hover { background: var(--d-hover); color: var(--d-text); }
.icon-btn svg { inline-size: 16px; block-size: 16px; }
.menu { position: absolute; inset-inline-end: 10px; inset-block-end: calc(100% - 4px); min-inline-size: 150px; padding: 4px; background: var(--d-float); border: 1px solid var(--d-glass-line); border-radius: var(--r-12); box-shadow: var(--d-shadow-menu); z-index: 10; }
.menu button { display: flex; align-items: center; gap: 8px; inline-size: 100%; padding: 6px 10px; border: 0; background: transparent; border-radius: var(--r-3); cursor: pointer; text-align: start; color: var(--d-red); }
.menu button:hover { background: var(--d-hover); }

/* MOCK .main / .main-head / .main-body */
.main { overflow: auto; display: flex; flex-direction: column; min-inline-size: 0; position: relative; }
.main-head { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-block-end: 1px solid var(--d-glass-line); background: var(--d-glass-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
/* The page header (app-shell.js mountHeader): the same 64px strip on every page. Optional back crumb over the title,
   optional subtitle under it, the search box, then the page's actions at the far (left, RTL) end, all one button size. */
.page-head { block-size: 64px; flex: none; }
.ph-text { display: flex; flex-direction: column; justify-content: center; min-inline-size: 0; flex: 0 1 auto; line-height: 1.3; }
.ph-title { font-size: 18px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-sub { font-size: 12px; color: var(--d-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-back, .ph-back:visited { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; font-size: 12px; color: var(--d-dim); text-decoration: none; border-radius: var(--r-3); padding: 0 4px 0 6px; margin-inline-start: -6px; }
.ph-back:hover, .ph-back:focus-visible { color: var(--d-text); background: var(--d-hover); text-decoration: none; }
.ph-back .icon { inline-size: 14px; block-size: 14px; }
.ph-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ph-actions:empty { display: none; }
.ph-actions .btn { padding: 6px 12px; font-size: 13px; }
.ph-menu { display: none; flex: none; }
.nav-scrim { display: none; }
.main-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; flex: 1; }

/* MOCK .btn */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--d-glass-line); background: var(--d-glass-2); border-radius: var(--r-3); padding: 6px 12px; cursor: pointer; transition: background var(--dur-2); white-space: nowrap; }
.btn:hover { background: var(--d-hover); }
.btn.primary { background: linear-gradient(135deg, var(--d-accent), var(--d-accent-2)); color: var(--d-accent-fg); border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.btn:disabled, .btn[aria-busy="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--d-glass-2); }

/* MOCK .mrow list (recordings) */
.rec-section { display: flex; flex-direction: column; gap: 10px; }
.rec-section .icon { color: var(--d-accent); }
.list { overflow: hidden; }
.mrow { display: grid; grid-template-columns: 1fr 150px auto; color: inherit; text-decoration: none; align-items: center; gap: 12px; padding: 10px 14px; border-block-end: 1px solid var(--d-glass-line); }
.mrow:last-child { border-block-end: 0; }
.mrow:hover { background: var(--d-hover); }
.mtitle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmeta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-block-start: 2px; }
.mdate { font-size: 12px; color: var(--d-dim); line-height: 1.5; }
.macts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* MOCK .badge */
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-pill); padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.badge.warn { background: rgba(246, 170, 40, .14); color: var(--d-gold); }
.badge.ok { background: rgba(60, 200, 130, .14); color: var(--d-green); }
.badge.bad { background: rgba(241, 95, 95, .12); color: var(--d-red); }
.badge.run { background: var(--d-accent-soft); color: var(--d-accent); }

.mrow > .icon { color: var(--d-faint); }
.mrow > .icon svg { inline-size: 14px; block-size: 14px; }

/* Empty states */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 24px; }
.empty p { max-inline-size: 460px; }
.empty .big { inline-size: 56px; block-size: 56px; border-radius: var(--r-16); display: grid; place-items: center; background: var(--d-accent-soft); color: var(--d-accent); }
.empty .big svg { inline-size: 28px; block-size: 28px; }
.err { color: var(--d-red); font-size: 13px; background: rgba(241, 95, 95, .1); border: 1px solid rgba(241, 95, 95, .3); border-radius: var(--r-3); padding: 8px 12px; }

/* MOCK .toast */
.toast { position: fixed; inset-block-end: 18px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 60; padding: 8px 16px; background: var(--d-float); border: 1px solid var(--d-glass-line); border-radius: var(--r-pill); box-shadow: var(--d-shadow-menu); font-size: 13px; opacity: 0; transition: opacity var(--dur-3); pointer-events: none; }
.toast.on { opacity: 1; }

/* MOCK responsive: narrow windows stack the shell; nav and credits are hidden, name plate stays so «خروج» is reachable */
/* Categories block in the sidebar (MOCK .catnav) */
.catblock { display: flex; flex-direction: column; min-block-size: 0; flex: 0 1 auto; overflow: auto; padding-block-end: 4px; }
.cat-title { padding: 6px 18px 2px; }
.catnav { padding: 0 8px; display: flex; flex-direction: column; gap: 1px; }
.catnav a { display: flex; align-items: center; gap: 10px; text-align: start; border-radius: var(--r-3); padding: 5px 10px; color: var(--d-dim); text-decoration: none; }
.catnav a:hover { background: var(--d-hover); color: var(--d-text); }
.catnav a.active { background: var(--d-active); color: var(--d-text); }
.dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; background: var(--d-accent); display: inline-block; }

/* Top-bar search */
.topsearch, .topsearch-slot { position: relative; }
.search { display: flex; align-items: center; gap: 6px; background: var(--d-side); border: 1px solid var(--d-glass-line); border-radius: var(--r-3); padding: 4px 10px; inline-size: 300px; max-inline-size: 40vw; }
.search:focus-within { border-color: var(--d-accent); }
.search input { border: 0; background: transparent; padding: 2px; inline-size: 100%; outline: none; }
.search .icon { color: var(--d-faint); }
.sres { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; inline-size: 420px; max-inline-size: 90vw; max-block-size: 60vh; overflow: auto; padding: 4px; z-index: 20; background: var(--d-float); box-shadow: var(--d-shadow-menu); }
.sres-item, .sres-all { display: block; padding: 7px 10px; border-radius: var(--r-3); color: inherit; text-decoration: none; }
.sres-item:hover, .sres-item:focus-visible, .sres-all:hover { background: var(--d-hover); }
.sres-all { text-align: center; color: var(--d-accent); font-size: 12px; }
.sres-empty { padding: 10px; }
mark { background: rgba(246, 170, 40, .28); color: inherit; border-radius: 3px; padding: 0 2px; }
.msnip { font-size: 12px; color: var(--d-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msnip .sk { color: var(--d-faint); }

/* Meetings list filters */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-ctl { display: inline-flex; background: var(--d-side); border: 1px solid var(--d-glass-line); border-radius: var(--r-3); padding: 2px; }
.seg-ctl button { border: 0; background: transparent; padding: 3px 12px; border-radius: 6px; cursor: pointer; color: var(--d-dim); font-size: 12px; }
.seg-ctl button[aria-pressed="true"] { background: var(--d-active); color: var(--d-text); }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 2px 10px; background: var(--d-glass-2); border: 1px solid var(--d-glass-line); font-size: 12px; white-space: nowrap; cursor: pointer; }
.chip:hover { background: var(--d-hover); }
.chip[aria-pressed="true"] { border-color: var(--d-accent); background: var(--d-accent-soft); color: var(--d-accent); }
.qbar { gap: 10px; }
.more-row { display: flex; justify-content: center; }
.mrow-m { grid-template-columns: minmax(0, 1fr) 150px 150px auto; }
.mstat { display: flex; }
.acc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--d-dim); }
.acc .icon { inline-size: 14px; block-size: 14px; }
.cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; border-radius: var(--r-pill); padding: 0 8px; background: var(--d-hover); }
.badge.lvl { background: var(--d-hover); color: var(--d-dim); font-weight: 500; }
.toast.err { color: var(--d-red); }
.empty .btn { margin-block-start: 4px; }

/* Phones: one column. The rail and the sidebar travel together in one start-edge drawer (CIRCLY ui2-shell.css 820px:
   body.nav-open), opened by the header's menu button; the scrim and Escape close it. */
@media (max-width: 760px) {
  .search { inline-size: 100%; max-inline-size: none; }
  .topsearch, .topsearch-slot { flex: 1 1 100%; order: 5; }
  .mrow-m { grid-template-columns: 1fr; }
  body { overflow: auto; }
  .shell { grid-template-columns: 1fr; block-size: auto; min-block-size: 100dvh; padding: 8px; }
  .ws-rail { position: fixed; z-index: 310; inset-block: 0; inset-inline-start: 0; inline-size: 72px; margin: 0; padding: 12px 6px; background: color-mix(in srgb, var(--d-main) 92%, transparent); visibility: hidden; transition: transform var(--dur-4, 240ms), visibility 0s linear var(--dur-4, 240ms); }
  .side { position: fixed; z-index: 310; inset-block: 8px; inset-inline-start: 80px; inline-size: min(272px, calc(100vw - 92px)); visibility: hidden; transition: transform var(--dur-4, 240ms), visibility 0s linear var(--dur-4, 240ms); }
  [dir="rtl"] .ws-rail { transform: translateX(100%); }
  [dir="rtl"] .side { transform: translateX(calc(100% + 90px)); }
  [dir="ltr"] .ws-rail { transform: translateX(-100%); }
  [dir="ltr"] .side { transform: translateX(calc(-100% - 90px)); }
  .nav-open .ws-rail, .nav-open .side { transform: none; visibility: visible; transition-delay: 0s; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .45); }
  .nav-scrim[hidden] { display: none; }
  .ph-menu { display: grid; inline-size: 40px; block-size: 40px; }
  .main { overflow: visible; }
  .main-head { flex-wrap: wrap; }
  .page-head { block-size: auto; min-block-size: 64px; }
  .ph-actions { flex-wrap: wrap; }
  .main-body { padding: 12px; }
  .mrow { grid-template-columns: 1fr; gap: 6px; }
  .macts { justify-content: flex-start; }
}
@media print { .ws-rail, .ws-tip, .nav-scrim, .ws-scrim { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Links styled as buttons keep the shell colours (no browser blue/purple), in every state */
a.btn, a.btn:visited { color: var(--d-text); text-decoration: none; }
a.btn:hover, a.btn:focus-visible { color: var(--d-text); text-decoration: none; }
a.btn.ghost, a.btn.ghost:visited { color: var(--d-dim); }
a.btn.ghost:hover, a.btn.ghost:focus-visible { color: var(--d-text); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--d-hover); }
a.btn.primary, a.btn.primary:visited, a.btn.primary:hover, a.btn.primary:focus-visible { color: var(--d-accent-fg); }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--d-ring); outline-offset: 2px; }

/* Audio storage bar under the credits card */
.storage-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; margin-block-start: 8px; padding: 8px 10px; border-radius: var(--r-12); background: var(--d-side); border: 1px solid var(--d-glass-line); color: var(--d-dim); text-decoration: none; }
.storage-card:visited { color: var(--d-dim); }
.storage-card:hover, .storage-card:focus-visible { color: var(--d-text); background: var(--d-hover); }
.storage-card:focus-visible { outline: 2px solid var(--d-ring); outline-offset: 2px; }
.storage-card[hidden] { display: none; }
.storage-card .icon { color: var(--d-accent); }
.storage-meter { grid-column: 1 / -1; block-size: 4px; border-radius: 2px; background: var(--d-hover); overflow: hidden; }
.storage-meter i { display: block; block-size: 100%; inline-size: 0; background: var(--d-accent); transition: inline-size var(--dur-2); }
.storage-card.warn { color: var(--d-gold); }
.storage-card.warn .icon { color: var(--d-gold); }
.storage-card.warn .storage-meter i { background: var(--d-gold); }
.storage-card.full { color: var(--d-red); }
.storage-card.full .icon { color: var(--d-red); }
.storage-card.full .storage-meter i { background: var(--d-red); }

/* «Today» strip above the meetings list */
.trow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-block-end: 1px solid var(--d-glass-line); }
.trow:last-child { border-block-end: 0; }
.trow .ttime { flex: none; min-inline-size: 52px; color: var(--d-dim); font-variant-numeric: tabular-nums; }
.trow .tplat { color: var(--d-accent); }
.trow .ttitle { flex: 1; min-inline-size: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Windows app chrome (only inside the desktop app; app-shell.js adds the classes) ----
   Title bar: the main window is frameless. 36px strip at the top of <body>; it is the drag handle, every control in
   it is no-drag. RTL: mark and title at the right, the window buttons at the top-left (Windows mirrors them).
   Update banner: full-width accent bar fixed under the title bar. The shell is pushed down by --chrome-h. */
:root { --tb-h: 0px; --upd-h: 0px; --chrome-h: calc(var(--tb-h) + var(--upd-h)); }
html.desk-tb { --tb-h: 36px; }
html.desk-upd { --upd-h: 44px; }
html.desk-tb body, html.desk-upd body { padding-block-start: var(--chrome-h); }
html.desk-tb .shell, html.desk-upd .shell { block-size: calc(100dvh - var(--chrome-h)); padding-block-start: 4px; }

.desk-tb-bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1000; block-size: var(--tb-h);
  display: flex; align-items: center; gap: 8px; padding-inline-start: 12px;
  direction: ltr; /* window chrome stays Windows' default: app mark at the left, min/max/close at the right */
  background: color-mix(in srgb, var(--d-main) 88%, transparent); color: var(--d-dim);
  -webkit-app-region: drag; user-select: none; -webkit-user-select: none;
}
.desk-tb-bar button, .desk-tb-bar a, .desk-tb-bar input, .desk-tb-bar select, .desk-tb-bar textarea, .desk-tb-ctl { -webkit-app-region: no-drag; }
.desk-tb-mark { inline-size: 18px; block-size: 18px; border-radius: 6px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--d-accent), var(--d-accent-2)); color: var(--d-accent-fg); }
.desk-tb-mark svg { inline-size: 12px; block-size: 12px; }
.desk-tb-name { font: 600 12px/1 system-ui, Vazirmatn, sans-serif; color: var(--d-text); direction: ltr; unicode-bidi: isolate; }
.desk-tb-title { direction: rtl; unicode-bidi: isolate; font-size: 12px; color: var(--d-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.desk-tb-title::before { content: '·'; margin-inline-end: 8px; color: var(--d-faint); }
.desk-tb-ctl { display: flex; align-self: stretch; flex: none; }
.desk-tb-btn { inline-size: 46px; block-size: 100%; display: grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--d-dim); cursor: default; transition: background var(--dur-1, 80ms), color var(--dur-1, 80ms); }
.desk-tb-btn svg { inline-size: 14px; block-size: 14px; }
.desk-tb-btn:hover { background: var(--d-hover); color: var(--d-text); }
.desk-tb-btn:active { background: var(--d-active); }
/* Windows' own close-button red: the one place the system colour is right */
.desk-tb-btn.close:hover { background: #c42b1c; color: #fff; }
.desk-tb-btn.close:active { background: #b22a1b; color: #fff; }
.desk-tb-btn:focus-visible { outline: 2px solid var(--d-ring); outline-offset: -2px; }

/* Update banner: accent bar, dark text on the gradient (--d-accent-fg is the text colour made for it) */
.upd-banner {
  position: fixed; inset-block-start: var(--tb-h); inset-inline: 0; z-index: 990; block-size: var(--upd-h, 44px); min-block-size: 44px;
  display: flex; align-items: center; gap: 10px; padding-inline: 14px 8px;
  background: linear-gradient(90deg, var(--d-accent-2), var(--d-accent)); color: var(--d-accent-fg);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--d-accent) 70%, transparent);
  font-size: 13px; white-space: nowrap; overflow: hidden;
}
.upd-banner .upd-ic { inline-size: 26px; block-size: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--d-accent-fg) 14%, transparent); }
.upd-banner .upd-ic svg { inline-size: 16px; block-size: 16px; }
.upd-banner .upd-msg { font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.upd-banner .upd-note { font-size: 12px; font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.upd-banner .upd-bar { flex: 0 1 240px; min-inline-size: 80px; block-size: 6px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--d-accent-fg) 18%, transparent); }
.upd-banner .upd-bar i { display: block; block-size: 100%; inline-size: 0; background: var(--d-accent-fg); transition: inline-size var(--dur-2); }
.upd-banner .upd-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
/* the primary action on the accent bar is the inverse: dark fill, light text */
.upd-banner .btn.upd-act, .upd-banner .btn.upd-act:hover { background: var(--d-accent-fg); color: var(--d-text); border-color: transparent; font-weight: 700; padding: 5px 14px; }
.upd-banner .btn.upd-act:hover { filter: brightness(1.25); }
.upd-banner .btn.upd-act:disabled { opacity: .6; }
.upd-banner .btn.upd-act:focus-visible, .upd-banner .upd-x:focus-visible { outline: 2px solid var(--d-accent-fg); outline-offset: 2px; }
.upd-banner .upd-x { inline-size: 28px; block-size: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r-3); background: transparent; color: var(--d-accent-fg); cursor: pointer; }
.upd-banner .upd-x:hover { background: color-mix(in srgb, var(--d-accent-fg) 14%, transparent); }
.upd-banner .upd-x svg { inline-size: 14px; block-size: 14px; }
@media (prefers-reduced-motion: reduce) { .upd-banner .upd-bar i, .desk-tb-btn { transition: none; } }