/* FARZI Model Selector + Gallery — Figma visual layer only.
   This file intentionally contains no data, API, credits, model or generation logic.
   Palette/type source: Figma "Build app.zip" AI Video Model Selector reference
   (src/App.tsx) - near-black surfaces, single gold accent, JetBrains Mono for
   labels/data, Outfit for body copy. Model-selector rules are scoped under
   #creatorPop; the Library/Gallery full-viewport rules below are scoped
   under body.farzi-gallery-open. Neither leaks into the rest of FARZI Studio. */

/* ============================================================
   LIBRARY / GALLERY — hard full-viewport requirement.
   #galleryView already existed as a real, backend-driven, top-level view
   (js/gallery/gallery-app.js) - it was just rendered alongside the fixed
   sidebar (which sits on top of it, z-index 60) rather than replacing
   the whole screen. This makes it a genuine standalone screen: sidebar
   and topbar hidden, gallery fills the viewport edge-to-edge.
   ============================================================ */
body.farzi-gallery-open .farzi-sidebar,
body.farzi-gallery-open .topbar{
  display:none;
}
body.farzi-gallery-open #galleryView{
  margin-left:0 !important;
}
#galleryView{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  flex-direction:column;
  background:#09090b;
  overflow:hidden;
}
#galleryFullHeader{
  flex:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:24px 40px 18px;
  border-bottom:1px solid #21212b;
  background:#0c0c10;
}
#galleryCloseBtn{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 16px 9px 12px;
  border-radius:10px;
  border:1px solid #21212b;
  background:#16161c;
  color:#eeebe5;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
#galleryCloseBtn span:first-child{
  font-size:18px;
  line-height:1;
}
#galleryCloseBtn:hover{
  background:#1d1d24;
  border-color:rgba(212,169,74,.4);
}
#galleryScrollArea{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:24px 40px 40px;
}

/* ============================================================
   Settings pill is now a real <button> (opens #farziSettingsPopover) -
   reset native button chrome so it still reads as the same pill.
   ============================================================ */
#settingsPill{
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  color:var(--muted);
  transition:border-color .15s ease,color .15s ease;
}
#settingsPill:hover{
  border-color:rgba(212,169,74,.4);
  color:#eeebe5;
}

/* ============================================================
   SETTINGS POPOVER (#farziSettingsPopover) - anchored to the Composer,
   houses the real #videoModelDetail/#imageModelDetail panels. Same
   near-black/gold theme as the model-selector modal, applied here too
   for visual consistency across both real, existing overlays.
   ============================================================ */
#farziSettingsPopover .farzi-gen-modal-panel{
  background:#09090b;
  border-color:#21212b;
  font-family:'Outfit',Inter,ui-sans-serif,system-ui,sans-serif;
  box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 0 1px rgba(212,169,74,.05);
}
#farziSettingsPopover .farzi-gen-modal-sticky-top{
  background:#0c0c10;
  border-bottom-color:#21212b;
}
#farziSettingsPopover .farzi-gen-modal-title{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:800;
  color:#eeebe5;
}
#farziSettingsPopover .farzi-gen-modal-close{
  background:#111115;
  border-color:#21212b;
  color:#8a8a96;
}
#farziSettingsPopover .farzi-gen-modal-close:hover{
  color:#eeebe5;
  border-color:rgba(212,169,74,.45);
}
#farziSettingsPopover .farzi-gen-modal-body{
  background:#09090b;
  padding:16px 18px 18px;
}
/* Real bug found and fixed (visual audit, screenshotted): in the
   original wide/tall #creatorPop modal, .farzi-gen-sticky-footer's
   position:sticky correctly pinned it to the bottom of the scrolling
   body. In this narrower, shorter Settings popover the same
   position:sticky caused it to compute its stuck offset incorrectly and
   render on TOP of the aspect-ratio/audio/references sections instead
   of below them - reproduced and confirmed via getBoundingClientRect
   (the footer's top overlapped rows that should render well above it).
   Simplest robust fix: this footer scrolls with the rest of the
   settings here instead of staying sticky - it remains fully reachable
   by scrolling the popover body, and the overlap is completely gone
   with no risk of it recurring under different content lengths. */
#farziSettingsPopover .farzi-gen-sticky-footer{
  position:static;
  margin:14px 0 0;
  background:none;
  border-top:1px solid #21212b;
}
#farziSettingsPopover .selector .label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  color:#6b6b7a;
}
#farziSettingsPopover .chip{
  background:#16161c;
  border-color:#21212b;
}
#farziSettingsPopover .chip.active{
  border-color:rgba(212,169,74,.55);
  background:rgba(212,169,74,.1);
  color:#d4a94a;
}
#farziSettingsPopover .farzi-selected-model-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid #21212b;
}
#farziSettingsPopover .farzi-selected-model-header b{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:15px;
  font-weight:800;
  color:#d4a94a;
}
#farziSettingsPopover .farzi-gen-sticky-footer{
  background:linear-gradient(180deg,rgba(9,9,11,0) 0%,#09090b 30%);
  border-top-color:#21212b;
}
#farziSettingsPopover .farzi-gen-generate-btn{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:800;
  background:linear-gradient(135deg,#d4a94a,#c49438);
  border-color:#d4a94a;
  color:#09090b;
}
#farziSettingsPopover .cost b{
  color:#d4a94a;
}


#creatorPop{
  --fig-bg:#09090b;
  --fig-panel:#0c0c10;
  --fig-card:#111115;
  --fig-card2:#16161b;
  --fig-border:#21212b;
  --fig-accent:#d4a94a;
  --fig-accent2:#c49438;
  --fig-text:#eeebe5;
  --fig-muted:#8a8a96;
  --fig-muted2:#6b6b7a;
  --fig-faint:#4a4a55;
  --fig-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fig-sans:'Outfit',Inter,ui-sans-serif,system-ui,sans-serif;
}

#creatorPop .farzi-gen-modal-panel{
  background:var(--fig-bg);
  border-color:var(--fig-border);
  font-family:var(--fig-sans);
  box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 0 1px rgba(212,169,74,.05);
}

#creatorPop .farzi-gen-modal-sticky-top{
  background:var(--fig-panel);
  border-bottom-color:var(--fig-border);
}

#creatorPop .farzi-gen-modal-title{
  font-family:var(--fig-mono);
  font-weight:800;
  letter-spacing:.01em;
  color:var(--fig-text);
}

#creatorPop .farzi-gen-modal-subtitle{
  font-family:var(--fig-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fig-muted2);
}

#creatorPop .farzi-gen-modal-close{
  background:var(--fig-card);
  border-color:var(--fig-border);
  color:var(--fig-muted);
}
#creatorPop .farzi-gen-modal-close:hover{
  color:var(--fig-text);
  border-color:rgba(212,169,74,.45);
}

#creatorPop .tabs{
  border-bottom-color:var(--fig-border);
}
#creatorPop .tab{
  font-family:var(--fig-mono);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--fig-muted2);
}
/* Real bug found and fixed (Figma visual audit): an older, unscoped,
   !important "UI V2" rule (.tab.active, .chip.active { background:
   linear-gradient(violet) !important }) was still winning the cascade
   over the plain rule below - normal specificity can never beat
   !important. Screenshotted and confirmed: tabs and every selected
   duration/resolution/aspect chip inside the model selector and
   Settings popover were rendering violet, not the intended gold theme.
   Fixed with matching !important, scoped to these two real overlays
   only - never touches .tab.active/.chip.active anywhere else in FARZI. */
#creatorPop .tab.active{
  background:rgba(212,169,74,.06) !important;
  border-color:transparent !important;
  color:var(--fig-accent) !important;
  box-shadow:inset 0 -2px 0 var(--fig-accent);
}
#creatorPop .chip.active,
#farziSettingsPopover .chip.active{
  background:rgba(212,169,74,.1) !important;
  border-color:rgba(212,169,74,.72) !important;
  color:#d4a94a !important;
}

#creatorPop .farzi-model-search{
  background:var(--fig-card);
  border-color:var(--fig-border);
  color:var(--fig-text);
  font-family:var(--fig-sans);
}
#creatorPop .farzi-model-search:focus{
  border-color:rgba(212,169,74,.45);
}
#creatorPop .farzi-model-search::placeholder{
  color:var(--fig-faint);
}

#creatorPop .farzi-filter-chip{
  font-family:var(--fig-mono);
  border-color:var(--fig-border);
  background:var(--fig-card);
  color:var(--fig-muted2);
}
#creatorPop .farzi-filter-chip.active{
  border-color:rgba(212,169,74,.55);
  background:rgba(212,169,74,.1);
  color:var(--fig-accent);
}

#creatorPop .farzi-gen-modal-body{
  background:var(--fig-bg);
}

#creatorPop .selector .label{
  font-family:var(--fig-mono);
  color:var(--fig-muted2);
  font-size:9.5px;
  letter-spacing:.14em;
}

#videoModelCards,
#imageModelCards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.farzi-model-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  padding:0;
  overflow:hidden;
  text-align:left;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:linear-gradient(180deg,#111115,#0e0e12);
  color:var(--text);
  box-shadow:0 3px 14px rgba(0,0,0,.28);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.farzi-model-card:hover{
  transform:translateY(-2px);
  border-color:rgba(212,169,74,.28);
  background:#121217;
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}

.farzi-model-card.active{
  transform:translateY(-2px);
  border-color:rgba(212,169,74,.82);
  background:linear-gradient(180deg,#16161b,#111115);
  box-shadow:0 0 0 1px rgba(212,169,74,.16),0 14px 34px rgba(0,0,0,.42);
}

.fmc-visual{
  position:relative;
  min-height:142px;
  padding:16px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#d9d1c5;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:
    radial-gradient(90% 120% at 12% 0%,rgba(212,169,74,.20),transparent 58%),
    radial-gradient(80% 120% at 88% 100%,rgba(124,92,255,.13),transparent 60%),
    linear-gradient(145deg,#16171d,#0a0a0e);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.fmc-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(8,8,11,.86) 100%);
  pointer-events:none;
  z-index:1;
}

/* Real model-specific imagery/footage (task Part 4/5): fills the same
   visual slot, same gradient-fade overlay, with a slow premium zoom on
   hover - restrained, never autoplaying off-hover, respects
   prefers-reduced-motion. */
.fmc-visual.has-media{
  padding:0;
  background:#0a0a0e;
}
.fmc-visual-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.farzi-model-card:hover .fmc-visual-media{
  transform:scale(1.06);
}
@media (prefers-reduced-motion: reduce){
  .fmc-visual-media{
    transition:none;
  }
  .farzi-model-card:hover .fmc-visual-media{
    transform:none;
  }
}

/* The 3 premium showcase cards above the grid (.farzi-model-showcase-
   card/.fsc-*) still used the pre-Figma violet accent for their
   fallback visual gradient and primary action button - found during
   the same visual audit as the tab/chip !important bug above. Gold-
   tinted here to match the rest of the selector; card surface/border
   already used a compatible gold from an earlier pass, left as-is. */
#creatorPop .fsc-visual{
  background:radial-gradient(120% 140% at 30% 0%, rgba(212,169,74,.28), transparent 60%), #0a0d14;
}
#creatorPop .farzi-model-showcase-card{
  background:linear-gradient(180deg, rgba(212,169,74,.05), var(--glass-bg));
}
#creatorPop .fsc-btn.primary{
  background:linear-gradient(135deg,#d4a94a,#c49438);
  border-color:#d4a94a;
  color:#09090b;
}
#creatorPop .fsc-btn.primary:hover{
  background:linear-gradient(135deg,#e1bb65,#c79439);
}

/* Same real-asset treatment for the 3 premium showcase cards above the
   grid (.farzi-model-showcase-card) - consistent motion/zoom. */
.fsc-visual-media{
  transition:transform 1.2s cubic-bezier(.16,1,.3,1);
}
.farzi-model-showcase-card:hover .fsc-visual-media{
  transform:scale(1.06);
}
@media (prefers-reduced-motion: reduce){
  .fsc-visual-media{
    transition:none;
  }
  .farzi-model-showcase-card:hover .fsc-visual-media{
    transform:none;
  }
}

.fmc-visual{
  text-shadow:0 2px 12px rgba(0,0,0,.65);
}

.farzi-model-card.active .fmc-visual{
  background:
    radial-gradient(90% 120% at 12% 0%,rgba(212,169,74,.28),transparent 58%),
    radial-gradient(80% 120% at 88% 100%,rgba(124,92,255,.17),transparent 60%),
    linear-gradient(145deg,#1a191c,#0a0a0e);
}

.fmc-top{
  margin:0;
  padding:14px 14px 0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}

.fmc-top b{
  font-size:14px;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--text);
}

.fmc-type-badge{
  flex:none;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  background:rgba(255,255,255,.03);
  color:var(--muted2);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.fmc-caps{
  margin:9px 14px 0;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.fmc-badge{
  font-size:8.5px;
  font-weight:700;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(212,169,74,.07);
  color:#cfc2a6;
  border:1px solid rgba(212,169,74,.16);
  letter-spacing:.02em;
}

.fmc-status{
  margin:9px 14px 0;
  font-size:9.5px;
  font-weight:700;
  color:var(--muted2);
  letter-spacing:.05em;
  text-transform:uppercase;
}

.fmc-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:12px 14px 14px;
}

.fmc-action-btn{
  min-width:0;
  min-height:34px;
  padding:7px 9px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:#16161c;
  color:var(--text);
  font-size:10px;
  font-weight:750;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,color .15s ease;
}

.fmc-action-btn:hover:not(:disabled){
  background:#1d1d24;
  border-color:rgba(212,169,74,.34);
  transform:translateY(-1px);
}

.fmc-action-btn.primary{
  background:linear-gradient(135deg,#d4a94a,#bd8830);
  border-color:#d4a94a;
  color:#09090b;
  box-shadow:0 7px 18px rgba(212,169,74,.14);
}

.fmc-action-btn.primary:hover:not(:disabled){
  background:linear-gradient(135deg,#e1bb65,#c79439);
  border-color:#e1bb65;
}

.fmc-action-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none;
}

/* ============================================================
   RESULT POPUP (#farziResultPopup) - same "generation modal
   architecture" the task requires preserving; only its visual theme is
   extended to match, no structural/behavioral change here.
   ============================================================ */
#farziResultPopup .farzi-result-panel{
  background:#0c0c10;
  border-color:#21212b;
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(212,169,74,.06);
  font-family:'Outfit',Inter,ui-sans-serif,system-ui,sans-serif;
}
#farziResultPopup .farzi-result-title{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  color:#eeebe5;
}
#farziResultPopup .farzi-result-close{
  color:#6b6b7a;
}
#farziResultPopup .farzi-result-close:hover{
  color:#eeebe5;
}
#farziResultPopup .farzi-result-body{
  background:#09090b;
}
#farziResultPopup .farzi-result-spinner{
  border-color:rgba(212,169,74,.22);
  border-top-color:#d4a94a;
}
#farziResultPopup .farzi-result-actions .chip{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  background:#16161c;
  border-color:#21212b;
  color:#eeebe5;
}
#farziResultPopup .farzi-result-actions .chip:hover{
  border-color:rgba(212,169,74,.4);
}

/* Honest numbered generation progress (task Part 19) - appears inside
   #farziSettingsPopover's job panel AND #farziResultPopup's body (the
   SAME real counter, see renderGeneratingProgress) - unscoped since both
   contexts already use this near-black/gold theme. Real status text
   stays underneath (Job ... · PROCESSING) so nothing is hidden; the big
   number is purely an honest "work is happening" indicator, capped
   below 100 until the real job is COMPLETED. */
.farzi-progress-panel{
  padding:18px 4px;
  text-align:center;
}
.farzi-progress-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  color:#6b6b7a;
  margin-bottom:10px;
}
.farzi-progress-number{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:44px;
  font-weight:800;
  color:#d4a94a;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.farzi-progress-sub{
  margin-top:8px;
  font-size:10.5px;
  color:#6b6b7a;
}

#videoModelCards .farzi-model-card,
#imageModelCards .farzi-model-card{
  animation:farziModelCardIn .22s ease both;
}

@keyframes farziModelCardIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:1100px){
  #videoModelCards,
  #imageModelCards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  #videoModelCards,
  #imageModelCards{
    grid-template-columns:1fr;
  }

  .fmc-visual{
    min-height:128px;
  }

  .fmc-actions{
    grid-template-columns:1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  #videoModelCards .farzi-model-card,
  #imageModelCards .farzi-model-card{
    animation:none;
  }
  .farzi-model-card,
  .farzi-model-card:hover,
  .farzi-model-card.active{
    transition:none;
    transform:none;
  }
}