/* <stdin> */
@layer theme, base, vendor, components, utilities;
@layer theme {
  :host {
    color-scheme: light dark;
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f4f4f2;
    --bg-elevated: #f7f7f5;
    --bg-glass: #ffffff;
    --modal-backdrop: rgba(0, 0, 0, 0.22);
    --modal-surface: #ffffff;
    --modal-muted-surface: #fafafa;
    --modal-card-surface:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--modal-surface) 99%, var(--bg-primary) 1%),
        color-mix(in srgb, var(--modal-surface) 96%, var(--modal-muted-surface) 4%));
    --modal-card-border: color-mix(in srgb, var(--border) 78%, transparent);
    --modal-card-shadow:
      0 18px 44px rgba(16, 24, 40, 0.14),
      0 2px 8px rgba(16, 24, 40, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
    --surface-porcelain:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--modal-surface) 99%, var(--bg-primary) 1%),
        color-mix(in srgb, var(--modal-surface) 96%, var(--modal-muted-surface) 4%));
    --surface-porcelain-border: color-mix(in srgb, var(--border) 72%, transparent);
    --surface-porcelain-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(0, 0, 0, 0.01),
      0 1px 1px rgba(0, 0, 0, 0.014);
    --popover-surface: #ffffff;
    --lightbox-backdrop: rgba(0, 0, 0, 0.82);
    --lightbox-surface: #000000;
    --lightbox-border: rgba(255, 255, 255, 0.18);
    --lightbox-control-surface: rgba(255, 255, 255, 0.08);
    --lightbox-control-surface-hover: rgba(255, 255, 255, 0.14);
    --lightbox-control-text: #f5f5f5;
    --lightbox-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
    --text-primary: #171717;
    --text-secondary: #5f6368;
    --text-muted: #8b8f94;
    --text-faint: #aeb3b8;
    --send-standby-bg: #989ca0;
    --send-standby-mark: #f0f2f3;
    --accent: #111111;
    --accent-strong: #000000;
    --accent-glow: rgba(0, 0, 0, 0.06);
    --accent-subtle: rgba(0, 0, 0, 0.024);
    --control-track: var(--bg-primary);
    --control-hover-fill: var(--accent-subtle);
    --control-active-fill: var(--accent-subtle);
    --control-active-border: color-mix(in srgb, var(--border) 90%, transparent);
    --control-height-xs: 22px;
    --control-height-sm: 28px;
    --control-height-md: 32px;
    --control-height-lg: 38px;
    --control-padding-xs: 7px;
    --control-padding-sm: 10px;
    --control-padding-md: 12px;
    --control-padding-lg: 14px;
    --control-gap-xs: 4px;
    --control-gap-sm: 6px;
    --control-radius: var(--radius-sm);
    --control-font-xs: 10px;
    --control-font-sm: 11px;
    --control-font-md: 12px;
    --control-font-lg: 13px;
    --control-font-weight: 540;
    --control-border: color-mix(in srgb, var(--border) 88%, transparent);
    --control-border-hover: color-mix(in srgb, var(--border-focus) 58%, var(--border));
    --control-surface: transparent;
    --control-surface-hover: var(--control-hover-fill);
    --control-surface-pressed: color-mix(in srgb, var(--control-hover-fill) 72%, var(--bg-elevated));
    --control-text: var(--text-secondary);
    --control-text-hover: var(--text-primary);
    --control-primary-surface: var(--text-primary);
    --control-primary-surface-hover: color-mix(in srgb, var(--text-primary) 90%, var(--bg-primary));
    --control-primary-text: var(--bg-primary);
    --control-danger-text: var(--red);
    --control-danger-surface-hover: var(--danger-subtle);
    --control-danger-border-hover: color-mix(in srgb, var(--red) 42%, var(--border));
    --control-focus-ring: 0 0 0 3px color-mix(in srgb, var(--border-focus) 10%, transparent);
    --control-disabled-opacity: 0.42;
    --control-icon-xs: 13px;
    --control-icon-sm: 15px;
    --control-icon-md: 18px;
    --field-height-sm: 28px;
    --field-height-md: 34px;
    --field-height-lg: 38px;
    --field-padding-sm: 8px;
    --field-padding-md: 10px;
    --field-font-sm: 11.5px;
    --field-font-md: 13px;
    --field-border: var(--control-border);
    --field-border-hover: var(--control-border-hover);
    --field-border-focus: var(--border-focus);
    --field-surface: var(--bg-primary);
    --field-surface-disabled: var(--bg-secondary);
    --field-text: var(--text-primary);
    --field-placeholder: var(--text-muted);
    --field-focus-ring: var(--control-focus-ring);
    --choice-size-sm: 13px;
    --choice-size-md: 15px;
    --choice-card-line-height: 18px;
    --choice-radius: 3px;
    --choice-border: color-mix(in srgb, var(--text-muted) 34%, var(--border));
    --choice-border-hover: color-mix(in srgb, var(--text-muted) 54%, var(--border-focus));
    --switch-width: 30px;
    --switch-height: 18px;
    --switch-thumb-size: 12px;
    --popover-border: color-mix(in srgb, var(--border) 88%, transparent);
    --popover-radius: var(--radius-sm);
    --popover-shadow: var(--shadow-lg);
    --popover-padding: 4px;
    --menu-item-min-height: 30px;
    --menu-item-padding: 7px 9px;
    --toast-viewport-top: 66px;
    --toast-inline-margin: 16px;
    --toast-max-width: 380px;
    --toast-min-height: 40px;
    --user-bubble-bg: rgba(0, 0, 0, 0.045);
    --user-bubble-text: var(--text-primary);
    --user-bubble-selection-bg: #c1c4c7;
    --user-bubble-selection-text: #202326;
    --block-fill: rgba(0, 0, 0, 0.024);
    --block-fill-hover: rgba(0, 0, 0, 0.035);
    --block-radius: 7px;
    --code-bg: #f7f7f5;
    --code-border: rgba(9, 105, 218, 0.18);
    --code-accent: #0969da;
    --code-inline-bg: #f1f3f5;
    --danger-subtle: rgba(180, 35, 47, 0.08);
    --success-border: rgba(36, 132, 93, 0.32);
    --selection-bg: rgba(0, 0, 0, 0.16);
    --green: #24845d;
    --orange: #a86f18;
    --red: #b4232f;
    --syntax-plain: #59636e;
    --syntax-keyword: #8250df;
    --syntax-title: #0969da;
    --syntax-string: #1a7f37;
    --syntax-comment: #656d76;
    --syntax-number: #9a6700;
    --syntax-literal: #cf222e;
    --syntax-meta: #57606a;
    --syntax-addition: #1a7f37;
    --syntax-deletion: #cf222e;
    --border: rgba(0, 0, 0, 0.08);
    --border-focus: rgba(0, 0, 0, 0.26);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 8px;
    --radius-pill: 999px;
    --lane-header-height: 30px;
    --chat-sticky-offset: 0px;
    --lane-summary-width: 520px;
    --lane-detail-width: 820px;
    --qz-scrollbar-size: 4px;
    --qz-scrollbar-radius: 2px;
    --qz-scrollbar-thumb: color-mix(in srgb, var(--border) 72%, transparent);
    --font-mono:
      "JetBrains Mono",
      "SF Mono",
      "Fira Code",
      monospace;
    --font-sans:
      -apple-system,
      BlinkMacSystemFont,
      "Inter",
      "Segoe UI",
      sans-serif;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --motion-slow: 240ms;
    --transition: var(--motion-fast) var(--ease-standard);
    --transition-fast: var(--motion-fast) var(--ease-standard);
    --transition-surface:
      background-color var(--transition),
      border-color var(--transition),
      color var(--transition),
      opacity var(--transition),
      transform var(--transition);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.14), 0 2px 10px rgba(0, 0, 0, 0.08);
  }
  @media (prefers-color-scheme: dark) {
    :host {
      --bg-primary: #181818;
      --bg-secondary: #1f1f1f;
      --bg-tertiary: #2b2b2b;
      --bg-elevated: #242424;
      --bg-glass: #1f1f1f;
      --modal-backdrop: rgba(0, 0, 0, 0.52);
      --modal-surface: #202020;
      --modal-muted-surface: #282828;
      --modal-card-surface:
        linear-gradient(
          180deg,
          color-mix(in srgb, var(--modal-surface) 98%, #ffffff 2%),
          color-mix(in srgb, var(--modal-surface) 92%, var(--modal-muted-surface) 8%));
      --modal-card-border: color-mix(in srgb, var(--border) 84%, transparent);
      --modal-card-shadow:
        0 20px 48px rgba(0, 0, 0, 0.42),
        0 2px 12px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      --surface-porcelain:
        linear-gradient(
          180deg,
          color-mix(in srgb, var(--modal-surface) 96%, #ffffff 4%),
          color-mix(in srgb, var(--modal-muted-surface) 92%, var(--modal-surface) 8%));
      --surface-porcelain-border: color-mix(in srgb, var(--border) 84%, transparent);
      --surface-porcelain-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 1px 1px rgba(0, 0, 0, 0.18);
      --popover-surface: #242424;
      --lightbox-backdrop: rgba(0, 0, 0, 0.86);
      --lightbox-surface: #000000;
      --lightbox-border: rgba(255, 255, 255, 0.18);
      --lightbox-control-surface: rgba(255, 255, 255, 0.08);
      --lightbox-control-surface-hover: rgba(255, 255, 255, 0.14);
      --lightbox-control-text: #f5f5f5;
      --lightbox-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
      --text-primary: #f4f4f4;
      --text-secondary: #b8b8b8;
      --text-muted: #8e8e8e;
      --text-faint: #686868;
      --send-standby-bg: #6d7175;
      --send-standby-mark: #292c2f;
      --accent: #f2f2f2;
      --accent-strong: #ffffff;
      --accent-glow: rgba(255, 255, 255, 0.07);
      --accent-subtle: rgba(255, 255, 255, 0.038);
      --control-hover-fill: var(--accent-subtle);
      --control-active-fill: var(--accent-subtle);
      --control-active-border: color-mix(in srgb, var(--border-focus) 22%, transparent);
      --user-bubble-bg: #252525;
      --user-bubble-text: var(--text-primary);
      --user-bubble-selection-bg: #5a5e61;
      --user-bubble-selection-text: #f2f3f4;
      --block-fill: rgba(255, 255, 255, 0.038);
      --block-fill-hover: rgba(255, 255, 255, 0.052);
      --block-radius: 7px;
      --code-bg: #161b22;
      --code-border: rgba(121, 192, 255, 0.24);
      --code-accent: #79c0ff;
      --code-inline-bg: #20262f;
      --danger-subtle: rgba(224, 108, 117, 0.1);
      --success-border: rgba(117, 199, 155, 0.34);
      --selection-bg: rgba(216, 224, 255, 0.22);
      --green: #75c79b;
      --orange: #d7a95d;
      --red: #e06c75;
      --syntax-plain: #b8c0cc;
      --syntax-keyword: #d2a8ff;
      --syntax-title: #79c0ff;
      --syntax-string: #7ee787;
      --syntax-comment: #8b949e;
      --syntax-number: #d29922;
      --syntax-literal: #ffab70;
      --syntax-meta: #a5d6ff;
      --syntax-addition: #7ee787;
      --syntax-deletion: #ffa198;
      --border: rgba(255, 255, 255, 0.09);
      --border-focus: rgba(255, 255, 255, 0.22);
      --choice-border: color-mix(in srgb, var(--text-muted) 44%, var(--border));
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
      --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.34);
      --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.42), 0 2px 12px rgba(0, 0, 0, 0.26);
    }
  }
}
@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :host {
    height: 100%;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--bg-primary);
    border-radius: 0;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      scroll-behavior: auto !important;
      transition-duration: 0.001ms !important;
      transition-delay: 0ms !important;
    }
  }
  pre,
  code,
  kbd,
  input[type=url],
  input[type=email] {
    direction: ltr;
    unicode-bidi: isolate;
  }
}
@layer components {
  .qz-btn {
    --qz-control-height: var(--control-height-md);
    --qz-control-padding: var(--control-padding-md);
    --qz-control-gap: var(--control-gap-sm);
    --qz-control-font-size: var(--control-font-md);
    --qz-control-font-weight: var(--control-font-weight);
    --qz-control-border: var(--control-border);
    --qz-control-border-hover: var(--control-border-hover);
    --qz-control-border-focus: var(--control-border-hover);
    --qz-control-bg: var(--control-surface);
    --qz-control-bg-hover: var(--control-surface-hover);
    --qz-control-bg-pressed: var(--control-surface-pressed);
    --qz-control-color: var(--control-text);
    --qz-control-color-hover: var(--control-text-hover);
    min-width: 0;
    height: var(--qz-control-height);
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qz-control-gap);
    padding: 0 var(--qz-control-padding);
    border: 1px solid var(--qz-control-border);
    border-radius: var(--control-radius);
    background: var(--qz-control-bg);
    color: var(--qz-control-color);
    font: var(--qz-control-font-weight) var(--qz-control-font-size)/1 var(--font-sans);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--transition),
      border-color var(--transition),
      color var(--transition),
      opacity var(--transition),
      box-shadow var(--transition);
    &:not(:disabled):hover {
      border-color: var(--qz-control-border-hover);
      background: var(--qz-control-bg-hover);
      color: var(--qz-control-color-hover);
    }
    &:not(:disabled):active {
      background: var(--qz-control-bg-pressed);
    }
    &:focus-visible {
      outline: none;
      border-color: var(--qz-control-border-focus);
      box-shadow: var(--control-focus-ring);
    }
    &:disabled {
      opacity: var(--control-disabled-opacity);
      cursor: default;
    }
  }
  .qz-btn--primary {
    --qz-control-border: transparent;
    --qz-control-border-hover: transparent;
    --qz-control-border-focus: transparent;
    --qz-control-bg: var(--control-primary-surface);
    --qz-control-bg-hover: var(--control-primary-surface-hover);
    --qz-control-bg-pressed: var(--control-primary-surface);
    --qz-control-color: var(--control-primary-text);
    --qz-control-color-hover: var(--control-primary-text);
  }
  .qz-btn--secondary {
    --qz-control-border: var(--control-border);
    --qz-control-border-hover: var(--control-border-hover);
    --qz-control-border-focus: var(--control-border-hover);
  }
  .qz-btn--ghost {
    --qz-control-border: transparent;
    --qz-control-border-hover: transparent;
    --qz-control-border-focus: transparent;
  }
  .qz-btn--danger {
    --qz-control-color: var(--control-danger-text);
    --qz-control-color-hover: var(--control-danger-text);
    --qz-control-border-hover: var(--control-danger-border-hover);
    --qz-control-bg-hover: var(--control-danger-surface-hover);
    --qz-control-bg-pressed: var(--control-danger-surface-hover);
  }
  .qz-btn--xs {
    --qz-control-height: var(--control-height-xs);
    --qz-control-padding: var(--control-padding-xs);
    --qz-control-gap: var(--control-gap-xs);
    --qz-control-font-size: var(--control-font-xs);
  }
  .qz-btn--sm {
    --qz-control-height: var(--control-height-sm);
    --qz-control-padding: var(--control-padding-sm);
    --qz-control-font-size: var(--control-font-sm);
  }
  .qz-btn--lg {
    --qz-control-height: var(--control-height-lg);
    --qz-control-padding: var(--control-padding-lg);
    --qz-control-font-size: var(--control-font-lg);
  }
  .qz-btn--inline {
    --qz-control-height: auto;
    --qz-control-padding: 0;
    --qz-control-gap: var(--control-gap-xs);
    --qz-control-border: transparent;
    --qz-control-border-hover: transparent;
    --qz-control-border-focus: transparent;
    --qz-control-bg: transparent;
    --qz-control-bg-hover: transparent;
    --qz-control-bg-pressed: transparent;
    min-height: 0;
    line-height: inherit;
  }
  .qz-icon-btn {
    --qz-control-size: var(--control-height-xs);
    --qz-control-icon-size: var(--control-icon-xs);
    --qz-control-border: transparent;
    --qz-control-border-hover: transparent;
    --qz-control-border-focus: transparent;
    --qz-control-bg: var(--control-surface);
    --qz-control-bg-hover: var(--control-surface-hover);
    --qz-control-bg-pressed: var(--control-surface-pressed);
    --qz-control-color: var(--control-text);
    --qz-control-color-hover: var(--control-text-hover);
    position: relative;
    appearance: none;
    flex: 0 0 auto;
    width: var(--qz-control-size);
    height: var(--qz-control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--qz-control-border);
    border-radius: var(--control-radius);
    background: var(--qz-control-bg);
    color: var(--qz-control-color);
    cursor: pointer;
    transition:
      background-color var(--transition),
      border-color var(--transition),
      color var(--transition),
      opacity var(--transition),
      box-shadow var(--transition);
    & svg {
      width: var(--qz-control-icon-size);
      height: var(--qz-control-icon-size);
    }
    &:not(:disabled):hover {
      border-color: var(--qz-control-border-hover);
      background: var(--qz-control-bg-hover);
      color: var(--qz-control-color-hover);
    }
    &:not(:disabled):active {
      background: var(--qz-control-bg-pressed);
    }
    &:focus-visible {
      outline: none;
      border-color: var(--qz-control-border-focus);
      box-shadow: var(--control-focus-ring);
    }
    &:disabled {
      opacity: var(--control-disabled-opacity);
      cursor: default;
    }
  }
  .qz-icon-btn--sm {
    --qz-control-size: var(--control-height-sm);
    --qz-control-icon-size: var(--control-icon-sm);
  }
  .qz-icon-btn--xs {
    --qz-control-size: var(--control-height-xs);
    --qz-control-icon-size: var(--control-icon-xs);
  }
  .qz-icon-btn--md {
    --qz-control-size: var(--control-height-md);
    --qz-control-icon-size: var(--control-icon-md);
  }
  .qz-icon-btn--secondary {
    --qz-control-border: var(--control-border);
    --qz-control-border-hover: var(--control-border-hover);
    --qz-control-border-focus: var(--control-border-hover);
  }
  .qz-icon-btn--danger {
    --qz-control-color-hover: var(--control-danger-text);
    --qz-control-border-hover: var(--control-danger-border-hover);
    --qz-control-bg-hover: var(--control-danger-surface-hover);
    --qz-control-bg-pressed: var(--control-danger-surface-hover);
  }
  .qz-field {
    --qz-field-height: var(--field-height-md);
    --qz-field-padding: var(--field-padding-md);
    --qz-field-font-size: var(--field-font-md);
    width: 100%;
    min-width: 0;
    min-height: var(--qz-field-height);
    padding: 6px var(--qz-field-padding);
    border: 1px solid var(--field-border);
    border-radius: var(--control-radius);
    outline: none;
    background-color: var(--field-surface);
    color: var(--field-text);
    font: 400 var(--qz-field-font-size)/1.45 var(--font-sans);
    transition:
      background-color var(--transition),
      border-color var(--transition),
      box-shadow var(--transition),
      color var(--transition),
      opacity var(--transition);
  }
  .qz-field:hover:not(:disabled):not(:focus) {
    border-color: var(--field-border-hover);
  }
  .qz-field:focus,
  .qz-field:focus-visible {
    border-color: var(--field-border-focus);
    box-shadow: var(--field-focus-ring);
  }
  .qz-field::placeholder {
    color: var(--field-placeholder);
  }
  .qz-field[type=search]::-webkit-search-cancel-button {
    width: var(--control-icon-md);
    height: var(--control-icon-md);
    margin-inline-start: var(--control-gap-xs);
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--control-text);
    -webkit-mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M5%205l6%206m0-6-6%206%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E) center / var(--control-icon-xs) var(--control-icon-xs) no-repeat;
    mask: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M5%205l6%206m0-6-6%206%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E) center / var(--control-icon-xs) var(--control-icon-xs) no-repeat;
    cursor: pointer;
    opacity: 0.72;
    transition: background-color var(--transition), opacity var(--transition);
  }
  .qz-field[type=search]::-webkit-search-cancel-button:hover {
    background-color: var(--control-text-hover);
    opacity: 1;
  }
  .qz-field[type=search]::-webkit-search-cancel-button:active {
    opacity: 0.64;
  }
  .qz-field:disabled,
  .qz-field[readonly] {
    background-color: var(--field-surface-disabled);
    color: var(--text-muted);
    cursor: default;
    opacity: 0.82;
  }
  .qz-field--sm {
    --qz-field-height: var(--field-height-sm);
    --qz-field-padding: var(--field-padding-sm);
    --qz-field-font-size: var(--field-font-sm);
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .qz-field--lg {
    --qz-field-height: var(--field-height-lg);
  }
  .qz-field--mono {
    font-family: var(--font-mono);
  }
  .qz-field--bare,
  .qz-field--bare:hover:not(:disabled):not(:focus),
  .qz-field--bare:focus,
  .qz-field--bare:focus-visible {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
  }
  textarea.qz-field {
    height: auto;
    resize: vertical;
  }
  .qz-field-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
  }
  .qz-field-hint {
    min-height: 15px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
  }
  .qz-select {
    appearance: none;
    padding-inline-end: 34px;
    background-image:
      linear-gradient(
        45deg,
        transparent 50%,
        var(--text-muted) 50%),
      linear-gradient(
        135deg,
        var(--text-muted) 50%,
        transparent 50%);
    background-position: calc(100% - 16px) calc(50% - 1px), calc(100% - 12px) calc(50% - 1px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
  }
  :dir(rtl).qz-select {
    background-position: 12px calc(50% - 1px), 16px calc(50% - 1px);
  }
  .qz-checkbox,
  .qz-radio {
    position: relative;
    flex: 0 0 auto;
    width: var(--choice-size-md);
    height: var(--choice-size-md);
    margin: 0;
    appearance: none;
    display: inline-grid;
    place-content: center;
    border: 1px solid var(--qz-choice-border, var(--choice-border));
    border-radius: var(--choice-radius);
    background: var(--qz-choice-surface, var(--field-surface));
    color: var(--qz-choice-mark, var(--bg-primary));
    cursor: pointer;
    transition:
      background-color var(--transition),
      border-color var(--transition),
      box-shadow var(--transition),
      opacity var(--transition);
  }
  .qz-checkbox:not(:disabled):not(:checked):not(:indeterminate):hover,
  .qz-radio:not(:disabled):not(:checked):hover {
    border-color: var(--qz-choice-border-hover, var(--choice-border-hover));
  }
  .qz-checkbox::before {
    content: "";
    width: 7px;
    height: 4px;
    border: solid currentColor;
    border-width: 0 0 1.5px 1.5px;
    transform: translateY(-1px) rotate(-45deg) scale(0);
    transform-origin: center;
    transition: transform var(--transition);
  }
  .qz-radio {
    border-radius: 50%;
  }
  .qz-radio::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    transform: scale(0);
    transition: transform var(--transition);
  }
  .qz-checkbox:checked,
  .qz-checkbox:indeterminate,
  .qz-radio:checked {
    border-color: var(--qz-choice-checked-surface, var(--text-primary));
    background: var(--qz-choice-checked-surface, var(--text-primary));
  }
  .qz-checkbox:checked::before,
  .qz-radio:checked::before {
    transform: translateY(-1px) rotate(-45deg) scale(1);
  }
  .qz-radio:checked::before {
    transform: scale(1);
  }
  .qz-checkbox:indeterminate::before {
    width: 7px;
    height: 1.5px;
    border: 0;
    border-radius: var(--radius-pill);
    background: currentColor;
    transform: none;
  }
  .qz-checkbox:focus-visible,
  .qz-radio:focus-visible,
  .qz-switch:focus-visible {
    outline: none;
    box-shadow: var(--field-focus-ring);
  }
  .qz-checkbox:not(:disabled):not(:checked):not(:indeterminate):focus-visible,
  .qz-radio:not(:disabled):not(:checked):focus-visible {
    border-color: var(--qz-choice-border-hover, var(--choice-border-hover));
  }
  .qz-checkbox:disabled,
  .qz-radio:disabled,
  .qz-switch:disabled {
    opacity: var(--control-disabled-opacity);
    cursor: default;
  }
  .qz-choice-card {
    min-width: 0;
    border: 1px solid var(--field-border);
    border-radius: var(--control-radius);
    background: var(--field-surface);
    color: var(--text-primary);
    line-height: calc(var(--choice-card-line-height) * var(--qz-choice-card-text-scale, 1));
    text-align: start;
    transition:
      background-color var(--transition),
      border-color var(--transition),
      box-shadow var(--transition);
  }
  .qz-choice-card:has(input:not(:disabled)):hover {
    border-color: var(--field-border-hover);
    background: var(--control-surface-hover);
  }
  .qz-choice-card:has(input:checked),
  .qz-choice-card:has(input:checked):hover {
    border-color: var(--field-border-focus);
    background: var(--control-surface-pressed);
  }
  .qz-choice-card:has(input[aria-invalid=true]),
  .qz-choice-card:has(input[aria-invalid=true]):hover {
    border-color: var(--red);
  }
  .qz-choice-card:has(input:focus-visible) {
    box-shadow: var(--field-focus-ring);
  }
  .qz-choice-card-label {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: var(--field-padding-sm);
    cursor: pointer;
  }
  .qz-choice-card-label:has(.qz-choice-card-image) {
    grid-template-columns: auto minmax(0, 1fr) 40px;
  }
  .qz-choice-card:has(.qz-choice-card-footer) .qz-choice-card-label {
    padding-bottom: 0;
  }
  .qz-choice-card-label > input {
    margin-top: 2px;
  }
  .qz-choice-card:has(input:disabled) .qz-choice-card-label {
    cursor: default;
  }
  .qz-choice-card:has(input:disabled):not(:has(input:checked)) .qz-choice-card-label {
    opacity: var(--control-disabled-opacity);
  }
  .qz-choice-card-content {
    min-width: 0;
    display: grid;
    gap: calc(var(--control-gap-xs) / 2);
    overflow-wrap: anywhere;
  }
  .qz-choice-card-title {
    color: var(--text-primary);
    font-size: calc(var(--field-font-md) * var(--qz-choice-card-text-scale, 1));
    font-weight: 600;
  }
  .qz-choice-card-description {
    color: var(--text-secondary);
    font-size: calc(var(--field-font-sm) * var(--qz-choice-card-text-scale, 1));
    text-wrap: pretty;
  }
  .qz-choice-card-meta {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--control-gap-xs) / 2) 8px;
  }
  .qz-choice-card-tag {
    max-width: 100%;
    color: var(--text-secondary);
    font-size: calc(var(--field-font-sm) * var(--qz-choice-card-text-scale, 1));
  }
  .qz-choice-card-image {
    width: 40px;
    height: 40px;
    border-radius: var(--control-radius);
    background: var(--bg-tertiary);
    object-fit: cover;
  }
  .qz-choice-card-footer {
    min-width: 0;
    margin: calc(var(--control-gap-xs) / 2) var(--field-padding-sm) var(--field-padding-sm);
    margin-inline-start: calc(var(--field-padding-sm) + var(--choice-size-md) + 8px);
  }
  .qz-choice-card-source {
    display: block;
    width: fit-content;
    max-width: 100%;
    border-radius: var(--control-radius);
    color: var(--text-muted);
    font-size: calc(var(--field-font-sm) * var(--qz-choice-card-text-scale, 1));
    overflow-wrap: anywhere;
    text-decoration: none;
  }
  .qz-choice-card-source:hover {
    color: var(--text-primary);
    text-decoration: underline;
  }
  .qz-choice-card-source:focus-visible {
    outline: none;
    box-shadow: var(--field-focus-ring);
  }
  .qz-switch {
    position: relative;
    width: var(--switch-width);
    height: var(--switch-height);
    flex: 0 0 auto;
    margin: 0;
    appearance: none;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    cursor: pointer;
    transition:
      background-color var(--transition),
      border-color var(--transition),
      box-shadow var(--transition);
  }
  .qz-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    border-radius: 50%;
    background: var(--text-muted);
    transition: background-color var(--transition), transform var(--transition);
  }
  .qz-switch:checked {
    border-color: var(--text-primary);
    background: var(--text-primary);
  }
  .qz-switch:checked::before {
    background: var(--bg-primary);
    transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - 6px));
  }
  .qz-popover {
    border: 1px solid var(--qz-popover-border, var(--popover-border));
    border-radius: var(--qz-popover-radius, var(--popover-radius));
    background: var(--qz-popover-surface, var(--popover-surface));
    box-shadow: var(--qz-popover-shadow, var(--popover-shadow));
    animation: popover-in var(--qz-popover-motion, var(--motion-base)) var(--ease-emphasized);
  }
  .qz-menu {
    --qz-menu-padding: var(--popover-padding);
    padding: var(--qz-menu-padding);
    overflow: auto;
  }
  .qz-menu-item {
    min-width: 0;
    min-height: var(--menu-item-min-height);
    padding: var(--menu-item-padding);
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: start;
    transition: var(--transition-surface);
  }
  .qz-menu-item:hover,
  .qz-menu-item.active,
  .qz-menu-item[aria-selected=true] {
    background: var(--control-hover-fill);
    color: var(--text-primary);
  }
  .qz-list-toolbar {
    flex: 0 0 auto;
    padding: 7px 12px 8px;
    background: var(--bg-primary);
  }
  .qz-list-toolbar-tabs-row,
  .qz-list-toolbar-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
  }
  .qz-list-toolbar-tabs-row {
    min-height: 35px;
    padding-bottom: 4px;
  }
  .qz-list-toolbar-search-row {
    padding-top: 2px;
  }
  .qz-list-toolbar-tabs {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .qz-list-toolbar-tab {
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 560;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .qz-list-toolbar-tab:hover {
    color: var(--text-primary);
    transform: translateY(-1px);
  }
  .qz-list-toolbar-tab.active {
    background: color-mix(in srgb, var(--text-primary) 3.8%, transparent);
    color: var(--text-primary);
    transform: none;
  }
  .qz-list-toolbar-search {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    font-size: 13px;
  }
  .qz-list-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .qz-list-toolbar-action {
    --qz-control-height: 34px;
    --qz-control-padding: 11px;
    --qz-control-border: color-mix(in srgb, var(--border) 82%, transparent);
    --qz-control-bg: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    --qz-control-font-size: 12px;
    border-radius: var(--radius-lg);
  }
  .qz-decision-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 12px 12px clamp(36px, 7vh, 64px);
    border: 0;
    outline: none;
    overflow: hidden;
    background: transparent;
    color: var(--text-primary);
  }
  .qz-decision-dialog[open] {
    display: grid;
    place-items: center;
  }
  .qz-decision-dialog::backdrop {
    background: var(--modal-backdrop);
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .qz-decision-panel {
    width: min(360px, 100%);
    max-height: min(520px, calc(100vh - 48px));
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--modal-card-border);
    border-radius: var(--radius-lg);
    background: var(--modal-card-surface);
    box-shadow: var(--modal-card-shadow);
    animation: modal-card-in var(--motion-slow) var(--ease-emphasized);
  }
  .qz-decision-dialog.is-closing {
    pointer-events: none;
  }
  .qz-decision-dialog.is-closing::backdrop {
    animation: modal-fade-in var(--motion-base) var(--ease-standard) reverse both;
  }
  .qz-decision-dialog.is-closing .qz-decision-panel {
    animation: modal-card-in var(--motion-base) var(--ease-standard) reverse both;
  }
  .qz-decision-copy h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 680;
    line-height: 1.35;
  }
  .qz-decision-copy p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 11.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .qz-decision-options {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .qz-decision-option {
    --qz-control-height: auto;
    width: 100%;
    min-height: 48px;
    display: block;
    padding: 8px 6px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    text-align: start;
    white-space: normal;
  }
  .qz-decision-option:last-child {
    border-bottom: 0;
  }
  .qz-decision-option strong {
    display: block;
    color: inherit;
    font-size: 11.5px;
    font-weight: 620;
    line-height: 1.4;
  }
  .qz-decision-option small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.45;
  }
  .qz-decision-input {
    display: grid;
    gap: 5px;
    margin-top: 12px;
  }
  .qz-decision-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 14px;
  }
  @media (prefers-reduced-motion: reduce) {
    .qz-decision-dialog::backdrop,
    .qz-decision-panel,
    .qz-decision-dialog.is-closing::backdrop,
    .qz-decision-dialog.is-closing .qz-decision-panel {
      animation: none;
    }
  }
  .qz-chiphead,
  .qz-pill,
  .qz-tree-toggle,
  .qz-segment,
  .qz-segment-item {
    min-width: 0;
  }
  .qz-pill {
    border-radius: var(--radius-pill);
  }
  .qz-scroll:not(.qz-scroll--native) {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .qz-scroll:not(.qz-scroll--native):is(:hover, :focus-within) {
    scrollbar-color: var(--qz-scrollbar-thumb) transparent;
  }
  .qz-scroll:not(.qz-scroll--native)::-webkit-scrollbar {
    width: var(--qz-scrollbar-size);
    height: var(--qz-scrollbar-size);
  }
  .qz-scroll:not(.qz-scroll--native)::-webkit-scrollbar-track {
    background: transparent;
  }
  .qz-scroll:not(.qz-scroll--native)::-webkit-scrollbar-thumb {
    border-radius: var(--qz-scrollbar-radius);
    background: transparent;
  }
  .qz-scroll:not(.qz-scroll--native):is(:hover, :focus-within)::-webkit-scrollbar-thumb {
    background: var(--qz-scrollbar-thumb);
  }
  @keyframes popover-in {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes modal-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes modal-card-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}
@layer utilities {
  .qz\:absolute {
    position: absolute;
  }
  .qz\:fixed {
    position: fixed;
  }
  .qz\:relative {
    position: relative;
  }
  .qz\:sticky {
    position: sticky;
  }
  .qz\:inset-0 {
    inset: 0px;
  }
  .qz\:-end-6\.5 {
    inset-inline-end: calc(var(--control-gap-xs) * -6.5);
  }
  .qz\:top-\[calc\(100\%\+5px\)\] {
    top: calc(100% + 5px);
  }
  .qz\:right-3 {
    right: calc(var(--control-gap-xs) * 3);
  }
  .qz\:z-8 {
    z-index: 8;
  }
  .qz\:z-10 {
    z-index: 10;
  }
  .qz\:z-60 {
    z-index: 60;
  }
  .qz\:z-70 {
    z-index: 70;
  }
  .qz\:z-100 {
    z-index: 100;
  }
  .qz\:m-0 {
    margin: 0px;
  }
  .qz\:-mx-1 {
    margin-inline: calc(var(--control-gap-xs) * -1);
  }
  .qz\:mx-auto {
    margin-inline: auto;
  }
  .qz\:mt-1 {
    margin-top: var(--control-gap-xs);
  }
  .qz\:mt-1\.5 {
    margin-top: calc(var(--control-gap-xs) * 1.5);
  }
  .qz\:mt-2 {
    margin-top: calc(var(--control-gap-xs) * 2);
  }
  .qz\:mt-2\.5 {
    margin-top: calc(var(--control-gap-xs) * 2.5);
  }
  .qz\:mr-0\.75 {
    margin-right: calc(var(--control-gap-xs) * 0.75);
  }
  .qz\:mb-1 {
    margin-bottom: var(--control-gap-xs);
  }
  .qz\:mb-2 {
    margin-bottom: calc(var(--control-gap-xs) * 2);
  }
  .qz\:mb-2\.5 {
    margin-bottom: calc(var(--control-gap-xs) * 2.5);
  }
  .qz\:mb-3 {
    margin-bottom: calc(var(--control-gap-xs) * 3);
  }
  .qz\:ml-auto {
    margin-left: auto;
  }
  .qz\:box-border {
    box-sizing: border-box;
  }
  .qz\:block {
    display: block;
  }
  .qz\:contents {
    display: contents;
  }
  .qz\:flex {
    display: flex;
  }
  .qz\:grid {
    display: grid;
  }
  .qz\:inline-flex {
    display: inline-flex;
  }
  .qz\:size-\(--input-attachment-size\) {
    width: var(--input-attachment-size);
    height: var(--input-attachment-size);
  }
  .qz\:size-full {
    width: 100%;
    height: 100%;
  }
  .qz\:h-6 {
    height: calc(var(--control-gap-xs) * 6);
  }
  .qz\:h-6\.5 {
    height: calc(var(--control-gap-xs) * 6.5);
  }
  .qz\:h-7 {
    height: calc(var(--control-gap-xs) * 7);
  }
  .qz\:h-8 {
    height: calc(var(--control-gap-xs) * 8);
  }
  .qz\:h-8\.5 {
    height: calc(var(--control-gap-xs) * 8.5);
  }
  .qz\:h-9\.5 {
    height: calc(var(--control-gap-xs) * 9.5);
  }
  .qz\:h-11 {
    height: calc(var(--control-gap-xs) * 11);
  }
  .qz\:h-12 {
    height: calc(var(--control-gap-xs) * 12);
  }
  .qz\:h-13 {
    height: calc(var(--control-gap-xs) * 13);
  }
  .qz\:h-13\.5 {
    height: calc(var(--control-gap-xs) * 13.5);
  }
  .qz\:h-full {
    height: 100%;
  }
  .qz\:h-px {
    height: 1px;
  }
  .qz\:max-h-30 {
    max-height: calc(var(--control-gap-xs) * 30);
  }
  .qz\:max-h-80 {
    max-height: calc(var(--control-gap-xs) * 80);
  }
  .qz\:min-h-0 {
    min-height: 0px;
  }
  .qz\:min-h-5 {
    min-height: calc(var(--control-gap-xs) * 5);
  }
  .qz\:min-h-7 {
    min-height: calc(var(--control-gap-xs) * 7);
  }
  .qz\:min-h-7\.5 {
    min-height: calc(var(--control-gap-xs) * 7.5);
  }
  .qz\:min-h-7\.25 {
    min-height: calc(var(--control-gap-xs) * 7.25);
  }
  .qz\:min-h-8 {
    min-height: calc(var(--control-gap-xs) * 8);
  }
  .qz\:min-h-8\.5 {
    min-height: calc(var(--control-gap-xs) * 8.5);
  }
  .qz\:min-h-9\.5 {
    min-height: calc(var(--control-gap-xs) * 9.5);
  }
  .qz\:min-h-10 {
    min-height: calc(var(--control-gap-xs) * 10);
  }
  .qz\:min-h-12 {
    min-height: calc(var(--control-gap-xs) * 12);
  }
  .qz\:min-h-12\.5 {
    min-height: calc(var(--control-gap-xs) * 12.5);
  }
  .qz\:min-h-37\.5 {
    min-height: calc(var(--control-gap-xs) * 37.5);
  }
  .qz\:min-h-40 {
    min-height: calc(var(--control-gap-xs) * 40);
  }
  .qz\:w-6 {
    width: calc(var(--control-gap-xs) * 6);
  }
  .qz\:w-7 {
    width: calc(var(--control-gap-xs) * 7);
  }
  .qz\:w-8 {
    width: calc(var(--control-gap-xs) * 8);
  }
  .qz\:w-28 {
    width: calc(var(--control-gap-xs) * 28);
  }
  .qz\:w-42 {
    width: calc(var(--control-gap-xs) * 42);
  }
  .qz\:w-\[min\(360px\,calc\(100\%-24px\)\)\] {
    width: min(360px, calc(100% - 24px));
  }
  .qz\:w-auto {
    width: auto;
  }
  .qz\:w-full {
    width: 100%;
  }
  .qz\:max-w-96 {
    max-width: calc(var(--control-gap-xs) * 96);
  }
  .qz\:max-w-\[calc\(100\%-4rem\)\] {
    max-width: calc(100% - 4rem);
  }
  .qz\:max-w-full {
    max-width: 100%;
  }
  .qz\:min-w-0 {
    min-width: 0px;
  }
  .qz\:min-w-9\.5 {
    min-width: calc(var(--control-gap-xs) * 9.5);
  }
  .qz\:min-w-10 {
    min-width: calc(var(--control-gap-xs) * 10);
  }
  .qz\:min-w-28 {
    min-width: calc(var(--control-gap-xs) * 28);
  }
  .qz\:min-w-max {
    min-width: max-content;
  }
  .qz\:flex-1 {
    flex: 1;
  }
  .qz\:flex-\[0_0_44px\] {
    flex: 0 0 44px;
  }
  .qz\:flex-auto {
    flex: auto;
  }
  .qz\:flex-none {
    flex: none;
  }
  .qz\:shrink-0 {
    flex-shrink: 0;
  }
  .qz\:cursor-pointer {
    cursor: pointer;
  }
  .qz\:resize-none {
    resize: none;
  }
  .qz\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .qz\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qz\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .qz\:grid-cols-\[6px_minmax\(0\,1fr\)\] {
    grid-template-columns: 6px minmax(0, 1fr);
  }
  .qz\:grid-cols-\[26px_minmax\(0\,1fr\)_26px\] {
    grid-template-columns: 26px minmax(0, 1fr) 26px;
  }
  .qz\:grid-cols-\[auto_minmax\(0\,1fr\)\] {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .qz\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .qz\:grid-rows-\[auto_auto_minmax\(0\,1fr\)_auto\] {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .qz\:flex-col {
    flex-direction: column;
  }
  .qz\:flex-wrap {
    flex-wrap: wrap;
  }
  .qz\:place-items-center {
    place-items: center;
  }
  .qz\:items-baseline {
    align-items: baseline;
  }
  .qz\:items-center {
    align-items: center;
  }
  .qz\:items-end {
    align-items: flex-end;
  }
  .qz\:items-start {
    align-items: flex-start;
  }
  .qz\:items-stretch {
    align-items: stretch;
  }
  .qz\:justify-between {
    justify-content: space-between;
  }
  .qz\:justify-center {
    justify-content: center;
  }
  .qz\:justify-end {
    justify-content: flex-end;
  }
  .qz\:justify-start {
    justify-content: flex-start;
  }
  .qz\:gap-0 {
    gap: 0px;
  }
  .qz\:gap-0\.5 {
    gap: calc(var(--control-gap-xs) * 0.5);
  }
  .qz\:gap-0\.25 {
    gap: calc(var(--control-gap-xs) * 0.25);
  }
  .qz\:gap-1 {
    gap: var(--control-gap-xs);
  }
  .qz\:gap-1\.5 {
    gap: calc(var(--control-gap-xs) * 1.5);
  }
  .qz\:gap-1\.75 {
    gap: calc(var(--control-gap-xs) * 1.75);
  }
  .qz\:gap-2 {
    gap: calc(var(--control-gap-xs) * 2);
  }
  .qz\:gap-2\.5 {
    gap: calc(var(--control-gap-xs) * 2.5);
  }
  .qz\:gap-3 {
    gap: calc(var(--control-gap-xs) * 3);
  }
  .qz\:gap-4 {
    gap: calc(var(--control-gap-xs) * 4);
  }
  .qz\:gap-px {
    gap: 1px;
  }
  .qz\:self-center {
    align-self: center;
  }
  .qz\:truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qz\:overflow-auto {
    overflow: auto;
  }
  .qz\:overflow-hidden {
    overflow: hidden;
  }
  .qz\:overflow-x-hidden {
    overflow-x: hidden;
  }
  .qz\:overflow-y-auto {
    overflow-y: auto;
  }
  .qz\:overflow-y-hidden {
    overflow-y: hidden;
  }
  .qz\:overscroll-contain {
    overscroll-behavior: contain;
  }
  .qz\:rounded-control {
    border-radius: var(--control-radius);
  }
  .qz\:rounded-none {
    border-radius: 0;
  }
  .qz\:bg-surface {
    background-color: var(--bg-primary);
  }
  .qz\:bg-surface-muted {
    background-color: var(--bg-tertiary);
  }
  .qz\:object-cover {
    object-fit: cover;
  }
  .qz\:p-0\.75 {
    padding: calc(var(--control-gap-xs) * 0.75);
  }
  .qz\:p-1 {
    padding: var(--control-gap-xs);
  }
  .qz\:p-1\.25 {
    padding: calc(var(--control-gap-xs) * 1.25);
  }
  .qz\:p-2 {
    padding: calc(var(--control-gap-xs) * 2);
  }
  .qz\:p-3 {
    padding: calc(var(--control-gap-xs) * 3);
  }
  .qz\:p-5 {
    padding: calc(var(--control-gap-xs) * 5);
  }
  .qz\:px-0\.5 {
    padding-inline: calc(var(--control-gap-xs) * 0.5);
  }
  .qz\:px-1 {
    padding-inline: var(--control-gap-xs);
  }
  .qz\:px-1\.75 {
    padding-inline: calc(var(--control-gap-xs) * 1.75);
  }
  .qz\:px-2 {
    padding-inline: calc(var(--control-gap-xs) * 2);
  }
  .qz\:px-2\.5 {
    padding-inline: calc(var(--control-gap-xs) * 2.5);
  }
  .qz\:px-3 {
    padding-inline: calc(var(--control-gap-xs) * 3);
  }
  .qz\:px-3\.5 {
    padding-inline: calc(var(--control-gap-xs) * 3.5);
  }
  .qz\:px-5 {
    padding-inline: calc(var(--control-gap-xs) * 5);
  }
  .qz\:py-0 {
    padding-block: 0px;
  }
  .qz\:py-0\.75 {
    padding-block: calc(var(--control-gap-xs) * 0.75);
  }
  .qz\:py-1\.5 {
    padding-block: calc(var(--control-gap-xs) * 1.5);
  }
  .qz\:py-10 {
    padding-block: calc(var(--control-gap-xs) * 10);
  }
  .qz\:pe-7\.5 {
    padding-inline-end: calc(var(--control-gap-xs) * 7.5);
  }
  .qz\:pt-0\.5 {
    padding-top: calc(var(--control-gap-xs) * 0.5);
  }
  .qz\:pt-1 {
    padding-top: var(--control-gap-xs);
  }
  .qz\:pt-1\.5 {
    padding-top: calc(var(--control-gap-xs) * 1.5);
  }
  .qz\:pt-1\.75 {
    padding-top: calc(var(--control-gap-xs) * 1.75);
  }
  .qz\:pt-2\.5 {
    padding-top: calc(var(--control-gap-xs) * 2.5);
  }
  .qz\:pr-0\.75 {
    padding-right: calc(var(--control-gap-xs) * 0.75);
  }
  .qz\:pb-0 {
    padding-bottom: 0px;
  }
  .qz\:pb-1 {
    padding-bottom: var(--control-gap-xs);
  }
  .qz\:pb-3 {
    padding-bottom: calc(var(--control-gap-xs) * 3);
  }
  .qz\:pl-2 {
    padding-left: calc(var(--control-gap-xs) * 2);
  }
  .qz\:text-center {
    text-align: center;
  }
  .qz\:text-\[13px\] {
    font-size: 13px;
  }
  .qz\:text-body {
    font-size: var(--field-font-md);
  }
  .qz\:leading-\[1\.35\] {
    --tw-leading: 1.35;
    line-height: 1.35;
  }
  .qz\:font-\[650\] {
    --tw-font-weight: 650;
    font-weight: 650;
  }
  .qz\:wrap-anywhere {
    overflow-wrap: anywhere;
  }
  .qz\:whitespace-nowrap {
    white-space: nowrap;
  }
  .qz\:whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .qz\:text-danger {
    color: var(--red);
  }
  .qz\:text-foreground {
    color: var(--text-primary);
  }
  .qz\:select-none {
    -webkit-user-select: none;
    user-select: none;
  }
}
@layer components {
  #app[data-consent-pending] {
    display: none;
  }
  .data-consent {
    height: 100%;
    overflow-y: auto;
    line-height: 1.6;
  }
  .data-consent h1 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
  }
  .data-consent p {
    margin: 0;
  }
  .data-consent .qz-btn {
    height: auto;
    min-height: var(--qz-control-height);
    white-space: normal;
  }
  .data-consent [role=alert]:empty {
    display: none;
  }
  #app[data-workspace-booting] {
    visibility: hidden;
  }
  .workspace-boot-fallback {
    flex: 0 0 auto;
    padding: 7px 12px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
  }
  #app[data-workspace-boot-fallback=error] .workspace-boot-fallback {
    color: var(--red);
    background: var(--danger-subtle);
  }
  #header {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
  }
  .header-actions {
    gap: 4px;
  }
  .icon-btn {
    border: none;
  }
  .icon-btn svg {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .icon-btn svg :is(path, circle, line, polyline, polygon, rect) {
    stroke: currentColor;
  }
  .icon-btn.recording {
    color: var(--red);
    background: var(--danger-subtle);
  }
  .icon-btn.recording::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid currentColor;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: subtle-ring 1.8s var(--ease-standard) infinite;
  }
  .icon-btn.recording svg {
    fill: currentColor;
  }
  .session-title-bar {
    padding: 4px 10px 5px 14px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
  }
  .chat-text-size-trigger {
    --qz-control-size: 24px;
    --qz-control-icon-size: 16px;
  }
  .chat-text-size-trigger .chat-text-size-glyph {
    transform: translateY(0.5px);
  }
  .chat-text-size-trigger[aria-expanded=true] {
    background: var(--control-surface-hover);
  }
  .chat-text-size-popover {
    --qz-popover-radius: var(--radius-md);
    --qz-popover-shadow: var(--shadow-md);
  }
  .chat-text-size-step {
    --qz-control-size: 26px;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 620;
  }
  .chat-text-size-value {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 520;
  }
  .chat-text-size-value:disabled {
    color: var(--text-primary);
    opacity: 1;
  }
  .session-title-edit-trigger {
    width: fit-content;
    max-width: calc(100% + 3px);
    min-width: 0;
    height: 24px;
    display: inline-flex;
    align-items: center;
    margin-left: -3px;
    padding: 0 3px;
    border: 0;
    border-radius: var(--radius-md);
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: text;
  }
  .session-title-edit-trigger:hover {
    color: var(--text-secondary);
  }
  .session-title-edit-trigger:focus-visible {
    box-shadow: var(--control-focus-ring);
  }
  .session-title-input {
    display: none;
    width: min(100%, 320px);
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--control-font-sm);
    caret-color: var(--text-primary);
  }
  .session-title-bar.is-editing .session-title-edit-trigger {
    display: none;
  }
  .session-title-bar.is-editing .session-title-input {
    display: block;
  }
  .session-title-export-btn {
    --qz-control-size: 24px;
    --qz-control-icon-size: 15px;
    flex: 0 0 auto;
  }
  .session-title-export-btn svg {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .session-export-btn {
    position: relative;
  }
  .session-title-export-btn > svg,
  .session-export-btn > svg {
    transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-base) var(--ease-emphasized);
  }
  .session-title-export-btn::after,
  .session-export-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border: 1.5px solid color-mix(in srgb, var(--text-muted) 28%, transparent);
    border-top-color: currentColor;
    border-right-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72) rotate(-45deg);
    transform-origin: center;
    pointer-events: none;
  }
  .session-title-export-btn.is-preparing,
  .session-title-export-btn.is-preparing:hover,
  .session-export-btn.is-preparing,
  .session-export-btn.is-preparing:hover {
    background: var(--control-hover-fill);
    color: var(--text-secondary);
    cursor: progress;
    opacity: 1;
  }
  .session-title-export-btn.is-preparing > svg,
  .session-export-btn.is-preparing > svg {
    opacity: 0;
    transform: scale(0.72);
  }
  .session-title-export-btn.is-preparing::after,
  .session-export-btn.is-preparing::after {
    opacity: 1;
    animation: session-export-spin 780ms linear infinite;
  }
  @keyframes session-export-spin {
    from {
      transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) scale(1) rotate(360deg);
    }
  }
  .session-title-export-btn.is-confirmed {
    color: var(--text-primary);
  }
  #messages {
    --chat-tail-safe-bottom: 12px;
    --chat-turn-gap: 14px;
    --chat-trace-gap: 8px;
    --chat-preference-scale: 1;
    --chat-text-scale: clamp(0.875, var(--chat-preference-scale), 1.291667);
    --chat-meta-text-scale: 1;
    --chat-content-font-size: clamp(11px, calc(13px * var(--chat-preference-scale)), 18px);
    --chat-table-font-size: clamp(10.5px, calc(12px * var(--chat-preference-scale)), 15.5px);
    --messages-top-gap: 18px;
    --viewport-anchor-before-space: 0px;
    --viewport-anchor-after-space: 0px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px var(--chat-tail-safe-bottom);
    scroll-padding-bottom: var(--chat-tail-safe-bottom);
    scroll-behavior: auto;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: transparent transparent;
    overflow-anchor: none;
    overscroll-behavior: contain;
  }
  #messages[data-chat-text-size=small] {
    --chat-preference-scale: 0.8;
    --chat-meta-text-scale: 0.909091;
  }
  #messages[data-chat-text-size=compact] {
    --chat-preference-scale: 0.9;
    --chat-meta-text-scale: 0.954545;
  }
  #messages[data-chat-text-size=standard] {
    --chat-preference-scale: 1;
    --chat-meta-text-scale: 1;
  }
  #messages[data-chat-text-size=comfortable] {
    --chat-preference-scale: 1.1;
    --chat-meta-text-scale: 1.054545;
  }
  #messages[data-chat-text-size=large] {
    --chat-preference-scale: 1.25;
    --chat-meta-text-scale: 1.127273;
  }
  #messages[data-chat-text-size=xlarge] {
    --chat-preference-scale: 1.4;
    --chat-meta-text-scale: 1.181818;
  }
  #messages::before {
    content: "";
    display: block;
    height: calc(var(--messages-top-gap) + var(--viewport-anchor-before-space));
    flex: 0 0 auto;
  }
  #messages::after {
    content: "";
    display: block;
    height: var(--viewport-anchor-after-space);
    pointer-events: none;
  }
  #messages[data-chat-state=landing] {
    overflow-y: hidden;
    padding-inline: 14px;
    scrollbar-gutter: auto;
  }
  #messages[data-chat-state=landing]::before {
    height: 0;
  }
  #messages:hover,
  #messages:focus-within {
    scrollbar-color: var(--qz-scrollbar-thumb) transparent;
  }
  #messages::-webkit-scrollbar {
    width: var(--qz-scrollbar-size);
    height: var(--qz-scrollbar-size);
  }
  #messages::-webkit-scrollbar-track {
    background: transparent;
  }
  #messages::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: var(--qz-scrollbar-radius);
  }
  #messages:hover::-webkit-scrollbar-thumb,
  #messages:focus-within::-webkit-scrollbar-thumb {
    background: var(--qz-scrollbar-thumb);
  }
  .chat-search-bar {
    --qz-popover-border: color-mix(in srgb, var(--border) 82%, transparent);
    --qz-popover-radius: var(--radius-lg);
    --qz-popover-surface: color-mix(in srgb, var(--popover-surface) 94%, transparent);
    --qz-popover-shadow: var(--shadow-md);
    --qz-popover-motion: var(--motion-fast);
    top: 58px;
    backdrop-filter: blur(14px);
    animation: panel-in var(--motion-fast) var(--ease-emphasized);
  }
  #session-title-bar:not(.hidden) + .chat-search-bar {
    top: 92px;
  }
  .chat-search-input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font: 13px/1.4 var(--font-sans);
  }
  .chat-search-input::placeholder {
    color: var(--text-muted);
  }
  .chat-search-count {
    color: var(--text-muted);
    font: 11px/1 var(--font-mono);
  }
  .chat-search-btn {
    border: none;
  }
  .msg.chat-search-match-entry {
    scroll-margin-top: 72px;
  }
  .msg:is(.msg-tool, .msg-tool-timeline, .msg-thinking-group).chat-search-active {
    outline: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
  }
  .chat-search-hit {
    border-radius: 3px;
    background: color-mix(in srgb, #f1c40f 44%, transparent);
    color: inherit;
    padding: 0 1px;
  }
  .case-toast {
    position: fixed;
    left: 50%;
    top: var(--toast-viewport-top);
    z-index: 130;
    width: min(var(--toast-max-width), calc(100vw - (var(--toast-inline-margin) * 2)));
    min-height: var(--toast-min-height);
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--control-gap-sm);
    padding: 6px 6px 6px 11px;
    border: 0;
    border-radius: var(--control-radius);
    background: var(--control-primary-surface);
    color: var(--control-primary-text);
    box-shadow: var(--shadow-md);
    font-family: var(--font-sans);
    text-align: start;
    opacity: 0;
    transform: translate(-50%, -6px);
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-emphasized);
  }
  .case-toast.anchored {
    left: var(--toast-left, 50%);
    top: var(--toast-top, auto);
  }
  .case-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
  .case-toast-icon {
    width: 18px;
    height: var(--control-height-sm);
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--control-primary-text) 72%, transparent);
  }
  .case-toast-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .case-toast-copy {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--control-gap-sm);
    overflow: hidden;
    white-space: nowrap;
  }
  .case-toast-title,
  .case-toast-message {
    display: block;
    min-width: 0;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .case-toast-title {
    color: var(--control-primary-text);
    font-size: 12px;
    font-weight: 620;
  }
  .case-toast-message {
    color: color-mix(in srgb, var(--control-primary-text) 72%, transparent);
    font-size: var(--control-font-sm);
    font-weight: 400;
  }
  .case-toast:not(.has-title) .case-toast-copy {
    grid-template-columns: minmax(0, 1fr);
  }
  .case-toast:not(.has-title) .case-toast-message {
    color: var(--control-primary-text);
    font-weight: var(--control-font-weight);
  }
  .case-toast-action,
  .case-toast-close {
    appearance: none;
    flex: none;
    height: var(--control-height-sm);
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--control-primary-text);
    cursor: pointer;
  }
  .case-toast-title[hidden],
  .case-toast-message[hidden],
  .case-toast-action[hidden],
  .case-toast-close[hidden] {
    display: none;
  }
  .case-toast-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--control-padding-xs);
    font: var(--control-font-weight) var(--control-font-sm)/1 var(--font-sans);
  }
  .case-toast-close {
    width: var(--control-height-sm);
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--control-primary-text) 72%, transparent);
  }
  .case-toast-close svg {
    width: var(--control-icon-xs);
    height: var(--control-icon-xs);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .case-toast-action:hover,
  .case-toast-close:hover {
    background: color-mix(in srgb, var(--control-primary-text) 10%, transparent);
  }
  .case-toast-action:focus-visible,
  .case-toast-close:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--control-primary-text) 44%, transparent);
    outline-offset: -2px;
  }
  .case-toast.goal-status-toast {
    width: min(420px, calc(100vw - (var(--toast-inline-margin) * 2)));
  }
  .case-toast.goal-status-toast .case-toast-copy {
    display: block;
    white-space: normal;
  }
  .case-toast.goal-status-toast .case-toast-title,
  .case-toast.goal-status-toast .case-toast-message {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  @media (prefers-color-scheme: dark) {
    .case-toast:is(*) {
      border: 1px solid var(--border);
      background: var(--bg-tertiary);
      color: var(--text-primary);
    }
    .case-toast-title,
    .case-toast-action,
    .case-toast:not(.has-title) .case-toast-message {
      color: var(--text-primary);
    }
    .case-toast-message,
    .case-toast-icon,
    .case-toast-close {
      color: var(--text-secondary);
    }
    .case-toast-action:hover,
    .case-toast-close:hover {
      background: var(--bg-elevated);
    }
    .case-toast-action:focus-visible,
    .case-toast-close:focus-visible {
      outline-color: color-mix(in srgb, var(--text-primary) 38%, transparent);
    }
  }
  .welcome {
    padding: clamp(18px, 4vh, 34px) 20px 14px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .welcome::-webkit-scrollbar {
    display: none;
  }
  .welcome-icon {
    width: clamp(78px, 12vh, 104px);
    height: clamp(78px, 12vh, 104px);
    background: url(../icons/logo-day.png) center / contain no-repeat;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 6px;
    image-rendering: auto;
  }
  @media (prefers-color-scheme: dark) {
    .welcome-icon {
      background-image: url(../icons/logo-night.png);
    }
  }
  .welcome-subtitle {
    white-space: pre-line;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 0;
  }
  .msg {
    margin-bottom: var(--chat-turn-gap);
    animation: none;
  }
  :is(.msg-tool, .msg-thinking-group, .msg-run-status) {
    margin-bottom: var(--chat-trace-gap);
  }
  :is(.msg-tool, .msg-thinking-group, .msg-run-status) + .msg-user {
    padding-top: calc(var(--chat-turn-gap) - var(--chat-trace-gap));
  }
  .msg[data-chat-lane] {
    width: min(100%, var(--chat-lane-max));
    min-width: 0;
    max-width: 100%;
    align-self: flex-start;
    box-sizing: border-box;
  }
  .msg[data-chat-lane=summary] {
    --chat-lane-max: var(--lane-summary-width);
  }
  .msg[data-chat-lane=detail] {
    --chat-lane-max: var(--lane-detail-width);
  }
  .msg[data-chat-lane=wide] {
    --chat-lane-max: 100%;
  }
  @keyframes msg-in {
    from {
      opacity: 0;
      transform: translateY(5px) scale(0.995);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes user-message-sail-in {
    from {
      opacity: 0.58;
      transform: translate3d(-5px, 6px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes steering-batch-message-enter {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes queued-followup-enter {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes queued-followup-ghost-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes queued-followup-send-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes panel-in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes drawer-up {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes subtle-ring {
    0%, 100% {
      opacity: 0;
      transform: scale(0.92);
    }
    50% {
      opacity: 0.42;
      transform: scale(1.18);
    }
  }
  .msg-user {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    animation: none;
  }
  .msg-user-row {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 5px;
    width: 100%;
    min-width: 0;
  }
  .msg-user .msg-content {
    background: var(--user-bubble-bg);
    color: var(--user-bubble-text);
    border: 0;
    border-radius: 18px;
    padding: 9px 13px;
    min-width: 0;
    max-width: 92%;
    font-size: var(--chat-content-font-size);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .msg-user-delivery {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 10px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.25;
  }
  .msg-user-retry {
    color: inherit;
    font: inherit;
  }
  .msg-user-retry:hover,
  .msg-user-retry:focus-visible {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .msg-user.msg-user-outgoing-enter .msg-content {
    will-change: transform, opacity;
    animation: user-message-sail-in 410ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
  }
  .msg-user.msg-user-outgoing-enter.msg-user-steering-batch-enter .msg-content {
    animation: steering-batch-message-enter 180ms var(--ease-standard) both;
    animation-delay: calc(var(--steering-batch-index, 0) * 28ms);
  }
  @media (prefers-reduced-motion: reduce) {
    .msg-user.msg-user-outgoing-enter .msg-content,
    .msg-user.msg-user-outgoing-enter.msg-user-steering-batch-enter .msg-content {
      animation-duration: 1ms;
      animation-delay: 0ms;
    }
  }
  .msg-user-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(3px);
    transition: opacity 140ms ease, transform 140ms ease;
  }
  .msg-user.is-editable:hover .msg-user-actions,
  .msg-user.is-editable:focus-within .msg-user-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
  .msg-user.is-editable.is-settling-edit .msg-user-actions {
    opacity: 0;
    pointer-events: none;
    transform: translateX(3px);
    transition: none;
  }
  .msg-user-edit-btn {
    --qz-control-size: 26px;
    --qz-control-icon-size: 15px;
    --qz-control-color: color-mix(in srgb, var(--text-muted) 88%, transparent);
    border-radius: 9px;
  }
  .msg-user-edit-btn svg {
    stroke-width: 1.75;
  }
  .msg-user-edit-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    z-index: 4;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--popover-surface);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition: opacity 120ms ease, transform 120ms ease;
  }
  .msg-user-edit-btn::after {
    content: none;
  }
  .msg-user-edit-btn:hover::before,
  .msg-user-edit-btn:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .msg-user.is-editing .msg-content {
    width: min(100%, var(--lane-detail-width));
    max-width: 100%;
    padding: 10px 12px;
  }
  .msg-user-edit-shell {
    display: grid;
    gap: 9px;
    min-width: min(420px, 100%);
  }
  textarea.msg-user-edit-input {
    width: 100%;
    min-height: 42px;
    max-height: 180px;
    padding: 0;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--user-bubble-text);
    caret-color: var(--user-bubble-text);
    font: inherit;
    line-height: 1.62;
  }
  textarea.msg-user-edit-input::placeholder {
    color: var(--text-muted);
  }
  .msg-user-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
  }
  .msg-user-edit-cancel,
  .msg-user-edit-submit {
    --qz-control-font-size: 12px;
    --qz-control-font-weight: 650;
  }
  .msg-user.is-resending .msg-content {
    opacity: 0.72;
  }
  .msg-assistant {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .msg-assistant:has(+ :is(.msg-tool, .msg-tool-timeline, .msg-thinking-group, .msg-run-status, .msg-note)) {
    margin-bottom: var(--chat-trace-gap);
  }
  .msg-assistant .msg-content {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 2px 2px 2px 0;
    min-width: 0;
    max-width: 100%;
    --markdown-code-font-size: 0.885em;
    --markdown-footnote-font-size: 0.923em;
    --markdown-h1-font-size: 1.23em;
    --markdown-h2-font-size: 1.08em;
    --markdown-h3-font-size: 1em;
    --markdown-table-font-size: var(--chat-table-font-size);
    font-size: var(--chat-content-font-size);
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .msg-assistant-error .msg-content {
    width: 100%;
    max-width: 100%;
  }
  .chat-error-card {
    position: relative;
    font-size: var(--chat-content-font-size);
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--red) 8%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--red) 1.6%, var(--bg-secondary));
    color: var(--text-secondary);
    box-shadow: none;
  }
  .chat-error-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .chat-error-mark {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--red) 46%, var(--text-muted));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 7%, transparent);
    flex: 0 0 auto;
  }
  .chat-error-title {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.96em;
    font-weight: 680;
    line-height: 1.35;
  }
  .chat-error-summary {
    margin-top: 7px;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
    font-size: 0.94em;
    line-height: 1.55;
  }
  .chat-error-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
  }
  .chat-error-tool,
  .chat-error-more {
    min-width: 0;
    max-width: 100%;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10.6px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .chat-error-more {
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
    font-family: var(--font-sans);
  }
  .chat-error-guidance {
    margin-top: 8px;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
    font-size: 0.92em;
    line-height: 1.55;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) :is(p, li, blockquote, table, td, th, a, code) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) p {
    margin-bottom: 8px;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) p:last-child {
    margin-bottom: 0;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) code {
    display: inline;
    max-width: 100%;
    background: var(--code-inline-bg);
    border: 1px solid color-mix(in srgb, var(--code-border) 68%, var(--border));
    padding: 2px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: var(--markdown-code-font-size, calc(11.5px * var(--chat-text-scale, 1)));
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-primary) 88%, var(--code-accent));
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: break-spaces;
    vertical-align: baseline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) pre {
    background: var(--block-fill);
    border: 0;
    border-radius: var(--block-radius);
    box-shadow: none;
    padding: 10px 12px;
    margin: 8px 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--markdown-code-font-size, calc(11.5px * var(--chat-text-scale, 1)));
    line-height: 1.5;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) .copyable-code-block pre {
    --code-block-max-height: min(56vh, 520px);
    margin: 0;
    padding: 10px 42px 10px 12px;
    max-height: var(--code-block-max-height);
    overflow-y: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) pre code {
    display: block;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) .markdown-code-block {
    margin: 8px 0;
    overflow-anchor: none;
    contain: layout paint;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) :is(h1, h2, h3, h4) {
    margin: 12px 0 6px;
    font-weight: 600;
    line-height: 1.3;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) h1 {
    font-size: var(--markdown-h1-font-size, calc(16px * var(--chat-text-scale, 1)));
  }
  :is(.msg-assistant .msg-content, .qz-markdown) h2 {
    font-size: var(--markdown-h2-font-size, calc(14px * var(--chat-text-scale, 1)));
  }
  :is(.msg-assistant .msg-content, .qz-markdown) h3 {
    font-size: var(--markdown-h3-font-size, calc(13px * var(--chat-text-scale, 1)));
    color: var(--text-secondary);
  }
  :is(.msg-assistant .msg-content, .qz-markdown) :is(ul, ol) {
    padding-left: 20px;
    margin: 6px 0;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) li {
    margin: 3px 0;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 12px 0;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) a {
    color: var(--accent);
    text-decoration: none;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) a:hover {
    text-decoration: underline;
  }
  .msg-assistant .msg-content a.markdown-citation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.22em;
    height: 1.22em;
    margin: 0 0.12em;
    padding: 0 0.26em;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 13%, var(--bg-secondary));
    color: color-mix(in srgb, var(--accent) 78%, var(--text-secondary));
    font-family: var(--font-mono);
    font-size: 0.66em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    vertical-align: super;
    transform: translateY(-0.14em);
  }
  .msg-assistant .msg-content a.markdown-citation-link:hover {
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-secondary));
    color: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
    text-decoration: none;
  }
  .msg-assistant .msg-content .markdown-footnote-ref {
    display: inline-flex;
    vertical-align: super;
    font-size: 0.62em;
    line-height: 1;
    transform: translateY(-0.14em);
  }
  .msg-assistant .msg-content .markdown-footnote-ref a,
  .msg-assistant .msg-content .markdown-footnote-ref span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    height: 1em;
    margin: 0 0.025em;
    padding: 0 0.08em;
    border-radius: 4px;
    background: transparent;
    color: color-mix(in srgb, var(--accent) 68%, var(--text-secondary));
    font-family: var(--font-mono);
    font-weight: 700;
    text-decoration: none;
  }
  .msg-assistant .msg-content .markdown-footnote-ref a:hover {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: color-mix(in srgb, var(--accent) 84%, var(--text-primary));
    text-decoration: none;
  }
  .msg-assistant .msg-content .markdown-footnote-ref-pending span {
    cursor: default;
    opacity: 0.78;
  }
  .msg-assistant .msg-content .markdown-footnotes {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    color: var(--text-muted);
    font-size: var(--markdown-footnote-font-size, calc(12px * var(--chat-text-scale, 1)));
    line-height: 1.5;
  }
  .msg-assistant .msg-content .markdown-footnotes ol {
    margin: 0;
    padding-left: 20px;
  }
  .msg-assistant .msg-content .markdown-footnotes li {
    margin: 3px 0;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) blockquote {
    border: 0;
    border-radius: var(--block-radius);
    padding: 8px 10px;
    margin: 8px 0;
    background: var(--block-fill);
    color: var(--text-secondary);
  }
  :is(.msg-assistant .msg-content, .qz-markdown) table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    font-size: var(--markdown-table-font-size, calc(12px * var(--chat-text-scale, 1)));
  }
  :is(.msg-assistant .msg-content, .qz-markdown) :is(th, td) {
    border: 1px solid var(--border);
    padding: 6px 8px;
    text-align: start;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) th {
    background: var(--bg-tertiary);
    font-weight: 600;
  }
  :is(.msg-assistant .msg-content, .qz-markdown) img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    margin: 4px 0;
    cursor: zoom-in;
  }
  .msg-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 22px;
    margin-top: 1px;
    opacity: 0.58;
  }
  .msg-action-btn {
    border: 0;
    --qz-control-color: var(--text-muted);
  }
  .msg-action-btn svg {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .msg-action-btn.is-confirmed {
    color: var(--accent);
    opacity: 1;
  }
  .msg-tool {
    margin-left: 0;
    align-self: flex-start;
  }
  .msg-tool.tool-expanded {
    overflow: visible;
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-primary));
    box-shadow: 0 0 0 1px var(--border);
  }
  .tool-badge,
  .tool-summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: calc(11px * var(--chat-meta-text-scale, 1));
    color: var(--text-secondary);
    font-family: var(--font-mono);
  }
  .tool-summary {
    position: relative;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    min-height: var(--lane-header-height);
    min-width: 0;
    padding: 0 9px;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    transition:
      background-color var(--transition),
      border-color var(--transition),
      color var(--transition);
  }
  .tool-summary:hover {
    background: var(--accent-subtle);
    border-color: var(--border-focus);
  }
  .msg-note .note-badge {
    color: var(--orange);
  }
  .msg-run-status {
    margin-left: 0;
    align-self: flex-start;
  }
  .run-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 38%, transparent);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-meta-text-scale, 1));
  }
  .msg-tool.tool-expanded > .tool-summary {
    width: 100%;
    min-height: var(--lane-header-height);
    padding: 0 9px;
    border: 0;
    border-bottom: 0;
    border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
    box-shadow: none;
    backdrop-filter: blur(10px);
    font-family: var(--font-sans);
  }
  .msg-tool.tool-expanded > .tool-summary:hover {
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--accent-subtle));
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
  }
  .msg-tool.tool-expanded > .tool-summary,
  .msg-tool-timeline.tool-timeline-expanded > .tool-timeline-summary,
  .msg-thinking-group.thinking-group-expanded > .thinking-group-summary {
    position: sticky;
    top: var(--chat-sticky-offset);
    z-index: 12;
  }
  .msg-tool.tool-expanded > .tool-summary .tool-args-preview {
    display: none;
  }
  .tool-name {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--text-primary);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .tool-args-preview {
    flex: 1 1 0;
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform var(--transition), color var(--transition);
  }
  .tool-badge .dot,
  .tool-summary .dot,
  .thinking-dot {
    box-sizing: border-box;
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex: 0 0 auto;
    transform-origin: center;
  }
  .tool-badge .dot.aborted,
  .tool-summary .dot.aborted,
  .thinking-dot.aborted {
    border: 1.4px solid var(--red);
    background: transparent;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 10%, transparent);
  }
  .tool-badge .dot.error,
  .tool-summary .dot.error,
  .thinking-dot.error {
    background: var(--red);
  }
  .tool-badge .dot.running,
  .tool-summary .dot.running,
  .thinking-dot.running {
    background: var(--orange);
    animation: pulse 1s infinite;
  }
  .thinking-dot.completed {
    background: var(--green);
  }
  .tool-details {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-primary));
    animation: panel-in var(--motion-base) var(--ease-emphasized);
  }
  .msg-tool.tool-expanded > .tool-details {
    width: 100%;
    margin-top: 0;
    padding: 8px 10px 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    animation: none;
  }
  .tool-details-streaming {
    overflow-anchor: none;
  }
  .tool-details-streaming:not(.tool-details-stream-unbounded) {
    max-height: min(42vh, 360px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .tool-details .tool-text-preview,
  .tool-timeline-slot-body .tool-text-preview {
    max-height: min(34vh, 300px);
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }
  .tool-detail-section .copyable-code-block pre,
  .tool-json-code-section .copyable-code-block pre,
  .tool-raw-details .copyable-code-block pre,
  .tool-timeline-raw-panel .copyable-code-block pre,
  .tool-event-raw-panel .copyable-code-block pre {
    max-height: min(42vh, 360px);
    overflow: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
  }
  .msg-tool-timeline {
    min-width: 0;
    overflow: hidden;
  }
  .msg-tool-timeline.tool-timeline-expanded {
    overflow: visible;
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-primary));
    box-shadow: 0 0 0 1px var(--border);
  }
  .tool-timeline-summary {
    width: 100%;
    min-height: var(--lane-header-height);
    padding: 0 9px;
    border-color: color-mix(in srgb, var(--border) 86%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-primary) 78%, var(--bg-elevated));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 72%, transparent);
  }
  .tool-timeline-summary .dot {
    width: 5px;
    height: 5px;
  }
  .tool-timeline-summary .tool-name {
    font-family: var(--font-sans);
    font-weight: 500;
  }
  .tool-timeline-summary .tool-args-preview {
    font-family: var(--font-mono);
    font-size: max(10px, calc(10.5px * var(--chat-meta-text-scale, 1)));
    color: color-mix(in srgb, var(--text-muted) 86%, var(--text-primary));
  }
  .tool-timeline-summary-waiting,
  .tool-timeline-summary-running {
    border-color: color-mix(in srgb, var(--orange) 22%, var(--border));
    background: color-mix(in srgb, var(--orange) 4%, transparent);
  }
  .tool-timeline-summary-error {
    border-color: color-mix(in srgb, var(--red) 28%, var(--border));
    background: color-mix(in srgb, var(--red) 4%, transparent);
  }
  .tool-timeline-summary-aborted {
    border-color: color-mix(in srgb, var(--red) 22%, var(--border));
    background: color-mix(in srgb, var(--red) 2%, transparent);
  }
  .tool-summary.tool-summary-settled {
    animation: none;
  }
  .tool-summary.tool-summary-settled .dot {
    animation: tool-complete-dot-pulse 720ms var(--ease-emphasized) 1;
  }
  .msg-tool-timeline.tool-timeline-expanded > .tool-timeline-summary {
    width: 100%;
    min-height: var(--lane-header-height);
    padding: 0 9px;
    border: 0;
    border-bottom: 0;
    border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
    box-shadow: none;
    backdrop-filter: blur(10px);
  }
  .msg-tool-timeline.tool-timeline-expanded > .tool-timeline-summary:hover {
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--accent-subtle));
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
  }
  .msg-tool-timeline.tool-timeline-expanded > .tool-timeline-details {
    width: 100%;
    margin-top: 0;
    padding: 8px 10px 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    animation: none;
  }
  .tool-timeline-details {
    position: relative;
    --tool-timeline-pager-width: 82px;
    max-width: 100%;
    overflow: visible;
  }
  .tool-timeline-nav-area {
    position: relative;
    min-width: 0;
  }
  .msg-tool-timeline.tool-timeline-expanded .tool-timeline-nav-area {
    position: sticky;
    top: calc(var(--chat-sticky-offset) + var(--lane-header-height));
    z-index: 11;
    padding: 1px 0 6px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
  }
  .tool-timeline-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 0;
    padding: 1px 0 0;
  }
  .tool-timeline-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    height: 22px;
    padding: 0 7px 0 6px;
    border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
    font-family: var(--font-sans);
    font-size: max(10px, calc(10.4px * var(--chat-meta-text-scale, 1)));
    font-weight: 450;
    line-height: 1;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 72%, transparent);
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .tool-timeline-step span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tool-timeline-step:hover,
  .tool-timeline-step:focus-visible {
    border-color: var(--border-focus);
    color: var(--text-primary);
    outline: none;
  }
  .tool-timeline-step .mini-dot {
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--green);
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 10%, transparent);
  }
  .tool-timeline-step.running,
  .tool-timeline-step.waiting {
    border-color: color-mix(in srgb, var(--orange) 16%, var(--border));
    background: color-mix(in srgb, var(--orange) 3%, var(--bg-primary));
  }
  .tool-timeline-step.running .mini-dot,
  .tool-timeline-step.waiting .mini-dot {
    background: var(--orange);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 12%, transparent);
  }
  .tool-timeline-step.error {
    border-color: color-mix(in srgb, var(--red) 18%, var(--border));
    background: color-mix(in srgb, var(--red) 3%, var(--bg-primary));
  }
  .tool-timeline-step.aborted {
    border-color: color-mix(in srgb, var(--red) 18%, var(--border));
    background: color-mix(in srgb, var(--red) 2%, var(--bg-primary));
  }
  .tool-timeline-step.error .mini-dot {
    background: var(--red);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 12%, transparent);
  }
  .tool-timeline-step.aborted .mini-dot {
    border: 1px solid var(--red);
    background: transparent;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 10%, transparent);
  }
  .tool-timeline-step.active {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.055), inset 0 0 0 1px color-mix(in srgb, var(--bg-primary) 72%, transparent);
  }
  .tool-timeline-step.muted {
    opacity: 0.44;
    background: transparent;
  }
  .tool-timeline-slot {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  }
  .tool-timeline-footer,
  .tool-event-footer {
    display: grid;
    gap: 7px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
    color: var(--text-muted);
    font-size: max(10px, calc(10px * var(--chat-meta-text-scale, 1)));
    line-height: 1;
  }
  .tool-timeline-footer-row,
  .tool-event-footer-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 7px;
    min-height: 14px;
  }
  .tool-timeline-footer-spacer,
  .tool-event-footer-spacer {
    flex: 1 1 auto;
    min-width: 0;
  }
  .tool-timeline-duration {
    min-height: 14px;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font: inherit;
    line-height: 1;
    cursor: default;
    font-family: var(--font-mono);
  }
  .tool-timeline-raw-btn,
  .tool-timeline-collapse-btn,
  .tool-event-raw-btn,
  .tool-event-collapse-btn {
    min-height: 14px;
    font: inherit;
  }
  .tool-timeline-raw-btn,
  .tool-event-raw-btn {
    flex: 0 1 auto;
    min-width: 0;
  }
  .tool-timeline-raw-panel,
  .tool-event-raw-panel {
    width: 100%;
    min-width: 0;
  }
  .tool-timeline-raw-panel .copyable-code-block,
  .tool-timeline-raw-panel pre,
  .tool-event-raw-panel .copyable-code-block,
  .tool-event-raw-panel pre {
    width: 100%;
    max-width: 100%;
  }
  .tool-timeline-raw-panel pre,
  .tool-event-raw-panel pre {
    margin-top: 0;
  }
  .tool-timeline-raw-panel .copyable-code-block pre,
  .tool-event-raw-panel .copyable-code-block pre {
    overscroll-behavior-y: contain;
  }
  .tool-timeline-slot-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--tool-timeline-pager-width);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin-bottom: 6px;
  }
  .tool-timeline-slot-title {
    display: flex;
    align-items: baseline;
    flex: 1 1 auto;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
  }
  .tool-timeline-slot-head b {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 520;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-timeline-slot-head span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .timeline-pager {
    display: grid;
    grid-template-columns: 22px 30px 22px;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: 82px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1;
  }
  .timeline-pager > span {
    min-width: 0;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .timeline-pager-btn {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1;
  }
  .tool-timeline-slot-head > .timeline-pager {
    justify-self: end;
  }
  .tool-timeline-slot-body {
    width: 100%;
    min-width: 0;
    animation: none;
  }
  .tool-timeline-slot-body .code-block {
    border: 0;
    background: var(--block-fill);
  }
  .tool-timeline-details-family .tool-timeline-slot-body {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }
  .tool-family-trace {
    display: grid;
    gap: 6px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
  }
  .tool-family-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 100%;
    overflow: visible;
    padding: 1px;
  }
  .tool-family-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 86px;
    max-width: 100%;
    min-height: 24px;
    padding: 0 7px 0 6px;
    border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-primary) 62%, transparent);
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
    font: inherit;
    text-align: start;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 72%, transparent);
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .tool-family-row:hover,
  .tool-family-row:focus-visible,
  .tool-family-row.active {
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
  }
  .tool-family-row .mini-dot {
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 10%, transparent);
  }
  .tool-family-row .mini-dot.running,
  .tool-family-row .mini-dot.waiting {
    background: var(--orange);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 12%, transparent);
  }
  .tool-family-row .mini-dot.error {
    background: var(--red);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 12%, transparent);
  }
  .tool-family-row .mini-dot.aborted {
    border: 1px solid var(--red);
    background: transparent;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 10%, transparent);
  }
  .tool-family-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: calc(10.5px * var(--chat-text-scale, 1));
    font-weight: 500;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-family-submenu {
    position: relative;
    min-width: 0;
    padding: 7px 1px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
  }
  .tool-family-panels {
    min-width: 0;
  }
  .tool-family-panel {
    display: none;
    min-width: 0;
  }
  .tool-family-panel.active {
    display: block;
  }
  .tool-family-primary-batch {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 20px;
    padding-right: calc(var(--tool-timeline-pager-width) + 8px);
  }
  .tool-family-panel-nav {
    position: absolute;
    top: 7px;
    right: 1px;
    width: var(--tool-timeline-pager-width);
    min-height: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .tool-family-count {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1;
    white-space: nowrap;
  }
  .tool-family-batches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    min-width: 0;
    margin-top: 5px;
  }
  .tool-family-batch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    min-height: 20px;
    overflow: hidden;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-primary) 64%, transparent);
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
    font-family: var(--font-sans);
    font-size: calc(10.2px * var(--chat-text-scale, 1));
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .tool-family-batch > span,
  .tool-family-batch > b {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .tool-family-batch:hover,
  .tool-family-batch:focus-visible,
  .tool-family-row:hover .tool-family-title,
  .tool-family-row:focus-visible .tool-family-title {
    color: var(--text-primary);
    outline: none;
  }
  .tool-family-batch.active {
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    background: var(--bg-primary);
    color: var(--text-primary);
  }
  .tool-family-batch b {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    font-weight: 500;
  }
  .tool-family-batch em {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    color: var(--text-muted);
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-detail-section + .tool-detail-section,
  .tool-friendly-section + .tool-friendly-section,
  .tool-friendly-section + .tool-detail-section,
  .tool-detail-section + .tool-friendly-section,
  .tool-raw-details,
  .tool-chip-row,
  .tool-diff-section,
  .tool-json-code-section,
  .tool-stat-grid,
  .tool-compact-line + .tool-slim-list,
  .tool-compact-line + .tool-tree-panel,
  .tool-data-table-section + .tool-raw-details {
    margin-top: 8px;
  }
  .tool-compact-line {
    padding: 2px 0;
  }
  .tool-compact-title {
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 520;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-compact-subtitle {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-compact-meta,
  .tool-slim-meta,
  .tool-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .tool-compact-meta {
    margin-top: 5px;
  }
  .tool-compact-meta span,
  .tool-slim-meta span,
  .tool-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 20px;
    max-width: 100%;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1;
  }
  .tool-stat-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 7px;
  }
  .tool-stat-item {
    min-width: 0;
    padding: 7px 8px;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    text-align: center;
  }
  .tool-stat-item b {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(13px * var(--chat-text-scale, 1));
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-stat-item em {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-style: normal;
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.35;
  }
  .tool-chip b {
    margin-right: 5px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-weight: 500;
  }
  .tool-chip {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
    padding: 5px 8px;
    border-radius: 6px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .tool-chip b {
    flex: 0 0 auto;
  }
  .tool-compact-title a,
  .tool-compact-subtitle a,
  .tool-tree-title a,
  .tool-tree-url a,
  .tool-tree-text a,
  .tool-slim-main a,
  .tool-slim-sub a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-focus);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .tool-compact-subtitle a,
  .tool-tree-url a,
  .tool-slim-sub a {
    color: var(--text-secondary);
  }
  .tool-tree-panel,
  .tool-slim-list {
    padding: 2px 0;
  }
  .tool-tree-head {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
  }
  .tool-tree-title {
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 560;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-tree-url {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin-top: 5px;
    padding: 5px 7px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--chat-text-scale, 1));
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .tool-tree-stats {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: calc(10.5px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .tool-tree-body {
    margin-top: 7px;
    font-family: var(--font-mono);
    font-size: calc(10.5px * var(--chat-text-scale, 1));
    line-height: 1.65;
  }
  .tool-tree-line {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    padding-left: calc(var(--depth, 0) * 13px);
    color: var(--text-secondary);
  }
  .tool-tree-line::before {
    content: "";
    position: absolute;
    left: calc(var(--depth, 0) * 13px + 6px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    opacity: 0.55;
  }
  .tool-tree-line[data-depth="0"]::before {
    display: none;
  }
  .tool-tree-toggle,
  .tool-tree-toggle-spacer {
    flex: 0 0 auto;
    width: 14px;
    height: 18px;
  }
  .tool-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1;
    cursor: pointer;
  }
  .tool-tree-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }
  .tool-tree-line-hidden {
    display: none;
  }
  .tool-tree-text {
    min-width: 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }
  .tool-tree-line-meta {
    flex: 1 1 auto;
    min-width: 70px;
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-slim-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: calc(11px * var(--chat-text-scale, 1));
  }
  .tool-slim-title span {
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-slim-row {
    min-width: 0;
    padding: 7px 0;
    border-top: 1px solid var(--border);
  }
  .tool-slim-row:first-of-type {
    border-top-color: transparent;
  }
  .tool-slim-main {
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 520;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-slim-sub {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-slim-meta {
    margin-top: 4px;
  }
  .tool-data-table-section {
    min-width: 0;
    padding: 2px 0;
  }
  .tool-data-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  .tool-data-table-title {
    min-width: 0;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 560;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-data-table-meta {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-data-table-truncated {
    color: var(--orange);
  }
  .tool-data-table-head-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }
  .tool-data-table-copy {
    --qz-control-height: 23px;
    --qz-control-gap: 4px;
    --qz-control-padding: 8px;
    --qz-control-border: color-mix(in srgb, var(--border) 62%, transparent);
    --qz-control-bg: color-mix(in srgb, var(--bg-primary) 78%, transparent);
    --qz-control-bg-hover: color-mix(in srgb, var(--bg-primary) 92%, var(--accent-subtle));
    --qz-control-font-size: 10px;
    --qz-control-font-weight: 540;
    flex: 0 0 auto;
  }
  .tool-data-table-copy svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .tool-data-table-copy.is-confirmed {
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 34%, var(--border));
    background: color-mix(in srgb, var(--green) 8%, var(--bg-primary));
  }
  .tool-data-table-copy.is-error {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 34%, var(--border));
    background: color-mix(in srgb, var(--red) 8%, var(--bg-primary));
  }
  .tool-data-table-wrap {
    max-height: min(38vh, 340px);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 82%, var(--bg-secondary));
    scrollbar-gutter: auto;
  }
  .tool-data-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .tool-data-table th,
  .tool-data-table td {
    box-sizing: border-box;
    max-width: 240px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
  }
  .tool-data-table th:last-child,
  .tool-data-table td:last-child {
    border-right: 0;
  }
  .tool-data-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .tool-data-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
    box-shadow: 0 1px 0 var(--border);
    color: var(--text-muted);
    font-weight: 520;
    text-align: start;
  }
  .tool-data-table td a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-focus);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .tool-data-row-index {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
    font-family: var(--font-mono);
    text-align: right;
    box-shadow: 1px 0 0 var(--border);
  }
  .tool-data-table td.tool-data-row-index {
    z-index: 2;
    background: color-mix(in srgb, var(--bg-primary) 88%, var(--bg-secondary));
  }
  .tool-data-table thead .tool-data-row-index {
    z-index: 4;
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary));
    box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
  }
  .tool-data-empty-cell::after {
    content: " ";
  }
  .tool-diff-section {
    display: grid;
    gap: 7px;
  }
  .tool-diff-card {
    overflow: hidden;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
  }
  .tool-diff-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.4;
  }
  .tool-diff-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-diff-title em {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-style: normal;
  }
  .tool-diff-block {
    display: block;
    max-height: 260px;
    overflow: auto;
    margin: 0;
    padding: 5px 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.48;
    white-space: pre;
  }
  .tool-diff-line {
    display: block;
    padding: 0 8px;
  }
  .tool-diff-line.hunk {
    color: color-mix(in srgb, var(--code-accent) 78%, var(--text-secondary));
    background: color-mix(in srgb, var(--code-accent) 8%, transparent);
  }
  .tool-diff-line.add {
    color: color-mix(in srgb, var(--green) 72%, var(--text-primary));
    background: color-mix(in srgb, var(--green) 9%, transparent);
  }
  .tool-diff-line.remove {
    color: color-mix(in srgb, var(--red) 72%, var(--text-primary));
    background: color-mix(in srgb, var(--red) 8%, transparent);
  }
  .tool-script-trace {
    display: grid;
    gap: 5px;
  }
  .tool-script-trace-body {
    display: grid;
    gap: 3px;
    max-height: 220px;
    overflow: auto;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--code-border) 58%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--code-bg) 86%, var(--bg-primary));
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .tool-script-trace-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    align-items: baseline;
    color: var(--text-secondary);
  }
  .tool-script-trace-level {
    color: var(--text-muted);
  }
  .tool-script-trace-message {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }
  .tool-script-trace-time {
    color: var(--text-muted);
  }
  .tool-result-json-block {
    max-height: 360px;
  }
  .tool-friendly-section {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    animation: panel-in var(--motion-base) var(--ease-emphasized);
  }
  .tool-compact-line + .tool-friendly-section {
    margin-top: 8px;
    animation: none;
  }
  .tool-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 650;
  }
  .tool-section-count {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    font-weight: 500;
  }
  .tool-plugin-markdown-body {
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .tool-plugin-markdown-body :is(p, ul) {
    margin: 0 0 7px;
  }
  .tool-plugin-markdown-body :is(p, ul):last-child {
    margin-bottom: 0;
  }
  .tool-plugin-markdown-body ul {
    padding-left: 18px;
  }
  .tool-plugin-markdown-body h1,
  .tool-plugin-markdown-body h2,
  .tool-plugin-markdown-body h3 {
    margin: 8px 0 5px;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .tool-plugin-markdown-body code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--block-fill);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-plugin-article {
    min-width: 0;
    padding: 1px 0;
  }
  .tool-plugin-article-shell {
    min-width: 0;
  }
  .tool-plugin-article-head {
    display: grid;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
  .tool-plugin-article-title {
    margin: 0;
    color: var(--text-primary);
    font-size: calc(14px * var(--chat-text-scale, 1));
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .tool-plugin-article-meta,
  .tool-plugin-article-comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .tool-plugin-article-meta span,
  .tool-plugin-article-comment-meta span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .tool-plugin-article-meta span + span::before,
  .tool-plugin-article-comment-meta span + span::before {
    content: "\b7";
    margin-right: 8px;
    color: color-mix(in srgb, var(--text-muted) 58%, transparent);
  }
  .tool-plugin-article-body {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: calc(12.5px * var(--chat-text-scale, 1));
    line-height: 1.78;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .tool-plugin-article-comments {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
  }
  .tool-plugin-article-comments-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 620;
  }
  .tool-plugin-article-comment-list {
    display: grid;
    gap: 8px;
  }
  .tool-plugin-article-comment {
    min-width: 0;
    padding-left: 9px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  }
  .tool-plugin-article-comment-title {
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 580;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-plugin-article-comment-body {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: calc(11.5px * var(--chat-text-scale, 1));
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .tool-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 7px;
  }
  .tool-kv-item {
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    transition:
      border-color var(--transition),
      background-color var(--transition),
      transform var(--transition);
  }
  .tool-kv-label {
    margin-bottom: 3px;
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-kv-value {
    min-width: 0;
    color: var(--text-secondary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-image-grid-section {
    min-width: 0;
    padding: 2px 0;
  }
  .tool-image-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  .tool-image-grid-title {
    min-width: 0;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 560;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-image-grid-meta {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-image-grid-scroll {
    max-height: min(44vh, 380px);
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 82%, var(--bg-secondary));
    scrollbar-gutter: stable;
  }
  .tool-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
  }
  .tool-image-grid-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
  }
  .tool-image-grid-source {
    padding: 8px;
    overflow-wrap: anywhere;
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-image-grid-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-image-grid-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .tool-image-grid-placeholder {
    padding: 8px;
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-kv-value a,
  .tool-text-preview a,
  .tool-record-title a,
  .tool-record-subtitle a,
  .tool-plugin-article-title a,
  .tool-plugin-article-meta a,
  .tool-plugin-article-body a,
  .tool-plugin-article-comment-title a,
  .tool-plugin-article-comment-meta a,
  .tool-plugin-article-comment-body a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-focus);
    text-underline-offset: 3px;
  }
  .tool-text-preview {
    padding: 9px 10px;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    color: var(--text-secondary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .tool-more-hint,
  .tool-data-note {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.5;
  }
  .tool-record-list {
    display: grid;
    gap: 6px;
  }
  .tool-record-card {
    min-width: 0;
    padding: 8px 9px;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    transition:
      border-color var(--transition),
      background-color var(--transition),
      transform var(--transition);
  }
  .tool-record-title {
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-record-subtitle {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
  }
  .tool-record-meta span {
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-error-section {
    border-color: color-mix(in srgb, var(--red) 42%, var(--border));
  }
  .tool-error-message {
    color: var(--red);
    font-size: calc(12px * var(--chat-text-scale, 1));
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .tool-error-code {
    display: inline-flex;
    margin-top: 6px;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--red) 34%, var(--border));
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
  }
  .tool-error-diagnostic {
    display: grid;
    grid-template-columns: fit-content(96px) minmax(0, 1fr);
    gap: 5px;
    margin-top: 8px;
  }
  .tool-error-diagnostic-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 8px;
    align-items: start;
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .tool-error-diagnostic-row span {
    min-width: 58px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
  }
  .tool-error-diagnostic-row b {
    color: var(--text-secondary);
    font-weight: 500;
    overflow-wrap: anywhere;
  }
  .tool-raw-details {
    color: var(--text-muted);
  }
  .tool-raw-details summary {
    display: inline-flex;
    cursor: pointer;
    color: var(--text-muted);
    font-size: calc(11px * var(--chat-text-scale, 1));
    user-select: none;
  }
  .tool-raw-details summary:hover {
    color: var(--text-secondary);
  }
  .tool-raw-details pre {
    margin-top: 6px;
  }
  .tool-raw-details > .copyable-code-block {
    margin-top: 6px;
  }
  .tool-detail-section {
    display: grid;
    gap: 6px;
  }
  .tool-detail-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    color: var(--text-muted);
  }
  .tool-details pre {
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    box-shadow: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.5;
    tab-size: 2;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .tool-details .copyable-code-block pre {
    margin: 0;
    padding-right: 40px;
  }
  .json-block-text {
    color: var(--text-secondary);
  }
  .code-block,
  .hljs {
    color: var(--syntax-plain);
    background: transparent;
  }
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-built_in,
  .hljs-type,
  .hljs-template-tag,
  .hljs-title.class_,
  .hljs-title.class_.inherited__ {
    color: var(--syntax-keyword);
  }
  .hljs-title,
  .hljs-section,
  .hljs-name,
  .hljs-title.function_,
  .hljs-function .hljs-title,
  .hljs-selector-id,
  .hljs-selector-class {
    color: var(--syntax-title);
  }
  .hljs-attr,
  .hljs-attribute,
  .hljs-property,
  .hljs-variable,
  .hljs-params {
    color: var(--syntax-meta);
  }
  .hljs-string,
  .hljs-symbol,
  .hljs-code,
  .hljs-variable.language_ {
    color: var(--syntax-string);
  }
  .hljs-comment,
  .hljs-quote,
  .hljs-doctag {
    color: var(--syntax-comment);
    font-style: italic;
  }
  .hljs-literal,
  .hljs-variable.constant_ {
    color: var(--syntax-literal);
  }
  .hljs-number {
    color: var(--syntax-number);
  }
  .hljs-meta,
  .hljs-meta .hljs-keyword,
  .hljs-bullet {
    color: var(--syntax-meta);
  }
  .hljs-regexp,
  .hljs-link,
  .hljs-selector-attr,
  .hljs-selector-pseudo {
    color: var(--syntax-literal);
  }
  .hljs-addition {
    color: var(--syntax-addition);
  }
  .hljs-deletion {
    color: var(--syntax-deletion);
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: 650;
  }
  .markdown-editor :is(.hljs-comment, .hljs-quote, .hljs-emphasis, .hljs-strong) {
    font-style: normal;
    font-weight: inherit;
  }
  .markdown-editor .hljs-strong {
    color: var(--text-primary);
  }
  .markdown-editor .hljs-emphasis,
  .markdown-editor .hljs-bullet {
    color: var(--syntax-keyword);
  }
  .markdown-editor .hljs-link {
    color: var(--syntax-title);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
    text-underline-offset: 2px;
  }
  .markdown-editor .hljs-quote {
    color: var(--syntax-meta);
  }
  .copyable-code-block {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .math-formula {
    color: color-mix(in srgb, var(--text-primary) 92%, var(--code-accent));
  }
  .math-pending {
    user-select: none;
    color: color-mix(in srgb, var(--text-muted) 78%, var(--code-accent));
  }
  .math-pending-inline {
    display: inline-flex;
    align-items: center;
    max-width: min(260px, 100%);
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--code-accent) 18%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--code-inline-bg) 72%, transparent);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.45;
    vertical-align: baseline;
    white-space: nowrap;
  }
  .math-pending-display {
    color: color-mix(in srgb, var(--text-muted) 82%, var(--code-accent));
    font-family: var(--font-mono);
    animation: math-pending-breathe 1.35s var(--ease-standard) infinite;
  }
  .math-inline {
    display: inline;
    white-space: nowrap;
  }
  .math-inline mjx-container {
    margin: 0 1px;
    vertical-align: baseline;
  }
  .math-display {
    --math-display-padding-y: 10px;
    --math-display-padding-x: 12px;
    display: block;
    max-width: 100%;
    margin: 10px 0;
    padding: var(--math-display-padding-y) var(--math-display-padding-x);
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    box-shadow: none;
    font-size: calc(13px * var(--chat-text-scale, 1));
    line-height: 1.55;
  }
  .copyable-code-block.math-code-block {
    margin: 10px 0;
  }
  .math-code-block .math-display {
    min-height: 0;
    margin: 0;
    padding: var(--math-display-padding-y) 44px var(--math-display-padding-y) var(--math-display-padding-x);
  }
  .math-code-block .math-code-like {
    font-size: calc(12px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .math-code-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .math-code-line {
    display: block;
    min-width: max-content;
    padding-left: var(--math-code-indent, 0);
    white-space: nowrap;
  }
  .math-code-line-pending,
  .math-code-block-pending {
    font-family: var(--font-mono);
    color: color-mix(in srgb, var(--text-muted) 84%, var(--code-accent));
  }
  .math-formula mjx-container {
    max-width: 100%;
    color: inherit;
    outline: none;
  }
  .math-display mjx-container[display=true] {
    min-width: max-content;
    margin: 0 !important;
    text-align: left !important;
  }
  .math-formula mjx-container[jax=SVG] > svg {
    overflow: visible;
  }
  .code-copy-btn {
    --qz-control-size: 24px;
    --qz-control-icon-size: 14px;
    --qz-control-border: color-mix(in srgb, var(--border) 58%, transparent);
    --qz-control-border-hover: color-mix(in srgb, var(--code-accent) 22%, var(--border));
    --qz-control-border-focus: var(--qz-control-border-hover);
    --qz-control-bg: color-mix(in srgb, var(--bg-primary) 80%, transparent);
    --qz-control-bg-hover: color-mix(in srgb, var(--bg-primary) 92%, var(--accent-subtle));
    position: absolute;
    top: 7px;
    right: 7px;
    width: 25px;
    opacity: 0.44;
    backdrop-filter: blur(8px);
  }
  .code-copy-btn svg {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .copyable-code-block:hover .code-copy-btn,
  .code-copy-btn:focus-visible {
    opacity: 0.94;
  }
  .code-copy-btn.is-confirmed {
    opacity: 1;
    color: var(--accent);
    border-color: color-mix(in srgb, var(--green) 42%, var(--border));
    background: color-mix(in srgb, var(--green) 9%, var(--bg-primary));
  }
  .copyable-code-block.copy-confirmed::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--block-radius);
    border: 1px solid color-mix(in srgb, var(--green) 44%, transparent);
    opacity: 0;
    animation: copy-confirm-flash 620ms var(--ease-emphasized) 1;
  }
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
  @keyframes tool-complete-dot-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 30%, transparent);
      transform: scale(1);
    }
    36% {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
      transform: scale(1.08);
    }
    100% {
      box-shadow: 0 0 0 7px transparent;
      transform: scale(1);
    }
  }
  @keyframes math-pending-breathe {
    0%, 100% {
      opacity: 0.72;
    }
    50% {
      opacity: 1;
    }
  }
  @keyframes copy-confirm-flash {
    0% {
      opacity: 0;
    }
    18% {
      opacity: 0.9;
    }
    100% {
      opacity: 0;
    }
  }
  .chat-dock {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-radius: 0;
  }
  .status-bar {
    background: transparent;
    font-size: 12px;
    color: var(--text-secondary);
    animation: panel-in var(--motion-base) var(--ease-emphasized);
  }
  .status-bar.hidden {
    display: none !important;
  }
  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-secondary);
    animation: pulse 1.2s infinite;
  }
  .context-usage {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
  }
  .msg-compact {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
    margin: 8px 0 14px;
  }
  .compact-node {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px 11px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-elevated) 62%, transparent);
    color: var(--text-secondary);
    overflow: hidden;
  }
  .compact-node-head {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }
  .compact-node-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: var(--green);
  }
  .compact-node[data-status=running] .compact-node-dot {
    background: var(--orange);
    animation: pulse 1.2s var(--ease-standard) infinite;
  }
  .compact-node[data-status=failed] .compact-node-dot,
  .compact-node[data-status=error] .compact-node-dot,
  .compact-node[data-status=aborted] .compact-node-dot {
    background: var(--red);
  }
  .compact-node-title {
    min-width: 0;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 620;
    line-height: 1.35;
  }
  .compact-node-meta {
    margin-left: auto;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.35;
    white-space: nowrap;
  }
  .compact-node-summary {
    margin-top: 6px;
    max-width: 100%;
    color: var(--text-muted);
    font-size: calc(12px * var(--chat-text-scale, 1));
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .compact-node-summary :is(p, li, blockquote, table, td, th, a, code) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .compact-node-summary p {
    margin: 0 0 6px;
  }
  .compact-node-summary p:last-child {
    margin-bottom: 0;
  }
  .compact-node-summary h1,
  .compact-node-summary h2,
  .compact-node-summary h3,
  .compact-node-summary h4 {
    margin: 8px 0 4px;
    color: color-mix(in srgb, var(--text-primary) 82%, var(--text-muted));
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 650;
    line-height: 1.35;
  }
  .compact-node-summary h1:first-child,
  .compact-node-summary h2:first-child,
  .compact-node-summary h3:first-child,
  .compact-node-summary h4:first-child {
    margin-top: 0;
  }
  .compact-node-summary ul,
  .compact-node-summary ol {
    margin: 4px 0 6px;
    padding-left: 17px;
  }
  .compact-node-summary li {
    margin: 2px 0;
  }
  .compact-node-summary code {
    border: 1px solid color-mix(in srgb, var(--code-border) 56%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--code-inline-bg) 72%, transparent);
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    padding: 1px 4px;
  }
  .compact-node-summary pre {
    max-width: 100%;
    margin: 6px 0;
    padding: 8px 10px;
    overflow-x: auto;
    border-radius: var(--block-radius);
    background: color-mix(in srgb, var(--block-fill) 78%, transparent);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.5;
  }
  .compact-node-summary .copyable-code-block {
    max-width: 100%;
    margin: 6px 0;
  }
  .compact-node-summary .copyable-code-block pre {
    margin: 0;
    padding: 8px 38px 8px 10px;
    max-height: min(38vh, 360px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .compact-node-summary pre code {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
  }
  .compact-node-summary blockquote {
    margin: 6px 0;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
    color: var(--text-secondary);
  }
  .compact-node-summary a {
    color: color-mix(in srgb, var(--accent) 78%, var(--text-secondary));
    text-decoration: none;
  }
  .compact-node-summary a:hover {
    text-decoration: underline;
  }
  .compact-node-summary table {
    width: 100%;
    margin: 6px 0;
    border-collapse: collapse;
    font-size: calc(11.5px * var(--chat-text-scale, 1));
  }
  .compact-node-summary th,
  .compact-node-summary td {
    padding: 5px 6px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    text-align: start;
  }
  .compact-node-summary th {
    color: color-mix(in srgb, var(--text-primary) 82%, var(--text-muted));
    font-weight: 620;
  }
  #input-area {
    background: transparent;
    border-radius: 0;
  }
  .input-composer-frame:has(.queued-followups:not(.hidden)) {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .input-composer-frame:has(.queued-followups:not(.hidden)):focus-within,
  .input-composer-frame:has(.queued-followups:not(.hidden)):has(.input-wrapper.is-file-dragover) {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 10%, transparent);
  }
  .queued-followups {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    margin: 0;
    padding: 7px 7px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    background: var(--bg-primary);
    transition: opacity 120ms var(--ease-standard), border-color 120ms var(--ease-standard);
  }
  .queued-followups.hidden {
    display: none;
  }
  .queued-followups.is-draining {
    min-height: var(--queued-followups-drain-height, 0px);
    opacity: 0;
    border-color: transparent;
    pointer-events: none;
  }
  .queued-followups.is-reserving {
    min-height: var(--queued-followups-drain-height, 0px);
  }
  .queued-followup {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 35px;
    max-height: 35px;
    padding: 4px 3px 4px 5px;
    border-radius: 6px;
    color: var(--text-secondary);
    overflow: hidden;
    transform-origin: center top;
    transition:
      background-color 150ms var(--ease-standard),
      color 150ms var(--ease-standard),
      opacity 150ms var(--ease-standard),
      transform 220ms var(--ease-standard);
  }
  .queued-followup.is-entering {
    animation: queued-followup-enter 180ms var(--ease-emphasized) both;
  }
  .queued-followup.is-sending {
    pointer-events: none;
    will-change: opacity;
    animation: queued-followup-send-out 120ms var(--ease-standard) forwards;
  }
  .queued-followup.is-sending .queued-followup-actions {
    opacity: 0;
  }
  .queued-followup.is-steering {
    background: color-mix(in srgb, var(--text-primary) 4.2%, var(--bg-primary));
    color: color-mix(in srgb, var(--text-primary) 76%, var(--text-secondary));
  }
  .queued-followup.is-steering:hover {
    background: color-mix(in srgb, var(--text-primary) 6.2%, var(--bg-primary));
  }
  .queued-followup.is-steering-request {
    opacity: 0.84;
  }
  .queued-followup:hover {
    background: color-mix(in srgb, var(--control-hover-fill) 76%, transparent);
  }
  .queued-followup-exit-ghost,
  .queued-followup-batch-exit-ghost {
    position: fixed;
    z-index: 1000;
    margin: 0;
    box-sizing: border-box;
    pointer-events: none;
    will-change: opacity;
    animation: queued-followup-ghost-out 120ms var(--ease-standard) forwards;
  }
  .queued-followup-exit-ghost {
    background: var(--bg-primary);
  }
  .queued-followup-batch-exit-row {
    position: absolute;
    margin: 0;
    box-sizing: border-box;
  }
  .queued-followup-exit-ghost .queued-followup-actions,
  .queued-followup-batch-exit-ghost .queued-followup-actions {
    opacity: 0;
  }
  .queued-followups.is-reordering .queued-followup:hover {
    background: transparent;
  }
  .queued-followup.is-dragging {
    opacity: 0.42;
  }
  .queued-followup::before,
  .queued-followup::after {
    content: "";
    position: absolute;
    left: 30px;
    right: 8px;
    height: 1px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 72%, var(--text-muted) 28%);
    opacity: 0;
    transition: none;
    pointer-events: none;
  }
  .queued-followup::before {
    top: -2px;
  }
  .queued-followup::after {
    bottom: -2px;
  }
  .queued-followup.is-drop-before::before,
  .queued-followup.is-drop-after::after {
    opacity: 1;
  }
  .queued-followup.is-drop-before {
    transform: none;
  }
  .queued-followup.is-drop-after {
    transform: none;
  }
  .queued-followup-drag {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: grab;
    user-select: none;
    -webkit-user-drag: element;
    transition: color 130ms var(--ease-standard);
  }
  .queued-followup-steering-mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-muted));
    user-select: none;
  }
  .queued-followup-drag svg,
  .queued-followup-steering-mark svg {
    width: 15px;
    height: 15px;
  }
  .queued-followup-drag svg {
    fill: currentColor;
  }
  .queued-followup-steering-mark svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
  }
  .queued-followup:hover .queued-followup-drag,
  .queued-followup.is-drop-before .queued-followup-drag,
  .queued-followup.is-drop-after .queued-followup-drag {
    color: var(--text-secondary);
  }
  .queued-followup-drag:active {
    cursor: grabbing;
  }
  .queued-followup-copy {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .queued-followup-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    line-height: 1.4;
  }
  .queued-followup-meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1;
  }
  .queued-followup.is-steering .queued-followup-meta {
    background: color-mix(in srgb, var(--text-primary) 4.5%, transparent);
    color: var(--text-muted);
  }
  .queued-followup-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    opacity: 0.46;
    transition: opacity 130ms var(--ease-standard);
  }
  .queued-followup:hover .queued-followup-actions,
  .queued-followup:focus-within .queued-followup-actions {
    opacity: 1;
  }
  .queued-followup-steering-state {
    flex: 0 0 auto;
    min-width: 50px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-inline-start: 17px;
  }
  .queued-followup-steer {
    --qz-control-height: 24px;
    --qz-control-padding: 6px;
    --qz-control-gap: 4px;
    --qz-control-border: transparent;
    --qz-control-border-hover: transparent;
    --qz-control-border-focus: transparent;
    --qz-control-bg: transparent;
    --qz-control-bg-hover: var(--control-hover-fill);
    --qz-control-bg-pressed: var(--control-active-fill);
    --qz-control-color: var(--text-muted);
    --qz-control-color-hover: var(--text-primary);
    flex: 0 0 auto;
    min-width: 50px;
    white-space: nowrap;
  }
  .queued-followup-steer svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }
  .queued-followup-delete {
    --qz-control-size: 24px;
    --qz-control-icon-size: 14px;
    --qz-control-color: color-mix(in srgb, var(--text-muted) 78%, transparent);
    --qz-control-color-hover: var(--text-secondary);
    --qz-control-border-hover: transparent;
    --qz-control-bg-hover: var(--control-hover-fill);
    --qz-control-bg-pressed: var(--control-active-fill);
    opacity: 0.72;
  }
  .queued-followup-delete svg {
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .queued-followup:hover .queued-followup-delete {
    opacity: 0.88;
  }
  .queued-followup-delete:hover,
  .queued-followup-delete:focus-visible {
    opacity: 1;
  }
  .goal-strip {
    display: block;
    margin: 0 2px 7px;
    padding: 0;
    background: transparent;
  }
  .goal-strip.hidden {
    display: none;
  }
  .goal-pill {
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary);
    transition: background-color var(--transition), color var(--transition);
  }
  .goal-pill:hover {
    background: color-mix(in srgb, var(--control-hover-fill) 58%, transparent);
  }
  .goal-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: color-mix(in srgb, var(--green) 72%, var(--text-secondary));
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.9;
  }
  .goal-pill.blocked .goal-icon {
    color: color-mix(in srgb, var(--red) 76%, var(--text-secondary));
  }
  .goal-pill.paused .goal-icon {
    color: color-mix(in srgb, var(--orange) 78%, var(--text-secondary));
  }
  .goal-pill.complete .goal-icon {
    color: var(--text-muted);
  }
  .goal-title-row {
    font-size: 13px;
    line-height: 1.35;
  }
  .goal-label {
    color: var(--text-muted);
    font-weight: 600;
  }
  .goal-title {
    color: var(--text-primary);
    font-weight: 620;
  }
  .goal-meta {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
  }
  .goal-clear-btn {
    border: none;
    --qz-control-color: var(--text-muted);
  }
  .input-wrapper {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 7px 10px;
    transition:
      border-color var(--transition),
      background-color var(--transition),
      box-shadow var(--transition);
  }
  .input-wrapper:focus-within,
  .input-wrapper.is-file-dragover {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 10%, transparent);
  }
  .input-wrapper.is-file-dragover {
    background: color-mix(in srgb, var(--bg-secondary) 72%, var(--bg-primary));
  }
  .input-composer-frame:has(.queued-followups:not(.hidden)) .input-wrapper {
    min-height: 45px;
    padding: 8px 9px 7px 11px;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .input-composer-frame:has(.queued-followups:not(.hidden)) .input-wrapper:focus-within,
  .input-composer-frame:has(.queued-followups:not(.hidden)) .input-wrapper.is-file-dragover {
    border-width: 0;
    box-shadow: none;
  }
  #input {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-sans);
    line-height: 1.5;
  }
  #input::placeholder {
    color: var(--text-muted);
  }
  .input-attachments {
    --input-attachment-size: 52px;
    --input-attachment-gap: 6px;
    --document-attachment-width: calc( var(--input-attachment-size) + var(--input-attachment-size) + var(--input-attachment-size) + var(--input-attachment-gap) + var(--input-attachment-gap) );
    display: flex;
    gap: var(--input-attachment-gap);
    padding: 8px 4px 0;
    flex-wrap: wrap;
  }
  .input-attachment {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
  }
  .input-attachment .qz-icon-btn {
    --qz-control-size: 18px;
    --qz-control-icon-size: 10px;
    --qz-control-border: var(--border);
    --qz-control-bg: var(--bg-secondary);
    position: absolute;
    top: 3px;
    right: 3px;
    border-radius: 50%;
  }
  .document-attachment-card {
    width: min(var(--document-attachment-width, 168px), 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-primary);
  }
  .document-attachment-type {
    border-right: 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.04em;
  }
  .document-attachment-name {
    font-size: 12px;
    font-weight: 550;
    line-height: 1.35;
  }
  .document-attachment-meta {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
  }
  .document-attachment-card.is-error .document-attachment-meta {
    color: var(--red);
  }
  .document-attachment-remove {
    --qz-control-size: 24px;
    --qz-control-icon-size: 10px;
    --qz-control-border: transparent;
    --qz-control-bg: transparent;
    --qz-control-color: var(--text-muted);
  }
  .input-slash-menu {
    --qz-menu-padding: 6px;
    --qz-popover-radius: var(--radius-md);
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    z-index: 120;
    max-height: min(320px, 44vh);
    overflow: auto;
    transform-origin: bottom;
    isolation: isolate;
  }
  .slash-filters {
    position: sticky;
    top: -6px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -6px -6px 0;
    padding: 6px 6px 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
    background: var(--popover-surface);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bg-primary) 72%, transparent);
  }
  .slash-filter-btn {
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.6;
    padding: 2px 8px;
    transition: var(--transition-surface);
  }
  .slash-filter-btn:hover,
  .slash-filter-btn.active {
    background: color-mix(in srgb, var(--accent-subtle) 82%, transparent);
    color: var(--text-secondary);
  }
  .slash-item {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .slash-item:first-child {
    border-top-color: transparent;
  }
  .slash-item:hover,
  .slash-item.active {
    background: color-mix(in srgb, var(--accent-subtle) 76%, transparent);
    transform: translateX(1px);
  }
  .slash-kind {
    min-width: 38px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
  }
  .slash-kind.data {
    color: var(--green);
  }
  .slash-kind.command {
    color: var(--accent);
  }
  .slash-main {
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  .slash-title,
  .slash-subtitle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .slash-title {
    font-size: 12px;
    font-weight: 600;
  }
  .slash-subtitle,
  .slash-meta,
  .slash-empty {
    color: var(--text-muted);
    font-size: 10px;
  }
  .slash-meta {
    white-space: nowrap;
  }
  .slash-empty {
    padding: 9px 8px;
  }
  .msg-images {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .msg-images img {
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: zoom-in;
  }
  .msg-documents {
    --document-attachment-width: 168px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .resource-ref-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 1px 5px;
    margin: 0 2px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
    color: var(--text-secondary);
    font-size: 0.86em;
    line-height: 1.35;
    vertical-align: baseline;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .resource-ref-pill.element {
    gap: 3px;
    border-color: color-mix(in srgb, var(--text-muted) 24%, var(--border));
    background: color-mix(in srgb, var(--bg-tertiary) 84%, transparent);
    white-space: nowrap;
  }
  .resource-ref-kind {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.86em;
  }
  .resource-ref-name {
    min-width: 0;
    color: var(--text-secondary);
  }
  .element-ref-selector {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-muted));
    font-family: var(--font-mono);
    font-size: 0.92em;
    white-space: nowrap;
  }
  .element-picker-btn {
    --qz-control-size: 30px;
    --qz-control-icon-size: 16px;
    flex: 0 0 30px;
  }
  .element-picker-btn svg {
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .element-picker-btn.is-active,
  .element-picker-btn[aria-pressed=true] {
    border-color: color-mix(in srgb, var(--border-focus) 54%, transparent);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 70%, transparent);
  }
  .send-btn {
    position: relative;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: var(--text-primary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--bg-primary);
    cursor: pointer;
    transition:
      background-color 180ms var(--ease-standard),
      color 160ms var(--ease-standard),
      box-shadow var(--transition),
      transform var(--transition);
    flex-shrink: 0;
  }
  .send-icon-stage {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }
  .send-vessel {
    position: absolute;
    inset: 0;
    display: block;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
  }
  .send-mark {
    position: absolute;
    display: block;
    backface-visibility: hidden;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center;
  }
  @media (prefers-color-scheme: dark) {
    .send-mark {
      width: 21px;
      height: 21px;
    }
  }
  .send-btn:disabled {
    background: var(--send-standby-bg);
    color: var(--send-standby-mark);
    cursor: not-allowed;
    transition:
      background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
      color 320ms cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow var(--transition),
      transform var(--transition);
  }
  .send-btn.is-departing:disabled {
    animation: send-button-disable 680ms linear both;
  }
  .send-btn.is-departing .send-vessel {
    will-change: transform;
    animation: send-vessel-depart 680ms linear both;
  }
  .send-btn.is-departing .send-mark {
    will-change: transform;
    animation: send-mark-depart 680ms linear both;
  }
  @keyframes send-vessel-depart {
    0% {
      transform: translate3d(0, 0, 0);
      animation-timing-function: cubic-bezier(0.45, 0.05, 0.75, 0.35);
    }
    38% {
      transform: translate3d(26px, -26px, 0);
    }
    38.01% {
      transform: translate3d(-26px, 26px, 0);
      animation-timing-function: cubic-bezier(0.08, 0.72, 0.2, 1);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes send-button-disable {
    0%, 38% {
      background-color: var(--text-primary);
      color: var(--bg-primary);
    }
    38.01% {
      background-color: var(--text-primary);
      color: var(--send-standby-mark);
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    90%, 100% {
      background-color: var(--send-standby-bg);
      color: var(--send-standby-mark);
    }
  }
  @keyframes send-mark-depart {
    0% {
      transform: translate3d(-50%, -50%, 0) rotate(0) scale(1);
    }
    38% {
      transform: translate3d(-50%, -50%, 0) rotate(-2.5deg) scale(0.94);
    }
    38.01% {
      transform: translate3d(-50%, -50%, 0) rotate(1.2deg) scale(0.94);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) rotate(0) scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .send-btn.is-departing .send-vessel,
    .send-btn.is-departing .send-mark {
      animation-duration: 1ms;
    }
  }
  .send-btn:not(:disabled):hover {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  .send-btn:not(:disabled):active {
    transform: translateY(0) scale(0.96);
  }
  .input-hint {
    font-size: 10px;
    line-height: 1.25;
    color: var(--text-muted);
    opacity: 0.6;
  }
  .input-hint kbd {
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
  }
  .input-hint > span:first-child {
    flex: 0 0 auto;
  }
  .settings-panel {
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .settings-panel.hidden {
    display: none;
  }
  .settings-backdrop {
    background: var(--modal-backdrop);
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .settings-content {
    width: min(100%, 560px);
    min-height: min(600px, calc(100% - 4px));
    max-height: calc(100% - 4px);
    background: var(--modal-card-surface);
    border: 1px solid var(--modal-card-border);
    border-radius: var(--radius-lg);
    padding: 12px 16px 12px;
    box-shadow: var(--modal-card-shadow);
    animation: drawer-up var(--motion-slow) var(--ease-emphasized);
  }
  .settings-header h3 {
    font-size: 15px;
    font-weight: 680;
  }
  .settings-tabs {
    container-type: inline-size;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 3px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--border) 62%, transparent) transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--control-track);
  }
  .settings-tab {
    min-height: 30px;
    max-inline-size: 100cqi;
    padding: 6px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font: 600 12px/1.2 var(--font-sans);
    transition: var(--transition-surface);
  }
  .settings-tab:hover,
  .settings-tab:focus-visible {
    background: var(--control-hover-fill);
    color: var(--text-primary);
  }
  .settings-tab:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .settings-tab.active {
    background: var(--control-active-fill);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--control-active-border), var(--shadow-sm);
  }
  .settings-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0;
    scrollbar-color: color-mix(in srgb, var(--border) 62%, transparent) transparent;
    scrollbar-width: thin;
  }
  .settings-body::-webkit-scrollbar {
    width: 4px;
  }
  .settings-body::-webkit-scrollbar-track {
    background: transparent;
  }
  .settings-body::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: color-mix(in srgb, var(--border) 62%, transparent);
  }
  .settings-tab-group {
    min-width: 0;
  }
  .settings-tab-group > .settings-section {
    flex: none;
    min-width: 0;
    overflow: visible;
  }
  .settings-tab-panel.hidden,
  .settings-section.hidden {
    display: none;
  }
  .settings-save-state {
    margin: 6px -16px -12px;
    padding: 9px 16px 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--modal-surface);
  }
  .settings-save-status {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: pre-line;
    word-break: break-word;
  }
  .settings-save-status::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-top: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 48%, transparent);
  }
  .settings-save-status[data-tone=dirty] {
    color: var(--text-secondary);
  }
  .settings-save-status[data-tone=dirty]::before {
    background: color-mix(in srgb, var(--text-secondary) 64%, transparent);
  }
  .settings-save-status[data-tone=saved] {
    color: var(--text-muted);
  }
  .settings-save-status[data-tone=saved]::before {
    background: color-mix(in srgb, var(--text-muted) 48%, transparent);
  }
  .settings-save-status[data-tone=error] {
    color: var(--red);
  }
  .settings-save-status[data-tone=error]::before {
    background: color-mix(in srgb, var(--red) 64%, transparent);
  }
  .settings-version-muted {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
  }
  .settings-save-state .qz-btn--primary {
    min-width: 112px;
    margin-top: 0;
    padding: 9px 14px;
  }
  .msg-thinking-group {
    margin-left: 0;
    align-self: flex-start;
    animation: none;
  }
  .msg-thinking-group.thinking-group-expanded {
    overflow: visible;
    border: 0;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-primary));
    box-shadow: 0 0 0 1px var(--border);
  }
  .thinking-group-summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-height: var(--lane-header-height);
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-meta-text-scale, 1));
    text-align: start;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .msg-thinking-group.thinking-group-expanded > .thinking-group-summary {
    width: 100%;
    max-width: 100%;
    min-height: var(--lane-header-height);
    padding: 0 9px;
    border: 0;
    border-bottom: 0;
    border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
    box-shadow: none;
    backdrop-filter: blur(10px);
    font-family: var(--font-sans);
  }
  .msg-thinking-group.thinking-group-expanded > .thinking-group-summary:hover,
  .msg-thinking-group.thinking-group-expanded > .thinking-group-summary:focus-visible {
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--accent-subtle));
  }
  .msg-thinking-group.thinking-group-expanded > .thinking-group-summary .thinking-group-preview {
    display: none;
  }
  .thinking-group-summary:hover,
  .thinking-group-summary:focus-visible {
    border-color: var(--border-focus);
    background: var(--accent-subtle);
    outline: none;
  }
  .thinking-group-title {
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: calc(11px * var(--chat-meta-text-scale, 1));
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
  }
  .thinking-group-preview {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: 100%;
    height: max(16px, 1.35em);
    overflow: hidden;
    color: var(--text-muted);
    font-size: calc(11.5px * var(--chat-meta-text-scale, 1));
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .thinking-group-preview-track {
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .thinking-group-preview-track::-webkit-scrollbar {
    display: none;
  }
  .thinking-group-preview-text {
    display: inline-block;
    min-width: max-content;
    transform: translateX(var(--thinking-preview-offset, 0px));
    white-space: nowrap;
  }
  .thinking-group-details {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px 9px;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 62%, var(--bg-primary));
    animation: panel-in var(--motion-base) var(--ease-emphasized);
  }
  .msg-thinking-group.thinking-group-expanded > .thinking-group-details {
    width: 100%;
    margin-top: 0;
    padding: 8px 10px 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    animation: none;
  }
  .thinking-group-slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
  }
  .thinking-group-slot-title {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
  }
  .thinking-group-slot-title b {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: calc(11.5px * var(--chat-text-scale, 1));
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .thinking-group-slot-title span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    white-space: nowrap;
  }
  .thinking-group-body {
    width: 100%;
    max-height: 220px;
    margin: 0;
    overflow-y: auto;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.62;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-gutter: stable;
  }
  .image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: var(--lightbox-backdrop);
    cursor: zoom-out;
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .image-lightbox img {
    max-width: min(100%, 1200px);
    max-height: 100%;
    object-fit: contain;
    border: 1px solid var(--lightbox-border);
    border-radius: var(--radius-sm);
    background: var(--lightbox-surface);
    box-shadow: var(--lightbox-shadow);
    cursor: default;
    animation: modal-card-in var(--motion-slow) var(--ease-emphasized);
  }
  .image-lightbox-close {
    --qz-control-size: 34px;
    --qz-control-border: var(--lightbox-border);
    --qz-control-border-hover: var(--lightbox-border);
    --qz-control-border-focus: var(--lightbox-border);
    --qz-control-bg: var(--lightbox-control-surface);
    --qz-control-bg-hover: var(--lightbox-control-surface-hover);
    --qz-control-bg-pressed: var(--lightbox-control-surface-hover);
    --qz-control-color: var(--lightbox-control-text);
    --qz-control-color-hover: var(--lightbox-control-text);
    position: fixed;
    top: 14px;
    right: 14px;
  }
  .msg-waiting {
    margin-bottom: 12px;
    animation: none;
  }
  .waiting-card {
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: var(--radius-md);
    transition:
      opacity var(--transition),
      border-color var(--transition),
      background-color var(--transition);
  }
  .waiting-card.resolved {
    opacity: 0.6;
    border-color: var(--success-border);
    background: var(--bg-secondary);
  }
  .waiting-card .qz-choice-card {
    --qz-choice-card-text-scale: var(--chat-text-scale, 1);
  }
  .waiting-pulse {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: color-mix(in srgb, var(--text-secondary) 58%, transparent);
    animation: waiting-scan 2s ease-in-out infinite;
  }
  .waiting-card.resolved .waiting-pulse {
    display: none;
  }
  @keyframes waiting-scan {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  .waiting-title {
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 600;
    color: var(--text-primary);
  }
  .waiting-message {
    font-size: calc(12px * var(--chat-text-scale, 1));
    color: var(--text-secondary);
    line-height: 1.5;
  }
  .waiting-field-label {
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    font-weight: 600;
  }
  .waiting-field-required {
    color: var(--red);
    margin-left: 3px;
  }
  .waiting-field-control {
    --qz-field-font-size: calc(12px * var(--chat-text-scale, 1));
    background-color: color-mix(in srgb, var(--field-surface) 82%, transparent);
  }
  textarea.waiting-field-control {
    min-height: 56px;
    resize: vertical;
    line-height: 1.45;
  }
  .waiting-field.invalid .waiting-field-control,
  .waiting-field.invalid .waiting-option {
    border-color: var(--red);
  }
  .waiting-field-help {
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .waiting-field-error {
    min-height: 14px;
    color: var(--red);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.4;
  }
  .waiting-field:not(.invalid) .waiting-field-error {
    display: none;
  }
  .waiting-option {
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    transition: var(--transition-surface);
  }
  .waiting-option:hover {
    border-color: var(--border-focus);
    background: var(--accent-subtle);
    transform: translateX(1px);
  }
  .waiting-option input {
    margin-top: 2px;
    width: 13px;
    height: 13px;
  }
  .waiting-option strong {
    display: block;
    color: var(--text-primary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    font-weight: 600;
  }
  .waiting-option small {
    display: block;
    margin-top: 1px;
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.4;
  }
  .waiting-hint {
    font-size: calc(10px * var(--chat-text-scale, 1));
    color: var(--text-muted);
  }
  .waiting-continue-btn {
    --qz-control-font-weight: 600;
  }
  .waiting-cancel-btn {
    --qz-control-padding: var(--control-padding-sm);
  }
  .tool-screenshot {
    position: relative;
    isolation: isolate;
    margin-top: 8px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    max-width: 320px;
  }
  .tool-image-preview {
    background-color: #f7f7f7;
    background-image:
      linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.055) 25%,
        transparent 25%),
      linear-gradient(
        -45deg,
        rgba(0, 0, 0, 0.055) 25%,
        transparent 25%),
      linear-gradient(
        45deg,
        transparent 75%,
        rgba(0, 0, 0, 0.055) 75%),
      linear-gradient(
        -45deg,
        transparent 75%,
        rgba(0, 0, 0, 0.055) 75%);
    background-position:
      0 0,
      0 8px,
      8px -8px,
      -8px 0;
    background-size: 16px 16px;
  }
  .tool-screenshot img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: opacity var(--transition);
  }
  .tool-screenshot img:hover {
    opacity: 0.85;
  }
  .tool-image-action-transition {
    --tool-image-action-cycle: 3200ms;
  }
  .tool-image-action-transition > .tool-image-action-before-layer {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    animation: tool-image-action-before-frame var(--tool-image-action-cycle) var(--ease-standard) infinite;
  }
  .tool-image-action-before-layer > .tool-image-action-before {
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    cursor: default;
  }
  .tool-image-action-transition > .tool-image-action-after {
    position: relative;
    z-index: 0;
  }
  .tool-image-action-overlay {
    --tool-image-action-cue: #607572;
    --tool-image-action-glow: rgba(96, 117, 114, 0.3);
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .tool-image-action-before-layer .tool-image-action-overlay {
    z-index: 1;
  }
  .tool-image-action-point {
    position: absolute;
    width: 0;
    height: 0;
  }
  .tool-image-action-point::before,
  .tool-image-action-point::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    pointer-events: none;
  }
  .tool-image-action-point::before {
    width: 26px;
    height: 26px;
    background:
      radial-gradient(
        circle,
        var(--tool-image-action-glow) 0%,
        color-mix(in srgb, var(--tool-image-action-glow) 56%, transparent) 38%,
        transparent 72%);
    filter: blur(2px);
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
  .tool-image-action-point::after {
    width: 22px;
    height: 22px;
    border: 1px solid color-mix(in srgb, var(--tool-image-action-cue) 54%, transparent);
    animation: tool-image-action-pulse 2600ms var(--ease-standard) infinite;
  }
  .tool-image-action-cursor {
    position: absolute;
    z-index: 1;
    left: -2px;
    top: -1.5px;
    width: 18px;
    height: 22px;
    overflow: visible;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    animation: tool-image-action-cursor-settle 260ms var(--ease-emphasized) both;
  }
  .tool-image-action-point-moving {
    animation: tool-image-action-travel 1800ms var(--ease-standard) infinite;
  }
  .tool-image-action-overlay:is([data-action=drag], [data-action=scroll]) .tool-image-action-point::after {
    display: none;
  }
  .tool-image-action-transition .tool-image-action-point-moving {
    animation: tool-image-action-transition-travel var(--tool-image-action-cycle) var(--ease-standard) infinite;
  }
  .tool-image-action-overlay[data-action=scroll] .tool-image-action-cursor {
    animation: none;
  }
  .tool-image-action-overlay[data-action=scroll] .tool-image-action-point {
    --tool-image-action-scroll-from-x: 0px;
    --tool-image-action-scroll-from-y: -4px;
    --tool-image-action-scroll-to-x: 0px;
    --tool-image-action-scroll-to-y: 5px;
    animation: tool-image-action-scroll-point 1500ms var(--ease-standard) infinite;
  }
  .tool-image-action-overlay[data-action=scroll][data-direction=up] .tool-image-action-point {
    --tool-image-action-scroll-from-y: 4px;
    --tool-image-action-scroll-to-y: -5px;
  }
  .tool-image-action-overlay[data-action=scroll][data-direction=left] .tool-image-action-point {
    --tool-image-action-scroll-from-x: 4px;
    --tool-image-action-scroll-from-y: 0px;
    --tool-image-action-scroll-to-x: -5px;
    --tool-image-action-scroll-to-y: 0px;
  }
  .tool-image-action-overlay[data-action=scroll][data-direction=right] .tool-image-action-point {
    --tool-image-action-scroll-from-x: -4px;
    --tool-image-action-scroll-from-y: 0px;
    --tool-image-action-scroll-to-x: 5px;
    --tool-image-action-scroll-to-y: 0px;
  }
  .tool-image-action-transition .tool-image-action-overlay[data-action=scroll] .tool-image-action-point {
    animation: tool-image-action-scroll-point-transition var(--tool-image-action-cycle) var(--ease-standard) infinite;
  }
  .tool-image-action-scroll-cue {
    position: absolute;
    left: 17px;
    top: 6px;
    width: 13px;
    height: 19px;
    color: var(--tool-image-action-cue);
    opacity: 0;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.72));
    animation: tool-image-action-scroll-cue 1500ms var(--ease-standard) infinite;
  }
  .tool-image-action-scroll-cue svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .tool-image-action-scroll-cue[data-direction=up] svg {
    transform: rotate(180deg);
  }
  .tool-image-action-scroll-cue[data-direction=left] svg {
    transform: rotate(90deg);
  }
  .tool-image-action-scroll-cue[data-direction=right] svg {
    transform: rotate(-90deg);
  }
  .tool-image-action-scroll-cue path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }
  .tool-image-action-transition .tool-image-action-scroll-cue {
    animation: tool-image-action-scroll-cue-transition var(--tool-image-action-cycle) var(--ease-standard) infinite;
  }
  .tool-image-action-cursor path {
    fill: #171919;
    stroke: rgba(255, 255, 255, 0.94);
    stroke-linejoin: round;
    stroke-width: 1.45;
    vector-effect: non-scaling-stroke;
  }
  .tool-image-action-transition .tool-image-action-point::after {
    animation: tool-image-action-transition-pulse var(--tool-image-action-cycle) var(--ease-standard) infinite;
  }
  @keyframes tool-image-action-before-frame {
    0%, 42% {
      opacity: 1;
    }
    54%, 90% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tool-image-action-transition-pulse {
    0%, 26% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.55);
    }
    31% {
      opacity: 0.52;
    }
    46%, 100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.65);
    }
  }
  @keyframes tool-image-action-pulse {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.55);
    }
    8% {
      opacity: 0.5;
    }
    34%, 100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.65);
    }
  }
  @keyframes tool-image-action-travel {
    0%, 10% {
      left: var(--tool-image-action-from-x);
      top: var(--tool-image-action-from-y);
      opacity: 0;
    }
    16% {
      left: var(--tool-image-action-from-x);
      top: var(--tool-image-action-from-y);
      opacity: 1;
    }
    56%, 72% {
      left: var(--tool-image-action-to-x);
      top: var(--tool-image-action-to-y);
      opacity: 1;
    }
    78%, 100% {
      left: var(--tool-image-action-to-x);
      top: var(--tool-image-action-to-y);
      opacity: 0;
    }
  }
  @keyframes tool-image-action-transition-travel {
    0%, 20% {
      left: var(--tool-image-action-from-x);
      top: var(--tool-image-action-from-y);
    }
    42%, 88% {
      left: var(--tool-image-action-to-x);
      top: var(--tool-image-action-to-y);
    }
    92%, 100% {
      left: var(--tool-image-action-from-x);
      top: var(--tool-image-action-from-y);
    }
  }
  @keyframes tool-image-action-scroll-cue {
    0% {
      opacity: 0;
    }
    24% {
      opacity: 0.9;
    }
    62%, 100% {
      opacity: 0;
    }
  }
  @keyframes tool-image-action-scroll-cue-transition {
    0%, 20% {
      opacity: 0;
    }
    28% {
      opacity: 0.9;
    }
    44%, 100% {
      opacity: 0;
    }
  }
  @keyframes tool-image-action-scroll-point {
    0%, 12% {
      transform: translate(var(--tool-image-action-scroll-from-x), var(--tool-image-action-scroll-from-y));
    }
    42%, 64% {
      transform: translate(var(--tool-image-action-scroll-to-x), var(--tool-image-action-scroll-to-y));
    }
    92%, 100% {
      transform: translate(var(--tool-image-action-scroll-from-x), var(--tool-image-action-scroll-from-y));
    }
  }
  @keyframes tool-image-action-scroll-point-transition {
    0%, 20% {
      transform: translate(var(--tool-image-action-scroll-from-x), var(--tool-image-action-scroll-from-y));
    }
    42%, 88% {
      transform: translate(var(--tool-image-action-scroll-to-x), var(--tool-image-action-scroll-to-y));
    }
    92%, 100% {
      transform: translate(var(--tool-image-action-scroll-from-x), var(--tool-image-action-scroll-from-y));
    }
  }
  @keyframes tool-image-action-cursor-settle {
    0% {
      opacity: 0.35;
      transform: translate(-1px, -1px) scale(0.94);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-color-scheme: dark) {
    .tool-image-action-overlay {
      --tool-image-action-cue: #a2b2af;
      --tool-image-action-glow: rgba(162, 178, 175, 0.28);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tool-image-action-point::after,
    .tool-image-action-cursor,
    .tool-image-action-point-moving,
    .tool-image-action-overlay[data-action=scroll] .tool-image-action-point,
    .tool-image-action-scroll-cue {
      animation: none;
    }
    .tool-image-action-scroll-cue {
      opacity: 0.78;
      transform: none;
    }
    .tool-image-action-point::after {
      opacity: 0.42;
      transform: translate(-50%, -50%) scale(1.05);
    }
    .tool-image-action-transition > .tool-image-action-before-layer {
      display: none;
    }
  }
  .hidden {
    display: none !important;
  }
  ::selection {
    background: var(--selection-bg);
  }
  .header-tabs {
    display: flex;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .header-tabs::-webkit-scrollbar {
    display: none;
  }
  .tab-btn {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .tab-btn:hover {
    background: color-mix(in srgb, var(--bg-elevated) 58%, transparent);
    color: var(--text-primary);
  }
  .tab-btn.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: none;
  }
  .tab-btn:active {
    background: color-mix(in srgb, var(--bg-elevated) 78%, var(--bg-primary));
  }
  @media (max-width: 420px) {
    #header {
      gap: 6px;
      padding: 10px 12px;
    }
    .header-actions {
      gap: 2px;
    }
    .header-tabs {
      gap: 1px;
    }
    .tab-btn {
      min-width: 38px;
      height: 28px;
      padding: 0 7px;
    }
  }
  @media (max-width: 340px) {
    #header {
      grid-template-columns: minmax(0, 1fr) max-content;
      row-gap: 6px;
    }
    .header-left {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    .header-actions {
      grid-column: 2;
      grid-row: 1;
    }
    .header-tabs {
      width: 100%;
    }
    .tab-btn {
      flex: 1 1 0;
    }
  }
  .tab-panel {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: panel-in var(--motion-base) var(--ease-emphasized);
  }
  button:disabled,
  button:disabled:hover,
  button:disabled:active {
    transform: none;
    box-shadow: none;
  }
  .user-selectable {
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
  }
  .msg-user .msg-content::selection,
  .msg-user .msg-content *::selection,
  textarea.msg-user-edit-input::selection {
    background: var(--user-bubble-selection-bg);
    color: var(--user-bubble-selection-text);
    -webkit-text-fill-color: var(--user-bubble-selection-text);
  }
  .msg-assistant .msg-content {
    user-select: text;
    -webkit-user-select: text;
  }
  .msg-assistant .msg-content::selection {
    background: var(--selection-bg);
  }
  .tool-details-get_ax_tree .tool-tree-body,
  .tool-timeline-slot-body.tool-details-get_ax_tree .tool-tree-body {
    max-height: min(38vh, 340px);
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-gutter: stable;
  }
  .tool-tree-panel > .tool-ax-actions-table {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .tool-ax-actions-table .tool-data-table-head {
    margin-bottom: 5px;
  }
  .tool-ax-actions-table .tool-data-table-wrap {
    max-height: min(24vh, 190px);
  }
  .tool-ax-actions-table .tool-data-table {
    font-size: calc(10.5px * var(--chat-text-scale, 1));
  }
  .tool-ax-actions-table .tool-data-table th,
  .tool-ax-actions-table .tool-data-table td {
    max-width: 180px;
    padding: 4px 6px;
  }
  .data-main {
    --data-panel-x: 12px;
    --data-control-gap: 8px;
    --data-action-width: 252px;
    --data-nav-action-width: max-content;
  }
  .data-table-nav {
    grid-template-columns: minmax(0, 1fr) var(--data-nav-action-width);
    gap: var(--data-control-gap);
    padding: 7px var(--data-panel-x) 8px;
    border-bottom: 0;
    background: var(--bg-primary);
  }
  .data-toolbar {
    width: max-content;
  }
  .data-toolbar .qz-btn {
    white-space: nowrap;
  }
  .data-table-actions-menu {
    --qz-menu-padding: 4px;
    z-index: 24;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    max-height: none;
    overflow: visible;
  }
  .data-table-menu-item {
    width: 100%;
    gap: 9px;
    font: inherit;
  }
  .data-table-menu-item svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .data-table-menu-separator {
    margin: 4px 6px;
    background: var(--border);
  }
  .data-table-menu-danger {
    color: var(--red);
  }
  .data-table-menu-danger:hover,
  .data-table-menu-danger:focus-visible {
    background: var(--danger-subtle);
    color: var(--red);
  }
  #data-table-search {
    width: 100%;
  }
  .data-tables-list {
    --qz-menu-padding: 4px;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 30;
    max-height: min(360px, 58vh);
    transform-origin: top;
  }
  .data-table-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    transition: var(--transition-surface);
  }
  .data-table-item:hover,
  .data-table-item.active {
    background: var(--control-hover-fill);
  }
  .data-table-select {
    min-width: 0;
    padding: 7px 4px 7px 9px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .data-table-name {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
  }
  .data-table-meta {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .data-table-delete {
    --qz-control-size: 24px;
    --qz-control-icon-size: 12px;
    margin-right: 3px;
    opacity: 0;
  }
  .data-table-item:hover .data-table-delete,
  .data-table-item.active .data-table-delete,
  .data-table-delete:focus-visible {
    opacity: 1;
  }
  .data-empty,
  .data-table-empty {
    color: var(--text-muted);
    font-size: 12px;
  }
  .data-table-empty {
    padding: 28px 16px;
  }
  .data-loading {
    display: flex;
    padding: 30px 16px;
  }
  .data-loading.hidden {
    display: none;
  }
  .data-loading-dots {
    height: 18px;
  }
  .data-loading-dots span {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 38%, transparent);
    animation: data-loading-dot 980ms ease-in-out infinite;
  }
  .data-loading-dots span:nth-child(2) {
    animation-delay: 120ms;
  }
  .data-loading-dots span:nth-child(3) {
    animation-delay: 240ms;
  }
  @keyframes data-loading-dot {
    0%, 80%, 100% {
      opacity: .34;
      transform: translateY(0) scale(.86);
    }
    40% {
      opacity: .86;
      transform: translateY(-3px) scale(1);
    }
  }
  .data-tables-list .data-table-empty {
    padding: 7px 10px;
    font-size: 11px;
  }
  .data-preview {
    overflow: auto;
    padding: 10px var(--data-panel-x) 18px;
  }
  .data-preview.grid-mode {
    overflow: hidden;
  }
  .data-table-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--data-action-width);
    gap: var(--data-control-gap);
    padding: 10px var(--data-panel-x);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 84%, var(--bg-primary));
  }
  .data-detail.image-collection {
    --data-action-width: 300px;
  }
  .data-detail.image-collection .data-table-controls {
    grid-template-columns: minmax(0, 1fr) var(--data-action-width);
  }
  .data-detail.image-collection .data-columns-control {
    justify-self: stretch;
  }
  .data-table-controls .qz-field {
    width: 100%;
    padding: 7px 10px;
    font-size: 12px;
  }
  .data-columns-control {
    justify-content: flex-end;
  }
  .data-grid-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .data-grid-actions.hidden {
    display: none;
  }
  .data-grid-action-strip {
    display: grid;
    grid-template-columns: 80px 94px 68px;
    gap: 2px;
    flex: 0 0 var(--data-action-width);
    width: var(--data-action-width);
    min-width: 0;
    padding: 2px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 78%, var(--bg-secondary));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  }
  .data-grid-action-strip .qz-btn {
    --qz-control-height: 28px;
    --qz-control-gap: 5px;
    --qz-control-padding: 8px;
    --qz-control-border: transparent;
    --qz-control-border-hover: transparent;
    --qz-control-border-focus: transparent;
    --qz-control-font-size: 11px;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: var(--qz-control-height);
    white-space: normal;
    line-height: 1.3;
    border-radius: calc(var(--radius-sm) - 2px);
  }
  .data-grid-action-strip .qz-btn [data-data-action-label] {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .data-grid-action-strip .qz-btn.subtle {
    width: 100%;
    color: var(--text-secondary);
  }
  .data-toolbar-icon {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    transition: color var(--transition-fast), opacity var(--transition-fast);
  }
  .data-toolbar-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .data-grid-action-strip .qz-btn:not(:disabled):hover .data-toolbar-icon,
  .data-grid-action-strip .qz-btn[aria-expanded=true] .data-toolbar-icon {
    color: currentColor;
  }
  .data-grid-action-strip .qz-btn[aria-expanded=true] {
    background: color-mix(in srgb, var(--bg-elevated) 76%, var(--bg-primary));
    color: var(--text-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 76%, transparent);
  }
  .data-grid-action-strip .qz-btn--danger {
    color: var(--text-muted);
  }
  .data-grid-action-strip .qz-btn--danger:not(:disabled) {
    color: var(--red);
  }
  .data-grid-action-strip .qz-btn--danger:not(:disabled):hover {
    background: var(--danger-subtle);
  }
  .data-grid-action-strip .qz-btn.hidden {
    display: none;
  }
  #btn-clear-data-filters {
    grid-column: 1 / -1;
  }
  .data-columns-menu {
    --qz-menu-padding: 8px;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    width: min(260px, 70vw);
    max-height: 320px;
    z-index: 20;
    transform-origin: top right;
  }
  .data-image-selection-actions {
    display: flex;
  }
  .data-image-selection-actions.hidden {
    display: none;
  }
  .data-image-selection-count {
    color: var(--text-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .data-image-action-strip {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr) minmax(0, 1.1fr);
  }
  .data-column-option {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 7px;
    padding: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    border-radius: var(--radius-sm);
    transition: var(--transition-surface);
    position: relative;
  }
  .data-column-option:hover {
    background: var(--accent-subtle);
    color: var(--text-primary);
    transform: translateX(1px);
  }
  .data-column-option.renaming {
    background: var(--control-hover-fill);
    transform: none;
  }
  .data-column-option.dragging {
    opacity: 0.55;
  }
  .data-column-option.drop-before::before,
  .data-column-option.drop-after::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    border-radius: 999px;
    background: var(--text-muted);
    opacity: 0.42;
  }
  .data-column-option.drop-before::before {
    top: -1px;
  }
  .data-column-option.drop-after::after {
    bottom: -1px;
  }
  .data-column-drag-handle {
    width: 16px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    cursor: grab;
    border-radius: var(--radius-sm);
  }
  .data-column-drag-handle svg {
    width: 12px;
    height: 16px;
    display: block;
    pointer-events: none;
  }
  .data-column-drag-handle:hover {
    color: var(--text-muted);
    background: var(--control-hover-fill);
  }
  .data-column-drag-handle:active {
    cursor: grabbing;
  }
  .data-column-drag-handle.disabled {
    opacity: 0;
    pointer-events: none;
  }
  .data-column-visible-toggle {
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .data-column-visible-toggle input {
    flex: 0 0 auto;
  }
  .data-column-option-name {
    min-width: 0;
    flex: 1 1 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
  }
  .data-column-option-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .data-column-option-type {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 450;
  }
  .data-column-rename-input {
    --qz-field-height: 24px;
    --qz-field-font-size: 12px;
    min-width: 0;
    flex: 1 1 0;
    width: auto;
    height: 24px;
    line-height: 1;
    padding: 0 7px;
  }
  .data-column-option-actions {
    margin-left: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  .data-column-option:hover .data-column-option-actions,
  .data-column-option:has(:focus-visible) .data-column-option-actions {
    opacity: 1;
    pointer-events: auto;
  }
  .data-column-option.renaming .data-column-option-actions {
    opacity: 1;
    pointer-events: auto;
  }
  .data-column-add-btn {
    --qz-control-border: color-mix(in srgb, var(--border) 86%, transparent);
    --qz-control-border-hover: color-mix(in srgb, var(--text-muted) 36%, var(--border));
    --qz-control-border-focus: var(--qz-control-border-hover);
    width: 100%;
    margin-top: 6px;
    border-style: dashed;
  }
  .data-column-add-btn span[aria-hidden=true] {
    color: var(--text-faint);
    font-size: 16px;
    line-height: 1;
    transform: translateY(-0.5px);
  }
  .data-column-option-actions .qz-icon-btn {
    --qz-control-size: 22px;
    --qz-control-icon-size: 14px;
  }
  .data-column-option-actions button svg {
    display: block;
    pointer-events: none;
  }
  .data-grid-shell {
    --data-grid-surface: var(--bg-primary);
    --data-grid-selection-accent: var(--green);
    --data-grid-header-surface: color-mix(in srgb, var(--bg-elevated) 32%, var(--bg-primary));
    --data-grid-header-hover: color-mix(in srgb, var(--bg-elevated) 58%, var(--bg-primary));
    --data-grid-border: color-mix(in srgb, var(--border) 70%, transparent);
    --data-grid-line: color-mix(in srgb, var(--border) 24%, transparent);
    --data-grid-row-line: color-mix(in srgb, var(--border) 34%, transparent);
    --data-grid-row-hover: color-mix(in srgb, var(--bg-elevated) 48%, var(--bg-primary));
    --data-grid-row-checked: color-mix(in srgb, var(--accent) 3%, var(--bg-primary));
    --data-grid-selection-fill: color-mix(in srgb, var(--data-grid-selection-accent) 7%, transparent);
    --data-grid-selection-line: color-mix(in srgb, var(--data-grid-selection-accent) 56%, var(--text-muted));
    --data-grid-edit-fill: color-mix(in srgb, var(--data-grid-selection-accent) 3%, var(--bg-primary));
    --data-grid-checkbox-border: var(--choice-border);
    --data-grid-checkbox-fill: var(--accent);
    --data-grid-checkmark: #ffffff;
    --data-grid-popover-shadow: 0 14px 30px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
  }
  @media (prefers-color-scheme: dark) {
    .data-grid-shell {
      --data-grid-header-surface: color-mix(in srgb, var(--bg-elevated) 48%, var(--bg-primary));
      --data-grid-header-hover: color-mix(in srgb, var(--bg-elevated) 76%, var(--bg-primary));
      --data-grid-border: color-mix(in srgb, var(--border) 78%, transparent);
      --data-grid-line: color-mix(in srgb, var(--border) 24%, transparent);
      --data-grid-row-line: color-mix(in srgb, var(--border) 30%, transparent);
      --data-grid-row-hover: color-mix(in srgb, #ffffff 3.5%, var(--bg-primary));
      --data-grid-row-checked: color-mix(in srgb, var(--accent) 5%, var(--bg-primary));
      --data-grid-selection-fill: color-mix(in srgb, var(--data-grid-selection-accent) 11%, transparent);
      --data-grid-selection-line: color-mix(in srgb, var(--data-grid-selection-accent) 62%, var(--text-secondary));
      --data-grid-edit-fill: color-mix(in srgb, var(--data-grid-selection-accent) 7%, var(--bg-primary));
      --data-grid-checkbox-fill: var(--accent);
      --data-grid-checkmark: #181818;
      --data-grid-popover-shadow: 0 18px 34px rgba(0, 0, 0, 0.36), 0 2px 10px rgba(0, 0, 0, 0.24);
    }
  }
  .data-grid-table {
    flex: 1;
    min-height: 220px;
    border: 1px solid var(--data-grid-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--data-grid-surface);
    outline: none;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 78%, transparent);
  }
  .data-grid-table:focus-visible {
    border-color: color-mix(in srgb, var(--border-focus) 58%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 7%, transparent);
  }
  .data-grid-table.tabulator {
    border-color: var(--data-grid-border);
    background: var(--data-grid-surface);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.45;
  }
  .data-grid-table .tabulator-header {
    border-bottom-color: var(--data-grid-border);
    background: var(--data-grid-header-surface);
    color: var(--text-secondary);
  }
  .data-grid-table .tabulator-col,
  .data-grid-table .tabulator-header .tabulator-col {
    position: relative;
    min-height: 32px;
    border-right-color: var(--data-grid-line);
    background: var(--data-grid-header-surface);
  }
  .data-grid-table .tabulator-header .tabulator-col.tabulator-range-highlight,
  .data-grid-table .tabulator-header .tabulator-col.tabulator-range-selected {
    background: var(--data-grid-header-surface) !important;
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary)) !important;
  }
  .data-grid-table .tabulator-header .tabulator-col .tabulator-col-content {
    padding: 7px 8px;
  }
  .data-grid-table .tabulator-col-title {
    min-width: 0;
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-primary));
    font-weight: 560;
    letter-spacing: 0;
  }
  .data-grid-table .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
    padding-right: 0;
  }
  .data-grid-table .tabulator-header .tabulator-col .tabulator-col-sorter {
    width: 0 !important;
    display: none !important;
    visibility: hidden !important;
  }
  .data-grid-table .tabulator-header .tabulator-col .tabulator-col-sorter * {
    display: none !important;
  }
  @media (hover: hover) and (pointer: fine) {
    .data-grid-table .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
      background: var(--data-grid-header-hover);
    }
  }
  .data-grid-column-title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    color: inherit;
  }
  .data-grid-column-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-grid-column-sort-indicator {
    width: 8px;
    height: 14px;
    flex: 0 0 8px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 650;
    line-height: 1;
    opacity: 0;
  }
  .data-grid-table .tabulator-header .tabulator-col[aria-sort=ascending] .data-grid-column-sort-indicator,
  .data-grid-table .tabulator-header .tabulator-col[aria-sort=descending] .data-grid-column-sort-indicator {
    display: inline-flex;
    color: var(--text-muted);
    opacity: 1;
  }
  .data-grid-table .tabulator-header .tabulator-col[aria-sort=ascending] .data-grid-column-sort-indicator::before {
    content: "\2191";
  }
  .data-grid-table .tabulator-header .tabulator-col[aria-sort=descending] .data-grid-column-sort-indicator::before {
    content: "\2193";
  }
  .data-grid-column-filter-btn {
    --qz-control-size: 14px;
    --qz-control-icon-size: 9px;
    flex: 0 0 auto;
    border-radius: 2px;
    opacity: 0;
  }
  .data-grid-filter-mark {
    width: 9px;
    height: 8px;
    display: block;
    background:
      linear-gradient(currentColor, currentColor) 1px 1px / 7px 1px no-repeat,
      linear-gradient(currentColor, currentColor) 2px 4px / 5px 1px no-repeat,
      linear-gradient(currentColor, currentColor) 3px 7px / 3px 1px no-repeat;
    border-radius: var(--radius-pill);
  }
  .data-grid-table .tabulator-col:hover .data-grid-column-filter-btn,
  .data-grid-table .tabulator-col:focus-within .data-grid-column-filter-btn,
  .data-grid-column-filter-btn.active {
    opacity: 1;
  }
  .data-grid-column-filter-btn.active {
    background: var(--control-hover-fill);
    color: var(--text-primary);
  }
  .data-grid-table .tabulator-col.data-grid-col-filtered {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 3%, var(--data-grid-header-surface));
  }
  .data-grid-filter-popover {
    --qz-popover-border: var(--data-grid-border);
    --qz-popover-surface: color-mix(in srgb, var(--popover-surface) 96%, var(--bg-primary));
    --qz-popover-shadow: var(--data-grid-popover-shadow);
    --qz-popover-motion: var(--motion-fast);
    position: absolute;
    z-index: 25;
    width: 252px;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
    padding: 10px;
  }
  .data-grid-filter-popover,
  .data-grid-filter-popover *,
  .data-grid-filter-popover *::before,
  .data-grid-filter-popover *::after {
    box-sizing: border-box;
  }
  .data-grid-filter-popover.hidden {
    display: none;
  }
  .data-grid-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
  }
  .data-grid-filter-head span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-grid-filter-head .qz-icon-btn,
  .data-grid-filter-actions .qz-btn {
    --qz-control-height: 24px;
    font: inherit;
    font-size: 11px;
  }
  .data-grid-filter-head .qz-icon-btn {
    --qz-control-size: 24px;
    font-size: 17px;
  }
  .data-grid-filter-summary {
    margin: 0 0 8px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-grid-filter-sort-type {
    color: var(--text-faint);
  }
  .data-grid-filter-custom input {
    max-width: 100%;
    height: 32px;
    display: block;
    padding: 0 9px;
  }
  .data-grid-filter-popover input::placeholder {
    color: var(--text-faint);
  }
  .data-grid-filter-options {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border) 48%, transparent);
  }
  .data-grid-filter-options.hidden {
    display: none;
  }
  .data-grid-filter-options-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
  }
  .data-grid-filter-options-head span:first-child {
    color: var(--text-secondary);
    font-weight: 600;
  }
  .data-grid-filter-option-list {
    display: grid;
    gap: 2px;
    max-height: 172px;
    overflow: auto;
    padding-right: 2px;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 32%, transparent) transparent;
    scrollbar-width: thin;
  }
  .data-grid-filter-option {
    --choice-size-md: 14px;
    min-width: 0;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.25;
  }
  .data-grid-filter-option:hover,
  .data-grid-filter-option:has(input:focus-visible) {
    background: var(--control-hover-fill);
  }
  .data-grid-filter-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-grid-filter-option-count {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
  }
  .data-grid-filter-option-empty,
  .data-grid-filter-option-more {
    padding: 5px 4px 2px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
  }
  .data-grid-filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .data-grid-table .tabulator-tableholder {
    background: var(--data-grid-surface);
    scrollbar-color: color-mix(in srgb, var(--text-muted) 36%, transparent) transparent;
    scrollbar-width: thin;
  }
  .data-grid-table .tabulator-tableholder::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .data-grid-table .tabulator-tableholder::-webkit-scrollbar-track {
    background: transparent;
  }
  .data-grid-table .tabulator-tableholder::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 34%, transparent) padding-box;
  }
  .data-grid-table .tabulator-tableholder::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 48%, transparent) padding-box;
  }
  .data-grid-table .tabulator-tableholder .tabulator-table {
    background: var(--data-grid-surface);
    color: var(--text-primary);
  }
  .data-grid-table .tabulator-row {
    min-height: 30px;
    border-bottom-color: var(--data-grid-row-line);
    background: var(--data-grid-surface);
    color: var(--text-primary);
  }
  .data-grid-table .tabulator-row.tabulator-row-even {
    background: var(--data-grid-surface);
  }
  .data-grid-table .tabulator-row.tabulator-selected,
  .data-grid-table .tabulator-row.tabulator-selected:hover {
    background: var(--data-grid-row-checked);
  }
  .data-grid-table .tabulator-row.data-grid-row-checked,
  .data-grid-table .tabulator-row.data-grid-row-checked:hover {
    background: var(--data-grid-row-checked);
  }
  .data-grid-table .tabulator-row:hover {
    background: var(--data-grid-row-hover);
  }
  .data-grid-table .tabulator-cell {
    position: relative;
    min-height: 30px;
    border-right-color: var(--data-grid-line);
    color: var(--text-primary);
    font-family: var(--font-sans);
    padding: 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-grid-table .tabulator-header .tabulator-col:last-child,
  .data-grid-table .tabulator-header .tabulator-col:last-of-type,
  .data-grid-table .tabulator-row .tabulator-cell:last-child,
  .data-grid-table .tabulator-row .tabulator-cell:last-of-type {
    border-right-color: transparent;
  }
  .data-grid-table .tabulator-cell.data-grid-system-cell {
    color: var(--text-muted);
  }
  .data-grid-table .tabulator-cell.tabulator-editing {
    border: 0 !important;
    border-right: 1px solid var(--data-grid-line) !important;
    background: var(--data-grid-edit-fill);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--data-grid-selection-accent) 24%, transparent);
    padding: 6px 8px !important;
  }
  .data-grid-table .tabulator-cell.tabulator-editing input,
  .data-grid-table .tabulator-cell.tabulator-editing select,
  .data-grid-table .tabulator-cell.tabulator-editing textarea {
    width: 100%;
    min-height: 17px;
    margin: 0;
    border: 0 !important;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    line-height: inherit;
    outline: none;
    padding: 0;
    user-select: text;
    -webkit-user-select: text;
    vertical-align: top;
  }
  .data-grid-table .tabulator-cell.data-grid-cell-save-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 2px;
    animation: data-grid-cell-save-pulse 560ms var(--ease-standard) 1;
  }
  @keyframes data-grid-cell-save-pulse {
    0% {
      background: color-mix(in srgb, var(--data-grid-selection-accent) 3%, transparent);
    }
    12% {
      background: color-mix(in srgb, var(--data-grid-selection-accent) 8%, transparent);
    }
    34% {
      background: color-mix(in srgb, var(--data-grid-selection-accent) 6%, transparent);
    }
    100% {
      background: transparent;
    }
  }
  .data-grid-table .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header),
  .data-grid-table .tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header {
    background: var(--data-grid-selection-fill) !important;
  }
  .data-grid-table .tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,
  .data-grid-table .tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header {
    background: color-mix(in srgb, var(--data-grid-selection-accent) 9%, var(--data-grid-header-surface)) !important;
    color: var(--text-primary) !important;
  }
  .data-grid-table.is-empty-view .tabulator-header .tabulator-col.tabulator-range-highlight,
  .data-grid-table.is-empty-view .tabulator-header .tabulator-col.tabulator-range-selected,
  .data-grid-table.is-empty-view .tabulator-cell.tabulator-range-selected,
  .data-grid-table.is-empty-view .tabulator-row.tabulator-range-highlight .tabulator-cell {
    background: transparent !important;
  }
  .data-grid-table .tabulator-tableholder .tabulator-range-overlay {
    overflow: visible;
    z-index: 18;
  }
  .data-grid-table.is-empty-view .tabulator-tableholder .tabulator-range-overlay,
  .data-grid-table.is-empty-view .tabulator-range,
  .data-grid-table.is-empty-view .tabulator-range-cell-active {
    visibility: hidden !important;
  }
  .data-grid-table.is-sorting:not(.is-empty-view) .tabulator-tableholder .tabulator-range-overlay {
    visibility: visible !important;
  }
  .data-grid-table .tabulator-range,
  .data-grid-table .tabulator-range-cell-active {
    border: 0 !important;
    box-sizing: border-box;
  }
  .data-grid-table.is-sorting .tabulator-range,
  .data-grid-table.is-sorting .tabulator-range-cell-active,
  .data-grid-table.is-sorting .tabulator-cell.tabulator-range-selected,
  .data-grid-table.is-sorting .tabulator-row.tabulator-range-highlight .tabulator-cell {
    transition: none !important;
  }
  .data-grid-table .tabulator-tableholder .tabulator-range-overlay .tabulator-range {
    border: 0 !important;
    box-shadow: inset 0 0 0 1px var(--data-grid-selection-line);
  }
  .data-grid-table .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active::after {
    background: var(--data-grid-selection-line) !important;
    box-shadow: 0 0 0 2px var(--data-grid-surface);
  }
  .data-grid-table .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active {
    border: 0 !important;
    box-shadow: inset 0 0 0 2px var(--data-grid-selection-line);
  }
  .data-grid-table.copy-confirmed .tabulator-tableholder .tabulator-range-overlay .tabulator-range {
    animation: data-grid-copy-confirm-line 620ms var(--ease-emphasized) 1;
  }
  .data-grid-table.copy-confirmed.copy-single-cell .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active {
    animation: data-grid-copy-confirm-cell-line 620ms var(--ease-emphasized) 1;
  }
  @keyframes data-grid-copy-confirm-line {
    0% {
      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--data-grid-selection-accent) 46%, var(--data-grid-selection-line));
    }
    100% {
      box-shadow: inset 0 0 0 1px var(--data-grid-selection-line);
    }
  }
  @keyframes data-grid-copy-confirm-cell-line {
    0% {
      box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--data-grid-selection-accent) 46%, var(--data-grid-selection-line));
    }
    100% {
      box-shadow: inset 0 0 0 2px var(--data-grid-selection-line);
    }
  }
  .data-grid-table .data-grid-row-check,
  .data-grid-table .data-grid-row-check-all {
    --choice-size-md: 12px;
    --qz-choice-border: var(--data-grid-checkbox-border);
    --qz-choice-surface: var(--data-grid-surface);
    --qz-choice-checked-surface: var(--data-grid-checkbox-fill);
    --qz-choice-mark: var(--data-grid-checkmark);
    flex: 0 0 12px;
    box-shadow: none;
    line-height: 0;
  }
  .data-grid-table .tabulator-cell.tabulator-row-header,
  .data-grid-table .tabulator-header .tabulator-col.tabulator-row-header {
    background: var(--data-grid-header-surface);
    border-right-color: var(--data-grid-line);
  }
  .data-grid-table .tabulator-col-resize-handle {
    background: transparent !important;
  }
  .data-grid-table .tabulator-col-resize-guide {
    width: 1px;
    background: color-mix(in srgb, var(--text-muted) 44%, var(--border-focus));
    opacity: 0.36;
  }
  .data-grid-table .tabulator-cell.tabulator-row-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    line-height: 0;
  }
  .data-grid-table .tabulator-header .tabulator-col.tabulator-row-header .tabulator-col-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .data-grid-table .tabulator-placeholder {
    color: var(--text-muted);
  }
  .data-grid-cell-empty {
    color: var(--text-muted);
  }
  .data-grid-cell-content {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  .data-grid-cell-content.has-action {
    cursor: pointer;
  }
  .data-grid-cell-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabulator-popup-container {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
  }
  .tabulator-popup.tabulator-menu {
    padding: 4px;
  }
  .tabulator-menu .tabulator-menu-item {
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.4;
    padding: 6px 9px;
  }
  .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--control-hover-fill);
  }
  .tabulator-menu .tabulator-menu-separator {
    border-top-color: var(--border);
    margin: 4px 0;
  }
  @media (max-width: 720px) {
    .data-main {
      --data-panel-x: 10px;
      --data-control-gap: 6px;
      --data-action-width: 240px;
    }
    .data-table-controls {
      padding: 8px 10px;
    }
    .data-detail.image-collection .data-table-controls {
      grid-template-columns: minmax(0, 1fr) var(--data-action-width);
    }
    .data-columns-control,
    .data-grid-actions {
      justify-content: flex-end;
      flex-wrap: nowrap;
    }
    .data-grid-actions {
      gap: 4px;
    }
    .data-grid-action-strip {
      grid-template-columns: 76px 92px 64px;
      gap: 2px;
      padding: 1px;
    }
    .data-image-action-strip {
      grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr) minmax(0, 1.1fr);
    }
    .data-grid-action-strip .qz-btn {
      gap: 4px;
      padding: 0 6px;
    }
    .data-toolbar-icon,
    .data-toolbar-icon svg {
      width: 12px;
      height: 12px;
    }
  }
  @media (max-width: 520px) {
    .data-table-controls,
    .data-detail.image-collection .data-table-controls {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
    }
    .data-table-nav {
      grid-template-columns: minmax(0, 1fr) max-content;
    }
    .data-create-label {
      display: none;
    }
    #btn-import-data {
      --qz-control-padding: 9px;
    }
    .data-grid-actions,
    .data-columns-control {
      justify-content: stretch;
    }
    .data-grid-action-strip {
      width: 100%;
      flex-basis: auto;
      grid-template-columns: minmax(74px, 1fr) minmax(90px, 1.15fr) minmax(66px, .9fr);
    }
    .data-image-action-strip {
      grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr) minmax(0, 1.1fr);
    }
  }
  .data-search-hit {
    padding: 0 1px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--orange) 22%, transparent);
    color: var(--text-primary);
  }
  .data-preview-meta {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 10px;
    text-align: right;
  }
  .data-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    align-items: start;
  }
  .data-image-card {
    min-width: 0;
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: start;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .data-image-card:hover,
  .data-image-card:focus-within {
    border-color: var(--border-focus);
    background: var(--bg-elevated);
    transform: translateY(-1px);
    outline: none;
  }
  .data-image-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .data-image-card.failed {
    border-color: color-mix(in srgb, var(--red) 22%, var(--border));
  }
  .data-image-open {
    width: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .data-image-open:focus-visible {
    outline: none;
  }
  .data-image-select-toggle {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    color: transparent;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-surface);
  }
  .data-image-card:hover .data-image-select-toggle,
  .data-image-card:focus-within .data-image-select-toggle,
  .data-image-card.selected .data-image-select-toggle {
    opacity: 1;
  }
  .data-image-select-toggle:hover,
  .data-image-select-toggle:focus-visible {
    border-color: var(--border-focus);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    outline: none;
  }
  .data-image-select-toggle[aria-pressed=true] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg-primary);
    opacity: 1;
  }
  .data-image-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 10px;
    overflow: hidden;
  }
  .data-image-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  .data-image-thumb-loading,
  .data-image-thumb-empty {
    padding: 8px;
    color: var(--text-muted);
    font-size: 10px;
  }
  .data-image-gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--modal-backdrop);
  }
  .data-image-gallery {
    position: relative;
    width: min(1120px, 100%);
    height: min(760px, calc(100vh - 36px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
    grid-template-rows: minmax(0, 1fr) 92px;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--modal-card-border);
    border-radius: var(--radius-lg);
    background: var(--modal-card-surface);
    box-shadow: var(--modal-card-shadow);
  }
  .data-image-gallery-close {
    --qz-control-size: 28px;
    --qz-control-icon-size: 16px;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
  }
  .data-image-gallery-close svg {
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .data-image-gallery-main {
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0 38px;
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    overflow: hidden;
  }
  .data-image-gallery-stage {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .data-image-gallery-stage img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
  }
  .data-image-gallery-loading,
  .data-image-gallery-empty {
    color: var(--text-muted);
    font-size: 12px;
  }
  .data-image-gallery-nav {
    --qz-control-size: 30px;
    --qz-control-icon-size: 17px;
    position: absolute;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
  }
  .data-image-gallery-nav.prev {
    left: 4px;
  }
  .data-image-gallery-nav.next {
    right: 4px;
  }
  .data-image-gallery-nav svg {
    stroke: currentColor;
  }
  .data-image-gallery-meta {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 4px 0 4px 2px;
  }
  .data-image-gallery-meta-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: start;
    margin-bottom: 6px;
  }
  .data-image-gallery-meta-title {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 620;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .data-image-gallery-meta-count {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
  }
  .data-image-gallery-meta-list {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: 4px 8px;
    align-items: start;
  }
  .data-image-gallery-meta-row {
    display: contents;
  }
  .data-image-gallery-meta-row span {
    min-width: 54px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .data-image-gallery-meta-row b {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 450;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .data-image-gallery-meta-row a {
    color: var(--accent);
    text-decoration: none;
  }
  .data-image-gallery-meta-row a:hover {
    text-decoration: underline;
  }
  .data-image-gallery-strip {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 2px;
    scrollbar-gutter: stable;
  }
  .data-image-gallery-thumb {
    flex: 0 0 72px;
    width: 72px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    overflow: hidden;
    cursor: pointer;
  }
  .data-image-gallery-thumb.active {
    border-color: var(--accent);
  }
  .data-image-gallery-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  @media (max-width: 760px) {
    .data-image-gallery {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto 82px;
    }
    .data-image-gallery-main {
      padding: 0 30px;
    }
  }
  .data-import-panel {
    inset: 0;
    z-index: 80;
    padding: 18px;
    background: var(--modal-backdrop);
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .data-import-card {
    width: min(620px, 100%);
    max-height: min(720px, calc(100vh - 36px));
    border: 1px solid var(--modal-card-border);
    border-radius: var(--radius-lg);
    background: var(--modal-card-surface);
    box-shadow: var(--modal-card-shadow);
    animation: modal-card-in var(--motion-slow) var(--ease-emphasized);
  }
  .data-import-header {
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: start;
    padding: 16px 18px 13px;
    border-bottom: 0;
    background: transparent;
  }
  .data-import-header h3 {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--text-primary);
  }
  .data-import-header p,
  .data-import-grid > label > span,
  .data-import-file > .data-import-label,
  .data-import-text > span,
  .data-import-status {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
  }
  .data-import-body {
    padding: 14px;
    background: transparent;
  }
  .data-import-grid {
    display: grid;
    gap: 10px;
  }
  .data-import-grid > label,
  .data-import-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .data-import-file-trigger {
    height: 32px;
    flex: 0 0 auto;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-tertiary));
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .data-import-file-trigger svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .data-import-file-trigger:hover {
    border-color: color-mix(in srgb, var(--border-focus) 50%, var(--border));
    background: var(--control-hover-fill);
    color: var(--text-primary);
  }
  .data-import-file-trigger:focus-visible {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--accent-subtle);
  }
  .data-import-file-trigger:active {
    transform: scale(0.98);
  }
  .data-import-file-name {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    text-overflow: ellipsis;
  }
  .data-import-file-name.has-file {
    color: var(--text-secondary);
  }
  .data-import-text textarea {
    min-height: 150px;
    resize: vertical;
    padding: 10px;
    font-size: 12px;
    line-height: 1.55;
  }
  .data-import-actions .qz-btn--primary,
  .data-import-actions .qz-btn {
    margin-top: 0;
    padding: 8px 12px;
    font-size: 12px;
  }
  .data-import-status.error {
    color: var(--red);
  }
  .data-download-import {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .data-download-import:hover {
    border-color: var(--border-focus);
    background: var(--accent-subtle);
    transform: translateX(1px);
  }
  .data-download-import span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .data-download-import small {
    color: var(--text-muted);
  }
  .data-row-detail {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    max-height: 44vh;
    display: flex;
    border-top: 1px solid var(--border);
    background: var(--modal-surface);
    box-shadow: var(--shadow-lg);
    animation: drawer-up var(--motion-slow) var(--ease-emphasized);
  }
  .data-row-detail-header {
    grid-template-columns: minmax(0, 1fr) max-content 30px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--modal-surface);
  }
  .data-row-detail-header > div:first-child {
    min-width: 0;
  }
  .data-row-detail-header h3 {
    margin: 0 0 3px;
    font-size: 13px;
  }
  .data-row-detail-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .data-row-copy-btn {
    --qz-control-height: 30px;
    --qz-control-gap: 5px;
    --qz-control-font-size: 12px;
    --qz-control-font-weight: 600;
    --qz-control-bg: var(--bg-primary);
  }
  .data-row-copy-btn.success {
    border-color: color-mix(in srgb, var(--green) 36%, var(--border));
    color: var(--green);
  }
  .data-row-copy-btn.error {
    border-color: color-mix(in srgb, var(--red) 36%, var(--border));
    color: var(--red);
  }
  .data-row-detail.cell-editor .data-row-copy-btn {
    border-color: color-mix(in srgb, var(--border) 84%, transparent);
    color: var(--text-secondary);
  }
  .data-row-detail.cell-editor .data-row-copy-btn svg {
    display: none;
  }
  .data-row-detail-table-wrap {
    padding: 10px 14px 14px;
    background: var(--modal-muted-surface);
  }
  .data-cell-detail-editor {
    padding: 0;
  }
  .data-cell-detail-input {
    min-height: 160px;
    max-height: 30vh;
    resize: vertical;
    padding: 10px 11px;
    background: var(--modal-surface);
    font-size: 12px;
    line-height: 1.6;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 70%, transparent);
  }
  .data-cell-detail-input[readonly] {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-elevated) 44%, var(--modal-surface));
  }
  .data-row-detail-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--modal-surface);
  }
  .data-row-detail-table th,
  .data-row-detail-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
  }
  .data-row-detail-table th {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  }
  .data-row-detail-table tr:last-child td {
    border-bottom: 0;
  }
  .data-row-detail-table th:first-child,
  .data-row-detail-key {
    width: 30%;
  }
  .data-row-detail-key {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .data-row-detail-value {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: text;
  }
  .data-row-detail-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 36%, transparent);
    text-underline-offset: 2px;
  }
  .data-row-detail-link:hover {
    color: var(--text-primary);
    text-decoration-color: currentColor;
  }
  .data-row-detail-empty {
    padding: 18px;
    color: var(--text-muted);
    text-align: center;
  }
  .tool-data-summary + .tool-data-table-section,
  .tool-data-summary + .tool-data-table-host > .tool-data-table-section,
  .tool-data-summary + .tool-slim-list {
    margin-top: 8px;
  }
  .tool-data-summary {
    padding: 2px 0;
  }
  .tool-data-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }
  .tool-data-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-muted);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.4;
  }
  .tool-data-summary-item b {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 650;
  }
  .tool-data-summary-item em {
    font-style: normal;
  }
  .resource-ref-pill.data {
    border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  }
  .logs-toolbar {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }
  .logs-action-status {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
  }
  .logs-content {
    padding: 12px 14px;
    word-break: break-word;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.55;
  }
  .tool-console-list {
    margin-top: 8px;
    display: grid;
    gap: 6px;
  }
  .tool-console-rows {
    display: grid;
    gap: 5px;
    max-height: 260px;
    overflow: auto;
    scrollbar-gutter: stable;
  }
  .tool-console-row {
    min-width: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
  }
  .tool-console-row-error,
  .tool-console-row-exception,
  .tool-console-row-assert {
    background: color-mix(in srgb, var(--red) 7%, var(--block-fill));
  }
  .tool-console-row-warning,
  .tool-console-row-warn {
    background: color-mix(in srgb, var(--orange) 7%, var(--block-fill));
  }
  .tool-console-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.45;
  }
  .tool-console-level {
    color: var(--text-secondary);
    font-weight: 650;
  }
  .tool-console-message {
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }
  .tool-console-source {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-details-streaming.tool-details-save_file {
    max-height: none;
    overflow: visible;
  }
  .tool-details-save_file .tool-file-content-block,
  .tool-timeline-slot-body.tool-details-save_file .tool-file-content-block {
    max-height: min(42vh, 360px);
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre;
    word-break: normal;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
  }
  .tool-details-streaming.tool-details-save_file .tool-file-content-block,
  .tool-timeline-slot-body.tool-details-streaming.tool-details-save_file .tool-file-content-block {
    height: clamp(160px, 28vh, 260px);
    max-height: clamp(160px, 28vh, 260px);
  }
  .tool-details-read_article .tool-article-body,
  .tool-timeline-slot-body.tool-details-read_article .tool-article-body {
    max-height: min(36vh, 320px);
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
    scrollbar-gutter: stable;
  }
  .tool-details-read_dom .tool-dom-content-block,
  .tool-timeline-slot-body.tool-details-read_dom .tool-dom-content-block {
    max-height: min(38vh, 340px);
    overflow: auto;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .tool-article-body {
    padding: 2px 0;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    color: var(--text-secondary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    line-height: 1.7;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .tool-article-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 8px 0;
  }
  .tool-article-media-grid[data-count="1"] {
    grid-template-columns: minmax(0, 320px);
  }
  .tool-article-media-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 520px;
  }
  .tool-article-media-item {
    display: block;
    min-width: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
  }
  .tool-article-media-grid[data-count="1"] .tool-article-media-item {
    aspect-ratio: 4 / 3;
    max-height: 200px;
  }
  .tool-article-media-item > a {
    display: block;
    width: 100%;
    height: 100%;
  }
  .tool-article-body.qz-markdown .tool-article-media-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
  }
  .tool-article-body.qz-markdown table {
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
  .tool-article-body.qz-markdown :is(th, td) {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .tool-article-body.qz-markdown caption {
    padding: 0 0 6px;
    color: var(--text-secondary);
    font-weight: 560;
    text-align: start;
  }
  .tool-details-streaming.tool-details-profile-script .js-code-block {
    height: clamp(160px, 28vh, 260px);
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre;
    word-break: normal;
    scrollbar-gutter: stable;
  }
  .tool-timeline-slot-body.tool-details-streaming.tool-details-profile-script .js-code-block {
    height: clamp(140px, 24vh, 220px);
  }
  .msg-artifacts {
    margin: 10px 0 14px;
    max-height: 420px;
    overflow: hidden;
    transform-origin: center top;
    will-change:
      opacity,
      transform,
      max-height;
    transition:
      opacity var(--motion-base) var(--ease-standard),
      transform var(--motion-base) var(--ease-standard),
      max-height var(--motion-slow) var(--ease-emphasized),
      margin var(--motion-slow) var(--ease-emphasized);
  }
  .msg-artifacts.msg-artifacts-exiting {
    margin-top: 0;
    margin-bottom: 0;
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
  }
  .artifact-strip {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--surface-porcelain-border);
    border-radius: 10px;
    background: var(--surface-porcelain);
    box-shadow: var(--surface-porcelain-shadow);
    isolation: isolate;
  }
  .artifact-strip::before {
    display: none;
  }
  .artifact-strip-main {
    min-height: 42px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 9px;
    padding: 8px 12px 7px;
  }
  .artifact-strip-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--surface-porcelain-border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
    box-shadow: none;
    color: var(--text-muted);
  }
  .artifact-strip-icon svg,
  .artifact-strip-open svg {
    width: 13px;
    height: 13px;
  }
  .artifact-strip-copy {
    min-width: 0;
  }
  .artifact-strip-title-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }
  .artifact-strip-title {
    font-size: calc(13px * var(--chat-meta-text-scale, 1));
    font-weight: 680;
    line-height: 1.15;
  }
  .artifact-strip-count {
    color: var(--text-muted);
    font-size: calc(12px * var(--chat-meta-text-scale, 1));
    line-height: 1.15;
  }
  .artifact-strip-preview {
    margin-top: 2px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: max(10px, calc(11px * var(--chat-meta-text-scale, 1)));
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .artifact-strip-open {
    --qz-control-size: 22px;
    --qz-control-icon-size: 13px;
  }
  .artifact-strip-items {
    display: grid;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
    background: transparent;
  }
  .artifact-strip-item {
    min-height: 32px;
    display: grid;
    grid-template-columns: minmax(52px, min-content) minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 5px 12px;
    background: transparent;
    border-top: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
    font-size: max(10px, calc(11px * var(--chat-meta-text-scale, 1)));
  }
  .artifact-strip-item:first-child {
    border-top: none;
  }
  .artifact-strip-item.clickable {
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .artifact-strip-item.clickable:hover {
    background: var(--control-hover-fill);
  }
  .artifact-strip-item.clickable:focus-visible {
    outline: 1px solid var(--border-focus);
    outline-offset: -2px;
  }
  .artifact-strip-kind {
    min-width: 0;
    max-width: 96px;
    overflow-wrap: break-word;
    color: var(--text-muted);
    font-size: max(10px, calc(11px * var(--chat-meta-text-scale, 1)));
    font-weight: 620;
  }
  .artifact-strip-name {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    justify-content: space-between;
    color: var(--text-primary);
  }
  .artifact-strip-name > span {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--chat-table-font-size, 12px);
    font-weight: 530;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .artifact-strip-name small {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: max(10px, calc(10px * var(--chat-meta-text-scale, 1)));
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .artifact-strip-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    min-height: 30px;
    padding: 4px 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
    background: transparent;
  }
  .artifact-solid-btn {
    --qz-control-font-size: max(10px, calc(11px * var(--chat-meta-text-scale, 1)));
    --qz-control-font-weight: 650;
    margin: 0;
    border-radius: 0;
    line-height: 1.2;
  }
  .artifacts-panel {
    inset: 0;
    z-index: 91;
    display: flex;
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .artifacts-panel.hidden {
    display: none;
  }
  .artifacts-backdrop {
    inset: 0;
    background: var(--modal-backdrop);
  }
  .artifacts-card {
    width: min(100%, 560px);
    max-height: min(86vh, 680px);
    border: 1px solid var(--modal-card-border);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--modal-card-surface);
    box-shadow: var(--modal-card-shadow);
    animation: drawer-up var(--motion-slow) var(--ease-emphasized);
  }
  .artifacts-header {
    grid-template-columns: minmax(0, 1fr) 28px;
    padding: 16px 18px 13px;
    border-bottom: 0;
    background: transparent;
  }
  .artifacts-header h3 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 680;
    line-height: 1.25;
  }
  .artifacts-header p {
    margin: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .artifacts-header .icon-btn {
    --qz-control-size: 28px;
  }
  .artifacts-body {
    padding: 12px 18px 18px;
    background: transparent;
  }
  .artifacts-empty {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 14px;
    border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--control-quiet-fill) 62%, transparent);
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
  }
  .artifacts-empty.loading {
    min-height: 66px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 11px;
  }
  .artifacts-loading-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 42%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted) 8%, transparent);
    animation: artifacts-loading-pulse 1.15s ease-in-out infinite;
  }
  .artifacts-loading-preview {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @keyframes artifacts-loading-pulse {
    0%, 100% {
      opacity: .45;
      transform: scale(.9);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes artifacts-content-settle {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes artifacts-row-settle {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .artifacts-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 2px 0 13px;
    border: 0;
    background: transparent;
  }
  .artifacts-summary-title {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 680;
    line-height: 1.3;
  }
  .artifacts-summary-meta {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
  }
  .artifact-row-action {
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font: 620 11px/1.2 var(--font-sans);
    white-space: nowrap;
    transition: var(--transition-surface);
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
  }
  .artifact-row-action:hover {
    color: var(--text-primary);
  }
  .artifacts-list {
    margin-top: 14px;
    display: grid;
    gap: 7px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .artifacts-body-settling .artifacts-summary {
    animation: artifacts-content-settle 150ms var(--ease-standard) both;
  }
  .artifacts-body-settling .artifacts-list {
    animation: artifacts-content-settle 170ms var(--ease-standard) both;
  }
  .artifacts-body-settling .artifacts-row {
    animation: artifacts-row-settle 170ms var(--ease-standard) both;
  }
  .artifacts-body-settling .artifacts-row:nth-child(2) {
    animation-delay: 24ms;
  }
  .artifacts-body-settling .artifacts-row:nth-child(3) {
    animation-delay: 42ms;
  }
  .artifacts-row {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(56px, min-content) minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--surface-porcelain-border);
    border-radius: var(--radius-lg);
    background: var(--surface-porcelain);
    box-shadow: var(--surface-porcelain-shadow);
    transition: var(--transition-surface);
  }
  .artifacts-row.clickable {
    cursor: pointer;
  }
  .artifacts-row.clickable:hover {
    border-color: color-mix(in srgb, var(--text-muted) 22%, var(--border));
    transform: translateY(-1px);
  }
  .artifacts-row.clickable:focus-visible {
    outline: 1px solid var(--border-focus);
    outline-offset: 2px;
  }
  .artifacts-row-kind {
    min-width: 0;
    max-width: 96px;
    overflow-wrap: break-word;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 620;
  }
  .artifacts-row-main {
    min-width: 0;
  }
  .artifacts-row-title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 560;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .artifacts-body-settling .artifacts-summary,
    .artifacts-body-settling .artifacts-list,
    .artifacts-body-settling .artifacts-row {
      animation: none;
    }
  }
  .artifacts-row-meta {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .sessions-mode-row #btn-new-automation {
    height: 28px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--surface-porcelain-border);
    border-radius: var(--radius-sm);
    background: var(--surface-porcelain);
    box-shadow: var(--surface-porcelain-shadow);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 620;
  }
  .sessions-toolbar {
    border-bottom: 0;
  }
  .sessions-list {
    --session-tree-indent: 22px;
    --session-tree-control-size: 18px;
    --session-tree-control-height: 22px;
    --session-tree-card-pad-start: 2px;
    --session-tree-card-pad-top: 5px;
    --session-tree-control-top: 1px;
    --session-tree-join-y: 28px;
    --session-tree-line: color-mix(in srgb, var(--border) 78%, transparent);
    position: relative;
    isolation: isolate;
    padding: 6px 6px 10px;
  }
  .session-tree-node {
    position: relative;
  }
  .sessions-list > .session-tree-node:not(.session-removal-ghost) {
    z-index: 1;
  }
  .session-tree-node.session-tree-node-final-exit {
    overflow: hidden;
    pointer-events: none;
    will-change: clip-path;
  }
  .session-removal-ghost {
    position: absolute;
    z-index: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint style;
    will-change: clip-path;
  }
  .session-removal-ghost.is-exiting {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--session-delete-collapse-ms, 260ms) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .session-tree-children {
    position: relative;
    margin-inline-start: 12px;
    padding-inline-start: var(--session-tree-indent);
  }
  .session-tree-children::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    border-inline-start: 1px solid var(--session-tree-line);
    pointer-events: none;
  }
  .session-tree-children > .session-tree-node::before {
    content: "";
    position: absolute;
    top: var(--session-tree-join-y);
    inset-inline-start: calc(-1 * var(--session-tree-indent));
    width: var(--session-tree-indent);
    border-top: 1px solid var(--session-tree-line);
    pointer-events: none;
  }
  .session-tree-children > .session-tree-node:last-child::after {
    content: "";
    position: absolute;
    top: calc(var(--session-tree-join-y) + 1px);
    bottom: 0;
    inset-inline-start: calc(-1 * var(--session-tree-indent));
    width: 2px;
    background: var(--bg-primary);
    pointer-events: none;
  }
  .session-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-height: 48px;
    padding-block: var(--session-tree-card-pad-top) 8px;
    padding-inline: var(--session-tree-card-pad-start) 6px;
    border-radius: 4px;
    background: transparent;
    border: none;
    margin-bottom: 0;
    overflow: visible;
    cursor: pointer;
    transition:
      background-color var(--transition),
      color var(--transition),
      opacity var(--transition),
      transform var(--transition),
      outline-color var(--transition);
  }
  .session-card.is-layout-moving {
    z-index: 2;
    transition:
      background-color var(--transition),
      color var(--transition),
      opacity var(--transition),
      outline-color var(--transition);
    will-change: transform;
  }
  .sessions-list:has(> .session-removal-ghost) > .session-tree-node:not(.session-removal-ghost) .session-card,
  .sessions-list:has(.session-card.is-layout-moving) > .session-tree-node:not(.session-removal-ghost) .session-card {
    isolation: isolate;
  }
  .sessions-list:has(> .session-removal-ghost) > .session-tree-node:not(.session-removal-ghost) .session-card::before,
  .sessions-list:has(.session-card.is-layout-moving) > .session-tree-node:not(.session-removal-ghost) .session-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--bg-primary);
  }
  .session-card.is-deleting {
    cursor: default;
  }
  .session-card.is-removing {
    pointer-events: none;
  }
  .session-card:hover {
    background: var(--accent-subtle);
    transform: translateX(1px);
  }
  .session-card.active {
    background: var(--accent-subtle);
  }
  .session-card:focus-visible {
    outline: 1px solid var(--border-focus);
    outline-offset: -1px;
  }
  .session-tree-toggle {
    flex: 0 0 var(--session-tree-control-size);
    width: var(--session-tree-control-size);
    height: var(--session-tree-control-height);
    margin-top: var(--session-tree-control-top);
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    transition: var(--transition-surface);
  }
  .session-tree-toggle:hover {
    background: var(--accent-subtle);
    color: var(--text-primary);
  }
  .session-tree-leaf {
    flex: 0 0 var(--session-tree-control-size);
    width: var(--session-tree-control-size);
    height: var(--session-tree-control-height);
    margin-top: var(--session-tree-control-top);
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .session-tree-leaf::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 56%, transparent);
  }
  .session-tree-leaf.child::before {
    display: none;
  }
  .session-card-body {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
  }
  .session-card-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }
  .session-card-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .session-card-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
  }
  .session-artifact-chip {
    flex: 0 0 auto;
    height: 18px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    border: 1px solid var(--surface-porcelain-border);
    border-radius: var(--radius-pill);
    background: var(--surface-porcelain);
    box-shadow: var(--surface-porcelain-shadow);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: var(--transition-surface);
  }
  .session-artifact-chip-count {
    color: color-mix(in srgb, var(--text-muted) 78%, var(--text-secondary));
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 560;
  }
  .session-artifact-chip:hover {
    border-color: color-mix(in srgb, var(--text-muted) 28%, var(--border));
    color: var(--text-secondary);
    transform: translateY(-1px);
  }
  .session-goal-chip {
    gap: 5px;
  }
  .session-goal-chip:hover {
    border-color: color-mix(in srgb, var(--text-muted) 28%, var(--border));
    color: var(--text-secondary);
    transform: none;
  }
  .session-goal-dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--green);
  }
  .session-goal-chip.blocked .session-goal-dot {
    background: var(--red);
  }
  .session-goal-chip.paused .session-goal-dot {
    background: var(--orange);
  }
  .session-goal-chip.complete .session-goal-dot {
    background: var(--text-muted);
  }
  .session-card-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .session-status {
    font-weight: 600;
  }
  .session-status-running {
    color: var(--green);
  }
  .session-status-idle {
    color: var(--text-muted);
  }
  .session-status-waiting {
    color: var(--orange);
  }
  .session-status-interrupted {
    color: var(--text-muted);
  }
  .session-status-error {
    color: var(--red);
  }
  .session-card.running .session-card-meta {
    color: color-mix(in srgb, var(--green) 42%, var(--text-muted));
  }
  .session-meta-sep {
    color: var(--text-muted);
  }
  .session-tracker {
    --tracker-progress: 0%;
    display: grid;
    gap: 3px;
    margin-top: 4px;
    padding-right: 2px;
  }
  .session-tracker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.25;
  }
  .session-tracker-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .session-tracker-count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    color: color-mix(in srgb, var(--green) 58%, var(--text-secondary));
  }
  .session-tracker-bar {
    position: relative;
    height: 3px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--green) 12%, var(--border));
  }
  .session-tracker-fill {
    display: block;
    width: var(--tracker-progress);
    height: 100%;
    border-radius: inherit;
    background:
      linear-gradient(
        90deg,
        color-mix(in srgb, var(--green) 72%, var(--text-primary)),
        var(--green));
    transition: width 180ms ease;
  }
  .session-tracker.indeterminate .session-tracker-fill {
    width: 38%;
    animation: session-tracker-pulse 1.2s ease-in-out infinite;
  }
  @keyframes session-tracker-pulse {
    0% {
      transform: translateX(-110%);
    }
    100% {
      transform: translateX(270%);
    }
  }
  .session-card-subline {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .session-card-subline.muted {
    color: var(--text-muted);
  }
  .session-action-btn {
    margin-top: 2px;
    border: none;
    opacity: 0;
    --qz-control-color: var(--text-muted);
  }
  .session-card-actions .session-action-btn {
    margin-top: 0;
  }
  .session-card:hover .session-action-btn {
    opacity: 1;
  }
  .session-card.is-deleting .session-action-btn {
    opacity: 1;
  }
  .session-export-btn:hover,
  .session-artifact-action-btn:hover {
    color: var(--text-primary);
    background: var(--accent-subtle);
  }
  .session-artifact-action-btn.has-artifacts {
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--text-muted));
  }
  .session-stop-btn:hover {
    color: var(--red);
    background: var(--danger-subtle);
  }
  .session-delete-btn:hover {
    color: var(--red);
    background: var(--danger-subtle);
  }
  .session-delete-btn[aria-busy=true] {
    color: var(--red);
    background: var(--danger-subtle);
    cursor: default;
    transition: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .session-tree-node.session-tree-node-final-exit,
    .session-removal-ghost,
    .session-card.is-layout-moving,
    .automation-card.automation-card-final-exit,
    .automation-card.is-layout-moving,
    .automation-run.is-layout-moving,
    .automation-empty.automation-empty-enter {
      animation: none;
      transition: none;
    }
  }
  .sessions-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
  }
  .sessions-empty.sessions-empty-enter {
    opacity: 0;
    transition: opacity 80ms linear;
  }
  .sessions-empty.sessions-empty-enter.is-visible {
    opacity: 1;
  }
  .sessions-empty-icon {
    display: none;
    margin-bottom: 8px;
  }
  .automations-panel {
    padding: 0 10px 12px;
  }
  .automation-editor {
    inset: 0;
    z-index: 92;
    display: flex;
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .automation-editor.hidden {
    display: none;
  }
  .automation-editor-backdrop {
    inset: 0;
    background: var(--modal-backdrop);
  }
  .automation-editor-card {
    width: min(100%, 560px);
    max-height: min(92%, calc(100% - 12px));
    padding: 14px 16px 16px;
    border: 1px solid var(--modal-card-border);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--modal-card-surface);
    box-shadow: var(--modal-card-shadow);
    animation: drawer-up var(--motion-slow) var(--ease-emphasized);
  }
  .automation-editor-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 680;
  }
  .automation-editor .qz-field {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 32px;
  }
  #automation-instruction {
    min-height: 92px;
    resize: vertical;
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.55;
  }
  .automation-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 8px;
  }
  .automation-form-grid label {
    min-width: 0;
  }
  .automation-form-grid span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.2;
  }
  .automation-form-grid .qz-field {
    height: 32px;
    padding: 0 9px;
    font-size: 12px;
    line-height: 30px;
  }
  .automation-editor-note {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
  }
  .automation-editor-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  .automation-editor-actions .qz-btn--primary,
  .automation-editor-actions .qz-btn {
    height: 34px;
    margin-top: 0;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
  }
  .automation-list-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    box-shadow: none;
    overflow: hidden;
  }
  .automation-list-bar {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
    background: transparent;
  }
  .automation-list-count {
    flex: 0 1 auto;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .automation-filter-tabs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: safe flex-end;
    gap: 3px;
    overflow-x: auto;
  }
  .automation-filter-tabs::-webkit-scrollbar {
    display: none;
  }
  .automation-filter-btn {
    height: 24px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: 500 10px/1 var(--font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .automation-filter-btn b {
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
    font: inherit;
  }
  .automation-filter-btn:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--border) 72%, transparent);
  }
  .automation-filter-btn.active {
    background: var(--surface-porcelain);
    border-color: var(--surface-porcelain-border);
    box-shadow: var(--surface-porcelain-shadow);
    color: var(--text-primary);
  }
  .automation-filter-btn.active b {
    color: var(--text-secondary);
  }
  .automation-list-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 12px 10px;
    scrollbar-gutter: stable;
  }
  .automation-card {
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
    padding: 11px 0 12px;
    transition: transform var(--transition);
  }
  .automation-card.is-deleting,
  .automation-card.automation-card-final-exit {
    will-change: opacity;
  }
  .automation-card.automation-card-final-exit {
    pointer-events: none;
  }
  .automation-card.is-layout-moving {
    transition: none;
    will-change: transform;
  }
  .automation-run.is-layout-moving {
    will-change: transform;
  }
  .automation-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
  }
  .automation-card-content {
    min-width: 0;
  }
  .automation-card-main {
    min-width: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .automation-card-main:focus-visible {
    outline: 1px solid var(--border-focus);
    outline-offset: 3px;
  }
  .automation-title-row {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    overflow: hidden;
  }
  .automation-title {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 660;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition);
    user-select: none;
    -webkit-user-select: none;
  }
  .automation-card:hover .automation-title {
    color: color-mix(in srgb, var(--text-primary) 94%, var(--accent));
  }
  .automation-artifact-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 620;
    line-height: 1;
    white-space: nowrap;
  }
  .automation-artifact-mark b {
    color: color-mix(in srgb, var(--text-secondary) 78%, var(--text-muted));
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 560;
  }
  .automation-meta,
  .automation-run-meta,
  .automation-card-preview,
  .automation-artifact-meta {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
  }
  .automation-meta,
  .automation-card-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .automation-card-preview {
    margin-top: 2px;
    color: var(--text-secondary);
  }
  .automation-artifact-line {
    width: min(100%, 292px);
    min-height: 30px;
    display: grid;
    grid-template-columns: minmax(42px, min-content) minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 5px 8px;
    border: 1px solid var(--surface-porcelain-border);
    border-radius: var(--radius-lg);
    background: var(--surface-porcelain);
    box-shadow: var(--surface-porcelain-shadow);
    color: inherit;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: start;
    transition: var(--transition-surface);
  }
  .automation-artifact-line:hover {
    border-color: color-mix(in srgb, var(--text-muted) 22%, var(--border));
    transform: translateY(-1px);
  }
  .automation-artifact-line-kind,
  .automation-artifact-kind {
    min-width: 0;
    max-width: 96px;
    overflow-wrap: break-word;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
  }
  .automation-artifact-line-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 540;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .automation-artifact-line-open,
  .automation-artifact-open {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
  }
  .automation-card-details {
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
    animation: panel-in var(--motion-fast) var(--ease-emphasized);
  }
  .automation-actions {
    display: flex;
    gap: 2px;
    align-items: center;
  }
  .automation-actions .automation-action-btn {
    --qz-control-size: 21px;
    --qz-control-icon-size: 14px;
    opacity: 0.66;
  }
  .automation-actions .automation-action-btn svg {
    stroke-width: 1.55;
  }
  .automation-actions .automation-action-btn:hover,
  .automation-actions .automation-action-btn:focus-visible {
    opacity: 1;
  }
  .automation-actions .automation-action-btn[aria-busy=true] {
    color: var(--red);
    opacity: 1;
    transition: none;
  }
  .automation-action-btn[data-tooltip]::after {
    position: absolute;
    z-index: 30;
    top: calc(100% + 5px);
    left: 50%;
    max-width: 86px;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    content: attr(data-tooltip);
    font-size: 10px;
    font-weight: 620;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -1px);
    transition: opacity 120ms ease, transform 120ms ease;
    white-space: nowrap;
  }
  .automation-action-btn[data-tooltip]:hover::after,
  .automation-action-btn[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .automation-action-btn[data-tooltip]:disabled::after {
    display: none;
  }
  .automation-actions .automation-action-btn:last-child::after {
    right: 0;
    left: auto;
    transform: translateY(-1px);
  }
  .automation-actions .automation-action-btn:last-child:hover::after,
  .automation-actions .automation-action-btn:last-child:focus-visible::after {
    transform: translateY(0);
  }
  .automation-expand-btn {
    flex: 0 0 21px;
  }
  .automation-expand-btn:hover {
    color: var(--text-primary);
  }
  .automation-runs {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }
  .automation-runs.empty {
    padding-top: 7px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
  }
  .automation-run {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: center;
    min-height: 38px;
    margin-top: 2px;
    padding: 6px 4px 6px 0;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition);
  }
  .automation-run.clickable {
    cursor: pointer;
  }
  .automation-run.clickable:hover {
    background: color-mix(in srgb, var(--text-muted) 4%, transparent);
  }
  .automation-run.clickable:focus-visible {
    outline: 1px solid var(--border-focus);
    outline-offset: 1px;
  }
  .automation-run-title {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 560;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .automation-run-signal {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--text-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 10%, transparent);
  }
  .automation-run-artifacts {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
  }
  .automation-artifact-shelf {
    margin: 4px 0 7px 16px;
    overflow: hidden;
    border: 1px solid var(--surface-porcelain-border);
    border-radius: var(--radius-lg);
    background: var(--surface-porcelain);
    box-shadow: var(--surface-porcelain-shadow);
  }
  .automation-artifact-shelf-head {
    min-height: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
  }
  .automation-artifact-shelf-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 680;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .automation-artifact-shelf-title span {
    margin-left: 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 560;
  }
  .automation-artifact-shelf-list {
    display: grid;
  }
  .automation-artifact-row {
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(48px, min-content) minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 36%, transparent);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: var(--font-sans);
    text-align: start;
    transition: var(--transition-surface);
  }
  .automation-artifact-row:first-child {
    border-top: 0;
  }
  .automation-artifact-row:not(:disabled):hover {
    background: color-mix(in srgb, var(--text-primary) 1.8%, transparent);
  }
  .automation-artifact-row:disabled {
    cursor: default;
  }
  .automation-artifact-main {
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  .automation-artifact-meta {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .automation-artifact-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 580;
    line-height: 1.28;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .automation-run-signal.success {
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
  }
  .automation-run-signal.running,
  .automation-run-signal.pending {
    background: var(--orange);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 14%, transparent);
  }
  .automation-run-signal.danger {
    background: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 14%, transparent);
  }
  .automation-run-signal.muted {
    background: color-mix(in srgb, var(--text-muted) 72%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 9%, transparent);
  }
  .automation-empty {
    min-height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
  }
  .automation-empty.automation-empty-enter {
    opacity: 0;
    transition: opacity 80ms linear;
  }
  .automation-empty.automation-empty-enter.is-visible {
    opacity: 1;
  }
  .automation-status {
    font-weight: 600;
  }
  .automation-status.running,
  .automation-status.pending {
    color: var(--green);
  }
  .automation-status.error,
  .automation-status.aborted,
  .automation-status.interrupted {
    color: var(--red);
  }
  .automation-status.paused,
  .automation-status.skipped {
    color: var(--text-muted);
  }
  @media (max-width: 320px) {
    .automation-form-grid {
      grid-template-columns: 1fr;
    }
    .automation-list-bar {
      align-items: flex-start;
      flex-direction: column;
    }
    .automation-filter-tabs {
      width: 100%;
      justify-content: flex-start;
    }
    .automation-actions {
      gap: 1px;
    }
    .automation-list-scroll {
      padding-right: 11px;
      padding-left: 10px;
    }
  }
  .case-toast.in-artifacts:not(.anchored) {
    top: 22px;
  }
  .tool-session-intent {
    padding: 6px 0;
  }
  .tool-session-intent-title {
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 560;
    line-height: 1.45;
  }
  .tool-session-intent-subtitle {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .tool-session-intent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
  }
  .tool-session-intent-meta span {
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.55;
  }
  .tool-session-prompt {
    margin-top: 6px;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
  }
  .tool-session-prompt-label {
    color: var(--text-muted);
    font-size: calc(10px * var(--chat-text-scale, 1));
    font-weight: 500;
    line-height: 1.35;
  }
  .tool-session-prompt-body {
    max-height: 180px;
    margin-top: 4px;
    overflow: auto;
    color: var(--text-primary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.58;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    scrollbar-gutter: stable;
  }
  .cli-connection-action {
    min-width: 0;
    max-width: 100%;
  }
  .cli-connect-popover {
    inset: auto;
    width: min(300px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
  .cli-address-summary {
    cursor: pointer;
    list-style: none;
    border-radius: var(--control-radius);
    color: var(--text-muted);
  }
  .cli-address-summary::-webkit-details-marker {
    display: none;
  }
  .cli-address-summary:focus-visible {
    outline: 1px solid var(--border-focus);
    outline-offset: 2px;
  }
  .cli-address-summary:hover {
    color: var(--text-primary);
  }
  .cli-address-chevron {
    transform: rotate(-90deg);
  }
  [dir=rtl] .cli-address-chevron {
    transform: rotate(90deg);
  }
  details[open] > .cli-address-summary .cli-address-chevron {
    transform: none;
  }
  .cli-start-command {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font: var(--field-font-sm)/1.5 var(--font-mono);
  }
  .provider-picker-trigger {
    text-align: start;
    cursor: pointer;
  }
  .provider-picker-trigger > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .provider-picker {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--text-primary);
  }
  .provider-picker:popover-open {
    display: flex;
    flex-direction: column;
  }
  .provider-picker-search {
    flex: 0 0 auto;
    padding: 8px;
    border-bottom: 1px solid var(--border);
  }
  .provider-picker-search .qz-field {
    margin: 0;
    min-width: 0;
  }
  .provider-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  .provider-picker-list > [role=group]:not([hidden]) ~ [role=group]:not([hidden]) {
    margin-block-start: 10px;
  }
  .provider-picker-group {
    padding: 6px 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .provider-picker-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
    font-size: 13px;
  }
  .provider-picker-item[hidden] {
    display: none;
  }
  .provider-picker-item > span:first-child {
    overflow-wrap: anywhere;
  }
  .provider-picker-check {
    visibility: hidden;
    text-align: center;
  }
  .provider-picker-item[aria-selected=true] .provider-picker-check {
    visibility: visible;
  }
  .provider-picker-empty {
    padding: 16px 12px;
    color: var(--text-muted);
    text-align: center;
    overflow-wrap: anywhere;
  }
  .provider-picker-empty:not([hidden]) {
    display: grid;
    place-content: center;
    flex: 1;
  }
  .provider-endpoint {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
    text-align: right;
    overflow-wrap: anywhere;
    user-select: text;
  }
  .welcome.onboarding-dismissed {
    justify-content: flex-start;
    padding-top: 76px;
  }
  .welcome.onboarding-dismissed .welcome-icon {
    width: 128px;
    height: 128px;
  }
  .welcome:not(.onboarding-dismissed):has(.welcome-onboarding) .welcome-subtitle {
    display: none;
  }
  .welcome-onboarding {
    width: min(100%, 420px);
    margin-top: clamp(12px, 2.2vh, 18px);
    text-align: start;
    animation: panel-in var(--motion-base) var(--ease-emphasized);
  }
  .welcome.onboarding-dismissed .welcome-onboarding {
    display: none;
  }
  .welcome-onboarding h2 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0 0 6px;
  }
  .onboarding-copy {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
    margin: 0 0 14px;
  }
  .onboarding-status {
    grid-template-columns: 8px minmax(0, 1fr);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 12px;
  }
  .onboarding-status-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--text-muted);
  }
  .onboarding-status[data-state=ready] .onboarding-status-dot {
    background: var(--green);
  }
  .onboarding-status[data-state=needs_setup] .onboarding-status-dot {
    background: var(--orange);
  }
  .onboarding-status[data-state=loading] .onboarding-status-dot {
    opacity: 0.55;
  }
  .onboarding-primary-btn {
    --qz-control-font-weight: 600;
  }
  .onboarding-setup-actions[data-mode=degraded] .onboarding-primary-btn {
    --qz-control-border: var(--control-border);
    --qz-control-border-hover: var(--control-border-hover);
    --qz-control-border-focus: var(--control-border-hover);
    --qz-control-bg: var(--bg-elevated);
    --qz-control-bg-hover: var(--control-surface-hover);
    --qz-control-bg-pressed: var(--control-surface-pressed);
    --qz-control-color: var(--text-primary);
    --qz-control-color-hover: var(--text-primary);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 82%, transparent);
  }
  .onboarding-action {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
    transition: var(--transition-surface), transform var(--transition);
  }
  .onboarding-action:hover,
  .onboarding-action:focus-visible {
    border-color: var(--border-focus);
    background: var(--bg-elevated);
  }
  .onboarding-action:active {
    transform: translateY(1px);
  }
  .onboarding-action span {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 500;
  }
  .onboarding-action small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
  }
  .input-model-indicator {
    max-width: 55%;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 10px;
    line-height: 1.4;
    text-align: end;
    text-overflow: ellipsis;
  }
  .input-model-indicator.hidden {
    display: none;
  }
  .input-network-hint {
    display: flex;
    min-height: 29px;
    margin: 0 2px 7px;
    padding: 3px 8px;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.66;
    text-overflow: ellipsis;
  }
  .input-network-hint.hidden {
    display: none;
  }
  .model-preset-switcher {
    inset: 0;
    max-width: none;
    max-height: none;
    padding: clamp(40px, 14vh, 112px) 14px 24px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
  }
  .model-preset-switcher[open] {
    display: grid;
    align-items: start;
    justify-items: center;
  }
  .model-preset-switcher::backdrop {
    background: var(--modal-backdrop);
    animation: modal-fade-in var(--motion-base) var(--ease-standard);
  }
  .model-preset-switcher-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    width: min(500px, 100%);
    max-height: min(460px, 100%);
    border: 1px solid var(--modal-card-border);
    border-radius: var(--radius-lg);
    background: var(--modal-surface);
    box-shadow: var(--modal-card-shadow);
    animation: modal-card-in var(--motion-base) var(--ease-emphasized);
  }
  .model-preset-switcher-footer {
    min-width: 0;
    flex-wrap: wrap;
    min-height: 26px;
    padding-inline: 12px;
    border-top: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
  }
  .model-preset-switcher-search {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px;
    padding: 0 15px;
    border: 0;
    border-radius: 0;
    background: var(--modal-surface);
    color: var(--text-muted);
    transition: color var(--transition);
  }
  .model-preset-switcher-search svg {
    width: 18px;
    height: 18px;
  }
  .model-preset-switcher-search:focus-within {
    color: var(--text-secondary);
    box-shadow: none;
  }
  #model-preset-switcher-input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font: 500 14px/1.35 var(--font-sans);
  }
  #model-preset-switcher-input::placeholder {
    color: var(--text-muted);
  }
  .model-preset-switcher-list {
    --qz-menu-padding: 3px 7px 6px;
    max-height: 354px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 28%, transparent) transparent;
  }
  .model-preset-switcher-list::-webkit-scrollbar {
    width: 6px;
  }
  .model-preset-switcher-list::-webkit-scrollbar-track {
    background: transparent;
  }
  .model-preset-switcher-list::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  }
  .model-preset-switcher-list:hover::-webkit-scrollbar-thumb,
  .model-preset-switcher-list:focus-within::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 48%, transparent);
  }
  .model-preset-switcher-list.is-empty {
    display: none;
  }
  .model-preset-switcher-item {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 10px;
  }
  .model-preset-switcher-item[aria-selected=true] {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: none;
  }
  .model-preset-switcher-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
  }
  .model-preset-switcher-name,
  .model-preset-switcher-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .model-preset-switcher-name {
    color: inherit;
    font-size: 12.5px;
    font-weight: 590;
    line-height: 1.35;
  }
  .model-preset-switcher-meta {
    color: var(--text-muted);
    font: 450 10.5px/1.35 var(--font-sans);
  }
  .model-preset-switcher-current {
    padding: 0 2px;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 560;
    line-height: 1.35;
    white-space: nowrap;
  }
  .model-preset-switcher-status {
    overflow-wrap: anywhere;
  }
  .model-preset-switcher-status[data-tone=error] {
    color: var(--red);
  }
  .model-preset-switcher-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0.3em;
    min-width: 0;
    max-width: 100%;
  }
  .model-preset-switcher-hints kbd {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: 550 10px/1.2 var(--font-sans);
    box-shadow: none;
  }
  @media (max-width: 380px) {
    .model-preset-switcher {
      padding-inline: 8px;
    }
    .model-preset-switcher-hints {
      display: none;
    }
    .model-preset-switcher-footer:has(.model-preset-switcher-status:empty) {
      min-height: 8px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .model-preset-switcher::backdrop,
    .model-preset-switcher-panel {
      animation: none;
    }
  }
  .settings-field {
    display: grid;
  }
  .settings-field.hidden {
    display: none;
  }
  .settings-inline-status.hidden {
    display: none;
  }
  .settings-inline-status {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
  }
  .settings-inline-status[data-tone=success] {
    color: var(--green);
  }
  .settings-inline-status[data-tone=error] {
    color: var(--red);
  }
  .settings-preset-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .settings-preset-row .qz-btn {
    margin: 0;
    padding: 8px 10px;
    white-space: nowrap;
  }
  .settings-preset-row .qz-btn:disabled {
    opacity: 0.45;
    cursor: default;
  }
  .settings-preset-row .qz-btn--danger:not(:disabled):hover {
    color: var(--red);
    background: var(--danger-subtle);
  }
  .provider-auth-box {
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 72%, var(--bg-tertiary));
  }
  .provider-auth-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .provider-auth-status {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
  }
  .provider-auth-row .qz-btn,
  .provider-device-box .qz-btn {
    margin: 0;
    padding: 6px 8px;
    white-space: nowrap;
  }
  .provider-auth-row .qz-btn:disabled {
    opacity: 0.45;
    cursor: default;
  }
  .provider-auth-row .qz-btn--danger:not(:disabled):hover {
    color: var(--red);
    background: var(--danger-subtle);
  }
  .provider-device-box {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .provider-device-code {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: 700 16px/1 var(--font-mono);
    letter-spacing: 0;
    text-align: center;
  }
  .provider-device-box .qz-field-hint {
    grid-column: 1 / -1;
    margin: -2px 0 0;
  }
  .provider-options-box {
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 72%, var(--bg-tertiary));
  }
  .provider-option-row {
    display: grid;
    grid-template-columns: minmax(72px, 0.55fr) minmax(0, 1.45fr);
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
  }
  .custom-provider-box {
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 72%, var(--bg-tertiary));
  }
  .custom-option-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 5px;
    color: var(--text-secondary);
    font: 500 11px/1.35 var(--font-sans);
    letter-spacing: 0;
  }
  .custom-option-row.full {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .provider-option-row .qz-field {
    min-height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .custom-option-row .qz-field {
    min-height: 34px;
    padding: 8px 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0;
  }
  .custom-endpoint-editor[data-completion$="chat/completions"] .custom-endpoint-input {
    padding-right: 142px;
  }
  .custom-endpoint-editor[data-completion$=messages] .custom-endpoint-input {
    padding-right: 80px;
  }
  .custom-endpoint-input.is-auto-completed {
    animation: custom-endpoint-applied 260ms var(--ease-standard);
  }
  .custom-endpoint-inline-completion {
    z-index: 2;
    top: 50%;
    right: 10px;
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
    font: 500 12px/1 var(--font-mono);
    letter-spacing: 0;
    pointer-events: none;
    transform: translateY(-50%);
  }
  @keyframes custom-endpoint-applied {
    50% {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-primary) 5%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .custom-endpoint-input.is-auto-completed {
      animation: none;
    }
  }
  .qz-combobox {
    position: relative;
  }
  .qz-combobox-input {
    padding-right: 68px;
  }
  .qz-combobox.manual-only .qz-combobox-input {
    padding-right: 36px;
  }
  .qz-combobox-input[readonly]:not(:disabled) {
    background-color: var(--field-surface);
    color: var(--field-text);
    cursor: pointer;
    opacity: 1;
  }
  .qz-combobox-toggle,
  .qz-combobox-clear {
    position: absolute;
    top: 1px;
    bottom: 1px;
    height: auto;
  }
  .qz-combobox-clear {
    right: 35px;
    width: 28px;
    border-radius: var(--radius-sm);
    opacity: 0.72;
  }
  .qz-combobox.manual-only .qz-combobox-clear {
    right: 1px;
  }
  .qz-combobox-toggle {
    right: 1px;
    width: 34px;
    border-left: 1px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .qz-combobox-toggle:hover,
  .qz-combobox.open .qz-combobox-toggle,
  .qz-combobox-toggle:focus-visible {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    opacity: 1;
  }
  .qz-combobox.open .qz-combobox-toggle svg {
    transform: rotate(180deg);
  }
  .qz-combobox-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 242px;
    overflow-y: auto;
  }
  #cfg-model-options.qz-combobox-menu {
    position: fixed;
    inset: auto;
    top: var(--model-menu-top, 0);
    left: var(--model-menu-left, 0);
    right: auto;
    bottom: auto;
    width: var(--model-menu-width, 240px);
    max-width: calc(100vw - 16px);
    max-height: var(--model-menu-max-height, 242px);
    margin: 0;
    z-index: 140;
  }
  #cfg-model-options.qz-combobox-menu.open-upward {
    top: auto;
    bottom: var(--model-menu-bottom, 0);
  }
  .model-parameters-editor {
    gap: 5px;
  }
  .model-parameter-list {
    display: grid;
  }
  .model-parameter-list:empty {
    display: none;
  }
  .model-parameter-add {
    justify-self: start;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
  }
  .model-parameter-add:hover,
  .model-parameter-add:focus-visible {
    color: var(--text-secondary);
  }
  .model-parameter-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) 30px;
    align-items: center;
    gap: 6px;
  }
  .model-parameter-row .qz-field {
    min-width: 0;
    min-height: 34px;
    padding: 7px 9px;
    font-size: 12px;
  }
  .model-parameter-remove {
    width: 30px;
    height: 30px;
    color: var(--text-muted);
  }
  .model-parameter-remove:hover,
  .model-parameter-remove:focus-visible {
    color: var(--text-primary);
  }
  .model-parameter-suggestions {
    inset: auto;
    top: var(--model-parameter-menu-top, 0);
    left: var(--model-parameter-menu-left, 0);
    width: var(--model-parameter-menu-width, 220px);
    max-width: calc(100vw - 16px);
    max-height: 220px;
    z-index: 150;
  }
  .model-parameter-suggestions::backdrop {
    background: transparent;
  }
  .model-parameter-suggestion {
    display: block;
    width: 100%;
    overflow: hidden;
    font: 500 12px/1.35 var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #cfg-model-options.qz-combobox-menu::backdrop {
    background: transparent;
  }
  .qz-combobox-option,
  .qz-combobox-empty {
    width: 100%;
    min-height: 42px;
    padding: 7px 9px;
    font: inherit;
  }
  .qz-combobox-option-name {
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qz-combobox-option-meta {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qz-combobox-empty {
    display: grid;
    place-items: center start;
    color: var(--text-muted);
    cursor: default;
    font-size: 12px;
  }
  .context-window-box {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
  }
  .context-window-box.custom-active {
    grid-template-columns: minmax(108px, 0.58fr) minmax(0, 1fr);
  }
  .context-window-select {
    border: 0;
    background-color: transparent;
  }
  .context-window-box.custom-active .context-window-select {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }
  .context-window-input {
    padding: 6px 9px;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    font-family: var(--font-mono);
  }
  .settings-body .qz-field-hint {
    margin-top: -4px;
  }
  .settings-model-capability-field {
    gap: 5px;
  }
  .settings-model-capability-field .qz-field-label {
    margin-top: 0;
  }
  .settings-model-capability-field .qz-field {
    min-width: 0;
    min-height: 34px;
  }
  .settings-advanced-hint {
    margin-top: -1px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
  }
  .settings-toggle-row {
    --choice-size-md: 16px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
  }
  .advanced-setting-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
  }
  .settings-shortcut-edit {
    --qz-control-bg: var(--bg-primary);
  }
  .settings-shortcut-edit kbd {
    min-width: 0;
    color: inherit;
    font:
      550 12px/1.2 -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .guardrail-form {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
  }
  .guardrail-form-header {
    gap: 4px 10px;
  }
  .guardrail-form-title,
  .guardrail-list-title {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
  }
  .guardrail-form-hint {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: start;
  }
  .guardrail-filter-row,
  .guardrail-input-row {
    display: grid;
    gap: 8px;
    align-items: center;
  }
  .guardrail-input-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .guardrail-input-row.rate-limit-active {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 104px) auto;
  }
  .guardrail-rule-action,
  .guardrail-rule-type {
    min-width: 0;
    padding-inline-end: 26px;
  }
  .guardrail-rate-limit-field.hidden {
    display: none;
  }
  .guardrail-rate-limit-unit {
    inset-inline-end: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 13px;
    pointer-events: none;
  }
  .guardrail-add-row .qz-btn {
    margin: 0;
    padding: 8px 10px;
    white-space: nowrap;
  }
  .guardrail-domain-empty,
  .guardrail-domain-row {
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
  }
  .guardrail-domain-empty {
    display: grid;
    place-items: center start;
    padding: 8px 10px;
    color: var(--text-muted);
    font-size: 12px;
  }
  .guardrail-domain-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 10px;
  }
  .guardrail-domain-row.dragging {
    opacity: 0.58;
  }
  .guardrail-domain-drag {
    color: var(--text-muted);
    cursor: grab;
    font: 600 14px/1 var(--font-mono);
    user-select: none;
  }
  .guardrail-domain-row:active .guardrail-domain-drag {
    cursor: grabbing;
  }
  .guardrail-domain-main {
    min-width: 0;
    display: grid;
    gap: 2px;
  }
  .guardrail-domain-name {
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font: 600 12px/1.35 var(--font-mono);
  }
  .guardrail-domain-row[data-guardrail-action=allow] .guardrail-domain-name {
    color: var(--green);
  }
  .guardrail-domain-meta {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
  }
  .guardrail-domain-remove {
    margin: 0;
    padding: 6px 8px;
    white-space: nowrap;
  }
  .advanced-section {
    padding-top: 2px;
  }
  .advanced-section + .advanced-section {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  .skill-settings-index {
    display: grid;
    gap: 10px;
  }
  .skill-settings-index-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 2px 2px 4px;
  }
  .skill-settings-index-header h4,
  .skill-settings-index-header p {
    margin: 0;
  }
  .skill-settings-index-header h4 {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
  }
  .skill-settings-index-header p {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
  }
  .skill-settings-search {
    width: 100%;
  }
  .skill-settings-index-rows {
    display: grid;
    gap: 7px;
  }
  .skill-settings-index-row.qz-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 10px 11px;
    gap: 10px;
    align-items: center;
    justify-content: initial;
    color: var(--text-primary);
    text-align: start;
  }
  .skill-settings-index-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }
  .skill-settings-index-copy strong,
  .skill-settings-index-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-settings-index-copy strong {
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.4;
  }
  .skill-settings-index-copy small {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.4;
  }
  .skill-settings-index-missing {
    color: var(--red);
    font-size: 11px;
    font-weight: 550;
    white-space: nowrap;
  }
  .skill-settings-index-chevron {
    color: var(--text-muted);
  }
  .skill-settings-index-empty {
    display: grid;
    place-items: center;
    min-height: 112px;
    color: var(--text-muted);
    font-size: 12px;
  }
  .skill-settings-detail-nav {
    display: flex;
    align-items: center;
    min-height: 30px;
  }
  .skill-settings-back.qz-btn {
    margin: 0;
    padding-left: 6px;
    gap: 4px;
  }
  .skill-settings-empty {
    place-items: center;
    padding: 18px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
  }
  .skill-settings-empty--error {
    color: var(--red);
  }
  .skill-settings-card {
    display: grid;
    width: 100%;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
  }
  .skill-settings-card--sectioned {
    padding: 12px 10px 10px;
  }
  .skill-settings-card--sectioned > .skill-settings-card-header,
  .skill-settings-card--sectioned > .skill-settings-description {
    margin-right: 4px;
    margin-left: 4px;
  }
  .skill-settings-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .skill-settings-heading {
    min-width: 0;
  }
  .skill-settings-title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-settings-source,
  .skill-settings-description {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
  }
  .skill-settings-description {
    color: var(--text-secondary);
  }
  .skill-settings-sections {
    display: grid;
    gap: 10px;
  }
  .skill-settings-section {
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 46%, transparent);
  }
  .skill-settings-section-header {
    display: grid;
    gap: 2px;
  }
  .skill-settings-section-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.4;
  }
  .skill-settings-section-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.45;
  }
  .skill-settings-grid--ungrouped {
    padding: 1px;
  }
  .skill-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .skill-settings-field {
    display: grid;
    grid-column: 1 / -1;
    gap: 5px;
    min-width: 0;
  }
  .skill-settings-field--half {
    grid-column: auto;
  }
  .skill-settings-field--toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
  }
  .skill-settings-field--toggle .skill-settings-field-hint {
    grid-column: 1 / -1;
  }
  .skill-settings-toggle-label {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 550;
  }
  .skill-settings-required {
    margin-left: 2px;
    color: var(--red);
  }
  @media (max-width: 380px) {
    .skill-settings-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .skill-settings-field--half {
      grid-column: 1 / -1;
    }
  }
  .skills-toolbar {
    top: 0;
    z-index: 12;
    border-bottom: 0;
  }
  .skills-import-menu {
    --qz-menu-padding: 4px;
    --qz-popover-shadow: var(--shadow-md);
    top: calc(100% + 5px);
    inset-inline-end: 0;
    z-index: 20;
    transform-origin: top right;
  }
  .skills-import-menu button {
    display: block;
    width: 100%;
    font-size: 12px;
  }
  .git-skill-sources-panel {
    background: var(--bg-primary);
  }
  .git-skill-sources-head {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
  }
  .git-skill-sources-head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
  }
  .git-skill-sources-head p {
    margin: 1px 0 0;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.3;
  }
  .git-skill-sources-head svg,
  .git-skill-source-action svg {
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .git-skill-source-form {
    gap: 5px;
    padding: 11px 14px 12px;
    border-bottom: 1px solid var(--border);
  }
  .git-skill-source-bind-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }
  .git-skill-source-bind-row .qz-field {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 11px;
  }
  .git-skill-source-bind-row .qz-btn {
    min-width: 50px;
  }
  .git-skill-source-support {
    color: var(--text-muted);
    font-size: 9.5px;
    line-height: 1.35;
  }
  .git-skill-source-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: start;
    gap: 9px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: transparent;
    transition: var(--transition-surface);
  }
  .git-skill-source-row:hover {
    background: var(--control-hover-fill);
  }
  .git-skill-source-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--text-muted);
  }
  .git-skill-source-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .git-skill-source-main {
    min-width: 0;
  }
  .git-skill-source-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
  }
  .git-skill-source-title a {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 620;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .git-skill-source-title a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .git-skill-source-title span {
    flex: 0 0 auto;
    max-width: 92px;
    overflow: hidden;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font: 9px/1.35 var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .git-skill-source-location {
    margin-top: 2px;
    overflow: hidden;
    color: var(--text-muted);
    font: 9.5px/1.35 var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .git-skill-source-meta {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
  }
  .git-skill-source-meta em {
    color: var(--orange);
    font-style: normal;
  }
  .git-skill-source-meta .git-skill-source-check-state {
    color: var(--text-muted);
  }
  .git-skill-source-meta .git-skill-source-check-state.update-available {
    color: var(--orange);
  }
  .git-skill-source-subpath {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .git-skill-source-actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .git-skill-source-action {
    --qz-control-size: 26px;
    --qz-control-icon-size: 15px;
  }
  .git-skill-source-apply {
    min-width: 38px;
    height: 26px;
    padding-inline: 7px;
    font-size: 10px;
  }
  .git-skill-source-action.is-spinning svg {
    animation: git-skill-source-spin 760ms linear infinite;
  }
  .git-skill-source-empty {
    padding: 28px 14px;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
  }
  .git-skill-sources-status {
    min-height: 34px;
    flex: 0 0 auto;
    gap: 7px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.4;
  }
  .git-skill-sources-status:empty {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
  }
  .git-skill-sources-status[data-tone=success] {
    color: var(--text-secondary);
  }
  .git-skill-sources-status[data-tone=error] {
    color: var(--red);
  }
  .git-skill-sources-status[data-tone=loading]::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: git-skill-source-spin 760ms linear infinite;
  }
  @keyframes git-skill-source-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .git-skill-source-action.is-spinning svg,
    .git-skill-sources-status[data-tone=loading]::before {
      animation: none;
    }
  }
  .skills-list {
    padding: 4px 0 12px;
  }
  .skill-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 10px;
  }
  .skill-card-meta > span {
    max-width: 100%;
  }
  .skill-card-meta > span:not(.skill-scope-badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-scope-badge {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: 10px var(--font-mono);
    text-transform: uppercase;
  }
  .skill-scope-badge.site {
    color: var(--text-secondary);
    border-color: var(--border);
  }
  .skill-scope-badge.resident {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--text-primary) 20%, transparent);
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  }
  .skill-system-badge {
    padding: 1px 5px;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-secondary) 54%, transparent);
    font: 10px var(--font-mono);
  }
  .skill-card-domain {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 10px 16px;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .skill-card:hover {
    background: var(--control-hover-fill);
  }
  .skill-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-card-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .skills-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
  }
  .skill-detail {
    min-height: 0;
    display: flex;
  }
  .skill-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-primary);
  }
  .skill-detail-header h3 {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-desc {
    padding: 8px 22px 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
  }
  .skill-time {
    padding: 4px 22px 10px;
    font-size: 10px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
  }
  .skill-content {
    flex: 1 1 0;
    min-height: min(360px, 52vh);
    padding: 18px 26px 34px;
    font-size: 13px;
    line-height: 1.72;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--text-primary);
  }
  .skill-detail.has-resources .skill-content {
    min-height: min(220px, 34vh);
  }
  .skill-content h1,
  .skill-content h2,
  .skill-content h3,
  .skill-content h4 {
    line-height: 1.35;
    font-weight: 650;
    color: var(--text-primary);
  }
  .skill-content h1 {
    margin: 0 0 18px;
    font-size: 21px;
    letter-spacing: 0;
  }
  .skill-content h2 {
    margin: 24px 0 12px;
    padding-top: 4px;
    font-size: 17px;
    letter-spacing: 0;
  }
  .skill-content h1:first-child,
  .skill-content h2:first-child,
  .skill-content h3:first-child {
    margin-top: 0;
  }
  .skill-content h3 {
    margin: 20px 0 9px;
    font-size: 14px;
    letter-spacing: 0;
  }
  .skill-content p {
    margin: 0 0 13px;
    color: var(--text-secondary);
  }
  .skill-content :is(p, li, blockquote, table, td, th, a, code) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .skill-content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
    text-underline-offset: 2px;
  }
  .skill-content a:hover {
    text-decoration-color: currentColor;
  }
  .skill-content ul,
  .skill-content ol {
    margin: 9px 0 16px;
    padding-left: 1.55em;
    color: var(--text-secondary);
  }
  .skill-content li {
    margin: 6px 0;
    padding-left: 2px;
  }
  .skill-content li::marker {
    color: var(--text-muted);
    font-weight: 600;
  }
  .skill-content blockquote {
    margin: 16px 0;
    padding: 10px 13px;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    color: var(--text-secondary);
  }
  .skill-content code {
    display: inline;
    max-width: 100%;
    padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--code-border) 68%, var(--border));
    border-radius: 4px;
    background: var(--code-inline-bg);
    color: color-mix(in srgb, var(--text-primary) 88%, var(--code-accent));
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: break-spaces;
    vertical-align: baseline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .skill-content pre {
    position: relative;
    max-width: 100%;
    margin: 14px 0 18px;
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    border: 0;
    border-radius: var(--block-radius);
    background: var(--block-fill);
    box-shadow: none;
    color: color-mix(in srgb, var(--text-primary) 72%, var(--text-muted));
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.5;
  }
  .skill-content .copyable-code-block {
    margin: 14px 0 18px;
  }
  .skill-content .copyable-code-block pre {
    --code-block-max-height: min(52vh, 480px);
    margin: 0;
    padding: 10px 42px 10px 12px;
    max-height: var(--code-block-max-height);
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }
  .skill-content pre code {
    display: block;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
  }
  .skill-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 14px 0 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
  }
  .skill-content th,
  .skill-content td {
    padding: 8px 10px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
  }
  .skill-content th:last-child,
  .skill-content td:last-child {
    border-right: 0;
  }
  .skill-content tr:last-child td {
    border-bottom: 0;
  }
  .skill-content th {
    background: color-mix(in srgb, var(--bg-tertiary) 72%, var(--bg-primary));
    font-weight: 600;
  }
  .skill-editor {
    flex: 1;
    padding: 12px 16px;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .skill-editor-save-btn {
    --qz-control-height: 30px;
    --qz-control-gap: 5px;
    --qz-control-font-size: 12px;
    --qz-control-font-weight: 600;
    flex: none;
  }
  .skill-editor-save-btn svg {
    flex: none;
  }
  .skill-editor.is-saving .skill-editor-save-btn {
    background: var(--accent-subtle);
    color: var(--text-secondary);
  }
  .markdown-editor {
    position: relative;
    min-height: 280px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .skill-editor.has-error .markdown-editor {
    border-color: color-mix(in srgb, var(--red) 42%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 7%, transparent);
  }
  .markdown-editor:focus-within {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 9%, transparent);
  }
  .markdown-editor textarea,
  .markdown-editor pre {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 16px;
    border: none;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    tab-size: 2;
  }
  .markdown-editor textarea {
    resize: none;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--text-primary);
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .markdown-editor textarea::placeholder {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
  }
  .markdown-editor textarea::selection {
    background: var(--selection-bg);
  }
  .markdown-editor pre {
    pointer-events: none;
    overflow: hidden;
    color: var(--syntax-plain);
  }
  .skill-mcp-editor {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 8px 8px;
    margin: 0 -8px;
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .skill-resource-edit-list {
    min-height: 0;
  }
  .skill-mcp-edit-list {
    display: grid;
  }
  .skill-mcp-timeout-row label {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 10px;
  }
  .skill-mcp-enabled {
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    min-width: 0;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
    transition: color var(--transition);
  }
  .skill-mcp-enabled:hover {
    color: var(--text-primary);
  }
  .skill-mcp-enabled:has(.skill-mcp-edit-enabled:disabled) {
    cursor: default;
    pointer-events: none;
  }
  .skill-mcp-delete-btn {
    --qz-control-size: 28px;
  }
  .skill-resource-edit-item {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    overflow: hidden;
  }
  .skill-resource-code-editor {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--bg-primary);
  }
  .skill-resource-code-editor:focus-within {
    border-color: transparent;
    box-shadow: none;
  }
  .skill-resource-delete-btn {
    --qz-control-size: 28px;
  }
  .skill-resource-edit-content,
  .skill-resource-edit-highlight {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 14px 16px 38px;
    border: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.6;
    tab-size: 2;
  }
  .skill-resource-edit-content {
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
    outline: none;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--text-primary);
  }
  .skill-resource-edit-content::placeholder {
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
  }
  .skill-resource-edit-content::selection {
    background: var(--selection-bg);
  }
  .skill-resource-edit-highlight {
    pointer-events: none;
    overflow: hidden;
    color: var(--syntax-plain);
  }
  .skill-editor-status {
    z-index: 12;
    left: 18px;
    right: 18px;
    bottom: 36px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-primary) 96%, var(--bg-elevated));
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    font-size: 11px;
    animation: panel-in var(--motion-fast) var(--ease-emphasized);
  }
  .skill-editor-status:empty {
    display: none;
  }
  .skill-editor-status.success {
    color: var(--text-secondary);
  }
  .skill-editor-status.error {
    color: var(--red);
  }
  .skill-detail-header {
    position: relative;
    top: auto;
    flex: none;
    gap: 8px;
    padding: 0 14px;
  }
  .skill-detail-title-row {
    min-width: 0;
    gap: 7px;
  }
  .skill-detail-header .skill-detail-title-row h3 {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 650;
  }
  .skill-detail-header .skill-editor-save-btn {
    min-width: 64px;
  }
  .skill-detail-header .skill-git-publish-btn {
    min-width: 82px;
    flex: none;
    white-space: nowrap;
  }
  .skill-git-publish-btn svg {
    flex: none;
  }
  .skill-editor-save-btn.saved,
  .skill-editor-save-btn.saved:hover {
    background: transparent;
    border-color: var(--border);
    color: var(--text-secondary);
    opacity: 1;
  }
  .skill-save-icon-check {
    display: none;
  }
  .skill-editor-save-btn.saved .skill-save-icon-save {
    display: none;
  }
  .skill-editor-save-btn.saved .skill-save-icon-check {
    display: block;
  }
  .skill-detail-actions .skill-header-action {
    width: 32px;
    height: 32px;
  }
  .skill-actions-menu {
    --qz-menu-padding: 4px;
    z-index: 24;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    max-height: none;
    overflow: visible;
  }
  .skill-actions-menu-item {
    width: 100%;
    gap: 9px;
    font: inherit;
  }
  .skill-actions-menu-item svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .skill-actions-menu-separator {
    margin: 4px 6px;
    background: var(--border);
  }
  .skill-actions-menu-danger {
    color: var(--red);
  }
  .skill-actions-menu-danger:hover,
  .skill-actions-menu-danger:focus-visible {
    background: var(--danger-subtle);
    color: var(--red);
  }
  .skill-detail[data-readonly=true] #btn-skill-settings,
  .skill-detail[data-readonly=true] .skill-actions-menu-separator,
  .skill-detail[data-readonly=true] #btn-delete-skill {
    display: none;
  }
  .skill-context-action-slot {
    position: relative;
    flex: 0 0 32px;
  }
  .skill-context-action-slot .skill-context-action {
    position: absolute;
    inset: 0;
  }
  .skill-detail[data-readonly=true] .skill-context-action-slot {
    display: none;
  }
  .skill-detail[data-readonly=true] .skill-git-publish-btn {
    display: none;
  }
  .skill-git-publish-confirm {
    inset: 0;
    z-index: 8;
    display: flex;
    animation: modal-fade-in var(--motion-slow) var(--ease-standard);
  }
  .skill-git-publish-confirm.hidden {
    display: none;
  }
  .skill-git-publish-backdrop {
    --qz-control-bg: var(--modal-backdrop);
    --qz-control-bg-hover: var(--modal-backdrop);
    --qz-control-bg-pressed: var(--modal-backdrop);
    inset: 0;
    appearance: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--modal-backdrop);
    box-shadow: none;
    cursor: default;
  }
  .skill-git-publish-backdrop:disabled {
    opacity: 1;
  }
  .skill-git-publish-backdrop:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
  }
  .skill-git-publish-sheet {
    padding: 16px 14px 14px;
    border: 1px solid var(--modal-card-border);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--modal-card-surface);
    box-shadow: var(--modal-card-shadow);
    animation: drawer-up var(--motion-slow) var(--ease-emphasized);
  }
  .skill-git-publish-heading {
    gap: 9px;
  }
  .skill-git-publish-mark {
    flex: 0 0 28px;
    color: var(--text-secondary);
  }
  .skill-git-publish-heading > div {
    min-width: 0;
  }
  .skill-git-publish-heading h4 {
    margin: 1px 0 0;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
  }
  .skill-git-publish-heading p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-git-publish-target {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 9px;
    margin: 12px 0;
    padding: 9px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .skill-git-publish-target > span {
    color: var(--text-muted);
    font-size: 10px;
  }
  .skill-git-publish-target code {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-git-publish-target small {
    grid-column: 2;
    color: var(--text-muted);
    font-size: 9.5px;
  }
  .skill-git-publish-message {
    gap: 5px;
  }
  .skill-git-publish-message > span {
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 550;
  }
  .skill-git-publish-message .qz-field {
    width: 100%;
  }
  .skill-git-publish-note {
    margin: 7px 0 0;
    color: var(--text-muted);
    font-size: 9.5px;
    line-height: 1.45;
  }
  .skill-git-publish-status {
    min-height: 17px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
  }
  .skill-git-publish-status:empty {
    min-height: 0;
    margin-top: 0;
  }
  .skill-git-publish-status[data-tone=error] {
    color: var(--red);
  }
  .skill-git-publish-status[data-tone=loading]::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: git-skill-source-spin 760ms linear infinite;
  }
  .skill-workbench-tabs {
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
  }
  .skill-workbench-tab-track {
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
  }
  .skill-workbench-tab {
    padding: 0 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .skill-workbench-tab:hover {
    background: color-mix(in srgb, var(--bg-elevated) 58%, transparent);
    color: var(--text-primary);
  }
  .skill-workbench-tab.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
  }
  .skill-workbench-tab:focus-visible,
  .skill-config-scope button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--border-focus);
  }
  .skill-workbench-tab-count {
    color: var(--text-muted);
    font: 9px/1 var(--font-mono);
  }
  .skill-workbench-body textarea {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .skill-workbench-panel {
    inset: 0;
    min-width: 0;
    min-height: 0;
    display: none;
    overflow: hidden;
    background: var(--bg-primary);
  }
  .skill-workbench-panel.active {
    display: flex;
    animation: none;
  }
  .skill-workbench-panel.skill-mcp-editor {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  @keyframes skill-workbench-panel-in {
    from {
      opacity: 0.72;
      transform: translate3d(0, 3px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
  .skill-workbench-panel.active > * {
    animation: skill-workbench-panel-in var(--motion-base) var(--ease-standard) both;
  }
  .skill-content-preview {
    min-height: 0;
    flex: 1;
    overscroll-behavior: contain;
  }
  .skill-content-preview .skill-time {
    padding: 20px 25px 0;
    border: 0;
    color: var(--text-muted);
    font-size: 10px;
  }
  .skill-content-preview .skill-desc {
    padding: 7px 25px 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
  }
  .skill-content-preview .skill-content {
    min-height: 0;
    flex: none;
    padding: 20px 25px 44px;
    overflow: visible;
  }
  .skill-content-preview .skill-desc:empty,
  .skill-content-preview .skill-time:empty {
    display: none;
  }
  .skill-workbench-panel .skill-editor {
    min-width: 0;
    min-height: 0;
    flex: 1;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }
  .skill-body-editor,
  .skill-source-editor .markdown-editor {
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: var(--bg-primary);
  }
  .skill-body-editor:focus-within,
  .skill-source-editor .markdown-editor:focus-within {
    border-color: transparent;
    box-shadow: none;
  }
  .skill-workbench-statusbar {
    padding: 0 13px;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 10px;
  }
  .skill-workbench-status-right {
    font-family: var(--font-mono);
  }
  .skill-workbench-subview {
    inset: 0;
    z-index: 8;
    background: var(--bg-primary);
    animation: none;
  }
  .skill-workbench-subview:not(.hidden) > * {
    animation: skill-workbench-panel-in var(--motion-base) var(--ease-standard) both;
  }
  .skill-subview-header {
    flex: none;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
  }
  .skill-subview-header strong {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
  }
  .skill-settings-scroll {
    min-height: 0;
    flex: 1;
    padding: 0 14px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .skill-config-section {
    padding: 12px 2px;
    border-bottom: 1px solid var(--border);
  }
  .skill-config-grid {
    display: grid;
    gap: 8px;
  }
  .skill-config-identity-grid {
    column-gap: 9px;
  }
  .skill-config-description-field {
    grid-column: 1 / -1;
  }
  .skill-config-grid label {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 500;
  }
  .skill-config-grid textarea {
    resize: none;
    overflow-y: hidden;
  }
  #skill-config-description {
    min-height: 40px;
  }
  .skill-config-scope-row {
    grid-template-columns: minmax(72px, min-content) minmax(0, 1fr);
  }
  .skill-config-row-label {
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 500;
  }
  .skill-config-scope {
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .skill-config-scope button {
    height: 26px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-surface);
  }
  .skill-config-scope button:hover {
    background: color-mix(in srgb, var(--bg-elevated) 58%, transparent);
    color: var(--text-primary);
  }
  .skill-config-scope button.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
  }
  .skill-config-scope-fields {
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
  .skill-config-scope-fields label {
    grid-template-columns: minmax(72px, min-content) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }
  .skill-config-scope-fields label > span {
    padding-top: 7px;
  }
  .skill-config-scope-fields textarea {
    min-height: 31px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .skill-config-scope-fields.hidden {
    display: none !important;
  }
  .skill-config-enabled {
    min-height: 35px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    cursor: pointer;
  }
  .skill-config-enabled strong {
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 600;
  }
  .skill-config-advanced {
    border-bottom: 0;
  }
  .skill-source-link {
    width: 100%;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 16px;
    gap: 7px;
    margin: 0 -6px;
    padding: 5px 6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    text-align: start;
    cursor: pointer;
  }
  .skill-source-link-icon {
    color: var(--text-muted);
  }
  .skill-source-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .skill-source-link strong {
    display: block;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 600;
    transition: color var(--transition);
  }
  .skill-source-link:hover {
    background: var(--control-hover-fill);
  }
  .skill-source-link:hover strong {
    color: var(--text-primary);
  }
  @media (max-width: 380px) {
    .skill-settings-scroll {
      padding-right: 10px;
      padding-left: 10px;
    }
    .skill-config-scope-row,
    .skill-config-scope-fields label {
      grid-template-columns: minmax(56px, min-content) minmax(0, 1fr);
    }
    .skill-config-scope-fields textarea {
      font-size: 11px;
    }
  }
  .skill-source-editor {
    min-height: 0;
  }
  .skill-resource-edit-list,
  .skill-mcp-edit-list {
    min-width: 0;
    min-height: 0;
    flex: 1;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .skill-resource-list-row,
  .skill-mcp-list-row {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--transition);
  }
  .skill-resource-list-row:hover,
  .skill-mcp-list-row:hover {
    background: var(--control-hover-fill);
  }
  .skill-list-type-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
  }
  .skill-list-type-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .skill-list-type-label {
    font: 10px/1 var(--font-mono);
  }
  .skill-list-row-main {
    min-width: 0;
  }
  .skill-list-row-title,
  .skill-list-row-subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .skill-list-row-title {
    color: var(--text-primary);
    font: 600 11.5px/1.4 var(--font-mono);
  }
  .skill-list-row-subtitle {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
  }
  .skill-list-row-meta {
    color: var(--text-muted);
    font: 10px/1 var(--font-mono);
    white-space: nowrap;
  }
  .skill-list-row-chevron {
    color: var(--text-muted);
  }
  .skill-list-row-chevron svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .skill-list-empty {
    padding: 22px 16px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
  }
  .skill-resource-edit-shell,
  .skill-mcp-edit-item {
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--bg-primary);
  }
  .skill-resource-edit-shell .skill-resource-edit-item {
    min-width: 0;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }
  .skill-resource-detail-header,
  .skill-mcp-detail-header {
    height: 54px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-bottom: 1px solid var(--border);
  }
  .skill-resource-detail-name,
  .skill-mcp-detail-header strong {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font: 600 12px/1.4 var(--font-mono);
  }
  .skill-resource-detail-name {
    flex: 0 1 auto;
    margin-left: -5px;
    padding: 3px 5px;
    border-radius: var(--radius-sm);
    outline: none;
  }
  .skill-resource-detail-name[role=button] {
    cursor: text;
    transition: background-color var(--transition), color var(--transition);
  }
  .skill-resource-detail-name[role=button]:hover {
    background: var(--control-hover-fill);
  }
  .skill-resource-detail-name[role=button]:focus-visible {
    box-shadow: inset 0 -1px 0 var(--border-focus);
  }
  .skill-resource-inline-name {
    min-width: 0;
    height: 30px;
    flex: 1;
    margin-left: -5px;
    padding: 0 5px;
    border: 1px solid var(--border-focus);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: 600 12px/1.4 var(--font-mono);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 8%, transparent);
  }
  .skill-resource-inline-name.invalid {
    border-color: color-mix(in srgb, var(--red) 58%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 9%, transparent);
  }
  .skill-resource-detail-header .skill-resource-delete-btn {
    margin-left: auto;
  }
  .skill-mcp-detail-header strong {
    flex: 0 1 auto;
  }
  .skill-mcp-detail-header .skill-mcp-enabled {
    align-self: center;
    flex: 0 0 auto;
    height: 26px;
    padding: 0 4px;
  }
  .skill-mcp-detail-header .skill-mcp-delete-btn {
    margin-left: auto;
  }
  .skill-detail[data-readonly=true] :is(#btn-publish-skill-git, #btn-save-skill-edit-top, #btn-export-skill, #btn-delete-skill, #btn-edit-skill, #btn-skill-settings, #btn-add-skill-resource, #btn-add-skill-mcp, .skill-resource-delete-btn, .skill-mcp-delete-btn) {
    display: none !important;
  }
  .skill-mcp-edit-item {
    overflow-y: auto;
  }
  .skill-mcp-timeout-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 9px;
  }
  .skill-mcp-form-section {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .skill-mcp-form-section label:not(.skill-mcp-enabled) {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
  }
  .skill-mcp-edit-id,
  .skill-mcp-edit-url,
  .skill-mcp-edit-timeout,
  .skill-mcp-edit-call-timeout,
  .skill-mcp-edit-headers {
    min-height: 34px;
    padding: 8px 10px;
    --qz-field-font-size: 12px;
  }
  .skill-mcp-edit-headers {
    min-height: 92px;
    --qz-field-font-size: 11px;
    resize: vertical;
    line-height: 1.45;
  }
  .skill-mcp-test-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 14px 16px;
  }
  .skill-mcp-test-row .qz-btn {
    min-width: 84px;
    height: 34px;
    padding: 0 12px;
    line-height: 1;
    white-space: nowrap;
  }
  .skill-mcp-test-result {
    display: none;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: text;
  }
  .skill-mcp-test-result:not(:empty) {
    display: block;
  }
  .skill-mcp-test-result.success {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    min-height: 34px;
    padding: 0 2px;
    background: transparent;
    color: var(--text-muted);
    white-space: nowrap;
  }
  .skill-mcp-test-result.success::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 999px;
    background: var(--green);
    opacity: 0.82;
  }
  .skill-mcp-test-result.error {
    grid-column: 1 / -1;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    color: var(--red);
    background: var(--danger-subtle);
  }
  #skill-source-status.error {
    color: var(--red);
  }
  .skill-mcp-connected {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
  }
  .skill-mcp-connected::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--green);
    opacity: 0.82;
  }
  .skill-detail.has-error .skill-body-editor,
  .skill-detail.has-error .skill-source-editor .markdown-editor,
  .skill-detail.has-resource-error #skill-detail-resources,
  .skill-detail.has-mcp-error #skill-mcp-editor {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 42%, var(--border));
  }
  .skill-detail .skill-search-bar {
    top: 98px;
  }
  @media (max-width: 380px) {
    .skill-detail-header {
      padding: 0 8px;
      gap: 5px;
    }
    .skill-detail-header .skill-editor-save-btn {
      width: 32px;
      min-width: 32px;
      padding: 0;
    }
    .skill-detail-header .skill-editor-save-btn > span {
      display: none;
    }
    .skill-detail-header .skill-git-publish-btn {
      width: 32px;
      min-width: 32px;
      padding: 0;
    }
    .skill-detail-header .skill-git-publish-btn > span {
      display: none;
    }
    .skill-workbench-tabs {
      padding: 0 6px;
    }
    .skill-content-preview .skill-time,
    .skill-content-preview .skill-desc,
    .skill-content-preview .skill-content {
      padding-left: 18px;
      padding-right: 18px;
    }
    .skill-resource-list-row,
    .skill-mcp-list-row {
      padding-left: 12px;
      padding-right: 12px;
    }
    .skill-mcp-test-row .qz-btn {
      justify-self: start;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .skill-git-publish-confirm,
    .skill-git-publish-sheet,
    .skill-git-publish-status[data-tone=loading]::before {
      animation: none;
    }
  }
  .chat-search-hit.skill-search-active {
    background: color-mix(in srgb, #f1c40f 72%, transparent);
    outline: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    scroll-margin-block: 72px;
  }
  .skill-resource-code-editor :is(.hljs-comment, .hljs-quote, .hljs-emphasis, .hljs-strong) {
    font-style: normal;
    font-weight: inherit;
  }
  .tool-details-streaming.tool-details-create_skill,
  .tool-details-streaming.tool-details-edit_skill_resource,
  .tool-details-streaming.tool-details-update_skill,
  .tool-details-streaming.tool-details-skill-edit {
    max-height: none;
    overflow: visible;
  }
  .tool-details-create_skill .tool-skill-content-preview,
  .tool-details-skill-edit .tool-skill-content-preview,
  .tool-timeline-slot-body.tool-details-create_skill .tool-skill-content-preview {
    max-height: min(42vh, 360px);
    font-family: var(--font-mono);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.58;
    overscroll-behavior-y: auto;
  }
  .tool-details-streaming.tool-details-create_skill .tool-skill-content-preview,
  .tool-details-streaming.tool-details-skill-edit .tool-skill-content-preview,
  .tool-timeline-slot-body.tool-details-streaming.tool-details-create_skill .tool-skill-content-preview {
    height: clamp(150px, 26vh, 240px);
    max-height: clamp(150px, 26vh, 240px);
  }
  .tool-details-load_skill_resource .tool-skill-resource-section,
  .tool-details-edit_skill_resource .tool-skill-resource-section,
  .tool-timeline-slot-body.tool-details-load_skill_resource .tool-skill-resource-section,
  .tool-timeline-slot-body.tool-details-edit_skill_resource .tool-skill-resource-section {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--block-radius);
    background: color-mix(in srgb, var(--bg-primary) 80%, var(--bg-secondary));
  }
  .tool-skill-resource-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
  }
  .tool-skill-resource-title {
    min-width: 0;
    color: var(--text-primary);
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-skill-resource-meta {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: calc(10px * var(--chat-text-scale, 1));
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tool-skill-resource-section .copyable-code-block {
    margin: 0;
  }
  .tool-skill-resource-code,
  .tool-details-load_skill_resource .tool-skill-resource-code,
  .tool-details-edit_skill_resource .tool-skill-resource-code,
  .tool-timeline-slot-body.tool-details-load_skill_resource .tool-skill-resource-code,
  .tool-timeline-slot-body.tool-details-edit_skill_resource .tool-skill-resource-code {
    max-height: min(46vh, 420px);
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 0;
    background: var(--block-fill);
    white-space: pre;
    word-break: normal;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
  }
  .tool-details-streaming .tool-skill-resource-code,
  .tool-details-streaming.tool-details-edit_skill_resource .tool-skill-resource-code,
  .tool-timeline-slot-body.tool-details-streaming .tool-skill-resource-code,
  .tool-timeline-slot-body.tool-details-streaming.tool-details-edit_skill_resource .tool-skill-resource-code {
    height: clamp(170px, 30vh, 300px);
    max-height: clamp(170px, 30vh, 300px);
  }
  .tool-skill-resource-section .tool-more-hint {
    margin: 0;
    padding: 7px 10px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-secondary) 60%, transparent);
  }
  .tool-danger-result {
    margin-top: 8px;
    padding: 8px 9px;
    border: 1px solid color-mix(in srgb, var(--red) 18%, var(--border));
    border-radius: var(--block-radius);
    background: color-mix(in srgb, var(--red) 7%, var(--bg-primary));
  }
  .tool-danger-title {
    color: color-mix(in srgb, var(--red) 72%, var(--text-primary));
    font-size: calc(12px * var(--chat-text-scale, 1));
    font-weight: 560;
    line-height: 1.45;
  }
  .tool-danger-subtitle {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: calc(11px * var(--chat-text-scale, 1));
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  .tool-danger-result .tool-compact-meta {
    margin-top: 6px;
  }
  .tool-danger-result-muted {
    border-color: var(--border);
    background: var(--block-fill);
  }
  .tool-details-update_skill .tool-diff-block,
  .tool-details-skill-edit .tool-diff-block,
  .tool-timeline-slot-body.tool-details-update_skill .tool-diff-block {
    max-height: clamp(150px, 28vh, 240px);
    overscroll-behavior-y: auto;
    scrollbar-gutter: stable;
  }
  .tool-details-streaming.tool-details-update_skill .tool-diff-block,
  .tool-details-streaming.tool-details-skill-edit .tool-diff-block,
  .tool-timeline-slot-body.tool-details-streaming.tool-details-update_skill .tool-diff-block {
    height: clamp(150px, 26vh, 240px);
    max-height: clamp(150px, 26vh, 240px);
  }
  .resource-ref-pill.skill {
    border-color: color-mix(in srgb, var(--code-accent) 22%, var(--border));
  }
  .tool-alert-message {
    color: var(--text-secondary);
    font-size: calc(13px * var(--chat-text-scale, 1));
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}
@property --tw-leading { syntax: "*"; inherits: false; }
@property --tw-font-weight { syntax: "*"; inherits: false; }
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */


    :host { height: auto; min-height: 100%; overflow: visible; }
    :host { background: var(--bg-primary); }
    .session-export-shell {
      --session-export-title-height: 30px;
      --chat-sticky-offset: var(--session-export-title-height);
      position: relative;
      width: min(var(--lane-detail-width), calc(100vw - 48px));
      min-height: 100vh;
      margin: 0 auto;
      padding: 0 0 44px;
    }
    #app {
      width: 100%;
      min-height: 100vh;
      height: auto;
      overflow: visible;
      z-index: 1;
      background: transparent;
    }
    #messages {
      flex: none;
      width: 100%;
      min-height: calc(100vh - 32px);
      overflow: visible;
      padding-bottom: 42px;
      align-items: flex-start;
    }
    #messages::before { height: 18px; }
    .session-title-bar {
      display: flex;
      align-items: center;
      height: var(--session-export-title-height);
      min-height: var(--session-export-title-height);
      padding: 0 8px 0 10px;
      position: sticky;
      top: 0;
      z-index: 20;
    }
    .session-title-bar > #current-session-title {
      flex: 1 1 auto;
      min-width: 0;
    }
    .session-export-logo {
      position: absolute;
      top: 50px;
      right: 92px;
      z-index: 0;
      display: block;
      width: 220px;
      height: 220px;
      opacity: 0.038;
      pointer-events: none;
    }
    .session-export-logo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .session-export-logo-night { display: none !important; }
    .session-export-continuation {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 7px;
      height: 100%;
      margin-left: auto;
      color: var(--text-muted);
      font-size: 11px;
      white-space: nowrap;
    }
    .session-export-cta {
      flex: 0 0 auto;
    }
    .session-export-cta[hidden] { display: none; }
    .msg-actions,
    .msg-user-actions,
    .waiting-actions,
    .artifact-strip-open,
    .recovery-actions,
    .tool-timeline-raw-btn,
    .tool-timeline-raw-panel,
    .tool-timeline-collapse-btn,
    .tool-event-raw-btn,
    .tool-event-raw-panel,
    .tool-event-collapse-btn { display: none !important; }
    .static-transcript-template { display: none !important; }
    @media (max-width: 920px) {
      .session-export-shell { width: min(calc(100vw - 44px), var(--lane-detail-width)); }
    }
    @media (max-width: 640px) {
      #messages { padding-inline: 12px; }
      .session-export-logo {
        top: 58px;
        right: 20px;
        width: 180px;
        height: 180px;
      }
    }
    @media (max-width: 420px) {
      .session-export-shell { width: min(calc(100vw - 40px), var(--lane-detail-width)); }
      .session-export-continuation { font-size: 10px; }
    }
    @media (prefers-color-scheme: dark) {
      .session-export-logo { opacity: 0.075; }
      .session-export-logo-day { display: none !important; }
      .session-export-logo-night { display: block !important; }
    }