:root {
  --bg: #fafafa;
  --panel: #ffffff;
  --border: #e4e4e7;
  --text: #18181b;
  --muted: #71717a;
  --accent: #ff4d4d;
  --accent-bg: #ffd9d9;
  --danger: #b91c1c;
  --preview: #a1a1aa;
  --agent: #ca8a04;
  --agent-own-bg: #fff4f4;
  --agent-own-border: #ff4d4d;
  --agent-other-bg: #f4f4f5;
  --agent-other-border: #d4d4d8;
  --active-bg: #ffd9d9;
  --hover: #f4f4f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090b;
    --panel: #18181b;
    --border: #27272a;
    --text: #fafafa;
    --muted: #a1a1aa;
    --accent: #ff6b6b;
    --accent-bg: #4c1d1d;
    --danger: #f87171;
    --preview: #52525b;
    --agent: #fbbf24;
    --agent-own-bg: #3f1515;
    --agent-own-border: #ff6b6b;
    --agent-other-bg: #27272a;
    --agent-other-border: #52525b;
    --active-bg: #4c1d1d;
    --hover: #27272a;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  /* Suppress iOS Safari's edge-back navigation gesture. Without this,
     a left-edge swipe pops history (URL goes /c/X → /), the popstate
     handler tears down the active conv, and our own swipe-to-open-
     sidebar gesture loses to the browser's built-in. */
  overscroll-behavior-x: none;
  touch-action: pan-y;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
button:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
button:disabled { opacity: 0.5; cursor: default; }
button.danger {
  color: var(--danger);
  border-color: var(--danger);
}
button.danger:hover:not(:disabled) {
  background: var(--danger);
  color: #fff;
}
button.filled {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
button.filled:hover:not(:disabled) { filter: brightness(0.92); background: var(--accent); color: #fff; }

input, textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  width: 100%;
}
/* Native form controls that should never stretch to fill the row. */
input[type='checkbox'], input[type='radio'] {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* Auth -------------------------------------------------------------------- */

.auth-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.auth-left {
  display: grid;
  place-items: center;
  padding: 0 48px;
  min-width: 0;
}
.auth-main {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-title {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: italic;
  color: var(--accent);
}
.auth-tag {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--muted);
  line-height: 1.4;
}
.auth-form {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
}
.auth-form label {
  display: block;
  margin: 12px 0 4px;
  font-size: 13px;
  color: var(--muted);
}
.auth-form .row {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.auth-form .error { color: var(--danger); margin-top: 12px; font-size: 13px; }
.auth-form .notice { color: var(--accent); margin-top: 12px; font-size: 13px; }
.auth-form .switch {
  background: none;
  border: none;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
}
.auth-form .switch:hover { text-decoration: underline; background: none; }

.auth-right {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-tagline {
  width: 90%;
  max-width: 720px;
  height: auto;
  opacity: 0.98;
}

@media (max-width: 640px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-right { display: none; }
  .auth-left { padding: 0 24px; }
  .auth-title { font-size: 44px; }
  .auth-tag { font-size: 15px; }
}

/* App shell --------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  /* 100dvh adapts to the real viewport on iOS Safari et al., where the
     address bar eats into 100vh and pushes the composer off-screen. */
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  position: relative;
}
.app.sidebar-hidden { grid-template-columns: 1fr; }
.app.sidebar-hidden > .sidebar { display: none; }

/* Sidebar ----------------------------------------------------------------- */

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar .brand-bar {
  background: var(--accent);
  color: #fff;
  padding: 12px 16px;
  min-height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--accent);
}
.sidebar .brand {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: italic;
  color: #fff;
  line-height: 1;
}
.sidebar .brand-bar .sidebar-close {
  background: none;
  border: none;
  color: #fff;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
.sidebar .brand-bar .sidebar-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.sidebar .actions {
  padding: 8px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.sidebar .actions button { flex: 1; }

.sidebar .new-conv-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom: 1px solid transparent;
  transition: max-height 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
  flex: 0 0 auto;
}
.sidebar .new-conv-panel.open {
  max-height: 200px;
  opacity: 1;
  border-bottom-color: var(--border);
}
.sidebar .new-conv-form {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar .new-conv-form .actions {
  padding: 0;
  border-bottom: none;
}
.sidebar .convs {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.sidebar .conv {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.sidebar .conv:hover { background: var(--hover); }
.sidebar .conv.active { background: var(--active-bg); }
.sidebar .conv .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .conv .unread {
  background: var(--accent);
  color: white;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
}
.sidebar .conv.archived .title { color: var(--muted); font-style: italic; }

/* Main pane (shared) ------------------------------------------------------ */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.main .empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  padding: 24px;
  text-align: center;
}
.main .header {
  padding: 12px 16px;
  /* Reserve room at the right for the fixed top-right widgets
     (user pill + language button) so header buttons don't slide under. */
  padding-right: 240px;
  min-height: 53px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  background: var(--panel);
}
.main .header .title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.main .header .title {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main .header .title-btn {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  display: flex;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
}
.main .header .title-btn:hover { background: none; }
.main .header .title-btn:hover .title { text-decoration: underline; }
.main .header .viewers { color: var(--muted); font-size: 12px; }
.main .header .archived-tag { color: var(--muted); font-size: 12px; }

.menu-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  color: var(--muted);
}
.menu-toggle:hover {
  background: var(--hover);
  color: var(--accent);
  border-color: var(--accent);
}
.app:not(.sidebar-hidden) .menu-toggle { display: none; }

/* Top-right: user widget + language switcher ------------------------------ */

#top-right {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#user-widget {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}
#user-widget:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 1);
}
@media (prefers-color-scheme: dark) {
  #user-widget { background: rgba(24, 24, 27, 0.85); }
  #user-widget:hover { background: var(--panel); }
}

/* Shown while the SSE stream is trying to reconnect. Amber to signal
   degraded state without reading as an error. */
.reconnecting-pill {
  align-self: center;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .reconnecting-pill {
    background: rgba(120, 53, 15, 0.5);
    color: #fde68a;
    border-color: rgba(252, 211, 77, 0.5);
  }
}

#lang-switcher {
  position: relative;
}
.lang-btn {
  background: rgba(255, 255, 255, 0.85);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.lang-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 1);
}
@media (prefers-color-scheme: dark) {
  .lang-btn { background: rgba(24, 24, 27, 0.85); }
  .lang-btn:hover { background: var(--panel); }
}
.lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  min-width: 70px;
  overflow: hidden;
}
.lang-item {
  background: none;
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 6px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lang-item:hover { background: var(--hover); color: var(--accent); }
.lang-item.active { color: var(--accent); }

.icon-btn {
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.icon-btn:hover { opacity: 0.7; }

/* Chat view --------------------------------------------------------------- */

.participants {
  padding: 8px 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.participants .p {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.participants .p { cursor: pointer; }
.participants .p:hover { filter: brightness(0.96); }
.participants .p.agent.own {
  background: var(--agent-own-bg);
  border-color: var(--agent-own-border);
}
.participants .p.agent.other {
  background: var(--agent-other-bg);
  border-color: var(--agent-other-border);
}
.participants .p.user.viewing {
  border-color: var(--accent);
  border-width: 2px;
  padding: 1px 7px;
}
.participants .p .status { font-size: 11px; padding: 0 2px; }

.participants .add-agent-pill {
  position: sticky;
  right: 0;
  margin-left: auto;
  padding: 2px 10px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  flex: 0 0 auto;
  /* Extend background under any scrolled-past pills so it never looks
     half-covered when the bar overflows horizontally. */
  box-shadow: -8px 0 8px -4px var(--bg);
}
.participants .add-agent-pill:hover:not(:disabled) {
  filter: brightness(0.92);
  background: var(--accent);
  color: #fff;
}

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  /* Standard chat trick: reverse the flex direction so scrollTop=0 is the
     visual bottom. New messages and growing content (images decoding,
     agent stream chunks) keep the user pinned to the bottom automatically.
     Rendering code reverses the message array so DOM order stays newest-
     first, which column-reverse then flips visually to oldest-first. */
  display: flex;
  flex-direction: column-reverse;
  overflow-anchor: none;
}
.message {
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 8px;
}
.message .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.message .meta .name { font-weight: 600; color: var(--text); }
.message.agent .meta .name { color: var(--agent); }
.message .body { white-space: pre-wrap; word-wrap: break-word; }
/* Generic 10-line clamp — used for both message bodies and agent prompts. */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}
.message .body a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.message .body a:hover { filter: brightness(0.88); }
.message.preview .body { color: var(--preview); font-style: italic; }
.message.system {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 12px;
  background: none;
  padding: 4px 0;
}
.read-more {
  margin-top: 4px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.9em;
}
.read-more:hover { filter: brightness(0.88); }
.message .files { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.message .files img {
  max-width: 240px;
  max-height: 240px;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: block;
}
.message .files .file-ref { text-decoration: none; }
.message .files .file-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 6px;
}
.message .files .file-ref:hover .file-card { filter: brightness(0.95); }

/* Reactions row -------------------------------------------------------- */

.message .reactions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  position: relative;
}
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.reaction:hover { filter: brightness(0.96); }
.reaction.mine {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.reaction .count { color: var(--muted); font-size: 12px; }
.reaction.mine .count { color: var(--accent); }
.reaction.add { color: var(--muted); padding: 2px 10px; }
.reaction-palette {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 4px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.reaction-palette .reaction {
  border: 0;
  padding: 4px 8px;
  font-size: 18px;
  background: transparent;
}
.reaction-palette .reaction:hover { background: var(--accent-bg); }

.composer {
  border-top: 1px solid var(--border);
  padding: 10px;
  background: var(--panel);
  flex: 0 0 auto;
  position: relative;
}

.mention-menu {
  display: none;
  position: absolute;
  bottom: calc(100% - 1px);
  left: 10px;
  right: 10px;
  max-width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
  max-height: 220px;
  overflow-y: auto;
  z-index: 5;
}
.mention-menu.open { display: block; }
.mention-item { padding: 8px 12px; cursor: pointer; }
.mention-item:hover { background: var(--hover); }
.mention-item.selected { background: var(--accent-bg); }
.composer .queued-files {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.composer .queued-files .file {
  padding: 2px 8px;
  font-size: 12px;
  background: var(--accent-bg);
  border-radius: 4px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.composer .queued-files .file button {
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--muted);
}
.composer .row { display: flex; gap: 8px; align-items: stretch; }
.composer .row > button {
  min-height: 36px;
  padding: 0 14px;
}
.composer textarea {
  flex: 1;
  resize: none;
  min-height: 36px;
  max-height: 200px;
}
.composer input[type="file"] { display: none; }

/* Agents view ------------------------------------------------------------- */

.agents-pane {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agent-form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agent-form h3 { margin: 0 0 4px; font-size: 14px; }
.agents-list { display: flex; flex-direction: column; gap: 8px; }
.agent-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}
.agent-card .name { font-weight: 600; }
.agent-card .desc { color: var(--muted); font-size: 13px; margin-top: 4px; white-space: pre-wrap; }
.agent-card .actions { margin-top: 8px; display: flex; gap: 6px; }

/* Modals ------------------------------------------------------------------ */

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  min-width: 360px;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
}
.modal h2 { margin-top: 0; font-size: 16px; }
.modal .row { margin: 12px 0; }
.modal .actions { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* Pushes a single button to the left edge of an .actions row, so a
   destructive action like Logout sits visibly apart from Close. */
.modal .actions .leftmost { margin-right: auto; }
.modal .muted { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

.conv-settings-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.conv-settings-form label { color: var(--muted); font-size: 13px; }
.conv-settings-form .actions { margin-top: 8px; justify-content: flex-start; }

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 640px) {
  /* iOS Safari zooms in when focusing inputs with font-size < 16px, which
     leaves the page rendered at the zoomed scale. 16px blocks the auto-zoom. */
  input, textarea, select, button { font-size: 16px; }
  .lang-btn { font-size: 14px; }

  .app, .app.sidebar-hidden {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    z-index: 100;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.3);
    transform: translateX(0);
    transition: transform 0.2s ease;
  }
  .app.sidebar-hidden > .sidebar {
    display: flex; /* override desktop hide */
    transform: translateX(-100%);
    box-shadow: none;
  }
  .app:not(.sidebar-hidden)::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    pointer-events: none;
  }

  .main .header {
    padding: 8px 10px;
    padding-right: 180px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  #user-widget { max-width: 100px; padding: 4px 8px; font-size: 13px; }
  /* Hide the viewers count on narrow screens to keep the header short. */
  .main .header .viewers { display: none; }
  .participants { padding: 4px 10px; }
  .messages { padding: 8px 10px; }
  .composer { padding: 6px 8px; }
  .composer .row > button { min-height: 40px; padding: 0 12px; }
  .composer textarea { min-height: 40px; max-height: 120px; }

  .modal {
    min-width: 0;
    width: calc(100vw - 32px);
    max-width: 100%;
    padding: 16px;
  }
  .agents-pane { padding: 12px; }
}

.profile-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.profile-row:last-of-type { border-bottom: none; }
.profile-row .label { color: var(--muted); flex: 0 0 auto; }
.profile-hint {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0 8px;
  margin-top: -4px;
}

.prompt-block, .posture-block {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.prompt-block .label, .posture-block .label {
  color: var(--muted);
  margin-bottom: 6px;
}
.prompt-block .prompt-text {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}

.radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
label.radio {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
label.radio input { width: auto; }

label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}
label.checkbox input { width: auto; }