:root {
  color-scheme: dark;
  --bg: #10151c;
  --panel: #19212b;
  --line: #2a3542;
  --text: #e6edf5;
  --muted: #95a6b9;
  --accent: #d8b873;
  --green: #77d4ad;
  --red: #ff9d9d;
  --ui-tooltip-bg: var(--panel);
  --ui-tooltip-color: var(--text);
  --ui-tooltip-border: var(--accent);
}
.stats.monitor-stats { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.monitor-stats strong { overflow-wrap: anywhere; }
.monitor-stats .card small { display: block; margin-top: 6px; }
.monitor-warning { border-left: 3px solid var(--accent); background: #332c1b; padding: 12px 16px; margin: 12px 0; }
.monitor-stale { color: var(--red); }
.monitor-age { color: var(--muted); }
meter { display: block; width: 100%; min-width: 100px; height: 12px; margin: 8px 0; accent-color: var(--accent); }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    15px/1.5 system-ui,
    -apple-system,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  background: var(--accent);
  color: #171c24;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 10px 17px;
  font-weight: 600;
}
button:hover {
  filter: brightness(1.1);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.secondary {
  background: #202b37;
  border-color: var(--line);
  color: var(--text);
}
a {
  color: var(--accent);
}
h1 {
  font-size: 30px;
  letter-spacing: -0.6px;
  margin: 0 0 8px;
}
h2 {
  font-size: 20px;
  margin: 0 0 15px;
}
p {
  margin: 0 0 15px;
}
.muted,
footer {
  color: var(--muted);
}
.hidden {
  display: none !important;
}
.wordmark {
  font-size: 27px;
  font-weight: 750;
  letter-spacing: -1px;
}
.wordmark span {
  color: var(--accent);
}
.wordmark small {
  font-size: 10px;
  letter-spacing: 3px;
  display: block;
  color: var(--muted);
  margin-top: 1px;
}
#shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.mobile-toolbar, #close-navigation { display: none; }
.admin-account-security { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.admin-account-security h2 { margin-bottom:4px; }
.admin-account-security p { margin:0; }
dialog.ui-window.admin-account-password { --ui-window-panel:var(--panel); --ui-window-bar:var(--bg); --client-window-border:var(--line); --theme-3e3930:var(--line); position:fixed; inset:auto; left:50%; top:calc(var(--admin-visible-top,0px) + var(--admin-visible-height,100dvh) / 2); transform:translate(-50%,-50%); max-height:calc(var(--admin-visible-height,100dvh) - 16px); margin:0; }
.admin-account-password .ui-window-body { display:grid; gap:14px; margin:0; }
.admin-account-password label, .admin-account-password p { margin:0; }
.admin-account-password input:focus { outline:none; border-color:var(--line); box-shadow:none; }
.admin-account-password[data-keyboard-focus] input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#admin-password-error { color:var(--red); }
#admin-password-error:empty { display:none; }
@media(max-width:650px) { .admin-account-password input { font-size:16px; } }
#notice { pointer-events: none; }
#navigation-backdrop[hidden] { display: none; }
aside {
  width: 248px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  background: #131a22;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
nav {
  display: grid;
  gap: 2px;
  margin-top: 16px;
}
aside > .wordmark,
.aside-bottom {
  flex-shrink: 0;
}
aside > nav {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 3px;
  margin-inline: -3px;
}
nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  color: var(--muted);
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  padding: 4px 10px;
}
nav .nav-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
nav .nav-label {
  flex: 1;
  min-width: 0;
}
nav button.active {
  background: #343026;
  color: #f4d492;
  border-color: #615137;
}
nav b {
  margin-left: auto;
  flex-shrink: 0;
}
.aside-bottom {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  color: var(--muted);
}
.aside-bottom p {
  margin: 6px 0;
}
#admin-audio-dock:has(.sc-audio-dock:not([hidden])) { margin-bottom:10px; }
.admin-chat-view { height:100%; min-height:0; }
@media(max-width:650px) {
  .aside-bottom:has(.sc-audio-dock:not([hidden])) { position:static; display:flex; align-items:center; gap:12px; margin-top:8px; }
  #admin-audio-dock:has(.sc-audio-dock:not([hidden])) { flex:1; min-width:0; margin:0; }
}
.aside-bottom button {
  padding: 7px 12px;
}
.badge {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--muted);
}
.badge.online,
.badge.resolved {
  color: var(--green);
  background: #173129;
  border-color: #294b3d;
}
.badge.new {
  color: #f4d492;
  background: #302b20;
}
.badge.investigating {
  color: #9dbef7;
  background: #1d2c42;
}
main {
  padding: 16px;
  min-width: 0;
  width: 100%;
  max-width: 1700px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
main > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px 16px;
  flex-wrap: wrap;
}
main > header .eyebrow {
  display: none;
}
main > header h1 {
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 8px;
}
.header-actions {
  display: flex;
  gap: 6px 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.header-actions button {
  padding: 6px 12px;
  min-height: 32px;
}
.page-loading {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.page-loading strong { font-weight: 600; }
.page-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: page-loading-spin .9s linear infinite;
}
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .page-loading-spinner { animation: none; }
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 25px;
}
.card,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 23px;
}
.card small {
  color: var(--muted);
}
.card strong {
  display: block;
  font-size: 36px;
  margin-top: 10px;
  font-weight: 600;
}
.panel {
  margin-bottom: 20px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.panel-head h2 {
  margin: 0;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
th {
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
td,
th {
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tr:last-child td {
  border-bottom: 0;
}
td small {
  display: block;
  color: var(--muted);
}

.user-row td {
  padding: 8px 12px;
  vertical-align: middle;
}
.user-row small {
  margin-top: 2px;
  font-size: 12px;
}
.user-actions {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.user-actions .user-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 6px;
}
.user-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.user-actions .user-action.is-active {
  color: var(--accent);
  border-color: var(--accent);
}
.user-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.user-action:disabled {
  cursor: not-allowed;
}

.empty {
  text-align: center;
  padding: 45px 15px;
  color: var(--muted);
}
.empty strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  margin-bottom: 8px;
}
.search {
  max-width: 300px;
}
.row {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}
.row label {
  flex: 1;
  min-width: 180px;
}
label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 14px;
}
input,
textarea,
select {
  display: block;
  width: 100%;
  border: 1px solid #394858;
  border-radius: 6px;
  background: #111922;
  color: var(--text);
  padding: 10px 12px;
  margin-top: 6px;
}
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #b89a59;
  outline-offset: 1px;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
.login {
  max-width: 420px;
  margin: 10vh auto;
  padding: 25px;
}
.login .wordmark {
  margin-bottom: 40px;
}
.login h1 {
  font-size: 25px;
}
.login button {
  width: 100%;
  margin-top: 10px;
}
footer {
  font-size: 12px;
  margin-top: 30px;
}
.columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
dl {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  margin: 0;
}
dt {
  color: var(--muted);
}
dd {
  margin: 0;
  overflow-wrap: anywhere;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #111922;
  padding: 15px;
  border-radius: 7px;
  max-height: 300px;
  overflow: auto;
  font-size: 12px;
}
dialog {
  width: min(850px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 25px;
}
dialog::backdrop {
  background: #0009;
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
#notice {
  position: fixed;
  bottom: 25px;
  right: 25px;
  max-width: 500px;
  background: #352628;
  border: 1px solid #a75c5c;
  color: #ffdddd;
  padding: 16px 24px;
  border-radius: 8px;
  z-index: 10;
}
.description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.row button {
  margin-bottom: 14px;
}
.link-button {
  padding: 2px 0;
  background: none;
  color: var(--accent);
  text-align: left;
}
.status-line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.status-line:last-child {
  border: 0;
}
@media (max-width: 1000px) {
  aside {
    width: 234px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .columns {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 651px) and (max-height: 650px) {
  nav button {
    flex: 0 0 auto;
    padding-block: 2px;
  }
  .aside-bottom .badge,
  .aside-bottom p {
    display: none;
  }
}
@media (max-width: 650px) {
  #shell {
    flex-direction: column;
  }
  aside {
    width: 100%;
    padding: 15px;
    height: auto;
    position: relative;
  }
  aside .wordmark small,
  .aside-bottom p,
  .aside-bottom .badge {
    display: none;
  }
  .aside-bottom {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 15px;
    top: 15px;
  }
  nav {
    display: flex;
    overflow: auto;
    margin-top: 12px;
  }
  aside > nav {
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
  }
  nav button {
    white-space: nowrap;
    min-height: 40px;
    padding: 8px 10px;
  }
  .aside-bottom button {
    padding: 10px 17px;
  }
  main {
    flex: 1 1 auto;
  }
  main > header {
    align-items: start;
  }
  h1 {
    font-size: 24px;
  }
  .stats {
    gap: 10px;
  }
  .card {
    padding: 15px;
  }
  dl {
    grid-template-columns: 1fr;
  }
  .login {
    margin: 4vh auto;
  }
}
/* Release marker catalog */
.marker-filters { margin-top: 20px; gap: 20px; }
.marker-filters label { min-width: 220px; }
.marker-warning { border-left: 3px solid #c5a360; padding: 12px 16px; background: #c5a3600d; line-height: 1.6; }
.marker-hash { overflow-wrap: anywhere; }
.marker-source { max-height: 480px; overflow: auto; font-size: 13px; line-height: 1.6; white-space: pre; }
#marker-tables details { margin-top: 14px; }
#marker-tables summary, .marker-meta summary { cursor: pointer; }
#marker-tables td { vertical-align: top; }
#marker-tables td small { display: block; }
.marker-scroll { overflow: auto; max-height: 720px; border: 1px solid var(--line); border-radius: 6px; }
.marker-matrix-table { table-layout: fixed; width: 1620px; border-collapse: separate; border-spacing: 3px; }
.marker-matrix-table th { padding: 5px; text-align: center; width: 70px; }
.marker-matrix-table th:first-child { width: 32px; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.marker-matrix-table thead th { position: sticky; top: 0; background: var(--panel); z-index: 2; }
.marker-matrix-table th small { display: block; font-size: 10px; height: 38px; overflow: hidden; font-weight: normal; }
.marker-matrix-table td { padding: 0; border: 0; }
.marker-pixel { width: 100%; height: 56px; padding: 4px; border-radius: 4px; border: 1px solid #607485; font-size: 11px; line-height: 1.35; text-align: center; color: #edf2f7; }
.marker-pixel span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.marker-pixel.technical { background: #233c50; }
.marker-pixel.ability { background: #463c24; }
.marker-pixel.party { background: #21463e; }
.marker-pixel.trinket { background: #46304e; }
.marker-pixel.queue { background: #35482a; }
.marker-pixel.reserved { background: #151b22; color: #8d9baa; border-color: #2b3541; }
.marker-pixel[aria-pressed="true"], .marker-pixel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; filter: brightness(1.35); }
.marker-description { margin-top: 16px; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; min-height: 150px; line-height: 1.6; }
.marker-description p { margin: 8px 0; }
.marker-description small, .marker-legend { color: var(--muted); }
.marker-legend { margin-bottom: 12px; }
.spec-status-copy { min-width: 260px; max-width: 440px; }
.spec-status-copy summary { cursor: pointer; color: var(--text); }
.spec-status-copy label { margin-top: 14px; }
.spec-status-copy textarea { min-height: 88px; }
.visits-filters { align-items: end; margin-bottom: 18px; }
.visits-bots { display: flex; flex-direction: row; align-items: center; gap: 8px; padding-bottom: 10px; }
.visits-bots input { width: auto; }
.visits-chart { display: grid; gap: 10px; }
.visits-day { display: grid; grid-template-columns: 94px minmax(50px,1fr) 64px; align-items: center; gap: 12px; font-size: 13px; }
.visits-day meter { width: 100%; height: 18px; accent-color: var(--accent); }
.visits-day strong { text-align: right; }
/* The chat owns its message/contact scroll areas; the fixed admin shell stays intact. */
main:has(.chat-content) { display:flex; flex-direction:column; overflow:hidden; scrollbar-gutter:auto; padding:var(--admin-chat-inset,8px); }
main:has(.chat-content)>header { flex-shrink:0; }
main:has(.chat-content)>footer { display:none; }
#content.chat-content { flex:1; min-height:0; height:0; }
.support-chat.chat-admin-settings { --sc-bg:var(--bg); --sc-pane:var(--panel); --sc-line:var(--line); --sc-ink:var(--text); --sc-muted:var(--muted); --sc-accent:var(--accent); height:auto; min-height:0; display:grid; gap:20px; }
.chat-admin-settings > .sc-hint { margin:0; }
.chat-admin-settings .chat-storage-summary { display:grid; grid-template-columns:minmax(100px,160px) minmax(0,1fr); gap:8px 16px; margin:0; }
.chat-storage-summary dd { margin:0; overflow-wrap:anywhere; }
.chat-storage-summary dt { color:var(--muted); }
.chat-storage-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.chat-storage-controls > .sc-field { flex:1 1 220px; margin:0; }
.chat-storage-controls > button { flex:0 1 auto; }
.chat-storage-actions { display:flex; flex-wrap:wrap; gap:8px; }
.chat-storage-job + .chat-storage-job { border-top:1px dotted var(--line); padding-top:12px; }
.chat-admin-settings .sc-error:empty { display:none; }
.chat-storage-totals { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px; margin:0; }
.chat-storage-totals > div { border:1px solid var(--line); border-radius:8px; padding:12px; min-width:0; }
.chat-storage-totals dt { color:var(--muted); font-size:13px; }
.chat-storage-totals dd { margin:6px 0 0; font-size:24px; font-weight:600; overflow-wrap:anywhere; }
.chat-storage-filters { display:flex; flex-wrap:wrap; gap:12px; min-width:0; }
.chat-storage-filters > .sc-field { flex:1 1 150px; min-width:0; margin:0; }
.chat-storage-filters > .sc-field:first-child { flex:3 1 240px; }
.chat-storage-inventory-status { margin:0; color:var(--muted); }
.chat-storage-inventory-status:empty { display:none; }
.chat-storage-inventory-status[data-error] { color:var(--red); }
.chat-storage-table-scroll { overflow:auto; min-width:0; max-width:100%; scrollbar-width:thin; }
.chat-storage-files { width:100%; min-width:850px; border-collapse:collapse; }
.chat-storage-files :is(th,td) { padding:8px; vertical-align:middle; font-size:13px; }
.chat-storage-files td:first-child { min-width:160px; max-width:280px; overflow-wrap:anywhere; }
.chat-storage-files td:nth-child(n+3):nth-child(-n+4) { white-space:nowrap; }
.chat-storage-pagination { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chat-storage-pagination > span { flex:1 1 180px; }
.chat-storage-file-details { display:grid; grid-template-columns:minmax(100px,1fr) minmax(0,2fr); gap:8px 16px; margin:0; }
.chat-storage-file-details dd { margin:0; overflow-wrap:anywhere; }
.chat-storage-file-details dt { color:var(--muted); }
.chat-storage-hash { display:block; font-size:12px; overflow-wrap:anywhere; }
@media (max-width:650px) {
  main:has(.chat-content)>header { display:none; }
  .chat-storage-totals { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chat-storage-totals dd { font-size:20px; }
}

/* Backup selection uses the same compact administrative table and modal. */
.backup-manager input.backup-select { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; accent-color: var(--gold); }
.backup-manager tr[hidden] { display: none; }
.backup-manager .backup-name { overflow-wrap: anywhere; }
.backup-toolbar { flex-wrap: wrap; }
.backup-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.backup-toolbar-actions button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.backup-toolbar label { display: grid; gap: 6px; max-width: 280px; }
.backup-confirm { width: min(620px, calc(100vw - 32px)); }
.backup-confirm ul { max-height: 35vh; overflow-y: auto; padding-left: 24px; }
.backup-confirm li { overflow-wrap: anywhere; margin-bottom: 10px; }
.backup-confirm small { display: block; color: var(--muted); }
.backup-error { color: #dfa6a1; min-height: 1.5em; }
.history-intro details { margin-bottom: 16px; }
.history-intro code { overflow-wrap: anywhere; }
.history-filters { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(220px, 2fr); gap: 14px; margin-top: 18px; }
.history-filters label { min-width: 0; }
.history-entry-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.history-entry-heading>div { display: flex; align-items: center; gap: 12px; }
.history-entry-heading h2 { margin: 0; }
.history-entry time, .history-source { font-size: 13px; color: var(--muted); }
.history-entry h3 { margin: 16px 0 10px; font-size: 17px; }
.history-summary, .history-message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.history-original { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 12px; }
.history-original summary, .history-intro summary { cursor: pointer; color: var(--accent); }
.history-commit { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; min-width: 0; }
.history-commit>summary { overflow-wrap: anywhere; }
.history-commit>p { margin-top: 12px; }
.history-message { font: inherit; margin: 12px 0; }
.history-files { margin-top: 12px; }
.history-files li, .history-commit code { overflow-wrap: anywhere; }
.history-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin: 20px 0; }
.history-visuals { margin: 20px 0; }
.history-visuals h4 { margin: 0 0 6px; font-size: 16px; }
.history-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.history-image { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 8px; min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; cursor: zoom-in; }
.history-image:hover { background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
.history-image:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.history-image:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.history-image img { display: block; max-width: 100%; width: auto; height: auto; max-height: 216px; object-fit: contain; }
.history-image span { overflow-wrap: anywhere; text-align: center; font-size: 14px; }
dialog.history-preview { width: min(960px, calc(100vw - 32px)); --ui-window-panel: var(--panel); --ui-window-bar: var(--bg); --client-window-border: var(--line); }
.history-preview .ui-window-body { display: grid; place-items: center; }
.history-preview img { display: block; max-width: 100%; height: auto; max-height: calc(100dvh - 130px); object-fit: contain; }
@media (max-width: 760px) { .history-filters { grid-template-columns: 1fr; } .history-entry-heading>div { flex-wrap: wrap; } }

/* Mobile host navigation never takes space from the conversation as a horizontal list. */
@media (max-width: 900px) {
  #shell { position: fixed; inset: var(--admin-visible-top,0px) 0 auto; height: var(--admin-visible-height,100dvh); display: grid; grid-template-rows: auto minmax(0,1fr); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .mobile-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: max(4px,env(safe-area-inset-top)) 8px 4px; box-sizing: border-box; background: #131a22; border-bottom: 1px solid var(--line); }
  #admin-mobile-audio-slot { flex: 1 1 100%; min-width: 0; }
  #admin-mobile-audio-slot:has(#admin-audio-dock:empty) { display: none; }
  #mobile-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .mobile-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
  .mobile-icon:hover { color: var(--text); background: color-mix(in srgb,var(--text) 7%,transparent); }
  .mobile-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  #admin-navigation { position: fixed; z-index: 40; top: var(--admin-visible-top,0px); bottom: auto; left: 0; width: min(320px,calc(100vw - 44px)); height: var(--admin-visible-height,100dvh); padding: max(16px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom)); transform: translateX(-105%); transition: transform 180ms ease; box-shadow: 8px 0 32px #0006; visibility: hidden; }
  .navigation-open #admin-navigation { transform: translateX(0); visibility: visible; }
  #close-navigation { display: grid; position: absolute; top: max(10px,env(safe-area-inset-top)); right: 8px; }
  #admin-navigation > .wordmark { padding-right: 40px; }
  #admin-navigation > .wordmark small { display: block; }
  #admin-navigation > nav { display: grid; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; margin-top: 16px; }
  #admin-navigation > nav > button { min-height: 40px; white-space: normal; }
  #admin-navigation .aside-bottom { position: static; display: block; margin-top: auto; padding-top: 12px; }
  #admin-navigation .aside-bottom p { display: block; }
  #navigation-backdrop { position: fixed; z-index: 39; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: #0008; }
  #shell > main { width: 100%; height: 100%; min-height: 0; padding-bottom: max(16px,env(safe-area-inset-bottom)); }
  #shell > main:has(.chat-content) { padding: var(--admin-chat-inset,8px); padding-bottom: max(var(--admin-chat-inset,8px),env(safe-area-inset-bottom)); }
  #shell > main:has(.chat-content) > header { display: none; }
  .login { width: min(440px,calc(100% - 24px)); margin: 24px auto; padding: 20px; }
  .login input { font-size: 16px; }
  #content .table-wrap { max-width: 100%; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) { #admin-navigation { transition: none; } }