/* Раскладка живого приложения поверх дизайн-системы tt.css (мокап рисовал экраны в рамках). */
html, body { height: 100%; }
body.dark { background: var(--bg-base); color: var(--text-primary); }
body.light { background: var(--l-bg); color: var(--l-text); }
[hidden] { display: none !important; }
a { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .55; }

.screen { min-height: 100dvh; }
.screen.dk-stage { min-height: 100dvh; }

/* встреча на весь экран */
.call.app { height: 100dvh; }
.call.app .call-top { min-height: 58px; }
.peer-tile video, .self-tile video, .solo-tile video, .cam-preview video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0a0e18; }
.self-tile video.mirror, .solo-tile video.mirror, .cam-preview video.mirror { transform: scaleX(-1); }
.peer-tile video { object-fit: contain; background: #05070c; }
.tile-off { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(400px 260px at 50% 40%, rgba(79, 124, 255, .12), transparent), var(--bg-elevated); z-index: 1; }
.tile-off span { width: 96px; height: 96px; border-radius: 50%; background: var(--brand-grad); display: grid; place-items: center; font-size: 34px; font-weight: 750; color: #fff; }
.self-tile .tile-off span { width: 52px; height: 52px; font-size: 20px; }
.peer-wait { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 2; padding: 20px; }
.peer-wait h3 { margin: 14px 0 6px; font-size: 19px; }
.peer-wait p { margin: 0; color: var(--text-secondary); font-size: 14px; max-width: 380px; }
.peer-wait .pulse { margin: 0 auto; }
.tile-name, .net-badge { z-index: 3; }
.self-tile { z-index: 4; }

.ctrl-btn .badge-soon { position: absolute; top: -7px; right: -14px; background: var(--warning-soft); color: var(--warning); border-radius: 999px; font-size: 8.5px; font-weight: 750; padding: 2px 6px; text-transform: uppercase; letter-spacing: .4px; pointer-events: none; }
.voice-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.voice-opts button { cursor: pointer; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); border-radius: 10px; padding: 10px 8px; font-size: 12.5px; font-weight: 600; }
.voice-opts button.is-active { background: var(--coral-soft); border-color: var(--brand-b); color: #ffd8cc; }
.ctrl-pop p.hint { margin: 10px 0 0; color: var(--text-tertiary); font-size: 11.5px; line-height: 1.5; }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: rgba(18, 24, 38, .96); border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: 12px; padding: 10px 16px; font-size: 13px; z-index: 100; box-shadow: var(--shadow-lg); }
.tap-audio { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; }

.qr-box { display: grid; place-items: center; padding: 12px; background: #fff; border-radius: 12px; }
.qr-box svg { width: 200px; height: 200px; shape-rendering: crispEdges; }
.invite-panel .field input { font-size: 13.5px; }

.msg-file a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: 12.5px; }
.file-row .fic { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; flex-shrink: 0; }
.file-row .fic svg { width: 16px; height: 16px; }
.file-row b { display: block; font-size: 12.5px; word-break: break-all; }
.file-row small { color: var(--text-tertiary); }
.file-row a { margin-left: auto; color: var(--accent-strong); font-weight: 650; white-space: nowrap; }
.side-empty { color: var(--text-tertiary); font-size: 12.5px; text-align: center; padding: 30px 10px; }
.chat-log .msg { white-space: pre-wrap; word-break: break-word; }

.err-card { width: min(520px, 100%); text-align: center; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 22px; padding: 38px 30px 28px; box-shadow: var(--shadow-lg); }
.err-card h2 { margin: 0 0 8px; font-size: 22px; }
.err-card p { margin: 0 auto 22px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 400px; }

a.btn, a.l-btn { text-decoration: none; }
.soon-inline { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: #a26a00; background: #fff4dc; border-radius: 999px; padding: 3px 9px; vertical-align: 2px; }
.l-btn:disabled { opacity: .55; transform: none; box-shadow: none; }
#resend.is-disabled { color: var(--l-text3); pointer-events: none; }
.peer-tile.is-solo video { object-fit: cover; }

.share { text-decoration: none; }
.tu-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sas-btn { white-space: nowrap; }
.cab { min-height: 100dvh; }
.cab-user > span { min-width: 0; }
.cab-user > span > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }

/* страницы-светлые: шапка и подвал вне лендинга */
.l-page { min-height: 100dvh; display: flex; flex-direction: column; }
.l-page main { flex: 1; }
.l-nav a.brand { text-decoration: none; }

@media (max-width: 1100px) {
  .call.app .side { position: absolute; inset: 58px 0 86px 0; width: auto; z-index: 20; border-left: 0; }
}
@media (max-width: 760px) {
  .call.app .call-top { padding: 10px 12px; gap: 8px; }
  .call.app .call-title small, .call.app .call-top .pill.is-e2e, .call.app .call-top .pill.is-wait { display: none; }
  .call.app .sas-btn { padding: 5px 9px; }
  .call.app .call-scene { padding: 8px; }
  .call.app .peer-tile, .call.app .solo-tile { inset: 8px; border-radius: 12px; }
  .call.app .vid-area .peer-tile { inset: 0; }
  .call.app .self-tile { width: 96px; aspect-ratio: 3 / 4; right: 16px; bottom: 16px; }
  .call.app .call-ctrls { gap: 6px; padding: 10px 8px 12px; flex-wrap: nowrap; justify-content: space-between; }
  .call.app .ctrl-wrap > span { display: none; }
  .call.app .ctrl-btn { width: 44px; height: 44px; }
  .call.app .ctrl-sep { display: none; }
  .call.app .ctrl-end { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .call.app .ctrl-end .lbl { display: none; }
  .call.app .side { inset: 54px 0 70px 0; }
  .call.app .ctrl-pop { position: fixed; left: 12px; right: 12px; bottom: 76px; width: auto; transform: none; }
  .knock { top: 64px; }
  .knock-acts { flex-direction: column; }
  .join-card { padding: 18px; gap: 16px; }
  .l-nav { padding: 14px 18px; gap: 12px; }
  .l-nav-links { display: none; }
  .auth-stage { padding: 28px 16px; }
  .l-hero { padding: 36px 18px 48px; gap: 28px; }
  .l-hero h1 { font-size: 40px; }
  .l-hero p.lead { font-size: 16px; }
  .l-section { padding: 56px 18px 0; }
  .l-h2 { font-size: 28px; }
  .privacy-band, .l-final { margin-left: 18px; margin-right: 18px; padding: 32px 22px; }
  .pb-quote { font-size: 30px; }
  .cab { grid-template-columns: 1fr; }
  .cab-side { border-right: 0; border-bottom: 1px solid var(--l-border); }
  .cab-main { padding: 22px 18px 32px; }
}
@media (max-width: 520px) {
  .stamps.is-grid { grid-template-columns: 1fr; }
  .call.app .call-ctrls { gap: 4px; padding: 10px 6px 12px; }
  .call.app .ctrl-btn, .call.app .ctrl-end { width: 40px; height: 40px; }
  .call.app .ctrl-btn svg { width: 17px; height: 17px; }
  .call.app .ctrl-btn .badge-soon { display: none; }
}