/* ============================================================
   NeuroArt Studio — Desktop / laptop adaptation
   ------------------------------------------------------------
   Viewed on a PC/laptop (wide viewport ≥ 940px) the mobile phone
   frame becomes a full desktop application: the app fills the
   window, the bottom tab bar becomes a left navigation rail, the
   bottom sheets become centred modal dialogs and content grids
   open up to use the extra width. Everything below the breakpoint
   (phones) keeps the original mobile shell untouched — this file
   only ever overrides styles inside the >= 940px media query.
   Same Aurum Studio design tokens, same components.
   ============================================================ */

@media (min-width: 940px) {

  /* ── Window: drop the phone frame, fill the viewport ── */
  body {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background:
      radial-gradient(110% 90% at 50% -12%, #17151A 0%, var(--bg) 55%),
      var(--bg);
  }

  .grain { z-index: 90; }

  .device {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    /* translucent so the ambient aurum glows bleed through the whole window */
    background: linear-gradient(180deg, rgba(12,12,14,0.78) 0%, rgba(8,8,10,0.92) 100%);
  }
  .device__notch, .statusbar { display: none; }

  /* ── Application shell → 2 panes: left nav rail + content ── */
  .app {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "nav  appbar"
      "nav  screen"
      "nav  dock";
    overflow: hidden;
  }

  /* ── Left navigation rail (was the bottom tab bar) ── */
  .tabnav {
    grid-area: nav;
    display: flex;
    align-self: stretch;
    width: 268px;
    padding: 18px 14px 22px;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(17,17,21,0.92) 0%, rgba(10,10,13,0.96) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 1px 0 0 rgba(255,255,255,0.02) inset;
  }
  /* keep the rail hidden on screens without a tab bar (sub-screens) */
  .tabnav[hidden] { display: none; }

  .tabnav__row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    padding: 8px;
    border-radius: var(--r-xl);
    background: transparent;
    border: none;
    box-shadow: none;
  }

  .tabnav__item {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: var(--r-md);
  }
  .tabnav__item:hover { background: var(--surface); }
  .tabnav__item.is-active {
    color: var(--accent-2);
    background: linear-gradient(135deg, var(--amber-a12), var(--amber-a05));
  }
  .tabnav__label { font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }

  /* Create → becomes a full, prominent rail button */
  .tabnav__fab {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: var(--r-md);
  }
  .tabnav__star {
    width: 46px; height: 46px;
    box-shadow: 0 10px 24px -8px var(--accent-glow), 0 1px 0 rgba(255,255,255,0.4) inset;
  }
  .tabnav__star svg { width: 22px; height: 22px; }
  .tabnav__fab-label { font-size: 13px; letter-spacing: 0.02em; }

  /* ── App bar ── */
  .appbar {
    grid-area: appbar;
    padding: 16px 28px 14px;
  }
  .appbar__in { max-width: 1200px; margin: 0 auto; }
  .appbar__na { font-size: 16px; }
  .appbar__back:hover { background: var(--surface-2); }

  /* ── Content pane: centred reading column for clean line-lengths ── */
  .screen {
    grid-area: screen;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 28px 56px;
    scrollbar-width: thin;
    scrollbar-color: rgba(216,222,232,0.22) transparent;
  }
  .screen::-webkit-scrollbar { width: 10px; display: block; background: transparent; }
  .screen::-webkit-scrollbar-thumb { background: rgba(216,222,232,0.18); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
  .screen::-webkit-scrollbar-thumb:hover { background: rgba(216,222,232,0.3); border: 3px solid transparent; background-clip: content-box; }
  /* cap every top-level block so sections don't stretch to the window edges */
  .screen > * { width: 100%; max-width: 1200px; }

  /* ── Dock (primary action row) — centred, not stretched ── */
  .dock {
    grid-area: dock;
    padding: 14px 28px 24px;
  }
  .dock__row { max-width: 560px; margin: 0 auto; }
  .dock__hint { max-width: 560px; margin: 8px auto 0; }

  /* ── Grids open up ── */
  .tilegrid { grid-template-columns: repeat(3, 1fr); }
  .ctorgrid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .inspgrid { column-count: 3; column-gap: 8px; }
  .gengrid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (min-width: 1360px) {
    .inspgrid { column-count: 4; }
    .tilegrid { grid-template-columns: repeat(4, 1fr); }
    .gengrid { grid-template-columns: repeat(5, 1fr); }
  }

  /* ── Home showcase: 3 слайда в ряд, автолистание выключено (JS, mqDesktop) ── */
  .showcase__track { gap: 16px; }
  .showcase__track .scard { flex: 0 0 calc((100% - 32px) / 3); max-height: none; }
  .showcase__track .scard--skel { flex: 0 0 calc((100% - 32px) / 3); }
  /* HOME v2: видео-слайды 9:16 — фикс. высота вместо трети ширины (9:16 от
     ~389px вышло бы 692px); в ряд помещаются 3 вертикальных кейса. Правило
     ниже по файлу перекрывает и .scard--skel для видео-слайдов. */
  .showcase__track .scard--video { flex: 0 0 auto; width: auto; height: min(58vh, 540px); }
  /* HOME v2: кейсы-шаблоны — фиксированная ширина карточки вместо 44% трека */
  .caserail { gap: 14px; }
  .caserail .casecard { flex-basis: 208px; }
  .ideasgrid { column-count: 3; column-gap: 16px; }
  .ideacard { margin-bottom: 16px; }

  /* ── Lightbox: roomier stage, arrows pushed to the edges ── */
  .lightbox__body { padding: 64px 72px 4px; }
  .lightbox__nav--prev { left: 16px; }
  .lightbox__nav--next { right: 16px; }
  .lightbox__bar { max-width: 760px; }

  /* ── Paywall: 4 cards in a row (no scroll on wide viewports), featured pops up ── */
  .pw-rail { overflow: visible; margin: 28px 0 4px; padding: 0; }
  .pw-rail > .pw-card { flex: 1 1 0; }
  .pw-dots { display: none; }
  .pw-card--feat { margin-top: -12px; padding-top: 38px; z-index: 1; }
  .pw-hero__title { font-size: 42px; }
  .pw-hero__lede { font-size: 15.5px; max-width: 60ch; }
  .pw-terms { max-width: 460px; }

  /* bigger generation / result stage */
  .genstage { min-height: 60vh; }
  .ghost { width: min(60%, 340px); }
  .result__art { max-width: 560px; max-height: 66vh; }
  .result__art .rs-prompt { font-size: 13px; }

  /* ── Bottom sheets → centred modal dialogs ── */
  /* Mobile hides the closed sheet by sliding it below the viewport; centred
     here, it must instead fade out — otherwise the closed sheet hangs in the
     middle of the screen (styles.css keeps `.sheet[hidden] { display:flex }`
     for the mobile slide animation). */
  .sheet {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: min(560px, 92vw);
    max-height: 84dvh;
    border-radius: var(--r-xl);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,255,255,0.04) inset;
    transition: transform .36s var(--ease-out), opacity .26s var(--ease-out), visibility 0s linear .36s;
  }
  .sheet.is-shown {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .36s var(--ease-out), opacity .26s var(--ease-out), visibility 0s;
  }
  .sheet__grip { display: none; }
  .sheet-veil.is-shown { opacity: 1; }

  /* ── Chat drawer → pinned column next to the rail ──
     On the chat screen the drawer is not an overlay here: it becomes a
     third grid column (implicit track, sized by its width) spanning all
     three rows. The veil never shows on desktop. */
  .chatsdrawer {
    position: static;
    grid-column: 3;
    grid-row: 1 / 4;
    width: 288px;
    transform: none;
    background: linear-gradient(180deg, rgba(17,17,21,0.92) 0%, rgba(10,10,13,0.96) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    box-shadow: none;
    padding: 18px 14px 20px;
  }
  .chatsdrawer.is-open { transform: none; }
  .chatsdrawer__close { display: none; }
  .chatsdrawer__new { margin: 0 0 12px; }
  .chatsdrawer__head { padding: 2px 6px 12px; }
  .chatsveil { display: none; }
  /* toast: keep it clear of the pinned drawer column */
  body:has(.chatsdrawer.is-pinned) .toast { left: calc(50% + 134px + 144px); }

  /* ── Toast settles above the rail ── */
  .toast { left: calc(50% + 134px); }
}