/* SPDX-License-Identifier: ńL-1.0 */
/* THEME & VIBE OVERRIDES ------------------------------------------- */

/* Global tokens (dark default) */
:root{
  /* motion */
  --ui-fade-duration: .24s;
  --ui-fade-ease: cubic-bezier(.2,.8,.2,1);

  /* radii */
  --radius-sense: 35px;
  --radius-tile: 18px;

  /* glass */
  --glass-saturation: 1.4;
  --glass-blur-fallback: 2px;

  /* colors (dark) */
  --fg: rgba(255,255,255,.97);
  --fg-soft: rgba(255,255,255,.85);
  --fg-muted: rgba(255,255,255,.66);
  --bg-tile: rgba(0,0,0,.18);
  --bg-notify: rgba(10,10,12,.82);
  --border: rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.12);
  --ring: rgba(255,255,255,.22);

  /* shadows */
  --shadow: 0 12px 38px rgba(0,0,0,0.45);
  --shadow-soft: 0 6px 20px rgba(0,0,0,0.35);
  --notify-shadow: 0 18px 50px rgba(0,0,0,.45);
}

html{ color-scheme: dark light; }

/* Dark theme surfaces */
.nSenseInput{ color: var(--fg); caret-color: var(--fg); }
.nSenseHint{ color: var(--fg-soft); }
#nNotify.nMessage{
  color: var(--fg);
  background: var(--bg-notify);
  border: 1px solid var(--border);
  box-shadow: var(--notify-shadow);
}
.nResponseTile{
  border: 1px solid var(--border);
  background: var(--bg-tile);
  color: var(--fg);
  border-radius: var(--radius-tile);
}

/* Light theme overrides */
html[data-theme="light"]{
  --fg: #111;
  --fg-soft: rgba(0,0,0,.72);
  --fg-muted: rgba(0,0,0,.55);
  --bg-tile: rgba(255,255,255,.92);
  --bg-notify: rgba(255,255,255,.96);
  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.12);
  --ring: rgba(0,0,0,.22);
  --notify-shadow: 0 18px 50px rgba(0,0,0,.18);
}

html[data-theme="light"] .nSenseInput{
  color: var(--fg);
  caret-color: var(--fg);
}
html[data-theme="light"] .nSenseInput::placeholder,
html[data-theme="light"] .nSenseInput::-webkit-input-placeholder{
  color: var(--fg-muted) !important;
}
html[data-theme="light"] .nSenseHint{ color: var(--fg-soft); }
html[data-theme="light"] #nNotify.nMessage{
  color: var(--fg);
  background: var(--bg-notify);
  border: 1px solid var(--border);
  box-shadow: var(--notify-shadow);
}
html[data-theme="light"] .nResponseTile{
  background: var(--bg-tile);
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(0,0,0,.04);
}

/* Sense Bar surface tweaks from tokens */
.nSenseBar{
  border-radius: var(--radius-sense);
  border-color: var(--border);
}
.nSenseBar:focus-within{ box-shadow: var(--shadow-soft); }
.nSenseBar[data-sense="busy"]{ box-shadow: var(--shadow); }

/* Backdrop-filter fallbacks (when unsupported) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .nSenseBar{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
  }
  .nResponseTile{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: color-mix(in oklab, var(--bg-tile) 70%, white 0%);
  }
}

/* Notify surface layout (optional sizing) */
#nNotify.nMessage{
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-fallback));
  -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-fallback));
}

/* Placeholder visibility parity across themes */
.nSenseBar[data-sense="open"] .nSenseInput::placeholder,
.nSenseBar:focus-within .nSenseInput::placeholder{ opacity:0; }

/* Vibe: subtle pulse on Sense bar when enabled */
@keyframes nVibePulse{
  0%{ box-shadow:0 10px 30px rgba(0,0,0,.30) }
  50%{ box-shadow:0 16px 42px rgba(0,0,0,.42) }
  100%{ box-shadow:0 10px 30px rgba(0,0,0,.30) }
}
body[data-vibe="pulse"] .nSenseBar{ animation:nVibePulse 3.4s ease-in-out infinite; }

/* Reduced motion: clamp durations & disable pulse */
@media (prefers-reduced-motion: reduce){
  :root{ --ui-fade-duration: .10s; }
  body[data-vibe="pulse"] .nSenseBar{ animation: none; }
}