/*
  FARZI Studio - responsive / mobile layer.

  Loaded after every other stylesheet so these rules win without touching
  the feature files they adjust. Layout and usability only: no behaviour,
  pricing or generation logic lives here. Breakpoints used across the app:
  1100 (narrow desktop), 900 (tablet: icon sidebar), 560 (phone: drawer).
*/

/* ================================================= mobile navigation */
.fz-nav-toggle, .fz-nav-close, .fz-nav-backdrop { display: none; }

@media (max-width: 560px) {
  .fz-nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    flex: none; width: 44px; height: 44px; margin-right: 6px; padding: 0; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  }
  .fz-nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #e9e7f2; transition: transform .25s, opacity .2s; }
  body.fz-nav-open .fz-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.fz-nav-open .fz-nav-toggle span:nth-child(2) { opacity: 0; }
  body.fz-nav-open .fz-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* The desktop sidebar, as an off-canvas drawer with full labels. */
  .farzi-sidebar {
    display: flex !important; z-index: 1300; width: min(300px, 86vw) !important; padding: 18px 16px !important;
    transform: translateX(-105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
    box-shadow: 24px 0 60px rgba(0, 0, 0, .55); overflow-y: auto; overscroll-behavior: contain;
  }
  body.fz-nav-open .farzi-sidebar { transform: translateX(0); visibility: visible; }
  .farzi-sidebar .farzi-sidebar-brand .name,
  .farzi-sidebar .farzi-nav-item span:not(.icon),
  .farzi-sidebar .farzi-nav-group-label,
  .farzi-sidebar .farzi-sidebar-vip b,
  .farzi-sidebar .farzi-sidebar-vip .balance,
  .farzi-sidebar .farzi-vip-upgrade { display: revert !important; }
  .farzi-sidebar .farzi-nav-item { justify-content: flex-start !important; padding: 12px 14px !important; min-height: 44px; }
  .fz-nav-close {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 14px; right: 12px;
    width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 22px; line-height: 1;
    color: #e9e7f2; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04);
  }
  .fz-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1290; background: rgba(3, 4, 8, .6);
    backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  body.fz-nav-open .fz-nav-backdrop { opacity: 1; pointer-events: auto; }
  body.fz-nav-open { overflow: hidden; }

  /* Topbar: keep every control reachable within 320px. */
  header.topbar { gap: 6px !important; padding: 0 10px !important; }
  header.topbar .brand { flex: none; }
  header.topbar .brand .brand-copy { display: none; }
  header.topbar .top-right { gap: 6px !important; min-width: 0; }
  header.topbar .credits-pill > span:not(.credits-orb) { display: none; }
  header.topbar .credits-pill { padding: 0 12px !important; min-height: 40px; }
  header.topbar .profile-pill #profileText { display: none; }
}

@media (max-width: 360px) {
  header.topbar .farzi-notif-btn { display: none; }
  header.topbar .farzi-vip-pill { padding: 0 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .farzi-sidebar, .fz-nav-toggle span, .fz-nav-backdrop { transition: none !important; }
}

/* ================================================= RB Director
   The module injects a 280px | chat | 300px grid; below 1100px it is
   narrowed and below 900px stacked with the conversation first. */
@media (max-width: 1100px) {
  .rbd-shell .rbd-layout { grid-template-columns: 240px minmax(0, 1fr) 260px; }
  .rbd-shell .rbd-console { padding: 20px 18px; }
}
@media (max-width: 900px) {
  .rbd-shell .rbd-topbar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .rbd-shell .rbd-powered { display: none; }
  .rbd-shell .rbd-layout { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .rbd-shell .rbd-layout > .rbd-col { overflow: visible; flex: none; padding: 14px; }
  .rbd-shell .rbd-layout > .rbd-col:nth-child(2) { order: -1; min-height: calc(100dvh - 64px); display: flex; flex-direction: column; }
  .rbd-shell .rbd-col.context, .rbd-shell .rbd-col.production { border: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
  .rbd-shell .rbd-console { padding: 6px 2px 10px; height: auto; flex: 1; min-height: 0; max-width: none; }
  .rbd-shell .rbd-history { min-height: 220px; }
  .rbd-shell .rbd-btn { min-height: 40px; }
}
@media (max-width: 900px) {
  .rbd-shell .rbd-input-wrap { flex: 1; min-width: 0; }
}
@media (max-width: 560px) {
  .rbd-shell .rbd-mode-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rbd-shell .rbd-msg { max-width: 94%; }
  .rbd-shell .rbd-composer-row { gap: 8px; }
}

/* ================================================= forms on phones
   16px text inputs stop iOS Safari zooming the page on focus. */
@media (max-width: 560px) {
  input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"],
  input:not([type]), textarea, select { font-size: 16px !important; }
}

/* ================================================= tool shells (.fpo-*)
   Shared production-shell top bar: wrap instead of running off-screen. */
@media (max-width: 560px) {
  .fpo-shell .fpo-topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .fpo-shell .fpo-topbar .fpo-title { min-width: 0; flex: 1 1 auto; }
  .fpo-shell .fpo-topbar .fpo-subtitle { order: 10; flex-basis: 100%; }
  .fpo-shell .fpo-topbar .fpo-spacer { display: none; }
  .fpo-shell .fpo-btn { min-height: 38px; }
}

/* FARZI AI Video Editor workspace (#farziAiVideoEditor): the desktop
   media | preview | inspector+composer row collapsed the preview to 0px
   and cut the composer off on phones. Below 900px the columns stack with
   the preview first; the multi-track timeline keeps its own scrolling. */
@media (max-width: 900px) {
  #farziAiVideoEditor .fpo-body { padding: 10px; }
  #farziAiVideoEditor .fpo-layout { flex-direction: column; height: auto; }
  #farziAiVideoEditor .fpo-layout > * {
    width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important;
    border-left: 0 !important; border-right: 0 !important; box-sizing: border-box;
  }
  #farziAiVideoEditor .fpo-layout > *:nth-child(2) { order: -1; min-height: 220px; }
  #farziAiVideoEditor .fpo-layout > * + * { border-top: 1px solid rgba(255, 255, 255, .07); }
  #farziAiVideoEditor textarea { width: 100% !important; min-width: 0; box-sizing: border-box; }
}
@media (max-width: 560px) {
  #farziAiVideoEditor .fpo-btn.small { min-height: 36px; min-width: 36px; }
  /* Per-track toggles live in a fixed 92px track header: keep them compact. */
  #farziAiVideoEditor .fve-track .fpo-btn.small { min-height: 0; min-width: 0; }
  #farziAiVideoEditor input[type="range"] { min-height: 28px; }
  #farziAiVideoEditor .aie-lefttab { min-height: 44px; }
}

/* ================================================= generation composer */
@media (max-width: 560px) {
  #workspaceView .compose-row { flex-wrap: wrap; gap: 8px; }
  #workspaceView .compose-row .compose-btn { flex: none; min-height: 44px !important; }
  #workspaceView .compose-row .compose-btn.icon { width: 44px !important; min-width: 44px !important; height: 44px !important; }
}

/* ================================================= small close buttons */
@media (max-width: 560px) {
  .modal .close, #profileMenu .close { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
}

/* List + detail production tools (Characters, Assets, Continuity Scenes):
   the 260px list and the detail pane stack on phones. */
@media (max-width: 560px) {
  .fpo-shell .fpo-layout { flex-direction: column; height: auto; }
  .fpo-shell .fpo-layout > .fpo-sidebar { width: 100% !important; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .fpo-shell .fpo-layout > .fpo-main { flex: none; min-width: 0; }
  .fpo-shell .fpo-body { padding: 12px; }
}

/* FARZI AI Video Editor home: hero and "new project" row wrap on phones. */
@media (max-width: 560px) {
  #farziAiVideoEditor .aie-home-hero { flex-direction: column; align-items: stretch; gap: 16px; }
  #farziAiVideoEditor .aie-home-hero .fpo-btn { width: 100%; justify-content: center; }
  #farziAiVideoEditor .aie-home-input { min-width: 0; flex: 1 1 160px; }
  #farziAiVideoEditor .aie-home-cat-grid { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); }
  #farziAiVideoEditor input[type="range"] { max-width: 100%; min-width: 0; flex: 1 1 80px; }
}