@hexclave/next 1.0.14 → 1.0.16

package/dist/dev-tool/dev-tool-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dev-tool-styles.js","names":[],"sources":["../../src/dev-tool/dev-tool-styles.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n// Theme-aware CSS for the dev tool indicator\n// Respects Stack theme (data-stack-theme attribute) and system prefers-color-scheme\n// Uses .hexclave-devtool scope to avoid conflicts with host app styles\n\nexport 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 — 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 — 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`;\n"],"mappings":";;;AAQA,MAAa,aAAa"}
+{"version":3,"file":"dev-tool-styles.js","names":[],"sources":["../../src/dev-tool/dev-tool-styles.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n// Theme-aware CSS for the dev tool indicator\n// Respects Stack theme (data-stack-theme attribute) and system prefers-color-scheme\n// Uses .hexclave-devtool scope to avoid conflicts with host app styles\n// Design tokens + base reset come from the shared in-page-ui module.\n\nimport { getInPageUiBaseCSS } from \"../in-page-ui/base-styles\";\n\nexport const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `\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: 2147483647;\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    overflow-y: hidden;\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    position: sticky;\n    right: 0;\n    z-index: 2;\n    display: flex;\n    align-items: center;\n    align-self: stretch;\n    gap: 4px;\n    padding-left: 6px;\n    background: inherit;\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  /* ===== Overview tab — 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 + data-stack-theme overrides come from the shared in-page-ui\n     base styles (in-page-ui/base-styles.ts). */\n\n  /* Export dialog — 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`;\n"],"mappings":";;;;;AAWA,MAAa,kEAAgC,oBAAoB,GAAG"}

package/dist/dev-tool/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/dev-tool/index.ts"],"mappings":";;;;;AA+FA;;;;;;;;;;iBAAgB,YAAA,CAAa,GAAA,EAAK,cAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/dev-tool/index.ts"],"mappings":";;;;;AAkFA;;;;;;;;;;iBAAgB,YAAA,CAAa,GAAA,EAAK,cAAA"}

package/dist/dev-tool/index.js

@@ -1,19 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
 let _hexclave_shared_dist_utils_promises = require("@hexclave/shared/dist/utils/promises");
+let ___in_page_ui_dom_js = require("../in-page-ui/dom.js");
 let _hexclave_shared_dist_utils_errors = require("@hexclave/shared/dist/utils/errors");
 let _hexclave_shared_dist_utils_urls = require("@hexclave/shared/dist/utils/urls");
 
 //#region src/dev-tool/index.ts
 const OVERRIDE_KEY = "__hexclave-dev-tool-override";
-function hasAppendChild(value) {
-	return typeof value === "object" && value !== null && typeof Reflect.get(value, "appendChild") === "function";
-}
-function canMountIntoDom() {
-	if (typeof window === "undefined" || typeof document === "undefined") return false;
-	if (typeof document.createElement !== "function") return false;
-	return hasAppendChild(Reflect.get(document, "body"));
-}
 function getOverride() {
 	try {
 		const val = localStorage.getItem(OVERRIDE_KEY);
@@ -25,7 +18,7 @@ function getOverride() {
 function shouldShow() {
 	const override = getOverride();
 	if (override !== null) return override;
-	if (!canMountIntoDom()) return false;
+	if (!(0, ___in_page_ui_dom_js.canMountIntoDom)()) return false;
 	return (0, _hexclave_shared_dist_utils_urls.isLocalhost)(window.location.href);
 }
 let activeCleanup = null;
@@ -44,13 +37,13 @@ function tryMount() {
 		activeCleanup();
 		activeCleanup = null;
 	}
-	if (!shouldShow() || !activeApp || !canMountIntoDom()) return;
+	if (!shouldShow() || !activeApp || !(0, ___in_page_ui_dom_js.canMountIntoDom)()) return;
 	const generation = ++mountGeneration;
 	const app = activeApp;
 	(0, _hexclave_shared_dist_utils_promises.runAsynchronously)(async () => {
 		const createDevTool = await loadCreateDevTool();
 		if (generation !== mountGeneration) return;
-		if (!shouldShow() || activeApp !== app || !canMountIntoDom()) return;
+		if (!shouldShow() || activeApp !== app || !(0, ___in_page_ui_dom_js.canMountIntoDom)()) return;
 		activeCleanup = createDevTool(app);
 	}, {
 		noErrorLogging: true,

package/dist/dev-tool/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/dev-tool/index.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport type { StackClientApp } from \"../lib/hexclave-app\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { isLocalhost } from \"@hexclave/shared/dist/utils/urls\";\nimport type { createDevTool as CreateDevToolFn } from \"./dev-tool-core\";\n\n// Hexclave rebrand: UI-only local pref — straight rename (one-time reset is harmless)\nconst OVERRIDE_KEY = '__hexclave-dev-tool-override';\n\nfunction hasAppendChild(value: unknown): value is { appendChild(node: Node): void } {\n  return typeof value === 'object' && value !== null && typeof Reflect.get(value, 'appendChild') === 'function';\n}\n\nfunction canMountIntoDom(): boolean {\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    return false;\n  }\n  if (typeof document.createElement !== 'function') {\n    return false;\n  }\n  return hasAppendChild(Reflect.get(document, 'body'));\n}\n\nfunction getOverride(): boolean | null {\n  try {\n    const val = localStorage.getItem(OVERRIDE_KEY);\n    if (val === 'true') return true;\n    if (val === 'false') return false;\n  } catch {}\n  return null;\n}\n\nfunction shouldShow(): boolean {\n  const override = getOverride();\n  if (override !== null) return override;\n  if (!canMountIntoDom()) return false;\n  return isLocalhost(window.location.href);\n}\n\nlet activeCleanup: (() => void) | null = null;\nlet activeApp: StackClientApp<true> | null = null;\nlet mountGeneration = 0;\n\nlet createDevToolPromise: Promise<typeof CreateDevToolFn> | null = null;\nfunction loadCreateDevTool(): Promise<typeof CreateDevToolFn> {\n  if (!createDevToolPromise) {\n    createDevToolPromise = import(\"./dev-tool-core\").then(m => m.createDevTool).catch((err) => {\n      createDevToolPromise = null;\n      throw err;\n    });\n  }\n  return createDevToolPromise;\n}\n\nfunction tryMount() {\n  if (activeCleanup) {\n    activeCleanup();\n    activeCleanup = null;\n  }\n\n  if (!shouldShow() || !activeApp || !canMountIntoDom()) return;\n\n  const generation = ++mountGeneration;\n  const app = activeApp;\n\n  runAsynchronously(async () => {\n    const createDevTool = await loadCreateDevTool();\n    if (generation !== mountGeneration) return;\n    if (!shouldShow() || activeApp !== app || !canMountIntoDom()) return;\n    activeCleanup = createDevTool(app);\n  }, {\n    noErrorLogging: true,\n    onError: (error) => {\n      captureError(\"dev-tool-mount\", error);\n    },\n  });\n}\n\n/**\n * Mounts the Hexclave dev tool on the page.\n *\n * - Only renders on localhost (or when overridden via console)\n * - Lazily loads the dev tool UI via dynamic import\n * - Returns a cleanup function to unmount\n *\n * Console commands (also work in production):\n *   HexclaveDevTool.enable()  — force-show the dev tool\n *   HexclaveDevTool.disable() — force-hide the dev tool\n *   HexclaveDevTool.reset()   — revert to default (localhost-only)\n */\nexport function mountDevTool(app: StackClientApp<true>): () => void {\n  activeApp = app;\n  tryMount();\n\n  // Capture the cleanup created by THIS specific mount call so that React\n  // StrictMode's double-invoke doesn't let the first effect's cleanup tear\n  // down the second mount (which would cause the tool to disappear silently).\n  const myCleanup = activeCleanup;\n\n  return () => {\n    activeApp = null;\n    if (activeCleanup === myCleanup && myCleanup != null) {\n      activeCleanup = null;\n      myCleanup();\n    }\n  };\n}\n\n// Expose console commands: HexclaveDevTool.enable() / .disable() / .reset()\nif (typeof window !== 'undefined') {\n  // Hexclave rebrand: expose under both the legacy and new global names.\n  (window as any).HexclaveDevTool = (window as any).HexclaveDevTool = {\n    enable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'true');\n      } catch {}\n      tryMount();\n      console.log('[Stack DevTool] Enabled. Refresh if the panel does not appear.');\n    },\n    disable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'false');\n      } catch {}\n      if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Disabled.');\n    },\n    reset() {\n      try {\n        localStorage.removeItem(OVERRIDE_KEY);\n      } catch {}\n      if (shouldShow()) {\n        tryMount();\n      } else if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Reset to default (visible on localhost only).');\n    },\n  };\n}\n\n"],"mappings":";;;;;;;AAYA,MAAM,eAAe;AAErB,SAAS,eAAe,OAA4D;AAClF,QAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,OAAO,QAAQ,IAAI,OAAO,cAAc,KAAK;;AAGrG,SAAS,kBAA2B;AAClC,KAAI,OAAO,WAAW,eAAe,OAAO,aAAa,YACvD,QAAO;AAET,KAAI,OAAO,SAAS,kBAAkB,WACpC,QAAO;AAET,QAAO,eAAe,QAAQ,IAAI,UAAU,OAAO,CAAC;;AAGtD,SAAS,cAA8B;AACrC,KAAI;EACF,MAAM,MAAM,aAAa,QAAQ,aAAa;AAC9C,MAAI,QAAQ,OAAQ,QAAO;AAC3B,MAAI,QAAQ,QAAS,QAAO;SACtB;AACR,QAAO;;AAGT,SAAS,aAAsB;CAC7B,MAAM,WAAW,aAAa;AAC9B,KAAI,aAAa,KAAM,QAAO;AAC9B,KAAI,CAAC,iBAAiB,CAAE,QAAO;AAC/B,0DAAmB,OAAO,SAAS,KAAK;;AAG1C,IAAI,gBAAqC;AACzC,IAAI,YAAyC;AAC7C,IAAI,kBAAkB;AAEtB,IAAI,uBAA+D;AACnE,SAAS,oBAAqD;AAC5D,KAAI,CAAC,qBACH,wBAAuB,OAAO,sBAAmB,MAAK,MAAK,EAAE,cAAc,CAAC,OAAO,QAAQ;AACzF,yBAAuB;AACvB,QAAM;GACN;AAEJ,QAAO;;AAGT,SAAS,WAAW;AAClB,KAAI,eAAe;AACjB,iBAAe;AACf,kBAAgB;;AAGlB,KAAI,CAAC,YAAY,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAE;CAEvD,MAAM,aAAa,EAAE;CACrB,MAAM,MAAM;AAEZ,6DAAkB,YAAY;EAC5B,MAAM,gBAAgB,MAAM,mBAAmB;AAC/C,MAAI,eAAe,gBAAiB;AACpC,MAAI,CAAC,YAAY,IAAI,cAAc,OAAO,CAAC,iBAAiB,CAAE;AAC9D,kBAAgB,cAAc,IAAI;IACjC;EACD,gBAAgB;EAChB,UAAU,UAAU;AAClB,wDAAa,kBAAkB,MAAM;;EAExC,CAAC;;;;;;;;;;;;;;AAeJ,SAAgB,aAAa,KAAuC;AAClE,aAAY;AACZ,WAAU;CAKV,MAAM,YAAY;AAElB,cAAa;AACX,cAAY;AACZ,MAAI,kBAAkB,aAAa,aAAa,MAAM;AACpD,mBAAgB;AAChB,cAAW;;;;AAMjB,IAAI,OAAO,WAAW,YAEpB,CAAC,OAAe,kBAAkB,AAAC,OAAe,kBAAkB;CAClE,SAAS;AACP,MAAI;AACF,gBAAa,QAAQ,cAAc,OAAO;UACpC;AACR,YAAU;AACV,UAAQ,IAAI,iEAAiE;;CAE/E,UAAU;AACR,MAAI;AACF,gBAAa,QAAQ,cAAc,QAAQ;UACrC;AACR,MAAI,eAAe;AACjB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,4BAA4B;;CAE1C,QAAQ;AACN,MAAI;AACF,gBAAa,WAAW,aAAa;UAC/B;AACR,MAAI,YAAY,CACd,WAAU;WACD,eAAe;AACxB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,gEAAgE;;CAE/E"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/dev-tool/index.ts"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport type { StackClientApp } from \"../lib/hexclave-app\";\nimport { captureError } from \"@hexclave/shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@hexclave/shared/dist/utils/promises\";\nimport { isLocalhost } from \"@hexclave/shared/dist/utils/urls\";\nimport { canMountIntoDom } from \"../in-page-ui/dom\";\nimport type { createDevTool as CreateDevToolFn } from \"./dev-tool-core\";\n\n// Hexclave rebrand: UI-only local pref — straight rename (one-time reset is harmless)\nconst OVERRIDE_KEY = '__hexclave-dev-tool-override';\n\nfunction getOverride(): boolean | null {\n  try {\n    const val = localStorage.getItem(OVERRIDE_KEY);\n    if (val === 'true') return true;\n    if (val === 'false') return false;\n  } catch {}\n  return null;\n}\n\nfunction shouldShow(): boolean {\n  const override = getOverride();\n  if (override !== null) return override;\n  if (!canMountIntoDom()) return false;\n  return isLocalhost(window.location.href);\n}\n\nlet activeCleanup: (() => void) | null = null;\nlet activeApp: StackClientApp<true> | null = null;\nlet mountGeneration = 0;\n\nlet createDevToolPromise: Promise<typeof CreateDevToolFn> | null = null;\nfunction loadCreateDevTool(): Promise<typeof CreateDevToolFn> {\n  if (!createDevToolPromise) {\n    createDevToolPromise = import(\"./dev-tool-core\").then(m => m.createDevTool).catch((err) => {\n      createDevToolPromise = null;\n      throw err;\n    });\n  }\n  return createDevToolPromise;\n}\n\nfunction tryMount() {\n  if (activeCleanup) {\n    activeCleanup();\n    activeCleanup = null;\n  }\n\n  if (!shouldShow() || !activeApp || !canMountIntoDom()) return;\n\n  const generation = ++mountGeneration;\n  const app = activeApp;\n\n  runAsynchronously(async () => {\n    const createDevTool = await loadCreateDevTool();\n    if (generation !== mountGeneration) return;\n    if (!shouldShow() || activeApp !== app || !canMountIntoDom()) return;\n    activeCleanup = createDevTool(app);\n  }, {\n    noErrorLogging: true,\n    onError: (error) => {\n      captureError(\"dev-tool-mount\", error);\n    },\n  });\n}\n\n/**\n * Mounts the Hexclave dev tool on the page.\n *\n * - Only renders on localhost (or when overridden via console)\n * - Lazily loads the dev tool UI via dynamic import\n * - Returns a cleanup function to unmount\n *\n * Console commands (also work in production):\n *   HexclaveDevTool.enable()  — force-show the dev tool\n *   HexclaveDevTool.disable() — force-hide the dev tool\n *   HexclaveDevTool.reset()   — revert to default (localhost-only)\n */\nexport function mountDevTool(app: StackClientApp<true>): () => void {\n  activeApp = app;\n  tryMount();\n\n  // Capture the cleanup created by THIS specific mount call so that React\n  // StrictMode's double-invoke doesn't let the first effect's cleanup tear\n  // down the second mount (which would cause the tool to disappear silently).\n  const myCleanup = activeCleanup;\n\n  return () => {\n    activeApp = null;\n    if (activeCleanup === myCleanup && myCleanup != null) {\n      activeCleanup = null;\n      myCleanup();\n    }\n  };\n}\n\n// Expose console commands: HexclaveDevTool.enable() / .disable() / .reset()\nif (typeof window !== 'undefined') {\n  // Hexclave rebrand: expose under both the legacy and new global names.\n  (window as any).HexclaveDevTool = (window as any).HexclaveDevTool = {\n    enable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'true');\n      } catch {}\n      tryMount();\n      console.log('[Stack DevTool] Enabled. Refresh if the panel does not appear.');\n    },\n    disable() {\n      try {\n        localStorage.setItem(OVERRIDE_KEY, 'false');\n      } catch {}\n      if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Disabled.');\n    },\n    reset() {\n      try {\n        localStorage.removeItem(OVERRIDE_KEY);\n      } catch {}\n      if (shouldShow()) {\n        tryMount();\n      } else if (activeCleanup) {\n        activeCleanup();\n        activeCleanup = null;\n      }\n      console.log('[Stack DevTool] Reset to default (visible on localhost only).');\n    },\n  };\n}\n\n"],"mappings":";;;;;;;;AAaA,MAAM,eAAe;AAErB,SAAS,cAA8B;AACrC,KAAI;EACF,MAAM,MAAM,aAAa,QAAQ,aAAa;AAC9C,MAAI,QAAQ,OAAQ,QAAO;AAC3B,MAAI,QAAQ,QAAS,QAAO;SACtB;AACR,QAAO;;AAGT,SAAS,aAAsB;CAC7B,MAAM,WAAW,aAAa;AAC9B,KAAI,aAAa,KAAM,QAAO;AAC9B,KAAI,4CAAkB,CAAE,QAAO;AAC/B,0DAAmB,OAAO,SAAS,KAAK;;AAG1C,IAAI,gBAAqC;AACzC,IAAI,YAAyC;AAC7C,IAAI,kBAAkB;AAEtB,IAAI,uBAA+D;AACnE,SAAS,oBAAqD;AAC5D,KAAI,CAAC,qBACH,wBAAuB,OAAO,sBAAmB,MAAK,MAAK,EAAE,cAAc,CAAC,OAAO,QAAQ;AACzF,yBAAuB;AACvB,QAAM;GACN;AAEJ,QAAO;;AAGT,SAAS,WAAW;AAClB,KAAI,eAAe;AACjB,iBAAe;AACf,kBAAgB;;AAGlB,KAAI,CAAC,YAAY,IAAI,CAAC,aAAa,4CAAkB,CAAE;CAEvD,MAAM,aAAa,EAAE;CACrB,MAAM,MAAM;AAEZ,6DAAkB,YAAY;EAC5B,MAAM,gBAAgB,MAAM,mBAAmB;AAC/C,MAAI,eAAe,gBAAiB;AACpC,MAAI,CAAC,YAAY,IAAI,cAAc,OAAO,4CAAkB,CAAE;AAC9D,kBAAgB,cAAc,IAAI;IACjC;EACD,gBAAgB;EAChB,UAAU,UAAU;AAClB,wDAAa,kBAAkB,MAAM;;EAExC,CAAC;;;;;;;;;;;;;;AAeJ,SAAgB,aAAa,KAAuC;AAClE,aAAY;AACZ,WAAU;CAKV,MAAM,YAAY;AAElB,cAAa;AACX,cAAY;AACZ,MAAI,kBAAkB,aAAa,aAAa,MAAM;AACpD,mBAAgB;AAChB,cAAW;;;;AAMjB,IAAI,OAAO,WAAW,YAEpB,CAAC,OAAe,kBAAkB,AAAC,OAAe,kBAAkB;CAClE,SAAS;AACP,MAAI;AACF,gBAAa,QAAQ,cAAc,OAAO;UACpC;AACR,YAAU;AACV,UAAQ,IAAI,iEAAiE;;CAE/E,UAAU;AACR,MAAI;AACF,gBAAa,QAAQ,cAAc,QAAQ;UACrC;AACR,MAAI,eAAe;AACjB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,4BAA4B;;CAE1C,QAAQ;AACN,MAAI;AACF,gBAAa,WAAW,aAAa;UAC/B;AACR,MAAI,YAAY,CACd,WAAU;WACD,eAAe;AACxB,kBAAe;AACf,mBAAgB;;AAElB,UAAQ,IAAI,gEAAgE;;CAE/E"}

package/dist/esm/clickmap/clickmap-core.d.ts

@@ -0,0 +1,15 @@
+import { StackClientApp } from "../lib/hexclave-app";
+
+//#region src/clickmap/clickmap-core.d.ts
+/**
+ * Opens the clickmap overlay: mounts its own root element, injects its own
+ * styles, and shows the bottom-centered panel.
+ *
+ * Returns a cleanup that tears everything down. `onClosed` fires exactly once,
+ * when the overlay is closed (by the user or via the returned cleanup), so the
+ * caller can let a later token event reopen it.
+ */
+declare function openClickmapOverlay(app: StackClientApp<true>, onClosed: () => void): () => void;
+//#endregion
+export { openClickmapOverlay };
+//# sourceMappingURL=clickmap-core.d.ts.map

package/dist/esm/clickmap/clickmap-core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clickmap-core.d.ts","names":[],"sources":["../../../src/clickmap/clickmap-core.ts"],"mappings":";;;;;AAu5DA;;;;;;iBAAgB,mBAAA,CAAoB,GAAA,EAAK,cAAA,QAAsB,QAAA"}