/* Palette and type from the local GuestMe/Jitsi UI kit. */
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-cyrillic-opsz-normal.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-cyrillic-ext-opsz-normal.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext-opsz-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-opsz-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --media-foreground: #f4f4f5;
  --media-body: #d4d4d8;
  --media-surface: #141416;
  --media-secondary: #1f1f23;
  --media-muted: #a1a1aa;
  --media-danger: #f87171;
  --media-overlay: rgba(20,20,22,.8);
  --media-scrim: rgba(24,24,27,.9);
  --media-panel-shadow: 0 12px 40px rgba(0,0,0,.53);
  --media-border: rgba(255,255,255,.08);
  --media-input-border: rgba(255,255,255,.14);
  --hangup: #b91c1c;
  --hangup-hover: #991b1b;
  --hangup-foreground: #ffffff;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --background: #ffffff;
  --foreground: #131316;
  --body: #3a3b42;
  --card: #ffffff;
  --sunken: #f6f6f7;
  --secondary: #f0f0f2;
  --muted-foreground: #676872; /* 4.5:1 even on the secondary surface */
  --border: rgba(19,19,22,.08);
  --border-strong: rgba(19,19,22,.17);
  --input: #ffffff;
  --input-border: rgba(19,19,22,.14);
  --primary: #17181b;
  --primary-foreground: #ffffff;
  /* The logo (web/brand/README.md, shared/brand.js): black on a light surface, white on a dark one; the tile of the
     mark in the colour of the logo, its «ee» in the colour of the surface. Its own tokens, not the buttons': the logo
     stays when the buttons change. */
  --brand-ink: #17181b;
  --brand-tile: #17181b;
  --brand-on: #ffffff;
  /* The prototype look (docs/prototypes/meetvo-r1-r2/css/look.css): a page one shade lighter than the panel, one
     accent (jade) for the current place, the one solid button and whatever asks rather than opens. */
  --panel: #f5f5f6;
  --raised: #ffffff;
  --accent-ink: #08664d;
  --accent-soft: rgba(10,117,88,.09);
  --accent-fg: #ffffff;
  --primary-fill: linear-gradient(180deg, #0d8264, #0a6f54);
  --primary-edge: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(8,70,53,.35);
  --edge: inset 0 1px 0 rgba(255,255,255,.9);
  --lift: 0 1px 2px rgba(19,19,22,.04), 0 16px 36px -20px rgba(19,19,22,.16);
  --control-edge: 0 1px 1px rgba(19,19,22,.04);
  --hover: rgba(19,19,22,.035);
  --ring: #71717a;
  --focus: rgba(17,17,19,.10);
  --selection: #dcdce0;
  --switch-off: #d4d4d8;
  --knob: #ffffff;
  --success: #15803d;
  --success-bg: #f0fdf4;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  /* Home: the next-up card and soon rows (mint), the late card (amber). Tints lie over a card. */
  --soon: #0a6e52;
  --soon-bg: rgba(10,110,82,.07);
  --soon-border: rgba(10,110,82,.26);
  --soon-action: #0a6e52;
  --soon-action-fg: #ffffff;
  --late: #a35709;
  --late-bg: rgba(163,87,9,.07);
  --late-border: rgba(163,87,9,.34);
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --popover-shadow: 0 1px 2px rgba(19,19,22,.06), 0 18px 44px -12px rgba(19,19,22,.2);
  --accent: #0a7558;
  --accent-hover: var(--hover);
  --muted: var(--muted-foreground);
  --line: var(--border);
  --paper: var(--card);
  --soft: var(--secondary);
  --green: var(--success);
  color-scheme: light;
  font-family: var(--font-sans);
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  /* Chat (app.css): bubbles, reaction chips, emoji tray and the seven author name colours. */
  --chat-bg: #ececef;
  --chat-in: #ffffff;
  --chat-in-fg: #18181b;
  --chat-in-meta: #6b6b74;
  --chat-out: #c9efdc;
  --chat-out-fg: #0c2f25;
  --chat-out-meta: #236652;
  --chat-accent: #0b7a5a;
  --chat-accent-fg: #ffffff;
  --chat-chip: rgba(0,0,0,.06);
  --chat-chip-hover: rgba(0,0,0,.11);
  --chat-chip-out: rgba(11,122,90,.13);
  --chat-chip-out-hover: rgba(11,122,90,.22);
  --chat-chip-out-on: #0b7a5a;
  --chat-chip-out-on-fg: #ffffff;
  --chat-tick: #0b7a5a;
  --chat-tray: #ffffff;
  --chat-tray-border: rgba(0,0,0,.08);
  --chat-composer: #ffffff;
  --chat-name-0: #b8453f;
  --chat-name-1: #a35709;
  --chat-name-2: #7d44c2;
  --chat-name-3: #267a18;
  --chat-name-4: #1a7690;
  --chat-name-5: #2a6fb5;
  --chat-name-6: #b03f78;
}
/* Dark base tokens. The call journey (.room, call dialogs and toasts while html.in-call,
   any .call-surface) is dark in both app themes; color-scheme for it is set in call.css. */
html[data-theme=dark], .meeting-player, .preview-video, .room, html.in-call #modal-root, html.in-call #toast, .call-surface {
  --w-scroll-thumb: rgba(255,255,255,.16);
  --w-scroll-thumb-hover: rgba(255,255,255,.28);
  --background: #0b0b0c;
  --foreground: #f4f4f5;
  --body: #d4d4d8;
  --card: #141416;
  --sunken: #1a1a1d;
  --secondary: #1f1f23;
  --muted-foreground: #a1a1aa;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --input: #141416;
  --input-border: rgba(255,255,255,.14);
  --primary: #f4f4f5;
  --primary-foreground: #111113;
  --brand-ink: #ffffff;
  --brand-tile: #f4f4f5;
  --brand-on: #17181b;
  --hover: rgba(255,255,255,.04);
  --ring: #8b8b94;
  --focus: rgba(244,244,245,.08);
  --selection: #3f3f46;
  --switch-off: #3f3f46;
  --knob: #111113;
  --success: #4ade80;
  --success-bg: rgba(74,222,128,.10);
  --warning: #fbbf24;
  --warning-bg: rgba(251,191,36,.10);
  --soon: #6ee7b7;
  --soon-bg: rgba(110,231,183,.09);
  --soon-border: rgba(110,231,183,.30);
  --soon-action: #6ee7b7;
  --soon-action-fg: #06281f;
  --late: #fbbf24;
  --late-bg: rgba(251,191,36,.09);
  --late-border: rgba(251,191,36,.34);
  --danger: #f87171;
  --danger-bg: rgba(248,113,113,.10);
  --popover-shadow: 0 12px 32px rgba(0,0,0,.5);
  /* Chat */
  --chat-bg: #0c0d10;
  --chat-in: #1a1b20;
  --chat-in-fg: #ececef;
  --chat-in-meta: #8b8b94;
  --chat-out: #123b30;
  --chat-out-fg: #ecfdf5;
  --chat-out-meta: #8fd6bc;
  --chat-accent: #6ee7b7;
  --chat-accent-fg: #06281f;
  --chat-chip: rgba(255,255,255,.08);
  --chat-chip-hover: rgba(255,255,255,.15);
  --chat-chip-out: rgba(255,255,255,.12);
  --chat-chip-out-hover: rgba(255,255,255,.2);
  --chat-chip-out-on: #6ee7b7;
  --chat-chip-out-on-fg: #06281f;
  --chat-tick: #6ee7b7;
  --chat-tray: #16171b;
  --chat-tray-border: rgba(255,255,255,.07);
  --chat-composer: #1a1b20;
  --chat-name-0: #ff8e86;
  --chat-name-1: #ffa357;
  --chat-name-2: #b995f5;
  --chat-name-3: #79d15d;
  --chat-name-4: #5ccfe6;
  --chat-name-5: #6fb2ff;
  --chat-name-6: #f06ba8;
  /* The new tokens of the prototype look; the dark values above stay as they were. The accent stays the foreground,
     as before, so the call surfaces (dark in both themes) do not change. */
  --accent: var(--foreground);
  --panel: #0c0d10;
  --raised: #1d1f24;
  --accent-ink: #9be6cb;
  --accent-soft: rgba(143,227,197,.12);
  --accent-fg: #06261c;
  --primary-fill: linear-gradient(180deg, #a6ecd3, #86dcbd);
  --primary-edge: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.5);
  --edge: inset 0 1px 0 rgba(255,255,255,.055);
  --lift: 0 1px 2px rgba(0,0,0,.35), 0 20px 44px -24px rgba(0,0,0,.75);
  --control-edge: inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme=dark], .meeting-player {
  color-scheme: dark;
}
/* Call surface tokens: stage, tiles, glass dock/popovers and meaningful state colours. */
.room, html.in-call #modal-root, html.in-call #toast, .call-surface {
  --call-stage: #0d0e11;
  --call-tile: #18191d;
  --call-glass: rgba(28,29,34,.82);
  --call-glass-border: rgba(255,255,255,.07);
  --call-control: rgba(255,255,255,.07);
  --call-control-hover: rgba(255,255,255,.12);
  --call-off-bg: rgba(229,72,77,.18);
  --call-off-fg: #ff9592;
  /* White 600-weight labels on the leave button reach 3.9:1: accepted as large UI text (>= 3:1). */
  --call-leave: #e5484d;
  --call-leave-hover: #dc3e42;
  --call-speak: #6ee7b7;
  --call-speak-glow: rgba(110,231,183,.14);
  --call-hand: #fbbf24;
  --call-hand-fg: #1c1500;
  --call-active-bg: #f4f4f5;
  --call-active-fg: #111113;
  --call-badge: #e5484d;
  /* Glass, chips and quiet details of the dock, popovers, tiles and panel (Main board). */
  --call-popover: rgba(28,29,34,.94);
  --call-popover-border: rgba(255,255,255,.08);
  --call-popover-shadow: 0 20px 48px rgba(0,0,0,.5);
  --call-dock-shadow: 0 12px 40px rgba(0,0,0,.4);
  --call-dock-solid: #1e1f24;
  --call-chip: rgba(13,14,17,.55);
  --call-chip-strong: rgba(13,14,17,.7);
  --call-off-chip: rgba(229,72,77,.24);
  --call-tile-edge: rgba(255,255,255,.04);
  --call-avatar: #26272d;
  --call-avatar-fg: #e4e4e7;
  --call-subtle: #8b8b94;
  --call-rec-dot: #ff6369;
  --call-item-hover: rgba(255,255,255,.06);
  --call-control-open: rgba(255,255,255,.14);
  --call-split-line: rgba(255,255,255,.08);
  --call-divider: rgba(255,255,255,.1);
  --call-segment: rgba(255,255,255,.05);
  --call-segment-on: rgba(255,255,255,.12);
  --call-soft-button: rgba(255,255,255,.08);
  --call-switch-off: rgba(255,255,255,.18);
  --call-knob: #ffffff;
  --call-meter-off: rgba(255,255,255,.12);
  --call-tip-kbd: #e4e4e7;
  --call-on-leave: #ffffff;
  --call-danger-soft: rgba(229,72,77,.14);
  --call-danger-soft-hover: rgba(229,72,77,.22);
  --call-danger-soft-fg: #e8a2a2;
  --call-admit-bg: rgba(110,231,183,.14);
  --call-panel: #16171b;
  --call-panel-border: rgba(255,255,255,.06);
  --call-swatch-none: #2a2b31;
  --call-swatch-blur: radial-gradient(circle at 40% 40%, #5b6270 0%, #2e323a 70%);
  /* Notices, hints, pinned label and floating self view (Main/Share/MobileCall boards). */
  --call-active-hover: #e4e4e7;
  --call-active-muted: #52525b;
  --call-hand-soft: rgba(28,21,0,.12);
  --call-avatar-strong: #2e2f36;
  --call-pin-fg: #d4d4d8;
  --call-float-shadow: 0 8px 24px rgba(0,0,0,.45);
  --call-float-edge: rgba(255,255,255,.08);
  /* Notices, phone dock and bottom sheets (MobileGroup, MobileMore boards). */
  --call-notice: rgba(36,37,43,.96);
  --call-notice-border: rgba(255,255,255,.08);
  --call-dock-phone: rgba(28,29,34,.9);
  --call-control-phone: rgba(255,255,255,.1);
  --call-sheet: #1a1b20;
  --call-sheet-shadow: 0 -20px 60px rgba(0,0,0,.5);
  --call-sheet-row: rgba(255,255,255,.04);
  --call-grabber: rgba(255,255,255,.2);
  --call-scrim: rgba(0,0,0,.45);
  --call-scrim-top: rgba(13,14,17,.7);
  --call-scrim-bottom: rgba(13,14,17,.85);
  --call-chip-soft: rgba(13,14,17,.45);
  --call-hand-tint: rgba(251,191,36,.14);
  --call-star-off: #71717a;
}
/* Workspace redesign: search highlight, risk severity, live dot, popover and tooltip surfaces. */
:root {
  --w-mark: #fde68a;
  --w-mark-on: #fbbf24;
  --w-high: #dc2626;
  --w-mid: #c2410c;
  --w-low: #a1a1aa;
  --w-live: #15803d;
  --w-bar: #52525b;
  --w-chip: #f1f1f3;
  --w-chip-hover: #e6e6e9;
  --w-tip: #111113;
  --w-tip-fg: #ffffff;
  --w-scrim: rgba(10,10,11,.28);
  --w-scroll-thumb: rgba(19,19,22,.18);
  --w-scroll-thumb-hover: rgba(19,19,22,.3);
  --w-pop-shadow: var(--popover-shadow);
  --w-sheet-shadow: 0 2px 6px rgba(19,19,22,.06), 0 32px 72px -16px rgba(19,19,22,.28);
  --w-seg-shadow: 0 1px 2px rgba(10,10,11,.08);
  --w-player: #0d0e11;
  --w-player-fg: #f4f4f5;
  --w-player-body: #d4d4d8;
  --w-player-muted: #a1a1aa;
  --w-player-track: rgba(255,255,255,.18);
  --w-player-hover: rgba(255,255,255,.1);
  --w-player-chip: rgba(13,14,17,.55);
  --w-knob: #ffffff;
  --w-pulse: rgba(21,128,61,.35);
  --w-pulse-end: rgba(21,128,61,0);
}
html[data-theme=dark] {
  --w-mark: rgba(251,191,36,.30);
  --w-mark-on: rgba(251,191,36,.62);
  --w-high: #f87171;
  --w-mid: #fb923c;
  --w-low: #71717a;
  --w-live: #4ade80;
  --w-bar: #d4d4d8;
  --w-chip: #1f1f23;
  --w-chip-hover: #2a2a2f;
  --w-tip: #f4f4f5;
  --w-tip-fg: #111113;
  --w-scrim: rgba(0,0,0,.55);
  --w-scroll-thumb: rgba(255,255,255,.16);
  --w-scroll-thumb-hover: rgba(255,255,255,.28);
  --w-pop-shadow: 0 12px 32px rgba(0,0,0,.5);
  --w-sheet-shadow: 0 24px 64px rgba(0,0,0,.6);
  --w-seg-shadow: 0 1px 2px rgba(0,0,0,.4);
  --w-pulse: rgba(74,222,128,.35);
  --w-pulse-end: rgba(74,222,128,0);
}
/* New tokens of a work package go here, each package in its own block headed «WPxx», before the marker. */
/* end tokens */
html,
body {
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.5;
}
/* The text of the prototype's look: smooth glyphs, a hair tighter in the workspace and its sheets, no lone last word. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.w-shell, .w-sheet, .w-cmd { letter-spacing: -.006em; }
.w-shell p, .w-sheet p { text-wrap: pretty; }
body {
  margin: 0;
}
/* Every scroll area: a thin thumb in the colour of the theme and no track, instead of the system's bar (the classic one
   of Windows draws arrows and a light track in the dark theme). Each element reads the token itself, so a dark call
   surface in the light theme gets a light thumb. WebKit without scrollbar-color draws the same by its pseudo-elements. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--w-scroll-thumb) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--w-scroll-thumb) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--w-scroll-thumb-hover); }
button,
input,
textarea {
  font-family: inherit;
}
button {
  touch-action: manipulation;
}
:where(h1, h2, h3, h4, strong, b) {
  color: var(--foreground);
}
:where(p, small, time) {
  color: var(--muted-foreground);
}
:where(.eyebrow, .brand-sub, .nav-caption, .breadcrumb, .meta, .page-footer, .section-note, .recap-date, .archive-count, .small-label, .feedback-label, .chat-date, .chat-system, .permission-note, .quality-hint, .panel-section-caption) {
  color: var(--muted-foreground);
}
.app-shell {
  grid-template-columns: 232px minmax(0, 1fr);
}
.sidebar {
  padding: 28px 18px 20px;
  background: var(--card);
  overflow-y: auto;
}
.brand-sub {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 44px;
}
.workspace {
  margin: 28px 0;
  padding: 12px 10px;
  background: var(--secondary);
  border-radius: 8px;
  font-size: 14px;
}
.workspace small {
  font-size: 14px;
}
.workspace-icon,
.room-icon {
  background: var(--secondary);
  color: var(--foreground);
  border-radius: 8px;
}
.nav-caption {
  letter-spacing: .5px;
  font-size: 14px;
  font-weight: 500;
}
.nav button {
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  border-radius: 6px;
}
.nav button.active,
.settings-nav button.active {
  background: var(--secondary);
  color: var(--foreground);
}
.nav button:hover,
.settings-nav button:hover {
  background: var(--hover);
  color: var(--foreground);
}
.side-help {
  background: transparent;
  border: 0;
  padding: 12px 8px;
}
.side-help h4 {
  font-size: 14px;
}
.side-help p {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.6;
}
.side-help button {
  font-size: 14px;
  color: var(--foreground);
  font-weight: 500;
}
.profile {
  padding-top: 18px;
}
.profile strong {
  font-size: 14px;
}
.profile small {
  font-size: 14px;
}
.avatar-stack .avatar {
  border-color: var(--card);
  font-size: 14px;
}
.avatar-stack span:last-child:not(.avatar) {
  color: var(--muted-foreground);
  font-size: 14px;
}
.main {
  padding: 0 32px 40px;
  max-width: 1680px;
  width: 100%;
  margin-inline: auto;
}
.topbar {
  height: 72px;
}
.breadcrumb {
  font-size: 14px;
}
.breadcrumb strong {
  color: var(--foreground);
}
.top-actions {
  gap: 12px;
}
.calendar-top {
  font-size: 14px;
  color: var(--foreground);
}
.page-heading {
  margin: 32px 0 24px;
}
.page-heading .eyebrow {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted-foreground);
  font-weight: 400;
}
.page-heading h1,
.detail-heading h1 {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.8px;
}
.page-heading p,
.detail-heading p {
  color: var(--muted-foreground);
  font-size: 14px;
}
.text-button {
  font-size: 14px;
  color: var(--foreground);
}
.text-button:hover {
  text-decoration: underline;
}
.theme-button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--foreground);
}
.theme-button svg {
  width: 15px;
  height: 15px;
}
.theme-button:hover {
  background: var(--hover);
}
.dashboard-hero {
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.hero-main {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  min-height: 230px;
}
.hero-main > .eyebrow {
  color: var(--muted-foreground);
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 500;
}
.hero-main h2 {
  color: var(--foreground);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.6px;
  margin: 16px 0 8px;
}
.hero-main p {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.6;
  max-width: 330px;
}
.hero-orbits {
  display: none;
}
.personal-card {
  border-radius: 10px;
  padding: 24px;
  background: var(--card);
  border-color: var(--border);
}
.personal-card h3 {
  font-size: 17px;
}
.personal-card p {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.6;
}
.personal-top {
  margin-bottom: 14px;
}
.personal-card .room-link {
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--border);
  font-size: 14px;
  margin: 18px 0;
  font-family: ui-monospace, monospace;
}
.dashboard-content {
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
}
.tabs {
  gap: 20px;
}
.meetings-list {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.meeting-row {
  padding: 18px 16px;
  gap: 12px;
  background: var(--card);
  min-height: 88px;
}
.meeting-row:last-child {
  border-bottom: 0;
}
.meeting-row:hover {
  background: var(--secondary);
}
.meeting-row .row-info h3 {
  font-size: 14px;
  color: var(--foreground);
  font-weight: 550;
}
.row-info p {
  font-size: 14px;
  color: var(--muted-foreground);
  flex-wrap: wrap;
  gap: 4px 10px;
}
.date-block {
  width: 44px;
  height: 48px;
  background: var(--secondary);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.date-block b {
  font-size: 18px;
}
.date-block small {
  font-size: 14px;
  color: var(--muted-foreground);
}
.live-row {
  box-shadow: inset 3px 0 var(--success);
}
.date-block.live-date {
  background: var(--success-bg);
  color: var(--success);
}.recap-card,
.subtle-card,
.summary-intro,
.summary-block,
.attention-card,
.mini-recording,
.archive-card,
.settings-card,
.settings-nav,
.agenda-card,
.transcript-column {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.recap-card {
  padding: 18px;
}
.recap-card:hover {
  border-color: var(--ring);
}
.recap-card h3 {
  font-size: 14px;
  font-weight: 550;
}
.recap-card p,
.subtle-card p {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.6;
}
.recap-date {
  color: var(--muted-foreground);
  font-size: 14px;
}
.section-heading h2,
.day-aside .section-heading h2 {
  font-size: 14px;
  font-weight: 600;
}
.subtle-card h3,
.subtle-card h4 {
  font-size: 14px;
}.semantic-tag {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 3px 7px;
  border-radius: 5px;
  line-height: 1.6;
}.semantic-tag {
  color: var(--muted-foreground);
  background: var(--secondary);
  border: 1px solid var(--border);
}.quality-button.active {
  color: var(--success);
  background: var(--success-bg);
}
.page-footer {
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
}
.detail-back {
  font-size: 14px;
}
.detail-heading {
  align-items: flex-start;
}
.detail-heading .heading-actions {
  max-width: 48%;
}
.meeting-people-line {
  flex-wrap: wrap;
}
.meeting-people-line > span {
  color: var(--muted-foreground);
  font-size: 14px;
}
.meeting-people-line > .text-button {
  font-size: 14px;
}
.summary-intro {
  background: var(--secondary);
}
.summary-intro > p {
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.8;
}
.summary-intro h2,
.summary-block > h2 {
  font-size: 15px;
}
.summary-intro .topic-tags .chip {
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 14px;
}
.summary-item p,
.segment-text,
.archive-match p {
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.75;
}
.summary-item-meta {
  font-size: 14px;
  color: var(--muted-foreground);
  flex-wrap: wrap;
}
.summary-item-meta .avatar {
  width: 24px;
  height: 24px;
  font-size: 14px;
}
.summary-item-meta .semantic-tag {
  margin-left: 0;
}
.summary-bullet {
  background: var(--muted-foreground);
}
.attention-card h2 {
  font-size: 14px;
}
.attention-item p {
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.7;
}
.attention-actions > button:first-child {
  background: var(--secondary);
  color: var(--foreground);
  font-size: 14px;
}
.attention-type,
.section-note {
  color: var(--muted-foreground);
  font-size: 14px;
}
.attention-item.resolved p {
  color: var(--muted-foreground);
}
.resolved-label {
  color: var(--success);
  font-size: 14px;
}
.attention-count {
  background: var(--secondary);
  color: var(--foreground);
}
.mini-recording h3 {
  font-size: 14px;
}
.mini-recording p,
.access-note p {
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.7;
}
.processing-steps > span {
  color: var(--muted-foreground);
  font-size: 14px;
}
.processing-steps .done {
  color: var(--success);
}
.processing-steps .current {
  color: var(--foreground);
}
.settings-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
}
.settings-nav {
  padding: 16px 10px;
}
.settings-nav h3 {
  color: var(--muted-foreground);
  font-size: 14px;
  letter-spacing: .5px;
}
.settings-nav button {
  color: var(--muted-foreground);
  font-size: 14px;
  padding: 10px;
}
.settings-nav button svg {
  color: inherit;
  width: 16px;
  height: 16px;
}
.settings-card {
  padding: 24px;
}
.settings-card h3 {
  font-size: 18px;
  color: var(--foreground);
  font-weight: 600;
}
.settings-card p {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.7;
}
.settings-card-title p {
  font-size: 14px;
}.settings-content .field > span {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
}.settings-content input {
  background: var(--input);
  color: var(--foreground);
  border: 1px solid var(--border);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  min-height: 40px;
}.settings-content .field > small {
  color: var(--muted-foreground);
  font-size: 14px;
}input::placeholder,
textarea::placeholder,
.search input::placeholder,
.archive-search input::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}
.note,
.settings-card .note,
.modal .note,
.permission-note {
  background: var(--secondary);
  color: var(--muted-foreground) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 400;
}
.toggle-row {
  gap: 20px;
}
.toggle-row strong {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
}
.toggle-row small {
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.6;
}
.member-row strong,
.consent-row strong,
.visibility-example strong,
.storage-status strong,
.calendar-options strong {
  color: var(--foreground);
  font-size: 14px;
  font-weight: 500;
}
.member-row small,
.consent-row p,
.visibility-example p,
.storage-status small,
.calendar-options small,
.ai-flow > span {
  color: var(--muted-foreground);
  font-size: 14px;
}
.ai-heading {
  flex-wrap: wrap;
}
.ai-heading h3 {
  font-size: 17px;
}
.ai-heading p {
  font-size: 14px;
  margin: 0;
}
.ai-flow {
  flex-wrap: wrap;
  background: var(--secondary);
}
.quality-grid b {
  color: var(--foreground);
  font-size: 28px;
}
.quality-grid span {
  color: var(--muted-foreground);
  font-size: 14px;
}
.quality-console h4 {
  font-size: 14px;
  color: var(--foreground);
}
.reference-row > span {
  color: var(--foreground);
  font-size: 14px;
}
.archive-search {
  background: var(--card);
  border-color: var(--border);
  border-radius: 10px;
}
.archive-search > div {
  background: var(--input);
  border-color: var(--border);
}
.archive-search input {
  font-size: 15px;
  color: var(--foreground);
}
.archive-search > span {
  color: var(--muted-foreground);
  font-size: 14px;
}
.archive-count {
  color: var(--muted-foreground);
  font-size: 14px;
}
.archive-card-head h3 {
  font-size: 16px;
  color: var(--foreground);
}
.archive-card-head p {
  font-size: 14px;
  color: var(--muted-foreground);
}
.archive-match {
  background: var(--secondary);
}
.archive-match:hover {
  background: var(--hover);
}
.archive-match b,
.archive-match > time {
  color: var(--muted-foreground);
  font-size: 14px;
}
.archive-card-foot {
  flex-wrap: wrap;
}
.search {
  background: var(--input);
  border-color: var(--border);
}
.search input {
  font-size: 14px;
  color: var(--foreground);
}
.transcript-toolbar > span,
.segment-time {
  color: var(--muted-foreground);
  font-size: 14px;
}
.quality-button {
  color: var(--foreground);
  background: var(--secondary);
  font-size: 14px;
  border-color: var(--border);
}
.speaker-name {
  color: var(--foreground);
  font-size: 14px;
}
.segment-text:hover {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.transcript-segment.selected {
  background: var(--secondary);
  box-shadow: 0 0 0 10px var(--secondary);
}
.speaker-list span,
.moments-box > p,
.moment-link {
  color: var(--muted-foreground);
  font-size: 14px;
}
.moments-box h3,
.speaker-list h3 {
  color: var(--foreground);
  font-size: 14px;
}
.overlay {
  background: #0009;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 540px;
  box-shadow: 0 20px 80px #0005;
}
.modal.wide {
  width: 920px;
}
.modal-head {
  padding: 24px 24px 0;
}
.modal-head h2 {
  font-size: 20px;
  color: var(--foreground);
  font-weight: 600;
}
.modal-body {
  padding: 20px 24px 24px;
}
.modal-body > p {
  font-size: 14px;
  color: var(--muted-foreground);
}
.modal .pill-group {
  border: 1px solid var(--border);
  background: var(--secondary);
}
.pill-group button {
  color: var(--muted-foreground);
  font-size: 14px;
}
.pill-group button.active {
  color: var(--foreground);
  background: var(--card);
}
.invite-person {
  font-size: 14px;
  color: var(--foreground);
}
.invite-person.active {
  border-color: var(--foreground);
  background: var(--secondary);
}
.menu-actions > button {
  color: var(--foreground);
  font-size: 14px;
}
.menu-actions > button:hover {
  background: var(--secondary);
}
.menu-actions > button.danger-menu {
  color: var(--danger);
}
.menu-actions > button > svg {
  color: inherit;
}
.user-option strong {
  font-size: 14px;
}
.user-option small {
  font-size: 14px;
  color: var(--muted-foreground);
}
.user-option.selected {
  border: 1px solid var(--border);
  background: var(--secondary);
}
.consent-checkbox {
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.6;
}
.consent-checkbox small {
  color: var(--muted-foreground);
  font-size: 14px;
}
.background-picker > button,
.prejoin-backgrounds .background-picker > button {
  color: var(--muted-foreground);
  font-size: 14px;
  border-color: var(--border);
}
.background-picker > button.active {
  color: var(--foreground);
  border-color: var(--foreground);
  background: var(--secondary);
}
.background-swatch {
  background: var(--secondary);
}
.background-swatch.blur {
  background:
    radial-gradient(
      ellipse,
      #71717a,
      #27272a);
}
/* The «Студия» sample is the backdrop itself (scripts/studio-background.mjs), in the picker and in the call menu. */
.background-swatch.studio {
  background: url("../studio-background.webp") center / cover;
}
.chat-message header,
.detail-chat .chat-message header {
  color: var(--foreground);
  font-size: 14px;
}
.chat-message time,
.detail-chat .chat-message time {
  color: var(--muted-foreground);
  font-size: 14px;
}
.chat-message p,
.detail-chat .chat-message p {
  color: var(--foreground);
  background: var(--secondary);
  font-size: 14px;
  line-height: 1.65;
  border-color: var(--border);
}
.chat-message.own p,
.detail-chat .chat-message.own p {
  background: var(--hover);
  color: var(--foreground);
}
.message-body blockquote,
.detail-chat blockquote {
  background: var(--secondary);
  border-color: var(--ring);
}
.message-body blockquote > b,
.message-body blockquote > span,
.detail-chat blockquote > b,
.detail-chat blockquote > span {
  font-size: 14px;
  color: var(--muted-foreground);
}
.message-tool,
.detail-chat .message-tool {
  color: var(--muted-foreground);
  width: 28px;
  height: 28px;
}
.message-reaction,
.detail-chat .message-reaction {
  color: var(--foreground);
  background: var(--secondary);
  border-color: var(--border);
  font-size: 14px;
}
.message-reaction.selected,
.detail-chat .message-reaction.selected {
  border-color: var(--ring);
  background: var(--hover);
}

.chat-compose small,
.light-compose small,
.detail-chat .chat-system {
  color: var(--muted-foreground);
  font-size: 14px;
}
.quote-draft b,
.quote-draft span,
.light-compose .quote-draft b,
.light-compose .quote-draft span {
  color: var(--muted-foreground);
  font-size: 14px;
}
.live-segment b,
.live-segment p {
  color: var(--foreground);
  font-size: 14px;
}
.live-segment time {
  color: var(--muted-foreground);
  font-size: 14px;
}
.connection-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.connection-metrics > div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  flex-direction: column;
  gap: 6px;
}
.connection-metrics span {
  font-size: 14px;
  color: var(--muted-foreground);
}
.connection-metrics b {
  font-size: 15px;
  color: var(--foreground);
}
.connection-detail p {
  color: var(--muted-foreground);
  font-size: 14px;
}
.rtc-tracks > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.rtc-tracks span {
  color: var(--muted-foreground);
}
.meeting-player {
  background: var(--card);
  border-color: var(--border);
}
.player-scene {
  background: var(--background);
}
.player-subtitle {
  background: #18181bf2;
  color: var(--foreground);
}
.player-subtitle > b {
  color: var(--muted-foreground);
  font-size: 14px;
}
.player-subtitle > span {
  color: var(--foreground);
  font-size: 14px;
}
.player-controls,
.player-controls .player-play {
  color: var(--foreground);
}
.player-controls span {
  font-size: 14px;
  color: var(--muted-foreground);
}
.recording-caption > span {
  color: var(--muted-foreground);
  font-size: 14px;
}
.recording-clips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
#persistent-audio {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.login {
  background: var(--background);
  color: var(--foreground);
}
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.rating button.active svg {
  fill: var(--warning);
  color: var(--warning);
}
.rating button.active {
  background: var(--warning-bg);
}
.employee-only h4 {
  color: var(--foreground);
  font-size: 16px;
}
.employee-only p {
  color: var(--muted-foreground);
  font-size: 14px;
}
.email-preview {
  background: var(--secondary);
  border-color: var(--border);
}
.email-preview h2,
.email-preview h3,
.email-preview-top b {
  color: var(--foreground);
}
.email-preview > p,
.email-preview li {
  color: var(--foreground);
  font-size: 14px;
}
.email-note,
.mail-log-item p,
.mail-log-item small {
  color: var(--muted-foreground);
  font-size: 14px;
}
.email-brand,
.mail-log-item b {
  color: var(--foreground);
  font-size: 14px;
}
.guide-steps > button {
  color: var(--foreground);
}
.guide-steps > button small {
  color: var(--muted-foreground);
  font-size: 14px;
}
.guide-steps > button > span {
  font-size: 14px;
}
.person-card h3 {
  font-size: 16px;
}
.person-card p {
  font-size: 14px;
}
.storage-status {
  background: var(--secondary);
}
.fetch-status {
  margin-bottom: 18px;
}
.fetch-status .btn {
  margin-top: 12px;
}
@media (max-width: 1250px) {
  .main {
    padding-inline: 24px;
  }
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  .day-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .day-aside > .section-heading {
    grid-column: 1/-1;
  }
  .day-aside > .subtle-card {
    display: none;
  }
  .recap-card {
    margin: 0;
  }
}
@media (max-width: 1000px) {
  .app-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .sidebar {
    padding: 24px 12px;
  }
  .sidebar .brand > span,
  .brand-sub,
  .workspace,
  .nav-caption,
  .side-help,
  .profile-text,
  .profile > svg {
    display: none;
  }
  .sidebar .brand {
    justify-content: center;
  }
  .sidebar .nav {
    margin-top: 32px;
  }
  .sidebar .nav button {
    font-size: 0;
    justify-content: center;
    padding: 12px;
    gap: 0;
  }
  .sidebar .nav button svg {
    width: 21px;
    height: 21px;
  }
  .sidebar .profile {
    justify-content: center;
  }
  .settings-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .transcript-layout {
    grid-template-columns: 1fr;
  }
  .transcript-side {
    position: static;
  }
  .detail-heading .heading-actions {
    max-width: 50%;
  }
}
@media (max-width: 760px) {
  .main {
    padding: 0 20px 32px;
  }
  .page-heading,
  .detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .detail-heading .heading-actions {
    max-width: none;
  }
  .dashboard-hero {
    grid-template-columns: 1fr;
  }
  .hero-main {
    min-height: 0;
    padding: 24px;
  }
  .hero-main h2 {
    font-size: 25px;
  }
  .hero-main p {
    max-width: none;
  }
  .personal-card {
    padding: 22px;
  }
  .page-heading h1,
  .detail-heading h1 {
    font-size: 25px;
  }
  .top-actions {
    gap: 8px;
  }
  .calendar-top {
    font-size: 0;
    gap: 0;
  }
  .calendar-top svg {
    width: 18px;
  }
  .theme-button {
    font-size: 0;
    gap: 0;
    padding: 8px;
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 8px;
  }
  .settings-nav h3 {
    display: none;
  }
  .settings-nav button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
  .settings-card {
    padding: 20px;
  }
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  .scheduled-overview,
  .summary-aside {
    grid-template-columns: 1fr;
  }
  .summary-aside .attention-card {
    grid-row: auto;
  }
  .recording-caption {
    flex-wrap: wrap;
  }
  .meeting-people-line > .text-button {
    margin-left: 0;
  }
  .meeting-row > .avatar-stack {
    display: none;
  }
  .day-aside {
    grid-template-columns: 1fr;
  }
  .archive-card-head {
    flex-wrap: wrap;
  }
  .archive-card-head > .chip {
    display: none;
  }
  .modal.wide {
    width: 540px;
  }
}
@media (max-width: 540px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 76px;
    padding: 4px 12px;
    z-index: 30;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  .sidebar > .brand,
  .sidebar > .profile,
  .side-spacer {
    display: none;
  }
  .sidebar .nav {
    margin: 0;
    display: flex;
    justify-content: space-around;
  }
  .sidebar .nav button {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 14px;
    padding: 5px 10px;
    min-width: 58px;
  }
  .sidebar .nav button svg {
    width: 19px;
    height: 19px;
  }
  .main {
    padding: 0 16px 100px;
  }
  .topbar {
    height: 60px;
  }
  .breadcrumb {
    font-size: 14px;
    gap: 5px;
  }
  .top-actions > button:last-child {
    display: none;
  }
  .page-heading {
    margin-top: 24px;
    gap: 16px;
  }
  .heading-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .page-heading h1 {
    font-size: 24px;
  }
  .page-heading p {
    font-size: 14px;
  }
  .hero-main {
    padding: 22px;
  }
  .meeting-row {
    gap: 10px;
    padding: 16px 12px;
  }
  .meeting-row > .icon-btn {
    min-width: 28px;
    width: 28px;
  }
  .meeting-row .row-info h3 {
    white-space: normal;
    font-size: 14px;
  }
  .meeting-row .meta:nth-child(2) {
    display: none;
  }
  .date-block {
    width: 36px;
    height: 44px;
  }
  .detail-tabs {
    gap: 18px;
    overflow-x: auto;
  }
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }.archive-search input {
    font-size: 16px;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .overlay {
    padding: 12px;
  }
  .modal {
    max-height: 94dvh;
  }
  .modal-head {
    padding: 20px 18px 0;
  }
  .modal-body {
    padding: 18px;
  }
  .modal-footer {
    flex-wrap: wrap;
  }
  .archive-search {
    padding: 16px;
  }
  .archive-card {
    padding: 16px;
  }
  .transcript-column {
    padding-inline: 16px;
  }
  .transcript-segment {
    gap: 12px;
  }.summary-block,
.summary-intro {
    padding: 20px;
  }
  .connection-metrics b {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (min-width: 541px) and (max-width: 650px) {
  .sidebar {
    position: sticky;
    top: 0;
    bottom: auto;
    height: 100dvh;
    left: auto;
    right: auto;
    flex-direction: column;
    width: 76px;
    border-top: 0;
    border-right: 1px solid var(--border);
    justify-content: flex-start;
    padding: 24px 10px;
  }
  .sidebar > .brand {
    display: flex;
  }
  .sidebar > .side-spacer {
    display: block;
    flex: 1;
  }
  .sidebar > .profile {
    display: flex;
  }
  .sidebar .nav {
    display: grid;
    gap: 5px;
    margin-top: 32px;
    width: 100%;
  }
  .sidebar .nav button {
    font-size: 0;
    justify-content: center;
    gap: 0;
  }
  .app-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }
}
@media (max-width: 540px) {
  .sidebar {
    flex-direction: row;
  }
}
.room,
.meeting-player,
.preview-video {
  --accent:var(--foreground);
  --accent-hover:var(--hover);
  --muted:var(--muted-foreground);
  --line:var(--border);
  --paper:var(--card);
  --soft:var(--secondary);
  --green:var(--success);
}
.app-shell {
  display: grid;
}
@media (max-width: 540px) {
  .login {
    padding: 20px;
  }
  .login-card {
    width: 100%;
    max-width: 460px;
  }
  .meeting-row .row-info {
    min-width: 0;
  }
  .meeting-row .row-info h3 {
    overflow-wrap: anywhere;
  }
  .page-footer {
    padding-bottom: 12px;
  }
}
.startup-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.startup-card {
  max-width: 480px;
  width: 100%;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.startup-card h1 {
  font-size: 28px;
  margin-bottom: 24px;
}
.startup-card h2 {
  font-size: 20px;
  margin-bottom: 12px;
}
.startup-card p {
  margin: 16px 0;
  overflow-wrap: anywhere;
}
.email-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.email-preview-top {
  flex-wrap: wrap;
}
.email-preview-top b {
  overflow-wrap: anywhere;
}
.email-preview h2 {
  font-size: 20px;
  margin-bottom: 20px;
}
.email-exclusions {
  margin: 16px 0;
  color: var(--muted-foreground);
}
.email-exclusions summary {
  cursor: pointer;
}
.integration-status {
  margin: 20px 0;
}
.integration-status p {
  margin-top: 10px;
}
.integration-status + .storage-status {
  margin: 20px 0;
}
.storage-status p {
  margin-top: 8px;
}
.settings-card .note {
  margin: 16px 0;
}
.brand-sub,
.nav-caption,
.eyebrow {
  text-transform: none;
  letter-spacing: 0;
}
.hero-main > .eyebrow {
  text-transform: none;
  letter-spacing: 0;
}
.avatar-stack .avatar {
  width: 30px;
  height: 30px;
}
@media (max-width: 540px) {
  .sidebar .nav {
    width: 100%;
  }
  .sidebar .nav button {
    min-width: 65px;
    padding: 6px;
  }
  .hero-main h2 {
    font-size: 24px;
  }
}
/* Grid children must shrink to the viewport; only the filter strip scrolls. */
.dashboard-content > section,
.dashboard-content > aside,
.dashboard-hero > section,
.dashboard-hero > div {
  min-width: 0;
}
@media (max-width: 1250px) {
  .dashboard-content {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .dashboard-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Re-rendering a dialog must not restart a fade or obscure its contents. */
.overlay {
  animation: none;
}
.settings-mobile-nav { display: none; }
.advanced-connection { margin: 16px 0; color: var(--muted-foreground); }
.advanced-connection summary { cursor: pointer; padding: 8px 0; }
.advanced-connection .consent-checkbox { margin: 12px 0 0; }
@media (max-width: 760px) {
  .settings-mobile-nav { display: grid; }
  .settings-layout > .settings-nav { display: none; }
}
/* Keep primary actions reachable while long forms scroll inside the dialog. */
.modal { display: flex; flex-direction: column; overflow: hidden; }
.modal-head { flex: 0 0 auto; padding-bottom: 16px; gap: 12px; }
.modal-head h2 { min-width: 0; }
.modal-body { overflow: auto; padding-top: 0; overscroll-behavior: contain; }
.modal-footer {
  position: sticky;
  bottom: -24px;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 16px 0;
  z-index: 4;
}
#prejoin-form > button[type=submit] {
  position: sticky;
  bottom: -24px;
  z-index: 4;
  box-shadow: 0 0 0 8px var(--card);
}
@media(max-width:540px) {
  .modal-footer, #prejoin-form > button[type=submit] { bottom: -18px; }
}

/* Sticky submit buttons cover scrolled text even while joining. */
#prejoin-form > button[type=submit]:disabled {
  opacity: 1;
  background: var(--secondary);
  color: var(--muted-foreground);
  border-color: var(--border);
}
/* The moments action is a full text button, unlike the chat send icon. */

/* Keep the call name readable while status has its own mobile row. */
#call-timer { white-space: nowrap; }