/* ===================================================================
   LAMINAK — "Cyberpunk" Theme
   Neon phosphor green on deep black. Hacker terminal vibes.
   =================================================================== */

/* ── Theme Variables ── */
body.theme-cyberpunk {
  --bg:             #080c10;
  --bg-card:        #0c1118;
  --bg-input:       #0e151f;
  --bg-hover:       rgba(0, 255, 140, 0.06);
  --border:         rgba(0, 255, 140, 0.1);
  --text:           #b8ffd0;
  --text-muted:     rgba(0, 220, 120, 0.45);
  --accent:         #00ff8c;
  --accent-hover:   #33ffaa;
  --accent-dim:     rgba(0, 255, 140, 0.08);
  --user-bg:        rgba(0, 255, 140, 0.07);
  --assistant-bg:   rgba(8, 14, 22, 0.7);
  --success:        #00ff8c;
  --warning:        #ffd600;
  --error:          #ff2d6b;
  --thinking-bg:    rgba(0, 255, 140, 0.03);
  --thinking-border: rgba(0, 255, 140, 0.1);
  --tool-bg:        rgba(0, 0, 0, 0.4);
  --tool-border:    rgba(0, 255, 140, 0.07);
  --bg-secondary:   #0c1118;
  --glass:          rgba(8, 12, 16, 0.9);
  --glass-border:   rgba(0, 255, 140, 0.1);
  --orb-idle:       radial-gradient(circle, #00ff8c 0%, #00cc6a 40%, #008044 100%);
  --orb-thinking:   radial-gradient(circle, #00e5ff 0%, #0088cc 40%, #005580 100%);
  --orb-speaking:   radial-gradient(circle, #ff00aa 0%, #cc0080 40%, #880055 100%);
  --orb-listening:  radial-gradient(circle, #ffd600 0%, #cc9900 40%, #886600 100%);
  --orb-error:      radial-gradient(circle, #ff2d6b 0%, #cc0044 40%, #880022 100%);
}

/* ── Background — matrix rain CSS (fond du chat uniquement) ── */
body.theme-cyberpunk {
  background: #080c10;
}

/* Restaurer le fond solide de l'app-shell */
body.theme-cyberpunk #app-shell {
  background: #080c10 !important;
}

/* Dot matrix — directement en background de .messages, clippé + fixe */
body.theme-cyberpunk .messages {
  background-color: #080c10;
  background-image:
    radial-gradient(circle, rgba(0, 255, 80, 0.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(0, 255, 80, 0.025) 1px, transparent 1px),
    radial-gradient(circle, rgba(0, 200, 255, 0.018) 1px, transparent 1px);
  background-size:
    18px 18px,
    31px 31px,
    53px 53px;
  background-position:
    0px 0px,
    9px 9px,
    4px 26px;
  background-attachment: fixed;
  animation: cyber-dots 12s ease-in-out infinite alternate;
}

@keyframes cyber-dots {
  0%   { opacity: 1;    background-position: 0px 0px,   9px 9px,   4px 26px; }
  50%  { opacity: 0.75; background-position: 3px 6px,   12px 15px, 7px 32px; }
  100% { opacity: 0.9;  background-position: 0px 9px,   9px 18px,  4px 14px; }
}

/* Subtle scanlines overlay */
body.theme-cyberpunk::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.04) 3px,
    rgba(0, 0, 0, 0.04) 4px
  );
}

/* ── Header ── */
body.theme-cyberpunk header {
  background: #0a0f16;
  border-bottom: 1px solid rgba(0, 255, 140, 0.12);
}

body.theme-cyberpunk .logo-icon {
  background: #00ff8c;
  color: #080c10;
  border-radius: 4px;
  font-size: 13px;
}

body.theme-cyberpunk .logo {
  text-shadow: 0 0 12px rgba(0, 255, 140, 0.3);
}

/* ── Nav sidebar ── */
body.theme-cyberpunk #app-nav {
  background: #09101a;
  border-right: 1px solid rgba(0, 255, 140, 0.1);
}

body.theme-cyberpunk .nav-item.active {
  background: rgba(0, 255, 140, 0.08);
  color: #00ff8c;
  box-shadow: inset 3px 0 0 #00ff8c;
}

body.theme-cyberpunk .nav-item:hover {
  background: rgba(0, 255, 140, 0.05);
  color: #00ff8c;
}

body.theme-cyberpunk .nav-item-icon {
  transition: filter 0.15s;
}
body.theme-cyberpunk .nav-item.active .nav-item-icon,
body.theme-cyberpunk .nav-item:hover .nav-item-icon {
  filter: drop-shadow(0 0 4px rgba(0, 255, 140, 0.5));
}

body.theme-cyberpunk .sidebar-footer {
  border-top: 1px solid rgba(0, 255, 140, 0.1);
}

/* ── Messages ── */
body.theme-cyberpunk .msg.user .msg-body {
  background: rgba(0, 255, 140, 0.06);
  border: 1px solid rgba(0, 255, 140, 0.14);
}

body.theme-cyberpunk .msg.assistant .msg-body {
  background: rgba(10, 16, 24, 0.6);
  border: 1px solid rgba(0, 255, 140, 0.07);
}

body.theme-cyberpunk .msg.assistant .msg-avatar {
  background: linear-gradient(135deg, #00cc6a, #0088cc);
}

/* ── Input area ── */
body.theme-cyberpunk .input-area {
  background: #0a0f16;
  border-top: 1px solid rgba(0, 255, 140, 0.1);
}

body.theme-cyberpunk #msg-input {
  background: #0c1420;
  border: 1px solid rgba(0, 255, 140, 0.12);
  border-radius: 4px;
  caret-color: #00ff8c;
  font-family: var(--mono);
  font-size: 13px;
}

body.theme-cyberpunk #msg-input:focus {
  border-color: rgba(0, 255, 140, 0.4);
  box-shadow: 0 0 12px rgba(0, 255, 140, 0.08), inset 0 0 12px rgba(0, 255, 140, 0.02);
}

body.theme-cyberpunk .send-btn {
  background: #00ff8c;
  color: #080c10;
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(0, 255, 140, 0.3);
}
body.theme-cyberpunk .send-btn:hover {
  background: #33ffaa;
  box-shadow: 0 0 20px rgba(0, 255, 140, 0.45);
}

body.theme-cyberpunk .action-btn {
  border-color: rgba(0, 255, 140, 0.12);
}
body.theme-cyberpunk .action-btn:hover {
  border-color: rgba(0, 255, 140, 0.3);
  color: #00ff8c;
}

/* ── Model picker ── */
body.theme-cyberpunk .model-picker-btn {
  background: #0c1420;
  border-color: rgba(0, 255, 140, 0.14);
  border-radius: 4px;
}
body.theme-cyberpunk .model-picker-btn:hover {
  border-color: rgba(0, 255, 140, 0.4);
  color: #00ff8c;
}
body.theme-cyberpunk .model-picker-bubble {
  background: #0c1118;
  border-color: rgba(0, 255, 140, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 255, 140, 0.05);
  border-radius: 4px;
}
body.theme-cyberpunk .model-picker-bubble::after {
  background: #0c1118;
  border-color: rgba(0, 255, 140, 0.15);
}
body.theme-cyberpunk .mpb-item:hover { color: #00ff8c; }
body.theme-cyberpunk .mpb-item.active { background: rgba(0, 255, 140, 0.15); color: #00ff8c; }

/* ── Suggestions ── */
body.theme-cyberpunk .suggestion {
  background: #0c1420;
  border: 1px solid rgba(0, 255, 140, 0.1);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
}
body.theme-cyberpunk .suggestion:hover {
  background: rgba(0, 255, 140, 0.06);
  border-color: rgba(0, 255, 140, 0.3);
  color: #00ff8c;
}

/* ── Thinking / tool blocks ── */
body.theme-cyberpunk .thinking-block {
  background: rgba(0, 20, 10, 0.4);
  border-color: rgba(0, 255, 140, 0.08);
}
body.theme-cyberpunk .tool-block {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 255, 140, 0.06);
}

/* ── Code blocks ── */
body.theme-cyberpunk pre, body.theme-cyberpunk code {
  background: #000;
  border: 1px solid rgba(0, 255, 140, 0.1);
  color: #00ff8c;
}

/* ── Auth & connect ── */
body.theme-cyberpunk .auth-card {
  background: #0c1118;
  border: 1px solid rgba(0, 255, 140, 0.15);
}
body.theme-cyberpunk #connect-screen {
  background: #080c10;
}
body.theme-cyberpunk #connect-screen .big-spinner {
  border-color: rgba(0, 255, 140, 0.1);
  border-top-color: #00ff8c;
}

/* ── Scrollbars ── */
body.theme-cyberpunk ::-webkit-scrollbar { width: 4px; }
body.theme-cyberpunk ::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 140, 0.18);
  border-radius: 2px;
}
body.theme-cyberpunk ::-webkit-scrollbar-track { background: transparent; }