/* Basic reset & variables */
:root {
  --bg: #0b0f17;
  --fg: #e6e6e6;
  --muted: #a0a6b0;
  --card: #111826;
  --neon: 200;
}
:root.theme-light {
  --bg: #f7f7fb;
  --fg: #151823;
  --muted: #4b5160;
  --card: #ffffff;
}
html, body { height: 100%; }
body {
  margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg); color: var(--fg); overflow: hidden;
}
#bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(circle at 10% 10%, rgba(255,0,0,.25), transparent 40%),
              radial-gradient(circle at 90% 20%, rgba(0,255,255,.25), transparent 40%),
              radial-gradient(circle at 30% 80%, rgba(0,255,0,.25), transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(0,0,255,.25), transparent 40%);
  filter: hue-rotate(0deg) blur(40px);
  animation: hue 10s linear infinite, floaty 12s ease-in-out infinite;
}
@keyframes hue { to { filter: hue-rotate(360deg) blur(40px); } }
@keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-1.5%) } }

.app-header, .app-main, .app-footer, .login {
  position: relative; z-index: 2; margin: 12px; border-radius: 16px; background: color-mix(in oklab, var(--card) 85%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.app-header, .app-footer { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 28px; height: 28px; }
.brand h1 { font-size: 18px; margin: 0; }

.actions .ghost { background: transparent; border: 1px solid rgba(255,255,255,.2); color: var(--fg); padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.actions .ghost:hover { border-color: rgba(255,255,255,.35); }

.app-main { display: grid; grid-template-columns: 320px 1fr; gap: 12px; height: calc(100% - 160px); padding: 12px; }
.side, .chat { border-radius: 14px; background: color-mix(in oklab, var(--card) 92%, transparent); }
.side { padding: 12px; overflow: auto; }
.chat { display: grid; grid-template-rows: 1fr auto; }

.card { background: color-mix(in oklab, var(--card) 96%, transparent); padding: 12px; border-radius: 12px; margin-bottom: 12px; }
.card h3 { margin: 0 0 8px 0; font-size: 14px; }
.card textarea, .card select, .composer textarea { width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: var(--fg); padding: 10px; }
.card textarea { min-height: 100px; }

.chat #messages { padding: 12px; overflow: auto; }
.msg { padding: 12px; margin-bottom: 8px; border-radius: 12px; backdrop-filter: blur(6px); }
.msg.user { background: rgba(0, 168, 255, .12); border: 1px solid rgba(0, 168, 255, .25); }
.msg.ai { background: rgba(0, 255, 168, .10); border: 1px solid rgba(0, 255, 168, .22); }

.composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; }
.composer-actions button { padding: 10px 16px; border-radius: 12px; border: none; cursor: pointer; }
.composer-actions button#sendBtn { background: #246bff; color: white; }
.composer-actions button#sendBtn:disabled { opacity: .6; cursor: not-allowed; }

.app-footer { font-size: 12px; color: var(--muted); }

.neon-border { position: relative; }
.neon-border::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  filter: blur(12px) saturate(1.1);
  animation: spin 8s linear infinite;
  z-index: -1;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Login */
.login { width: min(420px, 92vw); margin: 10vh auto; padding: 24px; }
.login h2 { margin-top: 0; }
.login form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.login input { padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: var(--fg); }
.login button { padding: 10px 16px; border-radius: 10px; background: #246bff; color: #fff; border: none; }
.error { color: #ff5e5e; margin-bottom: 8px; }
.muted { color: var(--muted); font-size: 12px; }

/* Light/Dark themes toggle via class on body */
body.theme-light { }