:root {
  --bg: #0e1015;
  --bg-accent: #13151b;
  --bg-elevated: #191c24;
  --bg-hover: #1f2330;
  --bg-muted: #1f2330;
  --card: #161920;
  --card-foreground: #f0f0f2;
  --card-highlight: #ffffff0a;
  --popover: #191c24;
  --popover-foreground: #f0f0f2;
  --panel: #0e1015;
  --panel-strong: #191c24;
  --panel-hover: #1f2330;
  --chrome: #0e1015f5;
  --chrome-strong: #0e1015fa;
  --text: #d4d4d8;
  --text-strong: #f4f4f5;
  --chat-text: #d4d4d8;
  --muted: #838387;
  --muted-strong: #62626a;
  --muted-foreground: #838387;
  --border: #1e2028;
  --border-strong: #2e3040;
  --border-hover: #3e4050;
  --input: #1e2028;
  --ring: #ff5c5c;
  --accent: #ff5c5c;
  --accent-hover: #ff7070;
  --accent-muted: #ff5c5c;
  --accent-subtle: #ff5c5c1a;
  --accent-foreground: #fafafa;
  --accent-glow: #ff5c5c33;
  --primary: #ff5c5c;
  --primary-foreground: #fff;
  --secondary: #161920;
  --secondary-foreground: #f0f0f2;
  --accent-2: #14b8a6;
  --accent-2-muted: #14b8a6b3;
  --accent-2-subtle: #14b8a61a;
  --ok: #22c55e;
  --ok-muted: #22c55ebf;
  --ok-subtle: #22c55e14;
  --destructive: #ef4444;
  --destructive-foreground: #fafafa;
  --warn: #f59e0b;
  --warn-muted: #f59e0bbf;
  --warn-subtle: #f59e0b14;
  --danger: #ef4444;
  --danger-muted: #ef4444bf;
  --danger-subtle: #ef444414;
  --info: #3b82f6;
  --focus: #ff5c5c33;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 60%, transparent);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 16px var(--accent-glow);
  --grid-line: #ffffff08;
  --theme-switch-x: 50%;
  --theme-switch-y: 50%;
  --mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-body);
  --shadow-sm: 0 1px 2px #00000040;
  --shadow-md: 0 4px 16px #0000004d;
  --shadow-lg: 0 12px 32px #0006;
  --shadow-xl: 0 24px 48px #00000080;
  --shadow-glow: 0 0 24px var(--accent-glow);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --radius: 10px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.1s;
  --duration-normal: 0.18s;
  --duration-slow: 0.3s;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}
:root[data-theme-mode='light'] {
  --bg: #f8f9fa;
  --bg-accent: #f1f3f5;
  --bg-elevated: #fff;
  --bg-hover: #eceef0;
  --bg-muted: #eceef0;
  --bg-content: #f1f3f5;
  --card: #fff;
  --card-foreground: #1a1a1e;
  --card-highlight: #00000005;
  --popover: #fff;
  --popover-foreground: #1a1a1e;
  --panel: #f8f9fa;
  --panel-strong: #f1f3f5;
  --panel-hover: #e6e8eb;
  --chrome: #f8f9faf5;
  --chrome-strong: #f8f9fafa;
  --text: #3c3c43;
  --text-strong: #1a1a1e;
  --chat-text: #3c3c43;
  --muted: #6e6e73;
  --muted-strong: #545458;
  --muted-foreground: #6e6e73;
  --border: #e5e5ea;
  --border-strong: #d1d1d6;
  --border-hover: #aeaeb2;
  --input: #e5e5ea;
  --accent: #dc2626;
  --accent-hover: #ef4444;
  --accent-muted: #dc2626;
  --accent-subtle: #dc262614;
  --accent-foreground: #fff;
  --accent-glow: #dc26261a;
  --primary: #dc2626;
  --primary-foreground: #fff;
  --secondary: #f1f3f5;
  --secondary-foreground: #3c3c43;
  --accent-2: #0d9488;
  --accent-2-muted: #0d9488bf;
  --accent-2-subtle: #0d948814;
  --ok: #15803d;
  --ok-muted: #15803dbf;
  --ok-subtle: #15803d14;
  --destructive: #dc2626;
  --destructive-foreground: #fafafa;
  --warn: #b45309;
  --warn-muted: #b45309bf;
  --warn-subtle: #b4530914;
  --danger: #dc2626;
  --danger-muted: #dc2626bf;
  --danger-subtle: #dc262614;
  --info: #2563eb;
  --focus: #dc262626;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 12px var(--accent-glow);
  --grid-line: #0000000a;
  --shadow-sm: 0 1px 2px #0000000a;
  --shadow-md: 0 4px 12px #0000000f;
  --shadow-lg: 0 12px 28px #00000014;
  --shadow-xl: 0 24px 48px #0000001a;
  --shadow-glow: 0 0 20px var(--accent-glow);
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}
:root[data-theme='openknot'] {
  --ring: #4f8ff7;
  --accent: #4f8ff7;
  --accent-hover: #6da3f9;
  --accent-muted: #4f8ff7;
  --accent-subtle: #4f8ff71f;
  --accent-glow: #4f8ff738;
  --primary: #4f8ff7;
  --primary-foreground: #0e1015;
  --accent-2: #38bdf8;
  --accent-2-muted: #38bdf8b3;
  --accent-2-subtle: #38bdf81a;
}
:root[data-theme='openknot-light'] {
  --ring: #2563eb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-muted: #2563eb;
  --accent-subtle: #2563eb1a;
  --accent-glow: #2563eb24;
  --primary: #2563eb;
  --accent-2: #0284c7;
  --accent-2-muted: #0284c7bf;
  --accent-2-subtle: #0284c714;
}
:root[data-theme='dash'] {
  --ring: #b47840;
  --accent: #b47840;
  --accent-hover: #c8885a;
  --accent-muted: #b47840;
  --accent-subtle: #b4784029;
  --accent-glow: #b478403d;
  --primary: #b47840;
  --primary-foreground: #1a1210;
  --focus: #b4784033;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 80%, transparent);
  --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 16px var(--accent-glow);
  --bg: #1a1210;
  --bg-accent: #201816;
  --bg-elevated: #28201c;
  --bg-hover: #302822;
  --bg-muted: #302822;
  --card: #221a16;
  --card-foreground: #ece0d8;
  --card-highlight: #fff0e10a;
  --popover: #28201c;
  --popover-foreground: #ece0d8;
  --panel: #1a1210;
  --panel-strong: #28201c;
  --panel-hover: #302822;
  --chrome: #1a1210f5;
  --chrome-strong: #1a1210fa;
  --text: #d8c8b8;
  --text-strong: #f0e4da;
  --chat-text: #d8c8b8;
  --muted: #9a8878;
  --muted-strong: #7a6858;
  --muted-foreground: #9a8878;
  --border: #302418;
  --border-strong: #443828;
  --border-hover: #5a4c3a;
  --input: #302418;
  --secondary: #221a16;
  --secondary-foreground: #ece0d8;
  --accent-2: #a88050;
  --accent-2-muted: #a88050b3;
  --accent-2-subtle: #a880501f;
  --shadow-sm: 0 1px 2px #0a060459;
  --shadow-md: 0 4px 16px #0a060473;
  --shadow-lg: 0 12px 32px #0a06048c;
  --grid-line: #fff0e108;
}
:root[data-theme='dash-light'] {
  --ring: #6e4828;
  --accent: #6e4828;
  --accent-hover: #5c3c20;
  --accent-muted: #6e4828;
  --accent-subtle: #6e48281f;
  --accent-glow: #6e482829;
  --primary: #6e4828;
  --primary-foreground: #fff;
  --bg: #f7f2ec;
  --bg-accent: #f0e8e0;
  --bg-elevated: #fff;
  --bg-hover: #e8ddd2;
  --bg-muted: #e8ddd2;
  --bg-content: #f0e8e0;
  --card: #fff;
  --card-foreground: #2c2118;
  --card-highlight: #50321405;
  --popover: #fff;
  --popover-foreground: #2c2118;
  --panel: #f7f2ec;
  --panel-strong: #f0e8e0;
  --panel-hover: #e0d4c8;
  --chrome: #f7f2ecf5;
  --chrome-strong: #f7f2ecfa;
  --text: #4a3828;
  --text-strong: #2c2118;
  --chat-text: #4a3828;
  --muted: #756050;
  --muted-strong: #604838;
  --muted-foreground: #756050;
  --border: #ddd0c2;
  --border-strong: #c8b8a6;
  --border-hover: #b0a090;
  --input: #ddd0c2;
  --secondary: #f0e8e0;
  --secondary-foreground: #4a3828;
  --accent-2: #6a4e30;
  --accent-2-muted: #6a4e30bf;
  --accent-2-subtle: #6a4e301a;
  --shadow-sm: 0 1px 2px #3c28140f;
  --shadow-md: 0 4px 12px #3c281414;
  --shadow-lg: 0 12px 28px #3c28141a;
  --grid-line: #5032140a;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  font: 400 13.5px/1.55 var(--font-body);
  letter-spacing: -0.01em;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
@keyframes theme-circle-transition {
  0% {
    clip-path: circle(0% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%));
  }
  to {
    clip-path: circle(150% at var(--theme-switch-x, 50%) var(--theme-switch-y, 50%));
  }
}
html.theme-transition {
  view-transition-name: theme;
}
html.theme-transition::view-transition-old(theme) {
  mix-blend-mode: normal;
  z-index: 1;
  animation: none;
}
html.theme-transition::view-transition-new(theme) {
  mix-blend-mode: normal;
  z-index: 2;
  animation: theme-circle-transition 0.4s var(--ease-out) forwards;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transition::view-transition-old(theme) {
    animation: none !important;
  }
  html.theme-transition::view-transition-new(theme) {
    animation: none !important;
  }
}
openclaw-app {
  z-index: 1;
  min-height: 100vh;
  display: block;
  position: relative;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
::selection {
  background: var(--accent-subtle);
  color: var(--text-strong);
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: 0 0;
}
::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: #ffffff14;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff24;
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes dashboard-enter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-hover) 50%, var(--bg-muted) 75%);
  border-radius: var(--radius-md);
  background-size: 200% 100%;
  animation: 1.5s ease-in-out infinite shimmer;
}
.skeleton-line {
  border-radius: var(--radius-sm);
  height: 14px;
}
.skeleton-line--short {
  width: 40%;
}
.skeleton-line--medium {
  width: 65%;
}
.skeleton-line--long {
  width: 85%;
}
.skeleton-stat {
  border-radius: var(--radius-sm);
  width: 60px;
  height: 28px;
}
.skeleton-block {
  border-radius: var(--radius-md);
  height: 48px;
}
@keyframes pulse-subtle {
  0%,
  to {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
@keyframes glow-pulse {
  0%,
  to {
    box-shadow: 0 0 #0000;
  }
  50% {
    box-shadow: 0 0 20px var(--accent-glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .glow-pulse,
  [class*='glow-pulse'] {
    animation: none !important;
  }
}
.stagger-1 {
  animation-delay: 0s;
}
.stagger-2 {
  animation-delay: 50ms;
}
.stagger-3 {
  animation-delay: 0.1s;
}
.stagger-4 {
  animation-delay: 0.15s;
}
.stagger-5 {
  animation-delay: 0.2s;
}
.stagger-6 {
  animation-delay: 0.25s;
}
:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.shell {
  --shell-pad: 16px;
  --shell-gap: 16px;
  --shell-nav-width: 258px;
  --shell-nav-rail-width: 78px;
  --shell-topbar-height: 52px;
  --shell-focus-duration: 0.2s;
  --shell-focus-ease: var(--ease-out);
  grid-template-columns: var(--shell-nav-width) minmax(0, 1fr);
  grid-template-rows: var(--shell-topbar-height) 1fr;
  height: 100vh;
  animation: dashboard-enter 0.3s var(--ease-out);
  transition: grid-template-columns var(--shell-focus-duration) var(--shell-focus-ease);
  grid-template-areas: 'nav topbar' 'nav content';
  gap: 0;
  display: grid;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .shell {
    height: 100dvh;
  }
}
.shell--chat {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .shell--chat {
    height: 100dvh;
  }
}
.shell--nav-collapsed {
  grid-template-columns: var(--shell-nav-rail-width) minmax(0, 1fr);
}
.shell--chat-focus {
  grid-template-columns: 0 minmax(0, 1fr);
}
.shell--onboarding {
  grid-template-rows: 0 1fr;
  grid-template-columns: 0 minmax(0, 1fr);
}
.shell--onboarding .topbar,
.shell--onboarding .shell-nav {
  display: none;
}
.shell--onboarding .content,
.shell--chat-focus .content {
  padding-top: 0;
}
.shell--chat-focus .content > * + * {
  margin-top: 0;
}
.topbar {
  z-index: 40;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  grid-area: topbar;
  align-items: center;
  min-height: 58px;
  padding: 0 24px;
  display: flex;
  position: sticky;
  top: 0;
}
.topnav-shell {
  width: 100%;
  min-height: var(--shell-topbar-height);
  box-shadow: none;
  background: 0 0;
  border: none;
  border-radius: 0;
  align-items: center;
  gap: 16px;
  padding: 0;
  display: flex;
}
.topbar-nav-toggle {
  display: none;
}
.topnav-shell__actions {
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  display: flex;
}
.topnav-shell__content {
  flex: 1;
  min-width: 0;
}
.topbar .nav-collapse-toggle {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
}
.topbar .nav-collapse-toggle__icon,
.topbar .nav-collapse-toggle__icon svg {
  width: 20px;
  height: 20px;
}
.topnav-shell .dashboard-header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}
.topnav-shell .dashboard-header__breadcrumb {
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  display: flex;
  overflow: hidden;
}
.topnav-shell .dashboard-header__breadcrumb-link,
.topnav-shell .dashboard-header__breadcrumb-sep {
  color: var(--muted);
}
.topnav-shell .dashboard-header__breadcrumb-current {
  color: var(--text-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 650;
  overflow: hidden;
}
.topbar-status {
  align-items: center;
  gap: 8px;
  display: flex;
}
.topbar-status .pill {
  box-sizing: border-box;
  gap: 6px;
  height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
}
.topbar-status .pill .mono {
  align-items: center;
  margin-top: 0;
  line-height: 1;
  display: flex;
}
.topbar-status .statusDot {
  width: 6px;
  height: 6px;
}
.topbar-status .theme-orb__trigger {
  width: 26px;
  height: 26px;
  font-size: 13px;
}
.topbar-search {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
  min-height: 38px;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
}
.topbar-search:hover {
  border-color: color-mix(in srgb, var(--border-strong) 90%, transparent);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  color: var(--text);
}
.topbar-search:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.topbar-search__label {
  text-align: left;
  flex: 1;
}
.topbar-search__kbd {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--mono);
  color: var(--muted);
  justify-content: center;
  align-items: center;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
}
.topbar-theme-mode {
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}
.topbar-theme-mode__btn {
  width: 30px;
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  transition:
    color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}
.topbar-theme-mode__btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.topbar-theme-mode__btn:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.topbar-theme-mode__btn--active {
  color: var(--accent);
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}
.topbar-theme-mode__btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.shell-nav {
  border-right: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  min-height: 100%;
  transition: width var(--shell-focus-duration) var(--shell-focus-ease);
  grid-area: nav;
  display: flex;
  overflow: hidden;
}
.shell-nav-backdrop {
  display: none;
}
.sidebar {
  background: color-mix(in srgb, var(--bg) 96%, var(--bg-elevated) 4%);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
:root[data-theme-mode='light'] .sidebar {
  background: color-mix(in srgb, var(--panel) 98%, white 2%);
}
.sidebar-shell {
  min-height: 0;
  box-shadow: none;
  background: 0 0;
  border: none;
  border-radius: 0;
  flex-direction: column;
  flex: 1;
  padding: 14px 10px 12px;
  display: flex;
}
.sidebar--collapsed {
  width: var(--shell-nav-rail-width);
  min-width: var(--shell-nav-rail-width);
  flex: 0 0 var(--shell-nav-rail-width);
}
.sidebar-shell__header,
.sidebar-shell__footer {
  flex-shrink: 0;
}
.sidebar-shell__header {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 0 8px 18px;
  display: flex;
}
.sidebar-shell__body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.sidebar-shell__footer {
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  padding: 12px 8px 0;
}
.sidebar-brand {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}
.sidebar-brand__logo {
  border-radius: 10px;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  box-shadow: 0 8px 18px #0000001f;
}
.sidebar-brand__copy {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}
.sidebar-brand__eyebrow {
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
}
.sidebar-brand__title {
  letter-spacing: -0.03em;
  color: var(--text-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  overflow: hidden;
}
.sidebar-nav {
  scrollbar-width: none;
  flex: 1;
  padding: 0;
  overflow: hidden auto;
}
.sidebar-nav::-webkit-scrollbar {
  display: none;
}
.nav-collapse-toggle {
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-strong) 68%, transparent);
  cursor: pointer;
  width: 36px;
  height: 36px;
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
  color: var(--muted);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  display: flex;
  box-shadow: inset 0 1px #ffffff14;
}
.nav-collapse-toggle:hover {
  background: color-mix(in srgb, var(--bg-hover) 90%, transparent);
  border-color: color-mix(in srgb, var(--border-strong) 88%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}
.nav-collapse-toggle__icon {
  width: 16px;
  height: 16px;
  color: inherit;
  justify-content: center;
  align-items: center;
  display: flex;
}
.nav-collapse-toggle__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
}
.nav-section {
  gap: 6px;
  margin-bottom: 16px;
  display: grid;
}
.nav-section:last-child {
  margin-bottom: 0;
}
.nav-section__items {
  gap: 4px;
  display: grid;
}
.nav-section--collapsed .nav-section__items {
  display: none;
}
.nav-section__label {
  width: 100%;
  min-height: 28px;
  color: color-mix(in srgb, var(--muted) 72%, var(--text) 28%);
  cursor: pointer;
  text-align: left;
  transition:
    color var(--duration-fast) ease,
    background var(--duration-fast) ease;
  background: 0 0;
  border: none;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  display: flex;
}
.nav-section__label:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
}
.nav-section__label-text {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}
.nav-section__chevron {
  opacity: 0.5;
  transition: transform var(--duration-fast) ease;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.nav-section__chevron svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 12px;
  height: 12px;
}
.nav-section--collapsed .nav-section__chevron {
  transform: rotate(-90deg);
}
.nav-item {
  min-height: 40px;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
  background: 0 0;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  text-decoration: none;
  display: flex;
  position: relative;
}
.nav-item__icon {
  opacity: 0.72;
  width: 16px;
  height: 16px;
  transition:
    opacity var(--duration-fast) ease,
    color var(--duration-fast) ease;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.nav-item__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
}
.nav-item__text {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.nav-item:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  text-decoration: none;
}
.nav-item:hover .nav-item__icon {
  opacity: 1;
}
.nav-item.active,
.nav-item--active {
  color: var(--text-strong);
  background: color-mix(in srgb, var(--accent-subtle) 88%, var(--bg-elevated) 12%);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow:
    inset 0 1px #ffffff1a,
    0 12px 24px #0000001a;
}
.nav-item.active .nav-item__icon,
.nav-item--active .nav-item__icon {
  opacity: 1;
  color: var(--accent);
}
.sidebar--collapsed .sidebar-shell {
  padding: 12px 8px 10px;
}
.sidebar--collapsed .sidebar-shell__header {
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0 2px 16px;
}
.sidebar--collapsed .sidebar-nav {
  padding: 0;
}
.sidebar--collapsed .nav-section {
  gap: 6px;
  margin-bottom: 16px;
}
.sidebar--collapsed .nav-item {
  width: 44px;
  min-height: 44px;
  box-shadow: none;
  border-color: #0000;
  border-radius: 16px;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}
.sidebar--collapsed .nav-item__icon,
.sidebar--collapsed .nav-item__icon svg {
  width: 18px;
  height: 18px;
}
.sidebar--collapsed .nav-item__text,
.sidebar--collapsed .nav-item__external-icon {
  display: none;
}
.sidebar--collapsed .nav-item--active:before,
.sidebar--collapsed .nav-item.active:before {
  content: '';
  background: color-mix(in srgb, var(--accent) 86%, transparent);
  width: 3px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 8px;
}
.sidebar--collapsed .nav-item.active,
.sidebar--collapsed .nav-item--active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-elevated) 86%) 0%,
    color-mix(in srgb, var(--accent) 8%, var(--bg) 92%) 100%
  );
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border) 82%);
  box-shadow:
    inset 0 1px #ffffff14,
    0 10px 20px #0000002e;
}
.sidebar--collapsed .nav-collapse-toggle {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  width: 42px;
  height: 42px;
  box-shadow:
    inset 0 1px #ffffff14,
    0 8px 18px #00000029;
}
.sidebar--collapsed .sidebar-brand__logo {
  border-radius: 12px;
  width: 34px;
  height: 34px;
  box-shadow:
    0 10px 20px #0003,
    inset 0 1px #ffffff1a;
}
.sidebar-utility-group {
  gap: 8px;
  display: grid;
}
.sidebar-utility-link {
  min-height: 42px;
}
.sidebar-version {
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  display: flex;
}
.sidebar-version__label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
}
.sidebar-version__text {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}
.sidebar-version__dot {
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 78%, white 22%);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  opacity: 1;
  margin: 0 auto;
}
.sidebar-version__status {
  border-radius: var(--radius-full);
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
}
.sidebar-version__status.sidebar-connection-status--online {
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent);
}
.sidebar-version__status.sidebar-connection-status--offline {
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent);
}
.sidebar--collapsed .sidebar-shell__footer {
  padding: 8px 0 2px;
}
.sidebar--collapsed .sidebar-utility-group {
  justify-items: center;
  gap: 6px;
}
.sidebar--collapsed .sidebar-version {
  border-radius: 16px;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
}
.sidebar--collapsed .sidebar-version__status {
  margin-left: 0;
}
.sidebar-mode-switch {
  display: none;
}
.shell--nav-collapsed .shell-nav {
  width: var(--shell-nav-rail-width);
  min-width: var(--shell-nav-rail-width);
}
.shell--chat-focus .shell-nav {
  pointer-events: none;
  opacity: 0;
  border-right-width: 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
}
.nav-item__external-icon {
  opacity: 0;
  width: 12px;
  height: 12px;
  transition: opacity var(--duration-fast) ease;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: inline-flex;
}
.nav-item__external-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 12px;
  height: 12px;
}
.nav-item:hover .nav-item__external-icon {
  opacity: 0.5;
}
.content {
  grid-area: content;
  min-height: 0;
  padding: 16px 20px 32px;
  display: block;
  overflow: hidden auto;
}
.content > * + * {
  margin-top: 20px;
}
:root[data-theme-mode='light'] .content {
  background: var(--bg-content);
}
.content--chat {
  flex-direction: column;
  gap: 2px;
  padding-bottom: 0;
  display: flex;
  overflow: hidden;
}
.content--chat > * + * {
  margin-top: 0;
}
.content-header {
  transform-origin: top;
  transition:
    opacity var(--shell-focus-duration) var(--shell-focus-ease),
    transform var(--shell-focus-duration) var(--shell-focus-ease),
    max-height var(--shell-focus-duration) var(--shell-focus-ease),
    padding var(--shell-focus-duration) var(--shell-focus-ease);
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  max-height: 80px;
  padding: 4px 8px;
  display: flex;
  overflow: hidden;
}
.shell--chat-focus .content-header {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  padding: 0;
  transform: translateY(-8px);
}
.page-title {
  letter-spacing: -0.03em;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
}
.page-sub {
  color: var(--muted);
  letter-spacing: -0.005em;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
}
.page-meta {
  gap: 8px;
  display: flex;
}
.content--chat .content-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 0;
}
.content--chat .content-header > div:first-child {
  text-align: left;
}
.content--chat .page-meta {
  justify-content: flex-start;
}
.content--chat .chat-controls {
  flex-shrink: 0;
}
.grid {
  gap: 20px;
  display: grid;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  display: grid;
}
.note-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  display: grid;
}
.row {
  align-items: center;
  gap: 12px;
  display: flex;
}
.stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  display: grid;
}
.filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}
@media (width<=1100px) {
  .shell {
    --shell-pad: 12px;
    --shell-gap: 12px;
    grid-template: 'topbar' 'nav' 'content' 1fr/1fr;
  }
  .grid-cols-2,
  .grid-cols-3 {
    grid-template-columns: 1fr;
  }
  .topbar {
    gap: 10px;
    padding: 12px 14px;
    position: static;
  }
  .topbar-status {
    flex-wrap: wrap;
  }
  .table-head,
  .table-row,
  .list-item {
    grid-template-columns: 1fr;
  }
}
.chat-mobile-controls-wrapper {
  display: none;
}
.chat-controls-mobile-toggle {
  border-radius: var(--radius-full);
  display: none;
}
.chat-controls-dropdown {
  display: none;
}
@media (width<=1100px) {
  .shell,
  .shell--nav-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--shell-topbar-height) minmax(0, 1fr);
    grid-template-areas: 'topbar' 'content';
  }
  .shell--chat-focus {
    grid-template-rows: var(--shell-topbar-height) minmax(0, 1fr);
  }
  .shell-nav,
  .shell--nav-collapsed .shell-nav {
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    width: min(86vw, 320px);
    min-width: 0;
    transition:
      transform var(--shell-focus-duration) var(--shell-focus-ease),
      opacity var(--shell-focus-duration) var(--shell-focus-ease);
    border-right: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translate(-100%);
    box-shadow: 0 30px 80px #0006;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .shell-nav {
    width: var(--shell-nav-rail-width);
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    transform: translate(0);
  }
  .shell--nav-drawer-open .shell-nav,
  .shell--nav-collapsed.shell--nav-drawer-open .shell-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0);
  }
  .shell-nav-backdrop {
    z-index: 65;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--shell-focus-duration) var(--shell-focus-ease);
    background: #00000085;
    border: 0;
    display: block;
    position: fixed;
    inset: 0;
  }
  .shell--nav-drawer-open .shell-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .topbar-nav-toggle {
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    width: 38px;
    height: 38px;
    color: var(--muted);
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    box-shadow: inset 0 1px #ffffff14;
  }
  .sidebar,
  .sidebar--collapsed {
    border-right: none;
    flex-direction: column;
    flex: auto;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .sidebar-shell,
  .sidebar--collapsed .sidebar-shell {
    border-radius: 0;
    padding: 18px 16px 14px;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar-shell,
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .sidebar-shell {
    padding: 12px 8px 10px;
  }
  .sidebar-shell__header {
    min-height: 0;
    padding: 0 4px 16px;
  }
  .sidebar-shell__header .nav-collapse-toggle {
    display: none;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar-shell__header {
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 0 2px 16px;
  }
  .sidebar-nav,
  .sidebar--collapsed .sidebar-nav {
    scrollbar-width: none;
    flex: auto;
    padding: 0;
    display: block;
    overflow: hidden auto;
  }
  .sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .sidebar--collapsed .sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .nav-section,
  .sidebar--collapsed .nav-section {
    margin-bottom: 16px;
    display: grid;
  }
  .sidebar-nav .nav-section__label,
  .sidebar--collapsed .nav-section__label {
    display: flex;
  }
  .nav-item,
  .sidebar--collapsed .nav-item {
    white-space: nowrap;
    border-radius: 12px;
    flex: none;
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 0 12px;
    font-size: 13px;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .nav-item {
    border-radius: 16px;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    margin: 0 auto;
    padding: 0;
  }
  .sidebar--collapsed .nav-item--active:before,
  .sidebar--collapsed .nav-item.active:before {
    content: none;
  }
  .sidebar--collapsed .nav-item__text,
  .sidebar--collapsed .nav-item__external-icon {
    display: inline-flex;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .nav-item__text,
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .nav-item__external-icon {
    display: none;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .nav-item--active:before,
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .nav-item.active:before {
    content: '';
    background: color-mix(in srgb, var(--accent) 86%, transparent);
    width: 3px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 34%, transparent);
    border-radius: 999px;
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 8px;
  }
  .sidebar--collapsed .sidebar-shell__footer {
    padding: 12px 8px 0;
  }
  .sidebar--collapsed .sidebar-version {
    width: auto;
    min-height: 40px;
    padding: 0 12px;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .sidebar-shell__footer {
    padding: 8px 0 2px;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar--collapsed .sidebar-version {
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .sidebar-mode-switch {
    display: none;
  }
}
@media (width<=768px) {
  .shell {
    --shell-pad: 8px;
    --shell-gap: 8px;
  }
  .topbar {
    min-height: auto;
    padding: 10px 12px;
  }
  .topnav-shell {
    flex-wrap: wrap;
    gap: 10px;
  }
  .topnav-shell__actions {
    flex: auto;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
  }
  .topnav-shell__content {
    width: 100%;
    display: none;
  }
  .topbar-nav-toggle {
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
    width: 38px;
    height: 38px;
    color: var(--muted);
    border-radius: 999px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: inline-flex;
    box-shadow: inset 0 1px #ffffff14;
  }
  .topbar-status {
    flex-wrap: nowrap;
    gap: 6px;
    width: auto;
  }
  .topbar-search {
    flex: 1;
    min-width: 0;
  }
  .topbar-theme-mode {
    display: none;
  }
  .sidebar-mode-switch {
    display: block;
  }
  .sidebar-mode-switch .topbar-theme-mode {
    justify-content: center;
    width: 100%;
    display: inline-flex;
  }
  .topbar-status .pill {
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
  }
  .topbar-status .pill .mono,
  .topbar-status .pill span:nth-child(2) {
    display: none;
  }
  .shell-nav,
  .shell--nav-collapsed .shell-nav {
    width: min(92vw, 320px);
  }
  .shell--nav-collapsed:not(.shell--nav-drawer-open) .shell-nav {
    width: 78px;
  }
  .sidebar-shell,
  .sidebar--collapsed .sidebar-shell {
    padding: 16px 14px 12px;
  }
  .nav-item,
  .sidebar--collapsed .nav-item {
    font-size: 12px;
  }
  .content-header,
  .content--chat .content-header {
    display: none;
  }
  .content--chat {
    gap: 2px;
  }
  .chat-mobile-controls-wrapper {
    display: flex;
    position: relative;
  }
  .chat-mobile-controls-wrapper .chat-controls-mobile-toggle {
    display: flex;
  }
  .chat-mobile-controls-wrapper .chat-controls-dropdown {
    z-index: 100;
    background: var(--card, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: 10px;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
    padding: 8px;
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    box-shadow: 0 8px 24px #0006;
  }
  .chat-mobile-controls-wrapper .chat-controls-dropdown.open {
    display: flex;
  }
  .chat-mobile-controls-wrapper .chat-controls-dropdown .chat-controls {
    flex-direction: column;
    gap: 4px;
    width: 100%;
    display: flex;
  }
  .chat-mobile-controls-wrapper .chat-controls-dropdown .chat-controls__session {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
  .chat-mobile-controls-wrapper .chat-controls-dropdown .chat-controls__session select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
  }
  .chat-mobile-controls-wrapper .chat-controls-dropdown .chat-controls__thinking {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 4px 0;
    display: flex;
  }
  .chat-mobile-controls-wrapper .chat-controls-dropdown .btn--icon {
    min-width: 44px;
    height: 44px;
  }
  .content {
    gap: 12px;
    padding: 4px 4px 16px;
  }
  .card {
    border-radius: var(--radius-md);
    padding: 12px;
  }
  .card-title {
    font-size: 13px;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .stat {
    border-radius: var(--radius-md);
    padding: 10px;
  }
  .stat-label {
    font-size: 11px;
  }
  .stat-value {
    font-size: 18px;
  }
  .note-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .field input,
  .field textarea,
  .field select {
    border-radius: var(--radius-md);
    padding: 8px 10px;
    font-size: 14px;
  }
  .btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  .pill {
    padding: 4px 10px;
    font-size: 12px;
  }
  .chat-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .chat-header__left {
    flex-direction: column;
    align-items: stretch;
  }
  .chat-header__right {
    justify-content: space-between;
  }
  .chat-session {
    min-width: unset;
    width: 100%;
  }
  .chat-thread {
    margin-top: 0;
    padding: 0 8px 12px;
  }
  .chat-msg {
    max-width: 90%;
  }
  .chat-bubble {
    border-radius: var(--radius-md);
    padding: 8px 12px;
  }
  .chat-compose {
    gap: 8px;
  }
  .chat-compose__field textarea {
    border-radius: var(--radius-md);
    min-height: 60px;
    padding: 8px 10px;
    font-size: 14px;
  }
  .agent-chat__input {
    margin: 0 8px 10px;
  }
  .agent-chat__toolbar {
    padding: 4px 8px;
  }
  .agent-chat__input-btn,
  .agent-chat__toolbar .btn-ghost {
    width: 28px;
    height: 28px;
  }
  .agent-chat__input-btn svg,
  .agent-chat__toolbar .btn-ghost svg {
    width: 14px;
    height: 14px;
  }
  .log-stream {
    border-radius: var(--radius-md);
    max-height: 380px;
  }
  .log-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px;
  }
  .log-time {
    font-size: 10px;
  }
  .log-level {
    font-size: 9px;
  }
  .log-subsystem {
    font-size: 11px;
  }
  .log-message {
    font-size: 12px;
  }
  .list-item {
    border-radius: var(--radius-md);
    padding: 10px;
  }
  .list-title {
    font-size: 13px;
  }
  .list-sub {
    font-size: 11px;
  }
  .code-block {
    border-radius: var(--radius-md);
    padding: 8px;
    font-size: 11px;
  }
  .theme-orb__trigger {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}
@media (width<=400px) {
  .shell {
    --shell-pad: 4px;
  }
  .topbar {
    padding: 8px 10px;
  }
  .brand-title {
    font-size: 13px;
  }
  .nav-item {
    padding: 6px 8px;
    font-size: 11px;
  }
  .content {
    gap: 10px;
    padding: 4px 4px 12px;
  }
  .card {
    padding: 10px;
  }
  .stat {
    padding: 8px;
  }
  .stat-value {
    font-size: 16px;
  }
  .chat-bubble {
    padding: 8px 10px;
  }
  .chat-compose__field textarea {
    min-height: 52px;
    padding: 8px 10px;
    font-size: 13px;
  }
  .btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .topbar-status .pill {
    padding: 3px 6px;
    font-size: 10px;
  }
  .theme-orb__trigger {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}
@media (width<=1400px) {
  .data-table th:nth-child(9),
  .data-table td:nth-child(9),
  .data-table th:nth-child(10),
  .data-table td:nth-child(10) {
    display: none;
  }
}
@media (width<=1100px) {
  .data-table th:nth-child(4),
  .data-table td:nth-child(4),
  .data-table th:nth-child(8),
  .data-table td:nth-child(8) {
    display: none;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px;
  }
}
@media (width<=900px) {
  .data-table th:nth-child(3),
  .data-table td:nth-child(3),
  .data-table th:nth-child(7),
  .data-table td:nth-child(7) {
    display: none;
  }
}
@media (width<=768px) {
  .data-table th:nth-child(6),
  .data-table td:nth-child(6) {
    display: none;
  }
  .data-table th,
  .data-table td {
    padding: 8px 6px;
    font-size: 12px;
  }
  .data-table-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 8px;
  }
  .data-table-pagination__info {
    text-align: center;
  }
  .data-table-pagination__controls {
    justify-content: center;
  }
  .data-table-search input {
    padding: 8px 10px;
    font-size: 14px;
  }
  .data-table-wrapper {
    border-radius: var(--radius-sm);
  }
  .session-key-cell {
    max-width: 200px;
  }
  .session-key-cell .session-link,
  .session-key-cell .session-key-display-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    overflow: hidden;
  }
  .filters {
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media (width<=500px) {
  .data-table th,
  .data-table td {
    padding: 6px 4px;
    font-size: 11px;
  }
  .session-key-cell {
    max-width: 140px;
  }
}
.chat {
  flex-direction: column;
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
  background: 0 0 !important;
  border: none !important;
}
.chat-header {
  background: 0 0;
  flex-wrap: nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding-bottom: 0;
  display: flex;
}
.chat-thread {
  background: 0 0;
  border-radius: 12px;
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 0 6px 6px;
  overflow: hidden auto;
}
.chat-thread-inner > :first-child {
  margin-top: 0 !important;
}
.chat-focus-exit {
  z-index: 100;
  border: 1px solid var(--border);
  background: var(--panel);
  width: 32px;
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  line-height: 1;
  transition:
    background 0.15s ease-out,
    color 0.15s ease-out,
    border-color 0.15s ease-out;
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
  box-shadow: 0 4px 12px #0003;
}
.chat-focus-exit:hover {
  background: var(--panel-strong);
  color: var(--text);
  border-color: var(--accent);
}
.chat-focus-exit svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
}
.chat-new-messages {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--panel-strong);
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  z-index: 10;
  border-radius: 999px;
  align-self: center;
  align-items: center;
  gap: 6px;
  margin: 8px auto;
  padding: 6px 14px;
  transition:
    background 0.15s ease-out,
    border-color 0.15s ease-out;
  display: inline-flex;
}
.chat-new-messages:hover {
  background: var(--panel);
  border-color: var(--accent);
}
.chat-new-messages svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.context-notice {
  border: 1px solid color-mix(in srgb, var(--ctx-color, #d97706) 35%, transparent);
  background: var(--ctx-bg, #d977061f);
  color: var(--ctx-color, #d97706);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  animation: fade-in 0.2s var(--ease-out);
  border-radius: 999px;
  align-self: center;
  align-items: center;
  gap: 8px;
  margin: 0 auto 8px;
  padding: 7px 14px;
  font-size: 13px;
  line-height: 1.2;
  display: inline-flex;
}
.context-notice__icon {
  stroke: currentColor;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.context-notice__detail {
  color: color-mix(in srgb, currentColor 72%, var(--muted));
  font-variant-numeric: tabular-nums;
}
.chat-compose {
  background: linear-gradient(to bottom, transparent, var(--bg) 20%);
  z-index: 10;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
  margin-top: auto;
  padding: 12px 4px 4px;
  display: flex;
  position: sticky;
  bottom: 0;
}
.chat-attachments {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 8px;
  display: inline-flex;
}
.chat-attachment {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 6px;
  width: 80px;
  height: 80px;
  position: relative;
  overflow: hidden;
}
.chat-attachment__img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.chat-attachment__remove {
  color: #fff;
  cursor: pointer;
  opacity: 0;
  background: #000000b3;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 1;
  transition: opacity 0.15s ease-out;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}
.chat-attachment:hover .chat-attachment__remove {
  opacity: 1;
}
.chat-attachment__remove:hover {
  background: color-mix(in srgb, var(--danger) 90%, black);
}
.chat-attachment__remove svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2px;
  width: 12px;
  height: 12px;
}
:root[data-theme-mode='light'] .chat-attachments {
  background: #f8fafc;
  border-color: #1018281a;
}
:root[data-theme-mode='light'] .chat-attachment {
  background: #fff;
  border-color: #10182826;
}
:root[data-theme-mode='light'] .chat-attachment__remove {
  background: #0009;
}
.chat-message-images {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}
.chat-message-image {
  object-fit: contain;
  cursor: pointer;
  border-radius: 8px;
  max-width: 300px;
  max-height: 200px;
  transition: transform 0.15s ease-out;
}
.chat-message-image:hover {
  transform: scale(1.02);
}
.chat-group.user .chat-message-images {
  justify-content: flex-end;
}
.chat-compose__row {
  flex: 1;
  align-items: stretch;
  gap: 12px;
  display: flex;
}
:root[data-theme-mode='light'] .chat-compose {
  background: linear-gradient(to bottom, transparent, var(--bg-content) 20%);
}
.chat-compose__field {
  flex: auto;
  align-items: stretch;
  min-width: 0;
  display: flex;
}
.chat-compose__field > span {
  display: none;
}
.chat-compose .chat-compose__field textarea {
  resize: none;
  white-space: pre-wrap;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 150px;
  font-family: var(--font-body);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.45;
  overflow-y: auto;
}
.chat-compose__actions {
  flex-shrink: 0;
  align-items: stretch;
  gap: 8px;
  display: flex;
}
.chat-compose .chat-compose__actions .btn {
  white-space: nowrap;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 16px;
  font-size: 13px;
  line-height: 1;
}
.agent-chat__input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  flex-direction: column;
  flex-shrink: 0;
  margin: 0 18px 14px;
  padding: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}
.agent-chat__input:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-strong) 24%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .agent-chat__input {
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
  }
}
.agent-chat__input > textarea {
  resize: none;
  width: 100%;
  min-height: 40px;
  max-height: 150px;
  color: var(--text);
  box-sizing: border-box;
  background: 0 0;
  border: none;
  outline: none;
  padding: 12px 14px 8px;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
}
.agent-chat__input > textarea:focus-visible {
  box-shadow: none;
}
.agent-chat__input > textarea::placeholder {
  color: var(--muted);
}
.agent-chat__toolbar {
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  display: flex;
}
.agent-chat__toolbar-left,
.agent-chat__toolbar-right {
  align-items: center;
  gap: 4px;
  display: flex;
}
.agent-chat__input-btn,
.agent-chat__toolbar .btn-ghost {
  border-radius: var(--radius-sm);
  width: 30px;
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  background: 0 0;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}
.agent-chat__input-btn svg,
.agent-chat__toolbar .btn-ghost svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
}
.agent-chat__input-btn:hover:not(:disabled),
.agent-chat__toolbar .btn-ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-hover);
}
.agent-chat__input-btn:disabled,
.agent-chat__toolbar .btn-ghost:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.agent-chat__input-btn--active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.agent-chat__input-divider {
  background: var(--border);
  width: 1px;
  height: 16px;
  margin: 0 4px;
}
.agent-chat__token-count {
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  font-size: 0.7rem;
}
.chat-send-btn {
  border-radius: var(--radius-md);
  background: var(--muted-strong);
  width: 30px;
  height: 30px;
  color: var(--text-strong);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}
.chat-send-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 15px;
  height: 15px;
}
.chat-send-btn:hover:not(:disabled) {
  background: var(--muted);
  box-shadow: none;
}
.chat-send-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.chat-send-btn--stop {
  background: var(--danger);
}
.chat-send-btn--stop:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger) 85%, #fff);
}
.slash-menu {
  background: var(--popover);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  max-height: 320px;
  box-shadow: var(--shadow-lg);
  z-index: 30;
  scrollbar-width: thin;
  margin-bottom: 4px;
  padding: 6px;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  overflow-y: auto;
}
.slash-menu-group + .slash-menu-group {
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  margin-top: 4px;
  padding-top: 4px;
}
.slash-menu-group__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  opacity: 0.7;
  padding: 4px 10px 2px;
  font-size: 0.68rem;
  font-weight: 700;
}
.slash-menu-item {
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  display: flex;
}
.slash-menu-item:hover,
.slash-menu-item--active {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-hover));
}
.slash-menu-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.slash-menu-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.slash-menu-item--active .slash-menu-icon,
.slash-menu-item:hover .slash-menu-icon {
  opacity: 1;
}
.slash-menu-name {
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--accent);
  white-space: nowrap;
}
.slash-menu-args {
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--mono);
  opacity: 0.65;
}
.slash-menu-desc {
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--muted);
  flex: 1;
  font-size: 0.75rem;
  overflow: hidden;
}
.slash-menu-item--active .slash-menu-name {
  color: var(--accent-hover);
}
.slash-menu-item--active .slash-menu-desc {
  color: var(--text);
}
.chat-attachments-preview {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  display: flex;
}
.chat-attachment-thumb {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  width: 60px;
  height: 60px;
  position: relative;
  overflow: hidden;
}
.chat-attachment-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.chat-attachment-remove {
  color: #fff;
  cursor: pointer;
  background: #0009;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 2px;
  right: 2px;
}
.chat-attachment-file {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  align-items: center;
  gap: 4px;
  padding: 4px;
  font-size: 0.72rem;
  display: flex;
  overflow: hidden;
}
.agent-chat__file-input {
  display: none;
}
.chat-controls {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  display: flex;
}
.chat-controls__session {
  min-width: 140px;
  max-width: 300px;
}
.chat-controls__session-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}
.chat-controls__model {
  min-width: 170px;
  max-width: 320px;
}
.chat-controls__thinking {
  align-items: center;
  gap: 6px;
  font-size: 13px;
  display: flex;
}
.btn--icon {
  border: 1px solid var(--border);
  background: #ffffff0f;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  padding: 8px !important;
}
.chat-controls__separator {
  color: #fff6;
  margin: 0 8px;
  font-size: 18px;
  font-weight: 300;
}
:root[data-theme-mode='light'] .chat-controls__separator {
  color: #1018284d;
}
.btn--icon:hover {
  background: #ffffff1f;
  border-color: #fff3;
}
:root[data-theme-mode='light'] .btn--icon {
  border-color: var(--border);
  color: var(--muted);
  background: #fff;
  box-shadow: 0 1px 2px #1018280d;
}
:root[data-theme-mode='light'] .btn--icon:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: #fff;
}
:root[data-theme-mode='light'] .chat-controls .btn--icon.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-subtle);
}
.btn--icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px;
  height: 18px;
  display: block;
}
.chat-controls__session select {
  text-overflow: ellipsis;
  max-width: 300px;
  padding: 6px 10px;
  font-size: 13px;
  overflow: hidden;
}
.chat-controls__model select {
  max-width: 320px;
}
.chat-controls__thinking {
  border: 1px solid var(--border);
  background: #ffffff0a;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  display: flex;
}
:root[data-theme-mode='light'] .chat-controls__thinking {
  background: #ffffffe6;
  border-color: #10182826;
}
@media (width<=768px) {
  .chat-controls__session {
    min-width: 120px;
    max-width: none;
  }
  .chat-controls__model {
    min-width: 140px;
    max-width: none;
  }
  .chat-controls {
    gap: 8px;
  }
  .chat-compose__field textarea {
    min-height: 64px;
  }
}
@media (width<=640px) {
  .chat-session {
    min-width: 140px;
  }
  .chat-compose {
    grid-template-columns: 1fr;
  }
  .chat-compose__row {
    flex-direction: column;
    gap: 8px;
  }
  .chat-compose__actions {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .chat-compose .chat-compose__actions .btn {
    width: 100%;
  }
  .chat-controls {
    flex-wrap: wrap;
    gap: 8px;
  }
  .chat-controls__session {
    min-width: 120px;
  }
  .chat-controls__model {
    min-width: 150px;
  }
}
.chat-loading-skeleton {
  animation: fade-in 0.3s var(--ease-out);
  padding: 4px 0;
}
.agent-chat__welcome {
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 48px 24px;
  display: flex;
}
.agent-chat__welcome-glow {
  display: none;
}
.agent-chat__welcome h2 {
  color: var(--foreground);
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.agent-chat__avatar--logo {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 14px;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
  overflow: hidden;
}
.agent-chat__avatar--logo img {
  object-fit: contain;
  width: 32px;
  height: 32px;
}
.agent-chat__badges {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}
.agent-chat__badge {
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 100px;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}
.agent-chat__badge img {
  object-fit: contain;
  width: 14px;
  height: 14px;
}
.agent-chat__hint {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
}
.agent-chat__hint kbd {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  display: inline-block;
}
.agent-chat__suggestions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 480px;
  margin-top: 8px;
  display: flex;
}
.agent-chat__suggestion {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--foreground);
  cursor: pointer;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.agent-chat__suggestion:hover {
  background: var(--panel-strong);
  border-color: var(--accent);
}
.chat-thinking {
  color: var(--muted);
  background: #ffffff0a;
  border: 1px dashed #ffffff2e;
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
}
:root[data-theme-mode='light'] .chat-thinking {
  background: #1018280a;
  border-color: #10182840;
}
.chat-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 1.5;
}
.chat-text :where(p + p, p + ul, p + ol, p + pre, p + blockquote) {
  margin-top: 0.75em;
}
.chat-text :where(a) {
  color: var(--accent);
  text-underline-offset: 2px;
  text-decoration: underline;
}
.chat-text :where(a:hover) {
  opacity: 0.8;
}
.chat-text :where(.markdown-inline-image) {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--secondary) 70%, transparent);
  object-fit: contain;
  width: auto;
  max-width: min(100%, 420px);
  height: auto;
  max-height: 320px;
  margin-top: 0.75em;
  display: block;
}
.chat-text :where(:not(pre) > code) {
  overflow-wrap: normal;
  word-break: keep-all;
  background: #00000026;
  border-radius: 4px;
  padding: 0.15em 0.4em;
}
.chat-text :where(pre) {
  background: #00000026;
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
}
.chat-text :where(pre code) {
  background: 0 0;
  padding: 0;
}
.chat-text :where(blockquote) {
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #ffffff05;
  margin-left: 0;
  padding: 8px 12px;
}
.chat-text :where(blockquote blockquote) {
  border-left-color: var(--border-hover);
  background: #ffffff08;
  margin-top: 8px;
}
.chat-text :where(blockquote blockquote blockquote) {
  border-left-color: var(--muted-strong);
  background: #ffffff0a;
}
:root[data-theme-mode='light'] .chat-text :where(blockquote) {
  background: #00000008;
}
:root[data-theme-mode='light'] .chat-text :where(blockquote blockquote) {
  background: #0000000d;
}
:root[data-theme-mode='light'] .chat-text :where(blockquote blockquote blockquote) {
  background: #0000000a;
}
:root[data-theme-mode='light'] .chat-text :where(:not(pre) > code) {
  background: #00000014;
  border: 1px solid #0000001a;
}
:root[data-theme-mode='light'] .chat-text :where(pre) {
  background: #0000000d;
  border: 1px solid #0000001a;
}
.chat-text[dir='rtl'] {
  text-align: right;
}
.chat-text[dir='rtl'] :where(ul, ol) {
  padding-left: 0;
  padding-right: 1.5em;
}
.chat-text[dir='rtl'] :where(blockquote) {
  border-left: none;
  border-right: 3px solid var(--border);
  padding-left: 0;
  padding-right: 1em;
}
@media (width<=640px) {
  .chat-text :where(pre) {
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .chat-text :where(.markdown-inline-image) {
    max-width: 100%;
    max-height: 240px;
  }
  .chat-text :where(blockquote) {
    padding: 6px 10px;
  }
}
.chat-group {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  margin-left: 4px;
  margin-right: 16px;
  display: flex;
}
.chat-group.user {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.chat-group-messages {
  flex-direction: column;
  flex: auto;
  gap: 2px;
  max-width: min(900px, 68%);
  display: flex;
}
.chat-group.user .chat-group-messages {
  align-items: stretch;
}
@media (width<=600px) {
  .chat-group-messages {
    max-width: 82%;
  }
}
.chat-group.user .chat-group-footer {
  justify-content: flex-end;
}
.chat-group-footer {
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  display: flex;
}
.chat-sender-name {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.chat-group-timestamp {
  color: var(--muted);
  opacity: 0.7;
  font-size: 11px;
}
.chat-group-footer button {
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  background: 0 0;
  border: none;
  justify-content: center;
  align-items: center;
  padding: 2px;
  transition:
    opacity 0.12s ease-out,
    color 0.12s ease-out,
    background 0.12s ease-out;
  display: inline-flex;
}
.chat-group:hover .chat-group-footer button {
  opacity: 0.6;
  pointer-events: auto;
}
.chat-group-footer button:hover {
  background: var(--bg-hover, #ffffff14);
  opacity: 1 !important;
}
.chat-group-footer button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.chat-tts-btn--active {
  color: var(--accent);
  opacity: 1 !important;
  pointer-events: auto !important;
}
.chat-group-delete:hover {
  color: var(--danger) !important;
}
.chat-divider {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 10px;
  margin: 18px 8px;
  font-size: 11px;
  display: flex;
}
.chat-divider__line {
  background: var(--border);
  opacity: 0.9;
  flex: 1 1 0;
  height: 1px;
}
.chat-divider__label {
  border: 1px solid var(--border);
  background: #ffffff05;
  border-radius: 999px;
  padding: 2px 10px;
}
.chat-avatar {
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-shrink: 0;
  align-self: flex-end;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}
.chat-avatar.user {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.chat-avatar.assistant,
.chat-avatar.other,
.chat-avatar.tool {
  background: var(--secondary);
  color: var(--muted);
}
img.chat-avatar {
  object-fit: cover;
  object-position: center;
  display: block;
}
.chat-bubble {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: none;
  transition:
    background var(--duration-fast) ease-out,
    border-color var(--duration-fast) ease-out;
  box-sizing: border-box;
  word-wrap: break-word;
  width: 100%;
  max-width: 100%;
  padding: 10px 14px;
  display: block;
  position: relative;
}
.chat-bubble.has-copy {
  padding-right: 36px;
}
.chat-bubble-actions {
  opacity: 0;
  pointer-events: none;
  gap: 4px;
  transition: opacity 0.12s ease-out;
  display: flex;
  position: absolute;
  top: 6px;
  right: 8px;
}
.chat-bubble:hover .chat-bubble-actions {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .chat-bubble-actions {
    opacity: 1;
    pointer-events: auto;
  }
}
.chat-copy-btn,
.chat-expand-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1;
  transition: background 0.12s ease-out;
}
.chat-copy-btn__icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  position: relative;
}
.chat-copy-btn__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.chat-copy-btn__icon-copy,
.chat-copy-btn__icon-check {
  transition: opacity 0.15s;
  position: absolute;
  top: 0;
  left: 0;
}
.chat-copy-btn__icon-check,
.chat-copy-btn[data-copied='1'] .chat-copy-btn__icon-copy {
  opacity: 0;
}
.chat-copy-btn[data-copied='1'] .chat-copy-btn__icon-check {
  opacity: 1;
}
.chat-copy-btn:hover,
.chat-expand-btn:hover {
  background: var(--bg-hover);
}
.chat-copy-btn[data-copying='1'] {
  opacity: 0;
  pointer-events: none;
}
.chat-copy-btn[data-error='1'] {
  border-color: var(--danger-subtle);
  background: var(--danger-subtle);
  color: var(--danger);
}
.chat-copy-btn[data-copied='1'] {
  border-color: var(--ok-subtle);
  background: var(--ok-subtle);
  color: var(--ok);
}
.chat-copy-btn:focus-visible,
.chat-expand-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-expand-btn__icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
}
.chat-expand-btn__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
:root[data-theme-mode='light'] .chat-bubble {
  border-color: var(--border);
  box-shadow: inset 0 1px 0 var(--card-highlight);
}
.chat-bubble:hover {
  background: var(--bg-hover);
}
.chat-group.user .chat-bubble {
  background: var(--accent-subtle);
  border-color: #0000;
}
:root[data-theme-mode='light'] .chat-group.user .chat-bubble {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  background: var(--accent-subtle);
}
.chat-group.user .chat-bubble:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
@keyframes pulsing-border {
  0%,
  to {
    border-color: var(--border);
  }
  50% {
    border-color: var(--accent);
  }
}
.chat-bubble.fade-in {
  animation: 0.2s ease-out fade-in;
}
.msg-meta {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
}
.msg-meta__tokens,
.msg-meta__cache,
.msg-meta__cost,
.msg-meta__ctx,
.msg-meta__model {
  white-space: nowrap;
  align-items: center;
  gap: 2px;
  display: inline-flex;
}
.msg-meta__model {
  background: var(--bg-hover, #ffffff0f);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono, monospace);
  padding: 1px 6px;
}
.msg-meta__cost {
  color: var(--ok);
}
.msg-meta__ctx--warn {
  color: var(--warn);
}
.msg-meta__ctx--danger {
  color: var(--danger);
}
.chat-delete-wrap {
  display: inline-flex;
  position: relative;
}
.chat-delete-confirm {
  background: var(--card, #1a1a1a);
  border: 1px solid var(--border, #ffffff1a);
  border-radius: var(--radius-md, 8px);
  z-index: 100;
  min-width: 200px;
  max-width: calc(100vw - 48px);
  padding: 12px;
  animation: 0.15s ease-out scale-in;
  position: absolute;
  bottom: calc(100% + 6px);
  box-shadow: 0 8px 24px #0006;
}
.chat-delete-confirm--left {
  right: 0;
}
.chat-delete-confirm--right {
  left: 0;
}
.chat-delete-confirm__text {
  color: var(--fg, #fff);
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
}
.chat-delete-confirm__remember {
  color: var(--muted, #888);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 11px;
  display: flex;
}
.chat-delete-confirm__check {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}
.chat-delete-confirm__actions {
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}
.chat-delete-confirm__cancel,
.chat-delete-confirm__yes {
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  border: none;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.12s ease-out;
}
.chat-delete-confirm__cancel {
  background: var(--bg-hover, #ffffff14);
  color: var(--muted, #888);
}
.chat-delete-confirm__cancel:hover {
  background: #ffffff1f;
}
.chat-delete-confirm__yes {
  background: var(--danger);
  color: #fff;
}
.chat-delete-confirm__yes:hover {
  background: #dc2626;
}
.chat-tool-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition:
    border-color var(--duration-fast) ease-out,
    background var(--duration-fast) ease-out;
  max-height: 120px;
  margin-top: 6px;
  padding: 10px 12px;
  overflow: hidden;
}
.chat-tool-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.chat-tool-card:first-child {
  margin-top: 0;
}
.chat-tool-card--clickable {
  cursor: pointer;
}
.chat-tool-card--clickable:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-tool-card__header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}
.chat-tool-card__title {
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-flex;
}
.chat-tool-card__icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: inline-flex;
}
.chat-tool-card__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.chat-tool-card__action {
  color: var(--accent);
  opacity: 0.8;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  transition: opacity 0.15s ease-out;
  display: inline-flex;
}
.chat-tool-card__action svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 12px;
  height: 12px;
}
.chat-tool-card--clickable:hover .chat-tool-card__action {
  opacity: 1;
}
.chat-tool-card__status {
  color: var(--ok);
  align-items: center;
  display: inline-flex;
}
.chat-tool-card__status svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.chat-tool-card__status-text {
  margin-top: 4px;
  font-size: 11px;
}
.chat-tool-card__detail {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
}
.chat-tool-card__preview {
  color: var(--muted);
  background: var(--secondary);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  border: 1px solid var(--border);
  max-height: 44px;
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
}
.chat-tool-card--clickable:hover .chat-tool-card__preview {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.chat-tool-card__inline {
  color: var(--text);
  background: var(--secondary);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 11px;
}
.chat-tools-summary {
  cursor: pointer;
  color: var(--muted);
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  list-style: none;
  transition:
    color 0.15s,
    background 0.15s;
  display: flex;
}
.chat-tools-summary::-webkit-details-marker {
  display: none;
}
.chat-tools-summary:before {
  content: '▸';
  flex-shrink: 0;
  font-size: 10px;
  transition: transform 0.15s;
}
.chat-tools-collapse[open] > .chat-tools-summary:before {
  transform: rotate(90deg);
}
.chat-tools-summary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-hover) 50%, transparent);
}
.chat-tools-summary__icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0.7;
  flex-shrink: 0;
  align-items: center;
  display: inline-flex;
}
.chat-tools-summary__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.chat-tools-summary__count {
  color: var(--text);
  font-weight: 600;
}
.chat-tools-summary__names {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  overflow: hidden;
}
.chat-tools-collapse__body {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding: 4px 12px 12px;
}
.chat-tools-collapse__body .chat-tool-card:first-child {
  margin-top: 8px;
}
.chat-json-collapse {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--secondary) 60%, transparent);
  margin-top: 4px;
  overflow: hidden;
}
.chat-json-summary {
  cursor: pointer;
  color: var(--muted);
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  list-style: none;
  transition:
    color 0.15s,
    background 0.15s;
  display: flex;
}
.chat-json-summary::-webkit-details-marker {
  display: none;
}
.chat-json-summary:before {
  content: '▸';
  flex-shrink: 0;
  font-size: 10px;
  transition: transform 0.15s;
}
.chat-json-collapse[open] > .chat-json-summary:before {
  transform: rotate(90deg);
}
.chat-json-summary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-hover) 50%, transparent);
}
.chat-json-badge {
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  align-items: center;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
}
.chat-json-label {
  font-family: var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}
.chat-json-content {
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-family: var(--mono);
  color: var(--text);
  max-height: 400px;
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
}
.chat-json-content code {
  font-family: inherit;
  font-size: inherit;
}
.chat-tool-msg-collapse {
  margin-top: 2px;
}
.chat-tool-msg-summary {
  cursor: pointer;
  color: var(--muted);
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-hover) 35%, transparent);
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  list-style: none;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
  display: flex;
}
.chat-tool-msg-summary::-webkit-details-marker {
  display: none;
}
.chat-tool-msg-summary:before {
  content: '▸';
  flex-shrink: 0;
  font-size: 10px;
  transition: transform 0.15s;
}
.chat-tool-msg-collapse[open] > .chat-tool-msg-summary:before {
  transform: rotate(90deg);
}
.chat-tool-msg-summary:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--bg-hover) 60%, transparent);
  border-color: color-mix(in srgb, var(--border-strong) 70%, transparent);
}
.chat-tool-msg-summary__icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0.75;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.chat-tool-msg-summary__icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.chat-tool-msg-summary__label {
  color: var(--text);
  flex-shrink: 0;
  font-weight: 600;
}
.chat-tool-msg-summary__names,
.chat-tool-msg-summary__preview {
  font-family: var(--mono);
  opacity: 0.85;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 0;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
}
.chat-tool-msg-body {
  padding-top: 8px;
}
.chat-reading-indicator {
  border: 1px solid var(--border);
  background: 0 0;
  padding: 12px;
  display: inline-flex;
}
.chat-reading-indicator__dots {
  align-items: center;
  gap: 6px;
  display: flex;
}
.chat-reading-indicator__dots span {
  background: var(--muted);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.4s ease-in-out infinite reading-pulse;
}
.chat-reading-indicator__dots span:first-child {
  animation-delay: 0s;
}
.chat-reading-indicator__dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.chat-reading-indicator__dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes reading-pulse {
  0%,
  60%,
  to {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (width<=768px) {
  .chat-tool-card {
    max-height: 100px;
    padding: 8px 10px;
  }
  .chat-tool-card__title {
    font-size: 12px;
  }
  .chat-tool-card__preview {
    max-height: 36px;
    margin-top: 6px;
    padding: 6px 8px;
    font-size: 10px;
  }
  .chat-tool-card__detail {
    font-size: 11px;
  }
  .chat-tools-summary {
    padding: 6px 10px;
  }
  .chat-tools-collapse__body {
    padding: 4px 10px 10px;
  }
  .chat-json-content {
    max-height: 300px;
    padding: 8px 10px;
    font-size: 11px;
  }
}
@media (width<=480px) {
  .chat-tool-card {
    max-height: 80px;
    padding: 6px 8px;
  }
  .chat-tool-card__preview {
    max-height: 28px;
    padding: 4px 6px;
  }
  .chat-json-content {
    max-height: 200px;
  }
}
.chat-split-container {
  flex: 1;
  gap: 0;
  height: 100%;
  min-height: 0;
  display: flex;
}
.chat-main {
  flex-direction: column;
  min-width: 400px;
  transition: flex 0.25s ease-out;
  display: flex;
  overflow: hidden;
}
.chat-sidebar {
  border-left: 1px solid var(--border);
  flex-direction: column;
  flex: 1;
  min-width: 300px;
  animation: 0.2s ease-out slide-in;
  display: flex;
  overflow: hidden;
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translate(20px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.sidebar-panel {
  background: var(--panel);
  flex-direction: column;
  height: 100%;
  display: flex;
}
.sidebar-header {
  border-bottom: 1px solid var(--border);
  z-index: 10;
  background: var(--panel);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
  position: sticky;
  top: 0;
}
.sidebar-header .btn {
  min-width: auto;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 1;
}
.sidebar-title {
  font-size: 14px;
  font-weight: 600;
}
.sidebar-content {
  flex: 1;
  padding: 16px;
  overflow: auto;
}
.sidebar-markdown {
  font-size: 14px;
  line-height: 1.5;
}
.sidebar-markdown .markdown-inline-image {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--secondary) 70%, transparent);
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  display: block;
}
.sidebar-markdown pre {
  background: #0000001f;
  border-radius: 4px;
  padding: 12px;
  overflow-x: auto;
}
.sidebar-markdown code {
  font-family: var(--mono);
  font-size: 13px;
}
@media (width<=768px) {
  .chat-split-container--open {
    z-index: 1000;
    position: fixed;
    inset: 0;
  }
  .chat-split-container--open .chat-main {
    display: none;
  }
  .chat-split-container--open .chat-sidebar {
    border-left: none;
    width: 100%;
    min-width: 0;
  }
}
.login-gate {
  background: var(--bg);
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  padding: 24px;
  display: flex;
}
.login-gate__theme {
  z-index: 10;
  position: fixed;
  top: 16px;
  right: 16px;
}
.login-gate__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(520px, 100%);
  animation: scale-in 0.25s var(--ease-out);
  padding: 32px;
}
.login-gate__header {
  text-align: center;
  margin-bottom: 24px;
}
.login-gate__logo {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
.login-gate__title {
  letter-spacing: -0.02em;
  font-size: 22px;
  font-weight: 700;
}
.login-gate__sub {
  color: var(--muted);
  margin-top: 4px;
  font-size: 14px;
}
.login-gate__form {
  flex-direction: column;
  gap: 12px;
  display: flex;
}
.login-gate__secret-row {
  align-items: center;
  gap: 8px;
  display: flex;
}
.login-gate__secret-row input {
  flex: 1;
}
.login-gate__secret-row .btn--icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
}
.login-gate__connect {
  justify-content: center;
  width: 100%;
  margin-top: 4px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
}
.login-gate__help {
  border-top: 1px solid var(--border);
  margin-top: 20px;
  padding-top: 16px;
}
.login-gate__help-title {
  color: var(--fg);
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
}
.login-gate__steps {
  color: var(--muted);
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.6;
}
.login-gate__steps li {
  margin-bottom: 6px;
}
.login-gate__steps li:last-child {
  margin-bottom: 0;
}
.login-gate__steps code {
  font-family: var(--font-mono);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  -webkit-user-select: all;
  user-select: all;
  margin: 4px 0 2px;
  padding: 5px 10px;
  font-size: 11px;
  display: block;
}
.login-gate__docs {
  margin-top: 10px;
  font-size: 11px;
}
.update-banner {
  z-index: 10;
  margin: 0 calc(-1 * var(--shell-pad)) 0;
  text-align: center;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 10px 16px;
  font-weight: 500;
  position: sticky;
  top: 0;
}
.update-banner__btn {
  border-color: var(--danger);
  color: var(--danger);
  margin-left: 8px;
  padding: 4px 12px;
  font-size: 12px;
}
.update-banner__btn:hover:not(:disabled) {
  background: #ef444426;
}
.update-banner__close {
  cursor: pointer;
  color: var(--danger);
  opacity: 0.7;
  background: 0 0;
  border: none;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding: 2px;
  transition: opacity 0.15s;
  display: inline-flex;
}
.update-banner__close:hover {
  opacity: 1;
}
.update-banner__close svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  width: 16px;
  height: 16px;
}
.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius-lg);
  animation: rise 0.25s var(--ease-out) backwards;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  padding: 18px;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.card-title {
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 600;
}
.card-sub {
  color: var(--muted);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.stat {
  background: var(--card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
  padding: 14px 16px;
}
.stat:hover {
  border-color: var(--border-strong);
}
.stat-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 500;
}
.stat-value {
  letter-spacing: -0.03em;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.stat-value.ok {
  color: var(--ok);
}
.stat-value.warn {
  color: var(--warn);
}
.stat-card {
  gap: 6px;
  display: grid;
}
.note-title {
  letter-spacing: -0.01em;
  font-weight: 600;
}
.status-list {
  gap: 8px;
  display: grid;
}
.status-list div {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  display: flex;
}
.status-list div:last-child {
  border-bottom: none;
}
.account-count {
  color: var(--muted);
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
}
.account-card-list {
  gap: 12px;
  margin-top: 16px;
  display: grid;
}
.account-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: border-color var(--duration-fast) ease;
  padding: 12px;
}
.account-card:hover {
  border-color: var(--border-strong);
}
.account-card-header {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}
.account-card-title {
  font-weight: 500;
}
.account-card-id {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 12px;
}
.account-card-status {
  margin-top: 10px;
  font-size: 13px;
}
.account-card-status div {
  padding: 4px 0;
}
.account-card-error {
  color: var(--danger);
  margin-top: 8px;
  font-size: 12px;
}
.label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.pill {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--secondary);
  transition: border-color var(--duration-fast) ease;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}
.pill:hover {
  border-color: var(--border-strong);
}
.pill.danger {
  border-color: var(--danger-subtle);
  background: var(--danger-subtle);
  color: var(--danger);
}
.theme-orb {
  align-items: center;
  display: inline-flex;
  position: relative;
}
.theme-orb__trigger {
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  width: 28px;
  height: 28px;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  display: flex;
}
.theme-orb__trigger:hover {
  border-color: var(--border-strong);
  transform: scale(1.08);
}
.theme-orb__trigger:focus-visible {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
  outline: none;
}
.theme-orb__menu {
  border-radius: var(--radius-full);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform-origin: 100% 0;
  pointer-events: none;
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  gap: 2px;
  padding: 4px;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  transform: scale(0.4) translateY(-8px);
}
.theme-orb--open .theme-orb__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}
.theme-orb__option {
  border-radius: var(--radius-full);
  cursor: pointer;
  width: 28px;
  height: 28px;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  background: 0 0;
  border: 1.5px solid #0000;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  display: flex;
}
.theme-orb__option:hover {
  background: var(--bg-hover);
  transform: scale(1.12);
}
.theme-orb__option--active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.theme-orb__option:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.theme-icon {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 14px;
  height: 14px;
}
.statusDot {
  border-radius: var(--radius-full);
  background: var(--danger);
  width: 8px;
  height: 8px;
  animation: 2s ease-in-out infinite pulse-subtle;
  box-shadow: 0 0 8px #ef444480;
}
.statusDot.ok {
  background: var(--ok);
  animation: none;
  box-shadow: 0 0 8px #22c55e80;
}
.statusDot.warn {
  background: var(--warn);
  animation: none;
  box-shadow: 0 0 8px #f59e0b80;
}
.btn {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}
.btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.btn:active {
  background: var(--secondary);
}
.btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--primary-foreground);
  box-shadow: 0 1px 3px var(--accent-subtle);
}
.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-kbd {
  font-family: var(--mono);
  color: inherit;
  opacity: 0.8;
  background: #ffffff26;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  padding: 2px 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
}
.btn.primary .btn-kbd {
  background: #fff3;
}
:root[data-theme-mode='light'] .btn-kbd {
  background: #00000014;
}
:root[data-theme-mode='light'] .btn.primary .btn-kbd {
  background: #ffffff40;
}
.btn.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}
.btn.danger {
  background: var(--danger-subtle);
  color: var(--danger);
  border-color: #0000;
}
.btn.danger:hover {
  background: #ef444426;
}
.btn--sm {
  padding: 6px 10px;
  font-size: 12px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.field {
  gap: 6px;
  display: grid;
}
.field.full {
  grid-column: 1/-1;
}
.field span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  border: 1px solid var(--input);
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--card-highlight);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  outline: none;
  padding: 8px 12px;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--ring);
  box-shadow: var(--focus-ring);
}
.field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.field textarea {
  font-family: var(--mono);
  resize: vertical;
  white-space: pre;
  min-height: 160px;
  line-height: 1.5;
}
.field.checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
}
.config-form .field.checkbox {
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
}
.config-form .field.checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
}
.form-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  display: grid;
}
.cron-summary-strip {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 18px;
  padding: 14px 16px;
  display: flex;
}
.cron-summary-strip__left {
  flex: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  min-width: 0;
  display: grid;
}
.cron-summary-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  gap: 6px;
  min-height: 62px;
  padding: 10px 12px;
  display: grid;
}
.cron-summary-item--wide {
  grid-column: span 1;
}
.cron-summary-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 600;
}
.cron-summary-value {
  color: var(--text-strong);
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: flex;
}
.cron-summary-strip__actions {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}
.cron-workspace {
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  align-items: start;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}
.cron-workspace-main {
  gap: 16px;
  display: grid;
}
.cron-workspace-form {
  max-height: calc(100vh - 106px);
  position: sticky;
  top: 74px;
  overflow-y: auto;
}
.cron-form {
  gap: 14px;
  margin-top: 16px;
  display: grid;
}
.cron-form-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  gap: 12px;
  padding: 14px;
  display: grid;
}
.cron-form-section__title {
  letter-spacing: -0.01em;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}
.cron-form-section__sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.cron-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.cron-help {
  color: var(--muted);
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
}
.cron-error {
  color: var(--danger-color);
}
.cron-required-legend {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.cron-required-marker {
  color: var(--danger-color);
  margin-left: 3px;
  font-weight: 700;
}
.cron-required-sr {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'],
.field select[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow:
    inset 0 1px 0 var(--card-highlight),
    0 0 0 1px #ef444433;
}
.cron-form-status {
  border: 1px solid var(--danger-subtle);
  background: var(--danger-subtle);
  border-radius: var(--radius-md);
  margin-top: 4px;
  padding: 10px 12px;
}
.cron-form-status__title {
  color: var(--text-strong);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}
.cron-form-status__list {
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.cron-form-status__link {
  color: var(--text);
  cursor: pointer;
  text-align: left;
  text-underline-offset: 2px;
  background: 0 0;
  border: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  text-decoration: underline;
}
.cron-form-status__link:hover {
  color: var(--text-strong);
}
.cron-span-2 {
  grid-column: 1/-1;
}
.cron-checkbox {
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}
.cron-checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 2px 0 0;
}
.cron-checkbox .field-checkbox__label {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 500;
}
.cron-checkbox .cron-help {
  grid-column: 2;
}
.cron-checkbox-inline {
  align-content: start;
  align-items: start;
  padding-top: 28px;
}
.cron-advanced {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  gap: 10px;
  padding: 12px;
  display: grid;
}
.cron-advanced__summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.cron-stagger-group {
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: start;
  gap: 14px 16px;
  display: grid;
}
.cron-form-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
}
.cron-submit-reason {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.cron-filter-search {
  flex: 320px;
  min-width: 280px;
}
.cron-workspace .filters .field {
  min-width: 160px;
}
.cron-run-filters {
  gap: 12px;
  margin-top: 12px;
  display: grid;
}
.cron-run-filters__row {
  gap: 12px;
  display: grid;
}
.cron-run-filters__row--primary {
  grid-template-columns: minmax(160px, 220px) minmax(240px, 1fr) minmax(160px, 220px);
}
.cron-run-filters__row--secondary {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.cron-run-filter-search,
.cron-filter-dropdown {
  min-width: 0;
}
.cron-filter-dropdown__details {
  position: relative;
}
.cron-filter-dropdown__details > summary {
  list-style: none;
}
.cron-filter-dropdown__details > summary::-webkit-details-marker {
  display: none;
}
.cron-filter-dropdown__trigger {
  text-align: left;
  justify-content: space-between;
  width: 100%;
}
.cron-filter-dropdown__panel {
  z-index: 30;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  width: min(360px, 100vw - 48px);
  box-shadow: var(--shadow-card);
  gap: 10px;
  padding: 10px;
  display: grid;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
}
.cron-filter-dropdown__list {
  gap: 6px;
  display: grid;
}
.cron-filter-dropdown__option {
  color: var(--text);
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: grid;
}
.cron-filter-dropdown__option input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
}
.cron-run-entry {
  align-items: start;
}
.cron-run-entry__meta {
  text-align: right;
  min-width: 220px;
}
.cron-run-entry__summary {
  white-space: pre-wrap;
  line-height: 1.45;
}
@media (width<=1100px) {
  .cron-summary-strip {
    flex-direction: column;
  }
  .cron-summary-strip__left {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .cron-summary-strip__actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .cron-workspace {
    grid-template-columns: 1fr;
  }
  .cron-workspace-form {
    order: -1;
    position: static;
  }
  .cron-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cron-span-2 {
    grid-column: auto;
  }
  .cron-checkbox-inline {
    padding-top: 0;
  }
  .cron-stagger-group {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cron-filter-search {
    flex: 100%;
    min-width: 0;
  }
  .cron-run-filters__row--primary,
  .cron-run-filters__row--secondary {
    grid-template-columns: 1fr;
  }
  .cron-filter-dropdown__panel {
    width: 100%;
    max-width: none;
    margin-top: 8px;
    position: static;
  }
  .cron-run-entry__meta {
    text-align: left;
    min-width: 0;
  }
}
:root[data-theme-mode='light'] .field input,
:root[data-theme-mode='light'] .field textarea,
:root[data-theme-mode='light'] .field select {
  background: var(--card);
  border-color: var(--input);
}
:root[data-theme-mode='light'] .btn {
  background: var(--bg);
  border-color: var(--input);
}
:root[data-theme-mode='light'] .btn:hover {
  background: var(--bg-hover);
}
:root[data-theme-mode='light'] .btn.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}
:root[data-theme-mode='light'] .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
}
.muted {
  color: var(--muted);
}
.mono {
  font-family: var(--mono);
}
.callout {
  border-radius: var(--radius-md);
  background: var(--secondary);
  border: 1px solid var(--border);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  position: relative;
}
.callout.danger {
  color: var(--danger);
  background: linear-gradient(135deg, #ef444414 0%, #ef44440a 100%);
  border-color: #ef444440;
}
.callout.info {
  color: var(--info);
  background: linear-gradient(135deg, #3b82f614 0%, #3b82f60a 100%);
  border-color: #3b82f640;
}
.callout.success {
  color: var(--ok);
  background: linear-gradient(135deg, #22c55e14 0%, #22c55e0a 100%);
  border-color: #22c55e40;
}
.compaction-indicator {
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--text);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  animation: fade-in 0.2s var(--ease-out);
  border-radius: 999px;
  align-self: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.2;
  display: inline-flex;
}
.compaction-indicator svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.compaction-indicator--active {
  color: var(--info);
  border-color: #3b82f659;
}
.compaction-indicator--active svg {
  animation: 1s linear infinite compaction-spin;
}
.compaction-indicator--complete {
  color: var(--ok);
  border-color: #22c55e59;
}
.compaction-indicator--fallback {
  color: #d97706;
  border-color: #d9770659;
}
.compaction-indicator--fallback-cleared {
  color: var(--ok);
  border-color: #22c55e59;
}
@keyframes compaction-spin {
  to {
    transform: rotate(360deg);
  }
}
.code-block {
  font-family: var(--mono);
  background: var(--secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  max-width: 100%;
  max-height: 360px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  overflow: auto;
}
:root[data-theme-mode='light'] .code-block,
:root[data-theme-mode='light'] .list-item,
:root[data-theme-mode='light'] .table-row,
:root[data-theme-mode='light'] .chip {
  background: var(--bg);
}
.markdown-plain-text-fallback {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font: inherit;
  display: block;
}
.code-block-wrapper {
  border-radius: 6px;
  margin-top: 0.75em;
  position: relative;
  overflow: hidden;
}
.code-block-wrapper pre {
  border-radius: 0 0 6px 6px;
  margin: 0;
}
.code-block-header {
  background: #00000040;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 12px;
  font-size: 12px;
  line-height: 1;
  display: flex;
}
:root[data-theme-mode='light'] .code-block-header {
  background: #00000014;
}
.code-block-lang {
  color: var(--muted);
  font-family: var(--mono);
  text-transform: lowercase;
  -webkit-user-select: none;
  user-select: none;
  font-size: 11px;
}
.code-block-copy {
  appearance: none;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: 0 0;
  border: none;
  padding: 2px 6px;
  transition:
    color 0.15s,
    background 0.15s;
}
.code-block-copy:hover {
  color: var(--text);
  background: #ffffff1a;
}
:root[data-theme-mode='light'] .code-block-copy:hover {
  background: #00000014;
}
.code-block-copy__done,
.code-block-copy.copied .code-block-copy__idle {
  display: none;
}
.code-block-copy.copied .code-block-copy__done {
  color: var(--success, #22c55e);
  display: inline;
}
.json-collapse {
  margin-top: 0.75em;
}
.json-collapse summary {
  cursor: pointer;
  color: var(--muted);
  -webkit-user-select: none;
  user-select: none;
  padding: 4px 8px;
  font-size: 12px;
}
.json-collapse summary:hover {
  color: var(--text);
}
.list {
  gap: 8px;
  display: grid;
  container-type: inline-size;
}
.list-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color var(--duration-fast) ease;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
  align-items: start;
  gap: 16px;
  padding: 12px;
  display: grid;
}
.list-item-clickable {
  cursor: pointer;
}
.list-item-clickable:hover {
  border-color: var(--border-strong);
}
.list-item-selected {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.list-main {
  gap: 4px;
  min-width: 0;
  display: grid;
}
.list-title {
  font-weight: 500;
}
.list-sub {
  color: var(--muted);
  font-size: 12px;
}
.list-meta {
  text-align: right;
  color: var(--muted);
  gap: 4px;
  min-width: 200px;
  font-size: 12px;
  display: grid;
}
.list-meta .btn {
  padding: 6px 10px;
}
.list-meta .field input,
.list-meta .field textarea,
.list-meta .field select {
  width: 100%;
}
.debug-event-log__item {
  grid-template-columns: minmax(0, 1fr);
}
.debug-event-log__meta {
  text-align: left;
  min-width: 0;
}
.debug-event-log__payload {
  max-width: 100%;
  margin: 0;
}
.cron-job-payload,
.cron-job-agent,
.cron-job-state {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cron-job .list-title {
  letter-spacing: -0.015em;
  font-size: 15px;
  font-weight: 600;
}
.cron-job {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  grid-template-areas: 'main meta' 'footer footer';
  row-gap: 10px;
}
.cron-job .list-main {
  grid-area: main;
}
.cron-job .list-meta {
  grid-area: meta;
  gap: 8px;
  min-width: 240px;
}
.cron-job-footer {
  border-top: 1px solid var(--border);
  grid-area: footer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  display: flex;
}
.cron-job-chips {
  flex: auto;
}
.cron-job-detail {
  gap: 3px;
  margin-top: 2px;
  display: grid;
}
.cron-job-detail-label {
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
.cron-job-detail-value {
  font-size: 13px;
  line-height: 1.35;
}
.cron-job-state {
  gap: 4px;
  display: grid;
}
.cron-job-state-row {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  display: flex;
}
.cron-job-state-key {
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.cron-job-state-value {
  color: var(--text);
  white-space: nowrap;
  font-size: 12px;
}
.cron-job-status-pill {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  text-transform: lowercase;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.cron-job-status-ok {
  color: var(--ok);
  background: var(--ok-subtle);
  border-color: #22c55e59;
}
.cron-job-status-error {
  color: var(--danger);
  background: var(--danger-subtle);
  border-color: #ef444459;
}
.cron-job-status-skipped {
  color: var(--warn);
  background: var(--warn-subtle);
  border-color: #f59e0b59;
}
.cron-job-status-na {
  color: var(--muted);
}
.cron-job-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0;
}
.cron-job-actions .btn {
  flex: none;
}
@container (width<=560px) {
  .list-item {
    grid-template-columns: 1fr;
  }
  .list-meta {
    text-align: left;
    min-width: 0;
  }
  .cron-job-actions {
    justify-content: flex-start;
  }
  .cron-job {
    grid-template-columns: 1fr;
    grid-template-areas: 'main' 'meta' 'footer';
  }
  .cron-job-footer {
    flex-direction: column;
    align-items: stretch;
  }
}
.chip-row {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}
.chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--muted);
  background: var(--secondary);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
}
.chip:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.chip input {
  margin-right: 6px;
}
.chip-ok {
  color: var(--ok);
  background: var(--ok-subtle);
  border-color: #22c55e4d;
}
.chip-warn {
  color: var(--warn);
  background: var(--warn-subtle);
  border-color: #f59e0b4d;
}
.chip-danger {
  color: var(--danger);
  background: var(--danger-subtle);
  border-color: #ef44444d;
}
.table {
  gap: 6px;
  display: grid;
  container-type: inline-size;
}
.table-head,
.table-row {
  grid-template-columns: 1.4fr 1fr 0.8fr 0.7fr 0.8fr 0.8fr 0.8fr 0.8fr 0.6fr;
  align-items: center;
  gap: 12px;
  display: grid;
}
.table-head {
  color: var(--muted);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
}
.table-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color var(--duration-fast) ease;
  padding: 10px 12px;
}
.table-row:hover {
  border-color: var(--border-strong);
}
@media (width<=1100px) {
  .table-head,
  .table-row {
    grid-template-columns: 1fr;
  }
}
@container (width<=1100px) {
  .table-head,
  .table-row {
    grid-template-columns: 1fr;
  }
}
.session-link {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.session-link:hover {
  text-decoration: underline;
}
.session-key-cell {
  gap: 4px;
  min-width: 0;
  display: grid;
}
.session-key-cell .session-link,
.session-key-display-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.session-key-display-name {
  font-size: 11px;
}
.data-table-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.data-table-toolbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}
.data-table-search {
  flex: 1;
  min-width: 0;
}
.data-table-search input {
  width: 100%;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) ease;
  outline: none;
  padding: 6px 10px;
  font-size: 13px;
}
.data-table-search input:focus {
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
}
.data-table-search input::placeholder {
  color: var(--muted);
}
.data-table-container {
  max-height: 70vh;
  overflow: auto;
}
.data-table {
  --data-table-checkbox-col-width: 36px;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
}
.data-table th {
  z-index: 3;
  text-align: left;
  color: var(--muted);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  position: sticky;
  top: 0;
}
.data-table th[data-sortable] {
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}
.data-table th[data-sortable]:hover {
  color: var(--text);
}
.data-table-sort-icon {
  vertical-align: middle;
  opacity: 0.4;
  transition: opacity var(--duration-fast) ease;
  margin-left: 4px;
  display: inline-flex;
}
.data-table-sort-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  width: 14px;
  height: 14px;
}
.data-table th[data-sortable]:hover .data-table-sort-icon {
  opacity: 0.7;
}
.data-table th[data-sort-dir='asc'] .data-table-sort-icon,
.data-table th[data-sort-dir='desc'] .data-table-sort-icon {
  opacity: 1;
  color: var(--text);
}
.data-table th[data-sort-dir='desc'] .data-table-sort-icon svg {
  transform: rotate(180deg);
}
.data-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  padding: 10px 12px;
}
.data-table tbody tr {
  transition: background var(--duration-fast) ease;
}
.data-table tbody tr:hover {
  background: var(--bg-hover);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table-badge {
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}
.data-table-badge--direct {
  color: var(--accent-2);
  background: var(--accent-2-subtle);
}
.data-table-badge--group {
  color: var(--info);
  background: #3b82f61a;
}
.data-table-badge--global {
  color: var(--warn);
  background: var(--warn-subtle);
}
.data-table-badge--unknown {
  color: var(--muted);
  background: var(--bg-hover);
}
.data-table-checkbox-col {
  width: var(--data-table-checkbox-col-width);
  min-width: var(--data-table-checkbox-col-width);
  max-width: var(--data-table-checkbox-col-width);
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  z-index: 2;
  position: sticky;
  left: 0;
  padding-left: 12px !important;
  padding-right: 4px !important;
}
.data-table th.data-table-checkbox-col {
  z-index: 4;
  background: var(--bg-elevated);
}
td.data-table-checkbox-col {
  background: var(--card);
}
.data-table tbody tr:hover td.data-table-checkbox-col {
  background: var(--bg-hover);
}
.data-table-checkbox-col input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
  margin: 0;
}
.data-table .data-table-key-col {
  left: var(--data-table-checkbox-col-width);
  z-index: 2;
  min-width: 180px;
  position: sticky;
}
.data-table th.data-table-key-col {
  z-index: 4;
  background: var(--bg-elevated);
}
td.data-table-key-col {
  background: var(--card);
  box-shadow: 2px 0 4px #00000014;
}
.data-table tbody tr:hover td.data-table-key-col {
  background: var(--bg-hover);
}
.data-table-bulk-bar {
  border-bottom: 1px solid var(--border);
  background: var(--accent-subtle);
  color: var(--text);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}
.data-table-bulk-bar .btn svg {
  width: 14px;
  height: 14px;
}
.data-table-pagination {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
}
.data-table-pagination__controls {
  align-items: center;
  gap: 8px;
  display: flex;
}
.data-table-pagination__controls button {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
  padding: 4px 12px;
  font-size: 13px;
}
.data-table-pagination__controls button:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.data-table-pagination__controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.field-inline {
  color: var(--text);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  display: inline-flex;
}
.field-inline span {
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
}
.field-inline input[type='text'],
.field-inline input:not([type]) {
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fast) ease;
  outline: none;
  padding: 6px 10px;
  font-size: 13px;
}
.field-inline input:focus {
  border-color: var(--border-strong);
  box-shadow: var(--focus-ring);
}
.field-inline.checkbox {
  cursor: pointer;
  gap: 4px;
}
.field-inline.checkbox input[type='checkbox'] {
  accent-color: var(--accent);
}
.log-stream {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  max-height: 500px;
  overflow: auto;
  container-type: inline-size;
}
.log-row {
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast) ease;
  grid-template-columns: 90px 70px minmax(140px, 200px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12px;
  display: grid;
}
.log-row:hover {
  background: var(--bg-hover);
}
.log-row:last-child {
  border-bottom: none;
}
.log-time {
  color: var(--muted);
  font-family: var(--mono);
}
.log-level {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: fit-content;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
}
.log-level.trace,
.log-level.debug {
  color: var(--muted);
}
.log-level.info {
  color: var(--info);
  border-color: #3b82f64d;
}
.log-level.warn {
  color: var(--warn);
  border-color: var(--warn-subtle);
}
.log-level.error,
.log-level.fatal {
  color: var(--danger);
  border-color: var(--danger-subtle);
}
.log-chip.trace,
.log-chip.debug {
  color: var(--muted);
}
.log-chip.info {
  color: var(--info);
  border-color: #3b82f64d;
}
.log-chip.warn {
  color: var(--warn);
  border-color: var(--warn-subtle);
}
.log-chip.error,
.log-chip.fatal {
  color: var(--danger);
  border-color: var(--danger-subtle);
}
.log-subsystem {
  color: var(--muted);
  font-family: var(--mono);
}
.log-message {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
}
@container (width<=620px) {
  .log-row {
    grid-template-columns: 70px 60px minmax(0, 1fr);
  }
  .log-subsystem {
    display: none;
  }
}
.chat {
  flex-direction: column;
  min-height: 0;
  display: flex;
}
.shell--chat .chat {
  flex: 1;
}
.chat-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  display: flex;
}
.chat-header__left {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
  display: flex;
}
.chat-header__right {
  align-items: center;
  gap: 8px;
  display: flex;
}
.chat-session {
  min-width: 240px;
}
.chat-thread {
  background: 0 0;
  border: none;
  border-radius: 0;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  margin-top: 0;
  padding: 0 12px 16px;
  display: flex;
  overflow: hidden auto;
}
.chat-queue {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  display: grid;
}
.chat-queue__title {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.chat-queue__list {
  gap: 8px;
  display: grid;
}
.chat-queue__item {
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: var(--secondary);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  display: grid;
}
.chat-queue__text {
  color: var(--chat-text);
  white-space: pre-wrap;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}
.chat-queue__remove {
  align-self: start;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
}
.chat-new-messages {
  border-radius: 999px;
  align-self: center;
  margin: 8px auto 0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1;
}
.chat-line {
  display: flex;
}
.chat-line.user {
  justify-content: flex-end;
}
.chat-line.assistant,
.chat-line.other {
  justify-content: flex-start;
}
.chat-msg {
  gap: 6px;
  max-width: min(700px, 82%);
  display: grid;
}
.chat-line.user .chat-msg {
  justify-items: end;
}
.chat-bubble {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid #0000;
  min-width: 0;
  padding: 10px 14px;
}
:root[data-theme-mode='light'] .chat-bubble {
  border-color: var(--border);
  background: var(--bg);
}
.chat-line.user .chat-bubble {
  background: var(--accent-subtle);
  border-color: #0000;
}
:root[data-theme-mode='light'] .chat-line.user .chat-bubble {
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  background: var(--accent-subtle);
}
.chat-line.assistant .chat-bubble {
  background: var(--secondary);
  border-color: #0000;
}
:root[data-theme-mode='light'] .chat-line.assistant .chat-bubble {
  border-color: var(--border);
  background: var(--bg-muted);
}
@keyframes chatStreamPulse {
  0%,
  to {
    border-color: var(--border);
  }
  50% {
    border-color: var(--accent);
  }
}
.chat-bubble.streaming {
  animation: 1.5s ease-in-out infinite chatStreamPulse;
}
@media (prefers-reduced-motion: reduce) {
  .chat-bubble.streaming {
    border-color: var(--accent);
    animation: none;
  }
}
.chat-bubble.chat-reading-indicator {
  width: fit-content;
  padding: 10px 16px;
}
.chat-reading-indicator__dots {
  align-items: center;
  gap: 4px;
  height: 12px;
  display: inline-flex;
}
.chat-reading-indicator__dots > span {
  border-radius: var(--radius-full);
  background: var(--muted);
  opacity: 0.6;
  will-change: transform, opacity;
  width: 6px;
  height: 6px;
  animation: 1.2s ease-in-out infinite chatReadingDot;
  display: inline-block;
  transform: translateY(0);
}
.chat-reading-indicator__dots > span:nth-child(2) {
  animation-delay: 0.15s;
}
.chat-reading-indicator__dots > span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes chatReadingDot {
  0%,
  80%,
  to {
    opacity: 0.4;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-reading-indicator__dots > span {
    opacity: 0.6;
    animation: none;
  }
}
.chat-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--chat-text);
  line-height: 1.5;
}
.chat-text :where(p, ul, ol, pre, blockquote, table) {
  margin: 0;
}
.chat-text :where(p + p, p + ul, p + ol, p + pre, p + blockquote, p + table) {
  margin-top: 0.75em;
}
.chat-text :where(ul, ol) {
  padding-left: 1.2em;
}
.chat-text :where(li + li) {
  margin-top: 0.25em;
}
.chat-text :where(a) {
  color: var(--accent);
}
.chat-text :where(a:hover) {
  text-decoration: underline;
}
.chat-text :where(blockquote) {
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
  padding-left: 12px;
}
.chat-text :where(hr) {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1em 0;
}
.chat-text :where(code) {
  font-family: var(--mono);
  font-size: 0.9em;
}
.chat-text :where(:not(pre) > code) {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--secondary);
  padding: 0.15em 0.35em;
}
:root[data-theme-mode='light'] .chat-text :where(:not(pre) > code) {
  background: var(--bg-muted);
}
.chat-text :where(pre) {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--secondary);
  margin-top: 0.75em;
  padding: 10px 12px;
  overflow: auto;
}
:root[data-theme-mode='light'] .chat-text :where(pre) {
  background: var(--bg-muted);
}
.chat-text :where(pre code) {
  white-space: pre;
  font-size: 12px;
}
.chat-text :where(table) {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  margin-top: 0.75em;
  font-size: 13px;
  display: block;
  overflow-x: auto;
}
.chat-text :where(th, td) {
  border: 1px solid var(--border);
  vertical-align: top;
  padding: 6px 10px;
}
.chat-text :where(th) {
  font-family: var(--mono);
  color: var(--muted);
  background: var(--secondary);
  font-weight: 500;
}
.chat-tool-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--secondary);
  gap: 4px;
  margin-top: 8px;
  padding: 10px 12px;
  display: grid;
}
:root[data-theme-mode='light'] .chat-tool-card {
  background: var(--bg-muted);
}
.chat-tool-card__title {
  font-family: var(--mono);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}
.chat-tool-card__detail {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 11px;
}
.chat-tool-card__details {
  margin-top: 6px;
}
.chat-tool-card__summary {
  font-family: var(--mono);
  color: var(--muted);
  cursor: pointer;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  list-style: none;
  display: inline-flex;
}
.chat-tool-card__summary::-webkit-details-marker {
  display: none;
}
.chat-tool-card__summary-meta {
  color: var(--muted);
  opacity: 0.7;
}
.chat-tool-card__details[open] .chat-tool-card__summary {
  color: var(--text);
}
.chat-tool-card__output {
  font-family: var(--mono);
  white-space: pre-wrap;
  color: var(--chat-text);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
}
:root[data-theme-mode='light'] .chat-tool-card__output {
  background: var(--bg);
}
.chat-stamp {
  color: var(--muted);
  font-size: 11px;
}
.chat-line.user .chat-stamp {
  text-align: right;
}
.chat-compose {
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  display: flex;
}
.shell--chat .chat-compose {
  z-index: 5;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 40%);
  margin-top: 0;
  padding-top: 12px;
  position: sticky;
  bottom: 0;
}
.shell--chat-focus .chat-compose {
  bottom: calc(var(--shell-pad) + 8px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.chat-compose__field {
  gap: 4px;
}
.chat-compose__field textarea {
  border-radius: var(--radius-lg);
  resize: vertical;
  white-space: pre-wrap;
  min-height: 72px;
  font-family: var(--font-body);
  border: 1px solid var(--input);
  background: var(--card);
  box-shadow: inset 0 1px 0 var(--card-highlight);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  padding: 10px 14px;
  line-height: 1.5;
}
.chat-compose__field textarea:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--border-strong) 24%, transparent);
}
.chat-compose__field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-compose__actions {
  justify-content: flex-end;
  align-self: end;
}
@media (width<=900px) {
  .chat-session {
    min-width: 180px;
  }
  .chat-compose {
    grid-template-columns: 1fr;
  }
}
.qr-wrap {
  border-radius: var(--radius-md);
  background: var(--card);
  border: 1px dashed var(--border-strong);
  margin-top: 16px;
  padding: 16px;
  display: inline-flex;
}
.qr-wrap img {
  border-radius: var(--radius-sm);
  width: 160px;
  height: 160px;
  image-rendering: pixelated;
}
.exec-approval-overlay {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 200;
  background: #000c;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}
.exec-approval-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(540px, 100%);
  animation: scale-in 0.2s var(--ease-out);
  padding: 20px;
}
.exec-approval-header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}
.exec-approval-title {
  font-size: 14px;
  font-weight: 600;
}
.exec-approval-sub {
  color: var(--muted);
  margin-top: 4px;
  font-size: 13px;
}
.exec-approval-queue {
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
}
.exec-approval-command {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  word-break: break-word;
  white-space: pre-wrap;
  font-family: var(--mono);
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
}
.exec-approval-meta {
  color: var(--muted);
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  display: grid;
}
.exec-approval-meta-row {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}
.exec-approval-meta-row span:last-child {
  color: var(--text);
  font-family: var(--mono);
}
.exec-approval-error {
  color: var(--danger);
  margin-top: 10px;
  font-size: 13px;
}
.exec-approval-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}
.agents-layout {
  grid-template-columns: 1fr;
  gap: 14px;
  display: grid;
}
.agents-sidebar {
  align-self: start;
  gap: 12px;
  display: grid;
}
.agents-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}
.agents-toolbar-row {
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}
.agents-toolbar-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
}
.agents-control-row {
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.agents-control-select {
  flex: 1;
  min-width: 0;
  max-width: 280px;
}
.agents-select {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--bg-accent);
  cursor: pointer;
  appearance: none;
  width: 100%;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  outline: none;
  padding: 7px 32px 7px 10px;
  font-size: 13px;
  font-weight: 500;
}
:root[data-theme-mode='light'] .agents-select {
  background-color: #fff;
}
.agents-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.agents-control-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}
.agents-refresh-btn {
  white-space: nowrap;
}
.agent-actions-wrap {
  position: relative;
}
.agent-actions-toggle {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  width: 28px;
  height: 28px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: flex;
}
.agent-actions-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.agent-actions-menu {
  z-index: 10;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  min-width: 160px;
  box-shadow: var(--shadow-md);
  gap: 1px;
  padding: 4px;
  display: grid;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
}
.agent-actions-menu button {
  border-radius: var(--radius-sm);
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  background: 0 0;
  border: none;
  padding: 7px 10px;
  font-size: 12px;
  display: block;
}
.agent-actions-menu button:hover:not(:disabled) {
  background: var(--bg-hover);
}
.agent-actions-menu button:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.5;
}
.agents-main {
  gap: 14px;
  display: grid;
}
.agent-list {
  gap: 8px;
  display: grid;
}
.agent-row {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
  width: 100%;
  transition: border-color var(--duration-fast) ease;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: grid;
}
.agent-row:hover {
  border-color: var(--border-strong);
}
.agent-row.active {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.agent-avatar {
  background: var(--secondary);
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  font-weight: 600;
  display: grid;
}
.agent-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 20px;
}
.agent-info {
  gap: 2px;
  min-width: 0;
  display: grid;
}
.agent-title {
  font-weight: 600;
}
.agent-sub {
  color: var(--muted);
  font-size: 12px;
}
.agent-pill {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--muted);
  background: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  font-size: 11px;
}
.agent-pill.warn {
  color: var(--warn);
  border-color: var(--warn);
}
.agent-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  display: grid;
}
.agent-header-main {
  align-items: center;
  gap: 12px;
  display: flex;
}
.agent-header-meta {
  color: var(--muted);
  justify-items: end;
  gap: 6px;
  display: grid;
}
.agent-tabs {
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 2px;
  display: flex;
}
.agent-tab {
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
  background: 0 0;
  border: 1px solid #0000;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}
.agent-tab:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.agent-tab.active {
  background: var(--accent-subtle);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
}
.agent-tab-count {
  opacity: 0.7;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
}
.agents-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  display: grid;
}
.agent-kv {
  gap: 6px;
  min-width: 0;
  display: grid;
}
.agent-kv > div {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.agent-kv-sub {
  font-size: 12px;
}
.agent-model-select,
.agent-model-fields {
  gap: 10px;
  display: grid;
}
.workspace-link {
  color: var(--accent);
  font-family: var(--mono);
  cursor: pointer;
  word-break: break-all;
  text-align: left;
  transition: opacity var(--duration-fast) ease;
  background: 0 0;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  font-size: 12px;
  display: inline-flex;
}
.workspace-link:hover {
  opacity: 0.75;
  text-decoration: underline;
}
.agent-model-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}
.agent-chip-input {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  cursor: text;
  min-height: 38px;
  transition: border-color var(--duration-fast) ease;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  display: flex;
}
.agent-chip-input:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.agent-chip-input input {
  background: 0 0;
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  padding: 0;
  font-size: 13px;
}
.agent-model-meta {
  gap: 6px;
  min-width: 200px;
  display: grid;
}
.agent-files-grid {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  display: grid;
}
.agent-files-list {
  gap: 8px;
  display: grid;
}
.agent-file-row {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
  width: 100%;
  transition: border-color var(--duration-fast) ease;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}
.agent-file-row:hover {
  border-color: var(--border-strong);
}
.agent-file-row.active {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.agent-file-name {
  font-weight: 600;
}
.agent-file-meta {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
}
.agent-files-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: 16px;
}
.agent-file-field {
  min-height: clamp(320px, 56vh, 720px);
}
.field textarea.agent-file-textarea {
  min-height: clamp(320px, 56vh, 720px);
  transition: filter var(--duration-fast) ease;
}
.field textarea.agent-file-textarea:not(:focus) {
  filter: blur(6px);
}
.agent-file-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.agent-file-title {
  font-weight: 600;
}
.agent-file-sub {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
}
.agent-file-actions {
  gap: 8px;
  display: flex;
}
.agent-tools-meta {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  display: grid;
}
.agent-tools-buttons {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}
.agent-tools-grid {
  gap: 16px;
  display: grid;
}
.agent-tools-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  padding: 10px;
}
.agent-tools-header {
  margin-bottom: 10px;
  font-weight: 600;
}
.agent-tools-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 12px;
  display: grid;
}
.agent-tool-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  display: flex;
}
.agent-tool-title {
  font-size: 13px;
  font-weight: 600;
}
.agent-tool-sub {
  color: var(--muted);
  margin-top: 2px;
  font-size: 11px;
}
.agent-skills-groups {
  gap: 16px;
  display: grid;
}
.agent-skills-group {
  gap: 10px;
  display: grid;
}
.agent-skills-group summary {
  list-style: none;
}
.agent-skills-header {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}
.agent-skills-header > span:last-child {
  margin-left: auto;
}
.agent-skills-group summary::-webkit-details-marker {
  display: none;
}
.agent-skills-group summary::marker {
  content: '';
}
.agent-skills-header:after {
  content: '▸';
  color: var(--muted);
  transition: transform var(--duration-fast) ease;
  margin-left: 8px;
  font-size: 12px;
}
.agent-skills-group[open] .agent-skills-header:after {
  transform: rotate(90deg);
}
.agent-skill-row {
  align-items: flex-start;
  gap: 18px;
}
.agent-skill-row .list-meta {
  justify-content: flex-end;
  align-items: flex-start;
  min-width: auto;
  display: flex;
}
.skills-grid {
  grid-template-columns: 1fr;
}
@container (width>=900px) {
  .skills-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width<=980px) {
  .agent-header {
    grid-template-columns: 1fr;
  }
  .agent-header-meta {
    justify-items: start;
  }
  .agent-files-grid,
  .agent-tools-list {
    grid-template-columns: 1fr;
  }
}
@media (width<=600px) {
  .agents-toolbar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .agents-control-select {
    max-width: none;
  }
  .agents-toolbar-label {
    display: none;
  }
}
.cmd-palette-overlay {
  z-index: 1000;
  background: #00000080;
  justify-content: center;
  align-items: flex-start;
  padding-top: min(20vh, 160px);
  animation: 0.12s ease-out fade-in;
  display: flex;
  position: fixed;
  inset: 0;
}
.cmd-palette {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(560px, 90vw);
  box-shadow: var(--shadow-lg);
  animation: 0.15s ease-out scale-in;
  overflow: hidden;
}
.cmd-palette__input {
  border: none;
  border-bottom: 1px solid var(--border);
  width: 100%;
  color: var(--text);
  background: 0 0;
  outline: none;
  padding: 14px 18px;
  font-size: 15px;
}
.cmd-palette__input::placeholder {
  color: var(--muted);
}
.cmd-palette__results {
  max-height: 320px;
  padding: 6px 0;
  overflow-y: auto;
}
.cmd-palette__group-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 18px 4px;
  font-size: 11px;
  font-weight: 600;
}
.cmd-palette__item {
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  font-size: 14px;
  display: flex;
}
.cmd-palette__item:hover,
.cmd-palette__item--active {
  background: var(--bg-hover);
}
.cmd-palette__item .nav-item__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.cmd-palette__item .nav-item__icon svg {
  width: 100%;
  height: 100%;
}
.cmd-palette__item-desc {
  margin-left: auto;
  font-size: 12px;
}
.cmd-palette__empty {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  font-size: 13px;
  display: flex;
}
.cmd-palette__footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  font-size: 11px;
  display: flex;
}
.cmd-palette__footer kbd {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--mono);
  justify-content: center;
  align-items: center;
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1.4;
  display: inline-flex;
}
.ov-cards {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  display: grid;
}
.ov-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  animation: rise 0.25s var(--ease-out) backwards;
  gap: 6px;
  padding: 16px;
  display: grid;
}
.ov-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ov-card:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}
.ov-card__label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  font-weight: 600;
}
.ov-card__value {
  letter-spacing: -0.03em;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}
.ov-card__hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.ov-card__hint .danger {
  color: var(--danger);
}
.ov-cards .ov-card:first-child {
  animation-delay: 0s;
}
.ov-cards .ov-card:nth-child(2) {
  animation-delay: 50ms;
}
.ov-cards .ov-card:nth-child(3) {
  animation-delay: 0.1s;
}
.ov-cards .ov-card:nth-child(4) {
  animation-delay: 0.15s;
}
.ov-attention-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.ov-attention-item {
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}
.ov-attention-item.warn {
  border-color: var(--warning-subtle, #eab30833);
  background: #eab3080d;
}
.ov-attention-item.danger {
  border-color: var(--danger-subtle, #ef444433);
  background: #ef44440d;
}
.ov-attention-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 1px;
  display: inline-flex;
}
.ov-attention-item.warn .ov-attention-icon {
  color: var(--warn);
}
.ov-attention-item.danger .ov-attention-icon {
  color: var(--danger);
}
.ov-attention-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px;
  height: 16px;
}
.ov-attention-body {
  flex: 1;
  min-width: 0;
}
.ov-attention-title {
  font-size: 13px;
  font-weight: 500;
}
.ov-attention-link {
  color: var(--accent, #3b82f6);
  font-size: 12px;
  text-decoration: none;
}
.ov-attention-link:hover {
  text-decoration: underline;
}
.ov-recent {
  margin-top: 18px;
}
.ov-recent__title {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.ov-recent__list {
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.ov-recent__row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  transition: border-color var(--duration-fast) ease;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-size: 13px;
  display: grid;
}
.ov-recent__row:hover {
  border-color: var(--border-strong);
}
.ov-recent__key {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
}
.ov-recent__model {
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}
.ov-recent__time {
  color: var(--muted);
  white-space: nowrap;
  font-size: 12px;
}
.blur-digits {
  filter: blur(4px);
  -webkit-user-select: none;
  user-select: none;
}
.ov-section-divider {
  border-top: 1px solid var(--border);
  margin: 18px 0 0;
}
.ov-access-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  display: grid;
}
.ov-access-grid__full {
  grid-column: 1/-1;
}
.ov-bottom-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  display: grid;
}
.ov-event-log,
.ov-log-tail {
  padding: 0;
  overflow: hidden;
}
.ov-expandable-toggle {
  cursor: pointer;
  color: var(--text-strong);
  letter-spacing: -0.01em;
  -webkit-user-select: none;
  user-select: none;
  transition: background var(--duration-fast) var(--ease-out);
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
  display: flex;
}
.ov-expandable-toggle::-webkit-details-marker {
  display: none;
}
.ov-expandable-toggle::marker {
  content: '';
}
.ov-expandable-toggle:hover {
  background: var(--card-highlight);
}
.ov-expandable-toggle .nav-item__icon {
  color: var(--muted);
  flex-shrink: 0;
}
.ov-expandable-toggle:after {
  content: '';
  opacity: 0.35;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
  background: currentColor;
  flex-shrink: 0;
  margin-left: auto;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
details[open] > .ov-expandable-toggle:after {
  transform: rotate(90deg);
}
.ov-count-badge {
  color: var(--muted);
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}
.ov-event-log-list {
  border-top: 1px solid var(--border);
  max-height: 320px;
  overflow-y: auto;
}
.ov-event-log-entry {
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  gap: 10px;
  padding: 6px 16px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
}
.ov-event-log-entry:last-child {
  border-bottom: none;
}
.ov-event-log-entry:hover {
  background: var(--card-highlight);
}
.ov-event-log-ts {
  font-family: var(--mono);
  color: var(--muted);
  flex-shrink: 0;
  min-width: 72px;
  font-size: 11px;
}
.ov-event-log-name {
  font-family: var(--mono);
  color: var(--text);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
}
.ov-event-log-payload {
  font-family: var(--mono);
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
}
.ov-log-tail-content {
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  color: var(--text);
  white-space: pre;
  word-break: break-all;
  max-height: 320px;
  margin: 0;
  padding: 12px 16px;
  font-size: 11px;
  line-height: 1.6;
  overflow: auto;
}
.ov-log-refresh {
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  color: var(--muted);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.ov-log-refresh:hover {
  color: var(--text);
  background: var(--bg-muted);
}
@media (width<=768px) {
  .ov-bottom-grid {
    grid-template-columns: 1fr;
  }
  .ov-event-log-list,
  .ov-log-tail-content {
    max-height: 240px;
  }
  .ov-access-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .ov-recent__row {
    gap: 8px;
  }
  .ov-recent__model {
    font-size: 11px;
  }
  .ov-attention-item,
  .agent-row {
    gap: 8px;
    padding: 8px 10px;
  }
  .agent-avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .agent-header,
  .agent-header-main {
    gap: 8px;
  }
  .exec-approval-overlay {
    padding: 12px;
  }
  .exec-approval-card {
    padding: 16px;
  }
  .exec-approval-actions {
    flex-direction: column;
  }
  .exec-approval-actions .btn {
    width: 100%;
  }
  .exec-approval-command {
    padding: 8px 10px;
    font-size: 12px;
  }
  .table-head {
    display: none;
  }
  .table-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.collapse-chevron {
  transition: transform var(--duration-fast) ease;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.collapse-chevron svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 12px;
  height: 12px;
}
.collapse-chevron--collapsed {
  transform: rotate(-90deg);
}
@media (width<=600px) {
  .ov-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .ov-card {
    padding: 12px;
  }
  .ov-card__value {
    font-size: 18px;
  }
  .ov-bottom-grid,
  .ov-access-grid {
    grid-template-columns: 1fr;
  }
  .ov-recent__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.config-layout {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--panel);
  height: calc(100vh - 160px);
  animation: config-enter 0.3s var(--ease-out);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 -16px -32px;
  display: grid;
  overflow: clip;
}
@keyframes config-enter {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (width<=600px) {
  .config-layout {
    margin: 0;
  }
}
@media (width<=400px) {
  .config-layout {
    margin: 0;
  }
}
.config-search {
  border-bottom: 1px solid var(--border);
  gap: 5px;
  padding: 10px 12px 8px;
  display: grid;
}
.config-search__input-row {
  position: relative;
}
.config-search__icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
}
.config-search__input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  width: 100%;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease;
  outline: none;
  padding: 8px 34px 8px 38px;
  font-size: 12.5px;
}
.config-search__input::placeholder {
  color: var(--muted);
}
.config-search__input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--bg-hover);
}
:root[data-theme-mode='light'] .config-search__input,
:root[data-theme-mode='light'] .config-search__input:focus {
  background: #fff;
}
.config-search__clear {
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  width: 22px;
  height: 22px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
  border: none;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.config-search__clear:hover {
  background: var(--border-strong);
  color: var(--text);
}
.config-mode-toggle {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  gap: 1px;
  padding: 3px;
  display: flex;
}
:root[data-theme-mode='light'] .config-mode-toggle {
  background: #fff;
}
.config-mode-toggle__btn {
  border-radius: calc(var(--radius-md) - 3px);
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  background: 0 0;
  border: none;
  flex: 1;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
}
.config-mode-toggle__btn:hover:not(.active) {
  color: var(--text);
  background: var(--bg-hover);
}
.config-mode-toggle__btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px var(--accent-subtle);
}
.config-main {
  background: var(--panel);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: clip;
}
.config-actions {
  background: var(--bg-accent);
  border-bottom: 1px solid var(--border);
  z-index: 2;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  display: flex;
  position: relative;
}
:root[data-theme-mode='light'] .config-actions {
  background: var(--bg-hover);
}
.config-actions__left,
.config-actions__right {
  align-items: center;
  gap: 8px;
  display: flex;
}
.config-changes-badge {
  border-radius: var(--radius-full);
  background: var(--accent-subtle);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
  animation: badge-enter 0.2s var(--ease-out);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}
@keyframes badge-enter {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.config-status {
  color: var(--muted);
  font-size: 12.5px;
}
.config-top-tabs {
  background: var(--bg-accent);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  display: flex;
}
:root[data-theme-mode='light'] .config-top-tabs {
  background: var(--bg-hover);
}
.config-search--top {
  border-bottom: none;
  flex: 0 320px;
  min-width: 200px;
  max-width: 320px;
  padding: 0;
}
.config-top-tabs__scroller {
  flex-wrap: wrap;
  flex: auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}
.config-top-tabs__tab {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  flex: none;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
}
:root[data-theme-mode='light'] .config-top-tabs__tab {
  background: #fff;
}
.config-top-tabs__tab:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.config-top-tabs__tab.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--accent-subtle);
}
.config-top-tabs__right {
  flex-shrink: 0;
  justify-content: flex-end;
  min-width: 0;
  display: flex;
}
.config-diff {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--radius-lg);
  background: var(--accent-subtle);
  animation: badge-enter 0.2s var(--ease-out);
  margin: 12px 20px 0;
  overflow: hidden;
}
.config-diff__summary {
  cursor: pointer;
  color: var(--accent);
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
  display: flex;
}
.config-diff__summary::-webkit-details-marker {
  display: none;
}
.config-diff__chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-normal) var(--ease-out);
}
.config-diff__chevron svg {
  width: 100%;
  height: 100%;
}
.config-diff[open] .config-diff__chevron {
  transform: rotate(180deg);
}
.config-diff__content {
  gap: 8px;
  padding: 0 16px 16px;
  display: grid;
}
.config-diff__item {
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-size: 11.5px;
  font-family: var(--mono);
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  display: flex;
}
:root[data-theme-mode='light'] .config-diff__item {
  background: #fff;
}
.config-diff__path {
  color: var(--text);
  flex-shrink: 0;
  font-weight: 600;
}
.config-diff__values {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  display: flex;
}
.config-diff__from {
  color: var(--danger);
  opacity: 0.85;
}
.config-diff__arrow {
  color: var(--muted);
}
.config-diff__to {
  color: var(--ok);
}
.config-section-hero {
  border-bottom: 1px solid var(--border);
  background: var(--bg-accent);
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  display: flex;
}
:root[data-theme-mode='light'] .config-section-hero {
  background: var(--bg-hover);
}
.config-section-hero__icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
}
.config-section-hero__icon svg {
  stroke: currentColor;
  fill: none;
  width: 100%;
  height: 100%;
}
.config-section-hero__text {
  gap: 2px;
  min-width: 0;
  display: grid;
}
.config-section-hero__title {
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 650;
  overflow: hidden;
}
.config-section-hero__desc {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.config-content {
  scroll-behavior: smooth;
  flex: 1;
  min-width: 0;
  padding: 20px 22px;
  overflow-y: auto;
}
.settings-appearance {
  gap: 18px;
  display: grid;
}
.settings-appearance__section {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  gap: 14px;
  padding: 18px;
  display: grid;
}
.settings-appearance__heading {
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}
.settings-appearance__hint {
  color: var(--muted);
  margin: -8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.settings-theme-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  display: grid;
}
.settings-theme-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  min-height: 64px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    transform var(--duration-fast) ease;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  display: grid;
  position: relative;
}
.settings-theme-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
  transform: translateY(-1px);
}
.settings-theme-card--active {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.settings-theme-card__icon,
.settings-theme-card__check {
  width: 18px;
  height: 18px;
  color: var(--accent);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.settings-theme-card__icon svg,
.settings-theme-card__check svg {
  stroke: currentColor;
  fill: none;
  width: 18px;
  height: 18px;
}
.settings-theme-card__label {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}
.settings-slider {
  gap: 10px;
  display: grid;
}
.settings-slider__header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.settings-slider__label {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}
.settings-slider__key-swatch {
  border: 1.5px solid var(--muted);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-block;
}
.settings-slider__key-swatch--sharp {
  border-radius: 0;
}
.settings-slider__key-swatch--round {
  border-radius: 5px;
}
.settings-slider__value {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
}
.settings-slider__input {
  appearance: none;
  border-radius: var(--radius-full);
  background: var(--bg-muted);
  cursor: pointer;
  width: 100%;
  height: 6px;
  transition: background var(--duration-fast) ease;
  outline: none;
}
.settings-slider__input:hover {
  background: var(--border-strong);
}
.settings-slider__input::-webkit-slider-thumb {
  appearance: none;
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
  cursor: pointer;
  width: 18px;
  height: 18px;
  transition:
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  border-radius: 50%;
  box-shadow: 0 1px 4px #00000040;
}
.settings-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px #0000004d;
}
.settings-slider__input::-moz-range-thumb {
  background: var(--accent);
  border: 2px solid var(--bg-elevated);
  cursor: pointer;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  box-shadow: 0 1px 4px #00000040;
}
.settings-slider__preview {
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 0;
  display: flex;
}
.settings-slider__preview-swatch {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  width: 32px;
  height: 22px;
  transition: border-radius var(--duration-fast) ease;
}
.settings-info-grid {
  gap: 10px;
  display: grid;
}
.settings-info-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  display: flex;
}
.settings-info-row__label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: 600;
}
.settings-info-row__value {
  min-width: 0;
  color: var(--text);
  text-align: right;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
}
.settings-status-dot {
  border-radius: var(--radius-full);
  background: var(--muted);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 14%, transparent);
}
.settings-status-dot--ok {
  background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent);
}
.config-raw-field textarea {
  min-height: 500px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.config-raw-field .config-raw-toggle {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 6px;
}
.config-loading {
  color: var(--muted);
  animation: fade-in 0.2s var(--ease-out);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 80px 24px;
  display: flex;
}
.config-loading__spinner {
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  animation: 0.7s linear infinite spin;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.config-empty {
  text-align: center;
  animation: fade-in 0.3s var(--ease-out);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 80px 24px;
  display: flex;
}
.config-empty__icon {
  opacity: 0.25;
  font-size: 48px;
}
.config-empty__text {
  color: var(--muted);
  max-width: 320px;
  font-size: 14px;
  line-height: 1.5;
}
.config-form--modern {
  gap: 14px;
  width: 100%;
  min-width: 0;
  display: grid;
}
.config-section-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  width: 100%;
  transition:
    border-color var(--duration-normal) ease,
    box-shadow var(--duration-normal) ease;
  animation: section-card-enter 0.25s var(--ease-out) backwards;
  overflow: hidden;
}
@keyframes section-card-enter {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.config-section-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
:root[data-theme-mode='light'] .config-section-card {
  background: #fff;
}
:root[data-theme-mode='light'] .config-section-card:hover {
  box-shadow: 0 2px 8px #0000000a;
}
.config-section-card__header {
  background: var(--bg-accent);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  display: flex;
}
:root[data-theme-mode='light'] .config-section-card__header {
  background: var(--bg-hover);
}
.config-section-card__icon {
  width: 30px;
  height: 30px;
  color: var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent-subtle);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 6px;
  display: flex;
}
.config-section-card__icon svg {
  width: 100%;
  height: 100%;
}
.config-section-card__titles {
  flex: 1;
  min-width: 0;
}
.config-section-card__title {
  letter-spacing: -0.015em;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
}
.config-section-card__desc {
  color: var(--muted);
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.config-section-card__content {
  min-width: 0;
  padding: 16px 18px;
}
.config-form--modern .config-section-card:first-child {
  animation-delay: 0s;
}
.config-form--modern .config-section-card:nth-child(2) {
  animation-delay: 40ms;
}
.config-form--modern .config-section-card:nth-child(3) {
  animation-delay: 80ms;
}
.config-form--modern .config-section-card:nth-child(4) {
  animation-delay: 0.12s;
}
.config-form--modern .config-section-card:nth-child(5) {
  animation-delay: 0.16s;
}
.config-form--modern .config-section-card:nth-child(n + 6) {
  animation-delay: 0.2s;
}
.cfg-fields {
  gap: 14px;
  display: grid;
}
.cfg-fields--inline {
  gap: 10px;
}
.cfg-field {
  gap: 6px;
  display: grid;
}
.cfg-field--error {
  border-radius: var(--radius-md);
  background: var(--danger-subtle);
  border: 1px solid #ef44444d;
  padding: 14px;
}
.cfg-field__label {
  color: var(--text);
  letter-spacing: -0.005em;
  font-size: 12.5px;
  font-weight: 600;
}
.cfg-field__help {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.cfg-tags {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.cfg-tag {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--muted);
  background: var(--bg-elevated);
  white-space: nowrap;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  display: inline-flex;
}
:root[data-theme-mode='light'] .cfg-tag {
  background: #fff;
}
.cfg-field__error {
  color: var(--danger);
  font-size: 12px;
}
.cfg-input-wrap {
  gap: 10px;
  display: flex;
}
.cfg-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    background var(--duration-fast) ease;
  outline: none;
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
}
.cfg-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.cfg-input:hover:not(:focus) {
  border-color: var(--border-strong);
}
.cfg-input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  background: var(--bg-hover);
}
:root[data-theme-mode='light'] .cfg-input {
  border-color: var(--border);
  background: #fff;
}
:root[data-theme-mode='light'] .cfg-input:hover:not(:focus) {
  border-color: var(--border-strong);
}
:root[data-theme-mode='light'] .cfg-input:focus {
  background: #fff;
}
.cfg-input--sm {
  padding: 6px 10px;
  font-size: 12px;
}
.cfg-input__reset {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
  padding: 9px 12px;
  font-size: 13px;
}
.cfg-input__reset:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text);
}
.cfg-input__reset:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cfg-textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  width: 100%;
  font-family: var(--mono);
  resize: vertical;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  outline: none;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
}
.cfg-textarea:hover:not(:focus) {
  border-color: var(--border-strong);
}
.cfg-textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
:root[data-theme-mode='light'] .cfg-textarea {
  border-color: var(--border);
  background: #fff;
}
.cfg-textarea--sm {
  padding: 8px 12px;
  font-size: 12px;
}
.cfg-input--redacted,
.cfg-textarea--redacted {
  cursor: pointer;
  opacity: 0.7;
}
.cfg-number {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  transition: border-color var(--duration-fast) ease;
  display: inline-flex;
  overflow: hidden;
}
.cfg-number:hover {
  border-color: var(--border-strong);
}
:root[data-theme-mode='light'] .cfg-number {
  background: #fff;
}
.cfg-number__btn {
  background: var(--bg-elevated);
  width: 38px;
  color: var(--text);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  border: none;
  font-size: 16px;
  font-weight: 300;
}
.cfg-number__btn:hover:not(:disabled) {
  background: var(--bg-hover);
}
.cfg-number__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
:root[data-theme-mode='light'] .cfg-number__btn {
  background: var(--bg-hover);
}
:root[data-theme-mode='light'] .cfg-number__btn:hover:not(:disabled) {
  background: var(--border);
}
.cfg-number__input {
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  appearance: textfield;
  background: 0 0;
  outline: none;
  width: 72px;
  padding: 9px;
  font-size: 13px;
}
.cfg-number__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cfg-number__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cfg-select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--bg-accent);
  cursor: pointer;
  appearance: none;
  transition:
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  outline: none;
  padding: 8px 36px 8px 12px;
  font-size: 13px;
}
.cfg-select:hover:not(:focus) {
  border-color: var(--border-strong);
}
.cfg-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
:root[data-theme-mode='light'] .cfg-select {
  border-color: var(--border);
  background-color: #fff;
}
.cfg-segmented {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  gap: 1px;
  padding: 3px;
  display: inline-flex;
}
:root[data-theme-mode='light'] .cfg-segmented {
  background: var(--bg-hover);
}
.cfg-segmented__btn {
  border-radius: calc(var(--radius-md) - 3px);
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
  background: 0 0;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
}
.cfg-segmented__btn:hover:not(:disabled):not(.active) {
  color: var(--text);
  background: var(--bg-hover);
}
.cfg-segmented__btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px var(--accent-subtle);
}
.cfg-segmented__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cfg-toggle-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  display: flex;
}
.cfg-toggle-row:hover:not(.disabled) {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.cfg-toggle-row.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
:root[data-theme-mode='light'] .cfg-toggle-row {
  background: #fff;
}
:root[data-theme-mode='light'] .cfg-toggle-row:hover:not(.disabled) {
  background: var(--bg-hover);
}
.cfg-toggle-row__content {
  flex: 1;
  min-width: 0;
}
.cfg-toggle-row__label {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  display: block;
}
.cfg-toggle-row__help {
  color: var(--muted);
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.45;
  display: block;
}
.cfg-toggle {
  flex-shrink: 0;
  position: relative;
}
.cfg-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cfg-toggle__track {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  width: 40px;
  height: 22px;
  transition:
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
  display: block;
  position: relative;
}
:root[data-theme-mode='light'] .cfg-toggle__track {
  background: var(--border);
}
.cfg-toggle__track:after {
  content: '';
  background: var(--text);
  border-radius: var(--radius-full);
  width: 16px;
  height: 16px;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--duration-normal) var(--ease-spring),
    background var(--duration-normal) ease;
  position: absolute;
  top: 2px;
  left: 2px;
}
.cfg-toggle input:checked + .cfg-toggle__track {
  background: var(--ok-subtle);
  border-color: #22c55e66;
}
.cfg-toggle input:checked + .cfg-toggle__track:after {
  background: var(--ok);
  transform: translate(18px);
}
.cfg-toggle input:focus + .cfg-toggle__track {
  box-shadow: var(--focus-ring);
}
.cfg-object {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) ease;
  background: 0 0;
  overflow: hidden;
}
.cfg-object:hover {
  border-color: var(--border-strong);
}
:root[data-theme-mode='light'] .cfg-object {
  background: 0 0;
}
.cfg-object__header {
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  border-radius: calc(var(--radius-md) - 1px);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  list-style: none;
  display: flex;
}
.cfg-object__header:hover {
  background: var(--bg-hover);
}
.cfg-object__header::-webkit-details-marker {
  display: none;
}
.cfg-object__title {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.cfg-object__title-wrap {
  gap: 6px;
  min-width: 0;
  display: grid;
}
.cfg-object__chevron {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform var(--duration-normal) var(--ease-out);
}
.cfg-object__chevron svg {
  width: 100%;
  height: 100%;
}
.cfg-object[open] .cfg-object__chevron {
  transform: rotate(180deg);
}
.cfg-object__help {
  color: var(--muted);
  padding: 0 12px 10px;
  font-size: 12px;
}
.cfg-object__content {
  border-top: 1px solid var(--border);
  gap: 12px;
  padding: 12px;
  display: grid;
}
.cfg-array {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cfg-array__header {
  background: var(--bg-accent);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  display: flex;
}
:root[data-theme-mode='light'] .cfg-array__header {
  background: var(--bg-hover);
}
.cfg-array__label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.cfg-array__title {
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: grid;
}
.cfg-array__count {
  color: var(--muted);
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 12px;
}
:root[data-theme-mode='light'] .cfg-array__count {
  background: #fff;
}
.cfg-array__add {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}
.cfg-array__add:hover:not(:disabled) {
  background: var(--bg-hover);
}
.cfg-array__add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cfg-array__add-icon {
  width: 14px;
  height: 14px;
}
.cfg-array__add-icon svg {
  width: 100%;
  height: 100%;
}
.cfg-array__help {
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  font-size: 12px;
}
.cfg-array__empty {
  text-align: center;
  color: var(--muted);
  padding: 36px 18px;
  font-size: 13px;
}
.cfg-array__items {
  background: var(--border);
  gap: 1px;
  display: grid;
}
.cfg-array__item {
  background: var(--panel);
}
.cfg-array__item-header {
  background: var(--bg-accent);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  display: flex;
}
:root[data-theme-mode='light'] .cfg-array__item-header {
  background: var(--bg-hover);
}
.cfg-array__item-index {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 600;
}
.cfg-array__item-remove {
  border-radius: var(--radius-md);
  width: 30px;
  height: 30px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
  background: 0 0;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.cfg-array__item-remove svg {
  width: 16px;
  height: 16px;
}
.cfg-array__item-remove:hover:not(:disabled) {
  background: var(--danger-subtle);
  color: var(--danger);
}
.cfg-array__item-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cfg-array__item-content {
  padding: 12px;
}
.cfg-map {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cfg-map__header {
  background: var(--bg-accent);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  display: flex;
}
:root[data-theme-mode='light'] .cfg-map__header {
  background: var(--bg-hover);
}
.cfg-map__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.cfg-map__add {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
}
.cfg-map__add:hover:not(:disabled) {
  background: var(--bg-hover);
}
.cfg-map__add-icon {
  width: 14px;
  height: 14px;
}
.cfg-map__add-icon svg {
  width: 100%;
  height: 100%;
}
.cfg-map__empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 18px;
  font-size: 13px;
}
.cfg-map__items {
  gap: 8px;
  padding: 10px 12px 12px;
  display: grid;
}
.cfg-map__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
  gap: 8px;
  padding: 10px;
  display: grid;
}
:root[data-theme-mode='light'] .cfg-map__item {
  background: #fff;
}
.cfg-map__item-header {
  grid-template-columns: minmax(0, 300px) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}
.cfg-map__item-key,
.cfg-map__item-value {
  min-width: 0;
}
.cfg-map__item-value > .cfg-fields {
  gap: 10px;
}
.cfg-map__item-remove {
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
  background: 0 0;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.cfg-map__item-remove svg {
  width: 16px;
  height: 16px;
}
.cfg-map__item-remove:hover:not(:disabled) {
  background: var(--danger-subtle);
  color: var(--danger);
}
.pill--sm {
  padding: 5px 12px;
  font-size: 11px;
}
.pill--ok {
  color: var(--ok);
  border-color: #22c55e59;
}
.pill--danger {
  color: var(--danger);
  border-color: #ef444459;
}
@media (width<=768px) {
  .config-layout {
    border-radius: var(--radius-md);
    height: calc(100dvh - 100px);
    margin: 0 -8px -16px;
  }
  .config-actions {
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .config-actions__left,
  .config-actions__right {
    justify-content: center;
    width: 100%;
  }
  .config-top-tabs {
    flex-wrap: wrap;
    padding: 12px 16px;
  }
  .config-search--top {
    flex: 100%;
    max-width: none;
  }
  .config-top-tabs__scroller,
  .config-top-tabs__right {
    flex: 100%;
  }
  .config-top-tabs__right .config-mode-toggle {
    width: 100%;
  }
  .config-top-tabs__right .config-mode-toggle__btn {
    flex: 50%;
  }
  .config-section-hero {
    padding: 14px 16px;
  }
  .config-content {
    padding: 16px;
  }
  .settings-theme-grid {
    grid-template-columns: 1fr;
  }
  .settings-info-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .settings-info-row__value {
    text-align: left;
  }
  .config-section-card__header,
  .config-section-card__content {
    padding: 14px 16px;
  }
  .cfg-toggle-row {
    padding: 12px 14px;
  }
  .cfg-map__item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cfg-map__item-header {
    grid-template-columns: 1fr auto;
  }
  .cfg-map__item-remove {
    justify-self: end;
  }
}
@media (width<=480px) {
  .config-section-card__icon {
    width: 30px;
    height: 30px;
  }
  .config-section-card__title {
    font-size: 16px;
  }
  .cfg-segmented {
    flex-wrap: wrap;
  }
  .cfg-segmented__btn {
    flex: 1 0 auto;
    min-width: 70px;
  }
}
.usage-page {
  gap: 16px;
  display: grid;
  container-type: inline-size;
}
.usage-page > * {
  min-width: 0;
}
.usage-page .card,
.usage-page .stat,
.usage-page .usage-insight-card,
.usage-page .context-details-panel,
.usage-page .session-logs-compact,
.usage-page .session-timeseries-compact {
  animation: rise 0.25s var(--ease-out) backwards;
}
.usage-page .btn.btn-sm,
.usage-page button.btn-sm {
  min-height: 30px;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.15;
}
.usage-page-header {
  gap: 4px;
  display: grid;
}
.usage-page-title {
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-size: 24px;
  font-weight: 700;
}
.usage-page-subtitle {
  max-width: 720px;
  color: var(--muted);
  font-size: 14px;
}
.usage-section-title {
  margin: 0;
}
.usage-loading-card,
.usage-empty-state,
.usage-overview-card,
.usage-mosaic,
.usage-left-card,
.sessions-card,
.session-detail-panel {
  position: relative;
  overflow: clip;
}
.usage-header {
  position: relative;
  overflow: visible;
}
.usage-header.pinned {
  z-index: 4;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 16px;
}
.usage-header {
  gap: 14px;
  display: grid;
}
.usage-header-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}
.usage-header-title {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}
.usage-header-metrics {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}
.usage-refresh-indicator,
.usage-loading-badge {
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}
.usage-loading-badge {
  width: fit-content;
}
.usage-loading-spinner {
  border: 2px solid;
  border-right-color: #0000;
  border-radius: 999px;
  width: 12px;
  height: 12px;
  animation: 0.8s linear infinite usage-spin;
}
.usage-loading-card {
  gap: 16px;
  display: grid;
}
.usage-loading-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}
.usage-loading-title-group {
  gap: 8px;
  display: grid;
}
.usage-loading-controls {
  justify-content: flex-end;
  display: flex;
}
.usage-loading-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}
.usage-skeleton-block {
  border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--bg-muted) 20%, var(--bg-hover) 50%, var(--bg-muted) 80%);
  background-size: 200% 100%;
  border-radius: 16px;
  min-height: 96px;
  animation: 1.35s ease-in-out infinite usage-shimmer;
}
.usage-skeleton-block--tall {
  min-height: 128px;
}
.usage-controls {
  flex-wrap: wrap;
  flex: 100%;
  align-items: center;
  gap: 10px;
  display: flex;
}
.usage-presets,
.usage-date-range,
.chart-toggle,
.usage-query-actions,
.usage-filter-actions {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}
.usage-date-range {
  flex-wrap: wrap;
}
.usage-date-range--loading {
  opacity: 0.75;
}
.usage-date-input,
.usage-select,
.usage-query-input,
.usage-filters-inline select,
.usage-filters-inline input[type='text'] {
  border: 1px solid var(--border);
  background: var(--bg);
  min-height: 36px;
  color: var(--text);
  font: inherit;
  transition:
    border-color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
  border-radius: 10px;
}
.usage-date-input,
.usage-select {
  padding: 7px 10px;
}
.usage-date-input:focus,
.usage-select:focus,
.usage-query-input:focus,
.usage-filters-inline select:focus,
.usage-filters-inline input[type='text']:focus {
  border-color: color-mix(in srgb, var(--accent) 65%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}
.usage-separator,
.usage-query-hint,
.sessions-card-count,
.session-bar-meta,
.session-summary-meta,
.usage-summary-sub,
.usage-mosaic-sub,
.usage-error-sub,
.context-weight-desc,
.timeseries-summary,
.session-log-meta,
.session-logs-header-count {
  color: var(--muted);
}
.usage-metric-badge {
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--text);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-size: 12px;
  display: inline-flex;
}
.usage-metric-badge strong {
  color: var(--text-strong);
}
.usage-pin-btn,
.usage-export-button,
.usage-action-btn,
.session-copy-btn,
.context-expand-btn,
.session-close-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--secondary-foreground);
  cursor: pointer;
  transition:
    transform 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    background 0.18s var(--ease-out),
    color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}
.usage-pin-btn,
.usage-export-button,
.context-expand-btn,
.session-copy-btn {
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}
.usage-pin-btn:hover,
.usage-export-button:hover,
.usage-action-btn:hover,
.session-copy-btn:hover,
.context-expand-btn:hover,
.session-close-btn:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--secondary));
  color: var(--text-strong);
}
.usage-pin-btn.active,
.usage-action-btn.usage-primary-btn,
.chart-toggle .toggle-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--primary-foreground);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}
.usage-primary-btn:disabled,
.usage-secondary-btn:disabled,
.usage-export-item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.usage-secondary-btn {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.usage-query-section {
  gap: 10px;
  display: grid;
}
.usage-query-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  display: grid;
}
.usage-query-input {
  width: 100%;
  padding: 10px 12px;
}
.usage-query-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.usage-filter-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}
details.usage-filter-select,
.usage-export-menu {
  position: relative;
}
details.usage-filter-select summary,
.usage-export-button {
  list-style: none;
}
details.usage-filter-select summary::-webkit-details-marker {
  display: none;
}
.usage-export-menu summary::-webkit-details-marker {
  display: none;
}
.usage-filter-select summary {
  border: 1px solid var(--border);
  background: var(--bg);
  min-height: 34px;
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  display: inline-flex;
}
.usage-filter-select[open] summary,
.usage-filter-select summary:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}
.usage-filter-badge {
  background: var(--accent-subtle);
  min-width: 20px;
  height: 20px;
  color: var(--accent);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}
.usage-filter-popover,
.usage-export-popover {
  border: 1px solid var(--border-strong);
  background: var(--popover);
  width: min(320px, 100vw - 48px);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
  z-index: 12;
  border-radius: 14px;
  padding: 12px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}
.usage-export-popover {
  width: 220px;
}
.usage-filter-options,
.usage-export-list {
  gap: 8px;
  display: grid;
}
.usage-filter-option {
  background: color-mix(in srgb, var(--bg-muted) 72%, transparent);
  border-radius: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: grid;
}
.usage-filter-option:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-muted));
}
.usage-export-item {
  border: 1px solid var(--border);
  background: var(--bg);
  width: 100%;
  min-height: 36px;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.18s var(--ease-out),
    background 0.18s var(--ease-out),
    color 0.18s var(--ease-out);
  border-radius: 10px;
  padding: 9px 10px;
}
.usage-export-item:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--text-strong);
}
.usage-query-chips,
.usage-query-suggestions,
.usage-badges,
.usage-empty-state__features {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}
.usage-query-chip,
.usage-query-suggestion,
.usage-badge,
.usage-empty-state__feature {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--text);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  display: inline-flex;
}
.usage-query-chip button {
  color: inherit;
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.usage-query-suggestion {
  cursor: pointer;
  transition:
    transform 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
}
.usage-query-suggestion:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  transform: translateY(-1px);
}
.usage-callout {
  margin-top: 12px;
}
.usage-callout--tight {
  margin-top: 0;
}
.callout.warning {
  border-color: color-mix(in srgb, var(--warn) 22%, var(--border));
  background: var(--warn-subtle);
  color: var(--text);
}
.usage-empty-state {
  justify-items: start;
  gap: 12px;
  display: grid;
}
.usage-empty-state__title {
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 700;
}
.usage-empty-state__subtitle {
  max-width: 640px;
}
.usage-empty-state__actions {
  margin-top: 4px;
}
.usage-empty-block {
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--bg-muted) 62%, transparent);
  text-align: center;
  color: var(--muted);
  border-radius: 14px;
  padding: 20px 14px;
  font-size: 13px;
}
.usage-empty-block--compact {
  border-style: solid;
  padding: 12px;
}
.usage-overview-card,
.usage-overview-layout {
  gap: 16px;
  display: grid;
}
.usage-summary-grid,
.session-summary-grid,
.usage-insights-grid,
.usage-mosaic-grid,
.context-breakdown-grid {
  gap: 12px;
  display: grid;
}
.usage-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  grid-auto-flow: dense;
  align-items: stretch;
}
.usage-summary-card,
.session-summary-card {
  gap: 8px;
  min-height: 118px;
}
.usage-summary-card.stat,
.session-summary-card.stat {
  padding: 16px;
}
.usage-summary-card {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--card) 92%, var(--bg-elevated)) 0%,
    color-mix(in srgb, var(--card) 84%, var(--bg-muted)) 100%
  );
  min-height: 132px;
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
  grid-auto-rows: min-content;
  align-content: start;
  display: grid;
}
.usage-summary-card--hero,
.usage-summary-card--half,
.usage-summary-card--medium,
.usage-summary-card--compact {
  grid-column: span 2;
}
.usage-summary-card--hero {
  gap: 12px;
  min-height: 168px;
  padding-block: 18px;
}
.usage-summary-card--throughput {
  background:
    radial-gradient(
      circle at top right,
      color-mix(in srgb, var(--accent) 14%, transparent) 0%,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--card) 92%, var(--bg-elevated)) 0%,
      color-mix(in srgb, var(--card) 84%, var(--bg-muted)) 100%
    );
}
.usage-summary-title,
.session-summary-title,
.usage-insight-title,
.context-breakdown-title,
.sessions-sort span,
.cost-breakdown-header,
.usage-mosaic-section-title {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  font-weight: 700;
}
.usage-summary-value,
.session-summary-value {
  color: var(--text-strong);
  overflow-wrap: anywhere;
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1.05;
}
.usage-summary-card--hero .usage-summary-value {
  font-size: clamp(2rem, 3vw, 2.8rem);
}
.usage-summary-value--compact {
  font-size: clamp(1.2rem, 1.75vw, 1.7rem);
  line-height: 1.15;
}
.usage-summary-value.good {
  color: var(--ok);
}
.usage-summary-value.warn {
  color: var(--warn);
}
.usage-summary-value.bad {
  color: var(--danger);
}
.usage-summary-sub,
.session-summary-meta,
.usage-list-sub,
.usage-error-sub {
  font-size: 12px;
}
.usage-summary-hint {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-muted) 82%, transparent);
  width: 18px;
  height: 18px;
  color: var(--muted);
  cursor: help;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  font-size: 10px;
  display: inline-flex;
}
.usage-insights-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.usage-insights-grid--tight {
  margin-top: 12px;
}
.usage-insight-card {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 82%, var(--bg-muted));
  border-radius: 16px;
  gap: 10px;
  min-height: 168px;
  padding: 16px;
  display: grid;
}
.usage-insight-card--wide {
  grid-column: 1/-1;
}
.usage-list,
.usage-error-list,
.context-breakdown-list {
  gap: 10px;
  display: grid;
}
.usage-list-item,
.usage-error-row,
.context-breakdown-item {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  display: flex;
}
.usage-list-value {
  color: var(--text-strong);
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  display: inline-flex;
}
.usage-error-rate {
  color: var(--danger);
  font-size: 16px;
  font-weight: 700;
}
.usage-mosaic {
  gap: 14px;
  display: grid;
}
.usage-mosaic-header,
.daily-chart-header,
.sessions-card-header,
.sessions-card-meta,
.timeseries-header-row,
.context-breakdown-header,
.session-detail-header,
.session-logs-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}
.usage-mosaic-title,
.usage-mosaic-total,
.session-detail-title {
  color: var(--text-strong);
}
.usage-mosaic-title,
.session-detail-title {
  font-size: 16px;
  font-weight: 700;
}
.usage-mosaic-total {
  font-size: 14px;
  font-weight: 700;
}
.usage-mosaic-grid {
  grid-template-columns: 1.1fr minmax(0, 1.4fr);
}
.usage-mosaic-section {
  gap: 10px;
  display: grid;
}
.usage-mosaic-section-title {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}
.usage-daypart-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}
.usage-daypart-cell,
.usage-hour-cell {
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 12px;
}
.usage-daypart-cell {
  align-content: space-between;
  gap: 6px;
  min-height: 72px;
  padding: 10px;
  display: grid;
}
.usage-daypart-label,
.usage-hour-labels {
  color: var(--muted);
  font-size: 11px;
}
.usage-daypart-value {
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 700;
}
.usage-hour-grid {
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}
.usage-hour-cell {
  cursor: pointer;
  min-height: 46px;
  transition:
    transform 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
}
.usage-hour-cell:hover {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}
.usage-hour-cell.selected {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.usage-hour-labels {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}
.usage-hour-legend {
  color: var(--muted);
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  display: flex;
}
.usage-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  display: grid;
}
.usage-grid:has(.usage-grid-column:nth-child(2)) {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}
.usage-grid-column {
  align-content: start;
  gap: 16px;
  min-width: 0;
  display: grid;
}
.usage-left-card {
  gap: 18px;
  display: grid;
}
.daily-chart-compact,
.cost-breakdown,
.sessions-card,
.session-timeseries-compact,
.context-details-panel,
.session-logs-compact {
  gap: 12px;
  display: grid;
}
.daily-chart-bars {
  --bar-max-width: 32px;
  grid-auto-columns: minmax(18px, 1fr);
  grid-auto-flow: column;
  align-items: end;
  gap: 6px;
  min-height: 244px;
  padding: 6px 2px 0;
  display: grid;
  overflow-x: auto;
}
.daily-bar-wrapper {
  cursor: pointer;
  place-items: end center;
  gap: 6px;
  min-width: 18px;
  display: grid;
  position: relative;
}
.daily-bar-wrapper.selected .daily-bar {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.daily-bar {
  width: min(100%, var(--bar-max-width));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 82%, white 6%),
    color-mix(in srgb, var(--accent) 52%, var(--bg-muted))
  );
  min-height: 6px;
  transition:
    transform 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
  border-radius: 10px 10px 4px 4px;
}
.daily-bar-wrapper:hover .daily-bar {
  transform: translateY(-1px);
}
.daily-bar--stacked {
  background: 0 0;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}
.daily-bar-total,
.daily-bar-label {
  color: var(--muted);
  white-space: nowrap;
  font-size: 10px;
}
.daily-bar-label--compact {
  font-size: 8px;
}
.daily-bar-tooltip {
  border: 1px solid var(--border);
  background: var(--popover);
  width: max-content;
  max-width: 220px;
  color: var(--popover-foreground);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s var(--ease-out),
    transform 0.18s var(--ease-out);
  z-index: 2;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 11px;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
}
.daily-bar-wrapper:hover .daily-bar-tooltip {
  opacity: 1;
  transform: translate(-50%);
}
.cost-breakdown-bar {
  background: color-mix(in srgb, var(--bg-muted) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 100%;
  min-height: 16px;
  display: flex;
  overflow: hidden;
}
.cost-breakdown-bar--compact {
  min-height: 18px;
}
.cost-breakdown-legend {
  flex-wrap: wrap;
  gap: 8px 12px;
  display: flex;
}
.legend-item {
  color: var(--muted);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}
.legend-dot,
.cost-segment,
.context-segment,
.ts-bar {
  transition:
    opacity 0.18s var(--ease-out),
    fill 0.18s var(--ease-out),
    background 0.18s var(--ease-out);
}
.legend-dot {
  border-radius: 999px;
  width: 10px;
  height: 10px;
}
.cost-segment.output,
.legend-dot.output,
.ts-bar.output,
.ts-bar {
  background: var(--accent);
  fill: var(--accent);
}
.cost-segment.input,
.legend-dot.input,
.ts-bar.input,
.context-segment.files,
.legend-dot.files {
  background: var(--ok);
  fill: var(--ok);
}
.cost-segment.cache-write,
.legend-dot.cache-write,
.ts-bar.cache-write,
.context-segment.tools,
.legend-dot.tools {
  background: var(--warn);
  fill: var(--warn);
}
.cost-segment.cache-read,
.legend-dot.cache-read,
.ts-bar.cache-read,
.context-segment.skills,
.legend-dot.skills {
  background: var(--info);
  fill: var(--info);
}
.context-segment.system,
.legend-dot.system {
  background: var(--accent);
}
.cost-breakdown-total,
.context-total {
  color: var(--text);
  font-size: 12px;
}
.sessions-card {
  gap: 14px;
}
.sessions-card-stats {
  flex-wrap: wrap;
  gap: 8px 12px;
  display: inline-flex;
}
.sessions-sort {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}
.sessions-sort select {
  border: 1px solid var(--border);
  background: var(--bg);
  min-height: 34px;
  color: var(--text);
  border-radius: 10px;
  padding: 7px 10px;
}
.session-bars {
  gap: 8px;
  max-height: 520px;
  display: grid;
  overflow-y: auto;
}
.session-bars--recent {
  max-height: 220px;
  margin-top: 6px;
  overflow: auto;
}
.session-bars--selected {
  max-height: 160px;
  margin-top: 6px;
  overflow: auto;
}
.session-bar-row {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 86%, var(--bg-muted));
  cursor: pointer;
  transition:
    transform 0.18s var(--ease-out),
    border-color 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  display: flex;
}
.session-bar-row:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 8px 18px #0000001f;
}
.session-bar-row.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}
.session-bar-label,
.session-bar-actions,
.session-detail-header-left {
  min-width: 0;
}
.session-bar-label {
  flex: auto;
}
.session-bar-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  font-weight: 600;
  overflow: hidden;
}
.session-bar-actions {
  flex: none;
  align-items: center;
  gap: 10px;
  display: flex;
}
.session-copy-btn {
  min-width: 58px;
}
.session-bar-value {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 700;
}
.usage-more-sessions {
  text-align: center;
  color: var(--muted);
  padding: 8px;
  font-size: 11px;
}
.sessions-selected-group {
  gap: 6px;
  margin-top: 10px;
  display: grid;
}
.session-detail-panel {
  gap: 14px;
  display: grid;
}
.session-detail-header-left {
  align-items: center;
  gap: 8px;
  display: flex;
}
.session-detail-indicator {
  color: var(--muted);
  margin-left: 8px;
  font-size: 11px;
  display: inline-flex;
}
.session-detail-stats {
  color: var(--text);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 13px;
  display: flex;
}
.session-close-btn {
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
}
.session-detail-content,
.session-detail-row,
.session-detail-bottom {
  gap: 14px;
  display: grid;
}
.session-detail-bottom {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
}
.usage-badges {
  margin-bottom: 2px;
}
.session-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.session-timeseries-compact,
.context-details-panel,
.session-logs-compact {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 88%, var(--bg-muted));
  border-radius: 16px;
  padding: 14px;
}
.timeseries-controls {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}
.timeseries-chart-wrapper {
  cursor: crosshair;
  position: relative;
}
.timeseries-svg {
  width: 100%;
  height: auto;
  display: block;
}
.ts-axis-label {
  fill: var(--muted);
  font-size: 8px;
}
.ts-bar {
  opacity: 0.9;
}
.ts-bar.dimmed {
  opacity: 0.26;
}
.cursor-handle {
  filter: drop-shadow(0 1px 2px #0000004d);
}
.chart-handle-zone {
  cursor: col-resize;
  width: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translate(-50%);
}
.timeseries-summary {
  font-size: 12px;
}
.timeseries-summary__range {
  color: var(--accent);
  font-weight: 600;
}
.timeseries-breakdown {
  gap: 8px;
  margin-top: 8px;
  display: grid;
}
.context-weight-desc {
  font-size: 12px;
}
.context-stacked-bar {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-muted) 82%, transparent);
  border-radius: 999px;
  min-height: 18px;
  display: flex;
  overflow: hidden;
}
.context-legend {
  flex-wrap: wrap;
  gap: 8px 12px;
  display: flex;
}
.context-breakdown-card {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 14px;
  gap: 10px;
  padding: 14px;
  display: grid;
}
.context-breakdown-more {
  color: var(--muted);
  font-size: 12px;
}
.session-logs-header {
  align-items: flex-start;
}
.session-log-filters {
  margin: 0;
}
.usage-filters-inline {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}
.usage-filters-inline select[multiple] {
  min-width: 150px;
  min-height: 112px;
  padding: 8px;
}
.usage-filters-inline input[type='text'] {
  flex: 220px;
  padding: 9px 10px;
}
.session-log-has-tools {
  color: var(--text);
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 6px;
  padding: 0;
  display: inline-flex;
}
.session-logs-list {
  gap: 10px;
  display: grid;
}
.session-log-entry {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 14px;
  gap: 8px;
  padding: 12px;
  display: grid;
}
.session-log-entry.user {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}
.session-log-entry.assistant {
  border-color: color-mix(in srgb, var(--info) 18%, var(--border));
}
.session-log-meta {
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 12px;
  display: flex;
}
.session-log-role {
  color: var(--text-strong);
  font-weight: 700;
}
.session-log-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.session-log-tools {
  gap: 8px;
  display: grid;
}
.session-log-tools summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.session-log-tools-list {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}
.session-log-tools-pill {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 999px;
  align-items: center;
  padding: 6px 8px;
  font-size: 11px;
  display: inline-flex;
}
:root[data-theme-mode='light'] .usage-daypart-cell,
:root[data-theme-mode='light'] .usage-hour-cell {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
}
:root[data-theme-mode='light'] .daily-bar-tooltip,
:root[data-theme-mode='light'] .usage-filter-popover,
:root[data-theme-mode='light'] .usage-export-popover {
  box-shadow: var(--shadow-md);
}
:root[data-theme-mode='light'] .session-bar-row,
:root[data-theme-mode='light'] .usage-insight-card,
:root[data-theme-mode='light'] .session-timeseries-compact,
:root[data-theme-mode='light'] .context-details-panel,
:root[data-theme-mode='light'] .session-logs-compact {
  background: var(--card);
}
@container (width>=1400px) {
  .usage-overview-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.95fr);
    align-items: start;
  }
  .usage-summary-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .usage-summary-card--hero {
    grid-column: span 4;
  }
  .usage-summary-card--half {
    grid-column: span 2;
  }
  .usage-summary-card--medium {
    grid-column: span 3;
  }
  .usage-summary-card--compact {
    grid-column: span 2;
  }
  .usage-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (width>=1780px) {
  .usage-overview-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
  .usage-insights-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .usage-error-list--hours {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .usage-error-list--hours .usage-error-row {
    border: 1px solid color-mix(in srgb, var(--danger) 16%, var(--border));
    background: color-mix(in srgb, var(--danger) 5%, var(--bg-muted));
    border-radius: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
  }
  .usage-error-list--hours .usage-error-rate {
    font-size: 18px;
  }
}
@container (width<=1080px) {
  .usage-grid,
  .usage-mosaic-grid,
  .session-detail-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .usage-summary-grid,
  .session-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .usage-summary-card--hero,
  .usage-summary-card--half,
  .usage-summary-card--medium,
  .usage-summary-card--compact {
    grid-column: auto;
  }
  .usage-insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (width<=820px) {
  .usage-query-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .usage-header-metrics,
  .timeseries-controls {
    justify-content: flex-start;
  }
  .usage-loading-grid,
  .usage-summary-grid,
  .session-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .usage-summary-card {
    min-height: 0;
  }
}
@media (width<=900px) {
  .usage-grid,
  .usage-mosaic-grid,
  .session-detail-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .usage-summary-grid,
  .session-summary-grid,
  .context-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .usage-summary-card--hero,
  .usage-summary-card--half,
  .usage-summary-card--medium,
  .usage-summary-card--compact {
    grid-column: auto;
  }
  .usage-insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width<=600px) {
  .usage-page {
    gap: 14px;
  }
  .usage-controls,
  .usage-filter-row,
  .usage-filters-inline {
    align-items: stretch;
  }
  .usage-date-range,
  .usage-query-actions,
  .usage-header-metrics,
  .sessions-card-meta,
  .timeseries-controls {
    justify-content: flex-start;
  }
  .usage-filter-popover,
  .usage-export-popover {
    width: min(320px, 100vw - 40px);
    left: 0;
    right: auto;
  }
  .usage-daypart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .usage-hour-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .usage-hour-labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .session-bar-row,
  .session-log-entry {
    align-items: flex-start;
  }
  .session-bar-row,
  .session-bar-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .usage-summary-grid,
  .session-summary-grid,
  .context-breakdown-grid,
  .usage-loading-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@keyframes usage-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes usage-shimmer {
  0% {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}