:root {
  --control-height: 2.75rem;
  --control-padding: 0 .8rem;
  --row-padding: .55rem .75rem;
  --compact-height: 1.9rem;
  --compact-padding: 0 .6rem;
}

input:not([type="checkbox"]), textarea {
  height: var(--control-height);
  padding: var(--control-padding);
  font: .95rem var(--font-sans);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--canvas-background);
  color: var(--text-primary);
}
input[type="checkbox"] {
  width: 1rem; height: 1rem; flex: none; margin: 0;
  accent-color: var(--accent-brand);
}
.btn {
  height: var(--control-height);
  padding: var(--control-padding);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Bounded chat: the sidebar and the message list share one grid row, so they
   can only ever be as tall as the layout. Both scroll internally instead of
   the message list stretching the page and the sidebar growing to match. */
.chat-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  height: min(720px, calc(100vh - 220px));
  padding: 2rem;
  max-width: 1120px;
  margin-inline: auto;
}
.chat-sidebar {
  overflow-y: auto;
}
.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.chat-input-bar {
  flex-shrink: 0;
}

.chat-sidebar, .chat-panel {
  min-width: 0; border: 1px solid var(--border-subtle);
  border-radius: var(--radius); background: var(--surface-card);
}
.chat-sidebar { padding: 1rem; }

.auth {
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  background: var(--surface-card); padding: 1rem; margin-bottom: 1rem;
}
.auth summary { cursor: pointer; font-weight: 600; }
.auth form, .auth .who { display: grid; gap: .5rem; margin-top: .75rem; }
.auth label, #new-room label { font: .78rem var(--font-mono); color: var(--text-muted); }
.auth .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.auth-error { color: var(--status-danger); font-size: .85rem; min-height: 1.2em; }

#new-room { display: grid; gap: .5rem; }
#new-room button { width: 100%; }
/* The 220px sidebar is narrow: let its controls shrink to the column rather
   than pushing a horizontal scrollbar onto the sidebar. */
.chat-sidebar input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.new-room__private { display: flex; align-items: center; gap: .5rem; }
.new-room__private label { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); }

#room-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.room, .room-list__item {
  display: block; width: 100%; text-align: left; margin-bottom: .4rem;
  padding: var(--row-padding); font: .9rem var(--font-mono);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--surface-card); color: var(--text-primary); cursor: pointer;
}
.room:hover, .room-list__item:hover { background: var(--surface-hover); }
.room.active, .room-list__item--active { border-color: var(--accent-brand); font-weight: 600; }
.room .lock { color: var(--status-warn); }

#history {
  list-style: none; margin: 0; padding: 1rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.msg {
  max-width: 78ch; padding: .55rem .8rem;
  border: 1px solid var(--border-subtle); border-radius: 10px;
  background: var(--canvas-background);
}
.msg.own { align-self: flex-end; background: var(--surface-hover); }
.msg.deleted { border-style: dashed; color: var(--text-muted); font-style: italic; }
.msg-head { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .15rem; }
.msg-user { font-weight: 600; color: var(--accent-interactive); }
.msg time { font: .72rem var(--font-mono); color: var(--text-muted); }
.msg-admin { display: flex; gap: .4rem; margin-top: .35rem; }
.msg-admin button {
  height: var(--compact-height); padding: var(--compact-padding);
  display: inline-flex; align-items: center;
  font: .72rem var(--font-mono); cursor: pointer;
  border: 1px solid var(--border-subtle); border-radius: 6px;
  background: var(--surface-card); color: var(--text-primary);
}
.msg-admin .danger { color: var(--status-danger); border-color: var(--status-danger); }

#composer { display: flex; gap: .6rem; padding: .8rem; border-top: 1px solid var(--border-subtle); }
#msg { flex: 1 1 12ch; min-width: 0; }
#composer .btn.primary[disabled] { opacity: .5; cursor: not-allowed; }

.notice { padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; margin-bottom: .8rem; }
.notice.ok { color: var(--status-ok); background: var(--surface-hover); }
.notice.err { color: var(--status-danger); border: 1px solid var(--status-danger); }

.conn { font: .8rem var(--font-mono); margin: .8rem 0 0; color: var(--status-warn); }
.conn.ok { color: var(--status-ok); }
.conn.err { color: var(--status-danger); }

@media (max-width: 768px) {
  .chat-layout { grid-template-columns: 1fr; height: auto; padding: 1rem; }
  .chat-messages { flex: none; max-height: 48vh; }
  .msg { max-width: 95%; }
}

/* The padlock beside a private room, inline SVG like the rest of the site. */
.room { display: flex; align-items: center; gap: .35rem; }
.room .icon { width: .9rem; height: .9rem; vertical-align: 0; color: var(--status-warn); }