:root {
  color-scheme: dark;
  --bg: #212121;
  --sidebar: #171717;
  --ink: #ececec;
  --muted: #8f8f8f;
  --line: rgba(255, 255, 255, 0.1);
  --hover: rgba(255, 255, 255, 0.07);
  --active: rgba(255, 255, 255, 0.1);
  --accent: #ececec;
  --accent-ink: #0d0d0d;
  --danger: #f87171;
  --ok: #4ade80;
  --warn: #f59e0b;
  --user: #161616;
  --assistant: #2a2a2a;
  --assistant-line: rgba(255, 255, 255, 0.12);
  --code: #0d0d0d;
  --elev: #2f2f2f;
  --elev-hover: #3a3a3a;
  --btn: #fff;
  --btn-ink: #111;
  --send-off: #565656;
  --link: #7ab8ff;
  --danger-bg: #3a221c;
  --current: #2a2a2a;
  --composer: #2f2f2f;
  --composer-line: #3a3a3a;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --syn-comment: #8f8f8f;
  --syn-keyword: #c4a5e8;
  --syn-string: #8ecf9a;
  --syn-number: #e0a06a;
  --syn-fn: #7ab8ff;
  --syn-cls: #e6c07b;
  --syn-builtin: #7ec8c8;
  --syn-tag: #e08a8a;
  --syn-punct: #b0b0b0;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --sidebar: #fafafa;
  --ink: #3e3d3a;
  --muted: #6e6c66;
  --line: rgba(24, 22, 18, 0.08);
  --hover: rgba(24, 22, 18, 0.04);
  --active: rgba(24, 22, 18, 0.07);
  --accent: #5c5a54;
  --accent-ink: #faf9f6;
  --danger: #c24141;
  --ok: #2a8f55;
  --warn: #d97706;
  --user: #e2e0d8;
  --assistant: #f4f4f4;
  --assistant-line: rgba(24, 22, 18, 0.14);
  --code: #fff;
  --elev: #fff;
  --elev-hover: #f2f2f2;
  --btn: #5c5a54;
  --btn-ink: #faf9f6;
  --send-off: #d6d6d6;
  --link: #1b63c2;
  --danger-bg: #fdeeee;
  --current: #f0f0f0;
  --composer: #fff;
  --composer-line: rgba(24, 22, 18, 0.1);
  --shadow: 0 10px 24px rgba(24, 22, 18, 0.07);
  --syn-comment: #6e6c66;
  --syn-keyword: #6d28d9;
  --syn-string: #2a8f55;
  --syn-number: #b45309;
  --syn-fn: #1b63c2;
  --syn-cls: #a16207;
  --syn-builtin: #0e7490;
  --syn-tag: #c24141;
  --syn-punct: #6e6c66;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; height: 100dvh; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, strong { font-weight: 600; }
a { color: var(--ink); }
code, pre { font-family: var(--mono); font-size: 0.9em; }

.login-shell {
  min-height: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  background: var(--bg);
}
.login-card {
  width: min(26rem, 92vw);
  padding: 2.85rem 2rem 2rem;
  background: var(--sidebar);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  position: relative;
}
.login-copy {
  margin: 0;
  padding: 0.7rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-align: center;
  opacity: 0.7;
}
.login-copy a {
  color: inherit;
  text-decoration: none;
}
.login-copy a:hover,
.login-copy a:focus-visible {
  text-decoration: underline;
}
.login-brand {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  margin: 0 0 1.35rem;
}
.login-brand h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.2;
}
.login-brand .brand-mark {
  width: 5.5rem;
  height: 5.5rem;
}
.login-slogan {
  margin: 0;
  max-width: 16rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: center;
}
.login-card > .login-theme {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
}
.login-card > .login-help {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 2;
  display: grid;
  place-items: center;
}
.login-help i {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}
.login-card .login-help[data-tip]::after,
.login-card .login-theme[data-tip]::after {
  bottom: auto;
  top: calc(100% + 0.5rem);
  background: color-mix(in srgb, var(--elev) 88%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  border-radius: 0.5rem;
  padding: 0.28rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.login-card .login-help[data-tip]::after {
  left: 0;
  right: auto;
}
.login-card .login-theme[data-tip]::after {
  right: 0;
  left: auto;
}
.login-card .login-help[data-tip]:hover::after,
.login-card .login-help[data-tip]:focus-visible::after,
.login-card .login-theme[data-tip]:hover::after,
.login-card .login-theme[data-tip]:focus-visible::after {
  opacity: 0.92;
}
.login-about-body {
  display: grid;
  gap: 0.75rem;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}
.login-about-body p {
  margin: 0;
}
.login-about-lede {
  font-size: 0.96rem;
}
.login-about-note {
  margin-top: 0.15rem !important;
}
.login-about-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.45rem;
}
.login-about-foot {
  margin-top: 0.15rem !important;
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}
.login-about-foot a {
  color: inherit;
}
.login-altcha {
  display: grid;
  gap: 0.45rem;
  margin: 0.15rem 0 0.1rem;
}
.login-altcha-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.login-altcha-req {
  color: var(--danger);
  font-weight: 700;
}
.login-altcha altcha-widget {
  --altcha-border-width: 1px;
  --altcha-border-radius: 0.75rem;
  --altcha-color-base: color-mix(in srgb, var(--elev) 88%, var(--bg));
  --altcha-color-border: var(--line);
  --altcha-color-text: var(--ink);
  --altcha-color-border-focus: color-mix(in srgb, var(--ink) 28%, var(--line));
  --altcha-color-error-text: var(--danger);
  --altcha-color-footer-bg: transparent;
  --altcha-max-width: 100%;
  display: block;
  width: 100%;
  min-height: 2.65rem;
}
html[data-theme="light"] .login-altcha altcha-widget {
  --altcha-color-base: #fff;
}
.error-card .error-copy {
  text-align: center;
  margin: 0 0 1.25rem;
}
.error-card .error-code {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.error-card h2 {
  margin: 0 0 0.45rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.error-card .lede {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin: 0;
}
.error-technical {
  margin: 0 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--elev) 88%, var(--bg));
  overflow: hidden;
  text-align: left;
}
.error-technical summary {
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
}
.error-technical summary::-webkit-details-marker {
  display: none;
}
.error-technical pre {
  margin: 0;
  padding: 0.75rem 0.85rem 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 16rem;
  overflow: auto;
}
.settings-switch-row {
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--elev) 92%, var(--bg));
  transition: border-color 0.15s ease, background 0.15s ease;
}
.settings-switch-row:hover {
  border-color: color-mix(in srgb, var(--ink) 18%, var(--line));
}
.settings-switch-row:has(.switch-input:checked) {
  border-color: color-mix(in srgb, var(--accent, #2f6fed) 35%, var(--line));
  background: color-mix(in srgb, var(--accent, #2f6fed) 8%, var(--elev));
}
.settings-switch-row .switch {
  margin-top: 0.12rem;
}
.settings-switch-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  flex: 1;
}
.settings-switch-hint {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}
.settings-switch-row .switch-label {
  font-weight: 650;
  font-size: 0.9rem;
}
.eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.lede { color: var(--muted); }
.stack { display: grid; gap: 0.9rem; }
label { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.82rem; }
input, select, textarea, button {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
}
textarea { width: 100%; resize: none; }
button {
  background: var(--btn);
  color: var(--btn-ink);
  border-color: var(--btn);
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
button.danger, button.ghost.danger { color: var(--danger); border-color: transparent; }
a.btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
  background: var(--btn);
  color: var(--btn-ink);
  border: 1px solid var(--btn);
  padding: 0.48rem 0.95rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.2;
  cursor: pointer;
}
a.btn:hover,
.btn:hover { filter: brightness(1.06); }
a.btn-quiet,
.btn-quiet {
  background: var(--elev);
  color: var(--ink);
  border-color: var(--line);
}
a.btn-quiet:hover,
.btn-quiet:hover { background: var(--hover); filter: none; }
.banner.error {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
}
.banner.ok {
  background: color-mix(in srgb, var(--ok) 16%, var(--elev));
  border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line));
  padding: 0.6rem 0.8rem;
  border-radius: 0.75rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app {
  display: grid;
  grid-template-columns: 16.25rem 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.sidebar-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  z-index: 5;
}
.sidebar {
  background: var(--sidebar);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 0.55rem 0.55rem 0.65rem;
  gap: 0.15rem;
  flex: 1 1 auto;
  width: 100%;
}
.sidebar-collapse {
  display: none;
  position: absolute;
  top: 1.35rem;
  right: 0;
  z-index: 55;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--elev);
  color: var(--muted);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ink) 16%, transparent);
  transform: translateX(50%);
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.18s ease;
}
.sidebar-collapse:hover,
.sidebar-collapse:focus-visible {
  color: var(--ink);
  background: var(--panel, var(--elev));
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 22%, transparent);
}
.sidebar-collapse-arrow {
  display: block;
  width: 0.58rem;
  height: 0.58rem;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6 9 12l6 6'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6 9 12l6 6'/%3E%3C/svg%3E");
  transition: transform 0.18s ease;
}
.sidebar-rail,
.sidebar-rail-fly {
  display: none;
}
@media (min-width: 801px) {
  .sidebar-collapse {
    display: grid;
  }
  .app:has(.sidebar.is-collapsed) {
    grid-template-columns: 4rem 1fr;
  }
  .sidebar.is-collapsed ~ .sidebar-collapse .sidebar-collapse-arrow {
    transform: scaleX(-1);
  }
  .sidebar.is-collapsed {
    padding: 1.025rem 0.3rem 0.55rem;
    align-items: center;
  }
  .sidebar.is-collapsed .sidebar-top {
    justify-content: center;
    padding: 0;
  }
  .sidebar.is-collapsed .brand {
    width: auto;
    padding: 0;
    justify-content: center;
    position: relative;
  }
  .sidebar.is-collapsed .brand:hover {
    background: transparent;
  }
  .sidebar.is-collapsed .brand-mark {
    width: 2rem;
    height: 2rem;
  }
  .sidebar.is-collapsed .brand-copy,
  .sidebar.is-collapsed .side-actions,
  .sidebar.is-collapsed .conv-bulk-bar,
  .sidebar.is-collapsed .conv-list,
  .sidebar.is-collapsed .sidebar-foot {
    display: none !important;
  }
  .sidebar.is-collapsed .sidebar-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 0.55rem 0 0;
  }
  .sidebar-rail-btn {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    padding: 0;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    flex: none;
    position: relative;
  }
  .sidebar-rail-btn:hover,
  .sidebar-rail-btn:focus-visible,
  .sidebar-rail-btn.is-open {
    background: var(--hover);
    color: var(--ink);
  }
  .sidebar-rail-btn i {
    font-size: 1.08rem;
    line-height: 1;
  }
  .sidebar-rail-float-tip {
    position: fixed;
    z-index: 90;
    left: 0;
    top: 0;
    max-width: min(14rem, calc(100vw - 1rem));
    padding: 0.32rem 0.55rem;
    border-radius: 0.45rem;
    border: 1px solid var(--line);
    background: var(--elev);
    color: var(--ink);
    box-shadow: none;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-3px);
    transition:
      opacity 0.12s ease,
      transform 0.12s ease;
  }
  .sidebar-rail-float-tip::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--elev);
    transform: translateY(-50%) rotate(45deg);
  }
  .sidebar-rail-float-tip.is-on {
    opacity: 1;
    transform: translateX(0);
  }
  .sidebar-rail-spacer {
    flex: 1 1 auto;
    min-height: 0.5rem;
  }
  .sidebar-rail-theme-moon {
    display: none;
  }
  html[data-theme="light"] .sidebar-rail-theme-sun {
    display: none;
  }
  html[data-theme="light"] .sidebar-rail-theme-moon {
    display: inline-block;
  }
  .sidebar-rail-profile {
    margin-top: 0.05rem;
  }
  .sidebar-rail-avatar {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  .sidebar-rail-fly {
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 0.55rem;
    bottom: 0.55rem;
    z-index: 70;
    width: min(18.5rem, calc(100vw - 5rem));
    display: none;
    flex-direction: column;
    min-height: 0;
    padding: 0.45rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--elev) 92%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .sidebar-rail-fly:not([hidden]) {
    display: flex;
  }
  .sidebar-rail-fly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: none;
    padding: 0.25rem 0.35rem 0.45rem;
    border-bottom: 1px solid var(--line);
  }
  .sidebar-rail-fly-head strong {
    font-size: 0.88rem;
    font-weight: 650;
  }
  .sidebar-rail-fly-close {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }
  .sidebar-rail-fly-close:hover,
  .sidebar-rail-fly-close:focus-visible {
    background: var(--hover);
    color: var(--ink);
  }
  .sidebar-rail-fly-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.35rem 0.15rem;
    overscroll-behavior: contain;
  }
  .sidebar-rail-fly-body .chat-search {
    display: block;
    width: 100%;
    margin: 0 0 0.45rem;
  }
  .sidebar-rail-fly-body .folder,
  .sidebar-rail-fly-body .date-group {
    margin: 0;
  }
  .sidebar-rail-fly-body .folder-actions,
  .sidebar-rail-fly-body .folder-more,
  .sidebar-rail-fly-body .select-many,
  .sidebar-rail-fly-body .conv-more,
  .sidebar-rail-fly-body .rename-folder,
  .sidebar-rail-fly-body .folder-delete {
    display: none !important;
  }
  .sidebar-rail-fly-body .user-menu-pop {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .sidebar-rail-fly-empty {
    margin: 0.6rem 0.4rem;
    color: var(--muted);
    font-size: 0.82rem;
  }
}
.sidebar-top {
  display: flex;
  align-items: center;
  flex: none;
  width: 100%;
  padding: 0.2rem 0.35rem 0.45rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.65rem;
}
.brand:hover { background: var(--hover); }
.brand-mark,
.avatar {
  display: block;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}
.brand-mark {
  width: 1.85rem;
  height: 1.85rem;
}
.sidebar .brand-mark {
  width: 2.75rem;
  height: 2.75rem;
}
.brand-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 0;
  container-type: inline-size;
}
.brand-text,
.brand-slogan {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.brand-text {
  letter-spacing: 0.05em;
  font-size: 0.88rem;
  font-size: 9.05cqi;
  font-weight: 700;
  line-height: 1.15;
}
.brand-slogan {
  font-size: 0.72rem;
  font-size: 7.55cqi;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--muted);
  line-height: 1.2;
}
.icon-btn {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}
.icon-btn:hover { color: var(--ink); }

.side-actions {
  display: grid;
  gap: 0.18rem;
  flex: none;
  margin: 0.55rem 0.05rem 0.45rem;
  padding: 0.12rem;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 0.95rem;
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
  position: relative;
  z-index: 30;
}
.side-tools {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.1rem;
  padding: 0.08rem 0.12rem;
  position: relative;
  z-index: 1;
}
.side-tool {
  display: grid;
  place-items: center;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
}
.side-tool:hover,
.side-tool.is-on { background: var(--hover); color: var(--ink); }
.side-tools .side-tool-new {
  width: 2.55rem;
  height: 2.55rem;
  margin: -0.55rem 0.05rem;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--elev) 88%, transparent),
    0 8px 20px color-mix(in srgb, var(--ink) 28%, transparent);
  z-index: 2;
  position: relative;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease,
    background 0.16s ease;
}
.side-tools .side-tool-new:hover,
.side-tools .side-tool-new:focus-visible {
  background: var(--btn);
  color: var(--btn-ink);
  filter: brightness(1.12);
  transform: translateY(-2px) scale(1.08);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--elev) 92%, transparent),
    0 0 0 6px color-mix(in srgb, var(--btn) 28%, transparent),
    0 12px 26px color-mix(in srgb, var(--ink) 36%, transparent);
}
.side-tools .side-tool-new:active {
  transform: translateY(0) scale(1.02);
  filter: brightness(1.02);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--elev) 88%, transparent),
    0 5px 14px color-mix(in srgb, var(--ink) 24%, transparent);
}
html[data-theme="light"] .side-tools .side-tool-new {
  background: #f3f1eb;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:
    0 0 0 3px #fff,
    0 6px 16px color-mix(in srgb, var(--ink) 10%, transparent);
}
html[data-theme="light"] .side-tools .side-tool-new:hover,
html[data-theme="light"] .side-tools .side-tool-new:focus-visible {
  background: #ebe7de;
  color: var(--ink);
  filter: none;
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px color-mix(in srgb, var(--ink) 8%, transparent),
    0 10px 22px color-mix(in srgb, var(--ink) 14%, transparent);
}
html[data-theme="light"] .side-tools .side-tool-new:active {
  background: #e4e0d6;
  filter: none;
  box-shadow:
    0 0 0 3px #fff,
    0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent);
}
.side-tools .side-tool-new .side-ico {
  width: 1.05rem;
  height: 1.05rem;
}
.side-tools .side-ico {
  width: 0.9rem;
  height: 0.9rem;
}
.side-tool[data-tip] {
  position: relative;
}
.side-tool.select-many-tool[data-tip]::after,
.side-tool.select-many-tool[data-tip]::before {
  display: none;
}
.side-tool[data-tip]::after,
.side-tool[data-tip]::before {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 20;
}
.side-tool[data-tip]::after {
  content: attr(data-tip);
  top: calc(100% + 0.55rem);
  transform: translateX(-50%) translateY(4px);
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.38rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}
.side-tool[data-tip]::before {
  content: "";
  top: calc(100% + 0.28rem);
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-bottom-color: var(--elev);
}
.side-tools .side-tool:first-child[data-tip]::after {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.side-tools .side-tool:first-child[data-tip]::before {
  left: 1.05rem;
}
.side-tools .side-tool:last-child[data-tip]::after {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}
.side-tools .side-tool:last-child[data-tip]::before {
  left: auto;
  right: 1.05rem;
  transform: translateX(0) translateY(4px);
}
.side-tool[data-tip]:hover::after,
.side-tool[data-tip]:hover::before,
.side-tool[data-tip]:focus-visible::after,
.side-tool[data-tip]:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.side-tools .side-tool:first-child[data-tip]:hover::after,
.side-tools .side-tool:first-child[data-tip]:focus-visible::after,
.side-tools .side-tool:last-child[data-tip]:hover::after,
.side-tools .side-tool:last-child[data-tip]:focus-visible::after {
  transform: translateX(0) translateY(0);
}
.side-tools .side-tool:first-child[data-tip]:hover::before,
.side-tools .side-tool:first-child[data-tip]:focus-visible::before,
.side-tools .side-tool:last-child[data-tip]:hover::before,
.side-tools .side-tool:last-child[data-tip]:focus-visible::before {
  transform: translateX(0) translateY(0);
}
.side-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  border-radius: 0.7rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  justify-content: flex-start;
  text-align: left;
}
.side-row:hover, .side-row.is-current { background: var(--hover); }
.side-ico {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
/* Font Awesome Free 6.7.2 (CC BY 4.0): pen-to-square, magnifying-glass, folder-plus */
.side-ico.compose {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/svg%3E");
}
.side-ico.search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}
.side-ico.library {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h7v7H4V6zm9 0h7v5h-7V6zM4 15h7v5H4v-5zm9 3h7v2h-7v-2zm0-3h7v2h-7v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h7v7H4V6zm9 0h7v5h-7V6zM4 15h7v5H4v-5zm9 3h7v2h-7v-2zm0-3h7v2h-7v-2z'/%3E%3C/svg%3E");
}
.side-ico.spark {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 9.8 8.2 3 9l5.2 4.4L6.6 20 12 16.6 17.4 20l-1.6-6.6L21 9l-6.8-.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 9.8 8.2 3 9l5.2 4.4L6.6 20 12 16.6 17.4 20l-1.6-6.6L21 9l-6.8-.8z'/%3E%3C/svg%3E");
}
.side-ico.folder {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}
.side-ico.folder-plus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M512 416c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l128 0c20.1 0 39.1 9.5 51.2 25.6l19.2 25.6c6 8.1 15.5 12.8 25.6 12.8l160 0c35.3 0 64 28.7 64 64l0 256zM232 376c0 13.3 10.7 24 24 24s24-10.7 24-24l0-64 64 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-64 0 0-64c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 64-64 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l64 0 0 64z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='black' d='M512 416c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l128 0c20.1 0 39.1 9.5 51.2 25.6l19.2 25.6c6 8.1 15.5 12.8 25.6 12.8l160 0c35.3 0 64 28.7 64 64l0 256zM232 376c0 13.3 10.7 24 24 24s24-10.7 24-24l0-64 64 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-64 0 0-64c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 64-64 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l64 0 0 64z'/%3E%3C/svg%3E");
}
.side-ico.select-many {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='7' r='2.25'/%3E%3Cpath d='M11 7h9'/%3E%3Ccircle cx='5.5' cy='17' r='2.25'/%3E%3Cpath d='M11 17h9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='7' r='2.25'/%3E%3Cpath d='M11 7h9'/%3E%3Ccircle cx='5.5' cy='17' r='2.25'/%3E%3Cpath d='M11 17h9'/%3E%3C/svg%3E");
}
.side-ico.star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}
.side-ico.archive {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.54 5.23 19.15 3.55C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5 6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.54 5.23 19.15 3.55C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5 6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'/%3E%3C/svg%3E");
}
.side-ico.chevron {
  width: 0.7rem;
  height: 0.7rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.6 16.6 10 18l6-6-6-6-1.4 1.4L13.2 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.6 16.6 10 18l6-6-6-6-1.4 1.4L13.2 12z'/%3E%3C/svg%3E");
}
details.folder[open] > summary .side-ico.chevron,
details.date-group[open] > summary .side-ico.chevron {
  transform: rotate(90deg);
}
.side-ico.leave {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17l1.4-1.4L8.8 13H20v-2H8.8l2.6-2.6L10 7l-5 5 5 5zM4 19h6v2H4c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v2H4v14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17l1.4-1.4L8.8 13H20v-2H8.8l2.6-2.6L10 7l-5 5 5 5zM4 19h6v2H4c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v2H4v14z'/%3E%3C/svg%3E");
}
.side-ico.person {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 2.3-5 5 2.3 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z'/%3E%3C/svg%3E");
}
.side-ico.lock {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6c0-2.8-2.2-5-5-5S6 3.2 6 6v2H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM8 6c0-1.7 1.3-3 3-3s3 1.3 3 3v2H8V6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6c0-2.8-2.2-5-5-5S6 3.2 6 6v2H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM8 6c0-1.7 1.3-3 3-3s3 1.3 3 3v2H8V6z'/%3E%3C/svg%3E");
}
.side-ico.help {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z'/%3E%3C/svg%3E");
}
.side-ico.key {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
}
.side-ico.file {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
}
.side-ico.chip {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 4h2V2h2v2h4V2h2v2h2c1.1 0 2 .9 2 2v2h2v2h-2v4h2v2h-2v2c0 1.1-.9 2-2 2h-2v2h-2v-2H10v2H8v-2H6c-1.1 0-2-.9-2-2v-2H2v-2h2v-4H2V8h2V6c0-1.1.9-2 2-2zm2 4v8h8V8H8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 4h2V2h2v2h4V2h2v2h2c1.1 0 2 .9 2 2v2h2v2h-2v4h2v2h-2v2c0 1.1-.9 2-2 2h-2v2h-2v-2H10v2H8v-2H6c-1.1 0-2-.9-2-2v-2H2v-2h2v-4H2V8h2V6c0-1.1.9-2 2-2zm2 4v8h8V8H8z'/%3E%3C/svg%3E");
}
.side-ico.people {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}
.side-ico.pulse {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 9h3v11H5V9zm6-5h3v16h-3V4zm6 8h3v8h-3v-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 9h3v11H5V9zm6-5h3v16h-3V4zm6 8h3v8h-3v-8z'/%3E%3C/svg%3E");
}
.side-ico.plug {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 2v5H6.5C5.1 7 4 8.1 4 9.5 4 13 6.5 16 10 16.8V22h4v-5.2c3.5-.8 6-3.8 6-7.3C20 8.1 18.9 7 17.5 7H16V2h-2v5h-4V2H8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 2v5H6.5C5.1 7 4 8.1 4 9.5 4 13 6.5 16 10 16.8V22h4v-5.2c3.5-.8 6-3.8 6-7.3C20 8.1 18.9 7 17.5 7H16V2h-2v5h-4V2H8z'/%3E%3C/svg%3E");
}
.side-ico.dataset {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v3H4V5zm0 5.5h16v3H4v-3zM4 16h10v3H4v-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v3H4V5zm0 5.5h16v3H4v-3zM4 16h10v3H4v-3z'/%3E%3C/svg%3E");
}
.side-ico.data {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6c0-1.66 3.58-3 8-3s8 1.34 8 3-3.58 3-8 3-8-1.34-8-3zm0 4.5c0 1.66 3.58 3 8 3s8-1.34 8-3V9c0 1.66-3.58 3-8 3s-8-1.34-8-3v1.5zm0 4.5c0 1.66 3.58 3 8 3s8-1.34 8-3v-1.5c0 1.66-3.58 3-8 3s-8-1.34-8-3V15z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6c0-1.66 3.58-3 8-3s8 1.34 8 3-3.58 3-8 3-8-1.34-8-3zm0 4.5c0 1.66 3.58 3 8 3s8-1.34 8-3V9c0 1.66-3.58 3-8 3s-8-1.34-8-3v1.5zm0 4.5c0 1.66 3.58 3 8 3s8-1.34 8-3v-1.5c0 1.66-3.58 3-8 3s-8-1.34-8-3V15z'/%3E%3C/svg%3E");
}
.chat-search {
  margin: 0;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
}

.conv-list {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  padding: 0.35rem 0 0.2rem;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.nav-label {
  margin: 0.55rem 0.7rem 0.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}
.conv-item {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--ink);
  padding: 0.12rem 0.1rem 0.12rem 0.45rem;
  border-radius: 0.7rem;
  font-size: 0.88rem;
}
.conv-item:hover { background: var(--hover); }
.conv-item.active { background: var(--active); }
.conv-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  padding: 0.38rem 0.3rem;
}
.conv-title {
  min-width: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item.is-writing .conv-link::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--ok);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
  animation: blink 1s step-end infinite;
}
.conv-item.nested {
  margin-left: 0;
  padding-left: 1.8rem;
}
.conv-more {
  flex: none;
  margin-left: auto;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  opacity: 1;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
.icon-action.more.conv-more::before { content: none; }
.conv-marks {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  margin-right: 0.05rem;
}
.conv-mark {
  width: 0.78rem;
  height: 0.78rem;
  background: var(--muted);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.conv-mark.pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 9V4h1V2H7v2h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 9V4h1V2H7v2h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z'/%3E%3C/svg%3E");
}
.conv-mark.star {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}
.folder.favorites .conv-mark.star { display: none; }
.conv-item.is-renaming .conv-link,
.conv-item.is-renaming .conv-more,
.conv-item.is-renaming .conv-marks { display: none; }
.conv-item.is-renaming .rename-chat {
  display: flex;
  flex: 1;
  min-width: 0;
  padding: 0 0.15rem;
}
.conv-item.is-renaming .rename-chat input {
  width: 100%;
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
}
.muted { color: var(--muted); font-size: 0.85rem; }
.muted.nested, .empty-chats { margin: 0.2rem 0.7rem 0.5rem 1.1rem; }

.folder { border-radius: 0.7rem; min-width: 0; max-width: 100%; }
.date-group { border-radius: 0.7rem; min-width: 0; max-width: 100%; }
.folder.active-folder > summary { background: var(--hover); }
.folder summary,
.date-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  padding: 0.35rem 0.55rem;
  min-height: 2.55rem;
  border-radius: 0.7rem;
  font-size: 0.88rem;
}
.folder summary::-webkit-details-marker,
.date-group summary::-webkit-details-marker { display: none; }
.folder summary:hover,
.date-group summary:hover { background: var(--hover); }
.folder-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-action.select-many {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  opacity: 1;
  color: var(--muted);
  position: relative;
}
.icon-action.select-many:hover,
.icon-action.select-many:focus-visible {
  opacity: 1;
  color: var(--ink);
  background: var(--hover);
}
.icon-action.select-many::before {
  content: "";
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='7' r='2.25'/%3E%3Cpath d='M11 7h9'/%3E%3Ccircle cx='5.5' cy='17' r='2.25'/%3E%3Cpath d='M11 17h9'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='7' r='2.25'/%3E%3Cpath d='M11 7h9'/%3E%3Ccircle cx='5.5' cy='17' r='2.25'/%3E%3Cpath d='M11 17h9'/%3E%3C/svg%3E");
}
.icon-action.select-many[data-tip]::after {
  display: none;
}
.select-many-float-tip {
  position: fixed;
  z-index: 240;
  left: 0;
  top: 0;
  width: max-content;
  max-width: none;
  padding: 0.28rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.select-many-float-tip.is-on {
  opacity: 1;
}
.conv-check {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.15rem 0 0.05rem;
  cursor: pointer;
}
.conv-check input {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  min-height: 1.05rem;
  max-width: 1.05rem;
  max-height: 1.05rem;
  margin: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--elev) 55%, transparent);
  background-image: none;
  box-shadow: none;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
  transform: none;
  transition:
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}
.conv-check input:hover {
  border-color: color-mix(in srgb, var(--link) 70%, var(--ink));
  background-color: color-mix(in srgb, var(--link) 12%, var(--elev));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 14%, transparent);
}
.conv-check input:checked {
  border-color: transparent;
  background-color: var(--link);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.2 6.5 11l5.9-6.4' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0.72rem 0.72rem;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent);
  transform: none;
}
.conv-check input:checked:hover {
  background-color: color-mix(in srgb, var(--link) 88%, var(--ink));
}
.conv-check input:focus-visible {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 28%, transparent);
}
html[data-theme="light"] .conv-check input {
  background-color: color-mix(in srgb, var(--elev) 90%, transparent);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}
html[data-theme="light"] .conv-check input:checked {
  background-color: var(--link);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.6 8.2 6.5 11l5.9-6.4' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.conv-list.is-selecting .conv-check { display: inline-flex; }
.conv-list.is-selecting .conv-more,
.conv-list.is-selecting .folder-more { display: none; }
.conv-list.is-selecting .select-many {
  color: var(--ink);
  background: var(--active);
}
.folder-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.05rem;
  margin-left: auto;
  flex: none;
}
.folder-more {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  flex: none;
  opacity: 1;
}
.conv-list.is-selecting .conv-item { cursor: pointer; }
.conv-list.is-selecting .conv-link { pointer-events: none; }
.sidebar:has(.conv-list.is-selecting) .sidebar-foot {
  display: none;
}
.conv-bulk-bar {
  flex: none;
  z-index: 6;
  margin: 0.15rem 0.2rem 0.35rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--elev) 94%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
}
.conv-bulk-bar[hidden] { display: none; }
.conv-bulk-count {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
  flex: none;
}
.conv-bulk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.conv-bulk-btn:hover:not(:disabled),
.conv-bulk-btn:focus-visible:not(:disabled) {
  background: var(--hover);
}
.conv-bulk-btn:disabled {
  opacity: 0.38;
  cursor: default;
}
.conv-bulk-btn.is-danger {
  color: var(--danger);
}
.conv-bulk-btn.is-danger:hover:not(:disabled),
.conv-bulk-btn.is-danger:focus-visible:not(:disabled) {
  background: var(--danger-bg);
}
.conv-bulk-btn.conv-bulk-cancel {
  color: var(--muted);
}
.conv-bulk-btn[data-tip] {
  position: relative;
}
.conv-bulk-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%) translateY(4px);
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 40;
}
.conv-bulk-btn[data-tip]:hover::after,
.conv-bulk-btn[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.side-ico.trash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}
.folder-count { display: none; }
.folder-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem 0.35rem;
}
.rename-folder { display: flex; gap: 0.25rem; flex: 1; min-width: 8rem; padding: 0.35rem 0.55rem 0.4rem; }
.rename-folder input { padding: 0.25rem 0.4rem; font-size: 0.78rem; }
.folder.is-renaming > summary { display: none; }
.folder.is-renaming > .rename-folder { display: flex; }
button.tiny, .folder-tools a.tiny {
  padding: 0.25rem 0.45rem;
  font-size: 0.72rem;
}
.folder-tools a.tiny {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  color: var(--ink);
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0.2rem;
  padding: 0.4rem 0.15rem 0.15rem;
  border-top: 1px solid var(--line);
  background: var(--sidebar);
  position: relative;
  z-index: 40;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
  width: auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 0.7rem;
  padding: 0.45rem 0.55rem;
  justify-content: flex-start;
}
.user-chip:hover, .user-chip.is-open { background: var(--hover); }
.user-chip-caret {
  margin-left: auto;
  opacity: 0.4;
  transform: rotate(-90deg);
  transition: transform 0.16s ease, opacity 0.16s ease;
}
.user-chip.is-open .user-chip-caret {
  opacity: 0.7;
  transform: rotate(90deg);
}
.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--code);
  flex: none;
  box-shadow: 0 0 0 1px var(--line);
}
.user-name {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-toggle {
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  position: relative;
}
.theme-toggle:hover { background: var(--hover); }
.theme-toggle::before {
  content: "";
  display: block;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
}
html[data-theme="light"] .theme-toggle::before {
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
}
.login-card .theme-toggle.login-help::before {
  content: none;
  display: none;
  mask: none;
  -webkit-mask: none;
  background: none;
}
.theme-toggle[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.38rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}
.theme-toggle[data-tip]:hover::after,
.theme-toggle[data-tip]:focus-visible::after { opacity: 1; }
.user-menu-pop {
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: calc(100% + 0.45rem);
  z-index: 50;
  display: grid;
  gap: 0.45rem;
  max-height: min(42rem, calc(100dvh - 5.5rem));
  overflow: auto;
  padding: 0.45rem;
  background: color-mix(in srgb, var(--elev) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 1.05rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.user-menu-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.7rem 0.7rem;
  border-radius: 0.8rem;
  background: var(--hover);
}
.user-menu-photo {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--code);
  box-shadow: 0 0 0 1px var(--line);
}
.user-menu-who {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}
.user-menu-who strong {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-who span {
  color: var(--muted);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-role {
  flex: none;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.user-menu-role-demo {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent, #2f6fed) 35%, var(--line));
  background: color-mix(in srgb, var(--accent, #2f6fed) 12%, var(--bg));
}
.user-menu-list {
  display: grid;
  gap: 0.12rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.user-menu-out {
  margin: 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line);
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 2.15rem;
  padding: 0.42rem 0.65rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
button.user-menu-item {
  background: transparent;
  color: var(--ink);
  border: 0;
}
.user-menu-item .side-ico {
  width: 1.05rem;
  height: 1.05rem;
  opacity: 0.72;
}
.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--hover);
}
.user-menu-item.is-current {
  background: var(--active);
}
.user-menu-item.is-current .side-ico,
.user-menu-item:hover .side-ico {
  opacity: 1;
}
.user-menu-item.is-leave {
  color: var(--danger);
}
.user-menu-item.is-leave:hover {
  background: var(--danger-bg);
}
.user-menu-item .user-menu-caret {
  margin-left: auto;
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.5;
}
.user-menu-help {
  display: grid;
  min-width: 0;
}
.user-menu-item.is-open .user-menu-caret,
[data-help-menu].is-open .user-menu-caret {
  opacity: 0.85;
}
.user-menu-fly {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 0.08rem;
  min-width: 14.5rem;
  max-width: min(18rem, calc(100vw - 1rem));
  max-height: min(32rem, calc(100dvh - 1.5rem));
  overflow: auto;
  padding: 0.45rem;
  background: color-mix(in srgb, var(--elev) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 1.05rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.user-menu-fly[hidden] { display: none !important; }
.user-menu-subhead {
  margin: 0.35rem 0.35rem 0.1rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.user-menu-subhead:first-child { margin-top: 0.1rem; }
.nav-link { font-size: 0.85rem; color: var(--muted); text-decoration: none; }
.nav-link:hover { color: var(--ink); }

.stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
  position: relative;
}
.chat-stage {
  grid-template-rows: minmax(0, 1fr) auto;
}
.chat-stage > .thread {
  grid-row: 1;
}
.chat-stage > .composer-dock {
  grid-row: 2;
}
.chat-stage > .query-map {
  grid-column: 1;
  grid-row: 1;
}
.stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: min(48rem, 100%);
  margin: 0 auto;
  padding: 0.85rem 0.5rem 0.35rem;
}
.chat-stage .stage-head {
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.7rem 0.15rem;
}
.chat-hero-item {
  width: min(64rem, 100%);
  margin: 0 auto;
  flex: none;
}
.chat-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  width: 100%;
  padding: 0.2rem 0.05rem 0.1rem;
  background: var(--bg);
  border: 0;
  box-shadow: none;
}
.head-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}
.title-form { width: 100%; }
.chat-title-input {
  width: 100%;
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  border-radius: 0;
}
.chat-hero .chat-title-input {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--bg);
  border: 0;
  box-shadow: none;
  padding: 0.2rem 0;
  border-radius: 0;
  appearance: none;
}
.chat-title-input.static {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.chat-title-input:focus {
  outline: none;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--accent);
}
.folder-chip select {
  appearance: none;
  background: var(--hover);
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 14rem;
}
.folder-chip select:hover { color: var(--ink); }
.head-actions { flex: none; }
.runtime { color: var(--muted); font-size: 0.8rem; }
.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--danger);
  margin-right: 0.3rem;
}
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }

.thread {
  list-style: none;
  margin: 0;
  padding: 0.85rem 0.75rem 0.4rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  align-items: stretch;
}
.hero {
  margin: auto auto 18vh;
  text-align: center;
  border: 0;
  color: var(--ink);
  max-width: 32rem;
}
.hero h2 { font-size: 1.85rem; margin: 0 0 0.45rem; letter-spacing: -0.03em; line-height: 1.25; }
.hero-mark {
  display: block;
  width: 6.75rem;
  height: 6.75rem;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}
.hero-fact {
  margin: 2.2rem auto 0;
  padding: 0.7rem 0.95rem 0.8rem;
  max-width: 26rem;
  background: color-mix(in srgb, var(--elev) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 0.95rem;
}
.hero-fact-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.hero-fact-body {
  margin: 0;
  min-height: 2.4em;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: 0.95rem;
  line-height: 1.45;
}

.bubble {
  width: min(64rem, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr) 1.85rem;
  gap: 0.65rem;
  align-items: start;
}
.bubble.user .avatar {
  grid-column: 3;
  grid-row: 1;
}
.bubble.user .bubble-body {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  background: var(--user);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--assistant-line));
  border-radius: 1.35rem;
  padding: 0.7rem 0.85rem;
  max-width: min(36rem, 100%);
  width: fit-content;
  overflow-x: hidden;
}
.bubble.user .bubble-body:has(.file-media),
.bubble.user .bubble-body:has(.file-chips) {
  width: min(28rem, 100%);
  max-width: min(28rem, 100%);
}
.bubble.user.is-editing .bubble-body {
  width: min(36rem, 100%);
}
.bubble.assistant { background: transparent; }
.bubble.assistant .avatar {
  grid-column: 1;
  grid-row: 1;
}
.bubble.assistant .bubble-body {
  grid-column: 2;
  grid-row: 1;
  background: var(--assistant);
  border: 1px solid var(--assistant-line);
  border-radius: 1.35rem;
  padding: 0.7rem 0.9rem 0.55rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}
.avatar {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.15rem;
  overflow: hidden;
}
.who { display: none; }
.bubble-body { min-width: 0; overflow-x: auto; }
.msg-actions {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.45rem;
  opacity: 0.55;
}
.bubble.assistant:hover .msg-actions,
.bubble.user:hover .msg-actions { opacity: 1; }
.icon-action {
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.icon-action:hover { background: var(--hover); color: var(--ink); }
.icon-action::before {
  content: "";
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-action.copy::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E");
}
.icon-action.view::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}
.icon-action.gen-time::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h-4V7h2v4h2v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 11h-4V7h2v4h2v2z'/%3E%3C/svg%3E");
}
.icon-action.mcp-deny::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 2 7v2c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 2.18L19 7.3v1.7c0 4.54-2.92 8.75-7 10.06C7.92 17.75 5 13.54 5 9V7.3l7-3.12zM11 10h2v6h-2v-6zm0-3h2v2h-2V7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 2 7v2c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 2.18L19 7.3v1.7c0 4.54-2.92 8.75-7 10.06C7.92 17.75 5 13.54 5 9V7.3l7-3.12zM11 10h2v6h-2v-6zm0-3h2v2h-2V7z'/%3E%3C/svg%3E");
}
.icon-action.mcp-deny.is-filtered {
  color: var(--warn);
}
.icon-action.regen::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 0 1-9.9 1H5.02A7 7 0 0 0 19 13c0-3.87-3.13-7-7-7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 0 1-9.9 1H5.02A7 7 0 0 0 19 13c0-3.87-3.13-7-7-7z'/%3E%3C/svg%3E");
}
.icon-action.trash::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12v2H6zm2 3h8l-.7 10H8.7L8 10zm3-6h2l1 2h4v2H6V6h4l1-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12v2H6zm2 3h8l-.7 10H8.7L8 10zm3-6h2l1 2h4v2H6V6h4l1-2z'/%3E%3C/svg%3E");
}
.icon-action.edit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
.icon-action.trash:hover { color: var(--danger); }
.icon-action[data-tip] { position: relative; }
.icon-action[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.48rem);
  transform: translateX(-50%) translateY(0.22rem);
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.icon-action[data-tip]:hover::after,
.icon-action[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.icon-action.gen-time[data-tip]::after {
  display: none;
}
.gen-time-float-tip,
.host-chart-float-tip {
  position: fixed;
  z-index: 120;
  left: 0;
  top: 0;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: 0.45rem 0.7rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.gen-time-float-tip.is-on,
.host-chart-float-tip.is-on {
  opacity: 1;
}
.icon-action.copy.is-copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

.query-edit {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.2rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.query-edit-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 5.5rem;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
}
.query-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}
.query-view-pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  line-height: 1.45;
  color: var(--ink);
}
.query-api-view {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 0.15rem 0 0.35rem;
}
.query-api-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.query-api-view .code-block {
  margin: 0.15rem 0 0.25rem;
}
.query-api-tabs {
  margin: 0;
}
.query-api-view .code-block pre {
  margin: 0;
  max-height: min(55vh, 26rem);
  overflow: auto;
  padding: 0.95rem 1.1rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.mcp-deny-wrap {
  position: relative;
  flex: none;
  margin-right: 0.15rem;
  transform: translateX(-0.28rem);
}
.mcp-deny-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 40;
  min-width: 12rem;
  max-height: min(50vh, 18rem);
  overflow: auto;
  padding: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--panel, var(--bg));
  box-shadow: 0 10px 28px color-mix(in srgb, #000 28%, transparent);
  display: grid;
  gap: 0.15rem;
}
.mcp-deny-menu[hidden] { display: none !important; }
.mcp-deny-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.55rem;
  cursor: pointer;
  font-size: 0.88rem;
}
.mcp-deny-item:hover { background: var(--hover); }
.mcp-deny-empty {
  margin: 0;
  padding: 0.5rem 0.55rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.md :first-child { margin-top: 0; }
.md :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4 {
  line-height: 1.3;
  margin: 1.05em 0 0.4em;
}
.md h1 { font-size: 1.35rem; }
.md h2 { font-size: 1.18rem; }
.md p { margin: 0.55em 0; }
.bubble.user .md {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bubble.user .user-plain { margin: 0; }
.md ul, .md ol { padding-left: 1.2rem; margin: 0.45em 0; }
.md li { margin: 0.2em 0; }
.code-block {
  margin: 0.85em 0;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--code);
}
.code-block--paste {
  border-color: color-mix(in srgb, var(--btn) 28%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn) 10%, transparent);
}
.code-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.45rem 0.4rem 0.9rem;
  background: var(--elev);
  color: var(--muted);
  font-size: 0.75rem;
}
.code-block--paste .code-block-head {
  background: color-mix(in srgb, var(--elev) 72%, var(--btn) 8%);
}
.code-lang {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0.72;
}
.code-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.95rem;
  width: auto;
  padding: 0.2rem 0.7rem 0.2rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--sidebar);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.code-copy:hover { background: var(--elev-hover, var(--hover)); color: var(--ink); }
.code-copy-icon {
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}
.code-copy-label { white-space: nowrap; }
.code-copy.is-copied {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  color: var(--ok);
}
.md pre {
  overflow: auto;
  background: var(--code);
  padding: 0.9rem 0.75rem;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.md p code, .md li code {
  background: var(--hover);
  padding: 0.12em 0.38em;
  border-radius: 0.35rem;
}
.md pre code { background: none; padding: 0; }
.code-block .c, .code-block .ch, .code-block .cm, .code-block .cp,
.code-block .cpf, .code-block .c1, .code-block .cs {
  color: var(--syn-comment);
  font-style: italic;
}
.code-block .k, .code-block .kc, .code-block .kd, .code-block .kn,
.code-block .kp, .code-block .kr, .code-block .kt, .code-block .ow {
  color: var(--syn-keyword);
}
.code-block .s, .code-block .sa, .code-block .sb, .code-block .sc, .code-block .dl,
.code-block .sd, .code-block .s2, .code-block .se, .code-block .sh, .code-block .si,
.code-block .sx, .code-block .sr, .code-block .s1, .code-block .ss {
  color: var(--syn-string);
}
.code-block .m, .code-block .mb, .code-block .mf, .code-block .mh,
.code-block .mi, .code-block .mo, .code-block .il {
  color: var(--syn-number);
}
.code-block .nf, .code-block .fm { color: var(--syn-fn); }
.code-block .nc, .code-block .nn, .code-block .ne { color: var(--syn-cls); }
.code-block .nb, .code-block .bp { color: var(--syn-builtin); }
.code-block .na, .code-block .nt { color: var(--syn-tag); }
.code-block .o, .code-block .p { color: var(--syn-punct); }
.code-block .gd { color: var(--danger); }
.code-block .gi { color: var(--ok); }
.code-block .err { color: inherit; background: none; }
.md blockquote {
  margin: 0.6em 0;
  padding: 0.1em 0 0.1em 0.75em;
  border-left: 3px solid var(--line);
  color: var(--muted);
}
.md table {
  border-collapse: collapse;
  width: max(100%, max-content);
  margin: 0.7em 0;
  font-size: 0.92em;
}
.md th, .md td { border: 1px solid var(--line); padding: 0.4rem 0.5rem; vertical-align: top; }
.md thead th { background: var(--elev, var(--hover)); font-weight: 600; }
.md a { color: var(--link); }
.msg-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.8em 0;
}
.msg-cards[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.msg-card {
  display: grid;
  align-content: start;
  gap: 0.32rem;
  min-width: 0;
  padding: 0.9rem 1rem 0.95rem;
  border: 1px solid var(--assistant-line);
  border-radius: 1.05rem;
  background: color-mix(in srgb, var(--elev) 88%, var(--bg));
  box-shadow: var(--shadow);
}
.msg-card--hh {
  border-color: color-mix(in srgb, #d6001c 28%, var(--assistant-line));
  background: color-mix(in srgb, #d6001c 6%, var(--elev));
}
.msg-cards[data-kind="hh"] {
  gap: 0.75rem;
}
.md .msg-card-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.md .msg-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.md .msg-card p {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.45;
}
.md .msg-card p + p { margin-top: 0.35rem; }
.md .msg-card p.msg-card-kicker {
  color: var(--muted);
  font-size: 0.7rem;
}
.msg-card code {
  font-size: 0.84em;
  background: var(--code);
  padding: 0.08em 0.32em;
  border-radius: 0.3rem;
}
.msg-card-link {
  margin-top: 0.25rem;
  color: var(--link);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.msg-card-link:hover { text-decoration: underline; }
.msg-card-meta {
  display: grid;
  gap: 0.22rem;
  margin: 0.1rem 0 0.15rem;
}
.msg-card-meta > div {
  display: grid;
  grid-template-columns: 7.1rem minmax(0, 1fr);
  gap: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.msg-card-meta dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}
.msg-card-meta dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.msg-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.95rem;
  margin: 0.35rem 0 0;
}
.msg-clip {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "body copy";
  align-items: start;
  gap: 0.45rem 0.65rem;
  width: 100%;
  margin: 0.8em 0;
  padding: 0.7rem 0.75rem 0.7rem 0.95rem;
  border: 1px solid var(--assistant-line);
  border-radius: 1.05rem;
  background: color-mix(in srgb, var(--elev) 88%, var(--bg));
  box-shadow: var(--shadow);
}
.msg-clip-body {
  grid-area: body;
  min-width: 0;
}
.msg-clip-head {
  grid-area: copy;
  display: flex;
  justify-content: flex-end;
}
.md .msg-clip-body > :first-child { margin-top: 0; }
.md .msg-clip-body > :last-child { margin-bottom: 0; }
.md .msg-clip-body p {
  margin: 0.35em 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.bubble.user .msg-card,
.bubble.user .msg-clip {
  background: color-mix(in srgb, var(--bg) 55%, var(--user));
}

.bubble.streaming .md::after {
  content: none;
}
.bubble.streaming .stream-now::after {
  content: none;
}
.stream-wait {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.15rem 0 0.35rem;
  color: var(--muted);
  font-size: 0.92rem;
}
.stream-wait-text {
  font-weight: 500;
  color: var(--ink);
  opacity: 0.78;
}
.think-block {
  margin: 0 0 0.85em;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--elev, var(--hover)) 70%, transparent);
  color: var(--muted);
  font-size: 0.88em;
}
.think-block > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.82;
  user-select: none;
}
.think-block > summary::-webkit-details-marker {
  display: none;
}
.think-block > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.15s ease;
}
.think-block[open] > summary::before {
  transform: rotate(90deg);
}
.think-body {
  margin: 0.55rem 0 0.15rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
  color: var(--muted);
}
.stream-log:not(:empty) + .stream-now:not(:empty),
.think-block + .stream-now:not(:empty) {
  margin-top: 0.85em;
  padding-top: 0.85em;
  border-top: 1px solid var(--line);
}
.stream-tool {
  margin: 0.55em 0 0.45em;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--elev, var(--hover));
  color: var(--ink);
  font-size: 0.85em;
}
.stream-tool-title {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.stream-tool-args {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.7rem;
  margin: 0.4rem 0 0;
}
.stream-tool-args dt {
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}
.stream-tool-args dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.stream-error {
  margin: 0.55em 0 0;
  color: var(--danger, #c44);
}
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .stream-wait .mcp-wait-spin { animation: none; opacity: 0.7; }
  .stream-wait .mcp-wait-dots::after { animation: none; content: "…"; }
}

.composer {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem 0 calc(0.45rem + var(--kb, 0px));
  width: min(64rem, 100%);
  margin: 0 auto;
}
.composer-dock {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0 0.75rem 0.15rem;
}
.message-queue {
  width: min(64rem, 100%);
  margin: 0 auto;
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem 0.7rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--elev) 86%, var(--bg));
}
.message-queue[hidden] { display: none !important; }
.message-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.message-queue-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.message-queue-send-now {
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
}
.message-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.message-queue-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.45rem;
  align-items: start;
  padding: 0.45rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  cursor: grab;
}
.message-queue-item.is-selected {
  border-color: color-mix(in srgb, var(--accent, #5b8cff) 55%, var(--line));
  background: color-mix(in srgb, var(--hover) 55%, var(--bg));
}
.message-queue-item.is-dragging {
  opacity: 0.45;
}
.message-queue-item.is-drag-over {
  border-color: var(--line);
  box-shadow: inset 0 0 0 1px var(--line);
}
.message-queue-handle {
  width: 1.1rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  user-select: none;
  cursor: grab;
}
.message-queue-body {
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.88rem;
  line-height: 1.35;
}
.message-queue-item.is-editing .message-queue-body {
  display: none;
}
.message-queue-edit {
  width: 100%;
  min-height: 2.6rem;
  resize: vertical;
  font: inherit;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 0.35rem 0.45rem;
}
.message-queue-actions {
  display: flex;
  gap: 0.15rem;
  align-items: center;
}
.message-queue-actions .icon-action {
  width: 1.7rem;
  height: 1.7rem;
}
.composer-attach-tray {
  width: min(64rem, 100%);
  margin: 0 auto;
  display: grid;
  gap: 0.45rem;
  padding: 0 0.15rem;
}
.composer-attach-tray[hidden] { display: none !important; }
.composer-upload-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: stretch;
}
.composer-upload-progress[hidden] { display: none !important; }
.composer-upload-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
  min-width: min(16rem, 100%);
  max-width: 22rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--elev) 88%, var(--bg));
  box-shadow: var(--shadow);
}
.composer-upload-thumb {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #111;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.composer-upload-thumb img,
.composer-upload-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.composer-upload-thumb.is-audio {
  background: color-mix(in srgb, var(--hover) 70%, #1a1a1a);
}
.composer-upload-copy {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}
.composer-upload-name {
  font-size: 0.8rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-upload-bar {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--hover);
  overflow: hidden;
}
.composer-upload-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent, #5a8f6b);
  transition: width 0.12s linear;
}
.composer-upload-pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.composer-toolbar {
  width: min(64rem, 100%);
  margin: 0 auto;
}
.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  background: var(--hover);
  border-radius: 999px;
  padding: 0.2rem 0.55rem 0.2rem 0.7rem;
}
.model-chip-ico {
  display: none;
  place-items: center;
  flex: none;
  width: 1.05rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1;
}
.model-chip .dot { margin-right: 0; }
.model-chip select {
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 1rem;
  border: 0;
  padding: 0.2rem 1.05rem 0.2rem 0.15rem;
  font-size: 0.82rem;
  font-weight: 600;
  max-width: min(16rem, 100%);
}
.composer-box {
  width: min(64rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--composer);
  border: 1px solid var(--composer-line);
  border-radius: 1.6rem;
  padding: 0.55rem 0.55rem 0.55rem 1rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  position: relative;
  /* Menus open above the box; clip only the meter so they stay visible. */
  overflow: visible;
}
.composer-box.has-attach { padding-left: 0.45rem; }

.composer-meter-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.composer-row {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.context-meter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0;
  background: color-mix(in srgb, var(--line) 70%, transparent);
  transition: height 0.18s ease, opacity 0.15s ease;
  pointer-events: auto;
  opacity: 1;
}
.context-meter[hidden] { display: none !important; }
.context-meter.is-collapsed {
  height: 1px;
}
.context-meter.is-expanded {
  height: 10px;
}
.composer:focus-within .context-meter:not(:hover) {
  height: 1px;
}
.composer:focus-within .context-meter:not(:hover) .context-meter-label {
  opacity: 0;
}
.context-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: color-mix(in srgb, var(--ok) 75%, var(--ink));
  opacity: 0.85;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.context-meter.is-warn .context-meter-fill {
  background: color-mix(in srgb, var(--warn) 80%, var(--ink));
}
.context-meter.is-danger .context-meter-fill {
  background: color-mix(in srgb, var(--danger) 85%, var(--ink));
}
.context-meter-label {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.context-meter.is-expanded .context-meter-label,
.context-meter:hover .context-meter-label {
  opacity: 1;
  color: var(--ink);
}

.composer-row textarea {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}
.composer-row .icon-action.attach,
.composer-row .composer-actions {
  flex: none;
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.icon-action.attach {
  position: relative;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  align-self: center;
}
.icon-action.attach:hover,
.icon-action.attach:focus-visible {
  background: transparent;
  border-color: color-mix(in srgb, var(--ink) 42%, transparent);
  color: var(--ink);
  opacity: 1;
}
.icon-action.attach:disabled {
  cursor: not-allowed;
}
.icon-action.attach:disabled:hover,
.icon-action.attach:disabled:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
  color: var(--muted);
}
.icon-action.attach::before {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}
.icon-action.attach[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.55rem);
  transform: translateX(-50%) translateY(4px);
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.icon-action.attach[data-tip]:hover::after,
.icon-action.attach[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
html[data-theme="light"] .icon-action.attach[data-tip]::after {
  background: #5c5a54;
  border-color: transparent;
}
.attach-wrap {
  position: relative;
  flex: none;
  align-self: center;
}
.attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 30;
  min-width: 11.5rem;
  padding: 0.3rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: var(--panel, var(--bg));
  box-shadow: 0 10px 28px color-mix(in srgb, #000 28%, transparent);
  display: grid;
  gap: 0.15rem;
}
.attach-menu[hidden] { display: none !important; }
.attach-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  cursor: pointer;
}
.attach-menu-item:hover,
.attach-menu-item:focus-visible {
  background: var(--hover);
  outline: none;
}
.file-library-body {
  display: grid;
  gap: 0.55rem;
}
.file-library-search {
  width: 100%;
  margin: 0;
}
.file-library-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.file-library-list {
  display: grid;
  gap: 0.25rem;
  max-height: min(60vh, 28rem);
  overflow: auto;
  padding-right: 0.15rem;
}
.file-library-item {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  border-radius: 0.65rem;
  padding: 0.48rem 0.65rem;
  display: grid;
  gap: 0.1rem;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.file-library-item:hover,
.file-library-item:focus-visible {
  background: var(--hover);
  outline: none;
}
.file-library-item.is-attached,
.file-library-item:disabled {
  opacity: 0.55;
  cursor: default;
}
.file-library-item.is-attached:hover,
.file-library-item:disabled:hover {
  background: transparent;
}
.file-library-name {
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-library-meta {
  color: var(--muted);
  font-size: 0.78rem;
}
.file-library-more {
  justify-self: center;
  min-width: 7rem;
}
.composer-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.composer-files[hidden] { display: none !important; }
.file-chips {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.file-chips:has(.file-media) {
  max-width: 100%;
}
.file-media {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--assistant-line);
  border-radius: 1.05rem;
  background: color-mix(in srgb, var(--elev) 88%, var(--bg));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.file-media-open {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0b0b0b;
  cursor: zoom-in;
  color: inherit;
  overflow: hidden;
}
.file-media-open img,
.file-media-open video {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(18rem, 42vh);
  object-fit: contain;
  background: #0b0b0b;
}
.md > .file-media,
.md p:has(> .file-media) {
  max-width: 100%;
}
.bubble-body .file-media,
.bubble-body .file-chips {
  max-width: 100%;
}
.file-media--video .file-media-open {
  cursor: pointer;
}
.file-media-play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.2rem;
  height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #000 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 25%, transparent);
  pointer-events: none;
}
.file-media-play::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 1rem;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent #fff;
}
.file-media-cap {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name action"
    "kind action";
  gap: 0.1rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.75rem 0.65rem;
}
.file-media-cap .file-dl-name {
  grid-area: name;
}
.file-media-cap .file-dl-kind {
  grid-area: kind;
}
.file-media-cap .file-dl-action {
  grid-area: action;
}
.file-media--audio {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem 0.85rem 0.8rem;
}
.file-audio-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.file-audio-icon {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.7rem;
  background: var(--hover);
  position: relative;
}
.file-audio-icon::before {
  content: "";
  position: absolute;
  inset: 0.55rem auto auto 0.7rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0.55rem -0.15rem 0 -0.08rem var(--ink), 0.95rem -0.35rem 0 -0.12rem var(--ink);
}
.file-audio-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}
.file-audio-player {
  width: 100%;
  height: 2.2rem;
}
.composer-file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-start;
}
.composer-media-chip {
  position: relative;
  display: grid;
  gap: 0.25rem;
  max-width: 9.5rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--hover);
}
.composer-media-thumb {
  display: block;
  width: 8.5rem;
  height: 5.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #111;
  cursor: zoom-in;
}
.composer-media-thumb img,
.composer-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.composer-media-name {
  font-size: 0.72rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-media-audio {
  width: 8.5rem;
  height: 2rem;
}
.composer-media-remove {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.bubble.user .file-media {
  border-color: color-mix(in srgb, var(--user-line, var(--line)) 80%, transparent);
}
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: min(16rem, 100%);
  background: var(--hover);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: default;
}
button.file-chip {
  font: inherit;
  cursor: pointer;
}
button.file-chip:hover,
button.file-chip:focus-visible {
  background: var(--panel, var(--sidebar));
}
a.file-chip {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.file-chip:hover,
a.file-chip:focus-visible {
  background: var(--panel, var(--sidebar));
  border-color: var(--accent, var(--line));
}
.file-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.file-chip.is-gone,
.file-dl.is-gone {
  text-decoration: line-through;
  opacity: 0.55;
}
.file-chip .chip-x,
button.file-chip > span:last-child {
  flex: none;
  color: var(--muted);
  font-weight: 500;
  line-height: 1;
}
.file-dl {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 28rem;
  margin: 0.7em 0;
  padding: 0.7rem 0.8rem 0.7rem 0.85rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--assistant-line);
  border-radius: 1.05rem;
  background: color-mix(in srgb, var(--elev) 88%, var(--bg));
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.file-chips .file-dl {
  margin: 0;
}
.md p:has(> .file-dl) {
  margin: 0.7em 0;
}
.md p:has(> .file-dl:only-child) > .file-dl {
  margin: 0;
}
.file-dl:hover,
.file-dl:focus-within {
  border-color: var(--accent, var(--assistant-line));
  background: color-mix(in srgb, var(--elev) 96%, var(--bg));
}
.file-dl-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.7rem;
  background: var(--hover);
  color: var(--ink);
}
.file-dl-svg {
  width: 1.15rem;
  height: 1.15rem;
}
.file-dl-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.file-dl-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-dl-kind {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.file-dl-action {
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  height: 1.85rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.file-dl-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  margin-left: auto;
}
.file-dl-delete {
  display: inline-flex;
  margin: 0;
}
.file-dl-action.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.file-dl.is-gone .file-dl-action {
  opacity: 0.6;
}
.bubble.user .file-dl {
  background: color-mix(in srgb, var(--bg) 55%, var(--user));
}
.files-summary {
  margin: 0 0 0.85rem;
}
.files-library {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.files-row {
  display: block;
  min-width: 0;
}
.files-row .file-dl {
  max-width: none;
  margin: 0;
  width: 100%;
}
.files-row .file-dl.is-previewable {
  cursor: pointer;
}
.files-row .file-dl.is-previewable:hover,
.files-row .file-dl.is-previewable:focus-visible {
  border-color: var(--accent, var(--assistant-line));
  background: color-mix(in srgb, var(--elev) 96%, var(--bg));
}
.files-row .file-dl.is-previewable:focus-visible {
  outline: 2px solid var(--accent, #6a8);
  outline-offset: 2px;
}
.file-preview {
  display: grid;
  gap: 0.65rem;
  min-height: 8rem;
  max-height: min(70vh, 40rem);
}
.file-preview[data-preview-kind="pdf"],
.file-preview[data-preview-kind="image"],
.file-preview[data-preview-kind="video"] {
  max-height: min(78vh, 48rem);
}
.file-preview-image,
.file-preview-video {
  display: block;
  width: 100%;
  max-height: min(72vh, 44rem);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0.7rem;
  background: #0b0b0b;
}
.file-preview-pdf {
  width: 100%;
  min-height: min(72vh, 44rem);
  height: min(72vh, 44rem);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--bg);
}
.file-preview-audio {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 0.25rem;
}
.file-preview-audio-name {
  margin: 0;
  font-weight: 700;
}
.file-preview-audio-player {
  width: 100%;
}
.file-preview-text {
  margin: 0;
  max-height: min(68vh, 38rem);
  overflow: auto;
  padding: 0.85rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.file-preview-loading,
.file-preview-empty,
.file-preview-trim {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.modal-card.is-wide:has(.file-preview) {
  width: min(56rem, 100%);
  max-height: min(94vh, 56rem);
}
.modal-card.is-wide:has(.file-preview[data-preview-kind="pdf"]) {
  width: min(64rem, 100%);
}
.profile-hero-actions form {
  display: inline-flex;
  margin: 0;
}
.composer-box textarea {
  border: 0;
  background: transparent;
  padding: 0.45rem 0.2rem;
  max-height: 12rem;
  min-height: 1.6rem;
  outline: none;
  box-shadow: none;
}
.composer-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  align-self: center !important;
}
.status { margin: 0; color: var(--muted); font-size: 0.78rem; }
.send {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  padding: 0;
  background: var(--btn);
  color: var(--btn-ink);
  border: 0;
  font-size: 0.9rem;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}
.send:disabled { background: var(--send-off); color: var(--btn-ink); }
.send.is-stop::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0.12rem;
  background: currentColor;
}
.query-map {
  position: absolute;
  top: 50%;
  right: max(0.75rem, calc(50% - 32rem - 0.1rem));
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  pointer-events: none;
}
.query-map:not([hidden]) { pointer-events: none; }
.query-map-rail,
.query-map-toggle,
.query-map-panel,
.query-map-scroll { pointer-events: auto; }
.query-map-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: none;
}
.query-map-scroll {
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--elev) 88%, var(--bg));
  color: var(--ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.query-map-scroll:hover {
  background: var(--elev);
  border-color: color-mix(in srgb, var(--ink) 16%, var(--line));
}
.query-map-scroll::before {
  content: "";
  display: block;
  width: 0.65rem;
  height: 0.65rem;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}
.query-map-scroll.is-down::before {
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
}
.query-map-scroll[hidden] { display: none !important; }
.query-map-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: auto;
  max-height: 11rem;
  padding: 0.5rem 0.22rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--elev) 78%, var(--bg));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  cursor: pointer;
  flex: none;
}
.query-map-toggle[hidden] { display: none !important; }
.query-map.is-scroll-only .query-map-toggle { display: none !important; }
.query-map-toggle:hover,
.query-map.is-open .query-map-toggle {
  background: var(--elev);
  border-color: color-mix(in srgb, var(--ink) 16%, var(--line));
}
.query-map-ticks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  width: 0.75rem;
  height: auto;
  max-height: 10rem;
  overflow: hidden;
}
.query-tick {
  display: block;
  width: 0.62rem;
  height: 0.12rem;
  flex: 0 0 auto;
  border-radius: 1px;
  background: var(--muted);
  opacity: 0.5;
}
.query-tick.is-current {
  opacity: 1;
  background: var(--ink);
  width: 0.82rem;
}
.query-map.is-open .query-map-toggle,
.query-map-toggle:hover .query-tick {
  opacity: 1;
}
.query-map-panel {
  width: min(22rem, 70vw);
  max-height: min(34rem, 72vh);
  overflow: auto;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  padding: 0.4rem;
  box-shadow: var(--shadow);
}
.query-map-panel[hidden] { display: none !important; }
.query-map-list { display: grid; gap: 0.08rem; }
.query-map-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.48rem 0.7rem;
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.query-map-item:hover,
.query-map-item:focus-visible {
  background: var(--hover);
}
.query-map-item.is-current {
  background: color-mix(in srgb, var(--hover) 88%, var(--ink) 6%);
}
.composer-hint {
  width: min(64rem, 100%);
  margin: 0.15rem auto 0;
  padding: 0 0.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.models-stage { overflow: auto; }
.models-body { width: min(58rem, 100%); margin: 0 auto; padding: 0 0.5rem 2rem; }
.model-group h2 { font-size: 0.95rem; color: var(--muted); margin: 1.15rem 0 0.35rem; }
.model-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .model-cards { grid-template-columns: 1fr; }
}
.model-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 1.05rem;
  background: var(--elev);
  min-height: 14rem;
}
.model-card.is-current {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.model-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.model-kicker {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.model-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ok);
}
.model-card h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.3;
}
.model-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
.model-id { margin: 0; }
.model-id code {
  font-size: 0.72rem;
  color: var(--muted);
}
.model-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.1rem 0 0.15rem;
  padding: 0;
}
.model-chips li {
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink);
  border: 1px solid transparent;
}
.model-chips li.model-chip-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--hover) 70%, transparent);
  border-color: var(--line);
}
.model-chips li.model-chip-id code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
}
.model-card form { margin: 0; }
.model-card-foot button { width: auto; min-width: 6.5rem; }
.models-note { margin: 1.4rem 0 0; font-size: 0.78rem; }

.folder-new-btn { display: none; }
.folder.drop-target,
.ungrouped-chats.drop-target {
  outline: 1px dashed var(--line);
  background: var(--hover);
}
.ungrouped-chats {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 2.6rem;
  padding: 0.1rem 0 0.35rem;
  border-radius: 0.7rem;
  gap: 0.05rem;
}
.date-group .conv-item {
  padding-left: 0.45rem;
}
.icon-action.more::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black'/%3E%3Ccircle cx='19' cy='12' r='2' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black'/%3E%3Ccircle cx='19' cy='12' r='2' fill='black'/%3E%3C/svg%3E");
}
.side-pop {
  position: fixed;
  z-index: 50;
  display: grid;
  gap: 0.12rem;
  min-width: 13.8rem;
  max-width: min(18rem, calc(100vw - 1rem));
  max-height: min(24rem, calc(100vh - 1rem));
  overflow: auto;
  padding: 0.35rem;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
}
.side-pop-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0.55rem;
  padding: 0.58rem 0.7rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.side-pop-item:hover,
.side-pop-item:focus-visible { background: var(--hover); }
.side-pop-item.is-danger { color: var(--danger); }
.side-pop-item.is-danger:hover { background: var(--danger-bg); }
.side-pop-item.has-sub::after,
.side-pop-item.is-current::after,
.side-pop-item.is-back::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.side-pop-item.has-sub::after {
  margin-left: auto;
  opacity: 0.55;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.6 16.6 10 18l6-6-6-6-1.4 1.4L13.2 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.6 16.6 10 18l6-6-6-6-1.4 1.4L13.2 12z'/%3E%3C/svg%3E");
}
.side-pop-item.is-current::after {
  margin-left: auto;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.side-pop-item.is-back::before {
  opacity: 0.7;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4L10.8 12z'/%3E%3C/svg%3E");
}
.side-pop-sep {
  height: 1px;
  margin: 0.2rem 0.35rem;
  background: var(--line);
}
.composer-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
}
.composer-toolbar > .model-chip,
.composer-toolbar > .model-chip-static {
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(18rem, 55%);
}
.composer-toolbar > .model-chip select {
  max-width: 14rem;
}
.composer-skills {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
  flex: 0 1 auto;
}
.composer-skill { flex-shrink: 0; }
.skill-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  background: var(--hover);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.2rem 0.7rem 0.2rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.skill-summary-ico,
.skill-pick-ico {
  display: none;
  place-items: center;
  flex: none;
  line-height: 1;
}
.skill-summary-text {
  display: inline;
}
.skill-summary-count {
  display: inline;
}
.skill-summary::after {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.15rem;
  opacity: 0.55;
  background: currentColor;
  -webkit-mask: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  transition: transform 0.15s ease;
}
.composer-skills.is-open .skill-summary::after {
  transform: rotate(180deg);
}
.skill-summary:hover,
.skill-summary:focus-visible {
  background: var(--panel, var(--sidebar));
}
.skill-summary[hidden] { display: none !important; }
.skill-chips-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.4rem);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: max(14rem, min(22rem, 70vw));
  padding: 0.55rem;
  background: var(--sidebar);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: var(--shadow);
}
.skill-chips-panel[hidden] { display: none !important; }
.skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.skill-chips:not(:has(*)) { display: none; }
.skill-chips-edit {
  align-self: flex-start;
  font-size: 0.78rem;
  padding: 0.15rem 0.45rem;
}
.skill-chip {
  background: var(--hover);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.skill-chip.is-auto { border-style: dashed; }
.skill-chip.is-folder {
  cursor: default;
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
}
.skill-popover {
  width: min(64rem, 100%);
  margin: 0 auto 0.45rem;
  background: var(--sidebar);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.6rem;
  max-height: 16rem;
  overflow: auto;
}
.skill-pick { display: flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0; font-size: 0.88rem; }
.skill-turn {
  width: min(64rem, 100%);
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
  list-style: none;
}
.icon-action.up::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.3l.9-4.6.1-.6c0-.4-.2-.8-.5-1.1L13 1 6.6 7.4C6.2 7.8 6 8.4 6 9v10c0 1.1.9 2 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.3l.9-4.6.1-.6c0-.4-.2-.8-.5-1.1L13 1 6.6 7.4C6.2 7.8 6 8.4 6 9v10c0 1.1.9 2 2 2h9c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-2z'/%3E%3C/svg%3E");
}
.icon-action.down::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 3h-4v12h4V3zM2 14c0 1.1.9 2 2 2h6.3l-.9 4.6-.1.6c0 .4.2.8.5 1.1L11 23l6.4-6.4c.4-.4.6-1 .6-1.6V5c0-1.1-.9-2-2-2H7c-.8 0-1.5.5-1.8 1.2L2.2 11.3c-.1.2-.2.5-.2.7v2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M22 3h-4v12h4V3zM2 14c0 1.1.9 2 2 2h6.3l-.9 4.6-.1.6c0 .4.2.8.5 1.1L11 23l6.4-6.4c.4-.4.6-1 .6-1.6V5c0-1.1-.9-2-2-2H7c-.8 0-1.5.5-1.8 1.2L2.2 11.3c-.1.2-.2.5-.2.7v2z'/%3E%3C/svg%3E");
}
.icon-action.search-toggle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 12h18M12 3c3 3.2 4.5 6.2 4.5 9S15 17.8 12 21c-3-3.2-4.5-6.2-4.5-9S9 6.2 12 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 12h18M12 3c3 3.2 4.5 6.2 4.5 9S15 17.8 12 21c-3-3.2-4.5-6.2-4.5-9S9 6.2 12 3z'/%3E%3C/svg%3E");
}
.icon-action.search-toggle.is-on {
  background: var(--hover);
  color: var(--ink);
}
.search-sources {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0.45rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.2rem;
}
.search-sources a {
  color: var(--link);
  font-size: 0.78rem;
  text-decoration: none;
  word-break: break-word;
}
.search-sources a:hover { text-decoration: underline; }
.mcp-confirm {
  margin: 0.7rem 0 0;
  padding: 0;
  border: 0;
}
.mcp-confirm-card {
  display: grid;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warn, #d97706) 42%, var(--line));
  border-radius: 1rem;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--warn, #d97706) 12%, var(--elev)) 0%,
      var(--elev) 55%
    );
  box-shadow: 0 10px 28px color-mix(in srgb, #000 12%, transparent);
}
.mcp-confirm-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.mcp-confirm-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--warn, #d97706) 18%, var(--panel, var(--elev)));
  color: color-mix(in srgb, var(--warn, #d97706) 80%, var(--ink));
  font-size: 1rem;
}
.mcp-confirm-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}
.mcp-confirm-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mcp-confirm-detail {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.mcp-confirm-scope {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.mcp-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.mcp-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    filter 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease,
    transform 0.12s ease;
}
.mcp-confirm-btn i {
  font-size: 0.92rem;
}
.mcp-confirm-btn.is-approve {
  background: var(--ok, #2a8f55);
  color: #fff;
  border-color: color-mix(in srgb, var(--ok, #2a8f55) 70%, #000);
}
.mcp-confirm-btn.is-approve:hover,
.mcp-confirm-btn.is-approve:focus-visible {
  filter: brightness(1.06);
}
.mcp-confirm-btn.is-reject {
  background: var(--panel, var(--elev));
  color: var(--ink);
  border-color: var(--line);
}
.mcp-confirm-btn.is-reject:hover,
.mcp-confirm-btn.is-reject:focus-visible {
  background: var(--hover);
}
.mcp-confirm-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}
.mcp-confirm-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.mcp-confirm-done {
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ok, #2a8f55) 35%, var(--line));
  background: color-mix(in srgb, var(--ok, #2a8f55) 12%, var(--elev));
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
}
@media (max-width: 800px) {
  .mcp-confirm-actions {
    grid-template-columns: 1fr;
  }
  .mcp-confirm-btn {
    min-height: 3rem;
  }
}
.mcp-wait {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.65rem 0 0;
  padding: 0.55rem 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
}
.mcp-wait-spin {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: mcp-spin 0.7s linear infinite;
}
.mcp-wait-dots::after {
  content: "";
  animation: mcp-dots 1.4s steps(4, end) infinite;
}
@keyframes mcp-spin {
  to { transform: rotate(360deg); }
}
@keyframes mcp-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .mcp-wait-spin { animation: none; opacity: 0.7; }
  .mcp-wait-dots::after { animation: none; content: "…"; }
  .user-chip-caret { transition: none; }
}
.mcp-url {
  word-break: break-all;
  font-size: 0.75rem;
}
.skills-stage { overflow: auto; }
.skills-stage .stage-head { width: min(52rem, 100%); }
.skills-body { width: 100%; margin: 0; padding: 0 1.5rem 2rem; box-sizing: border-box; }
.skill-lib-actions { flex-wrap: wrap; }
.stat-cards {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.55rem;
}
.stat-card {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  padding: 0.85rem 0.95rem;
  display: grid;
  gap: 0.2rem;
}
.stat-card strong {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}
.stat-card span { color: var(--muted); font-size: 0.78rem; }
.dataset-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.dataset-pager-status {
  color: var(--muted);
  font-size: 0.82rem;
}
.dataset-pager .ghost.tiny.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.dataset-card {
  gap: 1rem;
}
.dataset-empty {
  margin: 0.35rem 0 0;
}
.dataset-feedback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.dataset-feedback {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--elev);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dataset-card-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
.dataset-feedback.is-up {
  border-color: color-mix(in srgb, var(--ok) 28%, var(--line));
}
.dataset-feedback.is-down {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}
.dataset-feedback.is-skill {
  border-color: color-mix(in srgb, var(--link) 22%, var(--line));
}
.dataset-feedback:hover {
  border-color: color-mix(in srgb, var(--link) 35%, var(--line));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ink) 10%, transparent);
}
.dataset-feedback-rail,
.dataset-feedback-body {
  position: relative;
  z-index: 1;
}
.dataset-feedback-rail {
  display: grid;
  place-items: center;
  width: 2.6rem;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border-right: 1px solid var(--line);
}
.dataset-feedback.is-up .dataset-feedback-rail {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border-right-color: color-mix(in srgb, var(--ok) 22%, var(--line));
  color: var(--ok);
}
.dataset-feedback.is-down .dataset-feedback-rail {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-right-color: color-mix(in srgb, var(--danger) 22%, var(--line));
  color: var(--danger);
}
.dataset-feedback.is-skill .dataset-feedback-rail {
  background: color-mix(in srgb, var(--link) 12%, transparent);
  border-right-color: color-mix(in srgb, var(--link) 22%, var(--line));
  color: var(--link);
}
.dataset-vote {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}
.dataset-feedback-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 1rem 0.9rem;
  min-width: 0;
}
.dataset-feedback-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  min-width: 0;
}
.dataset-chat-title {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 8rem;
}
.dataset-when {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}
.dataset-quote {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.75rem;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-height: 9.5rem;
  overflow: hidden;
  mask-image: linear-gradient(#000 70%, transparent);
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
}
.dataset-quote.md {
  font-size: 0.9rem;
}
.dataset-quote.md :first-child { margin-top: 0; }
.dataset-quote.md :last-child { margin-bottom: 0; }
.dataset-quote.md p { margin: 0.35em 0; }
.dataset-quote.md h1,
.dataset-quote.md h2,
.dataset-quote.md h3,
.dataset-quote.md h4 {
  font-size: 1rem;
  margin: 0.4em 0 0.25em;
}
.dataset-quote.md pre {
  max-height: 5.5rem;
  overflow: auto;
  font-size: 0.78rem;
}
.dataset-quote.md a {
  position: relative;
  z-index: 2;
}
.dataset-quote.is-empty {
  color: var(--muted);
  font-style: italic;
  mask-image: none;
  -webkit-mask-image: none;
  max-height: none;
}
.dataset-feedback-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  color: var(--muted);
  font-size: 0.75rem;
}
.dataset-open {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--link) 28%, var(--line));
  background: color-mix(in srgb, var(--link) 10%, var(--elev));
  color: var(--link);
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1.2;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.dataset-open::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  flex: none;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 5h5v5h-2V8.4l-7.8 7.8-1.4-1.4L15.6 7H14V5zM5 6h7v2H7v9h9v-5h2v7H5V6z'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 5h5v5h-2V8.4l-7.8 7.8-1.4-1.4L15.6 7H14V5zM5 6h7v2H7v9h9v-5h2v7H5V6z'/%3E%3C/svg%3E");
}
.dataset-open:hover,
.dataset-feedback:hover .dataset-open {
  text-decoration: none;
  background: color-mix(in srgb, var(--link) 18%, var(--elev));
  border-color: color-mix(in srgb, var(--link) 45%, var(--line));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--link) 16%, transparent);
  transform: translateY(-1px);
}
.dataset-open:active {
  transform: translateY(0);
  box-shadow: none;
}
.dataset-link {
  display: grid;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
}
.dataset-link:hover .dataset-snippet {
  color: var(--link);
}
.bubble.is-target {
  outline: 2px solid color-mix(in srgb, var(--link) 55%, transparent);
  outline-offset: 3px;
  border-radius: 0.85rem;
}
.skill-delete-form {
  display: inline-flex;
  margin: 0;
}
.dataset-list,
.skill-cards .dataset-row {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dataset-list {
  display: grid;
  gap: 0.55rem;
}
.dataset-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}
.dataset-list .dataset-row {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  padding: 0.75rem 0.9rem;
}
.dataset-mark {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--hover);
  color: var(--muted);
  white-space: nowrap;
}
.dataset-mark.is-up { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--elev)); }
.dataset-mark.is-down { color: var(--danger); background: var(--danger-bg); }
.dataset-mark.is-skill { color: var(--ink); }
.dataset-main { min-width: 0; display: grid; gap: 0.28rem; }
.dataset-snippet { margin: 0; }
.dataset-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}
.profile-body {
  width: 100%;
  max-width: none;
  padding-top: 1.2rem;
  display: grid;
  gap: 1rem;
}
.profile-card {
  display: grid;
  gap: 1.15rem;
  padding: 1.45rem 1.5rem 1.55rem;
  background: var(--sidebar);
  border: 1px solid var(--assistant-line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
}
.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.5rem;
}
.profile-hero-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 12rem;
}
.profile-hero-copy h1 {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.profile-hero-copy .lede {
  margin: 0;
  max-width: 44rem;
  color: var(--muted);
}
.account-hero {
  align-items: center;
  gap: 1.1rem;
}
.account-hero-photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--elev);
}
.account-hero-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.account-hero .profile-hero-copy h1 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.account-hero-handle {
  margin: 0.35rem 0 0;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: var(--hover);
  border: 1px solid var(--line);
}
.account-overview-lede {
  margin: 0.85rem 0 1rem;
  color: var(--muted);
  max-width: 40rem;
}
.host-request-sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
}
.host-request-value-sm {
  font-size: 1.05rem !important;
  line-height: 1.25;
}
.mcp-hero {
  display: grid;
  gap: 0.45rem;
  align-items: start;
}
.mcp-hero .profile-hero-copy { min-width: 0; }
.mcp-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.mcp-hero-row .lede {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  max-width: none;
  color: var(--muted);
}
.lede a,
.help-copy a {
  display: inline;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.04em 0.5em 0.1em;
  background: var(--elev);
  white-space: nowrap;
}
.lede a:hover,
.help-copy a:hover {
  background: var(--hover);
}
.lede a:focus-visible,
.help-copy a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.mcp-hero-row .profile-hero-actions {
  flex: none;
  margin: 0;
}
.profile-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: none;
  margin: 0 0 0 auto;
}
.profile-hero-actions form { margin: 0; }
.profile-card-head { display: grid; gap: 0.4rem; }
.profile-card-head h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.profile-card-head .lede { margin: 0; }
.profile-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}
.profile-card-actions form { margin: 0; }
.profile-card .skill-group:first-of-type h2,
.profile-card .model-group:first-of-type h2 {
  margin-top: 0.2rem;
}
.skill-tab-panel .model-group { margin: 0; }
.skill-tab-panel .model-group h2 { display: none; }
.skill-tab-panel .skill-blurb { margin: 0.15rem 0 0.85rem; }
.skill-tab-panel .mcp-cards { margin: 0; }
.profile-card .stat-cards { margin: 0; }
.profile-card .people-list { margin-bottom: 0; }
.mcp-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  justify-content: start;
}
.mcp-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.35rem;
  align-content: start;
  padding: 0.85rem 1.7rem 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: var(--bg);
}
.mcp-status {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  margin: 0;
}
.mcp-blurb {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
}
.mcp-card .skill-card-meta,
.mcp-card .skill-card-meta form {
  width: 100%;
}
.mcp-card-url {
  margin: 0;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-card-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.28rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.15rem;
}
.mcp-card-actions form {
  display: contents;
  margin: 0;
}
.mcp-action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--muted);
  cursor: pointer;
  position: relative;
  flex: none;
}
.mcp-action:hover,
.mcp-action:focus-visible {
  color: var(--ink);
  background: var(--hover);
  outline: none;
}
.mcp-action i {
  font-size: 0.78rem;
  line-height: 1;
}
.mcp-action-toggle {
  width: auto;
  min-width: 2.85rem;
  padding: 0 0.55rem;
}
.mcp-action-toggle.is-on,
.mcp-action-toggle[aria-pressed="true"] {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 28%, var(--line));
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
.mcp-action.danger:hover,
.mcp-action.danger:focus-visible {
  color: var(--danger);
}
.mcp-action[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.42rem);
  transform: translateX(-50%) translateY(0.18rem);
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.mcp-action[data-tip]:hover::after,
.mcp-action[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mcp-server-form,
.mcp-delete-form {
  display: grid;
  gap: 0.65rem;
}
.mcp-auth-fields {
  display: grid;
  gap: 0.65rem;
}
.mcp-auth-hint {
  margin: 0;
  font-size: 0.9rem;
}
.mcp-empty { grid-column: 1 / -1; }
.profile-card input,
.profile-card textarea {
  background: var(--bg);
}
.profile-form { gap: 1rem; }
.profile-block { display: grid; gap: 0.7rem; }
.profile-block h2 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.profile-panel {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 35%, transparent);
}
.profile-panel h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.field-hint { margin: -0.35rem 0 0; font-size: 0.78rem; }
.avatar-studio {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  padding: 0.35rem 0 0.15rem;
}
.avatar-drop {
  position: relative;
  width: min(16.5rem, 72vw);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
  color: inherit;
  isolation: isolate;
  overflow: visible;
  touch-action: none;
}
.avatar-drop-clip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--code);
  box-shadow: var(--shadow);
}
.avatar-drop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.avatar-drop-ring {
  position: absolute;
  inset: -0.45rem;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--muted) 55%, var(--line));
  pointer-events: none;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
  z-index: 2;
}
.avatar-drop:hover .avatar-drop-ring,
.avatar-drop.is-over .avatar-drop-ring,
.avatar-drop.is-cropping .avatar-drop-ring {
  border-color: var(--ok);
  border-style: solid;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 16%, transparent);
}
.avatar-drop.is-over { transform: scale(1.015); }
.avatar-drop.is-busy { cursor: wait; opacity: 0.72; }
.avatar-drop.is-cropping { cursor: grab; }
.avatar-drop.is-cropping.is-dragging { cursor: grabbing; }
.avatar-preview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: transparent;
  box-shadow: none;
}
.avatar-drop.is-cropping .avatar-preview {
  visibility: hidden;
}
.avatar-crop-img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
}
.avatar-drop-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  padding: 1.2rem;
  border-radius: 50%;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.35;
  color: #fff;
  background: color-mix(in srgb, #111 52%, transparent);
  opacity: 0;
  transition: opacity 0.16s ease;
  z-index: 1;
  pointer-events: none;
}
html[data-theme="light"] .avatar-drop-hint {
  color: var(--ink);
  background: color-mix(in srgb, #fff 62%, transparent);
}
.avatar-drop-hint strong { font-weight: 600; }
.avatar-drop:hover .avatar-drop-hint,
.avatar-drop.is-over .avatar-drop-hint,
.avatar-drop.is-empty .avatar-drop-hint,
.avatar-drop:focus-visible .avatar-drop-hint {
  opacity: 1;
}
.avatar-drop.is-cropping .avatar-drop-hint,
.avatar-drop.is-cropping:hover .avatar-drop-hint,
.avatar-drop.is-cropping:focus-visible .avatar-drop-hint {
  opacity: 0;
}
.avatar-studio-hint {
  margin: 0;
  text-align: center;
  max-width: 22rem;
}
.avatar-studio:has(.avatar-drop.is-cropping) .avatar-studio-hint {
  display: none;
}
.avatar-crop-bar {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  width: min(22rem, 100%);
}
.avatar-zoom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.avatar-zoom-btn {
  flex: none;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--elev);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.avatar-zoom-btn:hover {
  background: var(--hover);
}
.avatar-zoom input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--ok);
  cursor: pointer;
}
.avatar-crop-hint {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
}
.avatar-crop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.avatar-reset { margin: 0; }
.avatar-studio .banner { width: min(22rem, 100%); }
.people-list { margin-bottom: 1.4rem; }
.people-card {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.people-card-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
a.people-card-link {
  color: inherit;
  text-decoration: none;
  border-radius: 0.55rem;
  outline: none;
}
a.people-card-link:hover strong,
a.people-card-link:focus-visible strong {
  color: var(--link);
}
a.people-card-link:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--link) 45%, transparent);
}
.people-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--hover);
}
.people-card-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.people-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: none;
  --people-action-size: 2.15rem;
}
.people-actions form {
  display: contents;
}
.people-action {
  box-sizing: border-box;
  width: var(--people-action-size);
  min-width: var(--people-action-size);
  max-width: var(--people-action-size);
  height: var(--people-action-size);
  min-height: var(--people-action-size);
  padding: 0;
  flex: none;
  position: relative;
}
.people-action::before {
  content: "";
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.people-action.edit::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}
.people-action.trash::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12v2H6zm2 3h8l-.7 10H8.7L8 10zm3-6h2l1 2h4v2H6V6h4l1-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12v2H6zm2 3h8l-.7 10H8.7L8 10zm3-6h2l1 2h4v2H6V6h4l1-2z'/%3E%3C/svg%3E");
}
.people-action.trash:hover,
.people-action.trash:focus-visible {
  filter: brightness(1.06);
}
.key-card {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.key-card-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.people-action[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.48rem);
  transform: translateY(0.22rem);
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.people-action[data-tip]:hover::after,
.people-action[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
.host-files { margin: 0; }
.people-form { gap: 0.85rem; }
.people-form .banner { margin: 0; }
.people-form .field-hint { margin: 0; }
.people-delete { margin-top: 0.4rem; }
.role-switch {
  display: grid;
  gap: 0.45rem;
}
.role-switch-title {
  font-size: 0.82rem;
  color: var(--muted);
}
.role-switch-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2rem;
  padding: 0.22rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, var(--ink) 4%);
}
.role-switch-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  margin: 0;
  padding: 0.35rem 0.4rem;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.role-switch-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.role-switch-option:has(input:checked) {
  color: var(--ink);
  background: var(--card, var(--bg));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
}
.role-switch-option:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--accent, #2f6fed) 55%, transparent);
  outline-offset: 1px;
}
.demo-notice {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.95rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, var(--line));
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--ink) 6%, var(--elev)) 0%,
      color-mix(in srgb, var(--elev) 92%, var(--bg)) 55%,
      var(--elev) 100%
    );
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink);
}
.demo-notice-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line));
  background: color-mix(in srgb, var(--ink) 8%, var(--bg));
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.demo-notice-text {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
}
.demo-notice-text strong {
  color: var(--ink);
  font-weight: 650;
}
html[data-theme="light"] .demo-notice {
  border-color: color-mix(in srgb, var(--ink) 8%, transparent);
  background:
    linear-gradient(
      120deg,
      #f3f1eb 0%,
      #faf9f6 48%,
      #fff 100%
    );
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 5%, transparent);
}
html[data-theme="light"] .demo-notice-badge {
  background: #ebe7de;
  border-color: color-mix(in srgb, var(--ink) 12%, transparent);
}
body.is-demo .is-demo-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
}
.check-row input { width: auto; margin: 0; }
.switch-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.switch-row .switch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.switch,
.toggle-switch {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--line);
  border: 1px solid var(--line);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.switch::after,
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--elev, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.switch-row:has(.switch-input:checked) .switch,
.switch-row:has(.switch-input:checked) .toggle-switch,
.switch-input:checked + .switch,
.switch-input:checked + .toggle-switch {
  background: var(--accent, #2f6fed);
  border-color: transparent;
}
.switch-row:has(.switch-input:checked) .switch::after,
.switch-row:has(.switch-input:checked) .toggle-switch::after,
.switch-input:checked + .switch::after,
.switch-input:checked + .toggle-switch::after {
  transform: translateX(1.15rem);
}
.switch-row:focus-within .switch,
.switch-row:focus-within .toggle-switch {
  outline: 2px solid color-mix(in srgb, var(--accent, #2f6fed) 45%, transparent);
  outline-offset: 2px;
}
.switch-label { line-height: 1.3; }
.people-form .password-field[hidden] { display: none; }
.tone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.8rem, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.tone-card {
  display: grid;
  gap: 0.28rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--assistant-line);
  border-radius: 0.9rem;
  background: var(--bg);
  cursor: pointer;
}
.tone-card input {
  margin: 0;
  justify-self: start;
}
.tone-card strong { font-size: 0.92rem; }
.tone-card span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.tone-card:hover { background: var(--hover); }
.tone-card:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.skill-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr));
  gap: 0.28rem;
  width: 100%;
  max-width: 100%;
  padding: 0.28rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 1.05rem;
}
.skill-tab {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.38rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 0.58rem 0.7rem;
  border-radius: 0.82rem;
  cursor: pointer;
  min-width: 0;
}
.skill-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-tab-count {
  flex: none;
  font-size: 0.72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--hover);
  border-radius: 999px;
  min-width: 1.35rem;
  padding: 0.08rem 0.38rem;
  text-align: center;
}
.skill-tab:hover { color: var(--ink); }
.skill-tab:hover .skill-tab-count { color: var(--ink); }
.skill-tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.skill-tab.is-current {
  background: var(--elev);
  color: var(--ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 0 0 1px var(--line);
}
.skill-tab.is-current .skill-tab-count {
  color: var(--ink);
  background: var(--active);
}
html[data-theme="light"] .skill-tabs {
  background: #f3f1eb;
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
html[data-theme="light"] .skill-tab {
  color: color-mix(in srgb, var(--ink) 62%, var(--muted));
}
html[data-theme="light"] .skill-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, #fff 70%, transparent);
}
html[data-theme="light"] .skill-tab.is-current {
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--btn) 70%, transparent);
}
html[data-theme="light"] .skill-tab.is-current .skill-tab-count {
  color: var(--btn-ink);
  background: color-mix(in srgb, #fff 18%, transparent);
}
html[data-theme="light"] .skill-tab:focus-visible {
  outline-color: var(--btn);
}
.skill-tab-panel { display: grid; gap: 0.2rem; }
.skill-tab-panel[hidden] { display: none; }
.skill-group h2 { font-size: 0.95rem; color: var(--muted); margin: 1.4rem 0 0.6rem; }
.skill-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.skill-card {
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.8rem 0.95rem;
  display: grid;
  gap: 0.35rem;
}
.skill-card.dataset-row {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}
.skill-card a { text-decoration: none; display: grid; gap: 0.2rem; }
.skill-card-meta { display: flex; gap: 0.6rem; color: var(--muted); font-size: 0.75rem; }
.editor-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  flex: none;
}
.editor-status-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 24%, transparent);
}
.editor-status.is-dirty .editor-status-dot {
  background: var(--muted);
  box-shadow: none;
}
.editor-status.is-error .editor-status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 24%, transparent);
}
.editor-form {
  display: grid;
  gap: 0.85rem;
  --editor-control-h: 2.7rem;
}
.editor-meta {
  display: grid;
  grid-template-columns: minmax(10rem, 1.4fr) minmax(9rem, 1fr) minmax(8rem, 0.9fr);
  gap: 0.55rem;
  align-items: end;
}
.editor-field {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.82rem;
}
.editor-field-name,
.editor-field-wide { min-width: 0; }
.editor-field-slug { min-width: 0; }
.editor-field input,
.editor-field select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--editor-control-h);
  min-height: var(--editor-control-h);
  padding: 0 0.75rem;
  font-size: 0.88rem;
  line-height: 1.25;
  background-color: var(--bg);
}
.editor-field-slug input {
  font-family: var(--mono);
}
.editor-field-slug input[readonly] {
  cursor: pointer;
  user-select: all;
}
.editor-field-name input {
  font-weight: 600;
}
.editor-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238f8f8f' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.9rem;
  padding-right: 2.1rem;
}
html[data-theme="light"] .editor-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236e6c66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
.profile-hero-actions .btn,
.profile-hero-actions .btn-quiet,
.profile-hero-actions #skill-history-btn,
.profile-hero-actions #skill-save {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  align-self: center;
}
.profile-hero-actions .btn-quiet,
.profile-hero-actions #skill-history-btn {
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
}
.profile-hero-actions .btn-quiet:hover,
.profile-hero-actions #skill-history-btn:hover {
  background: var(--hover);
  filter: none;
}
.profile-card select { background-color: var(--bg); }
.editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 22rem;
  gap: 0.65rem;
}
.editor-pane {
  min-height: 22rem;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 1.05rem;
  overflow: hidden;
}
.editor-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem 0.4rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#skill-history > .editor-pane-head {
  padding: 0 0 0.65rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.35rem;
}
.skill-editor-foot {
  margin-top: 0.15rem;
}
.skill-editor-foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.skill-editor-foot-actions .skill-delete-form {
  display: inline-flex;
  margin: 0;
}
.skill-editor-foot-actions .btn,
.skill-editor-foot-actions .btn-quiet,
.skill-editor-foot-actions .danger-fill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
}
.skill-history-modal {
  gap: 1rem;
}
.skill-history-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.skill-history-modal > .skill-history-head-actions {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--elev);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
}
.skill-history-modal-body {
  display: grid;
  gap: 0.85rem;
  padding: 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid var(--line);
  background: var(--bg);
}
.skill-history-modal .skill-history-lede {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
}
.skill-history-modal .btn,
.skill-history-modal .btn-quiet,
.skill-history-modal button.danger-fill,
.modal-root .modal-actions .btn,
.modal-root .modal-actions .btn-quiet,
.modal-root .modal-actions button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  height: 2.35rem;
  padding: 0 0.95rem;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 0.75rem;
}
.skill-history-modal .btn-quiet,
.modal-root .modal-actions .btn-quiet {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
.skill-history-modal .btn-quiet:hover,
.modal-root .modal-actions .btn-quiet:hover {
  background: var(--hover);
}
.skill-history-modal > .skill-history-head-actions .btn-quiet {
  background: var(--bg);
}
.skill-history-actions .btn,
.skill-history-actions .btn-quiet,
.skill-history-actions button.danger-fill {
  min-width: 6.5rem;
}
.skill-rev-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid var(--line);
  background: var(--elev);
}
.skill-rev-pick label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.skill-rev-pick select {
  width: 100%;
  min-height: 2.4rem;
  background: var(--bg);
  border-color: var(--line);
}
.skill-rev-result {
  display: grid;
  gap: 0.85rem;
  min-height: 4rem;
  padding: 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid var(--line);
  background: var(--elev);
}
@media (max-width: 640px) {
  .skill-rev-pick { grid-template-columns: 1fr; }
  .skill-history-item {
    grid-template-columns: 1fr;
  }
  .skill-history-actions {
    justify-content: stretch;
  }
  .skill-history-actions .btn,
  .skill-history-actions .btn-quiet,
  .skill-history-actions button.danger-fill {
    flex: 1 1 auto;
  }
}
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.editor-toolbar button {
  background: var(--hover);
  border-color: transparent;
  color: var(--ink);
  padding: 0.18rem 0.45rem;
  font-size: 0.75rem;
  border-radius: 0.5rem;
}
.editor-pane textarea {
  height: 100%;
  min-height: 18rem;
  resize: none;
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.45;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.7rem 0.85rem 0.9rem;
}
.editor-preview {
  overflow: auto;
  padding: 0.7rem 0.95rem 1rem;
  color: var(--ink);
}
.editor-stats {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.editor-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.85rem;
}
.editor-meter {
  position: relative;
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, var(--bg));
  overflow: hidden;
}
.editor-meter-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--ok, #3d9a6a);
  transition: width 0.18s ease, background 0.18s ease;
}
.editor-meter.is-warn .editor-meter-fill {
  background: var(--warn, #c4a035);
}
.editor-meter.is-over .editor-meter-fill,
.editor-stats.is-over .editor-meter-fill {
  background: var(--danger);
}
.editor-limit-ok {
  color: var(--ok, #3d9a6a);
  font-weight: 600;
}
.editor-limit-bad {
  color: var(--danger);
  font-weight: 700;
}
.editor-stats.is-over #skill-size {
  color: var(--danger);
}
.skill-history-lede {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.8rem;
}
.skill-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.skill-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem 0.9rem;
  align-items: center;
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--line));
  border-radius: 0.95rem;
  background: var(--elev);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent),
    0 8px 20px rgba(0, 0, 0, 0.18);
}
html[data-theme="light"] .skill-history-item {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 5%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.06);
}
.skill-history-meta {
  min-width: 0;
  display: grid;
  gap: 0.28rem;
}
.skill-history-meta strong {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--btn) 16%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.skill-history-meta span {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-history-who,
.skill-history-when {
  color: var(--ink);
  font-weight: 600;
}
.skill-history-excerpt {
  opacity: 0.9;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-top: 0.1rem;
  color: var(--muted);
}
.skill-history-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: center;
}
.skill-history-actions .btn-quiet {
  background: var(--bg) !important;
}
.head-actions { display: flex; gap: 0.5rem; align-items: center; }
.chat-more {
  position: relative;
  display: inline-flex;
  flex: none;
}
.chat-more .icon-action {
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
}
.chat-more .icon-action:hover,
.chat-more .icon-action:focus-visible,
.chat-more.is-menu-open .icon-action {
  background: var(--hover);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 22%, transparent);
}

.model-chip-static {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.2rem 0.15rem;
}

.skill-blurb { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.7rem; }
.skill-card-desc { margin: 0.15rem 0 0; color: var(--ink); font-size: 0.88rem; }

body.modal-open { overflow: hidden; }
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal-root[hidden] {
  display: none !important;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-root.is-media {
  padding: 0.75rem;
  z-index: 95;
}
.modal-root.is-media .modal-backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
.modal-card {
  position: relative;
  width: min(26rem, 100%);
  max-height: min(36rem, 88vh);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.modal-card.is-wide {
  width: min(52rem, 100%);
  max-height: min(90vh, 48rem);
}
.modal-card.is-media {
  width: min(96vw, 100%);
  max-width: 96vw;
  height: min(94vh, 100dvh);
  max-height: min(94vh, 100dvh);
  border-radius: 1.15rem;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.modal-card.is-media .modal-head {
  padding: 0.7rem 0.85rem 0.55rem 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--elev) 92%, var(--bg));
}
.modal-card.is-media .modal-title {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-card.is-media .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.75rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 55%, #000);
  min-height: 0;
}
.modal-card.is-media .modal-foot {
  padding: 0.55rem 1rem 0.85rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--elev) 92%, var(--bg));
}
.modal-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}
.modal-media img,
.modal-media video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.55rem;
  background: #000;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.modal-card.is-media .modal-body:has(.file-preview) {
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--bg) 55%, #000);
}
.modal-card.is-media .file-preview {
  max-height: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.modal-card.is-media .file-preview-image,
.modal-card.is-media .file-preview-video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.modal-card.is-wide:has(.skill-history-modal) {
  background: color-mix(in srgb, var(--bg) 42%, var(--elev));
  border-color: color-mix(in srgb, var(--ink) 16%, var(--line));
}
.modal-card.is-wide:has(.skill-history-modal) .modal-body {
  background: transparent;
}
.skill-rev-modal {
  display: grid;
  gap: 0.9rem;
  font-size: 0.88rem;
}
.skill-rev-meta {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.85rem;
  border: 1px solid var(--line);
  background: var(--elev);
  color: var(--muted);
  font-size: 0.8rem;
}
.skill-rev-meta strong {
  color: var(--ink);
  font-size: 0.95rem;
}
.skill-rev-fields {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.skill-rev-field {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
  border-radius: 0.8rem;
  background: var(--elev);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.skill-rev-field dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.skill-rev-field dd {
  margin: 0;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.skill-rev-field.is-changed dd {
  display: grid;
  gap: 0.2rem;
}
.skill-rev-from {
  color: var(--danger);
  text-decoration: line-through;
  opacity: 0.85;
}
.skill-rev-to {
  color: var(--ok);
}
.skill-rev-body-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.skill-rev-body {
  margin: 0;
  max-height: min(48vh, 28rem);
  overflow: auto;
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, var(--line));
  border-radius: 0.85rem;
  background: var(--code);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 4%, transparent);
}
.skill-rev-diff-line {
  display: block;
  padding: 0 0.15rem;
  border-radius: 0.2rem;
}
.skill-rev-diff-line.is-add {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
}
.skill-rev-diff-line.is-del {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: color-mix(in srgb, var(--danger) 75%, var(--ink));
}
.skill-rev-diff-line.is-hunk {
  color: var(--muted);
}
.skill-rev-empty {
  margin: 0;
  color: var(--muted);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.4rem;
}
.modal-title { margin: 0; font-size: 1rem; }
.modal-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  padding: 0 0 0.08rem;
  flex-shrink: 0;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.modal-x:hover {
  color: var(--ink);
  background: var(--elev-hover);
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}
.modal-body { overflow: auto; padding: 0.4rem 1rem 0.8rem; }
.modal-foot { padding: 0.2rem 1rem 0.9rem; }
.modal-copy { margin: 0; color: var(--ink); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.425rem;
}
.modal-actions button {
  box-sizing: border-box;
  min-height: 2.35rem;
  padding: 0.48rem 0.95rem;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.2;
  border-radius: 0.75rem;
}
.modal-actions button.btn-quiet,
.modal-actions button.ghost {
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
}
.modal-actions button.btn-quiet:hover,
.modal-actions button.ghost:hover {
  background: var(--hover);
}
.folder-create-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}
button.danger-fill {
  background: var(--danger);
  color: var(--btn-ink);
  border-color: var(--danger);
}
.skill-modal-body { display: grid; gap: 0.55rem; }
.skill-modal-list { display: grid; gap: 0.35rem; max-height: 22rem; overflow: auto; }
.skill-pick-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem 0.6rem;
  border-radius: 0.75rem;
}
.skill-pick-card:hover { background: var(--hover); }
.skill-pick-card span { display: grid; gap: 0.2rem; }
.key-secret-box { display: grid; gap: 0.6rem; }
.key-secret {
  display: block;
  padding: 0.7rem 0.8rem;
  background: var(--code);
  border-radius: 0.7rem;
  word-break: break-all;
}

.host-body { padding-bottom: 1.55rem; }
.profile-card.host-body { gap: 1rem; }
#host-files { margin-bottom: 0; }
.profile-card.host-advice {
  gap: 0.4rem;
}
.host-advice-kicker {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.host-advice-body {
  margin: 0;
  line-height: 1.45;
  max-width: none;
}
.host-advice.from-model {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
}
.host-wrap .host-stats,
.profile-body > .stat-cards,
.account-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  gap: 1rem;
  list-style: none;
  box-sizing: border-box;
}
.account-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.host-wrap .host-stats .stat-card,
.profile-body > .stat-cards .stat-card,
.account-stats .stat-card {
  background: var(--sidebar);
  border: 1px solid var(--assistant-line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  padding: 1.15rem 1.25rem 1.2rem;
  gap: 0.28rem;
  text-align: center;
  justify-items: center;
  display: grid;
}
.host-wrap .host-stats .stat-card strong,
.profile-body > .stat-cards .stat-card strong,
.account-stats .stat-card strong {
  font-size: 1.85rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: center;
  width: 100%;
}
.host-wrap .host-stats .stat-card span,
.profile-body > .stat-cards .stat-card span,
.account-stats .stat-card span {
  font-size: 0.82rem;
  text-align: center;
}
.host-wrap .host-stats .stat-card .meter,
.host-wrap .host-stats .stat-card .host-pressure-meter {
  width: 100%;
}
.skill-tab-panel .host-block:first-child { margin-top: 0; }
.host-request-stats {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.7rem;
}
.host-request-card {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  min-width: 0;
  padding: 0.9rem 0.95rem 1rem;
  border-radius: 1rem;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, var(--line));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.host-request-card:hover {
  border-color: color-mix(in srgb, var(--link) 28%, var(--line));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 8%, transparent);
  transform: translateY(-1px);
}
.host-request-card.is-accent {
  border-color: color-mix(in srgb, var(--link) 30%, var(--line));
  background: color-mix(in srgb, var(--link) 7%, var(--bg));
}
.host-request-card.is-warn {
  border-color: color-mix(in srgb, var(--warn) 32%, var(--line));
  background: color-mix(in srgb, var(--warn) 8%, var(--bg));
}
.host-request-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.host-request-value {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.host-request-card.is-accent .host-request-value { color: var(--link); }
.host-request-card.is-warn .host-request-value { color: var(--warn); }
@media (max-width: 1100px) {
  .host-request-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .host-request-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .host-request-stats { grid-template-columns: 1fr; }
}
.host-chart-legend {
  list-style: none;
  margin: 0.55rem 0 0.65rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
}
.host-chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.host-chart-legend li span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.host-chart-legend li.is-generate,
.host-chart-line.is-generate,
.host-chart-point.is-generate .host-chart-dot { color: var(--link); }
.host-chart-line.is-generate { stroke: var(--link); }
.host-chart-point.is-generate .host-chart-dot { stroke: var(--link); }
.host-chart-legend li.is-wait,
.host-chart-line.is-wait,
.host-chart-point.is-wait .host-chart-dot { color: var(--warn); }
.host-chart-line.is-wait { stroke: var(--warn); }
.host-chart-point.is-wait .host-chart-dot { stroke: var(--warn); }
.host-chart-legend li.is-tools,
.host-chart-line.is-tools,
.host-chart-point.is-tools .host-chart-dot { color: var(--ok); }
.host-chart-line.is-tools { stroke: var(--ok); }
.host-chart-point.is-tools .host-chart-dot { stroke: var(--ok); }
.host-chart-legend li.is-search,
.host-chart-line.is-search,
.host-chart-point.is-search .host-chart-dot { color: #7ec8c8; }
.host-chart-line.is-search { stroke: #7ec8c8; }
.host-chart-point.is-search .host-chart-dot { stroke: #7ec8c8; }
.host-chart-legend li.is-send,
.host-chart-line.is-send,
.host-chart-point.is-send .host-chart-dot { color: var(--muted); }
.host-chart-line.is-send { stroke: var(--muted); }
.host-chart-point.is-send .host-chart-dot { stroke: var(--muted); }
.host-chart-stages .host-chart-line {
  stroke-width: 2.1;
}
.host-chart-count.is-stage {
  font-size: 10px;
}
.host-chart-bars {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.host-chart-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.28rem;
}
.host-chart-label strong {
  font-size: 0.9rem;
  font-weight: 650;
}
.host-chart-label span {
  color: var(--muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.host-chart-meter {
  height: 0.55rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.host-chart-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--link) 70%, var(--ink));
}
.host-chart-meter.is-tools i {
  background: color-mix(in srgb, var(--ok) 55%, var(--link));
}
.host-chart-meter.is-hist i {
  background: color-mix(in srgb, var(--ok) 45%, var(--link));
}
.host-chart-bars li[data-tip] {
  cursor: pointer;
}
.host-chart-panel {
  margin-top: 0.7rem;
  padding: 1rem 0.35rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--ink) 3%, var(--elev));
  width: 100%;
  box-sizing: border-box;
}
.host-chart-panel-timeline {
  padding: 1rem 0.2rem 0.55rem;
  background:
    radial-gradient(120% 80% at 10% 0%, color-mix(in srgb, var(--link) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--ink) 3%, var(--elev));
}
.host-chart-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 640 / 240;
}
.host-chart-panel-hist .host-chart-svg {
  aspect-ratio: 640 / 220;
}
.host-chart-stages {
  aspect-ratio: 640 / 260;
}
.host-chart-timeline {
  overflow: visible;
}
.host-chart-grid {
  stroke: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}
.host-chart-area {
  fill: url(#host-daily-fill);
}
.host-chart-line {
  stroke: var(--link);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.host-chart-dot {
  fill: var(--elev);
  stroke: var(--link);
  stroke-width: 2;
}
.host-chart-hit {
  fill: transparent;
  stroke: none;
}
.host-chart-point,
.host-chart-bar.is-hist {
  cursor: pointer;
}
.host-chart-point:hover .host-chart-dot,
.host-chart-point:focus-within .host-chart-dot {
  fill: var(--link);
}
.host-chart-point.is-wait:hover .host-chart-dot,
.host-chart-point.is-wait:focus-within .host-chart-dot { fill: var(--warn); }
.host-chart-point.is-tools:hover .host-chart-dot,
.host-chart-point.is-tools:focus-within .host-chart-dot { fill: var(--ok); }
.host-chart-point.is-search:hover .host-chart-dot,
.host-chart-point.is-search:focus-within .host-chart-dot { fill: #7ec8c8; }
.host-chart-point.is-send:hover .host-chart-dot,
.host-chart-point.is-send:focus-within .host-chart-dot { fill: var(--muted); }
.host-chart-bar.is-hist:hover {
  fill: color-mix(in srgb, var(--ok) 62%, var(--link));
}
.host-chart-count {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--elev) 88%, transparent);
  stroke-width: 3px;
  pointer-events: none;
}
.host-chart-y {
  font-size: 10px;
}
.host-chart-bar {
  fill: color-mix(in srgb, var(--link) 72%, var(--ink));
}
.host-chart-bar.is-hist {
  fill: color-mix(in srgb, var(--ok) 45%, var(--link));
}
.host-chart-base {
  stroke: var(--line);
  stroke-width: 1;
}
.host-chart-axis,
.host-chart-value {
  fill: var(--muted);
  font-size: 11px;
  font-family: var(--font);
}
.host-chart-value {
  fill: var(--ink);
  font-weight: 650;
  font-size: 12px;
}
.meter {
  height: 0.38rem;
  background: var(--hover);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.45rem;
}
.host-pressure-meter {
  position: relative;
  margin-top: 0.45rem;
}
.host-pressure-meter .meter {
  margin-top: 0;
}
.host-pressure-meter[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%) translateY(0.2rem);
  background: var(--elev);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.36rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.host-pressure-meter[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.18rem);
  transform: translateX(-50%) translateY(0.2rem);
  border: 6px solid transparent;
  border-top-color: var(--elev);
  opacity: 0;
  pointer-events: none;
  z-index: 41;
  transition: opacity 0.14s ease, transform 0.14s ease;
  filter: drop-shadow(0 -1px 0 var(--line));
}
.host-pressure-meter[data-tip]:hover::after,
.host-pressure-meter[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.meter i {
  display: block;
  height: 100%;
  background: var(--ok);
  border-radius: inherit;
}
.meter i.pressure-warn,
.meter i.pressure-warning { background: #d97706; }
.meter i.pressure-urgent,
.meter i.pressure-critical { background: var(--danger); }
.host-block {
  margin: 1.15rem 0 0;
  padding: 0.95rem 1rem 1rem;
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: 0.95rem;
}
.host-block h2 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.host-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.55rem 1rem;
  margin: 0;
}
.host-kv div { display: grid; gap: 0.1rem; }
.host-kv dt { color: var(--muted); font-size: 0.75rem; }
.host-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.host-block .host-kv + .host-kv,
.host-block .meter + .host-kv {
  margin-top: 0.85rem;
}
.host-disks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.host-disk-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.88rem;
}
.host-fan {
  margin-top: 0.85rem;
}
.pressure-normal { color: var(--ok); }
.pressure-warn, .pressure-warning { color: #d97706; }
.pressure-critical, .pressure-urgent { color: var(--danger); }

.nav-chrome,
.nav-toggle,
.nav-close,
.nav-backdrop { display: none; }

@media (max-width: 900px) {
  .editor-split { grid-template-columns: 1fr; }
  .editor-meta { grid-template-columns: 1fr; }
  .host-wrap .host-stats,
  .profile-body > .stat-cards,
  .account-stats { grid-template-columns: 1fr 1fr; }
  .mcp-hero-row { flex-wrap: wrap; }
  .mcp-hero-row .profile-hero-actions { margin-left: auto; }
}

@media (max-width: 560px) {
  .host-wrap .host-stats,
  .profile-body > .stat-cards,
  .account-stats { grid-template-columns: 1fr; }
  .mcp-cards,
  .msg-cards,
  .msg-cards[data-count="1"] { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .login-brand h1 {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }
  .login-slogan { font-size: 0.78rem; }
  .login-brand .brand-mark {
    width: 3.85rem;
    height: 3.85rem;
  }
  .nav-chrome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 40;
    width: 100%;
    min-height: 3.15rem;
    margin: 0;
    padding: max(0.35rem, env(safe-area-inset-top)) max(0.4rem, env(safe-area-inset-right)) 0.35rem max(0.55rem, env(safe-area-inset-left));
    border-bottom: 1px solid var(--line);
    background: var(--sidebar);
  }
  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0.2rem 0.35rem 0.2rem 0.2rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--ink);
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
  }
  .nav-toggle:hover,
  .nav-toggle:focus-visible {
    background: var(--hover);
  }
  .nav-toggle .brand-mark {
    width: 2rem;
    height: 2rem;
  }
  .nav-toggle .brand-copy {
    flex: 1 1 0;
    min-width: 0;
  }
  .nav-toggle .brand-text {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
  }
  .nav-toggle .brand-slogan {
    font-size: 0.66rem;
  }
  .nav-bar-tools {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-end;
    gap: 0.12rem;
    margin-left: auto;
    position: relative;
    z-index: 60;
  }
  .app.is-nav-open .nav-bar-tools {
    z-index: 40;
  }
  .nav-bar-tools .side-tool {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
  }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(18px) saturate(0.65);
    -webkit-backdrop-filter: blur(18px) saturate(0.65);
  }
  .nav-backdrop[hidden] { display: none; }
  .app.is-nav-open .stage {
    filter: blur(8px);
  }
  .sidebar-shell {
    display: contents;
  }
  .sidebar-collapse {
    display: none;
  }
  .sidebar {
    position: fixed;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    z-index: 50;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
    padding-left: max(0.55rem, env(safe-area-inset-left));
    padding-right: max(0.55rem, env(safe-area-inset-right));
    box-shadow: none;
  }
  .app.is-nav-open .sidebar { transform: none; }
  /* Desktop collapsed preference must not empty the mobile drawer */
  .sidebar.is-collapsed {
    padding: 0.55rem 0.55rem 0.65rem;
    align-items: stretch;
  }
  .sidebar.is-collapsed .conv-list,
  .sidebar.is-collapsed .sidebar-foot {
    display: flex !important;
  }
  .sidebar.is-collapsed .sidebar-rail {
    display: none !important;
  }
  .sidebar.is-collapsed .conv-bulk-bar[hidden] {
    display: none !important;
  }
  .sidebar .brand { display: none; }
  .sidebar-top { display: none; }
  .sidebar .side-tools { display: none; }
  .sidebar .side-actions:not(:has(#chat-search:not([hidden]))) {
    display: none;
  }
  .sidebar .side-actions {
    margin: 0 0.1rem 0.35rem;
    padding: 0.15rem;
    padding-right: 3.2rem;
  }
  .conv-list > .folder:first-child > summary,
  .conv-list > .conv-item:first-child,
  .conv-list > .ungrouped-chats:first-child > .nav-label,
  .conv-list > .ungrouped-chats:first-child > .date-group:first-of-type > summary,
  .conv-list > .ungrouped-chats:first-child > .conv-item:first-of-type,
  .conv-list > .muted:first-child,
  .conv-list > .empty-chats:first-child {
    padding-right: 3.2rem;
  }
  .stage {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
  }
  .nav-close {
    display: none;
  }
  .app.is-nav-open .nav-close {
    display: grid;
    place-items: center;
    position: fixed;
    top: max(0.5rem, env(safe-area-inset-top));
    right: max(0.45rem, env(safe-area-inset-right));
    z-index: 60;
    width: 2.55rem;
    height: 2.55rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, var(--line));
    border-radius: 0.7rem;
    background: var(--elev);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  .nav-close::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
  }
  .nav-close:hover { background: var(--hover); }
  .side-tool {
    height: 2.05rem;
    min-width: 0;
    min-height: 0;
  }
  .theme-toggle {
    min-width: 2.35rem;
    min-height: 2.35rem;
  }
  .conv-item {
    min-height: 2.4rem;
    padding: 0.18rem 0.15rem 0.18rem 0.4rem;
  }
  .conv-item.nested {
    padding-left: 1.75rem;
  }
  .conv-link { padding: 0.42rem 0.3rem; }
  .user-menu-item { min-height: 2.45rem; }
  .user-menu-pop {
    left: 0.2rem;
    right: 0.2rem;
    bottom: calc(100% + 0.35rem);
    max-height: min(38rem, calc(100dvh - 7.5rem));
  }
  .user-menu-fly {
    position: static;
    z-index: auto;
    min-width: 0;
    max-width: none;
    width: auto;
    max-height: min(42dvh, 16.5rem);
    margin: 0.12rem 0 0.15rem 0.35rem;
  }
  .user-menu-item .user-menu-caret {
    transform: rotate(90deg);
  }
  .user-menu-item.is-open .user-menu-caret,
  [data-help-menu].is-open .user-menu-caret {
    transform: rotate(-90deg);
  }
  .chat-hero {
    flex-wrap: nowrap;
    align-items: center;
  }
  .profile-hero {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .profile-hero-actions {
    margin-left: auto;
  }
  .bubble.user .bubble-body { max-width: min(36rem, 100%); }
  .hero h2 { font-size: 1.35rem; }
  .composer-dock {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .composer {
    padding-bottom: calc(0.7rem + var(--kb, 0px));
  }
  .composer-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
  }
  .composer-toolbar > .model-chip,
  .composer-toolbar > .model-chip-static {
    position: relative;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    min-width: 2.6rem;
    max-width: 2.6rem;
    padding: 0;
    margin: 0;
    border-radius: 0.75rem;
    justify-content: center;
    overflow: visible;
    gap: 0;
  }
  .composer-toolbar > .model-chip .model-chip-ico,
  .composer-toolbar > .model-chip-static .model-chip-ico {
    display: grid;
    width: auto;
    font-size: 1rem;
    color: var(--ink);
  }
  .composer-toolbar > .model-chip .dot,
  .composer-toolbar > .model-chip-static .dot,
  .composer-toolbar > .model-chip-static > .model-chip-name {
    display: none;
  }
  .composer-toolbar > .model-chip select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    background: none;
    border: 0;
    font-size: 1rem;
  }
  .composer-skills {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-left: auto;
    max-width: none;
    flex: none;
  }
  .composer-skills .skill-summary {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    min-width: 2.6rem;
    padding: 0;
    border-radius: 0.75rem;
    justify-content: center;
    gap: 0;
  }
  .composer-skills .skill-summary::after {
    display: none;
  }
  .composer-skills .skill-summary-ico {
    display: grid;
    font-size: 1rem;
    color: var(--ink);
  }
  .composer-skills .skill-summary-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .composer-skills .skill-summary-count {
    position: absolute;
    top: -0.2rem;
    right: -0.25rem;
    display: grid;
    place-items: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.22rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--bg);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
  }
  .composer-skills .composer-skill {
    position: relative;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    min-width: 2.6rem;
    max-width: 2.6rem;
    padding: 0;
    margin: 0;
    border-radius: 0.75rem;
    justify-content: center;
    overflow: visible;
  }
  .composer-skills .skill-pick-ico {
    display: grid;
    font-size: 1rem;
    color: var(--ink);
  }
  .composer-skills .composer-skill select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    background: none;
    border: 0;
    font-size: 1rem;
  }
  .skill-chips-panel {
    width: min(18rem, calc(100vw - 2rem));
    right: 0;
    left: auto;
  }
  .composer-hint { display: none; }
  #market-add-hf {
    display: none !important;
  }
  .context-meter,
  .context-meter.is-collapsed,
  .context-meter.is-expanded,
  .context-meter:hover,
  .composer:focus-within .context-meter {
    height: 1px !important;
  }
  .context-meter {
    pointer-events: none;
  }
  .context-meter-label,
  .context-meter.is-expanded .context-meter-label,
  .context-meter:hover .context-meter-label {
    display: none !important;
    opacity: 0 !important;
  }
  .send,
  .icon-action.attach {
    width: 2.6rem;
    height: 2.6rem;
  }
  .icon-action {
    min-width: 2.6rem;
    min-height: 2.6rem;
  }
  .conv-more,
  .folder-more .icon-action,
  .icon-action.select-many {
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
    min-height: 1.85rem;
  }
  .nav-bar-tools .select-many-tool.is-on,
  .nav-bar-tools .select-many-tool[aria-pressed="true"] {
    background: var(--hover);
    color: var(--ink);
  }
  /* Одна кнопка в шапке мобильного меню — в списке не дублируем */
  .conv-list .icon-action.select-many {
    display: none;
  }
  .query-map {
    display: flex !important;
    top: 40%;
    right: max(0.45rem, env(safe-area-inset-right));
    transform: translateY(-50%);
    z-index: 12;
  }
  .query-map-rail {
    gap: 0.4rem;
  }
  .query-map-panel {
    width: min(18rem, calc(100vw - 3.4rem));
    max-height: min(50vh, 22rem);
  }
  .query-map-toggle {
    width: 1.7rem;
    padding: 0.55rem 0.22rem;
    max-height: 9rem;
  }
  .query-map-scroll {
    width: 1.7rem;
    height: 1.7rem;
  }
  .query-map-scroll::before {
    width: 0.72rem;
    height: 0.72rem;
  }
  .thread,
  .conv-list,
  .skills-stage,
  .models-stage {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (hover: none) {
  .msg-actions { opacity: 1; }
  .conv-more,
  .folder-more { opacity: 1; }
  .side-tool[data-tip]::after,
  .side-tool[data-tip]::before,
  .theme-toggle[data-tip]::after,
  .icon-action[data-tip]::after,
  .people-action[data-tip]::after,
  .mcp-action[data-tip]::after {
    content: none;
    display: none;
  }
}

.help-table-wrap {
  overflow-x: auto;
  margin: 0.75rem 0 1rem;
}
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.help-table th,
.help-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--line);
}
.help-table th {
  color: var(--muted);
  font-weight: 650;
  font-size: 0.75rem;
}
.help-ref-list {
  margin: 0.5rem 0 1rem;
  padding-left: 1.2rem;
}
.help-ref-list li {
  margin: 0.25rem 0;
}
.help-body {
  width: 100%;
}
.help-body .profile-hero-copy h1 {
  font-size: 1.4rem;
  letter-spacing: -0.03em;
}
.help-body .profile-hero-copy .lede {
  font-size: 1.02rem;
  line-height: 1.5;
}
.help-card {
  gap: 1.5rem;
  padding: 1.7rem 1.85rem 1.8rem;
}
.help-copy {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: none;
}
.help-section,
.help-section-card {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--elev) 78%, transparent);
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  scroll-margin-top: 1rem;
}
.help-copy h2,
.help-section h2,
.help-section-card h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  scroll-margin-top: 1rem;
}
.help-copy > h2 {
  margin: 0.55rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.help-copy > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.help-copy p,
.help-copy li { line-height: 1.58; }
.help-copy ul,
.help-copy ol { margin: 0; padding-left: 1.15rem; }
.help-section .help-faq {
  margin-top: 0.15rem;
}
.help-copy .code-block {
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.help-copy .code-block-head {
  padding: 0.35rem 0.65rem;
}
.help-copy .code-block pre {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.65rem 0.7rem;
  white-space: pre;
  tab-size: 2;
  background: var(--code);
  -webkit-overflow-scrolling: touch;
}
.help-copy .code-block pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 0;
  background: none;
}
.help-copy kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--bg);
  font: inherit;
  font-size: 0.82em;
}
.help-faq {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
.help-faq details {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--bg);
}
.help-faq details[open] {
  border-color: var(--assistant-line);
}
.help-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary .side-ico.chevron {
  flex: none;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.help-faq details[open] > summary .side-ico.chevron {
  transform: rotate(90deg);
}
.help-faq-body {
  padding: 0 1rem 1rem;
  color: var(--muted);
  line-height: 1.55;
}
.help-faq-body p { margin: 0; }
.help-version {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 14%, var(--bg));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.help-mcp {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.7rem;
}
.help-mcp li {
  display: grid;
  gap: 0.28rem;
  align-content: start;
  padding: 0.85rem 0.95rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: var(--bg);
  line-height: 1.45;
}
.help-mcp code {
  width: fit-content;
  color: var(--muted);
  font-size: 0.78em;
}
.help-mcp span {
  color: var(--muted);
  font-size: 0.88rem;
}
.help-callout {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--bg);
}
.help-callout p { margin: 0; }
.help-callout--tip {
  background: color-mix(in srgb, var(--ok) 12%, var(--bg));
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
}
.help-callout--warn {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
}
.help-callout--note {
  background: var(--hover);
}
.help-api-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 0.15rem;
}
.help-api-tabs .skill-tab {
  font-size: 0.86rem;
  padding: 0.55rem 0.45rem;
  white-space: nowrap;
}
.help-card > .help-api-tabs + .help-copy {
  margin-top: 0.15rem;
}
.help-api-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}
.help-api-fact {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--bg) 70%, var(--elev));
}
.help-api-fact-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.help-api-fact-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.help-api-fact-link:hover {
  color: var(--ink);
  text-decoration: underline;
}
.help-steps {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.45rem;
}
.help-api-codes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.help-api-codes li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--bg) 65%, var(--elev));
}
.help-api-code {
  flex: none;
  min-width: 2.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.help-section .help-faq-body {
  display: grid;
  gap: 0.75rem;
}
.help-section .help-faq-body .code-block {
  margin: 0;
}
.help-section .help-faq-body ul,
.help-section .help-faq-body ol {
  margin: 0;
}
@media (max-width: 720px) {
  .help-api-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .help-api-facts {
    grid-template-columns: 1fr;
  }
}
.help-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.2rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.help-pager-link {
  display: grid;
  gap: 0.18rem;
  min-height: 3.4rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--assistant-line);
  border-radius: 1rem;
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}
.help-pager-link.is-next { text-align: right; }
.help-pager-link span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.help-pager-link strong { font-size: 0.95rem; }
.help-pager-link:hover { border-color: var(--link); }
.help-pager-link.is-empty {
  border: 0;
  background: transparent;
  min-height: 0;
  padding: 0;
}

.backup-section-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
}
.backup-export-card {
  display: grid;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--elev) 80%, transparent);
}
.backup-export-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: var(--hover);
  color: var(--ink);
  font-size: 1.2rem;
}
.backup-export-copy {
  display: grid;
  gap: 0.35rem;
}
.backup-export-copy .muted {
  margin: 0;
  max-width: 36rem;
}
.backup-import-lede {
  margin: 0 0 1rem;
  max-width: none;
  text-align: left;
}
.backup-import-form {
  margin-top: 0.25rem;
  max-width: none;
  width: 100%;
  align-items: stretch;
}
.backup-import-form .backup-import-password {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 650;
  font-size: 0.86rem;
  width: 100%;
}
.backup-import-actions {
  justify-content: center;
  width: 100%;
}
.backup-import-form .profile-hero-actions {
  justify-content: center;
}
.backup-progress {
  display: grid;
  gap: 0.65rem;
}
.backup-progress-stage {
  margin: 0;
  font-weight: 600;
}
.backup-progress-bar {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--hover);
  overflow: hidden;
}
.backup-progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent, #5a8f6b);
  transition: width 0.15s linear;
}
.backup-progress-pct {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

/* Shared file drop (avatar-like) */
.file-drop-studio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 28rem;
  margin: 0 auto;
  width: 100%;
}
.file-drop-studio.is-wide {
  max-width: none;
  margin: 0;
  align-items: stretch;
}
.file-drop-studio.is-wide .field-hint,
.file-drop-studio.is-wide .muted {
  text-align: left;
  max-width: none;
}
.file-drop-studio .field-hint,
.file-drop-studio .muted {
  text-align: center;
  margin: 0;
  max-width: 24rem;
}
.file-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 11rem;
  padding: 1.25rem 1rem;
  border: 1.5px dashed color-mix(in srgb, var(--line) 80%, var(--muted));
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--elev) 70%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.file-drop:hover,
.file-drop:focus-visible,
.file-drop.is-over {
  border-color: color-mix(in srgb, var(--accent, #5b8def) 55%, var(--line));
  background: color-mix(in srgb, var(--hover) 80%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b8def) 12%, transparent);
}
.file-drop.has-file {
  border-style: solid;
}
.file-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: var(--hover);
  color: var(--muted);
  font-size: 1.35rem;
}
.file-drop-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}
.file-drop-hint strong {
  font-size: 0.95rem;
}
.file-drop-hint span {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Model cards: 2 per row */
.model-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 720px) {
  .model-cards { grid-template-columns: 1fr; }
}
.model-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 100%;
  padding: 1rem 1.05rem 1.05rem;
}
.model-card .model-summary {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 550;
  line-height: 1.45;
  color: var(--ink);
}
.model-modality {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0.25rem;
}
.model-modality-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--ok) 14%, var(--hover));
  color: var(--ink);
}
.model-modality-chip.is-off {
  background: var(--hover);
  color: var(--muted);
  opacity: 0.75;
}
.model-modality-chip i { font-size: 0.75rem; opacity: 0.85; }
.model-hub-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.model-hub-link i {
  font-size: 0.72rem;
  opacity: 0.85;
}
.external-link {
  text-decoration: none;
}
.external-link:hover {
  text-decoration: underline;
}
.model-card-foot {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.35rem;
  width: 100%;
}
.model-card-foot .model-hub-link {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}
.model-card-foot form {
  margin-left: 0;
  flex: 0 0 auto;
}

/* Model market */
.market-hf-modal .market-hf-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 560px) {
  .market-hf-modal .market-hf-grid { grid-template-columns: 1fr; }
}
.market-hf-hint { margin: 0; font-size: 0.82rem; }
.market-view { margin-top: 0; }
.market-sections-card {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.market-sections-card .market-tabs {
  margin: 0;
}
.market-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin: 0 0 0.65rem;
}
.market-tabs .skill-tab {
  width: 100%;
  justify-content: center;
}
.market-family-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin: 0 0 1rem;
  gap: 0.22rem;
}
.market-family-tab {
  width: 100%;
  justify-content: center;
  font-size: 0.84rem;
  padding: 0.52rem 0.35rem;
  letter-spacing: -0.02em;
}
@media (max-width: 720px) {
  .market-family-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.market-category {
  margin-top: 1.75rem;
}
.market-category:first-of-type {
  margin-top: 0.5rem;
}
.market-category-head {
  margin: 0 0 0.85rem;
}
.market-category-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}
.market-category-blurb {
  margin: 0.28rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}
.market-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.icon-action.market-ico::before {
  content: none;
}
.icon-action.market-ico {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--ink) 5%, var(--hover));
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.icon-action.market-ico:hover {
  background: var(--hover);
  color: var(--ink);
}
.icon-action.market-ico.trash:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}
.market-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.45rem;
  margin: 1.25rem 0 0.35rem;
  padding: 2.1rem 1.35rem;
  border: 1px dashed color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 1.1rem;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--ok) 10%, transparent),
      transparent 58%
    ),
    color-mix(in srgb, var(--ink) 2.5%, var(--elev));
}
.market-empty[data-section="catalog"] {
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--ink) 8%, transparent),
      transparent 58%
    ),
    color-mix(in srgb, var(--ink) 2.5%, var(--elev));
}
.market-empty[data-section="installed"] {
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, goldenrod 12%, transparent),
      transparent 58%
    ),
    color-mix(in srgb, var(--ink) 2.5%, var(--elev));
}
.market-empty-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 14%, var(--hover));
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
  font-size: 1.15rem;
}
.market-empty[data-section="catalog"] .market-empty-icon {
  background: color-mix(in srgb, var(--ink) 8%, var(--hover));
  color: var(--ink);
}
.market-empty[data-section="installed"] .market-empty-icon {
  background: color-mix(in srgb, goldenrod 16%, var(--hover));
  color: color-mix(in srgb, goldenrod 70%, var(--ink));
}
.market-empty-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.market-empty-text {
  margin: 0;
  max-width: 28rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--muted);
}
.market-result-modal {
  display: grid;
  gap: 0.95rem;
  min-width: min(26rem, 100%);
  padding: 0.15rem 0 0.2rem;
}
.market-result-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--ink) 4%, var(--elev));
}
.market-result-hero-icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  font-size: 1.15rem;
  background: var(--hover);
  color: var(--muted);
}
.market-result-hero-copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}
.market-result-verdict {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.market-result-reason {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}
.market-result-hero.is-yes {
  background:
    radial-gradient(
      120% 100% at 0% 0%,
      color-mix(in srgb, var(--ok) 16%, transparent),
      transparent 60%
    ),
    color-mix(in srgb, var(--ok) 8%, var(--elev));
  border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.market-result-hero.is-yes .market-result-hero-icon {
  background: color-mix(in srgb, var(--ok) 18%, var(--hover));
  color: color-mix(in srgb, var(--ok) 72%, var(--ink));
}
.market-result-hero.is-maybe {
  background:
    radial-gradient(
      120% 100% at 0% 0%,
      color-mix(in srgb, goldenrod 18%, transparent),
      transparent 60%
    ),
    color-mix(in srgb, goldenrod 8%, var(--elev));
  border-color: color-mix(in srgb, goldenrod 24%, transparent);
}
.market-result-hero.is-maybe .market-result-hero-icon {
  background: color-mix(in srgb, goldenrod 18%, var(--hover));
  color: color-mix(in srgb, goldenrod 72%, var(--ink));
}
.market-result-hero.is-no {
  background:
    radial-gradient(
      120% 100% at 0% 0%,
      color-mix(in srgb, var(--danger) 16%, transparent),
      transparent 60%
    ),
    color-mix(in srgb, var(--danger) 8%, var(--elev));
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.market-result-hero.is-no .market-result-hero-icon {
  background: color-mix(in srgb, var(--danger) 14%, var(--hover));
  color: color-mix(in srgb, var(--danger) 75%, var(--ink));
}
.market-result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.market-result-metric {
  display: grid;
  gap: 0.18rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, var(--elev));
  min-width: 0;
}
.market-result-metric:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.market-result-metric-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.market-result-metric-value {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.market-result-metric-hint {
  font-size: 0.75rem;
  color: var(--muted);
}
@media (max-width: 520px) {
  .market-result-metrics {
    grid-template-columns: 1fr;
  }
  .market-result-metric:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
.market-cards {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 900px) {
  .market-cards { grid-template-columns: 1fr; }
}
.market-card {
  --market-accent: color-mix(in srgb, var(--ink) 45%, var(--muted));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--market-accent) 7%, var(--elev)) 0%,
      var(--elev) 42%,
      var(--elev) 100%
    );
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.market-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--market-accent);
  opacity: 0.85;
}
.market-card[data-purpose="qwen"] { --market-accent: #2f9e8f; }
.market-card[data-purpose="deepseek"] { --market-accent: #4a7fd4; }
.market-card[data-purpose="gemma"] { --market-accent: #c47a3a; }
.market-card[data-purpose="mistral"] { --market-accent: #c45c4a; }
.market-card[data-purpose="other"] { --market-accent: color-mix(in srgb, var(--ink) 55%, var(--muted)); }
.market-card:hover {
  border-color: color-mix(in srgb, var(--market-accent) 35%, var(--line));
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--ink) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--market-accent) 18%, transparent);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .market-card,
  .market-card:hover {
    transition: none;
    transform: none;
  }
}
.market-card.is-installed {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ok) 18%, transparent),
    0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}
.market-card.is-update {
  border-color: color-mix(in srgb, goldenrod 35%, var(--line));
}
.market-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  padding-left: 0.35rem;
  padding-bottom: 0.9rem;
}
.market-card-top {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.market-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}
.market-card .model-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
}
.market-card .model-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--hover);
  color: var(--muted);
  border: 1px solid transparent;
}
.market-card .model-badge.is-installed {
  color: color-mix(in srgb, var(--ok) 70%, var(--ink));
  background: color-mix(in srgb, var(--ok) 14%, var(--hover));
}
.market-card .model-badge.is-enabled {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, var(--hover));
}
.market-card .model-badge.is-update {
  color: color-mix(in srgb, goldenrod 70%, var(--ink));
  background: color-mix(in srgb, goldenrod 16%, var(--hover));
}
.market-card .model-badge.is-purpose {
  color: var(--ink);
  background: color-mix(in srgb, var(--market-accent, var(--ink)) 14%, var(--hover));
  border-color: color-mix(in srgb, var(--market-accent, var(--ink)) 22%, transparent);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 0.72rem;
}
.market-card-title {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
}
.market-repo {
  margin: 0;
  max-width: 100%;
}
.market-repo code {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 0.45rem;
  padding: 0.18rem 0.45rem;
}
.market-stats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  margin: 0.05rem 0 0;
  padding: 0.35rem 0.65rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--ink) 4%, var(--hover));
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--muted);
  width: fit-content;
  max-width: 100%;
}
.market-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
}
.market-stat i {
  font-size: 0.72rem;
  opacity: 0.75;
  translate: 0 -0.05em;
}
.market-stat strong {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.market-stat-sep {
  opacity: 0.45;
  font-weight: 600;
}
.market-star {
  color: color-mix(in srgb, goldenrod 75%, var(--ink));
  font-size: 0.95em;
  line-height: 1;
}
.market-card .model-summary {
  margin: 0;
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
}
.market-card .model-chips {
  margin: 0.15rem 0 0;
}
.market-card .model-chips li {
  background: color-mix(in srgb, var(--ink) 5%, var(--hover));
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.market-analysis {
  margin-top: 0.15rem;
}
.market-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  border: 1px solid transparent;
}
.market-verdict::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.market-verdict.is-yes {
  color: color-mix(in srgb, var(--ok) 75%, var(--ink));
  background: color-mix(in srgb, var(--ok) 14%, var(--hover));
  border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.market-verdict.is-maybe {
  color: color-mix(in srgb, goldenrod 70%, var(--ink));
  background: color-mix(in srgb, goldenrod 14%, var(--hover));
  border-color: color-mix(in srgb, goldenrod 24%, transparent);
}
.market-verdict.is-no {
  color: color-mix(in srgb, var(--danger) 75%, var(--ink));
  background: color-mix(in srgb, var(--danger) 12%, var(--hover));
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.market-verdict.is-pending {
  color: var(--muted);
  background: var(--hover);
}
.market-progress { display: grid; gap: 0.35rem; margin-top: 0.25rem; }
.market-progress-bar {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
}
.market-progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  background: color-mix(in srgb, var(--accent, #3d6b4f) 80%, var(--ink));
  transition: width 0.25s ease;
}
.market-progress-label { margin: 0; font-size: 0.82rem; }
.market-progress-label.is-error { color: color-mix(in srgb, firebrick 75%, var(--ink)); }

/* MCP deny menu like skills */
.icon-action.mcp-deny-lg {
  width: 1.85rem;
  height: 1.85rem;
  min-width: 1.85rem;
  min-height: 1.85rem;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent;
}
.icon-action.mcp-deny-lg:hover,
.icon-action.mcp-deny-lg:focus-visible {
  background: var(--hover);
  border-color: color-mix(in srgb, var(--ink) 32%, transparent);
  color: var(--ink);
}
.icon-action.mcp-deny-lg::before {
  width: 0.92rem;
  height: 0.92rem;
  margin: 0;
}
.mcp-deny-menu.skill-chips-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  min-width: 16rem;
  max-width: min(22rem, 92vw);
  max-height: min(22rem, 55vh);
  overflow: auto;
  padding: 0.55rem 0.6rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 40;
}
.mcp-deny-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.mcp-deny-group-title {
  margin: 0.2rem 0.15rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.mcp-deny-item.is-off {
  opacity: 0.55;
  cursor: default;
}
.mcp-deny-item.is-off input {
  cursor: not-allowed;
}
.side-ico.gear {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.07 7.07 0 0 0-1.63-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.49.42l-.36 2.54c-.59.24-1.13.55-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L2.71 8.48a.5.5 0 0 0 .12.64L4.86 10.7c-.04.31-.06.63-.06.94s.02.63.06.94L2.83 14.16a.5.5 0 0 0-.12.64l1.92 3.32c.14.24.43.34.68.22l2.39-.96c.5.39 1.04.71 1.63.94l.36 2.54c.05.24.25.42.49.42h3.8c.24 0 .44-.18.49-.42l.36-2.54c.59-.24 1.13-.55 1.63-.94l2.39.96c.25.12.54.02.68-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.14 12.94c.04-.31.06-.63.06-.94s-.02-.63-.06-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.07 7.07 0 0 0-1.63-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.49.42l-.36 2.54c-.59.24-1.13.55-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L2.71 8.48a.5.5 0 0 0 .12.64L4.86 10.7c-.04.31-.06.63-.06.94s.02.63.06.94L2.83 14.16a.5.5 0 0 0-.12.64l1.92 3.32c.14.24.43.34.68.22l2.39-.96c.5.39 1.04.71 1.63.94l.36 2.54c.05.24.25.42.49.42h3.8c.24 0 .44-.18.49-.42l.36-2.54c.59-.24 1.13-.55 1.63-.94l2.39.96c.25.12.54.02.68-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.03-1.58zM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7z'/%3E%3C/svg%3E");
}
.help-article .help-copy,
.help-card .help-copy {
  max-width: none;
  width: 100%;
  line-height: 1.55;
}
.help-article .help-section h2,
.help-card .help-section h2,
.help-article .help-section-card h2,
.help-card .help-section-card h2 {
  margin-top: 0;
  font-size: 1.08rem;
}
.help-article > h2,
.help-card > h2 {
  margin-top: 1.6rem;
  font-size: 1.15rem;
}
.help-lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  width: 100%;
}
.help-lead-card {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--elev) 80%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.help-lead-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--hover) 70%, var(--elev));
}
.help-lead-card strong {
  display: block;
  margin-bottom: 0.25rem;
}
.help-lead-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.model-notes {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}
.queue-live-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.queue-live-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--elev);
}
.queue-live-meta {
  flex: 1;
  min-width: 12rem;
}
.queue-live-meta strong { display: block; }
.queue-live-meta span { color: var(--muted); font-size: 0.82rem; }
.queue-live-empty { color: var(--muted); }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.85rem 1rem;
}
.settings-grid label:not(.settings-switch-row) {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 650;
  font-size: 0.86rem;
}
.settings-grid input,
.settings-grid select {
  font-weight: 500;
}
.settings-info-cards {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.settings-info-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--elev);
  min-height: 5.5rem;
}
.settings-info-card.is-accent {
  border-color: color-mix(in srgb, var(--link) 35%, var(--line));
  background: color-mix(in srgb, var(--link) 8%, var(--elev));
}
.settings-info-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-info-value {
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  word-break: break-word;
}
.settings-info-value code {
  font-size: 0.92em;
}
@media (max-width: 640px) {
  .settings-info-cards { grid-template-columns: 1fr; }
}

.model-switch-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.model-switch-overlay:not([hidden]) {
  display: grid;
}
.model-switch-overlay[hidden] {
  display: none !important;
  pointer-events: none;
}
body.is-model-switching {
  overflow: hidden;
  cursor: wait;
}
.model-switch-card {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  min-width: min(18rem, 100%);
  max-width: 22rem;
  padding: 1.6rem 1.8rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--elev) 92%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent),
    0 18px 48px color-mix(in srgb, #000 22%, transparent);
  text-align: center;
}
.model-switch-spinner {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-top-color: var(--ink);
  animation: model-switch-spin 0.75s linear infinite;
}
.model-switch-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink);
}
.model-switch-sub {
  margin: 0;
  max-width: 100%;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}
@keyframes model-switch-spin {
  to { transform: rotate(360deg); }
}