/* Public UI only. Kept separate from generation, polling and billing code. */
:root .inspiration-page .generator-zone .generator-card {
  width: min(1440px, 100%);
  height: 240px;
  padding: 24px;
}

/* Ambient composer treatment: a single highlight travels around the frame,
   while two soft ribbons drift behind the controls. Content remains above both
   layers and the pseudo-elements never intercept pointer input. */
@property --inspiration-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
:root .inspiration-page .generator-card.official-composer {
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .045);
}
:root .inspiration-page .generator-card.official-composer::before {
  --inspiration-angle: 0deg;
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--inspiration-angle),
    transparent 0deg 245deg,
    rgba(75, 235, 255, .09) 278deg,
    rgba(155, 255, 235, .64) 312deg,
    rgba(76, 206, 255, .16) 335deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: inspiration-composer-border-spin 7s linear infinite;
  will-change: transform;
}
:root .inspiration-page .generator-card.official-composer::after {
  content: '';
  position: absolute;
  inset: 12% 7% 18%;
  z-index: 0;
  border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%;
  background:
    linear-gradient(112deg, transparent 6%, rgba(50, 218, 245, .06) 26%, rgba(109, 255, 224, .20) 46%, rgba(83, 155, 255, .08) 66%, transparent 92%),
    linear-gradient(72deg, transparent 12%, rgba(82, 168, 255, .07) 36%, rgba(32, 224, 224, .14) 57%, transparent 86%);
  filter: blur(26px) saturate(118%);
  opacity: .58;
  pointer-events: none;
  transform: translate3d(-8%, 0, 0) skewX(-8deg) scale(1.1);
  animation: inspiration-composer-aurora-drift 12s ease-in-out infinite alternate;
  will-change: transform;
}
:root .inspiration-page .generator-card.official-composer > textarea {
  position: absolute;
  z-index: 1;
}
:root .inspiration-page .generator-card.official-composer > .official-tools {
  position: absolute;
}
:root .inspiration-page .generator-card.official-composer > .send-area {
  position: absolute;
}
:root .inspiration-page .generator-card.official-composer > .reference-stack {
  position: absolute;
}
@keyframes inspiration-composer-border-spin {
  to { --inspiration-angle: 360deg; }
}
@keyframes inspiration-composer-aurora-drift {
  0% { transform: translate3d(-10%, 2%, 0) skewX(-8deg) scale(1.08); }
  50% { transform: translate3d(6%, -3%, 0) skewX(5deg) scale(1.14); }
  100% { transform: translate3d(14%, 2%, 0) skewX(10deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  :root .inspiration-page .generator-card.official-composer::before,
  :root .inspiration-page .generator-card.official-composer::after {
    animation: none;
  }
}
:root .inspiration-page .generator-card.official-composer textarea {
  top: 24px;
  right: 24px;
  bottom: 80px;
  height: auto;
  font-size: 16px;
  line-height: 1.65;
}
:root .inspiration-page .generator-zone .hero-row {
  width: min(1440px, 100%);
  margin-top: 56px;
}
:root .inspiration-page .discover .tabs-row-inner { width: min(1440px, 100%); }
:root .inspiration-page .generator-zone { padding-bottom: 48px; }
:root .inspiration-page .generator-tools.official-tools {
  right: 145px;
  flex-wrap: wrap;
  gap: 6px;
}
:root .inspiration-page .generator-tools .composer-tool,
:root .studio :is(.creator-composer, .result-composer) .tool {
  height: auto;
  min-height: 38px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
:root .inspiration-page .send-area,
:root .studio :is(.creator-composer, .result-composer) .cost-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  white-space: normal;
}
:root .inspiration-page .composer-pop :is(small, .pop-heading), :root .studio .floating :is(small, .pop-heading), :root .studio .settings-cost, :root .studio .skill-fields label { font-size: 13px; line-height: 1.5; }
:root .inspiration-page .composer-pop button,
:root .studio .floating :is(.option-grid, .segmented, .ratio-grid) button {
  font-size: 13px;
  min-height: 36px;
}
:root .inspiration-page .mode-pop button span { font-size: 14px; }
:root .inspiration-page .hero-card small { font-size: 13px; line-height: 1.5; }
:root .inspiration-page .hero-card b { font-size: 15px; }
:root .inspiration-page .search input { font-size: 14px; }
:root .inspiration-page .search { height: 38px; }
:root .inspiration-page .official-composer textarea::placeholder { color: #9da6b2; }

:root .app-rail .rail-item span { font-size: 13px; line-height: 18px; letter-spacing: 0; }
:root .app-rail .rail-mini span,
:root .app-rail .credit-badge span { font-size: 12px; line-height: 17px; }
:root .app-rail .menu-entry { font-size: 14px; line-height: 21px; }
:root .app-rail .credit-badge { width: calc(100% + 12px); max-width: 72px; }
:root .app-rail .credit-badge b { font-size: 12px; overflow-wrap: normal; word-break: keep-all; }
:root .app-rail .rail-nav { gap: 6px; }
:root .app-rail .rail-item { flex-shrink: 0; }

:root .studio .conversation-item b { font-size: 14px; line-height: 1.5; }
:root .studio :is(.chat-user-text, .chat-note, .agent-inline-prompt) { font-size: 15px; line-height: 1.65; }
:root .studio :is(.chat-status, .chat-status-meta, .chat-foot-meta, .agent-inline-cost, .sidebar-empty) {
  font-size: 13px;
  line-height: 1.5;
}
:root .studio .chat-status b { font-size: 14px; }
:root .studio .chat-status-meta { opacity: 1; }
:root .studio :is(.chat-actions, .agent-inline-actions) button { font-size: 14px; min-height: 36px; }
:root .studio :is(.creator-composer, .result-composer) :is(.composer-toolbar, .toolbar-left, .result-toolbar) { flex-wrap: wrap; gap: 6px; }
:root .studio :is(.creator-composer, .result-composer) .model-tool { max-width: 260px; min-width: 0; }
:root .studio :is(.creator-composer, .result-composer) .model-tool span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root .studio :is(.creator-composer, .result-composer) .skill-tool { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* Explicit asset scope avoids changing the admin's dense log tables. */
:root :is(.user-assets, .theme-x main > section:has(> .grid > .group.aspect-\[4\/5\])) .text-xs { font-size: 14px; line-height: 1.5; }
:root :is(.user-assets, .theme-x main > section:has(> .grid > .group.aspect-\[4\/5\])) .text-\[12px\] { font-size: 14px; line-height: 1.5; }
:root :is(.user-assets, .theme-x main > section:has(> .grid > .group.aspect-\[4\/5\])) .text-\[10px\] { font-size: 12px; line-height: 1.5; }
:root :is(.user-assets, .theme-x main > section:has(> .grid > .group.aspect-\[4\/5\])) :is(.text-white\/35, .text-white\/40, .text-white\/55) { color: rgb(255 255 255 / 0.8); }
:root :is(.user-assets, .theme-x main > section:has(> .grid > .group.aspect-\[4\/5\])) .pointer-events-none .tabular-nums { flex-wrap: wrap; }

html:root.dark .studio :is(.cost-label, .chat-status-meta, .chat-foot-meta, .agent-inline-cost, .sidebar-empty), html:root.dark .inspiration-page :is(.hero-card small, .send-area) { color: #b5beca; }
html:root:not(.dark) .studio :is(.cost-label, .chat-status-meta, .chat-foot-meta, .agent-inline-cost, .sidebar-empty), html:root:not(.dark) .inspiration-page :is(.hero-card small, .send-area) { color: #526073; }
html:root:not(.dark) .inspiration-page .official-composer textarea::placeholder { color: #637083; }

@media (max-width: 1100px) {
  :root .inspiration-page .generator-zone { padding-top: 56px; }
  :root .inspiration-page .generator-zone .generator-card { height: 256px; }
  :root .inspiration-page .generator-card.official-composer textarea { bottom: 120px; }
}
@media (max-width: 640px) {
  :root .inspiration-page .generator-zone { padding: 32px 14px 24px; }
  :root .inspiration-page .generator-zone .generator-card { height: 300px; margin-top: 24px; padding: 18px; }
  :root .inspiration-page .generator-card.official-composer textarea { left: 82px; right: 18px; bottom: 174px; }
  :root .inspiration-page .generator-tools.official-tools { right: 14px; left: 14px; bottom: 68px; }
  :root .inspiration-page .generator-zone .hero-row { margin-top: 28px; }
  :root .inspiration-page .generator-tools .composer-tool { max-width: 100%; padding-inline: 8px; }
  :root .inspiration-page .composer-pop { max-width: calc(100vw - 100px); }
  :root .studio :is(.creator-composer, .result-composer) :is(input, textarea, select) { font-size: 16px; }
}

/* Studio follow-up: roomy expanded input, keeping the existing compact state. */
:root .studio :is(.creator-composer, .result-composer:not(.compact)) {
  width: min(1240px, calc(100vw - 380px)) !important;
  max-width: 1240px;
  min-height: 248px;
  padding: 20px 24px 16px !important;
  box-sizing: border-box;
}
:root .studio :is(.creator-composer, .result-composer:not(.compact)) .composer-body {
  min-height: 150px;
}
:root .studio :is(.creator-composer, .result-composer:not(.compact)) textarea {
  height: 150px;
  min-height: 150px;
  font-size: 18px;
  line-height: 1.65;
}
:root .studio :is(.creator-composer, .result-composer) .tool {
  min-height: 42px;
  font-size: 15px;
  line-height: 22px;
}
:root .studio :is(.creator-composer, .result-composer) .cost-label { font-size: 15px; }
:root .studio :is(.chat-user-text, .chat-note, .agent-inline-prompt, .conversation-item b) { font-size: 16px; line-height: 1.65; }
:root .studio :is(.chat-status, .chat-status b, .chat-status-meta, .chat-foot-meta, .agent-inline-cost) { font-size: 14px; line-height: 1.6; }
:root .studio :is(.chat-actions, .agent-inline-actions) button { font-size: 15px; min-height: 38px; }
:root .studio .studio-main > .conversation-layout > .result-main {
  padding-bottom: 360px;
  scroll-padding-bottom: 360px;
}
:root .studio :is(.creator-composer, .result-composer) textarea::placeholder { color: #a9b3bf; }
html:root:not(.dark) .studio :is(.creator-composer, .result-composer) textarea::placeholder { color: #637083; }
@media (max-width: 1100px) {
  :root .studio :is(.creator-composer, .result-composer:not(.compact)) { padding-inline: 16px !important; }
}
@media (max-width: 900px) {
  :root .studio :is(.creator-composer, .result-composer:not(.compact)) {
    width: calc(100vw - 86px) !important;
    min-height: 248px;
  }
}
@media (max-width: 640px) {
  :root .studio :is(.creator-composer, .result-composer:not(.compact)) {
    padding: 16px 12px 12px !important;
    min-height: 232px;
  }
  :root .studio :is(.creator-composer, .result-composer:not(.compact)) .composer-body { min-height: 112px; gap: 12px; }
  :root .studio :is(.creator-composer, .result-composer:not(.compact)) textarea { height: 112px; min-height: 112px; font-size: 16px; }
  :root .studio :is(.creator-composer, .result-composer) .tool { font-size: 14px; min-height: 38px; }
  :root .studio :is(.creator-composer, .result-composer) .cost-label { font-size: 13px; }
  :root .studio .studio-main > .conversation-layout > .result-main { padding-bottom: 380px; scroll-padding-bottom: 380px; }
}