/* Workspace redesign (spec 2026-10-18): shell, meetings, meeting page, archive, settings.
   Classes use the w- prefix; colours come only from theme.css tokens. Radii: 12 controls, 16 cards and popovers, 20 sheets and the player. */

/* ---------- Base ---------- */
.w-shell { min-height: 100dvh; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-variant-numeric: tabular-nums; }
.w-shell :where(p, small, time) { color: inherit; }
.w-i { width: 16px; height: 16px; stroke-width: 1.75; }
.w-i-fill { fill: currentColor; stroke: none; }
.w-grow { flex: 1; }
.w-muted { color: var(--muted-foreground); }
.w-faint { color: var(--muted-foreground); opacity: .85; }
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-mark, .w-shell mark { background: var(--w-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.w-shell mark.is-current { background: var(--w-mark-on); }
.w-main { max-width: 1120px; margin: 0 auto; padding: 20px 32px 72px; }
.w-main-wide { padding-top: 28px; }
.w-phone-only { display: none !important; }

/* ---------- Buttons ---------- */
/* The look of the prototype (docs/prototypes/meetvo-r1-r2/css/look.css): one scale of radii — controls 10, small cards
   14, the main surfaces 20 —, a faint edge under a control, the jade fill for the one solid button of a screen. */
.w-btn { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--card); color: var(--foreground); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; box-shadow: var(--control-edge); transition: background-color .14s, border-color .14s, color .14s, opacity .14s, transform .08s; }
.w-btn:hover { background: var(--hover); border-color: var(--border-strong); }
.w-btn:not(:disabled):active { transform: translateY(.5px); }
.w-btn:disabled { opacity: .45; cursor: not-allowed; }
.w-btn-primary { background: var(--primary-fill); background-clip: padding-box; border-color: transparent; color: var(--accent-fg); box-shadow: var(--primary-edge); }
.w-btn-primary:hover { background: var(--primary-fill); background-clip: padding-box; border-color: transparent; opacity: .9; }
.w-btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.w-btn-ghost:hover { background: var(--hover); border-color: transparent; }
.w-btn-quiet { border-color: transparent; background: transparent; color: var(--muted-foreground); box-shadow: none; }
.w-btn-quiet:hover { background: var(--hover); color: var(--foreground); border-color: transparent; }
.w-btn-danger { border-color: transparent; background: transparent; color: var(--danger); box-shadow: none; }
.w-btn-sm { --w-btn-pad: 12px; height: 32px; padding: 0 var(--w-btn-pad); font-size: 13px; }
.w-btn-lg { height: 40px; padding: 0 18px; }
.w-ib { width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 0; background: transparent; color: var(--body); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .12s, color .12s; }
.w-ib:hover { background: var(--hover); color: var(--foreground); }
.w-ib .w-i { width: 18px; height: 18px; }
.w-ib-sm { width: 28px; height: 28px; border-radius: 8px; }
.w-ib-sm .w-i { width: 15px; height: 15px; }
.w-link { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--foreground); text-decoration: underline; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .14s; }
.w-link:hover { text-decoration-color: currentColor; }
.w-textbtn { padding: 0; border: 0; background: none; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-textbtn:hover { color: var(--foreground); }
.w-textbtn-strong { color: var(--foreground); font-weight: 500; }
.w-shell :focus-visible, .w-sheet :focus-visible, .w-cmd :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.w-cmd-field input:focus-visible, .w-searchbox input:focus-visible, .w-arch-search input:focus-visible, .w-pfield input:focus-visible, .w-launch-join input:focus-visible, .w-fld input:focus-visible, .w-pick-find:focus-visible { outline: none; }

/* ---------- Avatars ---------- */
.w-av { --av: 28px; width: var(--av); height: var(--av); border-radius: 50%; background: var(--secondary); color: var(--body); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: max(10px, calc(var(--av) * .4)); letter-spacing: -.01em; flex-shrink: 0; line-height: 1; }
.w-stack { --ring: 2px; --overlap: 2px; display: inline-flex; }
.w-stack .w-av { box-shadow: 0 0 0 var(--ring) var(--background); }
.w-stack .w-av + .w-av { margin-left: calc(var(--overlap) * -1); }
/* The next avatar and its ring cover the right edge; centre the initials in what stays visible. */
.w-stack .w-av:not(:last-child) { padding-right: calc(var(--overlap) + var(--ring)); }
.w-stack .w-av { letter-spacing: -.03em; }
.w-card .w-stack .w-av { box-shadow: 0 0 0 var(--ring) var(--card); }
/* «+N»: the people past the faces, quieter than a face. */
.w-av-more { background: var(--sunken); color: var(--muted-foreground); font-weight: 500; }

/* ---------- Header ---------- */
.w-header { background: var(--card); border-bottom: 1px solid var(--border); position: relative; z-index: 15; }
.w-header-in { max-width: 1120px; margin: 0 auto; padding: 0 32px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
/* The logo (shared/brand.js): the mark and the wordmark in the colours of the logo (--brand-*), never of the buttons,
   with no shadow (web/brand/README.md). A place sets the height of each; the wordmark keeps its proportion, and below
   15 px of height it is narrower than the 64 px the README allows. */
.w-brand { display: flex; align-items: center; gap: 10px; padding: 0; }
/* The drawings are the files of web/brand as they are: not the round strokes every icon of the page inherits (base.css). */
.w-brand-mark, .w-brand-word { stroke: none; stroke-linecap: butt; stroke-linejoin: miter; }
.w-brand-mark { flex: none; width: 28px; height: 28px; }
.w-brand-tile { fill: var(--brand-tile); }
.w-brand-ee { fill: var(--brand-on); }
.w-brand-word { flex: none; width: auto; height: 16px; color: var(--brand-ink); }
/* Forced colours drop the colours of the page: the logo keeps the system's own pair, so it never disappears. */
@media (forced-colors: active) {
  .w-brand-mark, .w-brand-word { forced-color-adjust: none; }
  .w-brand-tile { fill: CanvasText; }
  .w-brand-ee { fill: Canvas; }
  .w-brand-word { color: CanvasText; }
}
.w-header-title { display: none; font-size: 16px; font-weight: 600; }
.w-navs { display: flex; gap: 2px; }
.w-nav { height: 34px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; font-weight: 500; color: var(--muted-foreground); font-size: 14px; }
.w-nav:hover { color: var(--foreground); background: var(--hover); }
.w-nav.is-on { background: var(--secondary); color: var(--foreground); }
.w-search-pill { width: 240px; height: 36px; padding: 0 8px 0 12px; border-radius: 12px; background: var(--sunken); color: var(--muted-foreground); display: flex; align-items: center; gap: 8px; font-size: 14px; text-align: left; }
.w-search-pill:hover { color: var(--foreground); }
.w-search-text { flex: 1; }
.w-shell kbd, .w-cmd kbd { font: inherit; font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted-foreground); background: var(--card); }
.w-avatar-btn { width: 32px; height: 32px; padding: 0; border-radius: 50%; display: flex; }
.w-phonebar { display: none; }
.w-back { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.w-back:hover { color: var(--foreground); }

/* ---------- Popovers and menus ---------- */
.w-popwrap { position: relative; display: inline-flex; }
.w-pop { position: absolute; top: calc(100% + 8px); z-index: 30; width: var(--pop-w, 260px); max-width: calc(100vw - 32px); padding: 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--w-pop-shadow); color: var(--foreground); text-align: left; animation: w-pop .16s ease-out; }
.w-pop-right { right: 0; }
.w-pop-left { left: 0; }
.w-pop-pad { padding: 16px; }
@keyframes w-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.w-mi { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 8px; background: transparent; color: var(--foreground); font-size: 14px; text-align: left; }
.w-mi:hover { background: var(--hover); }
.w-mi .w-i { color: var(--muted-foreground); }
.w-mi-danger, .w-mi-danger .w-i { color: var(--danger); }
.w-mi-person { min-height: 48px; }
.w-mi-person span { flex: 1; display: flex; flex-direction: column; line-height: 18px; }
.w-mi-person small { font-size: 12px; color: var(--muted-foreground); }
.w-menu-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.w-menu-head b { display: block; font-weight: 600; }
.w-menu-head small { display: block; font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.w-menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.w-menu-label { padding: 8px 10px 4px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.w-menu-quiet { padding: 4px 10px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }

/* Segmented control */
.w-seg { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--secondary); }
.w-seg-full { display: flex; margin: 2px 4px 4px; }
.w-seg-full .w-seg-btn { flex: 1; }
.w-seg-btn { height: 28px; padding: 0 10px; border-radius: 8px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.w-seg-btn .w-i { width: 14px; height: 14px; }
.w-seg-full .w-seg-btn span { overflow: hidden; text-overflow: ellipsis; }
.w-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 6px 0 10px; font-size: 14px; }
.w-seg-icon { width: 36px; padding: 0; }
.w-seg-icon .w-i { width: 16px; height: 16px; }
.w-seg-btn[aria-pressed="true"], .w-seg-btn[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--w-seg-shadow); }

/* ---------- Scrim, command palette, toast ---------- */
.w-scrim { position: fixed; inset: 0; z-index: 40; background: var(--w-scrim); }
/* «Найти или спросить» (shell/cmdk-view.js, prototype css/find.css): the rows that ask stand on top in the accent,
   everything found goes below them in calm groups, a sign without a tile, the words of the query marked. */
.w-cmd { position: fixed; z-index: 41; top: 12vh; left: 50%; transform: translateX(-50%); width: 680px; max-width: calc(100vw - 32px); border-radius: 20px; background: var(--card); box-shadow: var(--w-sheet-shadow); overflow: hidden; color: var(--foreground); animation: w-cmd-in .16s ease-out; letter-spacing: -.006em; }
@keyframes w-cmd-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.w-cmd-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.w-cmd-field .w-i { width: 18px; height: 18px; }
.w-cmd-field input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: 17px; letter-spacing: -.012em; }
.w-cmd-field input::placeholder { color: var(--muted-foreground); }
.w-cmd-field .cmdk-close { display: none; }
.w-cmd-list { max-height: min(60vh, 480px); overflow: auto; overscroll-behavior: contain; padding: 6px 8px 8px; }
.w-cmd-group { padding: 12px 12px 4px; font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.w-cmd-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 6px 10px; border-radius: 12px; text-align: left; font-size: 14px; line-height: 20px; color: var(--foreground); text-decoration: none; transition: background-color .1s; }
.w-cmd-opt:hover { background: var(--hover); }
.w-cmd-opt.is-active { background: var(--secondary); }
.w-cmd-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; color: var(--muted-foreground); display: flex; align-items: center; justify-content: center; }
.w-cmd-ic .w-i { width: 16px; height: 16px; }
.w-cmd-ic .w-av { --av: 28px; box-shadow: inset 0 0 0 1px var(--border); }
.w-cmd-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.w-cmd-text small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 18px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-cmd-opt mark { padding: 0 1px; border-radius: 3px; background: var(--accent-soft); color: inherit; }
.w-cmd-empty { padding: 16px 12px; color: var(--muted-foreground); }
.w-cmd-empty.cmdk-nothing { padding: 28px 12px 24px; text-align: center; font-size: 14px; line-height: 22px; text-wrap: balance; }
/* The rows that ask: the accent says «это спросит, а не откроет»; with a query they keep to the top of the list. */
.cmdk-top { position: sticky; top: -6px; z-index: 1; margin: -6px -8px 0; padding: 6px 8px; background: var(--card); border-bottom: 1px solid var(--border); }
.cmdk-ask .w-cmd-ic { background: var(--accent-soft); color: var(--accent-ink); }
.cmdk-ask .w-cmd-text { font-weight: 520; }
.cmdk-top .cmdk-ask.is-active { background: var(--accent-soft); }
.cmdk-top .cmdk-ask.is-active .w-cmd-ic { background: transparent; }
.w-cmd-list > .cmdk-ask .w-cmd-text { font-weight: 450; }
.cmdk-all { color: var(--muted-foreground); }
/* A row with an action of its own beside it: the handset of a person calls, the row opens the card. */
.cmdk-pair { position: relative; }
.cmdk-pair .w-cmd-opt { padding-right: 76px; }
.cmdk-second { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--muted-foreground); transition: background-color .12s, color .12s; }
.cmdk-second:hover { background: var(--accent-soft); color: var(--accent-ink); }
.cmdk-second .w-i { width: 15px; height: 15px; }
.w-cmd-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); font-size: 12px; line-height: 18px; color: var(--muted-foreground); }
.cmdk-keys { display: flex; flex-wrap: wrap; gap: 14px; }
.cmdk-lock { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cmdk-lock .w-i { width: 12px; height: 12px; }
#toast.w-toast-has-action.show { pointer-events: auto; display: flex; width: max-content; text-align: left; align-items: center; gap: 12px; padding: 6px 8px 6px 16px; background: var(--w-tip); color: var(--w-tip-fg); border-color: transparent; border-radius: 14px; box-shadow: var(--w-pop-shadow); }
.w-toast-action { flex-shrink: 0; height: 32px; padding: 0 10px; border-radius: 10px; background: var(--w-player-hover); color: inherit; font-weight: 600; }
/* A name in the message (an organization, a position) may be one long word: it wraps, the action stays on screen. */
#toast.w-toast-has-action > span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Page heading and common blocks ---------- */
.w-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; }
.w-head-copy { flex: 1 1 320px; min-width: 0; }
.w-overline { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-h1 { margin: 2px 0 0; font-size: 30px; line-height: 36px; font-weight: 560; letter-spacing: -.026em; text-wrap: balance; }
.w-h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.w-h3 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.w-h3 .w-count, .w-count { font-size: 13px; font-weight: 400; color: var(--muted-foreground); }
.w-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.w-card { padding: 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--edge); }
.w-section-title { display: flex; align-items: center; gap: 8px; margin: 28px 0 4px; }
.w-empty { padding: 24px 0; color: var(--muted-foreground); }
.w-empty b { display: block; color: var(--foreground); font-weight: 600; margin-bottom: 2px; }
.w-note { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--w-low); }
.w-dot-live { background: var(--w-live); }
.w-dot-high { background: var(--w-high); }
.w-dot-mid { background: var(--w-mid); }
.w-pulse { animation: w-pulse 1.8s ease-out infinite; }
@keyframes w-pulse { 0% { box-shadow: 0 0 0 0 var(--w-pulse); } 100% { box-shadow: 0 0 0 8px var(--w-pulse-end); } }
.w-spin { animation: w-spin 1s linear infinite; }
@keyframes w-spin { to { transform: rotate(360deg); } }
.w-live-text { color: var(--w-live); font-weight: 500; }

/* Tabs */
.w-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.w-tab { height: 40px; padding: 0; margin-right: 24px; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--muted-foreground); box-shadow: inset 0 -2px 0 transparent; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.w-tab:hover { color: var(--foreground); }
.w-tab[aria-selected="true"] { color: var(--foreground); box-shadow: inset 0 -2px 0 var(--accent); }
.w-tab .w-count { font-weight: 400; }

/* Switch */
.w-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; padding: 0; border-radius: 10px; background: var(--switch-off); transition: background-color .15s; }
.w-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--w-knob); box-shadow: 0 1px 2px var(--w-scrim); transition: left .15s; }
.w-switch[aria-checked="true"] { background: var(--primary-fill); }
.w-switch[aria-checked="true"]::after { left: 18px; background: var(--w-knob); }
.w-switch-row { display: inline-flex; align-items: center; gap: 8px; height: 36px; font-size: 13px; color: var(--body); }
.w-switch-sm { width: 32px; height: 18px; }
.w-switch-sm::after { width: 14px; height: 14px; }
.w-switch-sm[aria-checked="true"]::after { left: 16px; }

/* Checkbox and radio drawn as buttons */
.w-check { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0; background: transparent; font-size: 14px; color: var(--foreground); text-align: left; }
.w-check-box { width: 18px; height: 18px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--primary-foreground); }
.w-check-box .w-i { width: 12px; height: 12px; stroke-width: 3; }
.w-check[aria-checked="true"] .w-check-box, .w-check-box.is-on { background: var(--primary-fill); border-color: transparent; color: var(--accent-fg); }
.w-radio { display: flex; align-items: flex-start; gap: 12px; width: calc(100% + 20px); padding: 10px; margin: 0 -10px; border-radius: 12px; background: transparent; text-align: left; color: var(--foreground); }
.w-radio:hover { background: var(--hover); }
.w-radio-dot { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--border-strong); }
.w-radio[aria-checked="true"] .w-radio-dot { border: 5px solid var(--accent-ink); }
.w-radio b { display: block; font-weight: 500; }
.w-radio small { display: block; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }

/* Inputs */
.w-input { width: 100%; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input); color: var(--foreground); font-size: 14px; outline: none; transition: border-color .14s, box-shadow .14s; }
.w-input:hover:not(:disabled, :focus) { border-color: var(--border-strong); }
.w-input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--secondary); }
.w-input::placeholder, .w-textarea::placeholder { color: var(--muted-foreground); }
.w-textarea { width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input); color: var(--foreground); font-size: 14px; line-height: 22px; resize: vertical; outline: none; }
.w-textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--secondary); }
.w-searchbox { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--sunken); color: var(--muted-foreground); border: 1px solid transparent; }
.w-searchbox:focus-within { background: var(--card); border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--secondary); }
.w-searchbox input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: 14px; }
.w-field-error { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--danger); }
.w-label { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--foreground); }

@media (prefers-reduced-motion: reduce) {
  .w-pop, .w-cmd, .w-sheet, .w-pulse, .w-spin, .w-bar-run::after { animation: none !important; }
}

/* ---------- Today ---------- */
.w-section-title { margin: 28px 0 4px; }
.w-side-title { margin: 28px 0 4px; }
.w-empty-line { margin: 8px 0 0; color: var(--muted-foreground); }
.w-list { display: flex; flex-direction: column; }
.w-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 12px; margin: 0 -12px; border-radius: 12px; }
/* The separator is its own straight line: a border on a rounded row curls up at both ends. */
.w-row::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 1px; background: var(--border); pointer-events: none; }
.w-list > .w-row:last-child::after, .w-row:hover::after { display: none; }
.w-row:hover { background: var(--hover); }
.w-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 0; text-align: left; color: inherit; }
.w-row-static { cursor: default; }
.w-row-time { width: 52px; flex-shrink: 0; font-size: 14px; line-height: 20px; color: var(--foreground); }
.w-row-time small { display: block; font-size: 13px; color: var(--muted-foreground); }
.w-row.is-done .w-row-time { color: var(--muted-foreground); }
.w-row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.w-row-title { font-weight: 500; display: flex; align-items: center; gap: 6px; min-width: 0; }
.w-row-name { min-width: 0; }
.w-row-repeat { width: 14px; height: 14px; color: var(--muted-foreground); }
.w-row-meta { font-size: 13px; line-height: 20px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-row-side { display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 13px; }
.w-row-state { display: inline-flex; align-items: center; gap: 6px; color: var(--body); }
.w-row-state .w-i { width: 14px; height: 14px; }
.w-row-copy-link, .w-row-hover { opacity: 0; }
/* Finished rows have no copy-link button: keep its place so the status column lines up across rows. */
.w-row.is-done .w-row-side::after { content: ""; flex-shrink: 0; width: 28px; }
.w-row:hover .w-row-copy-link, .w-row:focus-within .w-row-copy-link, .w-row:hover .w-row-hover, .w-row:focus-within .w-row-hover { opacity: 1; }
.w-row-hover { display: inline-flex; gap: 6px; }
.w-day { margin: 20px 0 4px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-tabpanel > .w-list > .w-day:first-child, .w-tabpanel .w-arch-list > .w-day:first-child { margin-top: 12px; }
.w-more { margin: 12px 0 0 -12px; }
.w-live-card { padding: 20px; }
.w-live-top { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-live-main { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 8px; }
.w-live-copy { flex: 1 1 260px; min-width: 0; }
.w-live-title { padding: 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--foreground); text-align: left; }
.w-live-who { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted-foreground); }
.w-att { position: relative; padding: 12px 40px 12px 0; border-bottom: 1px solid var(--border); }
.w-att-title { padding: 0; color: var(--foreground); text-align: left; }
.w-att-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.w-att-acts { display: flex; gap: 16px; margin-top: 4px; }
.w-att-x { position: absolute; top: 8px; right: 0; opacity: 0; }
.w-att:hover .w-att-x, .w-att:focus-within .w-att-x { opacity: 1; }
.w-meetings-tabs { margin-top: 44px; }
.w-join { display: flex; flex-direction: column; gap: 8px; }
.w-join .w-btn-primary { align-self: flex-end; }
.w-join-found { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; }
.w-pop-padded { }
.w-pop-padded .w-pop { padding: 16px; }
.w-ib-box { width: 44px; height: 44px; border: 1px solid var(--input-border); background: var(--card); color: var(--foreground); }

/* ---------- Archive ---------- */
.w-arch-h1 { margin-top: 8px; }
.w-archive { max-width: 820px; }
.w-archive.is-inline { margin-top: 16px; }
.w-arch-search { display: flex; align-items: center; gap: 10px; height: 44px; margin-top: 20px; padding: 0 6px 0 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--input-border); color: var(--muted-foreground); }
.w-archive.is-inline .w-arch-search { margin-top: 0; }
.w-arch-search:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--secondary); }
.w-arch-search .w-i { width: 18px; height: 18px; }
.w-arch-search input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: 15px; }
.w-arch-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.w-filter { height: 32px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--card); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--foreground); }
.w-filter .w-i { width: 14px; height: 14px; color: var(--muted-foreground); }
.w-arch-count { margin: 24px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-arch-meeting { margin-top: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.w-arch-mhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.w-arch-title { padding: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); text-align: left; }
.w-arch-mhead .w-muted { font-size: 13px; }
.w-hit { display: flex; gap: 16px; width: calc(100% + 24px); padding: 10px 12px; margin: 6px -12px 0; border-radius: 12px; text-align: left; color: var(--body); }
.w-hit:hover { background: var(--hover); }
.w-hit-where { width: 120px; flex-shrink: 0; font-size: 13px; color: var(--muted-foreground); }
.w-hit-text { flex: 1; min-width: 0; }
.w-hit-go { font-size: 13px; font-weight: 500; color: var(--foreground); white-space: nowrap; opacity: 0; }
.w-hit:hover .w-hit-go, .w-hit:focus-visible .w-hit-go { opacity: 1; }
.w-arch-foot { margin-top: 20px; }
.w-arch-list { display: flex; flex-direction: column; }
/* A row is the link to the meeting (.w-arch-main); «Назначить заново» is a sibling control at its end. */
.w-arch-row { display: flex; align-items: center; margin: 0 -12px; border-bottom: 1px solid var(--border); }
.w-arch-row:hover { background: var(--hover); }
.w-arch-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 6px 12px; text-align: left; color: inherit; }
.w-shell .w-arch-main:focus-visible { outline-offset: -2px; border-radius: 8px; }
.w-arch-date { width: 120px; flex-shrink: 0; font-size: 13px; color: var(--muted-foreground); }
.w-arch-name { flex: 1; min-width: 0; font-weight: 500; }
.w-arch-state { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 13px; color: var(--muted-foreground); white-space: nowrap; }
.w-arch-flag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--late-bg); color: var(--late); font-size: 12px; font-weight: 600; }
.w-arch-row.is-missed .w-arch-name { color: var(--muted-foreground); }
.w-arch-redo { flex-shrink: 0; margin-right: 12px; }

/* ---------- Meeting page ---------- */
.w-narrow { max-width: 720px; margin: 0 auto; }
.w-mhead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; margin-top: 8px; }
.w-mhead-copy { flex: 1 1 420px; min-width: 0; }
.w-mhead-copy .w-h1 { margin: 0; }
.w-mhead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; color: var(--muted-foreground); }
.w-mhead-people { display: inline-flex; align-items: center; gap: 8px; }
.w-quiet-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-quiet-line .w-i { width: 14px; height: 14px; }
.w-quiet-top { margin-top: 20px; padding-top: 0; }
.w-livebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.w-livebar .w-dot { width: 10px; height: 10px; }
.w-livebar-who { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-foreground); }
.w-livebar .w-stack .w-av { box-shadow: 0 0 0 var(--ring) var(--card); }
.w-inline-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--danger-bg); color: var(--danger); font-size: 13px; }
.w-detail { display: flex; align-items: flex-start; gap: 40px; margin-top: 20px; }
.w-dcol-main { flex: 3 1 0; min-width: 0; }
.w-dcol-side { flex: 2 1 0; min-width: 0; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.w-detail-plain .w-dcol-side { position: static; }
.w-pane { padding-top: 16px; }
.w-loading { padding: 16px 0; }

/* Summary */
.w-provenance { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-provenance .w-i { width: 14px; height: 14px; }
.w-short-title { margin: 20px 0 6px; }
.w-short { margin: 0; font-size: 15px; line-height: 24px; color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.w-block { margin-top: 28px; }
.w-block .w-h3 { display: flex; align-items: center; gap: 8px; height: 32px; }
.w-items { margin-top: 2px; }
.w-item { position: relative; display: flex; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; transition: background-color .12s, opacity .15s; }
.w-item:hover { background: var(--hover); }
.w-item.is-dim { opacity: .55; }
.w-item-mark { position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px; border-radius: 2px; background: var(--border-strong); }
.w-item-lead { width: 18px; flex-shrink: 0; display: flex; justify-content: center; padding-top: 2px; }
.w-bullet { width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--muted-foreground); }
.w-item-lead .w-dot { margin-top: 5px; }
.w-taskbox { width: 18px; height: 18px; padding: 0; border-radius: 6px; border: 1.5px solid var(--border-strong); background: transparent; color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; }
.w-taskbox .w-i { width: 12px; height: 12px; stroke-width: 3; }
.w-taskbox.is-on { background: var(--primary-fill); border-color: transparent; color: var(--accent-fg); }
.w-item-body { flex: 1; min-width: 0; padding-right: 36px; }
.w-item-text { margin: 0; color: var(--foreground); white-space: pre-wrap; overflow-wrap: anywhere; }
.w-item.is-done .w-item-text { color: var(--muted-foreground); text-decoration: line-through; }
.w-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.w-item-person { display: inline-flex; align-items: center; gap: 6px; color: var(--body); }
.w-item-tag { opacity: .85; }
.w-item-acts { position: absolute; top: 8px; right: 8px; opacity: 0; }
.w-item:hover .w-item-acts, .w-item:focus-within .w-item-acts, .w-item-acts:has([aria-expanded="true"]) { opacity: 1; }
.w-empty-blocks { margin: 24px 0 0; color: var(--muted-foreground); }
/* The head of the tab «Итоги», over the agenda: the type of the summary and how it was made at the left, «История
   изменений» at the end of the line — on a narrow screen too, where the line wraps. */
.w-summary-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 32px; margin-bottom: 16px; }
.w-summary-history { margin-left: auto; }
.w-summary-head .w-btn { color: var(--muted-foreground); }
/* The text of «История изменений» ends at the edge of the column; its hover pill goes into the margin (the padding and
   the 1px border of the button). */
.w-summary-history .w-btn-ghost { margin-inline-end: calc(-1px - var(--w-btn-pad)); }
.w-summary-head .w-btn:hover { color: var(--foreground); }
/* A quote of what was said, under the text it backs: a section of the summary, a point of the agenda. */
.w-quote { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--border-strong); font-size: 13px; line-height: 20px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.w-summary-updating { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-summary-updating .w-i { width: 14px; height: 14px; }
.w-short-edited { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.w-short-edit { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: text; white-space: pre-wrap; overflow-wrap: anywhere; }
.w-short-edit:hover { color: var(--foreground); }
.w-item-text-edit { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: text; white-space: pre-wrap; overflow-wrap: anywhere; }
.w-item-text-edit:hover { color: var(--foreground); }
.w-item-text-edit:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
.w-item.is-done .w-item-text-edit { color: var(--muted-foreground); text-decoration: line-through; }
.w-item-origin { display: inline-flex; align-items: center; gap: 4px; }
.w-item-origin .w-i { width: 12px; height: 12px; }
.w-item-flag { display: inline-flex; align-items: center; gap: 3px; color: var(--body); font-variant-numeric: tabular-nums; }
.w-item-flag .w-i { width: 12px; height: 12px; }
.w-summary-form { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--border); }
.w-summary-add { margin: 6px 0 0; }
.w-summary-field { display: block; margin-top: 10px; }
.w-summary-field:first-child { margin-top: 0; }
.w-summary-field .w-label { display: block; margin-bottom: 6px; }
.w-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.w-summary-check { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; margin-top: 8px; font-size: 13px; color: var(--body); }
.w-summary-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.w-summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.w-summary-form .w-field-error:empty { display: none; }
.w-block-actions { margin-top: 4px; }
.w-block-actions .w-btn { color: var(--muted-foreground); }
.w-history-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.w-history-head b { display: inline; }
.w-history-head span { color: var(--muted-foreground); }
.w-history-head time { color: var(--muted-foreground); font-size: 12px; }
.w-history-kind { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.w-history-text { margin: 2px 0 0; color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.w-history-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; color: var(--muted-foreground); }
.w-history-list { max-height: min(60vh, 420px); overflow: auto; }
.w-history-list .w-history-row { padding: 8px 10px; border-radius: 10px; }
.w-history-list .w-history-row:hover { background: var(--hover); }
.w-history-error { padding: 8px 10px; color: var(--danger); font-size: 13px; line-height: 20px; }
.w-history-error p { margin: 0 0 6px; }
@media (max-width: 760px) {
  .w-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .w-summary-form { margin-right: -4px; margin-left: -4px; }
}
.w-moment { position: relative; height: 22px; padding: 0 7px 0 6px; border-radius: 8px; background: var(--w-chip); color: var(--body); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.w-moment .w-i { width: 10px; height: 10px; }
.w-moment:hover { background: var(--w-chip-hover); color: var(--foreground); }
/* A hidden tip takes no room: an invisible one of 300px beside the right edge scrolled the page sideways at 1280. */
.w-tip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; display: none; width: 300px; max-width: 70vw; padding: 8px 10px; border-radius: 10px; background: var(--w-tip); color: var(--w-tip-fg); font-size: 12px; line-height: 18px; font-weight: 400; text-align: left; white-space: normal; pointer-events: none; }
.w-moment:hover .w-tip, .w-moment:focus-visible .w-tip { display: block; animation: w-pop .15s; }
/* The chips of «О встрече» stand in the right column: their tips open to the left. */
.w-about .w-tip { left: auto; right: 0; }

/* States */
.w-state { display: flex; gap: 16px; align-items: flex-start; padding: 28px 0 0; }
.w-state-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--secondary); color: var(--body); display: flex; align-items: center; justify-content: center; }
.w-state-ic .w-i { width: 18px; height: 18px; }
.w-state-copy { flex: 1; min-width: 0; }
.w-state-copy p { margin: 4px 0 0; color: var(--muted-foreground); }
.w-state-actions { margin-top: 16px; }
.w-processing { margin-top: 4px; padding: 20px 24px; }
.w-steps { margin-top: 12px; }
.w-step { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.w-step.is-wait { color: var(--muted-foreground); }
.w-step-ic { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--body); }
.w-step-ok { background: var(--success); color: var(--primary-foreground); }
html[data-theme=dark] .w-step-ok { color: var(--background); }
.w-step-ok .w-i { width: 12px; height: 12px; stroke-width: 3; }
.w-step-dash { border: 1.5px dashed var(--border-strong); }
.w-bar-run { position: relative; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--secondary); overflow: hidden; }
.w-bar-run::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 2px; background: var(--foreground); opacity: .5; animation: w-run 1.6s ease-in-out infinite; }
@keyframes w-run { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* Transcript */
.w-tq-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.w-tq { flex: 1 1 280px; }
.w-tq-count { font-size: 13px; white-space: nowrap; padding: 0 4px; }
.w-lines { margin-top: 12px; }
.w-line { position: relative; display: flex; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; cursor: pointer; transition: background-color .12s; }
.w-line.is-cont { padding-top: 2px; }
.w-line:hover { background: var(--hover); }
.w-line.is-current, .w-line.is-selected { background: var(--secondary); }
.w-line-bar { position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--foreground); }
.w-line:not(.is-current):not(.is-selected) .w-line-bar { display: none; }
.w-line-av { width: 28px; flex-shrink: 0; }
.w-line-body { flex: 1; min-width: 0; padding-right: 64px; }
.w-line-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.w-line.is-cont .w-line-head { min-height: 0; }
.w-line.is-cont .w-line-time { display: none; }
.w-line.is-cont:hover .w-line-time, .w-line.is-cont.is-current .w-line-time { display: inline-flex; }
.w-line-head b { font-weight: 600; }
.w-line-time { display: inline-flex; align-items: center; gap: 4px; padding: 0; font-size: 12px; color: var(--muted-foreground); }
.w-line-play { width: 10px; height: 10px; opacity: 0; }
.w-line:hover .w-line-play, .w-line-time:focus-visible .w-line-play { opacity: 1; }
.w-line-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted-foreground); }
.w-line-flag .w-i { width: 12px; height: 12px; }
.w-line-text { margin: 2px 0 0; color: var(--body); cursor: text; }
.w-line-acts { position: absolute; top: 6px; right: 8px; display: flex; gap: 2px; opacity: 0; }
.w-line:hover .w-line-acts, .w-line:focus-within .w-line-acts { opacity: 1; }
.w-eq { display: none; align-items: flex-end; gap: 2px; height: 14px; padding: 2px 6px; border-radius: 6px; background: var(--primary); }
.w-detail.is-playing .w-line.is-current .w-eq { display: inline-flex; }
.w-eq i { width: 2px; height: 4px; border-radius: 1px; background: var(--primary-foreground); animation: w-eq .9s ease-in-out infinite; }
.w-eq i:nth-child(2) { animation-delay: .2s; }
.w-eq i:nth-child(3) { animation-delay: .4s; }
@keyframes w-eq { 0%, 100% { height: 4px; } 50% { height: 10px; } }
.w-live-note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--muted-foreground); }
.w-live-note .w-dot { width: 6px; height: 6px; }
.w-jump { position: sticky; bottom: 24px; display: flex; justify-content: center; margin-top: 8px; pointer-events: none; z-index: 5; }
.w-jump .w-btn { pointer-events: auto; box-shadow: var(--w-pop-shadow); }

/* Chat */
.w-chat { padding-top: 0; }
.w-msg { display: flex; gap: 12px; padding: 10px 0; }
.w-msg-body { flex: 1; min-width: 0; }
.w-msg-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.w-msg-head b { font-weight: 600; }
.w-msg-time { font-size: 12px; color: var(--muted-foreground); }
.w-msg-body p { margin: 2px 0 0; color: var(--body); }
.w-msg-quote { margin: 4px 0 0; padding: 4px 10px; border-left: 2px solid var(--border-strong); color: var(--muted-foreground); font-size: 13px; }
.w-msg-reactions { display: flex; gap: 6px; margin-top: 4px; font-size: 13px; }
.w-msg-reactions span { padding: 0 6px; border-radius: 8px; background: var(--secondary); }
.w-readonly { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted-foreground); }
/* .w-shell .locked-card p/h2 below zero the margins of the legacy class names; win over them here. */
.w-shell .w-locked .w-quiet-line { margin-top: 12px; }
.w-shell .w-locked .w-locked-chat { margin: 32px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.w-locked .w-chat .w-msg { padding: 12px 0; }

/* Side column: player, about, people */
.w-player { border-radius: 20px; overflow: hidden; background: var(--w-player); color: var(--w-player-fg); }
.w-player-stage { position: relative; aspect-ratio: 16 / 9; background: var(--w-player); }
.w-player-stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--w-player); cursor: pointer; }
.w-player-name { position: absolute; left: 12px; bottom: 12px; height: 26px; padding: 0 9px; display: flex; align-items: center; border-radius: 9px; background: var(--w-player-chip); backdrop-filter: blur(12px); font-size: 12px; font-weight: 500; color: var(--w-player-fg); }
.w-player-ctl { padding: 8px 14px 12px; }
.w-range { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; --fill: 0%; }
.w-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--w-player-fg) var(--fill), var(--w-player-track) var(--fill)); }
.w-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--w-player-track); }
.w-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--w-player-fg); }
.w-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--w-player-fg); opacity: 0; }
.w-range:hover::-webkit-slider-thumb, .w-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.w-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--w-player-fg); }
.w-range:focus-visible { outline: 2px solid var(--w-player-muted); outline-offset: 2px; }
.w-player-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.w-play { width: 36px; height: 36px; flex-shrink: 0; padding: 0; border-radius: 50%; background: var(--w-player-fg); color: var(--w-player); display: flex; align-items: center; justify-content: center; }
.w-play .w-i { width: 14px; height: 14px; }
.w-play-sm { width: 32px; height: 32px; }
.w-pbtn { min-width: 32px; height: 32px; flex-shrink: 0; padding: 0 6px; border-radius: 10px; color: var(--w-player-body); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.w-pbtn:hover { background: var(--w-player-hover); color: var(--w-player-fg); }
.w-pbtn .w-i { width: 16px; height: 16px; }
.w-player-time { font-size: 13px; color: var(--w-player-body); white-space: nowrap; }
.w-player-title { flex: 1; min-width: 0; margin-left: 4px; font-size: 13px; color: var(--w-player-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.w-part { height: 28px; padding: 0 10px; border-radius: 9px; background: var(--w-player-hover); color: var(--w-player-body); font-size: 12px; font-weight: 500; }
.w-part[aria-pressed="true"] { background: var(--w-player-fg); color: var(--w-player); }
.w-player-ctl :focus-visible { outline: 2px solid var(--w-player-muted); outline-offset: 2px; }
.w-miniplayer { display: none; }
/* No picture in the recording: an audio bar without the screen. While probing, the screen stays folded. */
.w-player.is-audio .w-player-stage, .w-player.is-probing .w-player-stage { display: none; }
.w-player.is-audio [data-action="fullscreen"], .w-player.is-probing [data-action="fullscreen"] { display: none; }
.w-player.is-audio, .w-player.is-probing { border-radius: 16px; }
.w-player.is-audio .w-player-ctl, .w-player.is-probing .w-player-ctl { padding: 10px 14px 12px; }
.w-about .w-h3 { margin-bottom: 0; }
.w-about-label { margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-talk { margin-top: 4px; }
.w-talk-row { display: flex; align-items: center; gap: 10px; height: 28px; font-size: 13px; }
.w-talk-name { width: 72px; color: var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-talk-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--secondary); overflow: hidden; }
.w-talk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--w-bar); }
.w-talk-pct { width: 34px; text-align: right; color: var(--muted-foreground); }
.w-dl { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px 12px; margin: 16px 0 0; font-size: 13px; line-height: 20px; }
.w-dl dt { color: var(--muted-foreground); }
.w-dl dd { margin: 0; color: var(--body); }
.w-dl-top { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.w-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.w-agenda { margin: 8px 0 0; color: var(--body); white-space: pre-line; }
.w-people .w-h3 { margin-bottom: 8px; }
.w-person-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.w-person-row .w-muted { font-size: 13px; }
.w-history-row { padding: 6px 10px; font-size: 13px; line-height: 20px; }
.w-history-row b { display: block; font-weight: 500; }
.w-history-row span { color: var(--muted-foreground); }

/* Access popover */
.w-access .w-h3 { font-size: 15px; }
.w-access-radios { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.w-access-kinds { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0 30px; }
.w-access-foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-access-foot .w-i { width: 15px; height: 15px; }

/* Send sheet */
.w-sheet { position: fixed; z-index: 41; top: 12px; right: 12px; bottom: 12px; width: 480px; max-width: calc(100% - 24px); display: flex; flex-direction: column; border-radius: 20px; background: var(--card); color: var(--foreground); box-shadow: var(--w-sheet-shadow); overflow: hidden; animation: w-sheet .22s ease-out; font-size: 14px; line-height: 22px; }
@keyframes w-sheet { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* A sheet drawn again on every change in it: only its first paint slides in (app/repaint-keep.js stands the later ones still). */
.w-sheet.is-settled { animation: none; }
.w-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 0 24px; }
.w-sheet-body { flex: 1; overflow: auto; padding: 12px 24px 24px; }
.w-sheet-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); }
.w-sheet-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); font-size: 13px; line-height: 20px; color: var(--body); }
.w-sheet-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--danger-bg); color: var(--danger); font-size: 13px; }
.w-sheet-quiet { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-sheet-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-sheet-share span { flex: 1 1 220px; }
.w-sheet-gap { margin-top: 24px; }
.w-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.w-rchip { height: 32px; padding: 0 10px 0 4px; display: inline-flex; align-items: center; gap: 8px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--secondary); font-size: 13px; font-weight: 500; }
.w-rchip .w-i { width: 14px; height: 14px; }
.w-mail { margin-top: 8px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--background); font-size: 13px; line-height: 20px; color: var(--body); }
.w-mail-text { margin-top: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Create form (inside the existing modal) */
.w-form { display: flex; flex-direction: column; }
.w-title-input { width: 100%; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input); color: var(--foreground); font-size: 17px; font-weight: 500; outline: none; }
.w-title-input:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--secondary); }
.w-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.w-form-row:first-of-type { margin-top: 16px; }
.w-fld { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: var(--input); color: var(--foreground); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; outline: none; }
.w-fld:focus, .w-fld:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--secondary); }
.w-fld input { border: 0; outline: 0; background: transparent; color: inherit; font-size: 14px; }
.w-fld-time { width: 104px; }
.w-fld .w-i { color: var(--muted-foreground); }
.w-form-gap { margin-top: 20px; }
.w-people-field { position: relative; margin-top: 8px; }
.w-pfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input); }
.w-pfield:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 3px var(--secondary); }
.w-pfield input { flex: 1; min-width: 140px; height: 28px; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: 14px; }
.w-pchip { height: 28px; padding: 0 4px 0 3px; display: inline-flex; align-items: center; gap: 6px; border-radius: 14px; background: var(--secondary); font-size: 13px; font-weight: 500; }
.w-pchip .w-av { background: var(--card); }
.w-pchip-x { width: 20px; height: 20px; padding: 0; color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; }
.w-pchip-x .w-i { width: 12px; height: 12px; }
.w-psug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 2; padding: 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--w-pop-shadow); }
.w-psug[hidden] { display: none; }
.w-psug-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border-radius: 10px; text-align: left; font-size: 14px; color: var(--foreground); }
.w-psug-opt:hover, .w-psug-opt:focus-visible { background: var(--hover); }
.w-psug-opt .w-muted { font-size: 13px; }
.w-psug-guest { width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--border-strong); color: var(--muted-foreground); display: flex; align-items: center; justify-content: center; }
.w-options-toggle { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--border); text-align: left; color: var(--foreground); }
.w-options-toggle b { display: block; font-weight: 500; }
.w-options-toggle small { display: block; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-options { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.w-options[hidden] { display: none; }
.w-opt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; font-size: 14px; }
.w-native-check { width: 18px; height: 18px; accent-color: var(--primary); }
.w-series-note { margin-top: 8px; }
.w-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px -24px -20px; padding: 16px 24px; border-top: 1px solid var(--border); }
.w-form .w-check { min-height: 36px; }

/* ---------- Settings ---------- */
.w-settings-back { display: none; }
/* The menu stands beside the section at every width above the phone and stays in view while the section scrolls. It
   never wraps above the section: a sticky menu there would ride over the section's rows. On a phone it is a plain
   block above the section (see the 760 px rules). */
.w-settings-layout { display: grid; grid-template-columns: minmax(176px, 220px) minmax(0, 640px); align-items: start; gap: 24px 40px; margin-top: 16px; }
.w-snav { position: sticky; top: 24px; min-width: 0; max-height: calc(100dvh - 48px); overflow-y: auto; }
.w-snav-group { margin: 20px 0 4px 10px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.w-snav-group:first-child { margin-top: 4px; }
.w-snav-item { display: flex; align-items: center; width: 100%; height: 34px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--body); text-align: left; }
.w-snav-item:hover { background: var(--hover); }
.w-snav-item.is-on { background: var(--secondary); color: var(--foreground); font-weight: 500; }
.w-sindex { display: none; }
.w-scontent { min-width: 0; padding-bottom: 96px; }
.w-section-text { margin: 4px 0 0; color: var(--muted-foreground); }
.w-srow { display: flex; align-items: center; gap: 24px; padding: 16px 0; border-top: 1px solid var(--border); }
.w-scontent > .w-srow:first-of-type, .w-sform > .w-srow:first-child { margin-top: 20px; }
.w-srow-top { align-items: flex-start; }
.w-srow-copy { flex: 1; min-width: 0; }
.w-srow-label { font-weight: 500; }
.w-srow-hint { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-srow-control { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.w-saved { font-size: 13px; color: var(--muted-foreground); }
.w-mi-choice > span { flex: 1; }
.w-mi-choice[aria-checked="true"] { font-weight: 500; }
.w-mi-choice[aria-checked="true"] .w-i { color: var(--foreground); }
/* A group heading inside a section sits as close to its first row as the section heading does. */
.w-scontent > .w-h3 + .w-srow { margin-top: 12px; }
.w-sform { margin-top: 0; }
.w-sblock { padding: 0 0 16px; }
.w-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.w-span2 { grid-column: 1 / -1; }
.w-sfield { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.w-sgrid .w-sfield { margin-top: 0; }
.w-sdetails { padding: 12px 0; border-top: 1px solid var(--border); }
.w-sdetails > summary { cursor: pointer; font-weight: 500; }
.w-server-details { margin-top: 24px; }
.w-status-card { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 14px 16px; }
.w-status-card b { font-weight: 500; }
.w-test-result .w-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.w-draftbar { position: sticky; bottom: 16px; z-index: 6; display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 10px 10px 10px 16px; border-radius: 16px; background: var(--w-tip); color: var(--w-tip-fg); box-shadow: var(--w-pop-shadow); }
.w-draftbar[hidden] { display: none; }
.w-draft-cancel { background: transparent; border-color: var(--w-player-track); color: inherit; }
.w-draft-cancel:hover { background: var(--w-player-hover); }
.w-draft-save { background: var(--w-tip-fg); border-color: var(--w-tip-fg); color: var(--w-tip); }
.w-draft-save:hover { background: var(--w-tip-fg); opacity: .9; }
.w-profile-row { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding-bottom: 16px; }
.w-profile-row b { display: block; font-size: 15px; }
.w-profile-row .w-muted { font-size: 13px; }
.w-member { display: inline-flex; align-items: center; gap: 10px; }
.w-sgap { margin-top: 24px; }
.w-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.w-stats div { padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); }
.w-stats b { display: block; font-size: 20px; line-height: 28px; font-weight: 600; }
.w-stats span { font-size: 13px; line-height: 18px; color: var(--muted-foreground); }

/* ---------- Team, login ---------- */
.w-team { margin-top: 20px; max-width: 820px; }
.w-team-search { margin-top: 20px; max-width: 360px; }
.w-login { min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 48px; background: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 14px; line-height: 22px; }
.w-login-col { width: 420px; max-width: 100%; }
.w-login-brand { margin-bottom: 32px; }
.w-login-list { margin: 12px 0 16px; display: flex; flex-direction: column; }
.w-login-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 12px; margin: 0 -12px; border-radius: 12px; border-bottom: 1px solid var(--border); text-align: left; color: var(--foreground); }
.w-login-row:hover { background: var(--hover); }
.w-login-row b { display: block; font-weight: 500; }
.w-login-row small { display: block; font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.w-login-row .w-i { color: var(--muted-foreground); }

/* Legacy class names kept for tests: neutralise their older rules. */
.w-processing.processing-card { display: block; padding: 20px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); text-align: left; color: var(--foreground); }
.w-state.processing-card, .w-state.locked-card { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; padding: 28px 0 0; text-align: left; color: var(--foreground); }
.w-locked.locked-card { display: block; padding: 0; text-align: left; color: var(--foreground); }
.w-shell .processing-card h2, .w-shell .locked-card h2 { margin: 0; text-align: left; }
.w-shell .processing-card p, .w-shell .locked-card p { max-width: none; margin: 4px 0 0; text-align: left; }
.w-shell .processing-card .w-btn, .w-shell .locked-card .w-btn { margin: 0; }
.w-shell .processing-card svg, .w-shell .locked-card svg { margin: 0; }
.w-shell .processing-card .w-step-ic svg { width: 12px; height: 12px; }
.w-shell .processing-card .w-step-ic .w-spin { width: 16px; height: 16px; }
.w-shell .w-state-ic svg { width: 18px; height: 18px; }
.w-shell .w-quiet-line svg { width: 14px; height: 14px; }
.w-empty.meetings-list { display: block; padding: 24px 0; text-align: left; border-top: 0; }
.w-list.meetings-list, .w-arch-list.meetings-list { border-top: 0; }
.w-mail.email-preview { padding: 16px; margin: 8px 0 0; border-radius: 16px; background: var(--background); }
.w-row.person-card { text-align: left; padding: 0 12px; background: transparent; border: 0; border-radius: 12px; }
.w-login-row.user-option { padding: 0 12px; gap: 12px; border-radius: 12px; }

/* ---------- One column below 1100 px ---------- */
@media (max-width: 1100px) {
  .w-detail:not(.w-detail-plain) { flex-direction: column; gap: 20px; }
  .w-detail:not(.w-detail-plain) .w-dcol-main { width: 100%; }
  .w-detail:not(.w-detail-plain) .w-dcol-side { display: contents; }
  .w-player-wrap { order: -1; width: 100%; max-width: 720px; }
  .w-about-wrap { order: 2; width: 100%; }
  .w-detail-plain { flex-direction: column; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .w-main { padding: 16px 16px 64px; }
  .w-header-in { padding: 0 8px 0 16px; min-height: 56px; gap: 4px; flex-wrap: nowrap; }
  .w-navs, .w-new-btn, .w-search-text, .w-search-pill kbd { display: none; }
  .w-header-title { display: block; margin-left: 4px; }
  .w-search-pill { width: 44px; height: 44px; padding: 0; justify-content: center; background: transparent; color: var(--body); }
  .w-search-pill .w-i { width: 20px; height: 20px; }
  .w-avatar-btn { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .w-popwrap:has(.w-new-btn) { display: none; }
  .w-phone-only { display: flex !important; }
  .w-desk-only { display: none !important; }
  .has-phonebar .w-header { display: none; }
  .w-phonebar { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px; background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 16; }
  .w-h1 { font-size: 26px; line-height: 32px; }
  .w-cmd { top: 0; left: 0; transform: none; width: 100%; max-width: 100%; height: 100dvh; border-radius: 0; display: flex; flex-direction: column; animation: none; }
  .w-cmd-field input { font-size: 16px; } /* smaller text makes iOS zoom the page on focus */
  .w-cmd-field input::placeholder { font-size: 15px; }
  .w-cmd-field .cmdk-esc, .cmdk-keys { display: none; }
  .w-cmd-field .cmdk-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; }
  .w-cmd-list { flex: 1; min-height: 0; max-height: none; }
  .w-cmd-opt { min-height: 52px; }
  .cmdk-second { right: 6px; width: 44px; height: 44px; }
  .w-cmd-foot { justify-content: center; padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .w-btn-lg-phone { height: 44px; font-size: 15px; }
  /* A small control keeps its look but takes a finger: its target reaches 44 px past its edges, as .tk-check does.
     :where keeps the position weightless, so a control placed absolute by its feature stays where it is. */
  :where(.w-btn, .w-ib, .w-back) { position: relative; }
  .w-btn::before, .w-ib::before, .w-back::before { content: ""; position: absolute; inset: -4px 0; }
  .w-btn-sm::before { inset: -6px 0; }
  .w-ib::before { inset: -4px; }
  .w-ib-sm::before { inset: -8px; }
  .w-back::before { inset: -8px 0; }
  .w-tab { height: 44px; }

  /* Phone layouts */
  .w-tip { display: none; }
  .w-shell.has-phonebar .w-main { display: flex; flex-direction: column; }
  .w-shell.has-phonebar .w-main > * { min-width: 0; }
  .w-shell.has-phonebar .w-detail:not(.w-detail-plain) { display: contents; }
  .w-shell.has-phonebar .w-detail:not(.w-detail-plain) .w-dcol-main { order: 1; margin-top: 16px; }
  .w-shell.has-phonebar .w-player-wrap { margin-top: -16px; margin-bottom: 16px; }
  .w-shell.has-phonebar .w-about-wrap { order: 3; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); }
  .w-live-card { margin: 0 -4px; padding: 16px; }
  .w-row-time { width: 44px; }
  .w-row-main { gap: 14px; }
  .w-row-hover, .w-att-x { opacity: 1; }
  .w-row-copy-link, .w-row-repeat { display: none; }
  .w-row.is-done .w-row-side::after { display: none; }
  .w-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .w-att-x { top: 4px; right: -6px; width: 44px; height: 44px; }
  .w-meetings-tabs { margin-top: 32px; }
  .w-hit { flex-direction: column; gap: 2px; }
  .w-hit-where { width: auto; }
  .w-hit-go { display: none; }
  .w-arch-date { width: 84px; }
  /* Phone: the labels go under the title, «Назначить заново» under them, both in the title column. */
  .w-arch-row { flex-wrap: wrap; }
  .w-arch-main { flex-basis: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 2px 12px; padding: 10px 12px; }
  .w-arch-state { grid-column: 2; white-space: normal; flex-wrap: wrap; gap: 4px 8px; }
  .w-arch-redo { height: 36px; margin: -2px 12px 12px 108px; }
  .w-mhead { margin-top: 4px; }
  .w-mhead-copy .w-h1 { font-size: 22px; line-height: 28px; }
  .w-mhead-meta { gap: 4px 12px; font-size: 13px; }
  /* Only «⋯» to show: it stays beside the title, not alone on a line of its own. */
  .w-mhead:has(> .w-mhead-actions > .w-popwrap:only-child) { flex-wrap: nowrap; gap: 8px; }
  .w-shell.has-phonebar .w-main > .w-back:first-child, .w-narrow > .w-back:first-child { display: none; }
  .w-phonebar .w-btn-sm { height: 36px; }
  .w-phonebar .w-ib { width: 44px; height: 44px; }
  .w-player-wrap { margin: 0 -16px; width: calc(100% + 32px); max-width: none; }
  .w-player { border-radius: 0; }
  .w-miniplayer:not([hidden]) { position: fixed; left: 0; right: 0; top: 56px; z-index: 14; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 12px; background: var(--w-player); color: var(--w-player-fg); }
  .w-mini-time { font-size: 13px; color: var(--w-player-body); }
  .w-mini-title { flex: 1; min-width: 0; font-size: 13px; color: var(--w-player-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-mini-up { color: var(--w-player-body); }
  .w-item { margin: 0 -8px; padding: 10px 8px; }
  .w-item-body { padding-right: 28px; }
  .w-item-acts { opacity: 1; top: 6px; right: 0; }
  .w-line-body { padding-right: 0; }
  .w-line-acts { display: none; }
  .w-dl { grid-template-columns: 112px minmax(0, 1fr); }
  .w-sheet { top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 0; }
  .w-sheet-body { padding: 12px 16px 24px; }
  .w-sheet-head { padding: 12px 8px 0 16px; }
  .w-sheet-foot { padding: 12px 16px; }
  .w-sheet-foot .w-btn { height: 44px; }
  .w-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-width: none; max-height: 80dvh; overflow: auto; border-radius: 20px; }
  .w-mi { min-height: 44px; }
  .w-settings.is-index .w-scontent, .w-settings.is-index .w-snav { display: none; }
  .w-settings.is-index .w-sindex { display: block; width: 100%; }
  .w-sindex .settings-title { margin-bottom: 16px; }
  .w-settings.is-section .w-snav, .w-settings.is-section .w-sindex, .w-settings.is-section .w-settings-h1 { display: none; }
  .w-settings.is-section .w-settings-back { display: inline-flex; height: 44px; }
  .w-settings-layout { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  .w-snav { position: static; max-height: none; overflow: visible; }
  .w-scontent { padding-bottom: 72px; }
  .w-sindex-profile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); text-align: left; color: var(--foreground); }
  .w-sindex-profile b { display: block; font-size: 15px; font-weight: 500; }
  .w-sindex-profile small { display: block; font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
  .w-sindex-group { margin: 20px 4px 6px; font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
  .w-sindex-box { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--card); }
  .w-sindex-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); font-size: 15px; text-align: left; color: var(--foreground); }
  .w-sindex-item:last-child { border-bottom: 0; }
  .w-sindex-item .w-muted { font-size: 14px; }
  .w-sindex-item .w-i { color: var(--muted-foreground); }
  .w-srow { flex-wrap: wrap; gap: 8px 16px; }
  .w-switch { width: 44px; height: 44px; background: transparent; }
  .w-switch[aria-checked="true"] { background: transparent; }
  .w-switch::before { content: ""; position: absolute; left: 4px; top: 12px; width: 36px; height: 20px; border-radius: 10px; background: var(--switch-off); transition: background-color .15s; }
  .w-switch[aria-checked="true"]::before { background: var(--primary); }
  .w-switch::after { top: 14px; left: 6px; z-index: 1; }
  .w-switch[aria-checked="true"]::after { left: 22px; }
  .w-sgrid { grid-template-columns: 1fr; }
  .w-schoice { min-width: 0; }
  /* The trigger already shows the saved value; «Сохранено» beside it would crush the label on a phone (still announced). */
  .w-srow-control:has(.w-schoice) .w-saved { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .w-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-form-foot { margin: 16px -16px -16px; padding: 12px 16px; }
  .w-form-foot .w-btn { height: 44px; }
  .w-login { padding-top: 48px; }
}

/* Form controls: one look for text inputs and textareas (the selects are shared/select.js). The older rules gave 8px
   corners in forms and settings while buttons already have 12px. */
:is(.w-input.w-input, .w-textarea.w-textarea, .field :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea)) {
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--input-border); border-radius: 12px;
  background-color: var(--input); color: var(--foreground);
  font-size: 14px; line-height: 20px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
textarea:is(.w-textarea.w-textarea, .field textarea) { min-height: 88px; padding: 10px 14px; line-height: 22px; }
/* A textarea drawn as .w-input is as tall as its rows: the height of a one-line field cut it to one line. */
textarea.w-input.w-input { height: auto; padding-block: 8px; }
:is(.w-input.w-input, .w-textarea.w-textarea, .field :is(input, textarea)):hover:not(:disabled, :focus-visible) { border-color: var(--border-strong); }
:is(.w-input.w-input, .w-textarea.w-textarea, .field :is(input, textarea)):focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px var(--focus); outline: none; }
:is(.w-input.w-input, .w-textarea.w-textarea, .field :is(input, textarea))::placeholder { color: var(--muted-foreground); opacity: 1; }
.w-fld { height: 40px; }
/* iOS zooms the page into a field whose text is under 16px, and does not zoom back: on a phone every text field is 16px.
   One rule for all of them, as specific as the look above, so a field's own size never wins it back. */
@media (max-width: 760px) {
  :is(.w-input.w-input, .w-textarea.w-textarea, .field :is(input, textarea), .w-fld input, .w-searchbox input, .w-pfield input, .w-arch-search input, .w-launch-join input, .auth-input, .nm-field textarea, .w-pick-find, .chat-compose > form input) { font-size: 16px; }
}

/* Calendar subscription address: a field with its own copy button. */
.w-copyfield { display: flex; align-items: center; gap: 8px; }
.w-copyfield .w-input { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; text-overflow: ellipsis; cursor: text; }
.w-copyfield .w-btn { flex-shrink: 0; height: 40px; }
.w-sblock .w-note { margin: 10px 0 0; }

/* ---------- Chat ----------
   Telegram-like structure in the product's own palette: flat bubbles with a tail on the last one of a group,
   the author's name on top in its own colour, time with a "sent" tick in the corner, reactions as pills
   inside the bubble. Ink and graphite, with the mint accent for your own messages and reactions. One design for the call panel and the meeting page; emoji live in
   a tray above the composer, never inside the conversation. */
:is(.chat-message, .message-quote).c0 { --author: var(--chat-name-0); }
:is(.chat-message, .message-quote).c1 { --author: var(--chat-name-1); }
:is(.chat-message, .message-quote).c2 { --author: var(--chat-name-2); }
:is(.chat-message, .message-quote).c3 { --author: var(--chat-name-3); }
:is(.chat-message, .message-quote).c4 { --author: var(--chat-name-4); }
:is(.chat-message, .message-quote).c5 { --author: var(--chat-name-5); }
:is(.chat-message, .message-quote).c6 { --author: var(--chat-name-6); }

/* The chat sits on its own backdrop: in the call panel (chat tab) and around the meeting page chat. */
.room-panel:has(> .chat-content.panel-chat) { background: var(--chat-bg); }
.w-chat-live { padding: 12px; border-radius: 16px; background: var(--chat-bg); }

/* Rows: tight inside a group of one author, air between groups; the avatar closes a group. */
.chat-message { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 2px; }
.chat-message.last { margin-bottom: 8px; }
.chat-message .avatar { flex-shrink: 0; width: 32px; height: 32px; margin: 0; border-radius: 50%; background: color-mix(in srgb, var(--author) 26%, transparent); color: var(--author); font-size: 12px; font-weight: 600; letter-spacing: -.02em; }
.chat-avatar-gap { flex-shrink: 0; width: 32px; }
.chat-message .message-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; min-width: 0; }
.chat-message.own .message-body { align-items: flex-end; }

/* Bubble: at most ~three quarters of the row; the rest holds the two hover actions and the tail. */
.chat-message .message-bubble { --bubble: var(--chat-in); position: relative; width: fit-content; max-width: min(76%, 42ch); padding: 6px 11px 7px; border-radius: 16px; background: var(--bubble); color: var(--chat-in-fg); overflow-wrap: anywhere; }
.chat-message.own .message-bubble { --bubble: var(--chat-out); color: var(--chat-out-fg); }
.chat-message.other:not(.first) .message-bubble { border-top-left-radius: 5px; }
.chat-message.other:not(.last) .message-bubble { border-bottom-left-radius: 5px; }
.chat-message.own:not(.first) .message-bubble { border-top-right-radius: 5px; }
.chat-message.own:not(.last) .message-bubble { border-bottom-right-radius: 5px; }
/* The tail: a corner square with a concave cut, in the colour of the bubble. */
.chat-message.last:not(.jumbo) .message-bubble::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 11px; background: var(--bubble); }
.chat-message.other.last:not(.jumbo) .message-bubble { border-bottom-left-radius: 0; }
.chat-message.other.last:not(.jumbo) .message-bubble::after { right: 100%; -webkit-mask: radial-gradient(circle 9px at 0 0, transparent 8.5px, black 9px); mask: radial-gradient(circle 9px at 0 0, transparent 8.5px, black 9px); }
.chat-message.own.last:not(.jumbo) .message-bubble { border-bottom-right-radius: 0; }
.chat-message.own.last:not(.jumbo) .message-bubble::after { left: 100%; -webkit-mask: radial-gradient(circle 9px at 100% 0, transparent 8.5px, black 9px); mask: radial-gradient(circle 9px at 100% 0, transparent 8.5px, black 9px); }

.chat-message .message-author { margin: 0 0 1px; color: var(--author); font-size: 14px; font-weight: 600; line-height: 18px; }
.chat-message .message-bubble p { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: 14px; line-height: 20px; white-space: pre-wrap; }
.chat-message .message-bubble a { color: var(--chat-accent-link, inherit); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }
.chat-message .message-bubble a:hover { text-decoration-color: currentColor; }

/* Time and the sent tick: in the corner, on the last line when it fits. */
.chat-message .message-time { position: absolute; right: 9px; bottom: 5px; display: inline-flex; align-items: center; gap: 3px; color: var(--chat-in-meta); font-size: 11.5px; line-height: 14px; font-variant-numeric: tabular-nums; pointer-events: none; }
.chat-message.own .message-time { color: var(--chat-out-meta); }
.chat-message .message-time svg { width: 14px; height: 14px; color: var(--chat-tick); stroke-width: 2.2; }
.message-time-gap { display: inline-block; width: 40px; height: 1px; }
.chat-message.own .message-time-gap { width: 58px; }

/* Reactions: pills inside the bubble, the time at the end of their row. */
.chat-message .message-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 6px -4px 0 -4px; }
.chat-message .message-foot .message-time { position: static; flex-shrink: 0; padding: 0 3px 2px 0; }
.chat-message .message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.chat-message .message-reaction { display: inline-flex; align-items: center; gap: 5px; height: 26px; min-height: 26px; padding: 0 9px 0 7px; border: 0; border-radius: 13px; background: var(--chat-chip); color: inherit; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .12s; }
.chat-message.own .message-reaction { background: var(--chat-chip-out); }
.chat-message .reaction-emoji { font-size: 16px; line-height: 1; }
.chat-message .reaction-count { font-variant-numeric: tabular-nums; }
.chat-message button.message-reaction:hover { background: var(--chat-chip-hover); }
.chat-message.own button.message-reaction:hover { background: var(--chat-chip-out-hover); }
/* Your own reaction is a filled pill, not an outline. */
.chat-message .message-reaction.selected { background: var(--chat-accent); color: var(--chat-accent-fg); }
.chat-message.own .message-reaction.selected { background: var(--chat-chip-out-on); color: var(--chat-chip-out-on-fg); }
.chat-message span.message-reaction { cursor: default; }
.chat-message .message-reaction:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* One to three emoji alone: large, no bubble. */
.chat-message.jumbo .message-bubble { padding: 0; background: none; }
.chat-message.jumbo .message-bubble p { font-size: 40px; line-height: 48px; }
.chat-message.jumbo .message-time-gap { display: none; }
.chat-message.jumbo .message-bubble > .message-time { position: static; display: flex; justify-content: flex-start; }
.chat-message.own.jumbo .message-bubble > .message-time { justify-content: flex-end; color: var(--chat-in-meta); }

/* Quote: a bar and the quoted author's name in their colour; click goes to the original. */
.chat-message .message-quote { display: block; min-width: 0; margin: 2px 0 4px; padding: 3px 8px 4px 10px; border: 0; border-radius: 4px 8px 8px 4px; background: color-mix(in srgb, var(--author) 14%, transparent); box-shadow: inset 3px 0 0 var(--author); color: inherit; font: inherit; text-align: left; }
.chat-message.own .message-quote { --author: var(--chat-out-fg); background: var(--chat-chip-out); }
.chat-message .message-quote:has(.quote-jump):hover { background: color-mix(in srgb, var(--author) 22%, transparent); }
.chat-message.own .message-quote:has(.quote-jump):hover { background: var(--chat-chip-out-hover); }
.chat-message .quote-jump { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.chat-message .quote-jump:focus-visible { border-radius: 4px; outline: 2px solid var(--ring); outline-offset: 3px; }
.chat-message .message-quote b { display: block; color: var(--author); font-size: 13px; font-weight: 600; line-height: 17px; }
.chat-message .message-quote span { display: -webkit-box; max-width: 34ch; overflow: hidden; font-size: 13px; line-height: 18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Actions appear beside the bubble on hover or focus, and stay while the tray reacts to this message. */
.chat-message .message-actions { position: absolute; top: 50%; left: calc(100% + 8px); z-index: 1; display: flex; gap: 2px; transform: translateY(-50%); opacity: 0; pointer-events: none; }
.chat-message.own .message-actions { right: calc(100% + 8px); left: auto; flex-direction: row-reverse; }
.chat-message:hover .message-actions, .chat-message:focus-within .message-actions, .chat-message.is-target .message-actions { opacity: 1; pointer-events: auto; }
.chat-message .message-action { display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-in-meta); cursor: pointer; }
.chat-message .message-action svg { width: 17px; height: 17px; }
.chat-message .message-action:hover, .chat-message .message-action.open { background: var(--chat-chip); color: var(--foreground); }
.chat-message .message-action:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.chat-message.is-target .message-bubble { box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 35%, transparent); }
.chat-message.flash .message-bubble { animation: chat-flash 1.5s ease-out; }
@keyframes chat-flash { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--chat-accent) 50%, transparent); } to { box-shadow: 0 0 0 4px transparent; } }
@media (hover: none) { .chat-message .message-actions { opacity: .55; pointer-events: auto; } }

/* Composer: one pill with the emoji button, the field and a round send button that lights up with text. */
.chat-compose > form { display: flex; align-items: center; gap: 2px; min-height: 46px; padding: 4px; border: 1px solid transparent; border-radius: 23px; background: var(--chat-composer); transition: border-color .15s; }
.chat-compose > form:focus-within { border-color: color-mix(in srgb, var(--chat-accent) 55%, transparent); }
.chat-compose > form input { padding: 6px 6px; font-size: 14.5px; }
.chat-compose .compose-emoji { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-in-meta); }
.chat-compose .compose-emoji svg { width: 20px; height: 20px; }
.chat-compose .compose-emoji:hover, .chat-compose .compose-emoji.open { background: var(--chat-chip); color: var(--foreground); }
.chat-compose button[type="submit"] { width: 36px; height: 36px; min-height: 36px; border-radius: 50%; background: var(--chat-accent); color: var(--chat-accent-fg); transition: background-color .15s, color .15s; }
.chat-compose form:has(input:placeholder-shown) button[type="submit"] { background: transparent; color: var(--chat-in-meta); }
.chat-compose :is(.compose-emoji, button[type="submit"]):focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.chat-compose .quote-draft { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 6px 6px 12px; border: 0; border-radius: 12px; background: var(--chat-composer); box-shadow: inset 3px 0 0 var(--chat-accent); }
.chat-compose .quote-draft > div { flex: 1; min-width: 0; }
.chat-compose .quote-draft b { display: block; margin: 0; color: var(--chat-accent-link, var(--chat-accent)); font-size: 13px; font-weight: 600; line-height: 17px; }
.chat-compose .quote-draft span { display: block; overflow: hidden; color: var(--chat-in-meta); font-size: 13px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.chat-compose .quote-draft .icon-btn { width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-in-meta); }

/* Emoji tray: reactions to one message, or emoji for the draft. */
.emoji-tray { margin: 0 0 8px; overflow: hidden; border: 1px solid var(--chat-tray-border); border-radius: 18px; background: var(--chat-tray); animation: tray-in .16s ease-out; }
@keyframes tray-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-compose.tray-react > form, .chat-compose.tray-react .quote-draft { display: none; }
.emoji-tray .tray-head { display: flex; align-items: center; gap: 8px; padding: 8px 6px 4px 14px; }
.emoji-tray .tray-title { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.emoji-tray .tray-title b { flex-shrink: 0; color: var(--foreground); font-size: 13px; font-weight: 600; }
.emoji-tray .tray-title span { min-width: 0; overflow: hidden; color: var(--chat-in-meta); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.chat-compose .tray-close { display: grid; place-items: center; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--chat-in-meta); }
.chat-compose .tray-close svg { width: 16px; height: 16px; }
.chat-compose .tray-close:hover { background: var(--chat-chip); color: var(--foreground); }
.emoji-tray .tray-quick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 2px 8px 8px; }
.chat-compose .tray-quick button { width: auto; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: inherit; font-size: 24px; line-height: 1; transition: transform .12s, background-color .12s; }
.chat-compose .tray-quick button:hover { background: var(--chat-chip); transform: scale(1.12); }
.chat-compose .tray-quick button.selected { background: var(--chat-chip-hover); }
.chat-compose :is(.tray-quick button, .tray-close):focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.emoji-tray .tray-picker {
  display: block; width: 100%; height: 260px; border-top: 1px solid var(--chat-tray-border);
  --background: transparent; --border-size: 0; --border-color: transparent; --border-radius: 0;
  --button-hover-background: var(--chat-chip); --button-active-background: var(--chat-chip-hover);
  --category-font-color: var(--chat-in-meta); --category-font-size: 12px;
  --input-border-color: var(--chat-tray-border); --input-border-radius: 10px; --input-font-color: var(--foreground); --input-font-size: 14px; --input-placeholder-color: var(--chat-in-meta); --input-padding: .35rem .6rem;
  --indicator-color: var(--chat-accent); --outline-color: var(--ring);
  --num-columns: 8; --emoji-size: 1.3rem; --emoji-padding: .35rem;
}
.emoji-tray .tray-error { margin: 0; padding: 14px; border-top: 1px solid var(--chat-tray-border); color: var(--chat-in-meta); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .emoji-tray, .chat-message.flash .message-bubble { animation: none; }
  .chat-compose .tray-quick button { transition: none; }
  .chat-compose .tray-quick button:hover { transform: none; }
}

/* Meeting form: one vertical rhythm, labels that are blocks (the agenda label was inline and touched its field),
   and the transcription checkbox drawn like the invitation one. */
.w-form .w-label { display: block; margin: 20px 0 6px; }
.w-form .w-people-field { margin-top: 0; }
.w-form-row + .w-note, .w-form > .w-field-error { margin: 6px 0 0; }
.w-form > * { flex-shrink: 0; }
.w-form .w-textarea { display: block; resize: none; }
.w-form .w-fld-date { min-width: 160px; }
.w-options-toggle { margin-top: 20px; }
.w-opt-row { min-height: 44px; }
.w-native-check { appearance: none; -webkit-appearance: none; position: relative; width: 18px; height: 18px; margin: 0 4px 0 0; border: 1.5px solid var(--border-strong); border-radius: 6px; background: transparent; color: var(--primary-foreground); cursor: pointer; transition: background-color .12s, border-color .12s; }
.w-native-check::after { content: ""; position: absolute; inset: 2px; background: currentColor; opacity: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.w-native-check:checked { background: var(--primary); border-color: var(--primary); }
.w-native-check:checked::after { opacity: 1; }
.w-native-check:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* «Когда» in the meeting form: one row of equal fields (day, start, end); under it one muted line with the summary
   and the two quick days as plain text buttons. Everything else in the form is one field per row, 12 px apart. */
.w-form .w-title-input + *, .w-form .w-when-grid + *, .w-form .w-when-meta + *, .w-form .w-people-field + * { margin-top: 12px; }
.w-when-grid { display: grid; grid-template-columns: minmax(0, 1fr) 108px auto 168px; align-items: center; gap: 8px; margin-top: 12px; }
.w-when-grid .w-fld { width: 100%; }
.w-when-dash { color: var(--muted-foreground); }
.w-when-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.w-when-meta + * { margin-top: 12px; }
.w-when-summary { min-width: 0; margin: 0; overflow: hidden; color: var(--muted-foreground); font-size: 13px; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.w-when-summary:empty { display: none; }
.w-when-summary.is-past { color: var(--danger); }
.w-quick { display: flex; flex-shrink: 0; gap: 2px; margin-left: auto; }
.w-quick-day { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted-foreground); font-size: 13px; font-weight: 500; transition: background-color .12s, color .12s; }
.w-quick-day:hover { background: var(--secondary); color: var(--foreground); }
.w-quick-day[aria-pressed="true"] { color: var(--foreground); }
.w-quick-day:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.w-options-toggle small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-options-toggle .w-grow { min-width: 0; }
@media (max-width: 760px) {
  .w-when-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .w-when-grid .w-fld-date { grid-column: 1 / -1; }
  .w-when-dash { display: none; }
  .w-when-meta { flex-wrap: wrap; }
}

/* The one select of the app (shared/select.js): a field that shows the chosen option and a list of our own instead of
   the browser's. The field look fills a form; w-pick-quiet is a line of the meeting window: no border, the value at
   500. The open list stands by its field (placed by select-events.js); a phone shows it as a sheet from the bottom. */
.w-pick { position: relative; display: block; min-width: 0; }
.w-pick-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--input); color: var(--foreground); font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.w-pick-btn .w-i { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted-foreground); }
.w-pick-val { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.w-pick-btn .w-pick-chev { margin-left: auto; }
.w-pick-val.is-empty { color: var(--muted-foreground); }
.w-pick-btn:hover:not(:disabled) { border-color: var(--border-strong); }
.w-pick-btn[aria-expanded="true"], .w-pick-btn:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px var(--focus); outline: none; }
.w-pick-btn:disabled { opacity: .5; cursor: default; }
/* A select in a row of filters or of settings is as wide as its value, within bounds, not as wide as the row. */
.w-pick-fit { display: inline-block; min-width: 168px; max-width: 280px; vertical-align: middle; }
/* The quiet field stands 8px to the left so its text lines up with the text of the other lines; the wrap moves, not
   the button, or the wrap would be 8px narrower than its button and cut the value. */
.w-pick-quiet { display: inline-block; max-width: calc(100% + 8px); margin-left: -8px; }
.w-pick-quiet .w-pick-btn { width: auto; max-width: 100%; height: 32px; gap: 6px; padding: 0 8px; border-color: transparent; background: transparent; font-weight: 500; }
/* The same quiet look for a button that opens a menu of actions rather than a list of values («Итоги по типу …»). */
.w-quiet-trigger { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + 8px); height: 32px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; transition: background-color .15s; }
.w-quiet-trigger-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.w-quiet-trigger .w-i { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted-foreground); }
.w-pick-quiet .w-pick-btn:hover:not(:disabled), .w-quiet-trigger:hover { border-color: transparent; background: var(--secondary); }
.w-pick-quiet .w-pick-btn[aria-expanded="true"], .w-quiet-trigger[aria-expanded="true"] { border-color: transparent; background: var(--secondary); box-shadow: none; }
/* Without a border the ring of the field would be lost: the quiet ones show the keyboard focus by the outline. */
.w-pick-quiet .w-pick-btn:focus-visible, .w-quiet-trigger:focus-visible { border-color: transparent; outline: 2px solid var(--ring); outline-offset: 1px; }
.w-pickpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: flex; flex-direction: column; min-width: 100%; max-height: 320px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--card); color: var(--foreground); box-shadow: var(--popover-shadow); overflow: hidden; animation: w-pickpop-in .12s ease-out; }
.w-pickpop[hidden] { display: none; }
@keyframes w-pickpop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.w-pickpop-head { display: none; }
.w-pickpop-find { flex-shrink: 0; padding: 6px 6px 0; }
.w-pick-find { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--input); color: var(--foreground); font-size: 14px; }
.w-pick-find:focus { border-color: var(--ring); outline: none; }
.w-pickpop-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.w-pickpop-none { margin: 0; padding: 8px 16px 14px; color: var(--muted-foreground); font-size: 14px; }
.w-pickpop-none[hidden] { display: none; }
.w-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 6px 10px; border-radius: 8px; color: var(--foreground); font-size: 14px; line-height: 20px; text-align: left; font-variant-numeric: tabular-nums; cursor: pointer; }
.w-opt[hidden], .w-opt-group[hidden] { display: none; }
.w-opt-label { display: flex; flex-direction: column; min-width: 0; }
.w-opt-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-opt small { color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
.w-opt:hover, .w-opt.is-active { background: var(--secondary); }
.w-opt.is-selected { font-weight: 600; }
.w-opt[aria-disabled="true"] { opacity: .4; cursor: default; }
.w-opt[aria-disabled="true"]:hover { background: transparent; }
.w-opt-check { flex-shrink: 0; width: 16px; height: 16px; visibility: hidden; }
.w-opt.is-selected .w-opt-check { visibility: visible; }
.w-opt-group { padding: 10px 10px 4px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; line-height: 16px; }
.w-opt-group:first-child { padding-top: 4px; }
.w-pick-scrim { display: none; }
@media (max-width: 760px) {
  .w-pick-btn { height: 44px; }
  .w-pick-fit { max-width: 100%; }
  .w-pick-quiet .w-pick-btn, .w-quiet-trigger { height: 40px; }
  .w-pick.is-open .w-pick-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: var(--w-scrim); }
  .w-pickpop { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; z-index: 71; min-width: 0; max-height: 80dvh; border-radius: 20px; padding-bottom: env(safe-area-inset-bottom); }
  .w-pickpop-head { display: block; padding: 14px 16px 4px; color: var(--muted-foreground); font-size: 13px; font-weight: 600; line-height: 18px; }
  .w-pickpop-head:empty { display: none; }
  .w-pick-find { height: 40px; }
  .w-opt { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .w-pickpop { animation: none; } }

/* A list whose rows line up in columns (the agenda after the call): the text takes the rest of the row, the columns
   after it are the list's --w-cols. Every row lays its cells on the one grid of its list (subgrid), so a value wider in
   one row moves no column in another; the cells of a row share the baseline of its first line. A number column
   (.w-cols-num) is right-aligned in tabular figures; a note of a row (.w-cols-note: a decision, a quote) starts under
   the text and runs the whole row, so a quote reads in long lines rather than in the narrow text column; a quiet select
   fills its column, so its chevron is at the same place in every row. On a phone the number column goes under the text
   and the list keeps the columns of --w-cols-phone. */
.w-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-cols, ); column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.w-cols > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
.w-cols-text { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.w-cols-num { justify-self: end; font-size: 13px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-cols .w-cols-note { grid-column: 1 / -1; justify-self: start; min-width: 0; max-width: 100%; margin: 4px 0 0; }
.w-cols .w-pick-quiet { display: block; max-width: none; }
.w-cols .w-pick-quiet .w-pick-btn { width: 100%; font: inherit; color: inherit; }
@media (max-width: 760px) {
  .w-cols { grid-template-columns: minmax(0, 1fr) var(--w-cols-phone, ); }
  .w-cols-num { grid-column: 1; grid-row: 2; justify-self: start; }
  .w-cols-num:empty { display: none; }
}

.w-empty-cta { display: flex; width: fit-content; margin-top: 12px; }

/* ---------- Home: one column ----------
   A launch bar (start now, schedule, paste a link or code), the permanent room as a quiet line, banners that need
   attention, then one list by day. No side column. */
.w-home { max-width: 760px; margin: 0 auto; }
.w-launch { display: flex; align-items: center; gap: 4px; margin-top: 20px; padding: 6px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); transition: border-color .15s; }
.w-launch:focus-within { border-color: var(--border-strong); }
.w-launch .w-btn { height: 44px; border-radius: 12px; }
.w-launch .w-btn-ghost { border-color: transparent; }
.w-launch-sep { align-self: stretch; width: 1px; margin: 8px 8px; background: var(--border); }
.w-launch-join { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 0 4px 0 12px; color: var(--muted-foreground); }
.w-launch-join .w-i { flex-shrink: 0; width: 16px; height: 16px; }
.w-launch-join input { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--foreground); font-size: 14px; outline: none; }
.w-launch-join input::placeholder { color: var(--muted-foreground); }
.w-launch-go { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px; background: var(--secondary); color: var(--foreground); transition: background-color .12s, color .12s; }
.w-launch-go .w-i { width: 16px; height: 16px; }
.w-launch-go:hover { background: var(--border-strong); }
.w-launch-join:has(input:placeholder-shown) .w-launch-go { background: transparent; color: var(--muted-foreground); }
.w-launch-error { margin: 8px 4px 0; }
.w-roomline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 4px 0; color: var(--muted-foreground); font-size: 13px; line-height: 20px; }
.w-roomline-name { padding: 0; color: var(--foreground); font-weight: 500; }
.w-roomline-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.w-roomline-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-roomline .w-textbtn { color: var(--foreground); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.w-roomline-name:focus-visible, .w-roomline .w-textbtn:focus-visible { border-radius: 4px; outline: 2px solid var(--ring); outline-offset: 2px; }
/* «Следующая встреча»: one mint card for a soon meeting, amber once its time has come and nobody has joined.
   The tint lies over the card colour, so the avatar rings repeat both layers. No animation. */
.w-next { --next: var(--soon); --next-bg: var(--soon-bg); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; padding: 16px 16px 16px 20px; border: 1px solid var(--soon-border); border-radius: 16px; background: linear-gradient(var(--next-bg), var(--next-bg)), var(--card); }
.w-next.is-late { --next: var(--late); --next-bg: var(--late-bg); border-color: var(--late-border); }
.w-home .w-live-card { margin-top: 20px; }
.w-live-card + .w-next { margin-top: 12px; }
.w-next-copy { flex: 1 1 280px; min-width: 0; }
.w-next-when { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--next); }
.w-next-dot { width: 8px; height: 8px; flex-shrink: 0; margin: 0 2px; border-radius: 50%; background: var(--next); box-shadow: 0 0 0 4px var(--next-bg); }
.w-next-title { display: block; max-width: 100%; margin-top: 4px; padding: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--foreground); text-align: left; overflow-wrap: anywhere; }
.w-next-title:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.w-next-meta { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-next-who { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-next-who .w-stack { flex-shrink: 0; }
.w-next .w-stack .w-av { box-shadow: 0 0 0 var(--ring) var(--next-bg), 0 0 0 var(--ring) var(--card); }
.w-next-side { display: flex; align-items: center; flex-shrink: 0; }
.w-next-go { background: var(--soon-action); border-color: var(--soon-action); color: var(--soon-action-fg); }
.w-next-go:hover { background: var(--soon-action); opacity: .88; }
.w-next-wait { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--body); }
.w-row.is-soon .w-row-time { color: var(--soon); font-weight: 600; }
.w-row.is-soon .w-row-time small { font-weight: 400; }
.w-row.is-soon .w-row-when { color: var(--soon); font-weight: 500; }
.w-att-block { margin-top: 20px; }
.w-att { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--secondary); }
.w-att:first-of-type { margin-top: 0; }
.w-att .w-att-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-att .w-att-acts { margin: 0; flex-shrink: 0; }
.w-att .w-att-x { display: none; }
.w-att-perm .w-att-icon { flex-shrink: 0; color: var(--muted-foreground); }
.w-att-perm .w-att-text { flex: 1; min-width: 0; color: var(--foreground); }
.w-home .w-meetings-tabs { margin-top: 28px; }
.w-home .w-day:first-child { margin-top: 18px; }
.w-empty-line b { color: var(--foreground); font-weight: 500; }
/* «Даты серии» and the mark of a moved occurrence. */
.w-moved-note, .w-series-moved { color: var(--warning); }
.w-moved-note { font-weight: 500; }
.w-series-dates { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.w-series-list { margin-top: 8px; }
.w-series-date { padding: 12px 0; border-bottom: 1px solid var(--border); }
.w-series-date:last-child { border-bottom: 0; }
.w-series-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.w-series-when { font-weight: 500; color: var(--foreground); }
.w-series-status { font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-series-moved { font-size: 13px; line-height: 20px; }
.w-series-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.w-series-open { display: inline-flex; align-items: center; gap: 6px; }
.w-series-open .w-i { width: 14px; height: 14px; flex-shrink: 0; }
.w-series-dates .w-inline-error { margin-top: 12px; }
/* The rule of a series and its team over the tabs of its page: one quiet line, a long name wraps, never runs past. */
.m-series-rule { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--body); overflow-wrap: anywhere; }
.m-series-rule > span + span::before { content: "·"; margin-right: 8px; color: var(--muted-foreground); }
.w-series-dates .w-more { margin-top: 12px; }
.form-moved-note { margin-top: 6px; }
@media (max-width: 760px) {
  .w-launch { flex-wrap: wrap; }
  .w-launch .w-launch-start { flex: 1; }
  .w-launch-sep { display: none; }
  .w-launch-join { flex-basis: 100%; order: 3; margin-top: 4px; padding-left: 8px; border-top: 1px solid var(--border); }
  .w-att { flex-wrap: wrap; }
  /* The question takes the row; the answers go under it, in line with the text (icon 16px + gap 12px). */
  .w-att-perm { row-gap: 6px; }
  .w-att-perm .w-att-text { flex-basis: calc(100% - 28px); }
  .w-att-perm .w-att-acts { margin-left: 28px; }
  .w-roomline-url { display: none; }
  .w-next { margin: 20px -4px 0; padding: 16px; }
}