: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[type="text"], input:not([type]), input[type="search"] { border: 1px solid #334155; border-radius: 14px; padding: 0.8rem 0.9rem; background: #020617; color: #f8fafc; outline: none; width: 100%; }
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, .current-user { color: #94a3b8; font-size: 0.9rem; margin-top: 0.25rem; }
.current-user { color: #7dd3fc; font-weight: 700; }
.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: auto 1fr auto;
  gap: 0.6rem;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  align-items: center;
}
.gpt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: 14px;
  border: 1px solid #334155;
  background: #020617;
  color: #e2e8f0;
  font-weight: 800;
  white-space: nowrap;
}
.gpt-toggle input { width: 1.1rem; height: 1.1rem; accent-color: #38bdf8; }
.gpt-toggle:has(input:checked) {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
}
.field { display: grid; gap: 0.4rem; }
.check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.4rem 0;
  color: #e2e8f0;
}
.check-row input { width: 1.15rem; height: 1.15rem; accent-color: #38bdf8; }
.check-row code { color: #7dd3fc; }
.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: 34vh 1fr; padding: 0.5rem; gap: 0.5rem; }
  .message { max-width: 90%; }
  .room-form { grid-template-columns: 1fr; }
  .composer { grid-template-columns: auto 1fr; grid-template-areas: "toggle input" "send send"; }
  .gpt-toggle { grid-area: toggle; }
  #messageInput { grid-area: input; }
  .composer button[type="submit"] { grid-area: send; width: 100%; min-height: 46px; }
}