/* ============================================================================
   ВИДЕО-ХАБ И ЗАПИСИ — порт стилей concept docs/video-concepts/video-module.html
   (экраны hub/recordings) 1:1: act-карты, invite-ссылка+QR, mrow-строки
   встреч, rec-сетка записей, мобильный app-хром концепта.

   NB (мобильный брейкпоинт): переопределения ниже breakpoint md=768px собраны
   в @media (max-width:768px) в конце файла. При порте из концепта обёртка
   @media была потеряна — мобильные правила (узкий padding хаба, 1-колоночный
   grid, flex-wrap строк) текли на десктоп и корёжили десктопный хаб под
   мобильный вид. Осиротевший .app-* хром концепта (mobile-header/bottomnav/fab)
   реальными вьюхами не используется — шелл идёт через shared/mobile_shell
   (layout "video"); правила оставлены под тем же @media и на десктопе скрыты.
   ========================================================================= */
.app__body{ display:flex; flex:1; overflow:hidden; }
.app__main{ flex:1; overflow-y:auto; background:var(--color-bg); }
.shell-timer-pill{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border-radius:var(--radius-full);
  background:var(--color-danger-soft); border:var(--hairline-width) solid var(--color-danger); color:var(--color-danger-text); }
.shell-timer-pill__dot{ width:6px; height:6px; border-radius:50%; background:var(--color-danger); animation:pulse-dot 1.6s ease-in-out infinite; }
.shell-timer-pill__time{ font-family:var(--type-mono); font-size:12.5px; font-weight:700; }
/* =============================================================================
   VIDEO MODULE — screen styles
   ============================================================================= */

/* ── Hub ─────────────────────────────────────────────────────────── */
.hub{ max-width:1080px; margin:0 auto; padding:40px 40px 96px; }
.hub__greet{ margin-bottom:32px; }
.hub__hello{ font-size:34px; font-weight:200; letter-spacing:-.02em; line-height:1.05; }
.hub__hello em{ color:var(--color-accent); }
.hub__sub{ margin-top:8px; color:var(--color-fg-muted); font-size:14.5px; }
.hub__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; margin-bottom:32px; }
.act-card{ position:relative; overflow:hidden; border-radius:var(--radius-2xl); padding:26px; border:var(--hairline-width) solid var(--color-border);
  background:var(--color-bg-elevated); box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.act-card--hero{ background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in oklch, var(--color-accent) 16%, transparent), transparent 60%),
    var(--color-bg-elevated); }
.act-card__glyph{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--color-accent-soft); color:var(--color-accent-strong); margin-bottom:18px; }
.act-card__glyph .icon{ width:24px; height:24px; }
.act-card h3{ font-size:20px; font-weight:400; letter-spacing:-.01em; }
.act-card p{ margin-top:7px; color:var(--color-fg-muted); font-size:13.5px; line-height:1.55; }
.act-card__foot{ margin-top:auto; padding-top:22px; }
/* invite / copy-link */
.invite{ margin-top:18px; }
.invite__row{ display:flex; gap:8px; }
.invite__link{ flex:1; display:flex; align-items:center; gap:10px; height:44px; padding:0 8px 0 14px; border-radius:var(--radius-md);
  border:var(--hairline-width) solid var(--color-border-strong); background:var(--color-bg); min-width:0; }
.invite__link .icon{ color:var(--color-accent); flex:none; }
.invite__url{ flex:1; font-family:var(--type-mono); font-size:12.5px; color:var(--color-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.invite__copy{ height:44px; padding:0 16px; flex:none; }
.invite__meta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.invite__meta-item{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--color-fg-muted); }
.invite__meta-item .icon{ width:15px; height:15px; color:var(--color-fg-subtle); }
.invite__qr{ display:flex; align-items:center; gap:16px; margin-top:18px; padding:14px; border-radius:var(--radius-lg); background:var(--color-bg-muted); }
.invite__qr-img{ width:74px; height:74px; border-radius:10px; background:#fff; padding:7px; flex:none; }
.invite__qr-text{ font-size:12.5px; color:var(--color-fg-muted); line-height:1.5; }
/* section headers + rows */
.hub-sec{ margin-top:34px; }
.hub-sec__head{ display:flex; align-items:center; margin-bottom:12px; }
.hub-sec__head h2{ font-size:13px; font-weight:600; }
.hub-sec__head .eyebrow{ margin-right:auto; }
.hub-sec__link{ font-size:12.5px; color:var(--color-accent); display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.mrow{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--radius-lg); border:var(--hairline-width) solid var(--color-border);
  background:var(--color-bg-elevated); transition:border-color var(--motion-duration-fast) var(--motion-ease), transform var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease); cursor:pointer; }
.mrow + .mrow{ margin-top:8px; }
.mrow:hover{ border-color:var(--color-border-strong); transform:translateY(-1px); box-shadow:var(--shadow-card); }
.mrow__time{ text-align:center; flex:none; width:58px; }
.mrow__time-h{ font-family:var(--type-mono); font-size:15px; font-weight:600; }
.mrow__time-d{ font-size:10.5px; color:var(--color-fg-subtle); text-transform:uppercase; letter-spacing:.06em; }
.mrow__div{ width:var(--hairline-width); align-self:stretch; background:var(--color-border); }
.mrow__body{ flex:1; min-width:0; }
.mrow__title{ font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrow__sub{ font-size:12px; color:var(--color-fg-muted); margin-top:2px; display:flex; align-items:center; gap:8px; }
.mrow__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.rec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rec-card{ border-radius:var(--radius-lg); overflow:hidden; border:var(--hairline-width) solid var(--color-border); background:var(--color-bg-elevated); cursor:pointer;
  transition:transform var(--motion-duration-fast) var(--motion-ease), box-shadow var(--motion-duration-fast) var(--motion-ease), border-color var(--motion-duration-fast) var(--motion-ease); }
.rec-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--color-border-strong); }
.rec-card__thumb{ position:relative; aspect-ratio:16/10; background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in oklch, var(--color-accent) 30%, var(--color-bg-muted)), var(--color-bg-muted));
  display:grid; place-items:center; }
.rec-card__play{ width:40px; height:40px; border-radius:50%; background:var(--bg-glass); backdrop-filter:blur(8px); display:grid; place-items:center; color:var(--color-fg); box-shadow:var(--shadow-card); }
.rec-card__dur{ position:absolute; right:8px; bottom:8px; font-family:var(--type-mono); font-size:11px; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; }
.rec-card__body{ padding:11px 13px; }
.rec-card__title{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-card__meta{ font-size:11.5px; color:var(--color-fg-subtle); margin-top:3px; }
/* Под-строка карточки записи: пометка «Запись неполная» (Г1, усечённый egress). */
.rec-card__sub{ font-size:11.5px; color:var(--color-fg-subtle); margin-top:3px; }
.rec-card__sub--warn{ color:var(--color-warning-text); }
.player{ flex:1; overflow-y:auto; padding:24px 28px; }
.player__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.player__title{ font-size:22px; font-weight:300; letter-spacing:-.01em; }
.player__sub{ font-size:13px; color:var(--color-fg-muted); margin-top:4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.player__stage{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-xl); overflow:hidden; border:var(--hairline-width) solid var(--color-border-strong);
  background:linear-gradient(160deg,#241c14,#0d0b07); display:grid; place-items:center; margin-bottom:16px; }
.player__play{ width:64px; height:64px; border-radius:50%; background:var(--bg-glass); backdrop-filter:blur(10px); border:var(--hairline-width) solid var(--color-border); display:grid; place-items:center; color:var(--color-fg); cursor:pointer; box-shadow:var(--shadow-card); }
.player__scrub{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:12px; }
.player__bar{ flex:1; height:5px; border-radius:99px; background:rgba(255,255,255,.2); position:relative; }
.player__bar::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:34%; border-radius:99px; background:var(--color-accent); }
.player__bar::after{ content:""; position:absolute; left:34%; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:#fff; }
.player__time{ font-family:var(--type-mono); font-size:12px; color:#fff; }
.player__tabs{ display:flex; gap:2px; padding:3px; background:var(--color-bg-muted); border-radius:10px; width:max-content; margin-bottom:14px; }
.player__tab{ padding:7px 14px; border-radius:8px; font-size:12.5px; font-weight:600; color:var(--color-fg-muted); cursor:pointer; border:0; background:transparent; }
.player__tab.is-active{ background:var(--color-bg-elevated); box-shadow:var(--shadow-card); color:var(--color-fg); }
.player__transcript{ display:flex; flex-direction:column; gap:14px; max-width:680px; }
/* ══════════ EMPTY STATE ══════════ */
.empty{ display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 24px; gap:12px; }
.empty__ic{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--color-bg-muted); color:var(--color-fg-subtle); }
.empty__ic .icon{ width:30px; height:30px; }
.empty h3{ font-size:16px; font-weight:500; }
.empty p{ font-size:13px; color:var(--color-fg-muted); max-width:290px; line-height:1.55; }
.empty .btn{ margin-top:4px; }
.reclist.is-empty .empty{ display:flex; }

/* ══════════ Desktop base для мобильного app-хрома концепта ══════════
   На десктопе (≥769px) осиротевший app-хром скрыт. Показ + reflow — в
   @media (max-width:768px) ниже. */
.app-mobile-header, .app-bottomnav, .app-fab, .app-scrim{ display:none; }
.call-float{ display:none; }

/* interaction / theme (глобально, вне мобильного @media) */
.player__play{ transition:transform var(--motion-duration-fast) var(--motion-ease); }
.player__play:hover{ transform:scale(1.05); }
.player__tab:not(.is-active):hover{ color:var(--color-fg); }
[data-theme="light"] .player__stage{ background:linear-gradient(160deg,#efe6db,#d9ccbc); }
:root { --bg-glass: color-mix(in oklch, var(--color-bg-elevated) 86%, transparent); }

/* Утилиты экранов хаба/записей (вынос inline-стилей, audit 60/202). */
.vh-scroll { overflow-y: auto; }
.hub__hello { margin-top: 10px; }
.vh-note { margin-top: 10px; }
.rec-grid { margin-top: 8px; }
.rec-card__actions { margin-top: 8px; display: flex; gap: 8px; }
.rec-player { grid-column: 1 / -1; margin-top: 10px; }
.rec-player__video { width: 100%; border-radius: var(--radius-lg); background: #000; }
.hub-sec--pushed { margin-top: 24px; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SHELL / reflow — breakpoint md = 768px.
   Всё, что ниже, применяется ТОЛЬКО на узких экранах (была потеряна при
   порте — см. шапку файла).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* grid хаба и записей в одну/две колонки */
  .hub__grid{ grid-template-columns:1fr; gap:13px; margin-bottom:22px; }
  .rec-grid{ grid-template-columns:1fr 1fr; gap:11px; }

  /* mobile top bar (52px, safe-area) */
  .app-mobile-header{ display:flex; align-items:center; gap:6px; height:52px; flex:none; padding:0 6px;
    padding-top:env(safe-area-inset-top,0px); height:calc(52px + env(safe-area-inset-top,0px));
    background:var(--color-bg-elevated); border-bottom:var(--hairline-width) solid var(--color-border); position:relative; z-index:40; }
  .app-mh__btn{ width:44px; height:44px; border-radius:11px; border:0; background:transparent; color:var(--color-fg); display:grid; place-items:center; cursor:pointer; flex:none; }
  .app-mh__btn:active{ background:var(--color-bg-muted); }
  .app-mh__btn .icon{ width:22px; height:22px; }
  .app-mh__title{ flex:1; font-size:16px; font-weight:600; letter-spacing:-.01em; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:2px; }
  .app-mh__badge{ position:absolute; top:9px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--color-danger); }
  .app-scrim{ display:block; position:fixed; inset:0; z-index:55; background:color-mix(in oklch, var(--color-fg) 55%, transparent);
    opacity:0; pointer-events:none; transition:opacity var(--motion-duration-base) var(--motion-ease); }
  .app.drawer-open .app-scrim{ opacity:1; pointer-events:auto; }
  /* content clears the bottom nav */
  .app__main{ padding-bottom:calc(70px + env(safe-area-inset-bottom,0px)); }
  /* bottom nav (56px + safe-area) */
  .app-bottomnav{ display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:45;
    height:calc(58px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px);
    background:color-mix(in oklch, var(--color-bg-elevated) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:var(--hairline-width) solid var(--color-border); }
  .app-bn__item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--color-fg-muted);
    font-size:10.5px; font-weight:500; background:transparent; border:0; cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .app-bn__item .icon{ width:23px; height:23px; }
  .app-bn__item.is-active{ color:var(--color-accent-strong); }
  /* video FAB */
  .app-fab{ display:grid; place-items:center; position:fixed; right:16px; bottom:calc(72px + env(safe-area-inset-bottom,0px)); z-index:46;
    width:56px; height:56px; border-radius:50%; background:var(--color-accent); color:var(--color-accent-on); border:0; box-shadow:var(--shadow-glow); cursor:pointer; }
  .app-fab .icon{ width:25px; height:25px; }
  .app-fab:active{ transform:scale(.94); }
  /* Hub content reflow */
  .hub{ padding:16px 15px calc(88px + env(safe-area-inset-bottom,0px)); }
  .hub__greet{ margin-bottom:20px; }
  .hub__hello{ font-size:26px; }
  .hub__sub{ font-size:13.5px; }
  .act-card{ padding:19px; border-radius:var(--radius-xl); }
  .act-card__glyph{ width:42px; height:42px; margin-bottom:14px; }
  .act-card h3{ font-size:18px; }
  .invite__copy{ padding:0 13px; }
  .invite__qr{ margin-top:14px; }
  .hub-sec{ margin-top:26px; }
  .mrow{ flex-wrap:wrap; padding:12px; }
  .mrow__actions{ width:100%; justify-content:flex-end; margin-top:2px; }
  .player{ display:none; }
  /* floating "call in progress" pill (in-shell mobile) */
  .call-float{ display:flex; align-items:center; gap:9px; position:fixed; left:12px; right:82px; bottom:calc(70px + env(safe-area-inset-bottom,0px)); z-index:44;
    height:44px; padding:0 6px 0 14px; border-radius:var(--radius-full); background:var(--color-success); color:#fff; box-shadow:var(--shadow-card); text-decoration:none; }
  .call-float__dot{ width:8px; height:8px; border-radius:50%; background:#fff; flex:none; animation:pulse-dot 1.6s ease-in-out infinite; }
  .call-float__txt{ flex:1; min-width:0; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .call-float__time{ font-family:var(--type-mono); font-size:12px; opacity:.9; }
  .call-float__go{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.22); flex:none; }
  .call-float__go .icon{ width:17px; height:17px; }
}