/* ===== Accent theme variables (user-switchable: yellow default / pink / blue / green / orange / red) ===== */
#studiouiStudioRoot, #studiouiApp { --su-1:#ffd000; --su-2:#ffae00; --su-soft:#ffe680; --su-text:#ffd84d; }
#studiouiApp[data-accent="pink"], #studiouiStudioRoot[data-accent="pink"] { --su-1:#ff2bd6; --su-2:#8a2bff; --su-soft:#ff8be4; --su-text:#c084fc; }
#studiouiApp[data-accent="blue"], #studiouiStudioRoot[data-accent="blue"] { --su-1:#2b8bff; --su-2:#4f6bff; --su-soft:#8bd0ff; --su-text:#84b6ff; }
#studiouiApp[data-accent="green"], #studiouiStudioRoot[data-accent="green"] { --su-1:#27e07a; --su-2:#12b85f; --su-soft:#8bffc4; --su-text:#5cf0a0; }
#studiouiApp[data-accent="orange"], #studiouiStudioRoot[data-accent="orange"] { --su-1:#ff8a1f; --su-2:#ff6a00; --su-soft:#ffc28b; --su-text:#ffae5c; }
#studiouiApp[data-accent="red"], #studiouiStudioRoot[data-accent="red"] { --su-1:#ff3b3b; --su-2:#e01243; --su-soft:#ff9b9b; --su-text:#ff6b6b; }
/* Accent swatch picker (sidebar) */
.studioui-accent-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; }
.studioui-accent-row .lbl{ font-size:11px; color:rgba(255,255,255,0.5); margin-right:2px; }
.studioui-swatch{ width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,0.25); padding:0; transition:transform .12s, border-color .12s; }
.studioui-swatch:hover{ transform:scale(1.15); }
.studioui-swatch.active{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.2); }
.studioui-swatch.pink{ background:linear-gradient(135deg,#ff2bd6,#8a2bff); }
.studioui-swatch.blue{ background:linear-gradient(135deg,#2b8bff,#4f6bff); }
.studioui-swatch.yellow{ background:linear-gradient(135deg,#ffd000,#ffae00); }
.studioui-swatch.green{ background:linear-gradient(135deg,#27e07a,#12b85f); }
.studioui-swatch.orange{ background:linear-gradient(135deg,#ff8a1f,#ff6a00); }
.studioui-swatch.red{ background:linear-gradient(135deg,#ff3b3b,#e01243); }
/* ===== Companion mode: character picker bar ===== */
#studiouiCompanionBar{ display:flex; flex-wrap:nowrap; gap:8px; align-items:center; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; /* L-2: removed deprecated -webkit-overflow-scrolling:touch (no-op since iOS 13) */ }
#studiouiCompanionBar::-webkit-scrollbar{ height:7px; }
#studiouiCompanionBar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:999px; }
#studiouiCompanionBar::-webkit-scrollbar-track{ background:transparent; }
.studioui-comp-pick{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:999px; cursor:pointer; color:rgba(255,255,255,0.82); border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.05); font-size:13px; transition:all .12s; flex:0 0 auto; white-space:nowrap; }
.studioui-comp-pick:hover{ background:rgba(255,255,255,0.1); transform:translateY(-1px); }
.studioui-comp-pick.active{ border-color:var(--su-1); color:#fff; box-shadow:0 0 0 1px var(--su-1) inset; }
.studioui-comp-av{ width:24px; height:24px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; flex-shrink:0; }
.studioui-comp-new{ border-style:dashed!important; color:rgba(255,255,255,0.7)!important; }
/* Active companion header (name on top, image under) */
#studiouiCompHeader{ display:none; flex-direction:column; align-items:center; gap:6px; padding:14px 16px 6px; }
#studiouiCompHeader .comp-h-name{ font-weight:800; font-size:18px; }
#studiouiCompHeader .comp-h-img{ width:clamp(150px, 42vw, 210px); height:clamp(150px, 42vw, 210px); border-radius:50%; object-fit:cover; border:4px solid var(--su-1); box-shadow:0 8px 28px rgba(0,0,0,0.45); }
#studiouiCompHeader .comp-h-actions{ display:flex; gap:8px; margin-top:2px; }
#studiouiCompHeader .comp-h-actions button{ font-size:11px; padding:3px 11px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.7); cursor:pointer; }
#studiouiCompHeader .comp-h-actions button:hover{ background:rgba(255,255,255,0.1); color:#fff; }
/* New / edit companion modal */
/* H-3: safe-area padding for fixed modal wrappers (notch / home-bar devices) */
#studiouiCompModal{ position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:100002; display:none; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
#studiouiGalleryModal, #studiouiLightbox, #studiouiReportModal, #studiouiAccountModal { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important; }
#studiouiCompModal .box{ max-width:440px; margin:7vh auto 0; background:#1e1e1e; border:1px solid rgba(255,255,255,0.14); border-radius:16px; padding:22px; box-shadow:0 24px 80px rgba(0,0,0,.6); }
#studiouiCompModal .hd{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
#studiouiCompModal .hd strong{ color:#fff; font-size:17px; }
#studiouiCompModal .x{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; }
#studiouiCompModal label{ display:block; font-size:13px; color:rgba(255,255,255,0.75); margin:12px 0 5px; font-weight:600; }
#studiouiCompModal .opt{ font-weight:400; opacity:.55; }
#studiouiCompModal input[type=text], #studiouiCompModal textarea{ width:100%; box-sizing:border-box; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); color:#fff; font-size:13px; resize:vertical; }
#studiouiCompModal .vrow{ display:flex; gap:16px; }
#studiouiCompModal .vopt{ display:inline-flex; align-items:center; gap:6px; font-weight:500; color:#fff; cursor:pointer; margin:0; }
#studiouiCompModal .act{ display:flex; gap:10px; margin-top:20px; }
#studiouiCompModal .primary{ padding:12px 30px; border-radius:10px; border:none; background:linear-gradient(90deg,var(--su-1),var(--su-2)); color:#fff; cursor:pointer; font-weight:800; font-size:15px; letter-spacing:.02em; box-shadow:0 6px 20px rgba(0,0,0,0.45); transition:filter .14s, transform .14s; }
#studiouiCompModal .primary:hover{ filter:brightness(1.1); transform:translateY(-1px); }
#studiouiCompModal .act button:not(.primary){ padding:10px 18px; border-radius:8px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:#fff; cursor:pointer; }
#studiouiCompModal .err{ font-size:13px; margin-top:10px; min-height:16px; color:#ff6b6b; }
#studiouiCompModal .imgrow{ display:flex; gap:10px; }
#studiouiCompModal .upbtn{ display:inline-flex; align-items:center; gap:6px; margin:0; padding:8px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
#studiouiCompModal .upbtn:hover{ background:rgba(255,255,255,0.12); }
#studiouiCompModal .danger{ border:1px solid rgba(255,80,80,0.5)!important; background:rgba(255,80,80,0.12)!important; color:#ff8a8a!important; }
#studiouiCompModal .danger:hover{ background:rgba(255,80,80,0.22)!important; }
.studioui-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto; }
.studioui-ibtn {
  height:38px; width:100%; border-radius:10px; border:2px solid;
  background:transparent; display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; cursor:pointer; transition:all .14s ease;
}
.studioui-ibtn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.3); background:rgba(255,255,255,0.06); }
.studioui-ibtn-grey{border-color:#8a8a9a!important;background:rgba(255,255,255,0.06)!important;color:#fff!important;}
button.studioui-ibtn{appearance:none;-webkit-appearance:none;}
.studioui-ibtn-blue{border-color:#4da6ff;color:#4da6ff;}
.studioui-ibtn-green{border-color:#4dff91;color:#4dff91;}
.studioui-ibtn-red{border-color:#ff6b6b;color:#ff6b6b;}
.studioui-ibtn-report{border-color:#ffffff;color:#ff6b6b;}
.studioui-ibtn-yellow{border-color:#ffc107;color:#ffc107;}
.studioui-ibtn-yellow.filled{background:#ffc107;color:#fff;}
.thick-arrow{font-size:22px!important;font-weight:900;}
.gallery-card{
  border:1px solid rgba(255,255,255,0.12); border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));
  display:flex; flex-direction:column; min-height:340px;
}
.media-wrap{ height:240px; overflow:hidden; background:rgba(0,0,0,0.3); position:relative; cursor:pointer; }
.media-wrap img, .media-wrap video{ width:100%; height:100%; object-fit:cover; }
#studiouiAttachPreview{
  width:48px; height:48px; border-radius:10px; border:1px solid rgba(255,255,255,0.2);
  object-fit:cover; background:rgba(255,255,255,0.06); display:none;
}
#studiouiStyleSelect {
  animation: none !important;
  transition: none !important;
  -webkit-animation: none !important;
}
#studiouiStyleSelect * { animation: none !important; transition: none !important; }
/* M-5: fallback plain value FIRST, color-mix() enhanced value SECOND (correct override order) */
#studiouiCreativity::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--su-1), var(--su-2));
  box-shadow: 0 0 10px var(--su-1), 0 0 24px var(--su-2);
  cursor: pointer; border: 2px solid rgba(255,255,255,0.3);
  transition: box-shadow 0.15s, transform 0.15s;
}
@supports (color: color-mix(in srgb, red, blue)) {
  #studiouiCreativity::-webkit-slider-thumb {
    box-shadow: 0 0 10px color-mix(in srgb, var(--su-1) 75%, transparent), 0 0 24px color-mix(in srgb, var(--su-2) 55%, transparent);
  }
}
#studiouiCreativity::-webkit-slider-thumb:hover {
  box-shadow: 0 0 16px var(--su-1), 0 0 36px var(--su-2);
  transform: scale(1.15);
}
@supports (color: color-mix(in srgb, red, blue)) {
  #studiouiCreativity::-webkit-slider-thumb:hover {
    box-shadow: 0 0 16px var(--su-1), 0 0 36px color-mix(in srgb, var(--su-2) 85%, transparent);
  }
}
#studiouiCreativity::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--su-1), var(--su-2));
  box-shadow: 0 0 10px var(--su-1), 0 0 24px var(--su-2);
  cursor: pointer; border: 2px solid rgba(255,255,255,0.3);
}
@supports (color: color-mix(in srgb, red, blue)) {
  #studiouiCreativity::-moz-range-thumb {
    box-shadow: 0 0 10px color-mix(in srgb, var(--su-1) 75%, transparent), 0 0 24px color-mix(in srgb, var(--su-2) 55%, transparent);
  }
}
#studiouiGalleryHint { color:rgba(255,255,255,0.7) !important; opacity:1 !important; }
#studiouiGalleryModalTitle { color:#fff !important; opacity:1 !important; }
#studiouiGalleryModalClose { color:#fff !important; opacity:1 !important; background:rgba(255,255,255,0.1) !important; border:1px solid rgba(255,255,255,0.2) !important; }
#studiouiGalleryRefresh {
  background:rgba(255,255,255,0.06) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,0.16) !important;
}
/* L-1: single authoritative max-height for #studiouiOut (was 520px in thread rule + 600px here — now consolidated to 600px; app-shell overrides with max-height:none) */
#studiouiOut {
  max-height: 600px !important;
  overflow-y: auto !important;
  position: relative;
}
.studioui-modal button:disabled{
  opacity:1!important; pointer-events:auto!important; cursor:pointer!important; filter:none!important;
}
#studiouiLightbox button:disabled,
#studiouiLightbox [disabled]{
  opacity:1 !important; pointer-events:auto !important; cursor:pointer !important; filter:none !important;
}
#studiouiLightboxClose{
  background:rgba(255,255,255,0.1) !important;
  border:1px solid rgba(255,255,255,0.2) !important;
  color:#fff !important;
  opacity:1 !important; pointer-events:auto !important; cursor:pointer !important; filter:none !important;
}
#studiouiLightboxClose:hover{ background:rgba(255,255,255,0.2) !important; }
/* Pre-hide before app-shell JS runs to prevent FOUC flash/bar-gap (M-1, M-2).
   The app-shell hides #studiouiMode and removes #studiouiMainGrid anyway —
   these declarations kill the visible flash before JS executes. */
#studiouiMode { display:none; }
#studiouiMainGrid { display:none; }
#studiouiMainGrid > * { min-width:0; }
/* ── Mobile: ≤ 700px ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Root container */
  #studiouiStudioRoot { padding:12px !important; border-radius:16px !important; }

  /* Main two-column grid → single column */
  #studiouiMainGrid { grid-template-columns: 1fr !important; gap:14px !important; }

  /* Generate button */
  #studiouiStudioRoot button[id="studiouiSend"] { font-size:14px !important; padding:12px !important; }

  /* Selects and textareas — 16px required to prevent iOS auto-zoom */
  #studiouiStudioRoot select,
  #studiouiStudioRoot textarea { font-size:16px !important; }
  /* All inputs/selects/textareas within the app shell — iOS 16px no-zoom threshold */
  #studiouiApp input, #studiouiApp select, #studiouiApp textarea,
  #studiouiStudioRoot input, #studiouiStudioRoot select, #studiouiStudioRoot textarea { font-size:16px !important; }

  /* Header row: wrap logo + pill cleanly */
  #studiouiStudioRoot > div > div:first-child { flex-wrap:wrap !important; }

  /* Profile pill: compact on narrow screens but keep pill shape */
  #studiouiProfilePill { padding:7px 12px !important; }

  /* Mode selector: full width already, just ensure font size */
  #studiouiMode { font-size:14px !important; }

  /* Action row (Attach | Genre): stack vertically, hide spacers */
  #studiouiActionRow { flex-wrap:wrap !important; gap:8px !important; }
  #studiouiActionRow > div[style*="flex:1"] { display:none !important; }
  #studiouiAttachWrap { width:100% !important; flex:unset !important; }
  #studiouiStyleSelect { width:100% !important; flex:unset !important; order:3; }

  /* Creativity slider row */
  #studiouiCreativity { width:100% !important; }

  /* Output area: reduce max-height so keyboard doesn't push it off-screen */
  #studiouiOut { max-height:380px !important; }

  /* Gallery card: flexible height, no fixed 340px */
  .gallery-card { height:auto !important; min-height:260px !important; }
  .media-wrap { height:180px !important; }

  /* Gallery grid: 1 column on very small screens */
  #studiouiGallery { grid-template-columns:1fr !important; }

  /* Gallery header tabs: allow wrapping */
  #studiouiStudioRoot #studiouiGallery ~ div,
  #studiouiGallery + div { flex-wrap:wrap !important; gap:6px !important; }
  #studiouiGalleryTabImages,
  #studiouiGalleryTabGifs,
  #studiouiGalleryTabVideos,
  #studiouiGalleryTabAudio,
  #studiouiGalleryTabFavourites { width:36px !important; height:36px !important; }

  /* Gallery hint + refresh row */
  #studiouiGalleryHint { font-size:11px !important; }

  /* Gallery modal grid: single column */
  #studiouiGalleryModalGrid { grid-template-columns:1fr !important; }

  /* Action buttons in gallery cards: 3-col grid at smaller size */
  .studioui-actions { grid-template-columns:repeat(3,1fr) !important; gap:5px !important; }
  .studioui-ibtn { height:34px !important; font-size:15px !important; }

  /* Prompt field builder cards — 16px for iOS no-zoom */
  #studiouiPromptGen textarea { font-size:16px !important; }

  /* Lightbox: fix overlapping arrows on mobile */
  #studiouiLightbox { padding:8px !important; }
  #studiouiLightboxPrev { left:4px !important; width:36px !important; height:36px !important; font-size:18px !important; }
  #studiouiLightboxNext { right:4px !important; width:36px !important; height:36px !important; font-size:18px !important; }
  #studiouiLightboxMedia { padding:0 44px !important; box-sizing:border-box !important; }

  /* Gallery modal close button */
  #studiouiGalleryModalClose,
  #studiouiGalleryModal > div { padding:10px !important; }

  /* Report modal */
  #studiouiReportModal > div { margin-top:5vh !important; padding:14px !important; }

  /* Usage widget — 16px for iOS no-zoom */
  #studiouiUsageWidget-studio select { font-size:16px !important; }
}

/* ── Extra small: ≤ 420px ────────────────────────────────────────────────── */
@media (max-width: 420px) {
  #studiouiStudioRoot { padding:10px !important; }
  .gallery-card { min-height:220px !important; }
  .media-wrap { height:150px !important; }
  #studiouiOut { max-height:300px !important; }
  /* Prompt textarea shorter on phones */
  #studiouiPrompt { min-height:80px !important; }
  /* Make gallery 1 col always */
  #studiouiGallery { grid-template-columns:1fr !important; }
}
/* ── 390 px: gallery filter-icon row ─────────────────────────────────────── */
/* The JS moves the tab-button row into the modal header alongside the        */
/* "All Images" title and "Close" button. At 390px (350px inner modal width)  */
/* all three items can't fit on one line — the tab row wraps messily.         */
/* Fix: allow the modal header to wrap; push the tab-button div to its own    */
/* full-width second line; shrink buttons from 34→30px and tighten gap.       */
/* Desktop / tablet behaviour is completely unchanged.                         */
@media (max-width: 390px) {
  /* Modal header row: allow wrapping */
  #studiouiGalleryModal > div > div:first-child {
    flex-wrap:wrap !important;
    row-gap:8px !important;
  }
  /* Tab-button div: full-width second row, left-aligned, snug gap */
  #studiouiGalleryModal > div > div:first-child > div {
    width:100% !important;
    order:2 !important;
    justify-content:flex-start !important;
    gap:5px !important;
    flex-wrap:nowrap !important;
  }
  /* Title stays on first row naturally (order:0); push Close to right */
  #studiouiGalleryModalClose { order:1 !important; margin-left:auto !important; }
  /* Shrink all 7 tab buttons + refresh button */
  #studiouiGalleryTabImages,
  #studiouiGalleryTabGifs,
  #studiouiGalleryTabVideos,
  #studiouiGalleryTabAudio,
  #studiouiGalleryTabFavourites,
  #studiouiGalleryRefresh { width:30px !important; height:30px !important; font-size:15px !important; }
  /* Gallery grids: single-column at this width */
  #studiouiGallery { grid-template-columns:1fr !important; }
  #studiouiGalleryModalGrid { grid-template-columns:1fr !important; }
}
/* ── Chat-style conversation thread (Phase 1a) ──────────────────────────── */
/* L-1: removed duplicate max-height:520px here — consolidated to 600px in the rule above */
#studiouiOut { overflow-y:auto; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; }
#studiouiOut:empty { display:block; }
.ai-bubble { max-width:88%; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.5; word-break:break-word; box-sizing:border-box; }
.ai-bubble-user { align-self:flex-end; background:#2f2f2f; border:1px solid rgba(255,255,255,0.08); color:#fff; white-space:pre-wrap; }
.ai-bubble-ai { align-self:flex-start; width:auto; max-width:100%; background:transparent; border:none; color:#ececec; padding-left:2px; }
.ai-bubble-ai:empty { display:none; }
.ai-bubble-ai img, .ai-bubble-ai video { max-width:100%; border-radius:10px; display:block; }
@media (max-width:700px){ #studiouiOut { max-height:60vh; } .ai-bubble{ max-width:94%; } }
/* ── Full-bleed app shell (ChatGPT / Claude-style, black theme) ───────────── */
body.studioui-fullscreen #studiouiStudioRoot{
  /* Pin to the viewport so any wrapper offset above (theme root padding,
     entry-content spacing, stray blocks) can't push the app down and leave a
     gap at the top or overflow the bottom. inset:0 forces a true full-screen
     box; !important beats the inline position:relative on the root element. */
  position:fixed!important; inset:0!important; z-index:1;
  max-width:none!important; margin:0!important; padding:0!important;
  border:none!important; border-radius:0!important; box-shadow:none!important;
  height:auto!important; overflow:hidden!important; backdrop-filter:none!important;
  background:#0d0d0d!important; color:#ececec;
}
#studiouiApp{ display:flex; height:100%; min-height:0; background:#0d0d0d; color:#ececec; font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif; }
#studiouiApp button, #studiouiApp input, #studiouiApp textarea, #studiouiApp select{ font-family:inherit; }
body:not(.studioui-fullscreen) #studiouiApp{ height:80vh; height:80svh; }

/* Sidebar */
#studiouiSidebar{ width:268px; flex-shrink:0; display:flex; flex-direction:column; height:100%; background:#171717; border-right:1px solid rgba(255,255,255,0.07); transition:width .16s ease; overflow:hidden; }
#studiouiSidebar.collapsed{ width:0; border-right:none; }
#studiouiSbHead{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 4px; flex:0 0 auto; }
#studiouiSbBrand{ font-weight:800; font-size:15px; color:#fff; display:flex; align-items:center; gap:9px; white-space:nowrap; }
#studiouiSbBrand .logo{ width:26px; height:26px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
#studiouiSbBrand .logo svg{ display:block; width:26px; height:26px; }
#studiouiSbBrand .logo img{ display:block; width:26px; height:26px; border-radius:6px; object-fit:cover; }
.studioui-sb-icon{ background:transparent; border:none; color:rgba(255,255,255,0.55); cursor:pointer; padding:7px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.studioui-sb-icon:hover{ background:rgba(255,255,255,0.08); color:#fff; }
#studiouiSbBody{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 8px; display:flex; flex-direction:column; gap:1px; }
#studiouiSbFoot{ flex:0 0 auto; border-top:1px solid rgba(255,255,255,0.07); padding:8px; display:flex; flex-direction:column; gap:1px; }
.studioui-sb-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,0.55); padding:14px 10px 4px; font-weight:600; }
.studioui-nav{ display:flex; align-items:center; gap:11px; width:100%; box-sizing:border-box; text-align:left; background:transparent; border:none; color:#ececec; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:14px; text-decoration:none; transition:background .12s; white-space:nowrap; }
.studioui-nav:hover{ background:rgba(255,255,255,0.07); }
.studioui-nav.active{ background:rgba(255,255,255,0.13); box-shadow:inset 3px 0 0 var(--su-soft); }
.studioui-nav.active .ico{ color:var(--su-soft); }
@keyframes studiouiNavFlash{ 0%{ background:var(--su-soft); } 100%{ background:transparent; } }
.studioui-nav.flash{ animation:studiouiNavFlash .5s ease; }
/* Per-studio genre picker (shown under the active studio in the sidebar) */
.studioui-nav .ico{ flex:0 0 auto; display:flex; align-items:center; color:rgba(255,255,255,0.8); }
.studioui-nav .lbl{ flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#studiouiSbNewChat{ background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); font-weight:600; margin-bottom:2px; }
#studiouiSbNewChat:hover{ background:rgba(255,255,255,0.12); }
#studiouiSearchChats{ width:100%; box-sizing:border-box; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:#fff; border-radius:8px; padding:8px 10px; font-size:13px; margin:2px 0; }
#studiouiSearchChats::placeholder{ color:rgba(255,255,255,0.55); }

/* Chat history + projects lists */
#studiouiHistoryPanel, #studiouiProjectsPanel{ display:flex; flex-direction:column; gap:1px; }
.studioui-convo-row{ display:flex; align-items:center; gap:2px; }
.studioui-convo{ flex:1 1 auto; min-width:0; text-align:left; background:transparent; border:none; color:rgba(255,255,255,0.72); padding:7px 10px 7px 36px; border-radius:8px; cursor:pointer; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.studioui-convo:hover{ background:rgba(255,255,255,0.07); color:#fff; }
.studioui-convo.active{ background:rgba(255,255,255,0.13); color:#fff; }
.studioui-convo-del{ flex:0 0 auto; background:transparent; border:none; color:rgba(255,255,255,0.55); cursor:pointer; font-size:11px; padding:5px 7px; border-radius:6px; opacity:0; }
.studioui-convo-row:hover .studioui-convo-del, .studioui-convo-row:focus-within .studioui-convo-del{ opacity:1; }
.studioui-convo-del:hover{ color:#ff6b6b; background:rgba(255,107,107,0.12); }
/* M-7: on touch devices (no hover capability) always show delete button at reduced opacity */
@media (hover: none) { .studioui-convo-del{ opacity:0.45; } }
.studioui-proj.active{ background:rgba(255,255,255,0.13); }
.studioui-sb-empty{ color:rgba(255,255,255,0.55); font-size:12px; padding:4px 10px 4px 36px; }
/* History — collapsible section, each chat as a distinct tab-style card */
.studioui-archived{ margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.10); display:flex; flex-direction:column; gap:1px; }
.studioui-hist-toggle{ display:flex!important; align-items:center; justify-content:space-between; gap:8px; width:100%; background:transparent; border:none; cursor:pointer; text-align:left; }
.studioui-hist-toggle:hover{ color:rgba(255,255,255,0.65); }
.studioui-hist-caret{ transition:transform .15s ease; font-size:10px; line-height:1; }
.studioui-archived.collapsed #studiouiHistoryPanel{ display:none!important; }
.studioui-archived.collapsed .studioui-hist-caret{ transform:rotate(-90deg); }
#studiouiHistoryPanel{ gap:6px !important; padding:6px 2px 2px; }
#studiouiHistoryPanel .studioui-convo-row{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:8px; transition:border-color .12s, background .12s; }
#studiouiHistoryPanel .studioui-convo-row:hover{ background:rgba(255,255,255,0.07); border-color:rgba(7,99,250,0.55); }
#studiouiHistoryPanel .studioui-convo-row .studioui-convo.active{ background:rgba(7,99,250,0.18); color:#fff; }
#studiouiHistoryPanel .studioui-convo{ padding-left:12px; }
#studiouiHistoryPanel .studioui-sb-empty{ padding:8px 12px; border:1px dashed rgba(255,255,255,0.10); border-radius:8px; }

/* Main column + empty-state centering */
#studiouiMain{ flex:1; min-width:0; display:flex; flex-direction:column; height:100%; position:relative; background:#0d0d0d; }
#studiouiMainTop{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 12px; }
#studiouiMain.is-empty{ justify-content:center; }
#studiouiMain.is-empty #studiouiMainTop{ position:absolute; top:0; left:0; }
#studiouiThreadWrap{ width:100%; display:flex; flex-direction:column; align-items:center; overflow-y:auto; }
#studiouiMain:not(.is-empty) #studiouiThreadWrap{ flex:1 1 auto; min-height:0; padding:8px 16px; }
#studiouiMain.is-empty #studiouiThreadWrap{ flex:0 0 auto; }
#studiouiThreadInner{ width:100%; max-width:760px; }
#studiouiApp #studiouiOut{ max-height:none!important; height:auto!important; overflow:visible!important; min-height:0!important; background:transparent!important; border:none!important; padding:0!important; }
#studiouiGreeting{ text-align:center; font-size:30px; font-weight:600; color:#ececec; padding:8px 16px 22px; letter-spacing:-0.01em; }
#studiouiGreeting .grad{ background:linear-gradient(135deg,#ff67e7,#a06bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
#studiouiMain:not(.is-empty) #studiouiGreeting{ display:none; }

/* Composer */
#studiouiComposerWrap{ width:100%; display:flex; flex-direction:column; align-items:center; padding:8px 16px 22px; }
#studiouiComposerInner{ width:100%; max-width:760px; }
#studiouiApp #studiouiComposer{ position:relative; background:#1e1e1e; border:1px solid rgba(255,255,255,0.12); border-radius:24px; padding:12px 14px; box-shadow:0 2px 10px rgba(0,0,0,0.4); }
#studiouiApp #studiouiComposer #studiouiPrompt{ background:transparent!important; border:none!important; resize:none; color:#ececec; line-height:1.55; min-height:48px; max-height:220px; overflow-y:auto; padding:6px 34px 2px 6px!important; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.22) transparent; }
#studiouiApp #studiouiComposer #studiouiPrompt:focus{ outline:none; }
#studiouiApp #studiouiComposer #studiouiPrompt::placeholder{ color:rgba(255,255,255,0.55); }
#studiouiApp #studiouiComposer #studiouiPrompt::-webkit-scrollbar{ width:7px; }
#studiouiApp #studiouiComposer #studiouiPrompt::-webkit-scrollbar-track{ background:transparent; margin:4px 0; }
#studiouiApp #studiouiComposer #studiouiPrompt::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.2); border-radius:4px; }
#studiouiApp #studiouiComposer #studiouiPrompt::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.34); }
#studiouiClear{ transition:background .14s ease, color .14s ease, transform .14s ease; }
#studiouiClear:hover{ background:rgba(255,255,255,0.16)!important; color:#fff!important; transform:scale(1.08); }
#studiouiApp #studiouiComposer{ transition:border-color .14s ease, box-shadow .14s ease; }
#studiouiApp #studiouiComposer:focus-within{ border-color:rgba(255,255,255,0.22); box-shadow:0 2px 18px rgba(0,0,0,0.55); }
/* Context bar (top of composer): genre + Options toggle */
#studiouiContextBar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.studioui-ctx-btn{ flex:0 0 auto; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.82); font-size:12px; font-weight:600; cursor:pointer; transition:all .12s; }
.studioui-ctx-btn:hover{ background:rgba(255,255,255,0.1); }
.studioui-ctx-btn.active{ border-color:var(--su-1); color:#fff; box-shadow:0 0 0 1px var(--su-1) inset; }
/* Voice toggle: amber border + full-white label so it reads clearly on the
   dark grey composer background. Active state already uses the amber accent. */
#studiouiVoiceToggle{ border-color:rgba(255,193,7,0.45) !important; color:#fff !important; }
/* 🎤 Mic (voice input) button — sits beside the Voice toggle in companion mode.
   Listening state pulses red so it's obvious the mic is hot. */
#studiouiMicBtn{ border-color:rgba(255,255,255,0.22) !important; color:#fff !important; }
#studiouiMicBtn.listening{ border-color:#ff3b5c !important; color:#fff !important; background:rgba(255,59,92,0.18) !important; animation:studiouiMicPulse 1.1s ease-in-out infinite; }
@keyframes studiouiMicPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,92,0.55); } 50%{ box-shadow:0 0 0 6px rgba(255,59,92,0); } }
@media (prefers-reduced-motion: reduce){ #studiouiMicBtn.listening{ animation:none; } }
.studioui-ctx-genre{ width:auto!important; margin-top:0!important; padding:6px 12px!important; flex:0 0 auto; min-width:0; background:#2a2a2a!important; border:1px solid rgba(255,255,255,0.14)!important; border-radius:999px!important; color:#ececec!important; font-size:12px!important; cursor:pointer; -webkit-appearance:none; appearance:none; }
.studioui-ctx-genre:hover{ background:#333!important; }
#studiouiEnhance{ flex:0 0 auto; }
/* Options drawer (collapsed by default) */
#studiouiOptionsDrawer{ display:none; margin-top:10px; }
#studiouiOptionsDrawer.open{ display:block; }
#studiouiOptionsDrawer #studiouiPromptGen{ display:flex!important; flex-direction:column; gap:12px; }
#studiouiComposerBar{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.studioui-plus{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .16s ease; }
.studioui-plus:hover{ background:rgba(255,255,255,0.1); }
.studioui-plus.active{ background:rgba(255,255,255,0.16); transform:rotate(45deg); }
.studioui-bar-mode{ width:auto!important; margin-top:0!important; padding:8px 14px!important; flex:0 1 auto; min-width:0; background:#2a2a2a!important; border:1px solid rgba(255,255,255,0.12)!important; border-radius:999px!important; color:#ececec!important; font-size:13px!important; cursor:pointer; }
.studioui-bar-mode:hover{ background:#333!important; }
#studiouiComposerBar #studiouiSend{ flex:0 0 auto!important; width:38px!important; height:38px!important; margin-top:0!important; padding:0!important; font-size:0!important; box-shadow:0 4px 14px var(--su-2)!important; box-shadow:0 4px 14px color-mix(in srgb, var(--su-2) 45%, transparent)!important; border-radius:50%!important; background:linear-gradient(135deg,var(--su-1),var(--su-2))!important; color:#fff!important; display:inline-flex!important; align-items:center; justify-content:center; transition:filter .14s ease, transform .14s ease; }
#studiouiComposerBar #studiouiSend:hover{ filter:brightness(1.08)!important; transform:translateY(-1px); }
#studiouiComposerBar #studiouiSend:disabled{ opacity:.35!important; cursor:default; }
/* Genre/style select moved into the bar (replaces the old mode dropdown) */
#studiouiComposerBar .studioui-bar-mode{ width:auto!important; margin-top:0!important; padding:8px 12px!important; flex:0 0 auto; }
/* Attach control pulled to the bottom-left of the bar */
#studiouiComposerBar .studioui-bar-attach{ flex:0 0 auto; }
#studiouiComposerBar .studioui-bar-attach > div{ flex-wrap:nowrap!important; gap:6px!important; }
#studiouiComposerBar .studioui-bar-attach #studiouiAttachName{ padding:6px 12px!important; }
/* Composer + Creativity side-by-side: chatbox on the left, slider to its right */
#studiouiComposerRow{ display:flex; align-items:center; gap:12px; width:100%; }
#studiouiComposerRow #studiouiComposer{ flex:1 1 auto; min-width:0; }
.studioui-crea-vertical{ flex:0 0 auto; width:66px; align-self:stretch; margin:0!important; padding:14px 8px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:10px; background:#1e1e1e; border:1px solid rgba(255,255,255,0.12); border-radius:20px; box-shadow:0 2px 10px rgba(0,0,0,0.4); }
.studioui-crea-vertical #studiouiCreativityLabel{ font-size:10px!important; line-height:1.1; text-align:center; color:var(--su-text)!important; font-weight:700; }
/* M-6: pre-hide the creativity slider wrapper before JS adds .studioui-crea-vertical so
   the horizontal slider never flashes. The wrapper has the creativity elements inside it;
   we target it via the known outer wrapper ID that exists before JS runs. */
#studiouiApp #studiouiCreativity{ visibility:hidden; }
/* Reveal must OUT-SPECIFY the two-ID pre-hide rule above ((2,0,0)) — a bare
   .class #id reveal ((1,1,0)) loses and the slider stays invisible forever
   (the "creativity meter missing" bug, fixed 2026-07-24). */
#studiouiApp .studioui-crea-vertical #studiouiCreativity{ visibility:visible; }
/* Modern vertical slider: appearance:none + writing-mode so CSS height is honoured (slider-vertical ignores it) */
.studioui-crea-vertical #studiouiCreativity{ -webkit-appearance:none!important; appearance:none!important; writing-mode:vertical-lr; direction:rtl; width:6px!important; height:auto!important; min-height:90px; flex:1 1 auto; align-self:center; background:linear-gradient(to top,var(--su-2),var(--su-1))!important; border-radius:999px!important; }
.studioui-crea-vertical > label{ font-size:10px!important; font-weight:600; color:rgba(255,255,255,0.6)!important; text-align:center; letter-spacing:.02em; }
@media (max-width:768px){ #studiouiComposerRow{ flex-direction:column; } .studioui-crea-vertical{ width:100%; flex-direction:row; height:auto; gap:14px; padding:10px 14px; } .studioui-crea-vertical #studiouiCreativity{ writing-mode:horizontal-tb; appearance:auto; -webkit-appearance:auto; width:100%!important; height:auto!important; background:transparent!important; border-radius:4px!important; min-height:0; } }

/* Quick-action chips (empty-state only) */
#studiouiChips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
.studioui-chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.9); cursor:pointer; font-size:13px; font-weight:500; transition:all .14s ease; }
.studioui-chip:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.25); color:#fff; }
.studioui-chip.active{ background:linear-gradient(90deg,var(--su-1),var(--su-2)); background:linear-gradient(90deg,color-mix(in srgb,var(--su-1) 28%,transparent),color-mix(in srgb,var(--su-2) 28%,transparent)); border-color:var(--su-soft); color:#fff; }
.studioui-credits-chip{ display:inline-flex; align-items:center; gap:6px; margin-left:12px; padding:5px 12px; border-radius:999px; background:linear-gradient(90deg,var(--su-1),var(--su-2)); background:linear-gradient(90deg,color-mix(in srgb,var(--su-1) 18%,transparent),color-mix(in srgb,var(--su-2) 18%,transparent)); border:1px solid var(--su-soft); color:#fff; font-size:13px; font-weight:600; cursor:default; white-space:nowrap; }
.studioui-credits-chip .ico{ color:var(--su-soft); font-style:normal; }
#studiouiMain:not(.is-empty) #studiouiChips{ display:none; }

/* [+] options popover */

@media (max-width:760px){
  #studiouiSidebar{ position:absolute; z-index:60; height:100%; box-shadow:0 0 40px rgba(0,0,0,0.7); }
  #studiouiGreeting{ font-size:24px; }
}
/* Mobile sidebar toggle: hidden on desktop (>=760px), visible on mobile where
   the sidebar collapseBtn inside the off-canvas sidebar is unreachable. */
#studiouiMobileToggle{ display:none; }
#studiouiApp.sidebar-collapsed #studiouiMobileToggle{ display:flex; }
@media (max-width:760px){
  #studiouiMobileToggle{ display:flex; }
}
/* Green credit-cost badge on the send button */
.studioui-cost-badge{ display:inline-flex; align-items:center; font-size:12px; font-weight:800; color:#4dff91; background:rgba(77,255,145,0.12); border:1px solid rgba(77,255,145,0.4); border-radius:999px; padding:3px 9px; margin:0 8px; white-space:nowrap; letter-spacing:.02em; }
/* M-3 + L-4: consolidated backdrop-filter into a single CSS rule.
   Removed backdrop-filter from the inline style on the root element so there is
   no inline-vs-class specificity conflict. The fullscreen override (none!important)
   cleanly wins against a class rule; it also beat the inline style via !important
   but this avoids any ambiguity. */
#studiouiStudioRoot { -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); }
/* ===== Accessibility: visible keyboard focus + reduced-motion ===== */
#studiouiApp a:focus-visible, #studiouiApp button:focus-visible, #studiouiApp input:focus-visible,
#studiouiApp select:focus-visible, #studiouiApp textarea:focus-visible, #studiouiApp [tabindex]:focus-visible,
#studiouiStudioRoot a:focus-visible, #studiouiStudioRoot button:focus-visible, #studiouiStudioRoot input:focus-visible,
#studiouiStudioRoot select:focus-visible, #studiouiStudioRoot textarea:focus-visible{
  outline:2px solid var(--su-1)!important; outline-offset:2px!important; border-radius:6px;
}
#studiouiCreativity:focus-visible{ outline:2px solid var(--su-1)!important; outline-offset:3px!important; }
@media (prefers-reduced-motion: reduce){
  #studiouiStudioRoot *, #studiouiApp *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}
/* ── Back button (top-left of #studiouiMainTop) ─────────────────────────── */
#studiouiBackBtn{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px 5px 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.82);
  font-size:13px; font-weight:600; text-decoration:none;
  white-space:nowrap; flex-shrink:0;
  transition:background .12s, border-color .12s, color .12s;
}
#studiouiBackBtn:hover{
  background:rgba(255,255,255,0.11);
  border-color:rgba(255,193,7,0.55);
  color:#fff;
}
/* Legacy top-row back link (hidden once app-shell takes over, kept as fallback) */
#studiouiBackBtnLegacy{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 16px 8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.82);
  font-size:13px; font-weight:600; text-decoration:none;
  white-space:nowrap; flex-shrink:0;
  transition:background .12s, border-color .12s, color .12s;
}
#studiouiBackBtnLegacy:hover{
  background:rgba(255,255,255,0.11);
  border-color:rgba(255,193,7,0.55);
  color:#fff;
}
@media (max-width:420px){
  #studiouiBackBtn{ padding:4px 9px 4px 7px; font-size:12px; }
}
/* ── GALLERY LOAD MORE (inline "Load more" button — no modal) ── */
.studioui-load-more{
  grid-column:1/-1; width:100%; margin-top:6px; padding:10px 16px;
  background:rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.2);
  border-radius:10px; color:rgba(255,255,255,0.7); font-size:13px; font-weight:600;
  cursor:pointer; text-align:center; transition:background .14s ease, color .14s ease;
}
.studioui-load-more:hover{ background:rgba(255,255,255,0.1); color:#fff; }
/* ── AI-GENERATED LABEL (compliance badge — subtle, dark-theme) ── */
.studioui-ai-label{
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,0.38); background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12); border-radius:999px;
  padding:2px 8px; pointer-events:none; user-select:none; white-space:nowrap;
}
/* AI label on gallery card — positioned over the media wrap corner */
.media-wrap .studioui-ai-label{
  position:absolute; bottom:6px; left:6px; z-index:2;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
/* Output-area action bar */
.studioui-out-actions .studioui-ibtn{ height:32px; font-size:13px; }