:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: #0c1727;
  --panel-2: #121f33;
  --line: #24364d;
  --text: #eff6ff;
  --muted: #aac0dd;
  --accent: #7c9cff;
  --accent-2: #4dd9c2;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Inter', sans-serif; background: radial-gradient(circle at top, #10213a 0%, var(--bg) 55%); color: var(--text); }
body { overflow: hidden; }

.app-shell { width: 100vw; height: 100vh; max-width: 100vw; }

.chat-panel { width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; }

.chat-box { flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; padding: 18px 18px 10px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: rgba(124, 156, 255, 0.35) transparent; }
.chat-box::-webkit-scrollbar { width: 8px; }
.chat-box::-webkit-scrollbar-thumb { background: rgba(124, 156, 255, 0.35); border-radius: 999px; }
.chat-box::-webkit-scrollbar-track { background: transparent; }
.message { max-width: 88%; display: flex; flex-direction: column; gap: 6px; }
.message.user { align-self: flex-end; align-items: flex-end; }
.message.assistant { align-self: flex-start; align-items: flex-start; }
.bubble { border-radius: 18px; padding: 12px 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.message.user .bubble { background: linear-gradient(135deg, #6d84ff, #3aa2ff); color: #fff; }
.message.assistant .bubble { background: rgba(15, 25, 40, 0.95); border: 1px solid var(--line); color: var(--text); }
.meta { color: var(--muted); font-size: 0.82rem; }

.composer { width: 100%; display: flex; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: rgba(7,17,31,0.96); }
.composer textarea { flex: 1; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 14px; padding: 12px 14px; resize: none; min-height: 52px; font: inherit; }
.composer button { border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #4c7cff); color: white; font-weight: 700; padding: 0 16px; cursor: pointer; min-width: 88px; }
.composer button:hover { filter: brightness(1.05); }
.composer button:disabled { opacity: 0.6; cursor: not-allowed; }

.footer-note { padding: 0 18px 18px; margin: 0; }

.typing { display: inline-flex; gap: 6px; align-items: center; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #b8c8eb; animation: pulse 1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse { 0%, 80%, 100% { transform: scale(0.8); opacity: .45;} 40% { transform: scale(1); opacity: 1; } }

@media (max-width: 980px) { body { overflow: auto; } .app-shell, .chat-panel { width: 100%; min-width: 0; } .chat-panel { height: 100vh; } }