/* =============================================================================
   studio-ambient.css — the INTERACTIVE, cursor-reactive studio backdrop.
   Loaded LAST so it decisively wins. Clearly visible ember + cool light-orbs
   that slowly DRIFT and PARALLAX toward the pointer, plus an ember GLOW that
   follows the cursor. Tasteful, premium — Runway/OpenArt/Luma energy. Both
   themes; fully reduced-motion + tab-hidden safe. JS (wireAmbient) feeds
   --amb-mx / --amb-my (0..1) on #studio-ambient.
   ========================================================================== */

#studio-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --amb-mx: .5; --amb-my: .4; contain: layout paint size; }

/* content rides above the backdrop; the stage stays see-through so the orbs
   read through the gaps between cards and behind the composer scrim. */
.app { position: relative; z-index: 1; }
.main, .stage, #stage, #stage > .gen.gen-chat, #stage > .wrap { background: transparent; }
/* create heroes keep their depth but let the backdrop bleed faintly through */
#stage .gen:not(.gen-chat) { background: color-mix(in srgb, var(--sn-bg-deep) 84%, transparent); }
[data-theme="light"] #stage .gen:not(.gen-chat) { background: color-mix(in srgb, #F4F2EC 84%, transparent); }

/* ---- the pointer-following ember glow: the unmistakable "it reacts to me" beat ---- */
#studio-ambient .amb-glow {
  position: absolute; width: 54vmax; height: 54vmax; border-radius: 50%;
  left: calc(var(--amb-mx) * 100%); top: calc(var(--amb-my) * 100%);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--sn-accent) 58%, transparent) 0%,
    color-mix(in srgb, var(--sn-accent) 18%, transparent) 44%, transparent 70%);
  opacity: .30; filter: blur(26px); will-change: left, top;
}
[data-theme="light"] #studio-ambient .amb-glow { opacity: .18; }

/* ---- drifting + parallaxing light-orbs. `translate` = pointer parallax,
        `transform`/keyframes = slow autonomous drift — they compose cleanly. ---- */
#studio-ambient .amb-orb { position: absolute; border-radius: 50%; filter: blur(66px); }
#studio-ambient .amb-orb.o1 { width: 48vmax; height: 48vmax; left: -12%; top: -18%; opacity: .38;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sn-accent) 72%, transparent), transparent 72%);
  translate: calc((var(--amb-mx) - .5) * -72px) calc((var(--amb-my) - .5) * -48px);
  animation: amb-a 44s ease-in-out infinite alternate; }
#studio-ambient .amb-orb.o2 { width: 42vmax; height: 42vmax; right: -14%; top: 6%; opacity: .30;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sn-ink) 26%, transparent), transparent 70%);
  translate: calc((var(--amb-mx) - .5) * 94px) calc((var(--amb-my) - .5) * 62px);
  animation: amb-b 58s ease-in-out infinite alternate; }
#studio-ambient .amb-orb.o3 { width: 36vmax; height: 36vmax; left: 16%; bottom: -22%; opacity: .28;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sn-accent) 52%, #8A4A2E 22%), transparent 72%);
  translate: calc((var(--amb-mx) - .5) * -54px) calc((var(--amb-my) - .5) * 74px);
  animation: amb-a 52s ease-in-out infinite alternate-reverse; }
#studio-ambient .amb-orb.o4 { width: 32vmax; height: 32vmax; right: 4%; bottom: -14%; opacity: .24;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sn-ink) 18%, transparent), transparent 70%);
  translate: calc((var(--amb-mx) - .5) * 66px) calc((var(--amb-my) - .5) * -42px);
  animation: amb-b 48s ease-in-out infinite alternate; }
[data-theme="light"] #studio-ambient .amb-orb.o1 { opacity: .34; }
[data-theme="light"] #studio-ambient .amb-orb.o2,
[data-theme="light"] #studio-ambient .amb-orb.o3,
[data-theme="light"] #studio-ambient .amb-orb.o4 { opacity: .26; }

/* keep the far corners calm */
#studio-ambient .amb-vignette { position: absolute; inset: -2%;
  background: radial-gradient(130% 90% at 50% 42%, transparent 52%, color-mix(in srgb, var(--sn-bg) 55%, transparent)); }

@keyframes amb-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vmax, 3vmax) scale(1.09); } }
@keyframes amb-b { from { transform: translate(0, 0) scale(1.06); } to { transform: translate(-3vmax, -2vmax) scale(.95); } }

/* sleep while the tab is hidden */
html[data-hidden] #studio-ambient .amb-orb { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  #studio-ambient .amb-orb { animation: none; translate: none; }
  #studio-ambient .amb-glow { transition: none; }
}

/* =============================================================================
   BOTTOM-DOCK + BORDERLESS + SIDE-ATTACH — consistent across every create tool.
   (loaded last so it decisively wins over studio-live/shell/elevate)
   ========================================================================== */

/* create tools now all use .gen-chat → the opaque hero is gone → backdrop is full-bleed */
#stage .gen:not(.gen-chat) { background: transparent; }
/* don't flatten the TOP — the ambient must read across the whole viewport, not just the base */
#studio-ambient .amb-vignette { background: radial-gradient(150% 110% at 50% 46%, transparent 64%, color-mix(in srgb, var(--sn-bg) 40%, transparent)); }

/* ---- BORDERLESS: no card outline, no group dividers, no bar hairline — anywhere ---- */
.composer { border: none !important; }
.composer .bar.cmp-bar { border-top: none !important; margin-top: 14px; padding-top: 0; }
.cmp-bar .cmp-div { display: none !important; }
.cmp-bar .cmp-controls { gap: 14px 22px; }

/* the docked composer is a soft floating glass panel — defined by shadow + fill, never a line */
.gen-chat #sl-composer, .gen-chat .composer {
  border: none; border-radius: 20px;
  background: color-mix(in srgb, var(--sn-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--sn-elev-3), inset 0 1px 0 color-mix(in srgb, var(--sn-ink) 7%, transparent);
  padding: 14px 16px;
}
[data-theme="light"] .gen-chat #sl-composer { background: color-mix(in srgb, #FFFFFF 76%, transparent); }
.gen-chat #sl-composer:focus-within { box-shadow: var(--sn-elev-3), 0 0 0 3px var(--sn-accent-glow); }

/* the whole scroll area reserves the dock height so no content ever hides behind the composer */
.gen-chat .gen-scroll { padding-bottom: calc(var(--gen-dock-h, 220px) + 22px); }
.gen-chat .gen-dock-inner { max-width: 860px; }
/* tool content sits in the scroll area with breathing room */
.gen-chat .gen-scroll > .wrap, .gen-chat .gen-scroll > .cam-lib,
.gen-chat .gen-scroll > #an-pair-host, .gen-chat .gen-scroll > #scn-preview-host,
.gen-chat .gen-scroll > #tl-stage, .gen-chat .gen-scroll > #scn-list-wrap { max-width: 1120px; margin: 0 auto; width: 100%; padding-left: 28px; padding-right: 28px; }

/* ---- SIDE ATTACH (+) — persistent, left of the prompt, like ChatGPT/Claude ---- */
.cmp-prompt-row { display: flex; align-items: flex-start; gap: 10px; }
.cmp-prompt-row > textarea, .cmp-prompt-row > input { flex: 1 1 auto; min-width: 0; }
.scn-headline-input { height: 40px; border: none; background: transparent; color: var(--sn-ink);
  font: 1rem/1.4 var(--sn-sans); padding: 8px 2px; outline: none; }
.scn-headline-input::placeholder { color: var(--sn-ink-3); }
.cmp-attach { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  border: none; background: var(--sn-bg-raised); color: var(--sn-ink-2); cursor: pointer;
  transition: background var(--sn-t-hover) var(--sn-ease), color var(--sn-t-hover) var(--sn-ease), box-shadow var(--sn-t-hover) var(--sn-ease); }
.cmp-attach:hover { background: var(--sn-accent-soft); color: var(--sn-accent-ink); }
.cmp-attach.over { color: var(--sn-accent); box-shadow: 0 0 0 3px var(--sn-accent-glow); }
.cmp-attach .sn-ic-slot { width: 18px; height: 18px; }
.cmp-attach-thumbs { display: flex; gap: 6px; flex: none; }
.cmp-attach-thumbs .att-thumb { position: relative; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; background: var(--sn-bg-raised); }
.cmp-attach-thumbs .att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-attach-thumbs .att-x { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%; border: none;
  background: var(--sn-tooltip-bg); color: var(--sn-tooltip-ink); cursor: pointer; display: grid; place-items: center; }
.cmp-attach-thumbs .att-x .sn-ic-slot { width: 9px; height: 9px; }
.cmp-attach-hint { align-self: center; font: .6875rem var(--sn-mono); color: var(--sn-ink-3); }

/* Voice & Tools is a suite (not a single docked composer) — keep its tool panels borderless
   but still grounded as soft surfaces so controls don't float on bare background. */
.tool-composer { border: none; border-radius: 18px; padding: 16px 18px;
  background: color-mix(in srgb, var(--sn-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sn-elev-2); }
.tool-composer .cmp-bar { border-top: none; }

/* No stray section separators inside the create tools — Rob: kill ALL the lines.
   (card outlines stay; these are the horizontal rules between sections) */
.gen-chat .an-pair, .gen-chat .scn-preview, .gen-chat .cam-lib, .gen-chat .tl-board,
.gen-chat .sec-head, .gen-chat .tl-board-head, .gen-chat .lib-toolbar, .gen-chat .an-pair .sec-head {
  border-top: none !important; border-bottom: none !important;
}