/* ===== TalkToAI — Dark Theme (global) ===== */
:root {
  --bg: #0b0f14;
  --panel: #0f171c;
  --panel-2: #0c1419;
  --text: #e6f4ee;
  --muted: #9bb7a6;
  --accent: #22c55e; /* emerald-500 */
  --accent-2: #16a34a; /* emerald-600 */
  --border: rgba(34, 197, 94, 0.16);
}
html, body { background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.glass { background: rgba(10, 22, 17, 0.5); border: 1px solid var(--border); }
input, textarea, select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #7aa08c; }
button { cursor: pointer; }
button.bg-emerald-500 { background: var(--accent); color: #0a0a0a; }
button.bg-emerald-500:hover { background: var(--accent-2); }

/* Dialog / Settings */
dialog#settings {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
dialog#settings::backdrop { background: rgba(0,0,0,0.6); }

/* Chat scrolling */
#chat, .chat { max-height: calc(100vh - 320px); overflow-y: auto; }
.msg { word-wrap: break-word; }

/* Navbar & badges */
nav.sticky { background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.badge { background: rgba(34,197,94,0.12); color: var(--text); border: 1px solid var(--border); border-radius: .5rem; padding: .2rem .5rem; font-size: .75rem; }