@hexclave/next 1.0.2 → 1.0.5

package/dist/esm/dev-tool/dev-tool-styles.d.ts

@@ -1,5 +1,5 @@
 //#region src/dev-tool/dev-tool-styles.d.ts
-declare const devToolCSS = "\n  .stack-devtool {\n    --sdt-bg: #0a0a0b;\n    --sdt-bg-elevated: #141416;\n    --sdt-bg-hover: #1c1c1f;\n    --sdt-bg-active: #232326;\n    --sdt-bg-subtle: #111113;\n    --sdt-border: #2a2a2e;\n    --sdt-border-subtle: #1e1e22;\n    --sdt-text: #ececef;\n    --sdt-text-secondary: #8b8b93;\n    --sdt-text-tertiary: #5c5c66;\n    --sdt-accent: #6366f1;\n    --sdt-accent-hover: #818cf8;\n    --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n    --sdt-success: #22c55e;\n    --sdt-success-muted: rgba(34, 197, 94, 0.15);\n    --sdt-warning: #eab308;\n    --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n    --sdt-error: #ef4444;\n    --sdt-error-muted: rgba(239, 68, 68, 0.15);\n    --sdt-info: #3b82f6;\n    --sdt-info-muted: rgba(59, 130, 246, 0.15);\n    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n    --sdt-radius: 8px;\n    --sdt-radius-sm: 4px;\n    --sdt-radius-lg: 12px;\n    --sdt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --sdt-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;\n    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n\n    all: initial;\n    font-family: var(--sdt-font);\n    color: var(--sdt-text);\n    font-size: 13px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    box-sizing: border-box;\n  }\n\n  .stack-devtool *, .stack-devtool *::before, .stack-devtool *::after {\n    box-sizing: border-box;\n  }\n\n  /* Trigger pill */\n  .stack-devtool .sdt-trigger {\n    position: fixed;\n    z-index: 2147483647;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border);\n    border-radius: 10px;\n    cursor: grab;\n    box-shadow: var(--sdt-trigger-shadow);\n    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n    user-select: none;\n    touch-action: none;\n  }\n\n  .stack-devtool .sdt-trigger-position-animated {\n    transition: left 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  .stack-devtool .sdt-trigger:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-accent);\n    box-shadow: var(--sdt-trigger-shadow), 0 0 0 1px var(--sdt-accent);\n  }\n\n  .stack-devtool .sdt-trigger:active {\n    cursor: grabbing;\n  }\n\n  .stack-devtool .sdt-trigger-logo {\n    width: 22px;\n    height: 22px;\n    border-radius: 6px;\n    background: var(--sdt-accent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    line-height: 0;\n  }\n\n  /* Panel overlay */\n  .stack-devtool .sdt-panel {\n    position: fixed;\n    bottom: 60px;\n    right: 16px;\n    z-index: 99998;\n    width: 800px;\n    max-width: calc(100vw - 32px);\n    height: 520px;\n    max-height: calc(100vh - 80px);\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-lg);\n    box-shadow: var(--sdt-shadow);\n    display: flex;\n    flex-direction: column;\n    overflow: visible;\n  }\n\n  .stack-devtool .sdt-panel-geometry-animated {\n    transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                height 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                right 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                bottom 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                border-radius 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                border-color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n\n  .stack-devtool .sdt-panel-fullscreen {\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: none;\n    height: 100vh;\n    max-height: none;\n    border: none;\n    border-radius: 0;\n  }\n\n  .stack-devtool .sdt-panel-inner {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: var(--sdt-radius-lg);\n    animation: sdt-panel-enter 0.2s ease-out;\n  }\n\n  .stack-devtool .sdt-panel-fullscreen .sdt-panel-inner {\n    border-radius: 0;\n  }\n\n  .stack-devtool .sdt-panel-fullscreen .sdt-resize-handle {\n    display: none;\n  }\n\n  @keyframes sdt-panel-enter {\n    from {\n      opacity: 0;\n      transform: scale(0.95) translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n    }\n  }\n\n  .stack-devtool .sdt-panel-exiting {\n    animation: sdt-panel-exit 0.15s ease-in forwards;\n  }\n\n  @keyframes sdt-panel-exit {\n    from {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95) translateY(8px);\n    }\n  }\n\n  /* Tab bar */\n  .stack-devtool .sdt-tabbar {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: 44px;\n    padding: 0 8px;\n    background: var(--sdt-bg-subtle);\n    border-bottom: 1px solid var(--sdt-border);\n    flex-shrink: 0;\n    gap: 2px;\n    overflow-x: auto;\n  }\n\n  .stack-devtool .sdt-panel-fullscreen .sdt-tabbar {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    right: 8px;\n    z-index: 2;\n    background: var(--sdt-overlay-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius);\n    box-shadow: var(--sdt-trigger-shadow);\n  }\n\n  .stack-devtool .sdt-tab-indicator {\n    position: absolute;\n    top: 6px;\n    left: 0;\n    height: 32px;\n    background: var(--sdt-bg-active);\n    border-radius: var(--sdt-radius);\n    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n                width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .stack-devtool .sdt-tab {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    height: 32px;\n    padding: 0 12px;\n    background: transparent;\n    border: none;\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    transition: color 0.15s ease;\n    white-space: nowrap;\n    outline: none;\n  }\n\n  .stack-devtool .sdt-tab:hover {\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-tab[data-active=\"true\"] {\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-tab-icon {\n    width: 14px;\n    height: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-tabbar-spacer {\n    flex: 1;\n  }\n\n  .stack-devtool .sdt-tabbar-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-docs-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 28px;\n    padding: 0 8px;\n    color: var(--sdt-text-secondary);\n    border-radius: var(--sdt-radius-sm);\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    transition: color 0.15s ease, background 0.15s ease;\n  }\n\n  .stack-devtool .sdt-docs-link:hover {\n    color: var(--sdt-text);\n    background: var(--sdt-bg-hover);\n  }\n\n  .stack-devtool .sdt-docs-link-icon {\n    display: flex;\n    width: 13px;\n    height: 13px;\n    line-height: 0;\n  }\n\n  .stack-devtool .sdt-close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: transparent;\n    border: none;\n    border-radius: var(--sdt-radius-sm);\n    cursor: pointer;\n    color: var(--sdt-text-tertiary);\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-close-btn:hover {\n    color: var(--sdt-text);\n    background: var(--sdt-bg-hover);\n  }\n\n  /* Tab content area */\n  .stack-devtool .sdt-content {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  .stack-devtool .sdt-panel-fullscreen .sdt-content {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .stack-devtool .sdt-tab-layers {\n    position: absolute;\n    inset: 0;\n  }\n\n  .stack-devtool .sdt-tab-pane {\n    position: absolute;\n    inset: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .stack-devtool .sdt-tab-pane-iframe {\n    padding: 0;\n    overflow: hidden;\n  }\n\n  .stack-devtool .sdt-tab-pane-active {\n    visibility: visible;\n    pointer-events: auto;\n    animation: sdt-tab-fade-in 0.15s ease-out;\n  }\n\n  @keyframes sdt-tab-fade-in {\n    from {\n      opacity: 0;\n      transform: translateY(6px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .stack-devtool .sdt-tab-pane::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .stack-devtool .sdt-tab-pane::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .stack-devtool .sdt-tab-pane::-webkit-scrollbar-thumb {\n    background: var(--sdt-border);\n    border-radius: 3px;\n  }\n\n  /* ===== Overview tab \u2014 single column ===== */\n\n  .stack-devtool .sdt-ov {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    max-width: 660px;\n    margin: 0 auto;\n  }\n\n  /* Card base */\n  .stack-devtool .sdt-ov-card {\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: 12px;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    transition: box-shadow 0.2s ease, border-color 0.2s ease;\n    overflow: hidden;\n    min-width: 0;\n  }\n\n  .stack-devtool .sdt-ov-card-hero {\n    background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, transparent 50%), var(--sdt-bg-elevated);\n  }\n\n  .stack-devtool .sdt-ov-label {\n    font-size: 9px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--sdt-text-tertiary);\n    margin-bottom: 10px;\n  }\n\n  .stack-devtool .sdt-ov-user-row {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    margin-bottom: 14px;\n  }\n\n  .stack-devtool .sdt-ov-avatar {\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: var(--sdt-bg-hover);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--sdt-text-tertiary);\n    flex-shrink: 0;\n    border: 2px solid var(--sdt-border-subtle);\n    overflow: hidden;\n  }\n\n  .stack-devtool .sdt-ov-avatar-active {\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-accent);\n    border-color: rgba(99,102,241,0.3);\n  }\n\n  .stack-devtool .sdt-ov-avatar img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 50%;\n  }\n\n  .stack-devtool .sdt-ov-user-meta {\n    min-width: 0;\n    flex: 1;\n  }\n\n  .stack-devtool .sdt-ov-user-name {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--sdt-text);\n    line-height: 1.2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .stack-devtool .sdt-ov-user-email {\n    font-size: 12px;\n    font-family: var(--sdt-font-mono);\n    color: var(--sdt-text-secondary);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .stack-devtool .sdt-ov-auth-indicator {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    margin-top: 5px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--sdt-success);\n  }\n\n  .stack-devtool .sdt-ov-auth-indicator::before {\n    content: '';\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: var(--sdt-success);\n    box-shadow: 0 0 6px rgba(34,197,94,0.5);\n  }\n\n  /* Actions */\n  .stack-devtool .sdt-ov-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-top: 4px;\n  }\n\n  .stack-devtool .sdt-ov-btn {\n    height: 30px;\n    padding: 0 12px;\n    border-radius: 6px;\n    border: none;\n    font-size: 12px;\n    font-weight: 600;\n    font-family: var(--sdt-font);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n  }\n  .stack-devtool .sdt-ov-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n  .stack-devtool .sdt-ov-btn-primary {\n    background: var(--sdt-accent);\n    color: #fff;\n  }\n  .stack-devtool .sdt-ov-btn-primary:hover { background: var(--sdt-accent-hover); }\n\n  .stack-devtool .sdt-ov-btn-secondary {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n  .stack-devtool .sdt-ov-btn-secondary:hover { background: var(--sdt-bg-active); }\n\n  .stack-devtool .sdt-ov-btn-danger {\n    background: var(--sdt-error-muted);\n    color: var(--sdt-error);\n    border: 1px solid rgba(239, 68, 68, 0.15);\n  }\n  .stack-devtool .sdt-ov-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }\n\n  .stack-devtool .sdt-ov-btn-wide { flex: 1; }\n\n  .stack-devtool .sdt-ov-email-input {\n    display: flex;\n    flex: 1 1 180px;\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: 6px;\n    overflow: hidden;\n    background: var(--sdt-bg);\n    transition: border-color 0.15s ease;\n  }\n  .stack-devtool .sdt-ov-email-input:focus-within {\n    border-color: var(--sdt-accent);\n    box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n  }\n  .stack-devtool .sdt-ov-email-input input {\n    flex: 1;\n    height: 28px;\n    padding: 0 8px;\n    background: transparent;\n    border: none;\n    color: var(--sdt-text);\n    font-size: 11px;\n    font-family: var(--sdt-font);\n    outline: none;\n    min-width: 0;\n  }\n  .stack-devtool .sdt-ov-email-input input::placeholder { color: var(--sdt-text-tertiary); }\n  .stack-devtool .sdt-ov-email-input button {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-left: 1px solid var(--sdt-border-subtle);\n    background: transparent;\n    color: var(--sdt-accent);\n    cursor: pointer;\n    flex-shrink: 0;\n    font-family: var(--sdt-font);\n  }\n  .stack-devtool .sdt-ov-email-input button:hover { background: var(--sdt-accent-muted); }\n  .stack-devtool .sdt-ov-email-input button:disabled { opacity: 0.3; cursor: not-allowed; }\n\n  .stack-devtool .sdt-ov-toast {\n    font-size: 11px;\n    padding: 5px 10px;\n    border-radius: 6px;\n    margin-top: 8px;\n    line-height: 1.4;\n  }\n  .stack-devtool .sdt-ov-toast-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n  .stack-devtool .sdt-ov-toast-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n\n  /* --- Auth methods card --- */\n  .stack-devtool .sdt-ov-card-auth {\n    padding: 14px 16px;\n  }\n\n  .stack-devtool .sdt-ov-auth-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n\n  .stack-devtool .sdt-ov-method {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg);\n    transition: all 0.15s ease;\n  }\n\n  .stack-devtool .sdt-ov-method-on {\n    color: var(--sdt-text);\n    background: var(--sdt-success-muted);\n    border-color: rgba(34, 197, 94, 0.12);\n  }\n\n  .stack-devtool .sdt-ov-method-off {\n    color: var(--sdt-text-tertiary);\n    opacity: 0.5;\n    border-style: dashed;\n  }\n\n  .stack-devtool .sdt-ov-method-oauth {\n    text-transform: capitalize;\n  }\n\n  .stack-devtool .sdt-ov-method-warn {\n    color: var(--sdt-warning);\n    border-color: rgba(234, 179, 8, 0.2);\n  }\n\n  .stack-devtool .sdt-ov-skeleton-pill {\n    width: 64px;\n    height: 26px;\n    border-radius: 6px;\n    background: var(--sdt-bg-hover);\n    border: 1px solid var(--sdt-border-subtle);\n    animation: sdt-ov-shimmer 1.5s ease-in-out infinite;\n  }\n\n  @keyframes sdt-ov-shimmer {\n    0%, 100% { opacity: 0.4; }\n    50% { opacity: 0.7; }\n  }\n\n  /* --- Setup checklist card (only shown when something is incomplete) --- */\n  .stack-devtool .sdt-ov-card-checks {\n    padding: 14px 16px;\n    border-color: rgba(234, 179, 8, 0.25);\n  }\n\n  .stack-devtool .sdt-ov-checks-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    margin-bottom: 8px;\n  }\n\n  .stack-devtool .sdt-ov-checks-badge {\n    font-size: 10px;\n    font-weight: 700;\n    padding: 1px 6px;\n    border-radius: 4px;\n  }\n\n  .stack-devtool .sdt-ov-checks-badge-ok {\n    background: var(--sdt-success-muted);\n    color: var(--sdt-success);\n  }\n\n  .stack-devtool .sdt-ov-checks-badge-warn {\n    background: var(--sdt-warning-muted);\n    color: var(--sdt-warning);\n  }\n\n  .stack-devtool .sdt-ov-checks-bar {\n    height: 3px;\n    border-radius: 2px;\n    background: var(--sdt-border-subtle);\n    margin-bottom: 10px;\n    overflow: hidden;\n  }\n\n  .stack-devtool .sdt-ov-checks-bar-fill {\n    height: 100%;\n    border-radius: 2px;\n    background: var(--sdt-warning);\n    transition: width 0.4s ease;\n  }\n\n  .stack-devtool .sdt-ov-setup-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 0;\n    font-size: 12px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n  }\n\n  .stack-devtool .sdt-ov-setup-row:last-child { border-bottom: none; }\n\n  .stack-devtool .sdt-ov-setup-dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-ov-setup-dot-ok { background: var(--sdt-success); }\n  .stack-devtool .sdt-ov-setup-dot-warn { background: var(--sdt-warning); }\n\n  .stack-devtool .sdt-ov-setup-label {\n    color: var(--sdt-text);\n    font-size: 12px;\n  }\n\n  .stack-devtool .sdt-ov-setup-hint {\n    margin-left: auto;\n    font-size: 11px;\n    color: var(--sdt-text-tertiary);\n  }\n\n  /* Status badges (shared across tabs) */\n  .stack-devtool .sdt-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n  }\n  .stack-devtool .sdt-badge-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n  .stack-devtool .sdt-badge-warning { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n  .stack-devtool .sdt-badge-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n  .stack-devtool .sdt-badge-info { background: var(--sdt-info-muted); color: var(--sdt-info); }\n\n  /* ===== Components / Pages tab ===== */\n\n  .stack-devtool .sdt-pg-layout {\n    display: flex;\n    height: calc(100% + 32px);\n    margin: -16px;\n  }\n\n  /* --- Sidebar --- */\n  .stack-devtool .sdt-pg-sidebar {\n    width: 250px;\n    flex-shrink: 0;\n    border-right: 1px solid var(--sdt-border);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .stack-devtool .sdt-pg-sidebar-head {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 12px 14px 8px;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-pg-sidebar-title {\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: var(--sdt-text-tertiary);\n  }\n\n  .stack-devtool .sdt-pg-sidebar-count {\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--sdt-text-tertiary);\n    background: var(--sdt-bg-active);\n    padding: 0 5px;\n    border-radius: 6px;\n    line-height: 18px;\n  }\n\n  .stack-devtool .sdt-pg-sidebar-warn {\n    margin-left: auto;\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--sdt-warning);\n    background: var(--sdt-warning-muted);\n    padding: 0 6px;\n    border-radius: 6px;\n    line-height: 18px;\n  }\n\n  .stack-devtool .sdt-pg-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 6px 6px;\n  }\n\n  /* --- List item --- */\n  .stack-devtool .sdt-pg-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 7px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n    font-size: 13px;\n    color: var(--sdt-text);\n    position: relative;\n  }\n\n  .stack-devtool .sdt-pg-item:hover {\n    background: var(--sdt-bg-hover);\n  }\n\n  .stack-devtool .sdt-pg-item[data-selected=\"true\"] {\n    background: var(--sdt-accent-muted);\n  }\n\n  .stack-devtool .sdt-pg-item[data-selected=\"true\"] .sdt-pg-item-label {\n    color: var(--sdt-accent-hover);\n    font-weight: 600;\n  }\n\n  .stack-devtool .sdt-pg-item-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    flex-shrink: 0;\n  }\n  .stack-devtool .sdt-pg-item-dot-handler { background: var(--sdt-info); }\n  .stack-devtool .sdt-pg-item-dot-custom { background: var(--sdt-success); }\n  .stack-devtool .sdt-pg-item-dot-warn {\n    background: var(--sdt-warning);\n    box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);\n  }\n\n  .stack-devtool .sdt-pg-item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* --- Badges --- */\n  .stack-devtool .sdt-pg-badge {\n    display: inline-flex;\n    align-items: center;\n    height: 20px;\n    padding: 0 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.2px;\n    flex-shrink: 0;\n    line-height: 1;\n  }\n\n  .stack-devtool .sdt-pg-badge-outdated { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n\n  /* --- Empty state --- */\n  .stack-devtool .sdt-pg-empty {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    text-align: center;\n  }\n\n  .stack-devtool .sdt-pg-empty-icon {\n    color: var(--sdt-text-tertiary);\n    opacity: 0.35;\n    margin-bottom: 4px;\n  }\n\n  .stack-devtool .sdt-pg-empty-text {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sdt-text-secondary);\n  }\n\n  .stack-devtool .sdt-pg-empty-sub {\n    font-size: 12px;\n    color: var(--sdt-text-tertiary);\n  }\n\n  /* --- Main panel --- */\n  .stack-devtool .sdt-pg-main {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 18px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* --- Detail view --- */\n  .stack-devtool .sdt-pg-detail {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  /* Header */\n  .stack-devtool .sdt-pg-header {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .stack-devtool .sdt-pg-header-top {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .stack-devtool .sdt-pg-title {\n    font-size: 15px;\n    font-weight: 700;\n    margin: 0;\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-pg-title-url {\n    min-width: 0;\n    max-width: 280px;\n    color: var(--sdt-text-tertiary);\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-decoration: none;\n  }\n\n  .stack-devtool .sdt-pg-title-url:hover {\n    color: var(--sdt-accent);\n  }\n\n  .stack-devtool .sdt-pg-subtitle {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.4;\n  }\n\n  .stack-devtool .sdt-pg-code-inline {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n  }\n\n  .stack-devtool .sdt-pg-code {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--sdt-font-mono);\n    font-size: 12px;\n    color: var(--sdt-accent);\n    background: var(--sdt-bg-elevated);\n    border-radius: 6px;\n    padding: 6px 10px;\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  /* --- Copy button --- */\n  .stack-devtool .sdt-pg-copy-btn {\n    height: 26px;\n    padding: 0 10px;\n    border-radius: 6px;\n    border: 1px solid var(--sdt-border);\n    background: var(--sdt-bg-active);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    font-size: 11px;\n    font-weight: 600;\n    font-family: var(--sdt-font);\n    transition: all 0.12s ease;\n    flex-shrink: 0;\n    white-space: nowrap;\n  }\n\n  .stack-devtool .sdt-pg-open-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    height: 32px;\n    padding: 0 12px;\n    font-size: 12px;\n  }\n\n  .stack-devtool .sdt-pg-open-btn svg {\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-pg-copy-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n    border-color: var(--sdt-accent);\n  }\n\n  .stack-devtool .sdt-pg-copy-btn-ok {\n    border-color: rgba(34, 197, 94, 0.3);\n    color: var(--sdt-success);\n    background: var(--sdt-success-muted);\n  }\n\n  /* --- Update banner --- */\n  .stack-devtool .sdt-pg-update-banner {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 10px 14px;\n    background: rgba(234, 179, 8, 0.08);\n    border: 1px solid rgba(234, 179, 8, 0.3);\n    border-radius: 10px;\n  }\n\n  .stack-devtool .sdt-pg-update-banner-icon {\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    background: rgba(234, 179, 8, 0.2);\n    color: var(--sdt-warning);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    font-weight: 800;\n    flex-shrink: 0;\n    margin-top: 1px;\n  }\n\n  .stack-devtool .sdt-pg-update-banner-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .stack-devtool .sdt-pg-update-banner-title {\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--sdt-warning);\n    margin-bottom: 2px;\n  }\n\n  .stack-devtool .sdt-pg-update-banner-text {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.5;\n  }\n\n  .stack-devtool .sdt-pg-update-banner-text strong {\n    color: var(--sdt-text);\n    font-weight: 600;\n  }\n\n  /* --- Sections (changelog, prompt) --- */\n  .stack-devtool .sdt-pg-section {\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: 10px;\n    padding: 12px 14px;\n    background: var(--sdt-bg-elevated);\n  }\n\n  .stack-devtool .sdt-pg-section-warn {\n    border-color: rgba(234, 179, 8, 0.25);\n    background: rgba(234, 179, 8, 0.03);\n  }\n\n  .stack-devtool .sdt-pg-section-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    margin-bottom: 8px;\n  }\n\n  .stack-devtool .sdt-pg-section-warn .sdt-pg-section-label {\n    color: var(--sdt-warning);\n  }\n\n  .stack-devtool .sdt-pg-section-footer {\n    display: flex;\n    margin-top: 8px;\n  }\n\n  /* Changelog list */\n  .stack-devtool .sdt-pg-changelog-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .stack-devtool .sdt-pg-changelog-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    font-size: 12px;\n    color: var(--sdt-text);\n    line-height: 1.5;\n  }\n\n  .stack-devtool .sdt-pg-changelog-bullet {\n    flex-shrink: 0;\n    font-size: 12px;\n    line-height: 1.5;\n  }\n\n  /* Pre block */\n  .stack-devtool .sdt-pg-pre {\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n    background: var(--sdt-bg);\n    border-radius: 6px;\n    padding: 10px 12px;\n    margin: 0;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  .stack-devtool .sdt-preview-loading,\n  .stack-devtool .sdt-preview-unavailable {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.5;\n  }\n\n  .stack-devtool .sdt-preview-error {\n    font-size: 12px;\n    color: var(--sdt-error);\n    line-height: 1.5;\n  }\n\n  .stack-devtool .sdt-preview-code {\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-props-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 12px;\n  }\n\n  .stack-devtool .sdt-props-table th {\n    text-align: left;\n    font-weight: 600;\n    color: var(--sdt-text-tertiary);\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--sdt-border);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .stack-devtool .sdt-props-table td {\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-props-table td:first-child {\n    font-family: var(--sdt-font-mono);\n    color: var(--sdt-accent-hover);\n  }\n\n  .stack-devtool .sdt-props-table td:last-child {\n    font-family: var(--sdt-font-mono);\n    color: var(--sdt-text-secondary);\n  }\n\n  /* Iframe tabs */\n  .stack-devtool .sdt-iframe-container {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .stack-devtool .sdt-iframe-toolbar {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    z-index: 1;\n    flex-shrink: 0;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    gap: 8px;\n    padding: 0;\n  }\n\n  .stack-devtool .sdt-panel-fullscreen .sdt-iframe-toolbar {\n    top: 60px;\n    right: 12px;\n  }\n\n  .stack-devtool .sdt-iframe-open-link {\n    display: inline-flex;\n    align-items: center;\n    min-height: 28px;\n    padding: 0 10px;\n    background: var(--sdt-overlay-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-accent-hover);\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n  }\n\n  .stack-devtool .sdt-iframe-open-link:hover {\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-iframe-container iframe {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n    background: white;\n    border-radius: 0;\n  }\n\n  .stack-devtool .sdt-iframe-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--sdt-text-secondary);\n    font-size: 13px;\n  }\n\n  .stack-devtool .sdt-iframe-error {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    color: var(--sdt-text-secondary);\n    font-size: 13px;\n  }\n\n  .stack-devtool .sdt-iframe-error-btn {\n    padding: 6px 16px;\n    background: var(--sdt-accent);\n    color: white;\n    border: none;\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    transition: background 0.15s ease;\n  }\n\n  .stack-devtool .sdt-iframe-error-btn:hover {\n    background: var(--sdt-accent-hover);\n  }\n\n  /* Shared content fade animation */\n  .stack-devtool .sdt-tab-content-fade {\n    animation: sdt-tab-fade-in 0.15s ease-out;\n  }\n\n  /* Console tab */\n  .stack-devtool .sdt-console-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n  }\n\n  .stack-devtool .sdt-console-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 12px;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-console-title {\n    color: var(--sdt-text);\n    font-size: 13px;\n    font-weight: 600;\n  }\n\n  .stack-devtool .sdt-console-actions {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n  }\n\n  .stack-devtool .sdt-console-action-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    height: 28px;\n    padding: 0 9px;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n    white-space: nowrap;\n  }\n\n  .stack-devtool .sdt-console-action-btn:hover {\n    color: var(--sdt-text);\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n  }\n\n  .stack-devtool .sdt-console-action-btn svg {\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-console-log-scroll {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n  }\n\n  .stack-devtool .sdt-console-tabs {\n    position: relative;\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    background: var(--sdt-bg-subtle);\n    border-radius: var(--sdt-radius);\n    padding: 2px;\n  }\n\n  .stack-devtool .sdt-console-tab-indicator {\n    position: absolute;\n    top: 2px;\n    left: 0;\n    background: var(--sdt-bg-active);\n    border-radius: var(--sdt-radius-sm);\n    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n                width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .stack-devtool .sdt-console-tab {\n    position: relative;\n    z-index: 1;\n    flex: 1;\n    padding: 6px 12px;\n    background: transparent;\n    border: none;\n    border-radius: var(--sdt-radius-sm);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    transition: color 0.15s ease;\n    text-align: center;\n  }\n\n  .stack-devtool .sdt-console-tab:hover {\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-console-tab[data-active=\"true\"] {\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-log-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .stack-devtool .sdt-log-load-hint {\n    padding: 8px 10px;\n    color: var(--sdt-text-tertiary);\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    text-align: center;\n  }\n\n  .stack-devtool .sdt-log-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 10px;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    font-size: 12px;\n    font-family: var(--sdt-font-mono);\n  }\n\n  .stack-devtool .sdt-log-time {\n    color: var(--sdt-text-tertiary);\n    flex-shrink: 0;\n    font-size: 11px;\n  }\n\n  .stack-devtool .sdt-log-type {\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-log-message {\n    flex: 1;\n    color: var(--sdt-text);\n    word-break: break-all;\n  }\n\n  .stack-devtool .sdt-log-method {\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-log-method-get {\n    background: var(--sdt-info-muted);\n    color: var(--sdt-info);\n  }\n\n  .stack-devtool .sdt-log-method-post {\n    background: var(--sdt-success-muted);\n    color: var(--sdt-success);\n  }\n\n  .stack-devtool .sdt-log-method-put, .stack-devtool .sdt-log-method-patch {\n    background: var(--sdt-warning-muted);\n    color: var(--sdt-warning);\n  }\n\n  .stack-devtool .sdt-log-method-delete {\n    background: var(--sdt-error-muted);\n    color: var(--sdt-error);\n  }\n\n  .stack-devtool .sdt-log-status {\n    font-size: 11px;\n    flex-shrink: 0;\n  }\n\n  .stack-devtool .sdt-log-status-ok {\n    color: var(--sdt-success);\n  }\n\n  .stack-devtool .sdt-log-status-err {\n    color: var(--sdt-error);\n  }\n\n  .stack-devtool .sdt-log-url {\n    flex: 1;\n    color: var(--sdt-text);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .stack-devtool .sdt-empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex: 1;\n    padding: 40px 20px;\n    color: var(--sdt-text-tertiary);\n    font-size: 13px;\n    text-align: center;\n    gap: 4px;\n  }\n\n  .stack-devtool .sdt-empty-state-icon {\n    font-size: 24px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n  }\n\n  /* Config info table */\n  .stack-devtool .sdt-config-table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  .stack-devtool .sdt-config-table td {\n    padding: 8px 10px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n    font-size: 12px;\n  }\n\n  .stack-devtool .sdt-config-table td:first-child {\n    color: var(--sdt-text-secondary);\n    width: 160px;\n    font-weight: 500;\n  }\n\n  .stack-devtool .sdt-config-table td:last-child {\n    color: var(--sdt-text);\n    font-family: var(--sdt-font-mono);\n    word-break: break-all;\n  }\n\n  .stack-devtool .sdt-config-table td .sdt-config-link {\n    font-family: inherit;\n    color: var(--sdt-accent);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .stack-devtool .sdt-config-table td .sdt-config-link:hover {\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-config-muted {\n    color: var(--sdt-text-tertiary);\n    font-style: italic;\n  }\n\n  /* Resize handle */\n  .stack-devtool .sdt-resize-handle {\n    position: absolute;\n    top: 0;\n    left: -4px;\n    width: 8px;\n    height: 100%;\n    cursor: ew-resize;\n    z-index: 10;\n  }\n\n  .stack-devtool .sdt-resize-handle::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 3px;\n    width: 2px;\n    height: 32px;\n    transform: translateY(-50%);\n    background: transparent;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n  }\n\n  .stack-devtool .sdt-resize-handle:hover::after,\n  .stack-devtool .sdt-resize-handle:active::after {\n    background: var(--sdt-accent);\n  }\n\n  .stack-devtool .sdt-resize-handle-top {\n    position: absolute;\n    top: -4px;\n    left: 0;\n    width: 100%;\n    height: 8px;\n    cursor: ns-resize;\n    z-index: 10;\n  }\n\n  .stack-devtool .sdt-resize-handle-top::after {\n    content: '';\n    position: absolute;\n    left: 50%;\n    top: 3px;\n    height: 2px;\n    width: 32px;\n    transform: translateX(-50%);\n    background: transparent;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n  }\n\n  .stack-devtool .sdt-resize-handle-top:hover::after,\n  .stack-devtool .sdt-resize-handle-top:active::after {\n    background: var(--sdt-accent);\n  }\n\n  .stack-devtool .sdt-resize-handle-corner {\n    position: absolute;\n    top: -6px;\n    left: -6px;\n    width: 14px;\n    height: 14px;\n    cursor: nwse-resize;\n    z-index: 11;\n  }\n\n  .stack-devtool .sdt-resize-handle-corner::after {\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n    transition: background 0.15s ease;\n  }\n\n  .stack-devtool .sdt-resize-handle-corner:hover::after,\n  .stack-devtool .sdt-resize-handle-corner:active::after {\n    background: var(--sdt-accent);\n  }\n\n  .stack-devtool .sdt-no-components {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--sdt-text-tertiary);\n    font-size: 13px;\n    text-align: center;\n    padding: 20px;\n  }\n\n  /* Support tab */\n  .stack-devtool .sdt-support-tab {\n    display: flex;\n    flex-direction: column;\n    height: calc(100% + 32px);\n    margin: -16px;\n  }\n\n  .stack-devtool .sdt-support-feedback-pane {\n    padding: 20px;\n    height: 100%;\n    overflow-y: auto;\n  }\n\n  /* Form layout */\n  .stack-devtool .sdt-support-form {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n\n  /* Type cards */\n  .stack-devtool .sdt-support-type-cards {\n    display: flex;\n    gap: 8px;\n  }\n\n  .stack-devtool .sdt-support-type-card {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 8px 10px;\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    transition: all 0.15s ease;\n  }\n\n  .stack-devtool .sdt-support-type-card svg {\n    flex-shrink: 0;\n    opacity: 0.6;\n    transition: opacity 0.15s ease;\n  }\n\n  .stack-devtool .sdt-support-type-card:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-support-type-card:hover svg {\n    opacity: 1;\n  }\n\n  .stack-devtool .sdt-support-type-card-active {\n    border-color: var(--sdt-accent);\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-support-type-card-active svg {\n    opacity: 1;\n    color: var(--sdt-accent);\n  }\n\n  /* Field group */\n  .stack-devtool .sdt-support-field {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n  }\n\n  .stack-devtool .sdt-support-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--sdt-text-secondary);\n    letter-spacing: 0.3px;\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .stack-devtool .sdt-support-optional {\n    font-size: 10px;\n    font-weight: 400;\n    color: var(--sdt-text-tertiary);\n    text-transform: none;\n    letter-spacing: 0;\n  }\n\n  /* Inputs */\n  .stack-devtool .sdt-support-input,\n  .stack-devtool .sdt-support-textarea {\n    width: 100%;\n    padding: 9px 12px;\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-text);\n    font-family: var(--sdt-font);\n    font-size: 13px;\n    outline: none;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  }\n\n  .stack-devtool .sdt-support-input::placeholder,\n  .stack-devtool .sdt-support-textarea::placeholder {\n    color: var(--sdt-text-tertiary);\n  }\n\n  .stack-devtool .sdt-support-input:focus,\n  .stack-devtool .sdt-support-textarea:focus {\n    border-color: var(--sdt-accent);\n    box-shadow: 0 0 0 3px var(--sdt-accent-muted);\n  }\n\n  .stack-devtool .sdt-support-textarea {\n    resize: vertical;\n    min-height: 100px;\n    line-height: 1.6;\n  }\n\n  /* Submit button */\n  .stack-devtool .sdt-support-submit {\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 9px 20px;\n    background: var(--sdt-accent);\n    color: white;\n    border: none;\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 0.2px;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);\n  }\n\n  .stack-devtool .sdt-support-submit:hover:not(:disabled) {\n    background: var(--sdt-accent-hover);\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);\n    transform: translateY(-1px);\n  }\n\n  .stack-devtool .sdt-support-submit:active:not(:disabled) {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);\n  }\n\n  .stack-devtool .sdt-support-submit:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .stack-devtool .sdt-support-submit svg {\n    flex-shrink: 0;\n  }\n\n  @keyframes sdt-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  .stack-devtool .sdt-support-spinner {\n    animation: sdt-spin 1s linear infinite;\n  }\n\n  /* Status screens (success / error) */\n  .stack-devtool .sdt-support-status {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 32px 20px;\n    border-radius: var(--sdt-radius-lg);\n    text-align: center;\n    gap: 6px;\n  }\n\n  .stack-devtool .sdt-support-status-success {\n    background: linear-gradient(180deg, var(--sdt-success-muted), transparent 80%);\n    border: 1px solid rgba(34, 197, 94, 0.15);\n  }\n\n  .stack-devtool .sdt-support-status-error {\n    background: linear-gradient(180deg, var(--sdt-error-muted), transparent 80%);\n    border: 1px solid rgba(239, 68, 68, 0.15);\n  }\n\n  .stack-devtool .sdt-support-status-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 6px;\n  }\n\n  .stack-devtool .sdt-support-status-success .sdt-support-status-icon {\n    background: rgba(34, 197, 94, 0.15);\n    color: var(--sdt-success);\n    box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);\n  }\n\n  .stack-devtool .sdt-support-status-error .sdt-support-status-icon {\n    background: rgba(239, 68, 68, 0.15);\n    color: var(--sdt-error);\n    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);\n  }\n\n  .stack-devtool .sdt-support-status-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-support-status-msg {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.5;\n    max-width: 260px;\n  }\n\n  /* Support channels */\n  .stack-devtool .sdt-support-channels {\n    display: flex;\n    gap: 8px;\n  }\n\n  .stack-devtool .sdt-support-channel {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 8px 10px;\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    color: var(--sdt-text-secondary);\n    text-decoration: none;\n    font-size: 11px;\n    font-weight: 500;\n    transition: all 0.15s ease;\n  }\n\n  .stack-devtool .sdt-support-channel:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-support-channel svg {\n    flex-shrink: 0;\n    opacity: 0.6;\n    transition: opacity 0.15s ease;\n  }\n\n  .stack-devtool .sdt-support-channel:hover svg {\n    opacity: 1;\n  }\n\n  /* --- Light theme: system preference fallback --- */\n  @media (prefers-color-scheme: light) {\n    .stack-devtool {\n      --sdt-bg: #ffffff;\n      --sdt-bg-elevated: #f8f8fa;\n      --sdt-bg-hover: #f0f0f3;\n      --sdt-bg-active: #e8e8ec;\n      --sdt-bg-subtle: #fafafa;\n      --sdt-border: #e0e0e5;\n      --sdt-border-subtle: #eaeaef;\n      --sdt-text: #111113;\n      --sdt-text-secondary: #6b6b73;\n      --sdt-text-tertiary: #9b9ba3;\n      --sdt-accent: #6366f1;\n      --sdt-accent-hover: #4f46e5;\n      --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n      --sdt-success: #16a34a;\n      --sdt-success-muted: rgba(22, 163, 74, 0.1);\n      --sdt-warning: #ca8a04;\n      --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n      --sdt-error: #dc2626;\n      --sdt-error-muted: rgba(220, 38, 38, 0.1);\n      --sdt-info: #2563eb;\n      --sdt-info-muted: rgba(37, 99, 235, 0.1);\n      --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n      --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n      --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n    }\n  }\n\n  /* Export dialog \u2014 positioned inside the dev tool panel */\n  .stack-devtool .sdt-share-overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 20;\n    background: rgba(0, 0, 0, 0.4);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: sdt-tab-fade-in 0.15s ease-out;\n    border-radius: var(--sdt-radius-lg);\n  }\n\n  .stack-devtool .sdt-share-dialog {\n    width: 380px;\n    max-width: calc(100% - 32px);\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-lg);\n    box-shadow: var(--sdt-shadow);\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .stack-devtool .sdt-share-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .stack-devtool .sdt-share-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-share-status {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    padding: 20px;\n    color: var(--sdt-text-secondary);\n    font-size: 13px;\n  }\n\n  .stack-devtool .sdt-share-url-row {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n  }\n\n  .stack-devtool .sdt-share-url-row .sdt-support-input {\n    flex: 1;\n    font-family: var(--sdt-font-mono);\n    font-size: 12px;\n  }\n\n  .stack-devtool .sdt-share-copy-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    flex-shrink: 0;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .stack-devtool .sdt-share-copy-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-share-actions {\n    display: flex;\n    gap: 8px;\n  }\n\n  .stack-devtool .sdt-share-action-btn {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 10px 12px;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    color: var(--sdt-text-secondary);\n    text-decoration: none;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .stack-devtool .sdt-share-action-btn:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-share-action-btn svg {\n    flex-shrink: 0;\n    opacity: 0.7;\n  }\n\n  .stack-devtool .sdt-share-action-btn:hover svg {\n    opacity: 1;\n  }\n\n  .stack-devtool .sdt-share-action-btn-accent {\n    background: var(--sdt-accent);\n    border-color: var(--sdt-accent);\n    color: white;\n  }\n\n  .stack-devtool .sdt-share-action-btn-accent:hover {\n    background: var(--sdt-accent-hover);\n    border-color: var(--sdt-accent-hover);\n    color: white;\n  }\n\n  .stack-devtool .sdt-share-action-btn-accent svg {\n    opacity: 1;\n  }\n\n  /* --- AI Chat tab --- */\n\n  .stack-devtool .sdt-ai-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .stack-devtool .sdt-ai-messages {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px;\n    scroll-behavior: smooth;\n  }\n\n  .stack-devtool .sdt-ai-message-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  /* --- Empty state --- */\n\n  .stack-devtool .sdt-ai-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    gap: 12px;\n    padding: 24px;\n    text-align: center;\n  }\n\n  .stack-devtool .sdt-ai-empty-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: var(--sdt-accent-muted);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--sdt-accent);\n    margin-bottom: 4px;\n  }\n\n  .stack-devtool .sdt-ai-empty-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-ai-empty-desc {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    max-width: 320px;\n    line-height: 1.5;\n  }\n\n  .stack-devtool .sdt-ai-suggestions {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 8px;\n    width: 100%;\n    max-width: 340px;\n  }\n\n  .stack-devtool .sdt-ai-suggestion {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    color: var(--sdt-text-secondary);\n    font-size: 12px;\n    cursor: pointer;\n    text-align: left;\n    transition: all 0.15s ease;\n    font-family: var(--sdt-font);\n    line-height: 1.4;\n  }\n\n  .stack-devtool .sdt-ai-suggestion:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-ai-suggestion-icon {\n    font-size: 14px;\n    flex-shrink: 0;\n  }\n\n  /* --- Messages --- */\n\n  .stack-devtool .sdt-ai-msg {\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n  }\n\n  .stack-devtool .sdt-ai-msg-user {\n    justify-content: flex-end;\n  }\n\n  .stack-devtool .sdt-ai-msg-assistant {\n    justify-content: flex-start;\n  }\n\n  .stack-devtool .sdt-ai-avatar {\n    width: 26px;\n    height: 26px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-top: 2px;\n  }\n\n  .stack-devtool .sdt-ai-avatar-user {\n    background: var(--sdt-info-muted);\n    color: var(--sdt-info);\n    order: 2;\n  }\n\n  .stack-devtool .sdt-ai-avatar-assistant {\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-accent);\n  }\n\n  .stack-devtool .sdt-ai-bubble {\n    min-width: 0;\n    max-width: 85%;\n    border-radius: var(--sdt-radius-lg);\n    padding: 10px 14px;\n  }\n\n  .stack-devtool .sdt-ai-bubble-user {\n    background: var(--sdt-info-muted);\n    border: 1px solid rgba(59, 130, 246, 0.1);\n  }\n\n  .stack-devtool .sdt-ai-bubble-user p {\n    font-size: 13px;\n    line-height: 1.55;\n    color: var(--sdt-text);\n    margin: 0;\n    word-break: break-word;\n  }\n\n  .stack-devtool .sdt-ai-bubble-assistant {\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  /* --- Thinking dots --- */\n\n  .stack-devtool .sdt-ai-thinking {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 0;\n  }\n\n  .stack-devtool .sdt-ai-thinking-dot {\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n    background: var(--sdt-accent);\n    opacity: 0.5;\n    animation: sdt-ai-pulse 1.2s ease-in-out infinite;\n  }\n\n  .stack-devtool .sdt-ai-thinking-dot:nth-child(2) { animation-delay: 0.15s; }\n  .stack-devtool .sdt-ai-thinking-dot:nth-child(3) { animation-delay: 0.3s; }\n\n  @keyframes sdt-ai-pulse {\n    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }\n    40% { opacity: 1; transform: scale(1.1); }\n  }\n\n  .stack-devtool .sdt-ai-streaming-indicator {\n    display: flex;\n    align-items: center;\n    gap: 3px;\n    margin-top: 6px;\n  }\n\n  /* --- Markdown content inside assistant bubble --- */\n\n  .stack-devtool .sdt-ai-paragraph {\n    font-size: 13px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n    margin: 0 0 10px;\n    word-break: break-word;\n  }\n\n  .stack-devtool .sdt-ai-paragraph:last-child { margin-bottom: 0; }\n\n  .stack-devtool .sdt-ai-bold {\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-ai-inline-code {\n    display: inline;\n    padding: 1.5px 5px;\n    border-radius: 4px;\n    font-family: var(--sdt-font-mono);\n    font-size: 11.5px;\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  .stack-devtool .sdt-ai-link {\n    color: var(--sdt-info);\n    text-decoration: none;\n    transition: color 0.1s;\n  }\n\n  .stack-devtool .sdt-ai-link:hover {\n    color: var(--sdt-accent-hover);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .stack-devtool .sdt-ai-heading {\n    font-weight: 600;\n    color: var(--sdt-text);\n    margin: 12px 0 6px;\n    line-height: 1.35;\n  }\n\n  .stack-devtool .sdt-ai-heading:first-child { margin-top: 0; }\n\n  .stack-devtool .sdt-ai-bubble-assistant h1.sdt-ai-heading { font-size: 15px; }\n  .stack-devtool .sdt-ai-bubble-assistant h2.sdt-ai-heading { font-size: 13.5px; }\n  .stack-devtool .sdt-ai-bubble-assistant h3.sdt-ai-heading { font-size: 13px; }\n\n  .stack-devtool .sdt-ai-list {\n    font-size: 13px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n    margin: 0 0 10px;\n    padding-left: 20px;\n  }\n\n  .stack-devtool .sdt-ai-list:last-child { margin-bottom: 0; }\n\n  .stack-devtool .sdt-ai-list li {\n    margin-bottom: 3px;\n    padding-left: 2px;\n  }\n\n  .stack-devtool .sdt-ai-list li::marker {\n    color: var(--sdt-text-tertiary);\n  }\n\n  .stack-devtool .sdt-ai-list-ordered {\n    list-style-type: decimal;\n  }\n\n  .stack-devtool .sdt-ai-tools {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin: 6px 0;\n  }\n\n  .stack-devtool .sdt-ai-part-text {\n    margin: 6px 0;\n  }\n\n  .stack-devtool .sdt-ai-tool-card {\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-subtle);\n    overflow: hidden;\n  }\n\n  .stack-devtool .sdt-ai-tool-header {\n    width: 100%;\n    border: none;\n    background: transparent;\n    color: inherit;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 10px;\n    cursor: pointer;\n    text-align: left;\n    font-family: var(--sdt-font);\n  }\n\n  .stack-devtool .sdt-ai-tool-header:hover {\n    background: var(--sdt-bg-hover);\n  }\n\n  .stack-devtool .sdt-ai-tool-name {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--sdt-text);\n    flex: 1;\n  }\n\n  .stack-devtool .sdt-ai-tool-status {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    font-weight: 600;\n  }\n\n  .stack-devtool .sdt-ai-tool-status-running { color: var(--sdt-warning); }\n  .stack-devtool .sdt-ai-tool-status-success { color: var(--sdt-success); }\n  .stack-devtool .sdt-ai-tool-status-error { color: var(--sdt-error); }\n\n  .stack-devtool .sdt-ai-tool-chevron {\n    color: var(--sdt-text-tertiary);\n    font-size: 10px;\n    transition: transform 0.15s ease;\n  }\n\n  .stack-devtool .sdt-ai-tool-chevron-open {\n    transform: rotate(180deg);\n  }\n\n  .stack-devtool .sdt-ai-tool-body {\n    border-top: 1px solid var(--sdt-border-subtle);\n    padding: 8px 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .stack-devtool .sdt-ai-tool-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    color: var(--sdt-text-tertiary);\n    font-weight: 600;\n  }\n\n  .stack-devtool .sdt-ai-tool-pre {\n    margin: 0;\n    padding: 8px;\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    background: var(--sdt-bg);\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    line-height: 1.5;\n    color: var(--sdt-text-secondary);\n    overflow-x: auto;\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .stack-devtool .sdt-ai-tool-running {\n    font-size: 11px;\n    color: var(--sdt-text-secondary);\n  }\n\n  .stack-devtool .sdt-ai-blockquote {\n    border-left: 3px solid var(--sdt-accent);\n    padding-left: 12px;\n    margin: 8px 0;\n    font-size: 13px;\n    color: var(--sdt-text-secondary);\n    font-style: italic;\n  }\n\n  .stack-devtool .sdt-ai-hr {\n    border: none;\n    border-top: 1px solid var(--sdt-border-subtle);\n    margin: 12px 0;\n  }\n\n  /* --- Code blocks --- */\n\n  .stack-devtool .sdt-ai-code-block {\n    border-radius: var(--sdt-radius);\n    overflow: hidden;\n    margin: 8px 0;\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg-subtle);\n  }\n\n  .stack-devtool .sdt-ai-code-block:last-child { margin-bottom: 0; }\n\n  .stack-devtool .sdt-ai-code-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg);\n  }\n\n  .stack-devtool .sdt-ai-code-lang {\n    font-size: 9px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--sdt-text-tertiary);\n    font-family: var(--sdt-font);\n  }\n\n  .stack-devtool .sdt-ai-copy-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border-radius: var(--sdt-radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--sdt-text-tertiary);\n    cursor: pointer;\n    font-size: 12px;\n    font-family: var(--sdt-font);\n    transition: all 0.15s ease;\n  }\n\n  .stack-devtool .sdt-ai-copy-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-ai-copy-btn-copied {\n    color: var(--sdt-success) !important;\n  }\n\n  .stack-devtool .sdt-ai-code-pre {\n    margin: 0;\n    padding: 10px 12px;\n    overflow-x: auto;\n    font-family: var(--sdt-font-mono);\n    font-size: 11.5px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-ai-code-pre code {\n    font-family: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n\n  /* --- Error --- */\n\n  .stack-devtool .sdt-ai-error {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 14px;\n    margin: 8px 16px;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-error-muted);\n    border: 1px solid rgba(239, 68, 68, 0.2);\n    font-size: 12px;\n    color: var(--sdt-error);\n    line-height: 1.4;\n  }\n\n  /* --- Input area --- */\n\n  .stack-devtool .sdt-ai-input-area {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    border-top: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg);\n  }\n\n  .stack-devtool .sdt-ai-new-chat {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border-radius: var(--sdt-radius);\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg-elevated);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n    font-family: var(--sdt-font);\n  }\n\n  .stack-devtool .sdt-ai-new-chat:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .stack-devtool .sdt-ai-input-wrapper {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    padding: 0 4px 0 12px;\n    transition: border-color 0.15s ease;\n  }\n\n  .stack-devtool .sdt-ai-input-wrapper:focus-within {\n    border-color: var(--sdt-accent);\n    box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n  }\n\n  .stack-devtool .sdt-ai-input {\n    flex: 1;\n    background: transparent;\n    border: none;\n    outline: none;\n    color: var(--sdt-text);\n    font-size: 13px;\n    font-family: var(--sdt-font);\n    padding: 8px 0;\n    min-width: 0;\n  }\n\n  .stack-devtool .sdt-ai-input::placeholder {\n    color: var(--sdt-text-tertiary);\n  }\n\n  .stack-devtool .sdt-ai-input:disabled {\n    opacity: 0.5;\n  }\n\n  .stack-devtool .sdt-ai-send-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border-radius: 6px;\n    border: none;\n    background: transparent;\n    color: var(--sdt-text-tertiary);\n    cursor: not-allowed;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n    font-family: var(--sdt-font);\n  }\n\n  .stack-devtool .sdt-ai-send-btn-active {\n    background: var(--sdt-accent);\n    color: white;\n    cursor: pointer;\n  }\n\n  .stack-devtool .sdt-ai-send-btn-active:hover {\n    background: var(--sdt-accent-hover);\n  }\n\n  .stack-devtool .sdt-ai-stop-btn,\n  .stack-devtool .sdt-ai-stop-btn:hover {\n    background: var(--sdt-error);\n    color: white;\n  }\n\n  /* Accessible focus indicator for keyboard navigation */\n  .stack-devtool .sdt-tab:focus-visible {\n    outline: 2px solid var(--sdt-accent);\n    outline-offset: -2px;\n    border-radius: var(--sdt-radius);\n  }\n\n  /* Reduced motion: disable animations for users who prefer it */\n  @media (prefers-reduced-motion: reduce) {\n    .stack-devtool .sdt-panel-inner,\n    .stack-devtool .sdt-panel-exiting,\n    .stack-devtool .sdt-tab-content,\n    .stack-devtool .sdt-ov-pulse-dot,\n    .stack-devtool .sdt-ov-skeleton-pill,\n    .stack-devtool .sdt-support-spinner,\n    .stack-devtool .sdt-ai-thinking-dot {\n      animation: none !important;\n    }\n\n    .stack-devtool .sdt-tab-indicator,\n    .stack-devtool .sdt-tab {\n      transition: none !important;\n    }\n  }\n\n  /* --- Stack theme explicit overrides (take priority over system preference) --- */\n  html:has(head > [data-stack-theme=\"light\"]) .stack-devtool {\n    --sdt-bg: #ffffff;\n    --sdt-bg-elevated: #f8f8fa;\n    --sdt-bg-hover: #f0f0f3;\n    --sdt-bg-active: #e8e8ec;\n    --sdt-bg-subtle: #fafafa;\n    --sdt-border: #e0e0e5;\n    --sdt-border-subtle: #eaeaef;\n    --sdt-text: #111113;\n    --sdt-text-secondary: #6b6b73;\n    --sdt-text-tertiary: #9b9ba3;\n    --sdt-accent: #6366f1;\n    --sdt-accent-hover: #4f46e5;\n    --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n    --sdt-success: #16a34a;\n    --sdt-success-muted: rgba(22, 163, 74, 0.1);\n    --sdt-warning: #ca8a04;\n    --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n    --sdt-error: #dc2626;\n    --sdt-error-muted: rgba(220, 38, 38, 0.1);\n    --sdt-info: #2563eb;\n    --sdt-info-muted: rgba(37, 99, 235, 0.1);\n    --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n  }\n\n  html:has(head > [data-stack-theme=\"dark\"]) .stack-devtool {\n    --sdt-bg: #0a0a0b;\n    --sdt-bg-elevated: #141416;\n    --sdt-bg-hover: #1c1c1f;\n    --sdt-bg-active: #232326;\n    --sdt-bg-subtle: #111113;\n    --sdt-border: #2a2a2e;\n    --sdt-border-subtle: #1e1e22;\n    --sdt-text: #ececef;\n    --sdt-text-secondary: #8b8b93;\n    --sdt-text-tertiary: #5c5c66;\n    --sdt-accent: #6366f1;\n    --sdt-accent-hover: #818cf8;\n    --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n    --sdt-success: #22c55e;\n    --sdt-success-muted: rgba(34, 197, 94, 0.15);\n    --sdt-warning: #eab308;\n    --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n    --sdt-error: #ef4444;\n    --sdt-error-muted: rgba(239, 68, 68, 0.15);\n    --sdt-info: #3b82f6;\n    --sdt-info-muted: rgba(59, 130, 246, 0.15);\n    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n";
+declare const devToolCSS = "\n  .hexclave-devtool {\n    --sdt-bg: #0a0a0b;\n    --sdt-bg-elevated: #141416;\n    --sdt-bg-hover: #1c1c1f;\n    --sdt-bg-active: #232326;\n    --sdt-bg-subtle: #111113;\n    --sdt-border: #2a2a2e;\n    --sdt-border-subtle: #1e1e22;\n    --sdt-text: #ececef;\n    --sdt-text-secondary: #8b8b93;\n    --sdt-text-tertiary: #5c5c66;\n    --sdt-accent: #6366f1;\n    --sdt-accent-hover: #818cf8;\n    --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n    --sdt-success: #22c55e;\n    --sdt-success-muted: rgba(34, 197, 94, 0.15);\n    --sdt-warning: #eab308;\n    --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n    --sdt-error: #ef4444;\n    --sdt-error-muted: rgba(239, 68, 68, 0.15);\n    --sdt-info: #3b82f6;\n    --sdt-info-muted: rgba(59, 130, 246, 0.15);\n    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n    --sdt-radius: 8px;\n    --sdt-radius-sm: 4px;\n    --sdt-radius-lg: 12px;\n    --sdt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n    --sdt-font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;\n    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n\n    all: initial;\n    font-family: var(--sdt-font);\n    color: var(--sdt-text);\n    font-size: 13px;\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    box-sizing: border-box;\n  }\n\n  .hexclave-devtool *, .hexclave-devtool *::before, .hexclave-devtool *::after {\n    box-sizing: border-box;\n  }\n\n  /* Trigger pill */\n  .hexclave-devtool .sdt-trigger {\n    position: fixed;\n    z-index: 2147483647;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    padding: 0;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border);\n    border-radius: 10px;\n    cursor: grab;\n    box-shadow: var(--sdt-trigger-shadow);\n    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n    user-select: none;\n    touch-action: none;\n  }\n\n  .hexclave-devtool .sdt-trigger-position-animated {\n    transition: left 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.14s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n  }\n\n  .hexclave-devtool .sdt-trigger:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-accent);\n    box-shadow: var(--sdt-trigger-shadow), 0 0 0 1px var(--sdt-accent);\n  }\n\n  .hexclave-devtool .sdt-trigger:active {\n    cursor: grabbing;\n  }\n\n  .hexclave-devtool .sdt-trigger-logo {\n    width: 22px;\n    height: 22px;\n    border-radius: 6px;\n    background: var(--sdt-accent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    line-height: 0;\n  }\n\n  /* Panel overlay */\n  .hexclave-devtool .sdt-panel {\n    position: fixed;\n    bottom: 60px;\n    right: 16px;\n    z-index: 99998;\n    width: 800px;\n    max-width: calc(100vw - 32px);\n    height: 520px;\n    max-height: calc(100vh - 80px);\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-lg);\n    box-shadow: var(--sdt-shadow);\n    display: flex;\n    flex-direction: column;\n    overflow: visible;\n  }\n\n  .hexclave-devtool .sdt-panel-geometry-animated {\n    transition: width 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                height 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                right 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                bottom 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                border-radius 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),\n                border-color 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);\n  }\n\n  .hexclave-devtool .sdt-panel-fullscreen {\n    right: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: none;\n    height: 100vh;\n    max-height: none;\n    border: none;\n    border-radius: 0;\n  }\n\n  .hexclave-devtool .sdt-panel-inner {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: var(--sdt-radius-lg);\n    animation: sdt-panel-enter 0.2s ease-out;\n  }\n\n  .hexclave-devtool .sdt-panel-fullscreen .sdt-panel-inner {\n    border-radius: 0;\n  }\n\n  .hexclave-devtool .sdt-panel-fullscreen .sdt-resize-handle {\n    display: none;\n  }\n\n  @keyframes sdt-panel-enter {\n    from {\n      opacity: 0;\n      transform: scale(0.95) translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n    }\n  }\n\n  .hexclave-devtool .sdt-panel-exiting {\n    animation: sdt-panel-exit 0.15s ease-in forwards;\n  }\n\n  @keyframes sdt-panel-exit {\n    from {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95) translateY(8px);\n    }\n  }\n\n  /* Tab bar */\n  .hexclave-devtool .sdt-tabbar {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: 44px;\n    padding: 0 8px;\n    background: var(--sdt-bg-subtle);\n    border-bottom: 1px solid var(--sdt-border);\n    flex-shrink: 0;\n    gap: 2px;\n    overflow-x: auto;\n  }\n\n  .hexclave-devtool .sdt-panel-fullscreen .sdt-tabbar {\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    right: 8px;\n    z-index: 2;\n    background: var(--sdt-overlay-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius);\n    box-shadow: var(--sdt-trigger-shadow);\n  }\n\n  .hexclave-devtool .sdt-tab-indicator {\n    position: absolute;\n    top: 6px;\n    left: 0;\n    height: 32px;\n    background: var(--sdt-bg-active);\n    border-radius: var(--sdt-radius);\n    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n                width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .hexclave-devtool .sdt-tab {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    height: 32px;\n    padding: 0 12px;\n    background: transparent;\n    border: none;\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    transition: color 0.15s ease;\n    white-space: nowrap;\n    outline: none;\n  }\n\n  .hexclave-devtool .sdt-tab:hover {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-tab[data-active=\"true\"] {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-tab-icon {\n    width: 14px;\n    height: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-tabbar-spacer {\n    flex: 1;\n  }\n\n  .hexclave-devtool .sdt-tabbar-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-docs-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    height: 28px;\n    padding: 0 8px;\n    color: var(--sdt-text-secondary);\n    border-radius: var(--sdt-radius-sm);\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    transition: color 0.15s ease, background 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-docs-link:hover {\n    color: var(--sdt-text);\n    background: var(--sdt-bg-hover);\n  }\n\n  .hexclave-devtool .sdt-docs-link-icon {\n    display: flex;\n    width: 13px;\n    height: 13px;\n    line-height: 0;\n  }\n\n  .hexclave-devtool .sdt-close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: transparent;\n    border: none;\n    border-radius: var(--sdt-radius-sm);\n    cursor: pointer;\n    color: var(--sdt-text-tertiary);\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-close-btn:hover {\n    color: var(--sdt-text);\n    background: var(--sdt-bg-hover);\n  }\n\n  /* Tab content area */\n  .hexclave-devtool .sdt-content {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  .hexclave-devtool .sdt-panel-fullscreen .sdt-content {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .hexclave-devtool .sdt-tab-layers {\n    position: absolute;\n    inset: 0;\n  }\n\n  .hexclave-devtool .sdt-tab-pane {\n    position: absolute;\n    inset: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px;\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  .hexclave-devtool .sdt-tab-pane-iframe {\n    padding: 0;\n    overflow: hidden;\n  }\n\n  .hexclave-devtool .sdt-tab-pane-active {\n    visibility: visible;\n    pointer-events: auto;\n    animation: sdt-tab-fade-in 0.15s ease-out;\n  }\n\n  @keyframes sdt-tab-fade-in {\n    from {\n      opacity: 0;\n      transform: translateY(6px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  .hexclave-devtool .sdt-tab-pane::-webkit-scrollbar-thumb {\n    background: var(--sdt-border);\n    border-radius: 3px;\n  }\n\n  /* ===== Overview tab \u2014 single column ===== */\n\n  .hexclave-devtool .sdt-ov {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    max-width: 660px;\n    margin: 0 auto;\n  }\n\n  /* Card base */\n  .hexclave-devtool .sdt-ov-card {\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: 12px;\n    padding: 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n    transition: box-shadow 0.2s ease, border-color 0.2s ease;\n    overflow: hidden;\n    min-width: 0;\n  }\n\n  .hexclave-devtool .sdt-ov-card-hero {\n    background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, transparent 50%), var(--sdt-bg-elevated);\n  }\n\n  .hexclave-devtool .sdt-ov-label {\n    font-size: 9px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 1.2px;\n    color: var(--sdt-text-tertiary);\n    margin-bottom: 10px;\n  }\n\n  .hexclave-devtool .sdt-ov-user-row {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    margin-bottom: 14px;\n  }\n\n  .hexclave-devtool .sdt-ov-avatar {\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: var(--sdt-bg-hover);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--sdt-text-tertiary);\n    flex-shrink: 0;\n    border: 2px solid var(--sdt-border-subtle);\n    overflow: hidden;\n  }\n\n  .hexclave-devtool .sdt-ov-avatar-active {\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-accent);\n    border-color: rgba(99,102,241,0.3);\n  }\n\n  .hexclave-devtool .sdt-ov-avatar img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 50%;\n  }\n\n  .hexclave-devtool .sdt-ov-user-meta {\n    min-width: 0;\n    flex: 1;\n  }\n\n  .hexclave-devtool .sdt-ov-user-name {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--sdt-text);\n    line-height: 1.2;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .hexclave-devtool .sdt-ov-user-email {\n    font-size: 12px;\n    font-family: var(--sdt-font-mono);\n    color: var(--sdt-text-secondary);\n    margin-top: 2px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .hexclave-devtool .sdt-ov-auth-indicator {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    margin-top: 5px;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--sdt-success);\n  }\n\n  .hexclave-devtool .sdt-ov-auth-indicator::before {\n    content: '';\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: var(--sdt-success);\n    box-shadow: 0 0 6px rgba(34,197,94,0.5);\n  }\n\n  /* Actions */\n  .hexclave-devtool .sdt-ov-actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-top: 4px;\n  }\n\n  .hexclave-devtool .sdt-ov-btn {\n    height: 30px;\n    padding: 0 12px;\n    border-radius: 6px;\n    border: none;\n    font-size: 12px;\n    font-weight: 600;\n    font-family: var(--sdt-font);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n  }\n  .hexclave-devtool .sdt-ov-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n  .hexclave-devtool .sdt-ov-btn-primary {\n    background: var(--sdt-accent);\n    color: #fff;\n  }\n  .hexclave-devtool .sdt-ov-btn-primary:hover { background: var(--sdt-accent-hover); }\n\n  .hexclave-devtool .sdt-ov-btn-secondary {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n  .hexclave-devtool .sdt-ov-btn-secondary:hover { background: var(--sdt-bg-active); }\n\n  .hexclave-devtool .sdt-ov-btn-danger {\n    background: var(--sdt-error-muted);\n    color: var(--sdt-error);\n    border: 1px solid rgba(239, 68, 68, 0.15);\n  }\n  .hexclave-devtool .sdt-ov-btn-danger:hover { background: rgba(239, 68, 68, 0.2); }\n\n  .hexclave-devtool .sdt-ov-btn-wide { flex: 1; }\n\n  .hexclave-devtool .sdt-ov-email-input {\n    display: flex;\n    flex: 1 1 180px;\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: 6px;\n    overflow: hidden;\n    background: var(--sdt-bg);\n    transition: border-color 0.15s ease;\n  }\n  .hexclave-devtool .sdt-ov-email-input:focus-within {\n    border-color: var(--sdt-accent);\n    box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n  }\n  .hexclave-devtool .sdt-ov-email-input input {\n    flex: 1;\n    height: 28px;\n    padding: 0 8px;\n    background: transparent;\n    border: none;\n    color: var(--sdt-text);\n    font-size: 11px;\n    font-family: var(--sdt-font);\n    outline: none;\n    min-width: 0;\n  }\n  .hexclave-devtool .sdt-ov-email-input input::placeholder { color: var(--sdt-text-tertiary); }\n  .hexclave-devtool .sdt-ov-email-input button {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-left: 1px solid var(--sdt-border-subtle);\n    background: transparent;\n    color: var(--sdt-accent);\n    cursor: pointer;\n    flex-shrink: 0;\n    font-family: var(--sdt-font);\n  }\n  .hexclave-devtool .sdt-ov-email-input button:hover { background: var(--sdt-accent-muted); }\n  .hexclave-devtool .sdt-ov-email-input button:disabled { opacity: 0.3; cursor: not-allowed; }\n\n  .hexclave-devtool .sdt-ov-toast {\n    font-size: 11px;\n    padding: 5px 10px;\n    border-radius: 6px;\n    margin-top: 8px;\n    line-height: 1.4;\n  }\n  .hexclave-devtool .sdt-ov-toast-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n  .hexclave-devtool .sdt-ov-toast-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n\n  /* --- Auth methods card --- */\n  .hexclave-devtool .sdt-ov-card-auth {\n    padding: 14px 16px;\n  }\n\n  .hexclave-devtool .sdt-ov-auth-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n\n  .hexclave-devtool .sdt-ov-method {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    padding: 4px 8px;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 600;\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg);\n    transition: all 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-ov-method-on {\n    color: var(--sdt-text);\n    background: var(--sdt-success-muted);\n    border-color: rgba(34, 197, 94, 0.12);\n  }\n\n  .hexclave-devtool .sdt-ov-method-off {\n    color: var(--sdt-text-tertiary);\n    opacity: 0.5;\n    border-style: dashed;\n  }\n\n  .hexclave-devtool .sdt-ov-method-oauth {\n    text-transform: capitalize;\n  }\n\n  .hexclave-devtool .sdt-ov-method-warn {\n    color: var(--sdt-warning);\n    border-color: rgba(234, 179, 8, 0.2);\n  }\n\n  .hexclave-devtool .sdt-ov-skeleton-pill {\n    width: 64px;\n    height: 26px;\n    border-radius: 6px;\n    background: var(--sdt-bg-hover);\n    border: 1px solid var(--sdt-border-subtle);\n    animation: sdt-ov-shimmer 1.5s ease-in-out infinite;\n  }\n\n  @keyframes sdt-ov-shimmer {\n    0%, 100% { opacity: 0.4; }\n    50% { opacity: 0.7; }\n  }\n\n  /* --- Setup checklist card (only shown when something is incomplete) --- */\n  .hexclave-devtool .sdt-ov-card-checks {\n    padding: 14px 16px;\n    border-color: rgba(234, 179, 8, 0.25);\n  }\n\n  .hexclave-devtool .sdt-ov-checks-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    margin-bottom: 8px;\n  }\n\n  .hexclave-devtool .sdt-ov-checks-badge {\n    font-size: 10px;\n    font-weight: 700;\n    padding: 1px 6px;\n    border-radius: 4px;\n  }\n\n  .hexclave-devtool .sdt-ov-checks-badge-ok {\n    background: var(--sdt-success-muted);\n    color: var(--sdt-success);\n  }\n\n  .hexclave-devtool .sdt-ov-checks-badge-warn {\n    background: var(--sdt-warning-muted);\n    color: var(--sdt-warning);\n  }\n\n  .hexclave-devtool .sdt-ov-checks-bar {\n    height: 3px;\n    border-radius: 2px;\n    background: var(--sdt-border-subtle);\n    margin-bottom: 10px;\n    overflow: hidden;\n  }\n\n  .hexclave-devtool .sdt-ov-checks-bar-fill {\n    height: 100%;\n    border-radius: 2px;\n    background: var(--sdt-warning);\n    transition: width 0.4s ease;\n  }\n\n  .hexclave-devtool .sdt-ov-setup-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 0;\n    font-size: 12px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n  }\n\n  .hexclave-devtool .sdt-ov-setup-row:last-child { border-bottom: none; }\n\n  .hexclave-devtool .sdt-ov-setup-dot {\n    width: 7px;\n    height: 7px;\n    border-radius: 50%;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-ov-setup-dot-ok { background: var(--sdt-success); }\n  .hexclave-devtool .sdt-ov-setup-dot-warn { background: var(--sdt-warning); }\n\n  .hexclave-devtool .sdt-ov-setup-label {\n    color: var(--sdt-text);\n    font-size: 12px;\n  }\n\n  .hexclave-devtool .sdt-ov-setup-hint {\n    margin-left: auto;\n    font-size: 11px;\n    color: var(--sdt-text-tertiary);\n  }\n\n  /* Status badges (shared across tabs) */\n  .hexclave-devtool .sdt-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n  }\n  .hexclave-devtool .sdt-badge-success { background: var(--sdt-success-muted); color: var(--sdt-success); }\n  .hexclave-devtool .sdt-badge-warning { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n  .hexclave-devtool .sdt-badge-error { background: var(--sdt-error-muted); color: var(--sdt-error); }\n  .hexclave-devtool .sdt-badge-info { background: var(--sdt-info-muted); color: var(--sdt-info); }\n\n  /* ===== Components / Pages tab ===== */\n\n  .hexclave-devtool .sdt-pg-layout {\n    display: flex;\n    height: calc(100% + 32px);\n    margin: -16px;\n  }\n\n  /* --- Sidebar --- */\n  .hexclave-devtool .sdt-pg-sidebar {\n    width: 250px;\n    flex-shrink: 0;\n    border-right: 1px solid var(--sdt-border);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .hexclave-devtool .sdt-pg-sidebar-head {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 12px 14px 8px;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-pg-sidebar-title {\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-devtool .sdt-pg-sidebar-count {\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--sdt-text-tertiary);\n    background: var(--sdt-bg-active);\n    padding: 0 5px;\n    border-radius: 6px;\n    line-height: 18px;\n  }\n\n  .hexclave-devtool .sdt-pg-sidebar-warn {\n    margin-left: auto;\n    font-size: 10px;\n    font-weight: 700;\n    color: var(--sdt-warning);\n    background: var(--sdt-warning-muted);\n    padding: 0 6px;\n    border-radius: 6px;\n    line-height: 18px;\n  }\n\n  .hexclave-devtool .sdt-pg-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 6px 6px;\n  }\n\n  /* --- List item --- */\n  .hexclave-devtool .sdt-pg-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 7px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.12s ease;\n    font-size: 13px;\n    color: var(--sdt-text);\n    position: relative;\n  }\n\n  .hexclave-devtool .sdt-pg-item:hover {\n    background: var(--sdt-bg-hover);\n  }\n\n  .hexclave-devtool .sdt-pg-item[data-selected=\"true\"] {\n    background: var(--sdt-accent-muted);\n  }\n\n  .hexclave-devtool .sdt-pg-item[data-selected=\"true\"] .sdt-pg-item-label {\n    color: var(--sdt-accent-hover);\n    font-weight: 600;\n  }\n\n  .hexclave-devtool .sdt-pg-item-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    flex-shrink: 0;\n  }\n  .hexclave-devtool .sdt-pg-item-dot-handler { background: var(--sdt-info); }\n  .hexclave-devtool .sdt-pg-item-dot-custom { background: var(--sdt-success); }\n  .hexclave-devtool .sdt-pg-item-dot-warn {\n    background: var(--sdt-warning);\n    box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);\n  }\n\n  .hexclave-devtool .sdt-pg-item-label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* --- Badges --- */\n  .hexclave-devtool .sdt-pg-badge {\n    display: inline-flex;\n    align-items: center;\n    height: 20px;\n    padding: 0 7px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    letter-spacing: 0.2px;\n    flex-shrink: 0;\n    line-height: 1;\n  }\n\n  .hexclave-devtool .sdt-pg-badge-outdated { background: var(--sdt-warning-muted); color: var(--sdt-warning); }\n\n  /* --- Empty state --- */\n  .hexclave-devtool .sdt-pg-empty {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    text-align: center;\n  }\n\n  .hexclave-devtool .sdt-pg-empty-icon {\n    color: var(--sdt-text-tertiary);\n    opacity: 0.35;\n    margin-bottom: 4px;\n  }\n\n  .hexclave-devtool .sdt-pg-empty-text {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sdt-text-secondary);\n  }\n\n  .hexclave-devtool .sdt-pg-empty-sub {\n    font-size: 12px;\n    color: var(--sdt-text-tertiary);\n  }\n\n  /* --- Main panel --- */\n  .hexclave-devtool .sdt-pg-main {\n    flex: 1;\n    overflow-y: auto;\n    padding: 16px 18px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* --- Detail view --- */\n  .hexclave-devtool .sdt-pg-detail {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  /* Header */\n  .hexclave-devtool .sdt-pg-header {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .hexclave-devtool .sdt-pg-header-top {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .hexclave-devtool .sdt-pg-title {\n    font-size: 15px;\n    font-weight: 700;\n    margin: 0;\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-pg-title-url {\n    min-width: 0;\n    max-width: 280px;\n    color: var(--sdt-text-tertiary);\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-decoration: none;\n  }\n\n  .hexclave-devtool .sdt-pg-title-url:hover {\n    color: var(--sdt-accent);\n  }\n\n  .hexclave-devtool .sdt-pg-subtitle {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.4;\n  }\n\n  .hexclave-devtool .sdt-pg-code-inline {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n  }\n\n  .hexclave-devtool .sdt-pg-code {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--sdt-font-mono);\n    font-size: 12px;\n    color: var(--sdt-accent);\n    background: var(--sdt-bg-elevated);\n    border-radius: 6px;\n    padding: 6px 10px;\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  /* --- Copy button --- */\n  .hexclave-devtool .sdt-pg-copy-btn {\n    height: 26px;\n    padding: 0 10px;\n    border-radius: 6px;\n    border: 1px solid var(--sdt-border);\n    background: var(--sdt-bg-active);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    font-size: 11px;\n    font-weight: 600;\n    font-family: var(--sdt-font);\n    transition: all 0.12s ease;\n    flex-shrink: 0;\n    white-space: nowrap;\n  }\n\n  .hexclave-devtool .sdt-pg-open-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    height: 32px;\n    padding: 0 12px;\n    font-size: 12px;\n  }\n\n  .hexclave-devtool .sdt-pg-open-btn svg {\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-pg-copy-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n    border-color: var(--sdt-accent);\n  }\n\n  .hexclave-devtool .sdt-pg-copy-btn-ok {\n    border-color: rgba(34, 197, 94, 0.3);\n    color: var(--sdt-success);\n    background: var(--sdt-success-muted);\n  }\n\n  /* --- Update banner --- */\n  .hexclave-devtool .sdt-pg-update-banner {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    padding: 10px 14px;\n    background: rgba(234, 179, 8, 0.08);\n    border: 1px solid rgba(234, 179, 8, 0.3);\n    border-radius: 10px;\n  }\n\n  .hexclave-devtool .sdt-pg-update-banner-icon {\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    background: rgba(234, 179, 8, 0.2);\n    color: var(--sdt-warning);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    font-weight: 800;\n    flex-shrink: 0;\n    margin-top: 1px;\n  }\n\n  .hexclave-devtool .sdt-pg-update-banner-body {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .hexclave-devtool .sdt-pg-update-banner-title {\n    font-size: 13px;\n    font-weight: 700;\n    color: var(--sdt-warning);\n    margin-bottom: 2px;\n  }\n\n  .hexclave-devtool .sdt-pg-update-banner-text {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.5;\n  }\n\n  .hexclave-devtool .sdt-pg-update-banner-text strong {\n    color: var(--sdt-text);\n    font-weight: 600;\n  }\n\n  /* --- Sections (changelog, prompt) --- */\n  .hexclave-devtool .sdt-pg-section {\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: 10px;\n    padding: 12px 14px;\n    background: var(--sdt-bg-elevated);\n  }\n\n  .hexclave-devtool .sdt-pg-section-warn {\n    border-color: rgba(234, 179, 8, 0.25);\n    background: rgba(234, 179, 8, 0.03);\n  }\n\n  .hexclave-devtool .sdt-pg-section-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    margin-bottom: 8px;\n  }\n\n  .hexclave-devtool .sdt-pg-section-warn .sdt-pg-section-label {\n    color: var(--sdt-warning);\n  }\n\n  .hexclave-devtool .sdt-pg-section-footer {\n    display: flex;\n    margin-top: 8px;\n  }\n\n  /* Changelog list */\n  .hexclave-devtool .sdt-pg-changelog-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .hexclave-devtool .sdt-pg-changelog-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    font-size: 12px;\n    color: var(--sdt-text);\n    line-height: 1.5;\n  }\n\n  .hexclave-devtool .sdt-pg-changelog-bullet {\n    flex-shrink: 0;\n    font-size: 12px;\n    line-height: 1.5;\n  }\n\n  /* Pre block */\n  .hexclave-devtool .sdt-pg-pre {\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n    background: var(--sdt-bg);\n    border-radius: 6px;\n    padding: 10px 12px;\n    margin: 0;\n    white-space: pre-wrap;\n    word-break: break-word;\n    max-height: 200px;\n    overflow-y: auto;\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  .hexclave-devtool .sdt-preview-loading,\n  .hexclave-devtool .sdt-preview-unavailable {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.5;\n  }\n\n  .hexclave-devtool .sdt-preview-error {\n    font-size: 12px;\n    color: var(--sdt-error);\n    line-height: 1.5;\n  }\n\n  .hexclave-devtool .sdt-preview-code {\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-props-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 12px;\n  }\n\n  .hexclave-devtool .sdt-props-table th {\n    text-align: left;\n    font-weight: 600;\n    color: var(--sdt-text-tertiary);\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--sdt-border);\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .hexclave-devtool .sdt-props-table td {\n    padding: 6px 8px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-props-table td:first-child {\n    font-family: var(--sdt-font-mono);\n    color: var(--sdt-accent-hover);\n  }\n\n  .hexclave-devtool .sdt-props-table td:last-child {\n    font-family: var(--sdt-font-mono);\n    color: var(--sdt-text-secondary);\n  }\n\n  /* Iframe tabs */\n  .hexclave-devtool .sdt-iframe-container {\n    position: relative;\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .hexclave-devtool .sdt-iframe-toolbar {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    z-index: 1;\n    flex-shrink: 0;\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    gap: 8px;\n    padding: 0;\n  }\n\n  .hexclave-devtool .sdt-panel-fullscreen .sdt-iframe-toolbar {\n    top: 60px;\n    right: 12px;\n  }\n\n  .hexclave-devtool .sdt-iframe-open-link {\n    display: inline-flex;\n    align-items: center;\n    min-height: 28px;\n    padding: 0 10px;\n    background: var(--sdt-overlay-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-accent-hover);\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    text-decoration: none;\n  }\n\n  .hexclave-devtool .sdt-iframe-open-link:hover {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-iframe-container iframe {\n    flex: 1;\n    min-height: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n    background: white;\n    border-radius: 0;\n  }\n\n  .hexclave-devtool .sdt-iframe-loading {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--sdt-text-secondary);\n    font-size: 13px;\n  }\n\n  .hexclave-devtool .sdt-iframe-error {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    color: var(--sdt-text-secondary);\n    font-size: 13px;\n  }\n\n  .hexclave-devtool .sdt-iframe-error-btn {\n    padding: 6px 16px;\n    background: var(--sdt-accent);\n    color: white;\n    border: none;\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    transition: background 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-iframe-error-btn:hover {\n    background: var(--sdt-accent-hover);\n  }\n\n  /* Shared content fade animation */\n  .hexclave-devtool .sdt-tab-content-fade {\n    animation: sdt-tab-fade-in 0.15s ease-out;\n  }\n\n  /* Console tab */\n  .hexclave-devtool .sdt-console-panel {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    min-height: 0;\n  }\n\n  .hexclave-devtool .sdt-console-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 12px;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-console-title {\n    color: var(--sdt-text);\n    font-size: 13px;\n    font-weight: 600;\n  }\n\n  .hexclave-devtool .sdt-console-actions {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex-wrap: wrap;\n    justify-content: flex-end;\n  }\n\n  .hexclave-devtool .sdt-console-action-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 5px;\n    height: 28px;\n    padding: 0 9px;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;\n    white-space: nowrap;\n  }\n\n  .hexclave-devtool .sdt-console-action-btn:hover {\n    color: var(--sdt-text);\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n  }\n\n  .hexclave-devtool .sdt-console-action-btn svg {\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-console-log-scroll {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n  }\n\n  .hexclave-devtool .sdt-console-tabs {\n    position: relative;\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    background: var(--sdt-bg-subtle);\n    border-radius: var(--sdt-radius);\n    padding: 2px;\n  }\n\n  .hexclave-devtool .sdt-console-tab-indicator {\n    position: absolute;\n    top: 2px;\n    left: 0;\n    background: var(--sdt-bg-active);\n    border-radius: var(--sdt-radius-sm);\n    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n                width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n    pointer-events: none;\n    z-index: 0;\n  }\n\n  .hexclave-devtool .sdt-console-tab {\n    position: relative;\n    z-index: 1;\n    flex: 1;\n    padding: 6px 12px;\n    background: transparent;\n    border: none;\n    border-radius: var(--sdt-radius-sm);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    transition: color 0.15s ease;\n    text-align: center;\n  }\n\n  .hexclave-devtool .sdt-console-tab:hover {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-console-tab[data-active=\"true\"] {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-log-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .hexclave-devtool .sdt-log-load-hint {\n    padding: 8px 10px;\n    color: var(--sdt-text-tertiary);\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    text-align: center;\n  }\n\n  .hexclave-devtool .sdt-log-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 8px 10px;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    font-size: 12px;\n    font-family: var(--sdt-font-mono);\n  }\n\n  .hexclave-devtool .sdt-log-time {\n    color: var(--sdt-text-tertiary);\n    flex-shrink: 0;\n    font-size: 11px;\n  }\n\n  .hexclave-devtool .sdt-log-type {\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-log-message {\n    flex: 1;\n    color: var(--sdt-text);\n    word-break: break-all;\n  }\n\n  .hexclave-devtool .sdt-log-method {\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-log-method-get {\n    background: var(--sdt-info-muted);\n    color: var(--sdt-info);\n  }\n\n  .hexclave-devtool .sdt-log-method-post {\n    background: var(--sdt-success-muted);\n    color: var(--sdt-success);\n  }\n\n  .hexclave-devtool .sdt-log-method-put, .hexclave-devtool .sdt-log-method-patch {\n    background: var(--sdt-warning-muted);\n    color: var(--sdt-warning);\n  }\n\n  .hexclave-devtool .sdt-log-method-delete {\n    background: var(--sdt-error-muted);\n    color: var(--sdt-error);\n  }\n\n  .hexclave-devtool .sdt-log-status {\n    font-size: 11px;\n    flex-shrink: 0;\n  }\n\n  .hexclave-devtool .sdt-log-status-ok {\n    color: var(--sdt-success);\n  }\n\n  .hexclave-devtool .sdt-log-status-err {\n    color: var(--sdt-error);\n  }\n\n  .hexclave-devtool .sdt-log-url {\n    flex: 1;\n    color: var(--sdt-text);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .hexclave-devtool .sdt-empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex: 1;\n    padding: 40px 20px;\n    color: var(--sdt-text-tertiary);\n    font-size: 13px;\n    text-align: center;\n    gap: 4px;\n  }\n\n  .hexclave-devtool .sdt-empty-state-icon {\n    font-size: 24px;\n    margin-bottom: 8px;\n    opacity: 0.5;\n  }\n\n  /* Config info table */\n  .hexclave-devtool .sdt-config-table {\n    width: 100%;\n    border-collapse: collapse;\n  }\n\n  .hexclave-devtool .sdt-config-table td {\n    padding: 8px 10px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n    font-size: 12px;\n  }\n\n  .hexclave-devtool .sdt-config-table td:first-child {\n    color: var(--sdt-text-secondary);\n    width: 160px;\n    font-weight: 500;\n  }\n\n  .hexclave-devtool .sdt-config-table td:last-child {\n    color: var(--sdt-text);\n    font-family: var(--sdt-font-mono);\n    word-break: break-all;\n  }\n\n  .hexclave-devtool .sdt-config-table td .sdt-config-link {\n    font-family: inherit;\n    color: var(--sdt-accent);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .hexclave-devtool .sdt-config-table td .sdt-config-link:hover {\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-config-muted {\n    color: var(--sdt-text-tertiary);\n    font-style: italic;\n  }\n\n  /* Resize handle */\n  .hexclave-devtool .sdt-resize-handle {\n    position: absolute;\n    top: 0;\n    left: -4px;\n    width: 8px;\n    height: 100%;\n    cursor: ew-resize;\n    z-index: 10;\n  }\n\n  .hexclave-devtool .sdt-resize-handle::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 3px;\n    width: 2px;\n    height: 32px;\n    transform: translateY(-50%);\n    background: transparent;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-resize-handle:hover::after,\n  .hexclave-devtool .sdt-resize-handle:active::after {\n    background: var(--sdt-accent);\n  }\n\n  .hexclave-devtool .sdt-resize-handle-top {\n    position: absolute;\n    top: -4px;\n    left: 0;\n    width: 100%;\n    height: 8px;\n    cursor: ns-resize;\n    z-index: 10;\n  }\n\n  .hexclave-devtool .sdt-resize-handle-top::after {\n    content: '';\n    position: absolute;\n    left: 50%;\n    top: 3px;\n    height: 2px;\n    width: 32px;\n    transform: translateX(-50%);\n    background: transparent;\n    border-radius: 1px;\n    transition: background 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-resize-handle-top:hover::after,\n  .hexclave-devtool .sdt-resize-handle-top:active::after {\n    background: var(--sdt-accent);\n  }\n\n  .hexclave-devtool .sdt-resize-handle-corner {\n    position: absolute;\n    top: -6px;\n    left: -6px;\n    width: 14px;\n    height: 14px;\n    cursor: nwse-resize;\n    z-index: 11;\n  }\n\n  .hexclave-devtool .sdt-resize-handle-corner::after {\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    right: 4px;\n    width: 5px;\n    height: 5px;\n    background: transparent;\n    border-radius: 50%;\n    transition: background 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-resize-handle-corner:hover::after,\n  .hexclave-devtool .sdt-resize-handle-corner:active::after {\n    background: var(--sdt-accent);\n  }\n\n  .hexclave-devtool .sdt-no-components {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    color: var(--sdt-text-tertiary);\n    font-size: 13px;\n    text-align: center;\n    padding: 20px;\n  }\n\n  /* Support tab */\n  .hexclave-devtool .sdt-support-tab {\n    display: flex;\n    flex-direction: column;\n    height: calc(100% + 32px);\n    margin: -16px;\n  }\n\n  .hexclave-devtool .sdt-support-feedback-pane {\n    padding: 20px;\n    height: 100%;\n    overflow-y: auto;\n  }\n\n  /* Form layout */\n  .hexclave-devtool .sdt-support-form {\n    display: flex;\n    flex-direction: column;\n    gap: 14px;\n  }\n\n  /* Type cards */\n  .hexclave-devtool .sdt-support-type-cards {\n    display: flex;\n    gap: 8px;\n  }\n\n  .hexclave-devtool .sdt-support-type-card {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 8px 10px;\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--sdt-text-secondary);\n    transition: all 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-support-type-card svg {\n    flex-shrink: 0;\n    opacity: 0.6;\n    transition: opacity 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-support-type-card:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-support-type-card:hover svg {\n    opacity: 1;\n  }\n\n  .hexclave-devtool .sdt-support-type-card-active {\n    border-color: var(--sdt-accent);\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-support-type-card-active svg {\n    opacity: 1;\n    color: var(--sdt-accent);\n  }\n\n  /* Field group */\n  .hexclave-devtool .sdt-support-field {\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n  }\n\n  .hexclave-devtool .sdt-support-label {\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--sdt-text-secondary);\n    letter-spacing: 0.3px;\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n\n  .hexclave-devtool .sdt-support-optional {\n    font-size: 10px;\n    font-weight: 400;\n    color: var(--sdt-text-tertiary);\n    text-transform: none;\n    letter-spacing: 0;\n  }\n\n  /* Inputs */\n  .hexclave-devtool .sdt-support-input,\n  .hexclave-devtool .sdt-support-textarea {\n    width: 100%;\n    padding: 9px 12px;\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-text);\n    font-family: var(--sdt-font);\n    font-size: 13px;\n    outline: none;\n    transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-support-input::placeholder,\n  .hexclave-devtool .sdt-support-textarea::placeholder {\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-devtool .sdt-support-input:focus,\n  .hexclave-devtool .sdt-support-textarea:focus {\n    border-color: var(--sdt-accent);\n    box-shadow: 0 0 0 3px var(--sdt-accent-muted);\n  }\n\n  .hexclave-devtool .sdt-support-textarea {\n    resize: vertical;\n    min-height: 100px;\n    line-height: 1.6;\n  }\n\n  /* Submit button */\n  .hexclave-devtool .sdt-support-submit {\n    width: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 9px 20px;\n    background: var(--sdt-accent);\n    color: white;\n    border: none;\n    border-radius: var(--sdt-radius);\n    cursor: pointer;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 0.2px;\n    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow: 0 1px 3px rgba(99, 102, 241, 0.3);\n  }\n\n  .hexclave-devtool .sdt-support-submit:hover:not(:disabled) {\n    background: var(--sdt-accent-hover);\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);\n    transform: translateY(-1px);\n  }\n\n  .hexclave-devtool .sdt-support-submit:active:not(:disabled) {\n    transform: translateY(0);\n    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);\n  }\n\n  .hexclave-devtool .sdt-support-submit:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .hexclave-devtool .sdt-support-submit svg {\n    flex-shrink: 0;\n  }\n\n  @keyframes sdt-spin {\n    to { transform: rotate(360deg); }\n  }\n\n  .hexclave-devtool .sdt-support-spinner {\n    animation: sdt-spin 1s linear infinite;\n  }\n\n  /* Status screens (success / error) */\n  .hexclave-devtool .sdt-support-status {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 32px 20px;\n    border-radius: var(--sdt-radius-lg);\n    text-align: center;\n    gap: 6px;\n  }\n\n  .hexclave-devtool .sdt-support-status-success {\n    background: linear-gradient(180deg, var(--sdt-success-muted), transparent 80%);\n    border: 1px solid rgba(34, 197, 94, 0.15);\n  }\n\n  .hexclave-devtool .sdt-support-status-error {\n    background: linear-gradient(180deg, var(--sdt-error-muted), transparent 80%);\n    border: 1px solid rgba(239, 68, 68, 0.15);\n  }\n\n  .hexclave-devtool .sdt-support-status-icon {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 6px;\n  }\n\n  .hexclave-devtool .sdt-support-status-success .sdt-support-status-icon {\n    background: rgba(34, 197, 94, 0.15);\n    color: var(--sdt-success);\n    box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);\n  }\n\n  .hexclave-devtool .sdt-support-status-error .sdt-support-status-icon {\n    background: rgba(239, 68, 68, 0.15);\n    color: var(--sdt-error);\n    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);\n  }\n\n  .hexclave-devtool .sdt-support-status-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-support-status-msg {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    line-height: 1.5;\n    max-width: 260px;\n  }\n\n  /* Support channels */\n  .hexclave-devtool .sdt-support-channels {\n    display: flex;\n    gap: 8px;\n  }\n\n  .hexclave-devtool .sdt-support-channel {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 8px 10px;\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    color: var(--sdt-text-secondary);\n    text-decoration: none;\n    font-size: 11px;\n    font-weight: 500;\n    transition: all 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-support-channel:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-support-channel svg {\n    flex-shrink: 0;\n    opacity: 0.6;\n    transition: opacity 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-support-channel:hover svg {\n    opacity: 1;\n  }\n\n  /* --- Light theme: system preference fallback --- */\n  @media (prefers-color-scheme: light) {\n    .hexclave-devtool {\n      --sdt-bg: #ffffff;\n      --sdt-bg-elevated: #f8f8fa;\n      --sdt-bg-hover: #f0f0f3;\n      --sdt-bg-active: #e8e8ec;\n      --sdt-bg-subtle: #fafafa;\n      --sdt-border: #e0e0e5;\n      --sdt-border-subtle: #eaeaef;\n      --sdt-text: #111113;\n      --sdt-text-secondary: #6b6b73;\n      --sdt-text-tertiary: #9b9ba3;\n      --sdt-accent: #6366f1;\n      --sdt-accent-hover: #4f46e5;\n      --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n      --sdt-success: #16a34a;\n      --sdt-success-muted: rgba(22, 163, 74, 0.1);\n      --sdt-warning: #ca8a04;\n      --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n      --sdt-error: #dc2626;\n      --sdt-error-muted: rgba(220, 38, 38, 0.1);\n      --sdt-info: #2563eb;\n      --sdt-info-muted: rgba(37, 99, 235, 0.1);\n      --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n      --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n      --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n    }\n  }\n\n  /* Export dialog \u2014 positioned inside the dev tool panel */\n  .hexclave-devtool .sdt-share-overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 20;\n    background: rgba(0, 0, 0, 0.4);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: sdt-tab-fade-in 0.15s ease-out;\n    border-radius: var(--sdt-radius-lg);\n  }\n\n  .hexclave-devtool .sdt-share-dialog {\n    width: 380px;\n    max-width: calc(100% - 32px);\n    background: var(--sdt-bg);\n    border: 1px solid var(--sdt-border);\n    border-radius: var(--sdt-radius-lg);\n    box-shadow: var(--sdt-shadow);\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .hexclave-devtool .sdt-share-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .hexclave-devtool .sdt-share-title {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-share-status {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    padding: 20px;\n    color: var(--sdt-text-secondary);\n    font-size: 13px;\n  }\n\n  .hexclave-devtool .sdt-share-url-row {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n  }\n\n  .hexclave-devtool .sdt-share-url-row .sdt-support-input {\n    flex: 1;\n    font-family: var(--sdt-font-mono);\n    font-size: 12px;\n  }\n\n  .hexclave-devtool .sdt-share-copy-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    flex-shrink: 0;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-share-copy-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-share-actions {\n    display: flex;\n    gap: 8px;\n  }\n\n  .hexclave-devtool .sdt-share-action-btn {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 6px;\n    padding: 10px 12px;\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    color: var(--sdt-text-secondary);\n    text-decoration: none;\n    font-family: var(--sdt-font);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-share-action-btn:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-share-action-btn svg {\n    flex-shrink: 0;\n    opacity: 0.7;\n  }\n\n  .hexclave-devtool .sdt-share-action-btn:hover svg {\n    opacity: 1;\n  }\n\n  .hexclave-devtool .sdt-share-action-btn-accent {\n    background: var(--sdt-accent);\n    border-color: var(--sdt-accent);\n    color: white;\n  }\n\n  .hexclave-devtool .sdt-share-action-btn-accent:hover {\n    background: var(--sdt-accent-hover);\n    border-color: var(--sdt-accent-hover);\n    color: white;\n  }\n\n  .hexclave-devtool .sdt-share-action-btn-accent svg {\n    opacity: 1;\n  }\n\n  /* --- AI Chat tab --- */\n\n  .hexclave-devtool .sdt-ai-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .hexclave-devtool .sdt-ai-messages {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px;\n    scroll-behavior: smooth;\n  }\n\n  .hexclave-devtool .sdt-ai-message-list {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  /* --- Empty state --- */\n\n  .hexclave-devtool .sdt-ai-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    gap: 12px;\n    padding: 24px;\n    text-align: center;\n  }\n\n  .hexclave-devtool .sdt-ai-empty-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: var(--sdt-accent-muted);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--sdt-accent);\n    margin-bottom: 4px;\n  }\n\n  .hexclave-devtool .sdt-ai-empty-title {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-ai-empty-desc {\n    font-size: 12px;\n    color: var(--sdt-text-secondary);\n    max-width: 320px;\n    line-height: 1.5;\n  }\n\n  .hexclave-devtool .sdt-ai-suggestions {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin-top: 8px;\n    width: 100%;\n    max-width: 340px;\n  }\n\n  .hexclave-devtool .sdt-ai-suggestion {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    color: var(--sdt-text-secondary);\n    font-size: 12px;\n    cursor: pointer;\n    text-align: left;\n    transition: all 0.15s ease;\n    font-family: var(--sdt-font);\n    line-height: 1.4;\n  }\n\n  .hexclave-devtool .sdt-ai-suggestion:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-ai-suggestion-icon {\n    font-size: 14px;\n    flex-shrink: 0;\n  }\n\n  /* --- Messages --- */\n\n  .hexclave-devtool .sdt-ai-msg {\n    display: flex;\n    gap: 10px;\n    align-items: flex-start;\n  }\n\n  .hexclave-devtool .sdt-ai-msg-user {\n    justify-content: flex-end;\n  }\n\n  .hexclave-devtool .sdt-ai-msg-assistant {\n    justify-content: flex-start;\n  }\n\n  .hexclave-devtool .sdt-ai-avatar {\n    width: 26px;\n    height: 26px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    margin-top: 2px;\n  }\n\n  .hexclave-devtool .sdt-ai-avatar-user {\n    background: var(--sdt-info-muted);\n    color: var(--sdt-info);\n    order: 2;\n  }\n\n  .hexclave-devtool .sdt-ai-avatar-assistant {\n    background: var(--sdt-accent-muted);\n    color: var(--sdt-accent);\n  }\n\n  .hexclave-devtool .sdt-ai-bubble {\n    min-width: 0;\n    max-width: 85%;\n    border-radius: var(--sdt-radius-lg);\n    padding: 10px 14px;\n  }\n\n  .hexclave-devtool .sdt-ai-bubble-user {\n    background: var(--sdt-info-muted);\n    border: 1px solid rgba(59, 130, 246, 0.1);\n  }\n\n  .hexclave-devtool .sdt-ai-bubble-user p {\n    font-size: 13px;\n    line-height: 1.55;\n    color: var(--sdt-text);\n    margin: 0;\n    word-break: break-word;\n  }\n\n  .hexclave-devtool .sdt-ai-bubble-assistant {\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  /* --- Thinking dots --- */\n\n  .hexclave-devtool .sdt-ai-thinking {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 0;\n  }\n\n  .hexclave-devtool .sdt-ai-thinking-dot {\n    width: 5px;\n    height: 5px;\n    border-radius: 50%;\n    background: var(--sdt-accent);\n    opacity: 0.5;\n    animation: sdt-ai-pulse 1.2s ease-in-out infinite;\n  }\n\n  .hexclave-devtool .sdt-ai-thinking-dot:nth-child(2) { animation-delay: 0.15s; }\n  .hexclave-devtool .sdt-ai-thinking-dot:nth-child(3) { animation-delay: 0.3s; }\n\n  @keyframes sdt-ai-pulse {\n    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }\n    40% { opacity: 1; transform: scale(1.1); }\n  }\n\n  .hexclave-devtool .sdt-ai-streaming-indicator {\n    display: flex;\n    align-items: center;\n    gap: 3px;\n    margin-top: 6px;\n  }\n\n  /* --- Markdown content inside assistant bubble --- */\n\n  .hexclave-devtool .sdt-ai-paragraph {\n    font-size: 13px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n    margin: 0 0 10px;\n    word-break: break-word;\n  }\n\n  .hexclave-devtool .sdt-ai-paragraph:last-child { margin-bottom: 0; }\n\n  .hexclave-devtool .sdt-ai-bold {\n    font-weight: 600;\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-ai-inline-code {\n    display: inline;\n    padding: 1.5px 5px;\n    border-radius: 4px;\n    font-family: var(--sdt-font-mono);\n    font-size: 11.5px;\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n    border: 1px solid var(--sdt-border-subtle);\n  }\n\n  .hexclave-devtool .sdt-ai-link {\n    color: var(--sdt-info);\n    text-decoration: none;\n    transition: color 0.1s;\n  }\n\n  .hexclave-devtool .sdt-ai-link:hover {\n    color: var(--sdt-accent-hover);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .hexclave-devtool .sdt-ai-heading {\n    font-weight: 600;\n    color: var(--sdt-text);\n    margin: 12px 0 6px;\n    line-height: 1.35;\n  }\n\n  .hexclave-devtool .sdt-ai-heading:first-child { margin-top: 0; }\n\n  .hexclave-devtool .sdt-ai-bubble-assistant h1.sdt-ai-heading { font-size: 15px; }\n  .hexclave-devtool .sdt-ai-bubble-assistant h2.sdt-ai-heading { font-size: 13.5px; }\n  .hexclave-devtool .sdt-ai-bubble-assistant h3.sdt-ai-heading { font-size: 13px; }\n\n  .hexclave-devtool .sdt-ai-list {\n    font-size: 13px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n    margin: 0 0 10px;\n    padding-left: 20px;\n  }\n\n  .hexclave-devtool .sdt-ai-list:last-child { margin-bottom: 0; }\n\n  .hexclave-devtool .sdt-ai-list li {\n    margin-bottom: 3px;\n    padding-left: 2px;\n  }\n\n  .hexclave-devtool .sdt-ai-list li::marker {\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-devtool .sdt-ai-list-ordered {\n    list-style-type: decimal;\n  }\n\n  .hexclave-devtool .sdt-ai-tools {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    margin: 6px 0;\n  }\n\n  .hexclave-devtool .sdt-ai-part-text {\n    margin: 6px 0;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-card {\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-subtle);\n    overflow: hidden;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-header {\n    width: 100%;\n    border: none;\n    background: transparent;\n    color: inherit;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 10px;\n    cursor: pointer;\n    text-align: left;\n    font-family: var(--sdt-font);\n  }\n\n  .hexclave-devtool .sdt-ai-tool-header:hover {\n    background: var(--sdt-bg-hover);\n  }\n\n  .hexclave-devtool .sdt-ai-tool-name {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--sdt-text);\n    flex: 1;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-status {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    font-weight: 600;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-status-running { color: var(--sdt-warning); }\n  .hexclave-devtool .sdt-ai-tool-status-success { color: var(--sdt-success); }\n  .hexclave-devtool .sdt-ai-tool-status-error { color: var(--sdt-error); }\n\n  .hexclave-devtool .sdt-ai-tool-chevron {\n    color: var(--sdt-text-tertiary);\n    font-size: 10px;\n    transition: transform 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-chevron-open {\n    transform: rotate(180deg);\n  }\n\n  .hexclave-devtool .sdt-ai-tool-body {\n    border-top: 1px solid var(--sdt-border-subtle);\n    padding: 8px 10px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.4px;\n    color: var(--sdt-text-tertiary);\n    font-weight: 600;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-pre {\n    margin: 0;\n    padding: 8px;\n    border: 1px solid var(--sdt-border-subtle);\n    border-radius: var(--sdt-radius-sm);\n    background: var(--sdt-bg);\n    font-family: var(--sdt-font-mono);\n    font-size: 11px;\n    line-height: 1.5;\n    color: var(--sdt-text-secondary);\n    overflow-x: auto;\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .hexclave-devtool .sdt-ai-tool-running {\n    font-size: 11px;\n    color: var(--sdt-text-secondary);\n  }\n\n  .hexclave-devtool .sdt-ai-blockquote {\n    border-left: 3px solid var(--sdt-accent);\n    padding-left: 12px;\n    margin: 8px 0;\n    font-size: 13px;\n    color: var(--sdt-text-secondary);\n    font-style: italic;\n  }\n\n  .hexclave-devtool .sdt-ai-hr {\n    border: none;\n    border-top: 1px solid var(--sdt-border-subtle);\n    margin: 12px 0;\n  }\n\n  /* --- Code blocks --- */\n\n  .hexclave-devtool .sdt-ai-code-block {\n    border-radius: var(--sdt-radius);\n    overflow: hidden;\n    margin: 8px 0;\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg-subtle);\n  }\n\n  .hexclave-devtool .sdt-ai-code-block:last-child { margin-bottom: 0; }\n\n  .hexclave-devtool .sdt-ai-code-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n    border-bottom: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg);\n  }\n\n  .hexclave-devtool .sdt-ai-code-lang {\n    font-size: 9px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--sdt-text-tertiary);\n    font-family: var(--sdt-font);\n  }\n\n  .hexclave-devtool .sdt-ai-copy-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border-radius: var(--sdt-radius-sm);\n    border: none;\n    background: transparent;\n    color: var(--sdt-text-tertiary);\n    cursor: pointer;\n    font-size: 12px;\n    font-family: var(--sdt-font);\n    transition: all 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-ai-copy-btn:hover {\n    background: var(--sdt-bg-hover);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-ai-copy-btn-copied {\n    color: var(--sdt-success) !important;\n  }\n\n  .hexclave-devtool .sdt-ai-code-pre {\n    margin: 0;\n    padding: 10px 12px;\n    overflow-x: auto;\n    font-family: var(--sdt-font-mono);\n    font-size: 11.5px;\n    line-height: 1.6;\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-ai-code-pre code {\n    font-family: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n\n  /* --- Error --- */\n\n  .hexclave-devtool .sdt-ai-error {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 14px;\n    margin: 8px 16px;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-error-muted);\n    border: 1px solid rgba(239, 68, 68, 0.2);\n    font-size: 12px;\n    color: var(--sdt-error);\n    line-height: 1.4;\n  }\n\n  /* --- Input area --- */\n\n  .hexclave-devtool .sdt-ai-input-area {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    border-top: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg);\n  }\n\n  .hexclave-devtool .sdt-ai-new-chat {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border-radius: var(--sdt-radius);\n    border: 1px solid var(--sdt-border-subtle);\n    background: var(--sdt-bg-elevated);\n    color: var(--sdt-text-secondary);\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n    font-family: var(--sdt-font);\n  }\n\n  .hexclave-devtool .sdt-ai-new-chat:hover {\n    background: var(--sdt-bg-hover);\n    border-color: var(--sdt-border);\n    color: var(--sdt-text);\n  }\n\n  .hexclave-devtool .sdt-ai-input-wrapper {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    border-radius: var(--sdt-radius);\n    background: var(--sdt-bg-elevated);\n    border: 1px solid var(--sdt-border-subtle);\n    padding: 0 4px 0 12px;\n    transition: border-color 0.15s ease;\n  }\n\n  .hexclave-devtool .sdt-ai-input-wrapper:focus-within {\n    border-color: var(--sdt-accent);\n    box-shadow: 0 0 0 2px var(--sdt-accent-muted);\n  }\n\n  .hexclave-devtool .sdt-ai-input {\n    flex: 1;\n    background: transparent;\n    border: none;\n    outline: none;\n    color: var(--sdt-text);\n    font-size: 13px;\n    font-family: var(--sdt-font);\n    padding: 8px 0;\n    min-width: 0;\n  }\n\n  .hexclave-devtool .sdt-ai-input::placeholder {\n    color: var(--sdt-text-tertiary);\n  }\n\n  .hexclave-devtool .sdt-ai-input:disabled {\n    opacity: 0.5;\n  }\n\n  .hexclave-devtool .sdt-ai-send-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    border-radius: 6px;\n    border: none;\n    background: transparent;\n    color: var(--sdt-text-tertiary);\n    cursor: not-allowed;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n    font-family: var(--sdt-font);\n  }\n\n  .hexclave-devtool .sdt-ai-send-btn-active {\n    background: var(--sdt-accent);\n    color: white;\n    cursor: pointer;\n  }\n\n  .hexclave-devtool .sdt-ai-send-btn-active:hover {\n    background: var(--sdt-accent-hover);\n  }\n\n  .hexclave-devtool .sdt-ai-stop-btn,\n  .hexclave-devtool .sdt-ai-stop-btn:hover {\n    background: var(--sdt-error);\n    color: white;\n  }\n\n  /* Accessible focus indicator for keyboard navigation */\n  .hexclave-devtool .sdt-tab:focus-visible {\n    outline: 2px solid var(--sdt-accent);\n    outline-offset: -2px;\n    border-radius: var(--sdt-radius);\n  }\n\n  /* Reduced motion: disable animations for users who prefer it */\n  @media (prefers-reduced-motion: reduce) {\n    .hexclave-devtool .sdt-panel-inner,\n    .hexclave-devtool .sdt-panel-exiting,\n    .hexclave-devtool .sdt-tab-content,\n    .hexclave-devtool .sdt-ov-pulse-dot,\n    .hexclave-devtool .sdt-ov-skeleton-pill,\n    .hexclave-devtool .sdt-support-spinner,\n    .hexclave-devtool .sdt-ai-thinking-dot {\n      animation: none !important;\n    }\n\n    .hexclave-devtool .sdt-tab-indicator,\n    .hexclave-devtool .sdt-tab {\n      transition: none !important;\n    }\n  }\n\n  /* --- Stack theme explicit overrides (take priority over system preference) --- */\n  html:has(head > [data-stack-theme=\"light\"]) .hexclave-devtool {\n    --sdt-bg: #ffffff;\n    --sdt-bg-elevated: #f8f8fa;\n    --sdt-bg-hover: #f0f0f3;\n    --sdt-bg-active: #e8e8ec;\n    --sdt-bg-subtle: #fafafa;\n    --sdt-border: #e0e0e5;\n    --sdt-border-subtle: #eaeaef;\n    --sdt-text: #111113;\n    --sdt-text-secondary: #6b6b73;\n    --sdt-text-tertiary: #9b9ba3;\n    --sdt-accent: #6366f1;\n    --sdt-accent-hover: #4f46e5;\n    --sdt-accent-muted: rgba(99, 102, 241, 0.1);\n    --sdt-success: #16a34a;\n    --sdt-success-muted: rgba(22, 163, 74, 0.1);\n    --sdt-warning: #ca8a04;\n    --sdt-warning-muted: rgba(202, 138, 4, 0.1);\n    --sdt-error: #dc2626;\n    --sdt-error-muted: rgba(220, 38, 38, 0.1);\n    --sdt-info: #2563eb;\n    --sdt-info-muted: rgba(37, 99, 235, 0.1);\n    --sdt-overlay-bg: rgba(255, 255, 255, 0.92);\n    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);\n    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);\n  }\n\n  html:has(head > [data-stack-theme=\"dark\"]) .hexclave-devtool {\n    --sdt-bg: #0a0a0b;\n    --sdt-bg-elevated: #141416;\n    --sdt-bg-hover: #1c1c1f;\n    --sdt-bg-active: #232326;\n    --sdt-bg-subtle: #111113;\n    --sdt-border: #2a2a2e;\n    --sdt-border-subtle: #1e1e22;\n    --sdt-text: #ececef;\n    --sdt-text-secondary: #8b8b93;\n    --sdt-text-tertiary: #5c5c66;\n    --sdt-accent: #6366f1;\n    --sdt-accent-hover: #818cf8;\n    --sdt-accent-muted: rgba(99, 102, 241, 0.15);\n    --sdt-success: #22c55e;\n    --sdt-success-muted: rgba(34, 197, 94, 0.15);\n    --sdt-warning: #eab308;\n    --sdt-warning-muted: rgba(234, 179, 8, 0.15);\n    --sdt-error: #ef4444;\n    --sdt-error-muted: rgba(239, 68, 68, 0.15);\n    --sdt-info: #3b82f6;\n    --sdt-info-muted: rgba(59, 130, 246, 0.15);\n    --sdt-overlay-bg: rgba(17, 17, 19, 0.92);\n    --sdt-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);\n    --sdt-trigger-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n";
 //#endregion
 export { devToolCSS };
 //# sourceMappingURL=dev-tool-styles.d.ts.map