:root {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light dark;
  --bg:#fff;
  --secondary:#f3f5f4;
  --chat:#f0f3f1;
  --fg:#202b28;
  --muted:#56685e;
  --line:#dce4df;
  --accent:#16785e;
  --on-accent:#fff;
  --selection:#e3f0e9;
  --mine:#dcefe4;
  --danger:#b43434;
  --focus:#126aaf;
  font-size:16px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--secondary);
  color:var(--fg)
}
[hidden] {
  display:none!important
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer;
  border:0;
  touch-action:manipulation
}
button:disabled {
  cursor:default;
  opacity:.5
}
button,input,textarea,select {
  transition:background-color .15s
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:3px
}
button:hover:not(:disabled) {
  filter:brightness(.95)
}
button:active:not(:disabled) {
  filter:brightness(.9)
}
h1,h2,h3,p {
  margin:0
}
h1,h2 {
  font-size:1.125rem;
  line-height:1.4
}
h3 {
  font-size:1rem
}
svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
input,select,textarea {
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  width:100%;
  min-height:46px
}
textarea {
  resize:none;
  line-height:1.4;
  max-height:140px
}
input::placeholder,textarea::placeholder {
  color:var(--muted)
}
label {
  font-size:.875rem;
  font-weight:550;
  display:grid;
  gap:7px
}
.primary {
  background:var(--accent);
  color:var(--on-accent);
  border-radius:10px;
  padding:12px 18px;
  min-height:46px;
  font-weight:600
}
.text-button {
  color:var(--accent);
  background:transparent;
  padding:10px 8px;
  min-height:44px;
  font-size:.875rem;
  font-weight:550
}
.icon-button {
  height:44px;
  width:44px;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:transparent;
  border-radius:10px;
  flex-shrink:0
}
.hint {
  color:var(--muted);
  font-size:.875rem;
  line-height:1.6
}
.error {
  color:var(--danger);
  font-size:.875rem;
  line-height:1.5
}
.gate {
  max-width:450px;
  min-height:100dvh;
  margin:auto;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  gap:22px;
  padding:32px
}
.gate h1 {
  font-size:1.75rem;
  letter-spacing:-.025em
}
.gate #gate-text {
  line-height:1.65;
  color:var(--muted)
}
.gate .hint {
  border-top:1px solid var(--line);
  padding-top:22px
}
.workspace {
  background:var(--bg);
  height:100dvh;
  height:var(--tg-viewport-stable-height,100dvh);
  max-width:1360px;
  margin:auto;
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  position:relative;
  padding-top:var(--tg-content-safe-area-inset-top,0px);
  padding-bottom:var(--tg-content-safe-area-inset-bottom,0px)
}
.sidebar {
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:1px solid var(--line);
  background:var(--bg)
}
.sidebar-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 18px 14px
}
.brand {
  display:flex;
  gap:10px;
  align-items:center
}
.brand strong {
  font-size:1.0625rem
}
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px 8px
}
.section-title h1 {
  font-size:.875rem;
  color:var(--muted);
  font-weight:600
}
#room-list {
  padding:0 10px;
  overflow:auto;
  flex:1
}
.room-button {
  border-radius:12px;
  background:transparent;
  color:var(--fg);
  padding:14px 12px;
  display:flex;
  align-items:center;
  width:100%;
  text-align:left;
  gap:12px;
  margin:2px 0;
  min-height:76px
}
.room-button[aria-current=true] {
  background:var(--selection)
}
.room-monogram {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  background:var(--secondary);
  border-radius:12px;
  font-size:1.125rem;
  font-weight:650;
  flex-shrink:0
}
.room-button[aria-current=true] .room-monogram {
  background:var(--accent);
  color:var(--on-accent)
}
.room-copy {
  min-width:0;
  display:grid;
  gap:4px
}
.room-copy strong {
  font-size:.9375rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.room-copy small {
  font-size:.75rem;
  color:var(--muted)
}
.profile {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  border-top:1px solid var(--line);
  gap:6px
}
.profile div {
  display:grid;
  gap:5px;
  min-width:0
}
.profile strong {
  font-size:.8125rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.profile small {
  font-size:.75rem;
  color:var(--muted)
}
.empty-note {
  padding:20px;
  color:var(--muted);
  font-size:.875rem;
  line-height:1.7;
  flex:1
}
.welcome {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  text-align:center;
  background:var(--chat);
  padding:32px
}
.welcome p {
  color:var(--muted);
  line-height:1.7;
  font-size:.9375rem
}
.chat {
  position:relative;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--chat)
}
.chat-header {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:80px;
  padding:12px 24px;
  background:var(--bg);
  border-bottom:1px solid var(--line)
}
.chat-header p {
  font-size:.8125rem;
  color:var(--muted);
  margin-top:4px;
  line-height:1.4;
  overflow-wrap:anywhere
}
.chat-heading {
  flex:1;
  min-width:0
}
.chat-header h2 {
  overflow-wrap:anywhere
}
.connection {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 24px;
  font-size:.6875rem;
  color:var(--muted)
}
.messages-scroll {
  overflow-y:auto;
  overscroll-behavior:contain;
  flex:1;
  padding:0 24px 20px;
  scrollbar-gutter:stable
}
.history-control {
  text-align:center;
  margin:4px 0
}
#messages {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px
}
.message {
  max-width:min(85%,600px);
  border-radius:14px 14px 14px 4px;
  background:var(--bg);
  padding:10px 14px;
  min-width:100px
}
.message.mine {
  background:var(--mine);
  align-self:flex-end;
  border-radius:14px 14px 4px 14px
}
.message-author {
  font-size:.75rem;
  font-weight:650;
  color:var(--accent);
  margin-bottom:5px;
  overflow-wrap:anywhere
}
.message-text {
  font-size:.9375rem;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.message-time {
  display:block;
  text-align:right;
  color:var(--muted);
  font-size:.625rem;
  margin-top:4px
}
.chat-empty {
  padding:48px 14px;
  text-align:center;
  color:var(--muted)
}
.chat-empty p {
  font-size:.875rem;
  line-height:1.6;
  margin-top:10px
}
.composer {
  display:flex;
  align-items:flex-end;
  gap:10px;
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:14px 20px max(14px,env(safe-area-inset-bottom))
}
.composer textarea {
  flex:1;
  background:var(--secondary)
}
.send {
  display:grid;
  place-items:center;
  width:46px;
  padding:0
}
.readonly {
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:20px;
  font-size:.875rem;
  color:var(--muted);
  text-align:center
}
.chat-error {
  padding:8px 24px;
  background:var(--bg)
}
.new-messages {
  position:absolute;
  bottom:92px;
  left:50%;
  transform:translateX(-50%);
  border-radius:20px;
  padding:10px 18px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:.8125rem;
  white-space:nowrap
}
.mobile-back {
  display:none
}
.admin-panel {
  overflow:auto;
  min-height:0;
  background:var(--bg)
}
.admin-content {
  padding:0 28px 32px;
  max-width:660px;
  margin:auto
}
.admin-section {
  padding:28px 0;
  border-bottom:1px solid var(--line)
}
.admin-section h3 {
  margin-bottom:12px
}
.stack-form {
  display:grid;
  gap:14px;
  margin:20px 0
}
.stack-form .primary {
  justify-self:start
}
.field-label {
  display:block;
  margin:20px 0 8px;
  font-size:.875rem
}
.admin-section>.hint {
  margin-top:10px
}
.users-list {
  display:grid;
  gap:0
}
.user-row {
  padding:14px 0;
  border-top:1px solid var(--line);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between
}
.user-row>div {
  display:grid;
  gap:4px;
  min-width:0
}
.user-row strong {
  font-size:.875rem;
  overflow-wrap:anywhere
}
.user-row small {
  font-size:.75rem;
  color:var(--muted)
}
.danger-button {
  background:transparent;
  color:var(--danger);
  padding:10px 8px;
  min-height:44px;
  font-size:.8125rem
}
.notice {
  padding:14px 0;
  font-size:.875rem;
  line-height:1.5;
  color:var(--accent);
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:1
}
.notice.error {
  color:var(--danger)
}
.workspace-notice {
  position:absolute;
  bottom:10px;
  left:10px;
  right:10px;
  z-index:5;
  padding:16px;
  background:var(--bg);
  border:1px solid var(--danger);
  border-radius:12px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media(prefers-color-scheme:dark) {
  :root {
    --bg:#17221e;
    --secondary:#1e2a25;
    --chat:#111b17;
    --fg:#e4eee8;
    --muted:#a2b4a8;
    --line:#314239;
    --accent:#68ceb0;
    --on-accent:#10261d;
    --selection:#233e31;
    --mine:#264736;
    --danger:#ffaaaa;
    --focus:#84bdff
  }
}
:root[data-theme=dark] {
  --bg:#17221e;
  --secondary:#1e2a25;
  --chat:#111b17;
  --fg:#e4eee8;
  --muted:#a2b4a8;
  --line:#314239;
  --accent:#68ceb0;
  --on-accent:#10261d;
  --selection:#233e31;
  --mine:#264736;
  --danger:#ffaaaa;
  --focus:#84bdff
}
:root[data-theme=light] {
  --bg:#fff;
  --secondary:#f3f5f4;
  --chat:#f0f3f1;
  --fg:#202b28;
  --muted:#56685e;
  --line:#dce4df;
  --accent:#16785e;
  --on-accent:#fff;
  --selection:#e3f0e9;
  --mine:#dcefe4;
  --danger:#b43434;
  --focus:#126aaf
}
@media(max-width:720px) {
  .workspace {
    display:block
  }
  .sidebar {
    height:100%
  }
  .sidebar-header {
    padding:12px 16px
  }
  .section-title {
    padding:6px 16px
  }
  .welcome {
    display:none
  }
  .chat,.admin-panel {
    height:100%;
    position:absolute;
    inset:0;
    z-index:2;
    padding-top:var(--tg-content-safe-area-inset-top,0px);
    padding-bottom:var(--tg-content-safe-area-inset-bottom,0px)
  }
  .chat-header {
    padding:10px 10px;
    min-height:70px
  }
  .chat-header h2 {
    font-size:1rem
  }
  .mobile-back {
    display:grid
  }
  .connection {
    padding:9px 16px
  }
  .messages-scroll {
    padding:0 12px 16px
  }
  .composer {
    padding:10px 12px max(10px,env(safe-area-inset-bottom));
    gap:8px
  }
  .message {
    max-width:90%
  }
  .admin-content {
    padding:0 20px 24px
  }
  .profile {
    padding-bottom:max(14px,env(safe-area-inset-bottom))
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important
  }
}