/* static/style.css - modern messenger look with dark support */
:root{
  --bg: #f3f6fb;
  --card: rgba(255,255,255,0.95);
  --accent: #3b82f6;
  --me: #4a90e2;
  --other: #e9edf5;
  --muted: #6b7280;
}

*{box-sizing:border-box}
body{
  margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#e6eefc,#f7fbff);
  height:100vh;color:#111;
}
body.dark{
  --bg:#0f1724; --card: rgba(16,24,39,0.9); --accent:#60a5fa; --me:#2563eb; --other:#1f2937; --muted:#94a3b8;
  background: linear-gradient(180deg,#071124,#0b1220); color: #eee;
}

.center {
  display:flex; align-items:center; justify-content:center; height:100vh;
}

/* Topbar */
.topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:var(--card); box-shadow:0 6px 18px rgba(16,24,40,0.08);
}
.topbar .title{ font-weight:700; font-size:18px }
.topbar .meta{ font-size:13px; color:var(--muted) }
.topbar .logout{ margin-left:10px; color:var(--accent); text-decoration:none }

/* App layout */
.app{
  max-width:720px; margin:40px auto; border-radius:12px; overflow:hidden; box-shadow:0 12px 40px rgba(2,6,23,0.12);
  background:var(--card);
}

/* chat area */
.chat-area{ display:flex; flex-direction:column; height:70vh; }
.messages{ flex:1; padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; background:transparent }
.message{ max-width:72%; padding:12px 14px; border-radius:14px; box-shadow:0 6px 18px rgba(2,6,23,0.06); word-wrap:break-word; }
.message .m-meta{ font-size:12px; color:var(--muted); margin-bottom:6px }
.message .m-text{ font-size:15px }
.message.me{ margin-left:auto; background:var(--me); color:#fff; border-bottom-right-radius:4px; }
.message.other{ margin-right:auto; background:var(--other); color:var(--muted); border-bottom-left-radius:4px; }
.message.sys{ margin:0 auto; background:transparent; color:var(--muted); font-style:italic; }

.m-read{ font-size:11px; color:var(--muted); margin-top:6px; text-align:right }

/* input row */
.input-row{ display:flex; padding:12px; gap:8px; border-top:1px solid rgba(0,0,0,0.05); background:transparent }
#msg-input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid #e6e9ef; outline:none; }
#msg-input:focus{ box-shadow:0 0 0 4px rgba(59,130,246,0.08); border-color:var(--accent) }
button{ padding:10px 14px; border-radius:10px; border:none; background:var(--accent); color:#fff; cursor:pointer }
button:hover{ filter:brightness(0.95) }

/* login card */
.center-page{ display:flex; align-items:center; justify-content:center; height:100vh; background: linear-gradient(180deg,#e6eefc,#f7fbff) }
.card{ width:360px; padding:26px; border-radius:14px; background:var(--card); box-shadow:0 10px 30px rgba(2,6,23,0.08) }
.login-card input{ width:100%; padding:12px; margin:8px 0; border-radius:10px; border:1px solid #e6e9ef }
.login-card button{ width:100%; padding:12px; border-radius:10px; background:var(--accent); color:#fff; border:none; cursor:pointer }
.error{ color:#dc2626; margin-bottom:8px; text-align:center }
.small{ font-size:12px; color:var(--muted); margin-top:10px; text-align:center }