/* ── Login overlay ── */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--h-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 36px;
  border-radius: 16px;
  background: var(--h-surface);
  border: 1px solid var(--h-hairline);
  min-width: 320px;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.login-logo {
  font-family: var(--h-serif);
  font-size: 32px;
  text-align: center;
  color: var(--h-ink);
}
.login-sub {
  font-family: var(--h-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--h-ink-faint);
  text-align: center;
  margin-bottom: 8px;
}
.login-input {
  padding: 10px 14px;
  border: 1px solid var(--h-hairline);
  border-radius: 8px;
  background: var(--h-bg);
  color: var(--h-ink);
  font-family: var(--h-sans);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.login-input:focus { border-color: var(--h-ink-mute); }
.login-error {
  font-family: var(--h-sans);
  font-size: 13px;
  color: #c44;
  min-height: 18px;
  text-align: center;
}
.login-btn {
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: var(--h-ink);
  color: var(--h-bg);
  font-family: var(--h-serif);
  font-size: 15px;
  cursor: pointer;
  transition: opacity .15s;
}
.login-btn:hover { opacity: 0.85; }

/* ── Export dropdown ── */
.h-header-action-btn {
  background: transparent;
  border: 1px solid var(--h-hairline);
  color: var(--h-ink-mute);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: background .12s, color .12s;
}
.h-header-action-btn:hover { background: var(--h-surface); color: var(--h-ink); }
.h-header-action-btn.active { background: var(--h-surface); color: var(--h-accent); }

.h-room-search-bar {
  display: none;
  padding: 8px 16px;
  border-bottom: 1px solid var(--h-hair-soft);
  background: var(--h-header-bg);
  gap: 8px;
  align-items: center;
}
.h-room-search-bar.visible { display: flex; }
.h-room-search-bar input {
  flex: 1;
  border: 1px solid var(--h-hairline);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: var(--h-sans);
  font-size: 13px;
  background: var(--h-bg);
  color: var(--h-ink);
  outline: none;
}
.h-room-search-bar input:focus { border-color: var(--h-accent); }
.h-room-search-bar .h-room-search-nav {
  display: flex; gap: 4px; align-items: center;
  font-size: 12px; color: var(--h-ink-faint); white-space: nowrap;
}
.h-room-search-bar .h-room-search-nav button {
  background: none; border: none; cursor: pointer;
  color: var(--h-ink-faint); padding: 2px 4px; border-radius: 4px;
}
.h-room-search-bar .h-room-search-nav button:hover { color: var(--h-ink); background: var(--h-surface); }
.h-room-search-results {
  display: none;
  max-height: 50vh;
  overflow-y: auto;
  border-bottom: 1px solid var(--h-hair-soft);
  background: var(--h-bg);
}
.h-room-search-results.visible { display: block; }
.h-room-search-result-item {
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--h-hair-soft);
  transition: background 0.1s;
}
.h-room-search-result-item:hover { background: var(--h-surface); }
.h-room-search-result-item:last-child { border-bottom: none; }
.h-room-search-result-meta {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 12px; margin-bottom: 2px;
}
.h-room-search-result-actor { font-weight: 600; }
.h-room-search-result-time { color: var(--h-ink-faint); }
.h-room-search-result-snippet {
  font-size: 13px; color: var(--h-ink-mute);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.h-room-search-result-snippet mark { background: rgba(211,151,73,0.3); color: inherit; border-radius: 2px; }

.h-export-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--h-surface);
  border: 1px solid var(--h-hairline);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
}
.h-export-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
.h-export-opt {
  background: transparent;
  border: none;
  padding: 7px 16px;
  font-family: var(--h-sans);
  font-size: 13px;
  color: var(--h-ink);
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  white-space: nowrap;
}
.h-export-opt:hover { background: var(--h-surface-hi); }

/* ── Auth settings ── */
.s-auth-error {
  font-family: var(--h-sans);
  font-size: 12px;
  color: #c44;
  min-height: 16px;
  margin-top: 4px;
}
.s-notif-toggle {
  width: 42px;
  height: 24px;
  border-radius: 12px;
  border: 1.5px solid var(--h-hairline);
  background: var(--h-bg);
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s;
}
.s-notif-toggle::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  top: 2px; left: 2px;
  background: var(--h-ink-mute);
  transition: transform .2s, background .2s;
}
.s-notif-toggle.on {
  background: #4d9f9f;
  border-color: #4d9f9f;
}
.s-notif-toggle.on::after {
  transform: translateX(18px);
  background: #fff;
}
.s-logout-btn {
  background: #c44;
  border: none;
  color: #fff;
  font-family: var(--h-serif);
  font-size: 13px;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.s-logout-btn:hover { background: #a33; }


/* ── Responsive mobile ──────────────────────────────── */
#mobile-back { display: none; }

/* ── Settings page ────────────────────────────────────── */
#settings-inner {
  flex: 1; display: none; flex-direction: column; min-height: 0; overflow: hidden;
}
#settings-inner.visible { display: flex; }

.s-page-header {
  padding: 24px 36px 18px;
  border-bottom: 1px solid var(--h-hair-soft);
  background: var(--h-header-bg);
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
}
#s-mobile-back {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; background: none;
  color: var(--h-ink-mute); cursor: pointer; font-size: 20px; flex: 0 0 auto;
}

.s-tabs-row {
  display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid var(--h-hair-soft);
  padding: 0 4px; flex: 0 0 auto;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.s-tabs-row::-webkit-scrollbar { display: none; }
.s-tab {
  position: relative; padding: 12px 16px;
  font-family: var(--h-serif); font-size: 15px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  user-select: none; color: var(--h-ink-mute); font-style: italic;
}
.s-tab.active  { color: var(--h-ink); font-style: normal; }
.s-tab-ul {
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--h-ink); border-radius: 2px;
}
.s-content { flex: 1; overflow-y: auto; padding: 28px 36px; min-height: 0; }
.s-no-agent-banner {
  display: none;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, #c96a3a 10%, var(--h-bg));
  border: 1px solid color-mix(in srgb, #c96a3a 28%, transparent);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: color-mix(in srgb, #c96a3a 80%, var(--h-ink));
  line-height: 1.4;
}
.s-no-agent-banner.visible { display: flex; }
.s-no-agent-banner svg { flex: 0 0 auto; opacity: .8; }
.s-content-inner { max-width: 880px; margin: 0 auto; }

/* Server tab */
.s-server-card {
  background: var(--h-surface); border: 1px solid var(--h-hair-soft);
  border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03);
  margin-bottom: 20px;
}
.s-server-card-header {
  padding: 14px 18px; border-bottom: 1px solid var(--h-hair-soft);
  background: color-mix(in srgb, var(--h-bg) 38%, var(--h-surface));
  display: flex; align-items: baseline; gap: 10px;
}
.s-server-field {
  padding: 14px 18px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--h-hair-soft);
}
.s-server-field:last-child { border-bottom: none; }
.s-server-field-label {
  font-size: 13px; color: var(--h-ink-mute); width: 120px; flex-shrink: 0;
  font-family: var(--h-serif);
}
.s-server-input {
  flex: 1; background: transparent; border: 1px solid var(--h-hairline);
  border-radius: 8px; padding: 7px 11px; font-size: 14px; color: var(--h-ink);
  font-family: var(--h-sans); outline: none; transition: border-color .15s;
}
.s-server-input:focus { border-color: var(--h-ink-mute); }
.s-server-save {
  background: var(--h-ink); color: var(--h-bg); border: none; border-radius: 8px;
  padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: var(--h-sans);
  transition: opacity .15s; flex-shrink: 0;
}
.s-server-save:hover { opacity: .82; }
.s-server-saved {
  font-size: 12px; color: var(--h-ink-faint); font-family: var(--h-serif);
  font-style: italic; flex-shrink: 0; opacity: 0; transition: opacity .3s;
}
.s-server-saved.visible { opacity: 1; }

.s-server-value-hint {
  font-size: 12px; color: var(--h-ink-faint); font-family: var(--h-serif); margin-left: auto;
}
.s-server-value-hint a { color: var(--h-ink-mute); text-underline-offset: 3px; }
.s-server-value-hint a:hover { color: var(--h-ink); }
.s-server-value-hint code {
  font-family: monospace; font-size: 11px; background: var(--h-slip);
  padding: 1px 4px; border-radius: 3px;
}

.s-server-hint {
  padding: 9px 18px 12px;
  font-size: 12px; color: var(--h-ink-faint);
  font-family: var(--h-serif); font-style: italic; line-height: 1.5;
  border-top: 1px solid var(--h-hair-soft);
}
.s-server-hint a { color: var(--h-ink-mute); text-underline-offset: 3px; }
.s-server-hint a:hover { color: var(--h-ink); }

/* Avatar upload zone */
.s-avatar-section {
  padding: 14px 18px 16px; border-bottom: 1px solid var(--h-hair-soft);
  display: flex; flex-direction: column; gap: 12px;
}
.s-avatar-section-label {
  font-size: 13px; color: var(--h-ink-mute); font-family: var(--h-serif);
}
.s-avatar-row {
  display: flex; align-items: center; gap: 14px;
}
.s-avatar-preview {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--h-surface-hi); border: 1px solid var(--h-hair-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.s-avatar-preview img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.s-avatar-drop {
  flex: 1; min-width: 0; border: 1.5px dashed var(--h-hair-soft);
  border-radius: 10px; padding: 12px 16px; text-align: center; cursor: pointer;
  font-family: var(--h-serif); font-size: 13px; color: var(--h-ink-faint);
  transition: border-color .15s, background .15s;
}
.s-avatar-drop:hover, .s-avatar-drop.drag-over {
  border-color: var(--h-ink-mute); background: color-mix(in srgb, var(--h-ink) 4%, transparent);
}
.s-avatar-remove {
  font-size: 12px; color: var(--h-ink-faint); font-family: var(--h-serif);
  font-style: italic; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; background: none; border: none; padding: 0;
  display: none;
}
.s-avatar-remove:hover { color: var(--h-ink-mute); }
.s-avatar-remove.visible { display: inline; }

/* Docs tab */
.s-docs-layout {
  display: flex; gap: 0; height: 100%; max-width: 1100px; margin: 0 auto;
}
.s-docs-sidebar {
  width: 220px; flex-shrink: 0; border-right: 1px solid var(--h-hair-soft);
  padding: 4px 0; overflow-y: auto; display: flex; flex-direction: column;
}
.s-docs-lang-row {
  padding: 10px 14px 8px; border-bottom: 1px solid var(--h-hair-soft);
  flex-shrink: 0;
}
.s-docs-lang-select {
  width: 100%; background: var(--h-bg); border: 1px solid var(--h-hairline); border-radius: 6px;
  padding: 6px 10px; font-size: 12px; cursor: pointer; font-family: var(--h-sans);
  color: var(--h-ink); letter-spacing: .04em; appearance: auto;
}
.s-docs-lang-select:hover { border-color: var(--h-ink-mute); }
.s-docs-lang-select:focus { outline: none; border-color: var(--h-ink); }
.s-docs-file-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.s-docs-file {
  display: block; padding: 9px 18px; font-size: 13px; font-family: var(--h-serif);
  color: var(--h-ink-mute); cursor: pointer; border-radius: 0;
  border-left: 2px solid transparent; transition: color .12s, background .12s;
  line-height: 1.35; text-decoration: none;
}
.s-docs-file:hover { background: color-mix(in srgb, var(--h-surface) 60%, transparent); color: var(--h-ink); }
.s-docs-file.active { color: var(--h-ink); border-left-color: var(--h-ink-mute); background: color-mix(in srgb, var(--h-surface) 60%, transparent); }
.s-docs-body {
  flex: 1; padding: 32px 40px; overflow-y: auto; min-width: 0;
}
.s-docs-empty { font-family: var(--h-serif); font-style: italic; font-size: 14px; color: var(--h-ink-faint); }
.s-docs-body h1 { font-size: 26px; font-family: var(--h-serif); margin-bottom: 18px; line-height: 1.15; }
.s-docs-body h2 { font-size: 18px; font-family: var(--h-serif); margin: 28px 0 10px; color: var(--h-ink); }
.s-docs-body h3 { font-size: 15px; font-family: var(--h-serif); margin: 20px 0 8px; }
.s-docs-body p  { font-size: 14px; line-height: 1.65; color: var(--h-ink-mute); margin-bottom: 12px; }
.s-docs-body li { font-size: 14px; line-height: 1.65; color: var(--h-ink-mute); margin-bottom: 4px; }
.s-docs-body ul, .s-docs-body ol { padding-left: 20px; margin-bottom: 12px; }
.s-docs-body code { font-size: 12.5px; background: var(--h-hairline); padding: 1px 5px; border-radius: 4px; }
.s-docs-body pre { background: color-mix(in srgb, var(--h-ink) 6%, var(--h-surface)); border: 1px solid var(--h-hairline); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin-bottom: 16px; position: relative; }
.s-docs-body pre:has(.h-code-lang) code { padding-top: 14px; }
.s-docs-body .h-code-lang { color: var(--h-ink-faint); }
.s-docs-body pre code { background: none; padding: 0; font-size: 13px; color: var(--h-ink); }
.s-docs-body pre .hljs { color: var(--h-ink); }
.s-docs-body pre .hljs-keyword, .s-docs-body pre .hljs-selector-tag, .s-docs-body pre .hljs-built_in { color: #8c5a42; }
.s-docs-body pre .hljs-string, .s-docs-body pre .hljs-attr, .s-docs-body pre .hljs-addition { color: #7a6832; }
.s-docs-body pre .hljs-number, .s-docs-body pre .hljs-literal { color: #8a5a6e; }
.s-docs-body pre .hljs-comment, .s-docs-body pre .hljs-quote { color: var(--h-ink-faint); font-style: italic; }
.s-docs-body pre .hljs-function .hljs-title, .s-docs-body pre .hljs-title.function_, .s-docs-body pre .hljs-title.class_ { color: #4a7a68; }
.s-docs-body pre .hljs-type, .s-docs-body pre .hljs-params { color: #4a7a68; }
.s-docs-body pre .hljs-property, .s-docs-body pre .hljs-attribute { color: var(--h-ink-mute); }
html.dark .s-docs-body pre .hljs-keyword, html.dark .s-docs-body pre .hljs-selector-tag, html.dark .s-docs-body pre .hljs-built_in { color: #c2876b; }
html.dark .s-docs-body pre .hljs-string, html.dark .s-docs-body pre .hljs-attr, html.dark .s-docs-body pre .hljs-addition { color: #b59a5e; }
html.dark .s-docs-body pre .hljs-number, html.dark .s-docs-body pre .hljs-literal { color: #c08aa0; }
html.dark .s-docs-body pre .hljs-comment, html.dark .s-docs-body pre .hljs-quote { color: var(--h-ink-faint); }
html.dark .s-docs-body pre .hljs-function .hljs-title, html.dark .s-docs-body pre .hljs-title.function_, html.dark .s-docs-body pre .hljs-title.class_ { color: #6f9f8c; }
html.dark .s-docs-body pre .hljs-type, html.dark .s-docs-body pre .hljs-params { color: #6f9f8c; }
html.dark .s-docs-body pre .hljs-property, html.dark .s-docs-body pre .hljs-attribute { color: #d3c8b4; }
.s-docs-body a { color: var(--h-ink-mute); text-underline-offset: 3px; }
.s-docs-body hr { border: none; border-top: 1px solid var(--h-hair-soft); margin: 24px 0; }
.s-docs-body strong { color: var(--h-ink); }

.s-agents-card {
  background: var(--h-surface); border: 1px solid var(--h-hair-soft);
  border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.s-agents-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--h-hair-soft);
  background: color-mix(in srgb, var(--h-bg) 38%, var(--h-surface));
}
.s-agents-header-left { display: flex; align-items: baseline; gap: 10px; }

.s-agent-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-bottom: 1px solid var(--h-hair-soft);
  background: transparent; transition: background .15s;
}
.s-agent-row:last-child { border-bottom: none; }
.s-agent-row:hover { background: var(--h-surface-hi); }
.s-agent-row:hover .s-row-actions { opacity: 1; }

.s-agent-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.s-agent-name-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--h-serif); font-size: 17px; color: var(--h-ink); letter-spacing: .002em;
}
.s-agent-sub {
  font-family: var(--h-serif); font-style: italic; font-size: 12.5px; color: var(--h-ink-faint);
}
.s-agent-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--h-ink-mute); font-family: var(--h-sans);
  min-width: 78px; flex-shrink: 0;
}
.s-dot-on {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #7fb98c; box-shadow: 0 0 0 3px color-mix(in srgb, #7fb98c 20%, transparent);
}
.s-dot-off {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  border: 1.4px solid var(--h-ink-faint); opacity: .7;
}
.s-row-actions {
  display: flex; align-items: center; gap: 4px;
  opacity: 0; transition: opacity .15s; min-width: 116px; justify-content: flex-end; flex-shrink: 0;
}
.s-row-actions.show { opacity: 1; }
.s-icon-btn {
  background: transparent; border: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--h-ink-mute); transition: background .12s;
}
.s-icon-btn:hover:not(:disabled) { background: var(--h-hair-soft); }
.s-icon-btn:disabled { opacity: .45; cursor: default; color: var(--h-ink-faint); }
.s-icon-btn.s-ok { color: #7fb98c; }
.s-rename-input {
  padding: 4px 10px; border-radius: 8px; background: var(--h-surface);
  min-width: 180px; font-family: var(--h-serif); font-size: 17px; color: var(--h-ink);
  border: 1.5px solid; outline: none;
}
.s-rename-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.s-confirm-pill {
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, #b35a4b 8%, var(--h-surface));
  border: 1px solid color-mix(in srgb, #b35a4b 30%, var(--h-surface));
}
.s-add-panel {
  background: color-mix(in srgb, var(--h-bg) 30%, var(--h-surface));
  padding: 0 22px; display: flex; flex-direction: column; gap: 18px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .2s ease-out, opacity .2s ease-out, padding .2s ease-out;
  border-top: 0px solid transparent;
}
.s-add-panel.open {
  max-height: 700px; opacity: 1; padding: 20px 22px 22px;
  border-top: 1px solid var(--h-hair-soft);
}
.s-panel-header { display: flex; align-items: center; gap: 12px; }
.s-field-group-row { display: flex; gap: 26px; flex-wrap: wrap; }
.s-field-group { display: flex; flex-direction: column; gap: 7px; min-width: 240px; }
.s-field-hint { font-size: 11.5px; color: var(--h-ink-faint); font-family: var(--h-sans); }
.s-name-input {
  padding: 8px 12px; border-radius: 10px; background: var(--h-surface);
  border: 1px solid var(--h-hair-soft); height: 36px;
  font-family: var(--h-serif); font-size: 15px; color: var(--h-ink);
  outline: none; min-width: 240px; transition: border-color .12s;
}
select.s-name-input {
  font-size: 13px; height: 34px; padding: 6px 10px; min-width: auto;
}
.s-name-input::placeholder { color: var(--h-ink-faint); font-style: italic; }
.s-name-input:focus { border-color: var(--h-ink-mute); }
.s-os-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.s-os-pill {
  padding: 8px 14px; border-radius: 10px; font-family: var(--h-sans); font-size: 13px;
  letter-spacing: .005em; cursor: pointer; border: 1px solid var(--h-hair-soft);
  color: var(--h-ink-mute); background: transparent; transition: border-color .12s, color .12s, background .12s;
}
.s-os-pill.active { border-color: var(--h-ink); color: var(--h-ink); background: var(--h-surface); }
.s-cmd-slip {
  position: relative; background: var(--h-slip); border: 1px solid var(--h-hairline);
  border-radius: 10px; padding: 14px 56px 14px 18px;
  font-family: 'ui-monospace', 'Cascadia Code', 'JetBrains Mono', Menlo, monospace;
  font-size: 13.5px; line-height: 1.5; color: var(--h-ink); letter-spacing: .005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 -1px 0 rgba(120,90,60,.06);
}
.s-host-row {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--h-hairline) 18%, var(--h-surface));
  border: 1px solid var(--h-hairline); border-radius: 8px;
  padding: 6px 10px 6px 14px;
}
.s-host-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--h-ink-faint); font-family: var(--h-sans); flex-shrink: 0;
}
.s-host-value {
  flex: 1; font-size: 13px; font-family: 'ui-monospace', monospace;
  color: var(--h-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-cmd-dollar { color: var(--h-ink-faint); margin-right: 10px; user-select: none; }
.s-cmd-copy {
  position: absolute; top: 8px; right: 8px; background: var(--h-surface);
  color: var(--h-ink-mute); border: 1px solid var(--h-hair-soft);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: color .2s;
}
.s-cmd-copy:hover { background: var(--h-surface-hi); }
.s-cmd-copy.copied { color: #7fb98c; }
.s-waiting-pill {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--h-hair-soft) 50%, var(--h-surface));
  border: 1px solid var(--h-hair-soft);
}
@keyframes s-spin { to { transform: rotate(360deg); } }
.s-spinner { width: 15px; height: 15px; animation: s-spin 1.05s linear infinite; flex-shrink: 0; }
.s-connected-slip {
  border-top: 1px solid var(--h-hair-soft);
  background: color-mix(in srgb, #7fb98c 9%, var(--h-surface));
  padding: 18px 22px; display: flex; flex-direction: column; gap: 12px;
}
.s-connected-slip-top { display: flex; align-items: center; gap: 14px; width: 100%; }
.s-connected-check {
  width: 32px; height: 32px; border-radius: 50%; background: #7fb98c; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px color-mix(in srgb, #7fb98c 26%, transparent); flex-shrink: 0;
}
.s-setup-progress { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0 4px; }
.s-progress-bar { width: 100%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--h-ink) 12%, transparent); overflow: hidden; }
.s-progress-fill { height: 100%; border-radius: 3px; background: #7fb98c; transition: width .4s ease; }
.s-progress-steps { display: flex; flex-direction: column; gap: 4px; }
.s-progress-step { display: flex; align-items: center; gap: 8px; font-family: var(--h-serif); font-size: 13px; color: var(--h-ink-mute); }
.s-progress-step.done { color: var(--h-ink); }
.s-progress-step.active { color: var(--h-ink); font-style: italic; }
.s-step-icon { width: 16px; display: inline-flex; justify-content: center; flex-shrink: 0; }
@keyframes s-flash { from { background: color-mix(in srgb, #7fb98c 14%, var(--h-surface)); } to { background: transparent; } }
.s-just-connected { animation: s-flash .4s linear forwards; }

.h-settings-section {
  border-top: 1px solid var(--h-hair-soft); padding-top: 10px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto;
}
.h-settings-row {
  padding: 10px 12px; border-radius: 8px; background: transparent;
  display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background .12s;
}
.h-settings-row:hover { background: color-mix(in srgb, var(--h-surface) 60%, transparent); }
.h-settings-row.active { background: var(--h-surface); }
.h-settings-section + .h-sidebar-footer { margin-top: 4px; }

/* Hamburger / overflow menu — hidden on desktop, shown on mobile */
#mobile-menu-btn { display: none; }
.mobile-overflow-dropdown { display: none; }

@media (max-width: 680px) {
  #refresh-btn { display: flex; }
  body { position: relative; overflow: hidden; }

  #sidebar {
    position: absolute; inset: 0;
    width: 100%; height: 100dvh; z-index: 20;
    transform: translateX(0);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  body.in-chat #sidebar {
    transform: translateX(-30%);
    pointer-events: none;
    opacity: .3;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  }

  #main {
    position: absolute; inset: 0;
    height: 100dvh;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    z-index: 21;
  }
  body.in-chat #main {
    transform: translateX(0);
  }

  #chat-header {
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top));
    gap: 8px;
    min-height: 52px;
    position: relative; /* anchor for overflow dropdown */
  }

  #mobile-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: none; background: none;
    color: var(--h-ink-mute);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 22px;
    padding: 0;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-back:active { background: var(--h-surface-hi); }

  .h-room-name { font-size: 17px; }
  .h-room-tagline { display: none; }
  .h-new-room-btn { font-size: 11px; padding: 4px 10px; }

  #messages { padding: 12px 0 8px; }

  .h-msg-body { max-width: calc(100vw - 90px); }

  #composer { padding: 8px 10px calc(12px + env(safe-area-inset-bottom)); }
  .s-content { padding: 18px 14px; }
  .s-field-group { min-width: 100%; }
  .s-name-input { min-width: 0; width: 100%; }
  .s-agent-status { display: none; }
  #s-mobile-back { display: flex; }

  /* Mobile: workspace panel full-width overlay */
  #workspace-panel.open {
    position: fixed;
    inset: 0;
    z-index: 30;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  #workspace-panel.open #ws-drag-handle { display: none; }

  /* Mobile: hide less critical header buttons — they live in overflow menu instead */
  .h-add-participant,
  .h-header-action-btn[title="Search in room"],
  .h-header-action-btn[title="Export conversation"],
  .h-compact-btn { display: none !important; }

  /* Mobile: overflow menu button (⋮) */
  #mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: none; background: none;
    color: var(--h-ink-mute);
    cursor: pointer;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 10px;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-menu-btn:active { background: var(--h-surface-hi); }

  /* Mobile overflow dropdown */
  .mobile-overflow-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    right: 8px;
    z-index: 50;
    background: var(--h-surface);
    border: 1px solid var(--h-hairline);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    padding: 6px;
    min-width: 160px;
  }
  .mobile-overflow-dropdown.open { display: block; }
  .mob-overflow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--h-ink);
    font-family: var(--h-sans);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background .1s;
  }
  .mob-overflow-item:active,
  .mob-overflow-item:hover { background: var(--h-surface-hi); }

  /* Mobile: sidebar overlay shadow when visible (not in chat) */
  body:not(.in-chat) #sidebar {
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
  }

  /* Mobile: settings in room — better spacing */
  #settings-inner.visible { padding-bottom: 40px; }

  /* Mobile: automation form scroll fix */
  .auto-card { max-width: 100%; overflow-x: hidden; }
  .auto-cond-row { flex-wrap: wrap; }
  .auto-cond-row .auto-cond-sel { min-width: 90px; }
  .auto-cond-row .auto-cond-val { min-width: 100px; }

  /* Mobile: enter-send on by default */
  #enter-send-toggle.active { background: var(--h-surface-hi); }

  /* Mobile: touch target minimum 44pt for key actions */
  .h-header-seal {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .h-ws-toggle {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }
  .h-room-row {
    min-height: 52px;
  }
  .h-room-content {
    padding: 12px 10px;
  }
  /* Composer send button — bigger touch target */
  #send-btn {
    width: 44px; height: 44px;
    border-radius: 10px;
  }
}
.h-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: oklch(0.28 0.02 50); color: oklch(0.92 0.01 60); font-family: var(--h-sans);
  font-size: 13px; padding: 8px 18px; border-radius: 8px; z-index: 9999;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
html.dark .h-toast { background: oklch(0.38 0.02 55); }
.h-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.h-toast.h-toast-error { background: oklch(0.38 0.12 25); }
html.dark .h-toast.h-toast-error { background: oklch(0.42 0.12 25); }

/* ── Automation tab ─────────────────────────────────────────────────────────── */
.auto-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.auto-section-label {
  font-family: var(--h-sans); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--h-ink-faint); font-weight: 500;
}
.auto-card {
  background: var(--h-surface); border: 1px solid var(--h-hair-soft);
  border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.auto-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--h-hair-soft);
  background: color-mix(in srgb, var(--h-bg) 38%, var(--h-surface));
}
.auto-row { transition: background .12s; }
.auto-row:last-child { border-bottom: none !important; }
.auto-row:hover { background: var(--h-surface-hi); }
.auto-row:hover .auto-row-actions { opacity: 1 !important; }

/* Toggle */
.auto-toggle-btn { display: inline-block; transition: background .15s; }

/* Pill button (Connect Slack, add new) */
.auto-pill-btn {
  background: var(--h-ink); color: var(--h-bg); border: none; cursor: pointer;
  padding: 7px 16px; border-radius: 999px; font-family: var(--h-sans); font-size: 13px;
}
.auto-pill-btn:hover { opacity: .88; }

/* Outline button (Retry) */
.auto-outline-btn {
  background: transparent; border: 1px solid var(--h-hair-soft); cursor: pointer;
  padding: 6px 14px; border-radius: 999px; font-family: var(--h-sans); font-size: 13px;
  color: var(--h-ink-mute);
}

/* Small inline button (Cancel, Delete confirm) */
.auto-small-btn {
  background: transparent; border: 1px solid var(--h-hair-soft); cursor: pointer;
  padding: 5px 12px; border-radius: 7px; font-family: var(--h-sans); font-size: 12px;
  color: var(--h-ink-mute);
}
.auto-small-btn:hover { background: var(--h-surface-hi); }

/* Cancel/Save button pair in forms */
.auto-cancel-btn {
  background: transparent; color: var(--h-ink-mute); border: 1px solid var(--h-hair-soft);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: var(--h-sans); font-size: 13px;
}
.auto-save-btn {
  background: var(--h-ink); color: var(--h-bg); border: none;
  padding: 8px 22px; border-radius: 8px; cursor: pointer; font-family: var(--h-sans); font-size: 13px;
}
.auto-save-btn:disabled, .auto-cancel-btn:disabled { opacity: .5; cursor: default; }

/* Token input */
.auto-token-input {
  height: 36px; padding: 8px 12px; border-radius: 8px; box-sizing: border-box;
  background: color-mix(in srgb, var(--h-bg) 30%, var(--h-surface));
  border: 1px solid var(--h-hair-soft); font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; color: var(--h-ink-faint); width: 100%; outline: none;
}
.auto-token-input:focus { border-color: var(--h-ink-mute); }

/* Form inputs */
.auto-field-input {
  padding: 9px 13px; border-radius: 8px; box-sizing: border-box;
  background: color-mix(in srgb, var(--h-bg) 30%, var(--h-surface));
  border: 1px solid var(--h-hair-soft); font-family: var(--h-serif); font-size: 16px;
  color: var(--h-ink); width: 100%; outline: none;
}
.auto-field-input:focus { border-color: var(--h-ink-mute); }
.auto-field-err { font-family: var(--h-sans); font-size: 12px; color: #b35a4b; display: none; }
.auto-field-err:not(:empty) { display: block; }

/* Select */
.auto-sel {
  height: 34px; padding: 7px 11px; border-radius: 8px; box-sizing: border-box;
  background: var(--h-surface); border: 1px solid var(--h-hair-soft);
  font-family: var(--h-sans); font-size: 13px; color: var(--h-ink);
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}
.auto-sel:focus { border-color: var(--h-ink-mute); }

/* Fake select (display-only, e.g. Integration: Slack) */
.auto-fake-select {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px;
  border-radius: 8px; height: 34px; box-sizing: border-box;
  background: var(--h-surface); border: 1px solid var(--h-hair-soft);
  font-family: var(--h-sans); font-size: 13px; color: var(--h-ink-mute);
  cursor: default; user-select: none;
}

/* Condition builder */
.auto-conds-wrap {
  background: color-mix(in srgb, var(--h-bg) 25%, var(--h-surface));
  border: 1px solid var(--h-hair-soft); border-radius: 8px; padding: 2px 10px;
}
.auto-cond-row {
  display: flex; gap: 7px; align-items: center; padding: 7px 0;
}
.auto-cond-sel {
  padding: 6px 10px; border-radius: 7px; height: 32px; box-sizing: border-box;
  background: var(--h-surface); border: 1px solid var(--h-hair-soft);
  font-family: var(--h-sans); font-size: 13px; color: var(--h-ink);
  cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px;
}
.auto-cond-val {
  flex: 1; padding: 6px 10px; border-radius: 7px; height: 32px; box-sizing: border-box;
  background: color-mix(in srgb, var(--h-bg) 30%, var(--h-surface));
  border: 1px solid var(--h-hair-soft); font-family: ui-monospace, Menlo, monospace;
  font-size: 12.5px; color: var(--h-ink); outline: none;
}
.auto-cond-val:focus { border-color: var(--h-ink-mute); }
.auto-cond-remove {
  background: transparent; border: none; color: var(--h-ink-faint); cursor: pointer;
  width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.auto-cond-remove:hover { background: var(--h-surface-hi); color: var(--h-ink-mute); }

/* Prompt textarea */
.auto-prompt-ta {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 8px;
  min-height: 112px; resize: vertical;
  background: color-mix(in srgb, var(--h-bg) 30%, var(--h-surface));
  border: 1px solid var(--h-hair-soft); font-family: var(--h-serif); font-size: 14.5px;
  color: var(--h-ink); line-height: 1.65; outline: none;
}
.auto-prompt-ta:focus { border-color: var(--h-ink-mute); }

/* Variable chips */
.auto-var-chip {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 6px;
  background: color-mix(in srgb, var(--h-ink) 7%, var(--h-surface));
  border: 1px solid var(--h-hair-soft); font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: var(--h-ink-mute); cursor: pointer; user-select: none;
}
.auto-var-chip:hover { background: color-mix(in srgb, var(--h-ink) 14%, var(--h-surface)); }

/* Form section divider */
.auto-form-divider {
  display: flex; align-items: center; gap: 10px;
}
.auto-form-divider > span:first-child,
.auto-form-divider > span:last-child {
  flex: 1; height: 1px; background: var(--h-hair-soft); display: block;
}

/* Model checklist checkboxes — custom appearance for dark mode visibility */
.s-model-cb {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0; cursor: pointer;
  border: 1.5px solid var(--h-ink-mute);
  background: transparent;
  transition: background .1s, border-color .1s;
  position: relative;
}
.s-model-cb:checked {
  background: var(--h-ink);
  border-color: var(--h-ink);
}
.s-model-cb:checked::after {
  content: '';
  position: absolute; left: 3px; top: 1px;
  width: 5px; height: 8px;
  border: 2px solid var(--h-bg);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* usage stats panel */
.usage-stat-card {
  background: var(--h-surface-raised, var(--h-surface));
  border: 1px solid var(--h-rule);
  border-radius: 5px;
  padding: 7px 9px;
}
.usage-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--h-ink);
  line-height: 1.1;
  margin-bottom: 2px;
  font-family: var(--h-mono);
}
.usage-stat-label {
  font-size: 10px;
  color: var(--h-ink-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* usage — topbar & segmented controls */
.usage-topbar { display:flex; justify-content:space-between; align-items:center; gap:7px; margin-bottom:10px; flex-wrap:wrap; max-width:720px; }
.usage-seg { display:inline-flex; background:var(--h-surface); border:1px solid var(--h-rule); border-radius:5px; padding:2px; gap:2px; }
.usage-seg-btn { background:none; border:none; padding:3px 7px; font-size:11px; color:var(--h-ink-faint); border-radius:4px; cursor:pointer; font-family:inherit; transition:all .12s; }
.usage-seg-btn:hover { color:var(--h-ink); }
.usage-seg-btn.active { background:var(--h-surface-raised, rgba(255,255,255,.06)); color:var(--h-ink); box-shadow:0 1px 2px rgba(0,0,0,.15); }

/* usage — cards grid */
.usage-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:6px; margin-bottom:11px; max-width:720px; }
.usage-cards .usage-stat-card { padding:7px 8px; }
.usage-cards .usage-stat-label { margin-bottom:3px; }
.usage-cards .usage-stat-value { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usage-stat-card--wide { grid-column: span 2; }

/* usage — heatmap */
/* columns are fluid (set inline from WEEKS) so the full heatmap fits any width — capped at 720px
   so desktop keeps its ~25px cells while mobile shrinks to fit instead of overflowing the panel */
.usage-heatmap { display:grid; grid-template-rows:repeat(7,auto); grid-auto-flow:column; gap:3px; margin:2px 0 9px; max-width:720px; }
/* aspect-ratio:1 on a child of an auto-row grid track is sized from its resolved width, not a
   zero-height track — evergreen browsers keep the cells square. Verified visually. Not a finding. */
.usage-cell { width:100%; aspect-ratio:1; border-radius:5px; background:var(--h-hair-soft); position:relative; cursor:default; }
.usage-cell-1 { background:rgba(82,138,245,.35); }
.usage-cell-2 { background:rgba(82,138,245,.55); }
.usage-cell-3 { background:rgba(82,138,245,.78); }
.usage-cell-4 { background:rgba(82,138,245,1); }
.usage-cell[data-tip]::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--h-ink); color:var(--h-bg); padding:4px 8px; border-radius:5px; font-size:11px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .1s; z-index:99; }
.usage-cell[data-tip]:hover::after { opacity:1; }

/* usage — footer comparison */
.usage-footer { font-size:11px; color:var(--h-ink-faint); font-style:italic; padding-top:2px; }
.usage-footer em { color:var(--h-ink); font-style:italic; }

/* usage — model table */
.usage-table { width:100%; border-collapse:collapse; font-size:12px; }
.usage-table th { text-align:right; padding:4px 5px; font-weight:500; color:var(--h-ink-faint); border-bottom:1px solid var(--h-rule); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
.usage-table td { text-align:right; padding:5px; border-bottom:1px solid var(--h-rule); color:var(--h-ink-faint); }
.usage-table .usage-model-name { text-align:left; font-family:var(--h-mono); font-size:11px; color:var(--h-ink); }
.usage-table .usage-model-cost { color:var(--h-ink); }