/* Application chrome only. This stylesheet is never loaded in site previews. */
:root {
  --field-neon-border: #595962;
  --field-neon-focus: #79bcff;
  --field-neon-shadow: none;
  --razum-glow-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-80%25' y='-80%25' width='260%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M7 6.5C6.4 6.3 6 6.8 6.2 7.4L11.5 23.1C11.8 24 13 24.1 13.4 23.2L16.6 16.7 23.3 13.4C24.2 13 24.1 11.8 23.2 11.5Z' fill='%236bc7ff' stroke='%236bc7ff' stroke-width='2.5' opacity='.8' filter='url(%23g)'/%3E%3Cpath d='M7 6.5C6.4 6.3 6 6.8 6.2 7.4L11.5 23.1C11.8 24 13 24.1 13.4 23.2L16.6 16.7 23.3 13.4C24.2 13 24.1 11.8 23.2 11.5Z' fill='%2315181d' stroke='%23f7f8fa' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 6 6, pointer;
}

/* All editable shell fields share a quiet blue edge. Native checkboxes,
   sliders, colour pickers and invisible file inputs retain their controls. */
body[data-razum-shell] :where(
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),
  textarea, select
) {
  border: 1px solid var(--field-neon-border) !important;
  border-radius: 8px;
  box-shadow: var(--field-neon-shadow) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
  caret-color: var(--field-neon-focus);
}
body[data-razum-shell] :is(input, textarea, select):focus {
  border-color: var(--field-neon-focus) !important;
  box-shadow: 0 0 0 1px #79bcff6b, 0 0 18px #1688ff35 !important;
}
body[data-razum-shell] :is(input, textarea)::placeholder { color: #b8b8c1; opacity: 1; }
body[data-razum-shell] :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--field-neon-focus) !important;
  outline-offset: 1px;
}
body[data-razum-shell] :is(input, textarea, select)[aria-invalid=true] {
  border-color: #ffb7a7 !important;
  box-shadow: 0 0 0 1px #ffb7a733 !important;
}
body[data-razum-shell] :is(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: #1688ff; }

/* The composer is one field: focus belongs to its outer boundary, never an
   extra rectangle around the textarea. Buttons retain their own focus rings. */
body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form) {
  position: relative;
  border-color: var(--field-neon-border) !important;
  box-shadow: var(--field-neon-shadow) !important;
  transition: border-color 180ms cubic-bezier(.4,0,.2,1), box-shadow 180ms cubic-bezier(.4,0,.2,1);
}
body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form)::after {
  content: none;
  position: absolute;
  z-index: 1;
  inset: -1px;
  border: 1px solid #4d9fff;
  border-radius: inherit;
  box-shadow: 0 0 15px #1688ff65, inset 0 0 8px #1688ff18;
  pointer-events: none;
  opacity: .4;
  animation: none;
}
body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form):focus-within {
  border-color: #1488fc !important;
  box-shadow: 0 0 0 1px #1488fc30 !important;
}
body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form):has(textarea:focus-visible) {
  outline: 2px solid var(--field-neon-focus) !important;
  outline-offset: 0;
}
body[data-razum-shell] :is(#idea, #launch-idea, #cabinet-prompt, #edit-prompt, #workspace-ai-prompt),
body[data-razum-shell] :is(#idea, #launch-idea, #cabinet-prompt, #edit-prompt, #workspace-ai-prompt):is(:focus, :focus-visible) {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
@keyframes razum-field-glow { from { opacity: .3; } to { opacity: .85; } }

/* Only this painted layer moves; its clipping boundary and all content stay
   still. Transform/opacity animations avoid repainting gradients per frame. */
body[data-razum-shell] .bolt-hero-background { background: #061632; }
body[data-razum-shell] .bolt-hero-background::before {
  inset: -8%;
  background: url('/assets/studio-background.webp') center top / 100% 100% no-repeat;
  mask-image: none;
  transform: translate3d(-2%, 1%, 0) scale(1.03);
  animation: none;
  will-change: auto;
}
body[data-razum-shell] .bolt-hero-background > span {
  position: absolute;
  inset: 0;
  background: radial-gradient(#ffffff14 1px, transparent 1px) 6px 6px / 12px 12px;
  mask-image: linear-gradient(#000, transparent 55%);
  pointer-events: none;
}
@keyframes razum-hero-drift {
  from { transform: translate3d(-2%, 1%, 0) scale(1.03); }
  to { transform: translate3d(2%, -2%, 0) scale(1.08); }
}

@media (hover: hover) and (pointer: fine) {
  body[data-razum-shell] { cursor: var(--razum-glow-cursor); }
  body[data-razum-shell] :is(a[href], button:not(:disabled), summary, select:not(:disabled), [role=button], label[for], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], input[type=color]) {
    cursor: var(--razum-glow-cursor) !important;
  }
  body[data-razum-shell] :is(textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset])) { cursor: text; }
  body[data-razum-shell] :is(button, input, select):disabled { cursor: not-allowed !important; }
  body[data-razum-shell] [contenteditable=true] { cursor: text; }
  body[data-razum-shell] input[type=range] { cursor: ew-resize; }
  body[data-razum-shell] .panel-resize { cursor: col-resize !important; }
  body[data-razum-shell].resizing-panels, body[data-razum-shell].resizing-panels * { cursor: col-resize !important; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-razum-shell] .bolt-hero-background::before { animation: none !important; transform: none; will-change: auto; }
  body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form)::after { animation: none !important; opacity: .45; }
  body[data-razum-shell] :is(input, textarea, select) { transition: none; }
}
@media (prefers-contrast: more) {
  :root { --field-neon-border: #79bcff; --field-neon-focus: #d5ebff; }
}
@media (forced-colors: active) {
  :root { --razum-glow-cursor: pointer; }
  body[data-razum-shell] { cursor: auto; }
  body[data-razum-shell] .bolt-hero-background { background: Canvas; }
  body[data-razum-shell] .bolt-hero-background::before,
  body[data-razum-shell] .bolt-hero-background > span { display: none; }
  body[data-razum-shell] :is(input, textarea, select) { border-color: FieldText !important; box-shadow: none !important; }
  body[data-razum-shell] :is(input, textarea, select):focus-visible { outline-color: Highlight !important; }
  body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form) { border-color: FieldText !important; box-shadow: none !important; }
  body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form):has(textarea:focus-visible) { outline-color: Highlight !important; }
  body[data-razum-shell] :is(#hero-form, #launch-form, #cabinet-prompt-form, #edit-form, #workspace-ai-form)::after { display: none; }
  body[data-razum-shell] :is(a[href], button:not(:disabled), summary, select:not(:disabled), [role=button], label[for]) { cursor: pointer !important; }
}
