/* =========================================================
   AI Film OS — CLEAN override.css
   Cleaned layout + single source of truth for generate console
   ========================================================= */

/* =========================================================
   Home / Studio layout
   ========================================================= */

#screen-home {
  height: 100%;
  overflow: hidden !important;
}

.home-body {
  height: calc(100vh - 52px);
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  gap: 12px !important;
  padding-top: 14px !important;
  padding-bottom: 165px !important;
}

/* Studio/tool/library views */
#screen-home.studio-tool-mode .home-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: calc(100vh - 52px) !important;
  padding-top: 18px !important;
  padding-bottom: 165px !important;
  overflow: hidden !important;
}

#screen-home.studio-tool-mode .service-row,
#screen-home.studio-tool-mode .marketing-cards-row,
#screen-home.studio-tool-mode .effect-cards-row {
  display: none !important;
}

#screen-home .home-body > .grid-label {
  display: none !important;
}

#screen-home.studio-tool-mode #inlineGrid,
#screen-home:not(.home-page-mode) #inlineGrid {
  margin-top: 0 !important;
}

/* =========================================================
   Home cards
   ========================================================= */

.service-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
  align-items: stretch !important;
}

#screen-home.home-page-mode .service-row .svc-card {
  display: none !important;
}

.service-row .cta-card {
  grid-column: 1 / -1 !important;
  min-height: 120px !important;
  max-height: 140px !important;
  padding: 15px 18px !important;
  border-radius: 18px !important;
}

.cta-typewriter {
  font-size: 14px !important;
  min-height: 20px !important;
}

.cta-sub {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.cta-btn {
  padding: 7px 13px !important;
  font-size: 12px !important;
}

/* Marketing cards */
#screen-home.home-page-mode .marketing-cards-row {
  gap: 18px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* =========================================================
   Home effects cards
   ========================================================= */

#screen-home.home-page-mode .effect-cards-row {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 4px 14px !important;
}

/* Wide effects intro card */
#screen-home.home-page-mode .effect-cards-row::before {
  content: "التأثيرات السينمائية\A ارفع صورتك واختر التأثير";
  white-space: pre-line;
  flex: 0 0 420px !important;
  height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background:
    linear-gradient(to left, rgba(0,0,0,.15), rgba(0,0,0,.82)),
    url("assets/effects/transition.gif") center / cover no-repeat,
    #151a1e !important;
  border: 1px solid rgba(156,255,0,.22) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
  box-shadow: inset 0 0 80px rgba(0,0,0,.4) !important;
  animation: wideEffectCardIn 900ms cubic-bezier(.16,1,.3,1) forwards;
}

#screen-home.home-page-mode .effect-cards-row .effect-card {
  flex: 0 0 auto !important;
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 18px !important;
  opacity: 0;
  transform: translateY(14px);
  animation: smallEffectCardIn 900ms cubic-bezier(.16,1,.3,1) forwards;
}

#screen-home.home-page-mode .effect-cards-row .effect-card:nth-child(1) { animation-delay: 150ms; }
#screen-home.home-page-mode .effect-cards-row .effect-card:nth-child(2) { animation-delay: 260ms; }
#screen-home.home-page-mode .effect-cards-row .effect-card:nth-child(3) { animation-delay: 370ms; }
#screen-home.home-page-mode .effect-cards-row .effect-card:nth-child(4) { animation-delay: 480ms; }
#screen-home.home-page-mode .effect-cards-row .effect-card:nth-child(5) { animation-delay: 590ms; }

.effect-card {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  background:
    linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.12)),
    var(--ef-gif) center / cover no-repeat,
    #151a1e !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  cursor: pointer !important;
  transition: transform .15s ease, border-color .15s ease !important;
}

.effect-card:hover,
#screen-home.home-page-mode .effect-cards-row .effect-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(156,255,0,.35) !important;
}

.ec-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 12px !important;
  z-index: 2 !important;
}

.ec-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: rgba(156,255,0,.13) !important;
  border: 1px solid rgba(156,255,0,.25) !important;
  color: #9cff00 !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

.ec-name {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 5px !important;
}

.ec-desc {
  color: rgba(255,255,255,.66) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ec-upload-hint {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  z-index: 3 !important;
  background: rgba(0,0,0,.42) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.75) !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}

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

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

/* =========================================================
   Generated assets grid
   ========================================================= */

#inlineGrid {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--gen-card-size, 165px), 1fr)) !important;
  align-content: start !important;
  gap: 6px !important;
  padding-left: 4px !important;
  padding-bottom: 28px !important;
  scroll-behavior: smooth;
}

#inlineGrid .gc {
  min-height: var(--gen-card-size, 150px) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
}

#inlineGrid .gc img,
#inlineGrid .gc video,
#inlineGrid .gc-pending {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* =========================================================
   Studio size slider
   ========================================================= */

.studio-size-control {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  height: 14px !important;
  padding: 0 4px 2px !important;
  margin: 0 0 4px !important;
}

.studio-size-control span,
#studioSizeValue {
  display: none !important;
}

#studioSizeSlider {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 110px !important;
  height: 2px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  opacity: .75 !important;
}

#studioSizeSlider::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 2px !important;
  background: rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
}

#studioSizeSlider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 8px !important;
  height: 8px !important;
  margin-top: -3px !important;
  background: rgba(156,255,0,.95) !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

#studioSizeSlider:hover { opacity: 1 !important; }
#studioSizeSlider:hover::-webkit-slider-runnable-track { background: rgba(255,255,255,.28) !important; }

/* =========================================================
   Top navigation / tool visibility
   ========================================================= */

.hs-tab[data-tool="story"],
.hs-tab[data-tool="prompt"],
.gc-mode-tab[data-tool="story"],
.gc-mode-tab[data-tool="prompt"],
.mk-card[data-marketing-tool="prompt"] {
  display: none !important;
}

.tb-btn[data-screen="project"] {
  font-size: 0 !important;
}

.tb-btn[data-screen="project"]::after {
  content: "المشاريع";
  font-size: 12.5px !important;
}

body:has(#screen-home.active) #tbPill {
  display: none !important;
}

body:has(#screen-project.active) #tbPill {
  display: flex !important;
}

.home-sidebar {
  display: flex !important;
  flex-direction: column !important;
}

.hs-tab[data-tool="image"] { order: 1 !important; }
.hs-tab[data-tool="video"] { order: 2 !important; }
.hs-tab[data-tool="effects"] { order: 3 !important; }

.gc-mode-tabs {
  display: flex !important;
}

.gc-mode-tab[data-tool="image"] { order: 1 !important; }
.gc-mode-tab[data-tool="video"] { order: 2 !important; }
.gc-mode-tab[data-tool="effects"] { order: 3 !important; }

/* =========================================================
   GENERATE CONSOLE — CLEAN RTL
   ========================================================= */

/* Mode tabs: stay inside console, RTL order */
.gc-mode-tabs {
  position: relative !important;
  bottom: auto !important; left: auto !important;
  transform: none !important;
  width: auto !important;
  display: flex !important;
  gap: 6px !important;
  direction: rtl !important;
  margin-bottom: 8px !important;
  justify-content: flex-start !important;
}

/* Hide cine panel */
#cinePanel { display: none !important; }

/* Main console */
.gen-console {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(900px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 16px 18px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  background: rgba(11,13,17,.97) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.55) !important;
  overflow: visible !important;
  z-index: 110 !important;
}

/* Row 1: grid with RTL → send(left) | textarea | attach(right) */
.gc-main {
  display: grid !important;
  grid-template-columns: 44px 1fr 150px !important;
  gap: 10px !important;
  align-items: stretch !important;
  direction: rtl !important;
  position: relative !important;
  height: auto !important;
}

/* attach button */
.gc-attach,
#gcAttach {
  width: 44px !important;
  height: 44px !important;
  align-self: flex-end !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  inset: auto !important;
}

#gcAttach:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(156,255,0,.35) !important;
}

/* textarea */
.gc-textarea-wrap,
.gc-input-row,
.gc-left {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
}

#gcInput,
.gc-textarea {
  width: 100% !important;
  min-height: 44px !important;
  max-height: 110px !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: rgba(240,242,245,.95) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  resize: none !important;
  padding: 10px 4px !important;
  position: relative !important;
  inset: auto !important;
  right: auto !important; left: auto !important;
  top: auto !important; bottom: auto !important;
}

#gcInput::placeholder,
.gc-textarea::placeholder {
  color: rgba(255,255,255,.28) !important;
}

/* send button — left side (RTL grid column 3) */
#gcSend,
.gc-send {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-width: auto !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 64px !important;
  border-radius: 18px !important;
  background: #c8ff00 !important;
  color: #060f00 !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(156,255,0,.2) !important;
  transform: none !important;
  z-index: auto !important;
}

#gcSend:hover,
.gc-send:hover {
  filter: brightness(1.05) !important;
  transform: none !important;
}

/* Row 2: options */
.gc-options,
.gc-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  margin-top: 10px !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  direction: rtl !important;
}
.gc-options::-webkit-scrollbar { display: none !important; }

.gc-options > *, .gc-toolbar > * {
  position: relative !important;
  inset: auto !important;
  flex-shrink: 0 !important;
}

/* status hidden */
#gcStatus, .gc-status { display: none !important; }

/* ref row hidden (mini ref used instead) */
#gcRefRow { display: none !important; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-height: 820px) {
  .home-body {
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 150px !important;
  }

  #screen-home.home-page-mode .effect-cards-row {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
  }

  #screen-home.home-page-mode .effect-cards-row .effect-card {
    width: 124px !important;
    min-width: 124px !important;
    height: 220px !important;
    min-height: 220px !important;
  }

  #inlineGrid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
  }
}

@media (max-width: 1200px) {
  #screen-home.home-page-mode .effect-cards-row::before {
    flex-basis: 320px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 900px) {
  .home-body {
    padding-right: 66px !important;
    padding-left: 14px !important;
  }

  #inlineGrid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }

  .gen-console {
    width: calc(100vw - 16px) !important;
    bottom: 10px !important;
    padding: 12px 14px !important;
    border-radius: 20px !important;
  }
  .gc-main {
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto !important;
  }
  #gcSend, .gc-send {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    order: 3 !important;
  }
  .gc-options, .gc-toolbar { flex-wrap: wrap !important; }
  .gc-mode-tabs { flex-wrap: wrap !important; }
}



/* =========================================================
   UPLOAD / LIBRARY BUTTONS — stay inside gc-mode-tabs flow
   ========================================================= */

/* Keep upload/library buttons in normal flow inside the tabs row */
#gcTopUploadBtn,
#gcTopLibraryBtn {
  position: relative !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  z-index: auto !important;
}

/* Textarea: no coordinate overrides */
.gc-textarea-wrap,
.gc-input-row,
.gc-left {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
}

#gcInput,
.gc-textarea {
  text-align: right !important;
  direction: rtl !important;
  padding: 10px 8px !important;
  box-sizing: border-box !important;
}

/* Options: no coordinate overrides */
.gc-options,
.gc-toolbar {
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
}

/* Mode tabs: never fixed */
.gc-mode-tabs {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Library panel: position relative to console */
.gc-top-library-panel {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  z-index: 200 !important;
}

/* ── Topbar unified ── */
.topbar{position:fixed;top:0;left:0;right:0;height:52px;background:rgba(7,8,10,.97);border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:999;backdrop-filter:blur(16px);direction:rtl}
.tb-right,.tb-left{display:flex;align-items:center;gap:6px}
.tb-logo{width:32px;height:32px;border-radius:9px;background:#f0f2f5;color:#07080a;display:grid;place-items:center;text-decoration:none;flex-shrink:0;transition:.12s}
.tb-logo:hover{background:#c2ff00}
.tb-nav-btn{padding:6px 12px;border-radius:8px;background:transparent;border:none;color:rgba(240,242,245,.55);font-size:13px;font-weight:700;text-decoration:none;transition:.12s;font-family:inherit;cursor:pointer}
.tb-nav-btn:hover{color:#f0f2f5;background:rgba(255,255,255,.06)}
.tb-action-btn{padding:6px 14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(240,242,245,.7);font-size:12px;font-weight:700;text-decoration:none;transition:.12s}
.tb-action-btn:hover{background:rgba(255,255,255,.09);color:#f0f2f5}
.tb-icon-btn{width:32px;height:32px;border-radius:8px;background:transparent;border:none;color:rgba(240,242,245,.4);display:grid;place-items:center;cursor:pointer;padding:0}
.tb-icon-btn:hover{color:rgba(240,242,245,.7)}
.tb-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-weight:800;font-size:11px;display:grid;place-items:center;text-decoration:none;flex-shrink:0}