chat/static/app.css

:root {
  color-scheme: dark;
  --bg: #0f172a;
  --panel: rgba(15, 23, 42, .78);
  --panel-2: rgba(30, 41, 59, .86);
  --text: #e5e7eb;
  --muted: #94a3b8;
  --line: rgba(148, 163, 184, .22);
  --accent: #38bdf8;
  --accent-2: #a78bfa;
  --danger: #fb7185;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, .18), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(167, 139, 250, .16), transparent 30rem),
    var(--bg);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button {
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.1rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #020617;
  font-weight: 800;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: rgba(2, 6, 23, .72);
  color: var(--text);
  padding: .9rem 1rem;
  outline: none;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56,189,248,.12); }
label { display: grid; gap: .45rem; color: var(--muted); font-size: .95rem; }

.shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 1.2rem 0; }
.topbar form { display:flex; gap:.7rem; align-items:center; }
.brand { font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; }
.user-pill { padding:.45rem .75rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.card, .room-card {
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(2,6,23,.28);
  backdrop-filter: blur(16px);
}
.center-card { min-height: calc(100vh - 6rem); display:grid; place-items:center; }
.login-card { width:min(460px, 100%); padding:2rem; }
.stack { display:grid; gap:1rem; }
.eyebrow { margin:0 0 .35rem; color:var(--accent); text-transform:uppercase; font-size:.75rem; letter-spacing:.14em; font-weight:900; }
h1 { margin:.1rem 0 .8rem; font-size: clamp(2rem, 5vw, 4rem); line-height:.95; letter-spacing:-.06em; }
h2 { margin:.2rem 0 .5rem; }
.muted { color:var(--muted); line-height:1.55; }
.error { border:1px solid rgba(251,113,133,.35); background:rgba(251,113,133,.10); color:#fecdd3; padding:.8rem 1rem; border-radius:1rem; margin:1rem 0; }
.grid-page { display:grid; gap:1rem; padding: 1rem 0 3rem; }
.hero { padding:2rem; }
.room-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; }
.room-card { padding:1.3rem; transition: transform .16s ease, border-color .16s ease; }
.room-card:hover { transform: translateY(-2px); border-color: rgba(56,189,248,.6); }
.room-card p { color:var(--muted); }
.two-col-form { grid-template-columns: 1fr 1fr auto; align-items:end; }

.chat-page { display:grid; grid-template-columns: 310px 1fr; gap:1rem; min-height: calc(100vh - 6rem); padding-bottom:1rem; }
.sidebar { padding:1.3rem; align-self:start; position:sticky; top:1rem; }
.back { color:var(--accent); display:inline-block; margin-bottom:1.3rem; }
.hint { margin-top:1rem; color:var(--muted); border:1px solid var(--line); border-radius:1rem; padding:.85rem; background:rgba(2,6,23,.32); }
.chat-card { display:grid; grid-template-rows: 1fr auto; overflow:hidden; min-height: 72vh; }
.messages { overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:.85rem; }
.message { display:flex; gap:.75rem; align-items:flex-start; }
.avatar { flex:0 0 2.35rem; width:2.35rem; height:2.35rem; border-radius:999px; display:grid; place-items:center; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#020617; font-weight:900; text-transform:uppercase; }
.bubble { max-width:min(760px, 100%); padding:.75rem .9rem; border-radius:1.1rem; background:var(--panel-2); border:1px solid var(--line); }
.meta { display:flex; gap:.7rem; align-items:center; color:var(--muted); font-size:.86rem; }
.meta strong { color:var(--text); }
.bubble p { margin:.35rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.message-form { display:grid; grid-template-columns:1fr auto; gap:.75rem; padding:1rem; border-top:1px solid var(--line); background:rgba(2,6,23,.42); }
.empty { color:var(--muted); text-align:center; margin:auto; padding:2rem; }

@media (max-width: 820px) {
  .chat-page, .two-col-form { grid-template-columns: 1fr; }
  .sidebar { position:static; }
  .message-form { grid-template-columns: 1fr; }
  .topbar { gap:1rem; align-items:flex-start; }
  .topbar form { flex-wrap:wrap; justify-content:flex-end; }
}
.button-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: .9rem 1.15rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #020617;
  font-weight: 900;
  margin-top: 1rem;
}
code {
  border: 1px solid var(--line);
  border-radius: .45rem;
  padding: .08rem .35rem;
  background: rgba(2, 6, 23, .55);
  color: var(--text);
}