/*
 * ВидеоМост — Apple-inspired experience layer.
 * Calm materials, immediate feedback, spatial consistency and accessible motion.
 */

:root {
  color-scheme: light;
  --paper: #f5f5f7;
  --paper-deep: #e8e8ed;
  --surface: #ffffff;
  --surface-soft: #f5f5f7;
  --ink: #1d1d1f;
  --ink-soft: #3a3a3c;
  --muted: #6e6e73;
  --line: rgba(29, 29, 31, .10);
  --line-strong: rgba(29, 29, 31, .16);
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --blue-soft: #e9f3ff;
  --cyan: #64d2ff;
  --success: #248a3d;
  --danger: #e5484d;
  --danger-hover: #f04f54;
  --warning: #9a6700;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --shadow-card: 0 20px 55px rgba(0, 0, 0, .08), 0 2px 10px rgba(0, 0, 0, .035);
  --shadow-float: 0 28px 80px rgba(0, 0, 0, .28), 0 2px 12px rgba(0, 0, 0, .12);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Segoe UI", sans-serif;
  --apple-material: rgba(255, 255, 255, .72);
  --apple-material-heavy: rgba(255, 255, 255, .88);
  --apple-edge: rgba(255, 255, 255, .72);
  --apple-spring: cubic-bezier(.22, .85, .28, 1);
}

html { scroll-behavior: smooth; }
body {
  letter-spacing: -.006em;
  background:
    radial-gradient(circle at 16% 8%, rgba(100, 210, 255, .16), transparent 25rem),
    radial-gradient(circle at 82% 92%, rgba(0, 113, 227, .075), transparent 31rem),
    var(--paper);
  font-optical-sizing: auto;
}
button, input, select { letter-spacing: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
button, .btn, .home-action, .card-link, .device-option { -webkit-user-select: none; user-select: none; }
::selection { color: var(--ink); background: rgba(100, 210, 255, .42); }
:focus-visible { outline: 3px solid rgba(0, 113, 227, .42); outline-offset: 3px; }

button:not(:disabled),
a.btn,
a.home-action,
a.card-link,
.device-option:not(:disabled) {
  will-change: transform;
  transform: translateZ(0);
  transition:
    transform 120ms ease-out,
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 220ms var(--apple-spring),
    filter 180ms ease;
}
button[data-apple-pressed="true"],
a.btn[data-apple-pressed="true"],
a.home-action[data-apple-pressed="true"],
a.card-link[data-apple-pressed="true"],
.device-option[data-apple-pressed="true"] { transform: scale(.97) translateZ(0) !important; }

/* Floating navigation material */
.topbar {
  min-height: 64px;
  border-bottom: 1px solid rgba(29, 29, 31, .065);
  background: rgba(248, 248, 250, .72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .58);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}
.brand { gap: 9px; font-weight: 720; letter-spacing: -.025em; }
.brand small { border-color: var(--line); font-weight: 520; }
.brand-ico path, .home-mark path { stroke: var(--blue); }
.brand-ico circle, .home-mark circle { fill: var(--blue); }
.navlink { min-height: 38px; border-radius: 11px; font-weight: 590; }
.navlink:hover { color: var(--ink); background: rgba(255, 255, 255, .74); }
.navlink:active { background: rgba(0, 0, 0, .055); }
#navArch, body.home-mode #navHome { color: var(--blue); }
.navlink-disabled {
  color: var(--muted) !important;
  background: transparent !important;
  opacity: .52;
  cursor: default;
  pointer-events: none;
}

/* Home */
.home-hub { padding-bottom: 92px; }
.home-shell { width: min(620px, 100%); animation: applePageIn .42s var(--apple-spring) both; }
.home-heading { margin-bottom: 30px; }
.home-mark { width: 44px; height: 33px; }
.home-heading p, .lobby-kicker, .protocol-kicker {
  color: var(--blue);
  font-weight: 690;
  letter-spacing: .085em;
}
.home-heading h1 {
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 730;
  line-height: 1.04;
  letter-spacing: -.047em;
}
.home-heading > span { max-width: 470px; margin-top: 12px; font-size: 14px; line-height: 1.48; }
.home-actions { gap: 12px; }
.home-actions::after {
  width: 7px;
  height: 7px;
  border: 4px solid var(--paper);
  background: var(--blue);
  box-shadow: 0 0 0 1px rgba(0, 113, 227, .12);
}
.home-action {
  min-height: 170px;
  border-color: rgba(29, 29, 31, .085);
  border-radius: 26px;
  background: var(--apple-material);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .055), inset 0 1px var(--apple-edge);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
}
.home-action:not(:disabled):hover {
  border-color: rgba(0, 113, 227, .22);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 22px 52px rgba(0, 0, 0, .09), inset 0 1px #fff;
  transform: translateY(-3px) translateZ(0);
}
.home-action-primary {
  border-color: rgba(0, 113, 227, .18);
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(234,245,255,.82));
}
.home-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  color: var(--ink-soft);
  background: rgba(118, 118, 128, .08);
  box-shadow: inset 0 0 0 1px rgba(29,29,31,.035);
}
.home-action-primary .home-action-icon { color: var(--blue); background: rgba(0, 113, 227, .09); }
.home-action strong { font-size: 16px; font-weight: 680; letter-spacing: -.018em; }
.home-action > span:not(.home-action-icon):not(.home-action-badge) { font-size: 12.5px; }
.home-action-badge { color: var(--muted); background: rgba(118,118,128,.1); }
.home-action-disabled { background: rgba(229,229,234,.62); }
.home-join {
  border-color: rgba(29,29,31,.1);
  border-radius: 20px;
  background: var(--apple-material-heavy);
  box-shadow: var(--shadow-card), inset 0 1px var(--apple-edge);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  animation: appleMaterialDown .28s var(--apple-spring) both;
  transform-origin: top center;
}

/* Buttons, fields and switches */
.btn {
  min-height: 46px;
  border-color: var(--line-strong);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  font-weight: 620;
  box-shadow: inset 0 1px rgba(255,255,255,.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn:hover { border-color: rgba(29,29,31,.22); background: rgba(255,255,255,.95); }
.btn-primary {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 10px 26px rgba(0,113,227,.22), inset 0 1px rgba(255,255,255,.18);
}
.btn-primary:hover { border-color: var(--blue-hover); background: var(--blue-hover); filter: brightness(1.02); }
.btn-lg { min-height: 52px; border-radius: 15px; }
.field label, .invite label, .switch-field > div > label { color: var(--ink-soft); font-weight: 640; }
.field input[type="text"], .field select, .home-join input {
  border-color: var(--line-strong);
  border-radius: 13px;
  background-color: rgba(255,255,255,.74);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.025);
}
.field input:focus, .field select:focus, .home-join input:focus {
  border-color: rgba(0,113,227,.66);
  box-shadow: 0 0 0 4px rgba(0,113,227,.12);
}
.slider { background: rgba(120,120,128,.3); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.slider::before { box-shadow: 0 2px 5px rgba(0,0,0,.24); }
.switch input:checked + .slider { background: #34c759; }
.switch input:focus-visible + .slider { outline-color: rgba(0,113,227,.42); }
.dev-note { border: 1px solid rgba(255,159,10,.22); background: rgba(255,159,10,.1); }

/* Lobby */
.lobby { padding-top: 38px; }
.lobby-card { column-gap: 32px; animation: applePageIn .42s var(--apple-spring) both; }
.lobby-head { margin-bottom: 32px; }
.lobby-head h1 {
  font-weight: 730;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.sub { color: var(--muted); line-height: 1.48; }
.lobby-back {
  border: 1px solid rgba(29,29,31,.075);
  color: var(--ink-soft);
  background: rgba(255,255,255,.66);
  box-shadow: inset 0 1px rgba(255,255,255,.68);
  backdrop-filter: blur(16px);
}
.lobby-card > .field,
.lobby-card > .grid2,
.lobby-card > .devices,
.lobby-card > .switch-field {
  border-color: rgba(29,29,31,.085);
  background: rgba(255,255,255,.68);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
}
.lobby-card > .field { box-shadow: inset 0 1px var(--apple-edge); }
.lobby-card > .switch-field { box-shadow: 0 18px 50px rgba(0,0,0,.06); }
.preview-row {
  border-color: rgba(29,29,31,.085);
  border-radius: 26px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 28px 70px rgba(0,0,0,.11), inset 0 1px var(--apple-edge);
  backdrop-filter: saturate(170%) blur(24px);
  -webkit-backdrop-filter: saturate(170%) blur(24px);
}
.preview-tile { border-radius: 19px; background: radial-gradient(circle at 50% 38%, #293c55, #111927 72%); }
.preview-row::before, .tile-label, .screen-info {
  background: rgba(28,28,30,.68);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
}
.preview-controls .ctrl { background: rgba(32,32,35,.72); backdrop-filter: blur(18px); }
.preview-controls .ctrl:hover { background: rgba(66,66,70,.9); }
.invite { border-color: var(--line); background: rgba(118,118,128,.075); }

/* Full-screen call */
html:has(#view-call:not(.hidden)),
body:has(#view-call:not(.hidden)),
body.call-mode { background: #090a0c; }
#view-call:not(.hidden) {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -20%, rgba(83,105,143,.12), transparent 42%),
    #090a0c;
  transition: padding-right .34s var(--apple-spring);
}
.call-top {
  min-height: 54px;
  margin: 10px 12px 7px;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(29,29,32,.66);
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 12px 34px rgba(0,0,0,.16);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
}
.call-brand { font-weight: 660; }
.call-brand i { background: var(--cyan); box-shadow: 0 0 0 4px rgba(100,210,255,.1); }
.room-tag { min-height: 34px; color: #aeb4be; background: rgba(118,118,128,.13); }
.timer { min-height: 34px; }
.rec-badge { min-height: 34px; color: #ff9f9f; background: rgba(255,69,58,.13); }
.pill {
  min-height: 38px;
  border-color: rgba(255,255,255,.085);
  color: #e5e5ea;
  background: rgba(118,118,128,.13);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.pill:hover { border-color: rgba(255,255,255,.14); background: rgba(118,118,128,.24); }
.stage-wrap { gap: 10px; padding: 0 12px 88px; }
.grid { gap: 10px; }
.grid:empty::before, .tile, .invite-stage {
  border-color: rgba(255,255,255,.085);
  border-radius: 18px;
  background: radial-gradient(circle at 50% 42%, #2c2d31, #1c1d20 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.tile { transition: border-color .22s ease, box-shadow .28s var(--apple-spring), transform .22s var(--apple-spring); }
.tile.speaking {
  border-color: rgba(100,210,255,.9);
  box-shadow: inset 0 0 0 1px rgba(100,210,255,.64), 0 0 0 1px rgba(100,210,255,.12), 0 0 30px rgba(100,210,255,.13);
}
.tile.hand-raised {
  border-color: rgba(255,190,74,.96);
  box-shadow: inset 0 0 0 1px rgba(255,190,74,.72), 0 0 0 1px rgba(255,190,74,.12), 0 0 32px rgba(255,174,45,.2);
}
.tile.hand-raised.speaking {
  border-color: rgba(255,190,74,.98);
  box-shadow: inset 0 0 0 1px rgba(255,190,74,.8), 0 0 0 2px rgba(100,210,255,.42), 0 0 34px rgba(255,174,45,.2);
}
.tile-label { border: 1px solid rgba(255,255,255,.075); }
.invite-stage-mark { color: var(--cyan); border-radius: 18px; background: rgba(100,210,255,.1); }
.stage-copy { border-radius: 13px; color: #071b23; background: var(--cyan); }
.stage-copy:hover { background: #82dcff; }
.screen, .stage-wrap.screen-mode .screen { border-radius: 18px; border-color: rgba(255,255,255,.085); }
.stage-wrap.screen-mode .tile.presenter { border-radius: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.55); }

.controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 59;
  padding: 0 12px;
  pointer-events: none;
  transition: right .34s var(--apple-spring);
}
#view-call:is(.chat-open,.ai-open) .controls { right: var(--active-dock-width); }
.controls-inner {
  pointer-events: auto;
  padding: 5px;
  border-color: rgba(255,255,255,.12);
  border-radius: 19px;
  background: rgba(37,37,40,.72);
  box-shadow: 0 18px 54px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: saturate(170%) blur(28px);
  -webkit-backdrop-filter: saturate(170%) blur(28px);
}
.ctrl.big { border-radius: 14px; color: #ededf2; }
.ctrl.big:hover { background: rgba(118,118,128,.24); }
.ctrl.big.off { background: rgba(255,69,58,.75); }
.ctrl.big.off:hover { background: rgba(255,69,58,.9); }
.ctrl.big.rec.on { background: rgba(255,69,58,.24); }
.ctrl.big.pip.on { color: #dff8ff; background: rgba(100,210,255,.16); }
.ctrl.big.hand.on { color: #241703; background: rgba(255,190,74,.94); box-shadow: inset 0 1px rgba(255,255,255,.3), 0 8px 24px rgba(255,174,45,.18); }
.ctrl.big.hand.on:hover { background: #ffc65a; }
.ctrl.big.danger { background: #ff453a; box-shadow: 0 8px 24px rgba(255,69,58,.22); }
.ctrl.big.danger:hover { background: #ff594f; }
.device-arrow:hover, .device-arrow[aria-expanded="true"] { background: rgba(118,118,128,.22); }
.call-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  z-index: 58;
  margin: 0;
  pointer-events: none;
  transition: right .34s var(--apple-spring);
}
#view-call:is(.chat-open,.ai-open) .call-note { right: var(--active-dock-width); }

.device-quick-menu,
.parts-panel {
  border-color: rgba(255,255,255,.1);
  color: #f5f5f7;
  background: rgba(35,35,38,.82);
  box-shadow: 0 28px 80px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: saturate(170%) blur(30px);
  -webkit-backdrop-filter: saturate(170%) blur(30px);
  animation: appleMaterialIn .28s var(--apple-spring) both;
}
.device-quick-menu { border-radius: 18px; transform-origin: bottom center; }
.device-option { border-radius: 12px; }
.device-option:hover { background: rgba(118,118,128,.2); }
.device-option .device-check { background: rgba(118,118,128,.17); }
.parts-panel:not(.chat-panel):not(.ai-panel) { top: 78px; right: 14px; border-radius: 22px; transform-origin: top right; }
.chat-panel, .ai-panel {
  border-left-color: rgba(255,255,255,.1);
  border-radius: 24px 0 0 24px;
  background: rgba(30,30,33,.86);
  box-shadow: -24px 0 70px rgba(0,0,0,.36), inset 1px 0 rgba(255,255,255,.045);
  transform-origin: right center;
}
.parts-head, .chat-panel .parts-head, .ai-panel-head {
  position: sticky;
  top: 0;
  z-index: 5;
  border-color: rgba(255,255,255,.08);
  background: rgba(38,38,41,.72);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
}
.chat-message { border-color: rgba(255,255,255,.09); border-radius: 7px 18px 18px; background: rgba(58,58,60,.34); }
.chat-message.mine { border-color: rgba(100,210,255,.2); border-radius: 18px 7px 18px 18px; background: rgba(0,122,255,.2); }
.chat-compose {
  border-color: rgba(255,255,255,.08);
  background: rgba(44,44,46,.76);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
}
.chat-compose input[type="text"] { border-radius: 12px; }
.chat-attach:hover { background: rgba(118,118,128,.22); }
.chat-send { background: rgba(118,118,128,.28); }
.chat-send:hover { background: var(--cyan); }
.ai-status, .ai-access, .ai-empty, .ai-card { border-color: rgba(255,255,255,.09); background: rgba(20,20,22,.45); }
.ai-recipient { border-color: rgba(255,255,255,.09); border-radius: 13px; }
.ai-recipient:hover { background: rgba(118,118,128,.18); }
.ai-card { border-radius: 17px; }
.ai-card.ai-pinned { border-color: rgba(100,210,255,.7); background: rgba(22,47,56,.86); }
.part-row { border: 1px solid rgba(255,255,255,.055); border-radius: 14px; background: rgba(118,118,128,.14); }
.parts-foot input, .dev-panel .field select { border-color: rgba(255,255,255,.12); background: rgba(0,0,0,.24); }
.ai-tip-peek {
  border-color: rgba(100,210,255,.36);
  border-radius: 20px;
  background: rgba(32,39,44,.78);
  box-shadow: 0 22px 60px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: saturate(170%) blur(28px);
  -webkit-backdrop-filter: saturate(170%) blur(28px);
  animation: applePeekIn .3s var(--apple-spring) both;
}

/* Archive and meeting detail */
.archive, .detail { width: min(1120px, calc(100% - 40px)); margin-top: 54px; }
.archive h1 { font-size: clamp(38px, 5vw, 56px); font-weight: 730; letter-spacing: -.052em; }
.detail-head h1 { font-weight: 720; letter-spacing: -.046em; }
.detail-head > .badge { flex: 0 0 auto; }
.detail-head > span:not(.badge) { flex: 1; }
.meta-row { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.meet-list { gap: 14px; margin-top: 32px; }
a.card-link { border-radius: 24px; }
.meet-card {
  min-height: 138px;
  grid-template-areas: "when badge" "desc desc";
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: rgba(29,29,31,.085);
  border-radius: 24px;
  background: var(--apple-material);
  box-shadow: 0 12px 34px rgba(0,0,0,.045), inset 0 1px var(--apple-edge);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
}
.meet-card .when { grid-area: when; }
.meet-card .desc { grid-area: desc; }
.meet-card .badge { grid-area: badge; }
.meet-card:hover {
  border-color: rgba(0,113,227,.2);
  box-shadow: 0 24px 58px rgba(0,0,0,.085), inset 0 1px var(--apple-edge);
}
.badge { padding: 6px 10px; font-weight: 680; }
.badge.live { color: #248a3d; background: rgba(52,199,89,.12); }
.badge.processing { color: #946200; background: rgba(255,159,10,.14); }
.badge.ready { color: #0066cc; background: rgba(0,113,227,.1); }
.badge.error { color: #d70015; background: rgba(255,69,58,.11); }
.detail-head > #detailStatus { flex: 0 0 auto; }
.meet-progress { display: grid; gap: 7px; margin-top: 13px; }
.meet-progress-copy { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.meet-progress-copy b { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.meet-progress-track, .processing-track { overflow: hidden; border-radius: 999px; background: rgba(118,118,128,.16); }
.meet-progress-track { height: 5px; }
.meet-progress-track i, .processing-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0a84ff, #64d2ff); transition: width .32s var(--apple-spring); }
.meet-progress.is-stale .meet-progress-copy span { color: #946200; }
.meet-progress.is-stale .meet-progress-track i { background: #ff9f0a; }
.processing-card {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid rgba(0,113,227,.16);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(237,246,255,.68));
  box-shadow: 0 14px 38px rgba(0,82,180,.07), inset 0 1px rgba(255,255,255,.68);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
.processing-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.processing-copy { min-width: 0; }
.processing-kicker { margin-bottom: 5px; color: var(--blue); font-size: 11px; font-weight: 740; letter-spacing: .075em; text-transform: uppercase; }
.processing-copy h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.027em; }
.processing-copy p { max-width: 650px; margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.48; }
.processing-percent { flex: 0 0 auto; color: var(--ink); font-size: 28px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.processing-track { height: 8px; }
.processing-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.processing-steps::before { content: ""; position: absolute; top: 5px; left: 6px; right: 6px; height: 1px; background: var(--line-strong); }
.processing-steps li { position: relative; z-index: 1; display: grid; justify-items: start; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 620; }
.processing-steps li:not(:first-child) { justify-items: center; }
.processing-steps li:last-child { justify-items: end; }
.processing-steps li i { width: 11px; height: 11px; border: 2px solid var(--surface); border-radius: 50%; background: #c7c7cc; box-shadow: 0 0 0 1px var(--line-strong); }
.processing-steps li.is-active { color: var(--ink); }
.processing-steps li.is-active i { background: #0a84ff; box-shadow: 0 0 0 3px rgba(10,132,255,.16); }
.processing-steps li.is-done i { background: #34c759; }
.processing-warning { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; color: #7a4a00; background: rgba(255,159,10,.12); font-size: 12px; font-weight: 620; }
.processing-warning > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 4px rgba(255,159,10,.14); }
.retranscribe-error { margin: 0 0 16px; }
.processing-card.is-stale { border-color: rgba(255,159,10,.3); background: linear-gradient(135deg, rgba(255,252,246,.9), rgba(255,245,222,.72)); }
.detail #backList { width: fit-content; margin-bottom: 30px; padding: 0 12px; background: rgba(118,118,128,.08); }
.tabs {
  width: fit-content;
  max-width: 100%;
  gap: 3px;
  margin-top: 30px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid rgba(29,29,31,.075);
  border-radius: 15px;
  background: rgba(118,118,128,.1);
}
.tab {
  min-height: 38px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  font-weight: 620;
}
.tab.active {
  color: var(--ink);
  border: 0;
  background: var(--surface);
  box-shadow: 0 3px 10px rgba(0,0,0,.09), inset 0 1px rgba(255,255,255,.7);
}
.panel { padding-top: 24px; }
.protocol-view { gap: 16px; }
.protocol-section, .proto-text, .fcard {
  border-color: rgba(29,29,31,.085);
  border-radius: 24px;
  background: var(--apple-material);
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 1px var(--apple-edge);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
}
.protocol-section { padding: 24px; }
.protocol-section h2 { font-size: 18px; font-weight: 690; letter-spacing: -.025em; }
.protocol-lead { border-color: rgba(0,113,227,.16); background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(237,246,255,.78)); }
.protocol-task { border-color: var(--line); border-radius: 16px; background: rgba(118,118,128,.07); }
.seg .who .t { border-radius: 8px; background: rgba(118,118,128,.09); }
.seg .txt { border-color: rgba(0,113,227,.28); }
.files-grid { gap: 14px; }
.fcard { padding: 17px; }
.fcard audio, .fcard video { border-radius: 15px; }
.empty { border-radius: 22px; }

/* Critical states */
#toasts { top: 80px; }
.toast {
  border-color: rgba(255,255,255,.11);
  border-radius: 15px;
  background: rgba(38,38,41,.88);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
}
.error-dialog { border-radius: 28px; }
.error-dialog::backdrop {
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(12px) saturate(90%);
  -webkit-backdrop-filter: blur(12px) saturate(90%);
}
.error-card {
  border-color: rgba(255,255,255,.11);
  border-radius: 28px;
  background: rgba(36,36,39,.9);
  box-shadow: 0 36px 110px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: saturate(150%) blur(30px);
  -webkit-backdrop-filter: saturate(150%) blur(30px);
}
.error-primary, .error-secondary { border-radius: 14px; }
.error-primary { border-color: var(--cyan); background: var(--cyan); }

/* Scroll-edge fades communicate that content continues. */
.chat-messages.apple-scrollable,
.ai-panel-scroll.apple-scrollable,
.device-quick-list.apple-scrollable,
#partsList.apple-scrollable { mask-repeat: no-repeat; mask-size: 100% 100%; }
.chat-messages.apple-can-scroll-start.apple-can-scroll-end,
.ai-panel-scroll.apple-can-scroll-start.apple-can-scroll-end,
.device-quick-list.apple-can-scroll-start.apple-can-scroll-end,
#partsList.apple-can-scroll-start.apple-can-scroll-end {
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 24px), transparent 100%);
}
.chat-messages.apple-can-scroll-end:not(.apple-can-scroll-start),
.ai-panel-scroll.apple-can-scroll-end:not(.apple-can-scroll-start),
.device-quick-list.apple-can-scroll-end:not(.apple-can-scroll-start),
#partsList.apple-can-scroll-end:not(.apple-can-scroll-start) {
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.chat-messages.apple-can-scroll-start:not(.apple-can-scroll-end),
.ai-panel-scroll.apple-can-scroll-start:not(.apple-can-scroll-end),
.device-quick-list.apple-can-scroll-start:not(.apple-can-scroll-end),
#partsList.apple-can-scroll-start:not(.apple-can-scroll-end) {
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 100%);
}
.tabs.apple-can-scroll-start.apple-can-scroll-end { mask-image: linear-gradient(to right, transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.tabs.apple-can-scroll-end:not(.apple-can-scroll-start) { mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
.tabs.apple-can-scroll-start:not(.apple-can-scroll-end) { mask-image: linear-gradient(to right, transparent, #000 22px); }

@keyframes applePageIn {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
}
@keyframes appleMaterialIn {
  from { opacity: 0; transform: translateY(8px) scale(.975); backdrop-filter: blur(4px); }
}
@keyframes appleMaterialDown {
  from { opacity: 0; transform: translateY(-6px) scale(.985); backdrop-filter: blur(5px); }
}
@keyframes applePeekIn {
  from { opacity: 0; transform: translate(-50%, 9px) scale(.985); backdrop-filter: blur(6px); }
}

@media (max-width: 880px) {
  .home-shell { width: min(600px, 100%); }
  .lobby-card { width: min(660px, 100%); }
  .preview-row { border-radius: 24px; }
  .stage-wrap { padding-bottom: 82px; }
  .chat-panel, .ai-panel { border-radius: 22px 0 0 22px; }
}

@media (max-width: 560px) {
  .topbar { min-height: 58px; background: rgba(248,248,250,.82); }
  .home-hub { padding-top: 30px; }
  .home-heading h1 { font-size: clamp(27px, 9vw, 36px); }
  .home-action { min-height: 154px; border-radius: 22px; }
  .home-actions::after { border-width: 3px; }
  .lobby { padding-top: 22px; }
  .lobby-card > .field { border-radius: 22px 22px 0 0; }
  .lobby-card > .switch-field { border-radius: 0 0 22px 22px; }
  .preview-row { border-radius: 22px; }
  .call-top { min-height: 48px; margin: 6px 7px; border-radius: 16px; }
  .stage-wrap { padding: 0 7px 72px; }
  .controls { bottom: max(7px, env(safe-area-inset-bottom)); padding-inline: 6px; }
  .controls-inner { width: auto; max-width: 100%; border-radius: 17px; }
  .call-note { display: none; }
  #toasts { top: 68px; right: 8px; left: 8px; align-items: flex-end; }
  .toast { max-width: min(350px, 100%); }
  .archive, .detail { width: calc(100% - 28px); margin-top: 32px; }
  .archive h1 { font-size: 38px; }
  .meet-card { border-radius: 21px; }
  .processing-card { gap: 16px; margin-top: 20px; padding: 18px; border-radius: 20px; }
  .processing-copy h2 { font-size: 18px; }
  .processing-percent { font-size: 24px; }
  .processing-steps li { font-size: 10px; }
  .tabs { width: 100%; }
  .tab { flex: 1 0 auto; }
  .protocol-section, .proto-text, .fcard { border-radius: 20px; }
  .error-card { border-radius: 24px; }
}

@media (max-width: 420px) {
  .chat-panel, .ai-panel { border-radius: 0; }
  .home-action { min-height: 148px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0f0f10;
    --paper-deep: #1c1c1e;
    --surface: #242426;
    --surface-soft: #2c2c2e;
    --ink: #f5f5f7;
    --ink-soft: #e5e5ea;
    --muted: #a1a1a6;
    --line: rgba(255,255,255,.1);
    --line-strong: rgba(255,255,255,.16);
    --blue: #0a84ff;
    --blue-hover: #2490ff;
    --blue-soft: rgba(10,132,255,.14);
    --apple-material: rgba(36,36,38,.7);
    --apple-material-heavy: rgba(36,36,38,.88);
    --apple-edge: rgba(255,255,255,.07);
  }
  body:not(.call-mode) {
    background:
      radial-gradient(circle at 16% 8%, rgba(100,210,255,.11), transparent 25rem),
      radial-gradient(circle at 82% 92%, rgba(10,132,255,.08), transparent 31rem),
      var(--paper);
  }
  .topbar { border-bottom-color: rgba(255,255,255,.07); background: rgba(20,20,22,.72); box-shadow: inset 0 -1px rgba(255,255,255,.02); }
  .navlink:hover { background: rgba(118,118,128,.17); }
  .home-actions::after { border-color: var(--paper); }
  .home-action, .home-join, .preview-row, .meet-card, .protocol-section, .proto-text, .fcard {
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 20px 55px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.055);
  }
  .home-action:not(:disabled):hover { border-color: rgba(10,132,255,.34); background: rgba(54,54,57,.88); box-shadow: 0 26px 64px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07); }
  .home-action-primary { background: linear-gradient(145deg, rgba(38,45,55,.9), rgba(24,34,47,.88)); }
  .home-action-icon { background: rgba(118,118,128,.18); }
  .home-action-primary .home-action-icon { background: rgba(10,132,255,.16); }
  .home-action-disabled { background: rgba(44,44,46,.7); }
  .btn { color: var(--ink); background: rgba(58,58,60,.65); box-shadow: inset 0 1px rgba(255,255,255,.055); }
  .btn:hover { background: rgba(72,72,74,.92); }
  .btn-primary { color: #fff; background: var(--blue); }
  .field input[type="text"], .field select, .home-join input { color: var(--ink); background-color: rgba(44,44,46,.78); }
  .lobby-back { background: rgba(44,44,46,.62); box-shadow: inset 0 1px rgba(255,255,255,.05); }
  .lobby-card > .field, .lobby-card > .grid2, .lobby-card > .devices, .lobby-card > .switch-field { border-color: rgba(255,255,255,.09); background: rgba(36,36,38,.72); }
  .protocol-lead { border-color: rgba(10,132,255,.22); background: linear-gradient(135deg, rgba(35,43,54,.9), rgba(25,34,47,.8)); }
  .protocol-task, .seg .who .t, .tabs { background: rgba(118,118,128,.13); }
  .share-readonly-badge { border-color: rgba(255,255,255,.1); background: rgba(58,58,60,.62); }
  .share-result { border-color: rgba(48,209,88,.22); background: rgba(48,209,88,.09); }
  .share-link-input { border-color: rgba(255,255,255,.1); color: var(--ink-soft); background: rgba(44,44,46,.78); }
  .share-result-error { border-color: rgba(255,105,97,.24); background: rgba(255,105,97,.09); }
  .archive-locked-card, .share-error { border-color: rgba(255,255,255,.1); background: rgba(36,36,38,.82); }
  .processing-card { border-color: rgba(10,132,255,.26); background: linear-gradient(135deg, rgba(30,42,58,.9), rgba(25,34,47,.8)); box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.055); }
  .processing-card.is-stale { border-color: rgba(255,159,10,.3); background: linear-gradient(135deg, rgba(52,42,28,.92), rgba(39,34,28,.84)); }
  .processing-warning { color: #ffd28a; background: rgba(255,159,10,.14); }
  .processing-steps li i { border-color: #242426; }
  .tab.active { background: rgba(72,72,74,.92); box-shadow: 0 4px 12px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.065); }
  .badge.ready { color: #64b5ff; }
  .badge.live { color: #58d66f; }
  .badge.error { color: #ff6961; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .home-action, .home-join, .lobby-card > .field, .lobby-card > .grid2,
  .lobby-card > .devices, .lobby-card > .switch-field, .preview-row, .call-top,
  .controls-inner, .device-quick-menu, .parts-panel, .parts-head, .chat-compose,
  .ai-tip-peek, .meet-card, .processing-card, .protocol-section, .proto-text, .fcard, .toast, .error-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .topbar, .home-action, .home-join, .preview-row, .meet-card, .protocol-section, .proto-text, .fcard { background: var(--surface); }
  .processing-card { background: var(--surface); }
  .call-top, .controls-inner, .device-quick-menu, .parts-panel, .parts-head, .chat-compose, .ai-tip-peek { background: #242426; }
}

@media (prefers-contrast: more) {
  :root { --line: currentColor; --line-strong: currentColor; }
  .topbar, .home-action, .home-join, .preview-row, .meet-card, .protocol-section,
  .processing-card, .proto-text, .fcard, .call-top, .controls-inner, .parts-panel, .error-card { border-width: 2px; }
  .muted, .meta-row, .sub, .footnote { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home-shell, .lobby-card, .home-join, .device-quick-menu, .parts-panel, .ai-tip-peek,
  .error-card { animation: none !important; }
  .meet-progress-track i, .processing-track i { transition: none !important; }
  #view-call, .controls, .call-note { transition: none !important; }
  button[data-apple-pressed="true"], a.btn[data-apple-pressed="true"],
  a.home-action[data-apple-pressed="true"], a.card-link[data-apple-pressed="true"],
  .device-option[data-apple-pressed="true"] { transform: none !important; filter: brightness(.92); }
}