/* Workspace redesign: shell, meetings, meeting page, archive, settings. Classes use the w- prefix;
   colours come only from theme.css tokens. Radii: 10 controls,
   12 frames of groups and lists, 14 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 ---------- */
/* One scale of controls: 36 high with 10px corners, 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; }
/* Repeated row actions look like links; their hit area does not need a painted button. */
.w-link-action { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; border-radius: 4px; text-align: start; overflow-wrap: anywhere; }
.w-link-action:disabled { opacity: .45; cursor: not-allowed; text-decoration: none; }
.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 { 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. A place sets the height of each; the wordmark keeps its proportion, and below
   15 px of height it is narrower than 64 px. */
.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; }
/* A touch screen keeps :hover on the spot of the last tap, so a menu opened under the finger showed its item there as
   chosen: the light follows a pointer that hovers, a finger gets it while it presses. */
@media (hover: hover) { .w-mi:hover { background: var(--hover); } }
.w-mi:active { 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): 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 */
/* The look of a field is the rule «Form controls» below; here only its width. */
.w-input { width: 100%; outline: none; }
.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-mhead-live { display: inline-flex; align-items: center; gap: 8px; }
.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-mark { width: 10px; height: 10px; opacity: 0; }
.w-line:hover .w-line-mark, .w-msg:hover .w-line-mark, .w-line-time:focus-visible .w-line-mark { 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 */
/* Rows like the lines of the transcript: a head opens a group of one author, the messages in it follow without one. */
.w-live-chat .w-h3 { margin-bottom: 8px; }
.w-chat { padding-top: 4px; }
.w-msg { position: relative; display: flex; gap: 12px; margin: 0 -12px; padding: 6px 12px; border-radius: 12px; transition: background-color .12s; }
.w-msg + .w-msg:not(.is-cont) { margin-top: 6px; }
.w-msg.is-cont { padding-top: 0; }
.w-msg:hover { background: var(--hover); }
.w-msg-av { width: 28px; flex-shrink: 0; }
/* The right edge is kept for the time of a message inside a group. */
.w-msg-body { flex: 1; min-width: 0; padding-right: 52px; }
.w-msg-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.w-msg-head b { font-weight: 600; overflow-wrap: anywhere; }
.w-msg-body p { margin: 2px 0 0; color: var(--body); white-space: pre-wrap; overflow-wrap: anywhere; }
.w-msg.is-cont .w-msg-body p { margin-top: 0; }
.w-msg-aside { position: absolute; top: 1px; right: 12px; display: flex; align-items: center; height: 22px; opacity: 0; }
.w-msg:hover .w-msg-aside, .w-msg:focus-within .w-msg-aside { opacity: 1; }
@media (hover: none) { .w-msg-aside { opacity: 1; } }
.w-msg-quote { width: fit-content; max-width: 100%; margin: 4px 0 4px; padding: 4px 10px 5px 12px; border-radius: 4px 10px 10px 4px; background: var(--secondary); box-shadow: inset 2px 0 0 var(--border-strong); font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.w-msg-quote b { display: block; font-size: 12px; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; }
.w-msg-quote span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.w-msg-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 13px; }
.w-msg-reactions span { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--secondary); }
/* .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; }

/* 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; }
/* The title of a section is level with «Настройки» over the menu: one line of 32 px on both sides. */
.w-scontent > .w-h2 { font-size: 20px; line-height: 32px; }
.w-section-text { margin: 4px 0 0; color: var(--muted-foreground); }
/* A group of settings (settings/rows.js): the rows of one subject in one frame, its title above, one note under it.
   The controls of the rows stand in one column at the right edge; a field and a select there have one width, so the
   column keeps its edge from row to row. */
.w-sgroup-title { margin: 32px 0 8px; font-size: 14px; line-height: 20px; }
.w-sgroup { --w-scontrol: 240px; margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
:is(.w-h2, .w-section-text) + :is(.w-sgroup-title, .w-sgroup) { margin-top: 20px; }
.w-sgroup-title + .w-sgroup { margin-top: 0; }
/* A title with a control at its right: the select of a period, the button that adds a row. */
.w-sgroup-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 32px 0 8px; }
.w-sgroup-head > .w-sgroup-title { margin: 0; }
.w-sgroup-head + .w-sgroup { margin-top: 0; }
/* A row and a part read on request (settings/more.js) are lines of the frame alike, the lines between them inset. */
.w-sgroup > :is(.w-srow, .w-sdetails) { margin: 0 16px; padding: 14px 0; border-top: 0; }
.w-sgroup > .w-sdetails { padding-block: 6px; }
.w-sgroup > .w-sdetails[open] { padding-bottom: 14px; }
.w-sgroup > * + :is(.w-srow, .w-sdetails) { border-top: 1px solid var(--border); }
/* A group the server has not given yet holds its state in place of the rows. */
.w-sgroup > :is(.w-state, .w-note) { margin: 0; padding: 16px; }
/* A choice brings its own 10px around it (the box of its hover), so the row of choices takes the rest of the 16px. */
.w-sgroup > .w-srow-choices { padding: 6px 0; }
.w-sgroup .w-srow-control :is(.w-input, .w-pick) { width: var(--w-scontrol); }
.w-sgroup-note { margin: 8px 2px 0; font-size: 13px; line-height: 20px; 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 { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted-foreground); }
.w-srow-control { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* A value to read at the right (an address, a role): it wraps and leaves the label its room, however long it is. */
.w-srow-fact { min-width: 0; max-width: 60%; flex-shrink: 1; justify-content: flex-end; color: var(--body); text-align: right; overflow-wrap: anywhere; }
.w-srow:has(> .w-srow-fact) > .w-srow-copy { min-width: min-content; }
.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; }
  .w-link-action { min-width: 44px; min-height: 44px; }
  /* 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: max(8px, env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 80dvh; overflow: auto; border-radius: 20px; }
  .w-mi { min-height: 44px; font-size: 15px; }
  .w-seg-btn { min-height: 44px; } /* a finger's target, in every segmented control of a phone */
  .w-seg-icon { width: 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; }
  /* A field goes under its label, the whole width: beside it the label would get a word per line. */
  .w-sgroup .w-srow:has(> .w-srow-control :is(.w-input, .w-pick)) > .w-srow-control { flex: 1 1 100%; }
  .w-sgroup .w-srow-control :is(.w-input, .w-pick) { width: 100%; }
  .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-fill); }
  .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, on the scale of every control — 36 high with 10px corners, as
   .w-btn and the select of shared/select.js (.w-pick-btn); 44 on a phone, below. */
: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: 36px; padding: 0 12px;
  border: 1px solid var(--input-border); border-radius: 10px;
  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: 8px 12px; 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. A field is a
   finger's target there: 44 high. */
@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, .w-pick-input, .chat-compose > form input) { font-size: 16px; }
  :is(.w-input.w-input, .field > input) { min-height: 44px; }
}

/* 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). */
.room-panel:has(> .chat-content.panel-chat) { 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; }
/* As tall and as round as a text field (.w-input): a select beside a field is level with it. */
.w-pick-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--input-border); border-radius: 10px; 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; }
/* The field of an editable select (select-edits.js) is a text field in the look of the others: the caret, not the
   hand. Its own text is its search on a computer, so the list has no search line there. */
.w-pick-input { cursor: text; font-family: inherit; font-variant-numeric: tabular-nums; }
.w-pick-edit .w-pickpop-find { display: none; }
/* 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: 400px; 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; }
/* The search is a line of the list, as in «Найти или спросить»: a sign, the words, a hairline under them. Its sign stands
   where the text of the options starts (6px of the list and 10px of an option). */
.w-pickpop-find { flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); cursor: text; }
.w-pickpop-find .w-i { flex-shrink: 0; width: 16px; height: 16px; }
.w-pick-find { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--foreground); font-size: 14px; }
.w-pick-find::placeholder { color: var(--muted-foreground); opacity: 1; }
/* The caret in the line shows the focus: a ring around the words would draw the field in a box again. As specific as
   the rings of the layers the select stands in (.nm-window :focus-visible), so none of them wins it back. */
.w-pickpop-find .w-pick-find:focus { 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; }
/* A name is read in full in the list: two devices cut to «Динамики (FIFINE …» are told apart by nobody. */
.w-opt-label { display: flex; flex-direction: column; min-width: 0; overflow-wrap: break-word; }
.w-opt small { color: var(--muted-foreground); font-size: 12px; line-height: 16px; }
/* A side note at the right of the line (what a start runs into, where a length ends): one line, cut rather than wrapped. */
.w-opt-side { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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-pickpop-find { height: 48px; }
  /* A phone's field opens the sheet without the keyboard (select-events.js): the sheet's line takes the typing. */
  .w-pick-edit .w-pickpop-find { display: flex; }
  .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; }
/* The shell owns the page origin; these sections keep their narrower reading measure at that edge. */
.w-home:where(.td-page, .mt-page) { margin-inline: 0; }
.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; }
}