*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --border: #2a2a2a;
  --accent: #6366f1;
  --accent-dim: #4f46e5;
  --text: #e8e8e8;
  --text-dim: #888;
  --agent-bubble: #1e1e1e;
  --radius: 12px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hidden { display: none !important; }
.logo-small { font-weight: 700; color: var(--accent); font-size: 1rem; }

.message {
  max-width: 75%;
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  line-height: 1.5;
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.message.user {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.message.assistant {
  background: var(--agent-bubble);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
}
.message.supervisor {
  background: #3b1f6e;
  border: 1px solid #7c3aed;
  color: #e0d4ff;
  align-self: flex-end;
  border-bottom-right-radius: 3px;
}
.message.whisper {
  background: transparent;
  border: 1px dashed #7c3aed;
  color: #a78bfa;
  font-style: italic;
  font-size: 0.85rem;
  align-self: flex-end;
  max-width: 75%;
}
.message.whisper-reply {
  background: rgba(16,24,40,0.6);
  border: 1px dashed #4f9e6f;
  color: #86efac;
  font-style: italic;
  font-size: 0.85rem;
  align-self: flex-start;
  max-width: 75%;
}

@media (max-width: 480px) { .message { max-width: 90%; } }