/* =============================================================
   SKIPPY SWAGS — app-shell.css
   "Theater" layout for >=1200px: a viewport-filling row of socials
   rail (collapsible) | stream | chat. Below this breakpoint the
   stacked layout from layout.css/chat.css applies unchanged.
   ============================================================= */

@media (min-width: 1200px) {
  .desktop {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .desktop-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .win--nav {
    flex-shrink: 0;
    margin: 0 0 var(--gap);
  }

  .app-body {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--gap);
    flex: 1;
    min-height: 0;
  }
  .app-body > .win {
    margin-bottom: 0;
  }

  /* ---- stream: fills leftover width and full height ---- */
  .app-stream {
    order: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .app-stream .win__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .app-stream .video-frame {
    flex: 1;
    min-height: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  /* ---- chat rail ---- */
  .app-chat {
    order: 1;
    width: var(--chat-rail-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .app-chat .chat-layout {
    flex: 1;
    min-height: 0;
  }
  .app-chat .well--log {
    max-height: none;
    min-height: 0;
  }

  /* ---- socials rail: a real column that pushes the stream. The
     rail animates its width; its inner content keeps a fixed width
     and is clipped, so nothing reflows mid-transition. ---- */
  .win--rail {
    order: -1;
    flex: 0 0 var(--socials-rail-width);
    width: var(--socials-rail-width);
    min-width: 0;
    z-index: 25;
    overflow: visible;
    transition: flex-basis var(--dur-slow) var(--ease-out), margin var(--dur-slow) var(--ease-out),
      background-color var(--dur-med) var(--ease-out),
      border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  }
  /* Collapsed: the panel takes no space (the negative margin also absorbs
     the row gap), so the stream runs to the edge and the small tab floats
     over its left side. */
  .win--rail[data-collapsed="true"] {
    flex-basis: 0;
    margin-right: calc(-1 * var(--gap));
    min-height: 0;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .win--rail .rail__content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: inherit;
    transition: opacity var(--dur-med) var(--ease-out);
  }
  .win--rail[data-collapsed="true"] .rail__content {
    opacity: 0;
    pointer-events: none;
  }
  .win--rail .rail__inner {
    width: var(--socials-rail-width);
    height: 100%;
  }

  .win--rail .socials-grid {
    height: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 14px 12px 12px;
    gap: 18px;
  }
  .win--rail .social-feed {
    min-height: 0;
  }

  /* Small tab riding the rail's right edge, centred vertically. When the
     rail is collapsed the same tab sits on its own at the left edge. */
  .win--rail .rail__handle {
    top: 50%;
    left: calc(100% + 1px);
    width: 18px;
    height: 64px;
    margin-top: -32px;
    color: var(--text-3);
    /* Solid, so the stream panel's border never shows through the tab
       where it overlaps it. */
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: left var(--dur-slow) var(--ease-out), color var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }
  /* Closed, it floats over the video: see-through glass so it doesn't
     block the picture. */
  .win--rail[data-collapsed="true"] .rail__handle {
    left: 0;
    background: var(--surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
  .win--rail[data-collapsed="true"] .rail__handle:hover {
    background: var(--surface-raised);
  }
  .win--rail .rail__handle:hover {
    color: var(--text);
    background: #1a1d2e;
  }
  .win--rail .rail__handle-icon {
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .win--rail[data-collapsed="true"] .rail__handle-icon {
    transform: rotate(180deg);
  }
}