/* Light: text 17.7:1, sub 7.6:1 on card; dark: text 14.1:1, sub 7.4:1. White on accent 6.3:1.
   Bubble edges vs page (WCAG 1.4.11, 3:1): light other 3.36 (text 14.9), mine 5.76; dark other 4.72 (text 11.5), mine 5.90. */
:root {
  --page: #F4F5F7; --card: #FFFFFF; --text: #111827; --sub: #4B5563; --line: #D1D5DB; --accent: #4F46E5; --accent-hover: #4338CA;
  --accent-soft: #EEF2FF; --link: #4338CA; --danger: #B91C1C; --btn: #E5E7EB; --field: #FFFFFF; --placeholder: #6B7280;
  --mine: #4F46E5; --mine-text: #FFFFFF; --mine-line: #4F46E5; --other: #E8EBF2; --other-line: #7C869A; --closed: #92400E; --closed-soft: #FEF3C7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #151922; --card: #1F2430; --text: #F3F4F6; --sub: #AEB4BE; --line: #374151; --accent-soft: #252B45; --link: #A5B4FC;
    --danger: #FCA5A5; --btn: #374151; --field: #11141B; --placeholder: #9CA3AF; --other: #2B3345; --other-line: #7A84A0; --mine-line: #818CF8; --closed: #FCD34D; --closed-soft: #3A2E0E;
  }
}
:root[data-theme="dark"] {
  --page: #151922; --card: #1F2430; --text: #F3F4F6; --sub: #AEB4BE; --line: #374151; --accent-soft: #252B45; --link: #A5B4FC;
  --danger: #FCA5A5; --btn: #374151; --field: #11141B; --placeholder: #9CA3AF; --other: #2B3345; --other-line: #7A84A0; --mine-line: #818CF8; --closed: #FCD34D; --closed-soft: #3A2E0E;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--text); height: 100%; }
body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.bar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 8px 8px; background: #111827; color: #FFFFFF; }
.bar h1 { margin: 0; font-size: 17px; font-weight: 600; text-align: center; grid-column: 2; }
.bar-btn { background: transparent; color: #FFFFFF; border: 0; font: inherit; font-size: 14px; padding: 6px 8px; cursor: pointer; }
#back { grid-column: 1; justify-self: start; }
#account { grid-column: 3; justify-self: end; font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 12px; display: flex; flex-direction: column; min-height: 0; }
.loading { color: var(--sub); text-align: center; margin-top: 40px; }
.card { background: var(--card); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.sub { color: var(--sub); font-size: 13px; }
.status { font-weight: 600; margin: 8px 0; white-space: pre-wrap; }
.status.error { color: var(--danger); }
button { font: inherit; border: 0; border-radius: 8px; padding: 9px 14px; background: var(--btn); color: var(--text); cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
button.primary { background: var(--accent); color: #FFFFFF; }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button.small { font-size: 12px; padding: 6px 10px; }
button.wide { width: 100%; padding: 12px; }
input, textarea { font: inherit; width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
a { color: var(--link); }
h2 { font-size: 15px; margin: 18px 4px 8px; color: var(--sub); }
.row { display: flex; gap: 8px; align-items: center; }
.row > .grow { flex: 1; min-width: 0; }
.gap { margin-top: 8px; }

/* Room list */
.room { display: block; width: 100%; text-align: left; background: var(--card); color: var(--text); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.room:hover:not(:disabled) { outline: 1px solid var(--line); }
.room .name { font-weight: 600; font-size: 15px; display: flex; gap: 6px; align-items: center; }
.room:disabled { opacity: 1; cursor: not-allowed; }
.room:disabled .name, .room:disabled .sub { opacity: .75; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.pill.closed { background: var(--closed-soft); color: var(--closed); }
.pill.count { background: var(--accent-soft); color: var(--link); }
.request { display: flex; gap: 10px; align-items: center; background: var(--card); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.request .grow { flex: 1; min-width: 0; }
.request .votes { font-weight: 700; color: var(--link); min-width: 44px; text-align: center; }
button.voted { outline: 2px solid var(--accent); }
.intro { margin: 4px 4px 10px; }

/* A room */
.room-view { flex: 1; display: flex; flex-direction: column; min-height: 0; height: calc(100dvh - 76px); }
.messages { flex: 1; overflow-y: auto; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 6px; }
.day { align-self: center; font-size: 12px; color: var(--sub); margin: 10px 0 4px; }
.msg { max-width: 82%; align-self: flex-start; }
.msg .who { font-size: 12px; color: var(--sub); margin: 0 4px 2px; }
.msg .bubble { background: var(--other); color: var(--text); border: 1px solid var(--other-line); border-radius: 14px; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .time { font-size: 11px; color: var(--sub); margin: 2px 4px 0; }
.msg.mine { align-self: flex-end; }
.msg.mine .bubble { background: var(--mine); color: var(--mine-text); border-color: var(--mine-line); }
.msg.mine .who { display: none; }
.msg.mine .time { text-align: right; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding-top: 8px; padding-bottom: env(safe-area-inset-bottom); }
.composer textarea { resize: none; min-height: 42px; max-height: 140px; }
.banner { background: var(--closed-soft); color: var(--closed); border-radius: 10px; padding: 10px 12px; font-weight: 600; margin-bottom: 8px; }
.online { font-size: 12px; color: var(--sub); text-align: center; margin-bottom: 4px; }
.composer button { white-space: nowrap; }