:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0f172a;
  color: #e2e8f0;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, #1e293b 0, #0f172a 46%); }
button, input { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 14px; padding: 0.75rem 1rem; background: #38bdf8; color: #082f49; font-weight: 800; }
button.secondary, .icon-button { background: #334155; color: #e2e8f0; }
input { border: 1px solid #334155; border-radius: 14px; padding: 0.8rem 0.9rem; background: #020617; color: #f8fafc; outline: none; }
input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18); }
.app-shell { display: grid; grid-template-columns: 360px 1fr; gap: 1rem; height: 100vh; padding: 1rem; }
.sidebar, .chat-panel { border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.86); border-radius: 24px; overflow: hidden; backdrop-filter: blur(16px); }
.sidebar { display: flex; flex-direction: column; padding: 1rem; gap: 1rem; }
.brand-row { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
h1, h2, p { margin: 0; }
.brand-row h1 { font-size: 1.45rem; }
.brand-row p, #roomMeta, .hint { color: #94a3b8; font-size: 0.9rem; margin-top: 0.25rem; }
.room-form { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.room-list { overflow: auto; display: flex; flex-direction: column; gap: 0.6rem; padding-right: 0.25rem; }
.room-card { text-align: left; background: #111827; color: #e5e7eb; border: 1px solid rgba(148, 163, 184, 0.14); display: grid; gap: 0.25rem; }
.room-card.active, .room-card:hover { border-color: #38bdf8; background: #172554; }
.room-card span, .room-card small { color: #94a3b8; }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; }
.chat-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.messages { overflow: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
.message { max-width: 72%; align-self: flex-start; }
.message.own { align-self: flex-end; }
.message-meta { font-size: 0.76rem; color: #94a3b8; margin: 0 0 0.25rem 0.4rem; }
.message.own .message-meta { text-align: right; margin-right: 0.4rem; }
.bubble { white-space: pre-wrap; line-height: 1.5; padding: 0.82rem 1rem; border-radius: 20px 20px 20px 6px; background: #1e293b; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); }
.message.own .bubble { border-radius: 20px 20px 6px 20px; background: linear-gradient(135deg, #38bdf8, #818cf8); color: #06111f; }
.message.gpt .bubble { background: linear-gradient(135deg, #312e81, #7c3aed); color: #f5f3ff; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; padding: 1rem; border-top: 1px solid rgba(148, 163, 184, 0.14); }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; background: rgba(2, 6, 23, 0.78); display: grid; place-items: center; padding: 1rem; }
.modal-card { width: min(440px, 100%); display: grid; gap: 1rem; padding: 1.25rem; border-radius: 24px; background: #0f172a; border: 1px solid #334155; box-shadow: 0 24px 80px rgba(0,0,0,.42); }
.row { display: flex; gap: 0.6rem; align-items: center; }
.row.end { justify-content: flex-end; }
.hidden { display: none !important; }
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; padding: 0.5rem; }
  .message { max-width: 90%; }
  .room-form, .composer { grid-template-columns: 1fr; }
}