/* ============================================================================
   VibeOS — mobile responsive layer (shared)
   Loaded AFTER each screen's inline <style>, so it overrides the desktop shell
   at ≤768. Desktop (>768) is untouched. Breakpoints: 768 (phone/tablet), 480.
   Sidebar → off-canvas burger drawer (injected by mobile.js). Grids → 1 col.
   Editorial type preserved, just scaled. Touch targets ≥44px.
   ========================================================================== */

.mbar{ display:none; }            /* hidden on desktop; mobile.js appends it */
.mbackdrop{ display:none; }

@media (max-width:768px){
  /* ── app shell → single column, sidebar becomes a drawer ───────────────── */
  .app{ grid-template-columns:1fr !important; height:100dvh; }

  .side{
    position:fixed; top:0; left:0; bottom:0; width:280px; max-width:86vw;
    z-index:300; transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.23,1,.32,1);
    box-shadow:0 0 44px rgba(0,0,0,.65); overflow-y:auto;
    border-right:1px solid var(--hair); background:var(--bg);
  }
  .side.open{ transform:translateX(0); }
  /* the 1080 rail-rule hid labels — restore them inside the full drawer */
  .side .wm,.side .sect,.side .kbd b,.side .kbd span{ display:revert !important; }
  .side .row span:not(.mono){ display:revert !important; }
  .side .row{ padding:11px 10px; }

  /* fixed top bar + burger (appended to <body> by mobile.js) */
  .mbar{
    position:fixed; top:0; left:0; right:0; height:54px; z-index:250;
    display:flex; align-items:center; gap:12px; padding:0 14px;
    background:rgba(11,8,17,.88); backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--hair);
  }
  .mburger{
    width:42px; height:42px; display:grid; place-items:center; flex-shrink:0;
    background:transparent; border:1px solid var(--hair); border-radius:10px;
    color:var(--ink); cursor:pointer;
  }
  .mburger svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; }
  .mbar .mbrand{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--ink); }
  .mbar .mbrand b{ color:var(--accent); }

  .mbackdrop{
    display:block; position:fixed; inset:0; z-index:280; background:rgba(0,0,0,.55);
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .mbackdrop.show{ opacity:1; pointer-events:auto; }

  /* push scrollable content below the fixed bar */
  .main{ padding-top:70px !important; padding-left:18px !important; padding-right:18px !important; }

  /* ── editorial type scales down (still light + dramatic) ────────────────── */
  h1{ font-size:40px !important; line-height:1.02; }
  .deck,.stand{ font-size:16px !important; max-width:none !important; }

  /* ── metrics rows (index/billing/admin) → full-width stack ──────────────── */
  .figs{ flex-wrap:wrap; margin-top:28px; }
  .figs .fig{ flex:1 1 100%; min-width:100%; border-right:none; border-bottom:1px solid var(--hair); padding:18px 4px; }
  .figs .fig:last-child{ border-bottom:none; }

  /* ── index: agent fleet grid → 1 col ───────────────────────────────────── */
  .grid{ grid-template-columns:1fr !important; }

  /* ── section heads with action buttons wrap ────────────────────────────── */
  .sechead{ flex-wrap:wrap; gap:12px; }
  .sechead .ln{ display:none; }
  .sechead .cta,.sechead .cta2{ flex:1 1 auto; justify-content:center; min-height:46px; }
  .payvia{ width:100%; }

  /* ── agent room: chat full-bleed, tabs/facts scroll ────────────────────── */
  .hd{ padding-left:18px !important; padding-right:18px !important; }
  .idl{ flex-wrap:wrap; gap:12px; }
  .pulse{ margin-left:0; padding-bottom:0; }
  .facts{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .facts::-webkit-scrollbar{ display:none; }
  .fact{ white-space:nowrap; }
  .stream{ padding:18px 16px !important; }
  .msg{ max-width:100% !important; }
  .compose{ padding:12px 14px !important; gap:9px; }
  .cinp{ font-size:16px; }            /* ≥16px stops iOS zoom-on-focus */
  .byoa{ flex-wrap:wrap; padding:12px 18px; }
  .byoa .bcta{ width:100%; text-align:center; }
  .agency,.goal{ max-width:none; }

  /* ── pipeline kanban → horizontal snap columns ─────────────────────────── */
  .board{
    grid-template-columns:none !important; grid-auto-flow:column;
    grid-auto-columns:82vw; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .col{ scroll-snap-align:start; }
  .hdrow{ flex-wrap:wrap; gap:14px; }
  .flowstat{ order:2; }
  .addbtn{ order:1; width:100%; justify-content:center; min-height:46px; }

  /* ── workspace: buckets wrap, list rows compact ────────────────────────── */
  .buckets{ flex-wrap:wrap; }
  .bk{ flex:1 1 50%; min-width:50%; border-bottom:1px solid var(--hair); }
  .tools{ flex-wrap:wrap; }
  .art .tag,.art .when{ display:none; }
  .art .size{ width:auto; }

  /* ── billing: tariffs / chart split / limits → 1 col ───────────────────── */
  .tariffs,.split,.bill,.plans,.compare{ grid-template-columns:1fr !important; }
  .compare{ display:flex; flex-direction:column; }
  .compare .c{ border-right:none; border-bottom:1px solid var(--hair); }
  .plan{ flex-wrap:wrap; }
  .plan .pbtn{ flex:1 1 auto; min-height:46px; }

  /* ── connect: stepper + why cards stack ────────────────────────────────── */
  .why{ grid-template-columns:1fr !important; }
  .machine{ padding:22px 18px !important; }
  .acts{ gap:10px; } .acts .btn{ flex:1 1 auto; justify-content:center; }
  .codein{ flex-direction:column; } .codein .btn{ width:100%; }

  /* ── admin table → stacked cards ───────────────────────────────────────── */
  .tbl .thead{ display:none; }
  .trow{ grid-template-columns:1fr !important; gap:10px; }
  .act{ justify-content:flex-start; } .act a,.act button{ min-height:44px; }

  /* ── universal touch targets ───────────────────────────────────────────── */
  button,.btn,.cta,.pbtn,.pay,.addbtn,.oidc,.seg button{ min-height:44px; }
  input,.cinp,.vos-input{ min-height:46px; font-size:16px; }   /* ≥16px = no iOS zoom */
}

/* ============================================================================
   LANDING (signup) — sales face, polished hard on phone
   signup has NO app-shell (.wrap based) → these rules carry it.
   ========================================================================== */
@media (max-width:768px){
  .wrap{ padding:0 20px !important; }
  .top{ padding-top:20px !important; }
  .hero{ grid-template-columns:1fr !important; gap:32px !important; padding:36px 0 44px !important; }
  .hl h1{ font-size:46px !important; letter-spacing:-.03em; }
  .hl .deck{ font-size:17px !important; max-width:none !important; }
  .auth{ padding:26px 22px !important; }
  .cta{ min-height:50px; font-size:15px; }
  .oidc{ min-height:48px; }
  .gain .g2{ display:none; }                 /* drop the metric chip, keep the line */
  .sec{ padding-top:52px !important; }
  .sechead h2{ font-size:26px !important; }
  .bill .bc{ padding:24px 20px; }
}

@media (max-width:480px){
  h1{ font-size:34px !important; }
  .main{ padding-left:16px !important; padding-right:16px !important; }
  .wrap{ padding:0 16px !important; }
  .deck,.stand{ font-size:15px !important; }
  .figs .fig{ padding:16px 16px; }
  .bk{ flex:1 1 100%; min-width:100%; }
  .board{ grid-auto-columns:86vw; }

  /* landing on small phones */
  .hl h1{ font-size:38px !important; }
  .topnav{ gap:14px; }
  .topnav a:not(.ghost){ display:none; }     /* keep only «Войти» */
  .compare .c .cv{ font-size:30px; }
  .plan,.tar{ padding:24px 22px; }
}

/* respect reduced motion for the drawer */
@media (prefers-reduced-motion: reduce){
  .side{ transition:none !important; }
  .mbackdrop{ transition:none !important; }
}
