/* ═══ Agent Builder Portal — Custom Styles ═══ */

/* ── Accessibility: Skip Link ── */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 8px 16px;
    background: var(--bg-1, #111);
    color: var(--text-primary, #e5e5e5);
    z-index: 10000;
    transition: top 0.2s;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom-right-radius: 8px;
}
.skip-link:focus {
    top: 0;
}

/* ── Accessibility: Screen Reader Only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Accessibility: Focus Visible Styles ── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Accessibility: High Contrast (Forced Colors) ── */
@media (forced-colors: active) {
    .nav-btn,
    .header-ctrl-btn,
    .agent-action-btn,
    .pg-send-btn,
    .sidebar-step {
        border: 1px solid ButtonText;
    }
    .agent-card {
        border: 1px solid ButtonText;
    }
}

/* ── CSS Variables (matching existing frontend) ── */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* ── Typography ── */
    --font-sans: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    /* ── Colors ── */
    --bg-0: #080808; --bg-1: #111111; --bg-2: #1a1a1a; --bg-3: #242424;
    --text-primary: #e5e5e5; --text-secondary: #a3a3a3; --text-muted: #737373; --text-strong: #fff;
    --border: rgba(255,255,255,0.06); --border-input: rgba(255,255,255,0.08);
    --btn-bg: #161616; --btn-border: #2a2a2a; --btn-text: #d4d4d4;
    --glow-color: rgba(255,255,255,0.06); --scrollbar-thumb: #2a2a2a;
    --placeholder: #525252; --icon-color: #737373; --icon-hover: #d4d4d4;
    --input-focus-shadow: rgba(255,255,255,0.12); --footer-text: #404040;
    /* Primary (CloudHesive enterprise): dark theme → white CTA on black bg */
    --primary: #ffffff;
    --primary-hover: #e5e5e5;
    --primary-strong: #ffffff;
    --primary-text: #0a0a0a;
    --primary-ring: rgba(255,255,255,0.22);
    --primary-soft: rgba(255,255,255,0.08);
    --primary-soft-border: rgba(255,255,255,0.18);

    /* ── Glassmorphism ── */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 12px;
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);

    /* ── Status Colors ── */
    --status-deployed: #22c55e;
    --status-configured: #3b82f6;
    --status-failed: #ef4444;
    --status-deploying: #eab308;
    --status-destroying: #f97316;

    /* ── Animation ── */
    --anim-stagger-base: 50ms;
    --anim-duration-fast: 150ms;
    --anim-duration-normal: 250ms;
    --anim-duration-slow: 350ms;
    --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
    --bg-0: #ffffff; --bg-1: #f5f5f5; --bg-2: #ebebeb; --bg-3: #d4d4d4;
    --text-primary: #1a1a1a; --text-secondary: #404040; --text-muted: #737373; --text-strong: #000;
    --border: rgba(0,0,0,0.08); --border-input: rgba(0,0,0,0.12);
    --btn-bg: #f5f5f5; --btn-border: #d4d4d4; --btn-text: #333;
    --glow-color: rgba(0,0,0,0.04); --scrollbar-thumb: #d4d4d4;
    --placeholder: #a3a3a3; --icon-color: #a3a3a3; --icon-hover: #333;
    --input-focus-shadow: rgba(0,0,0,0.12); --footer-text: #a3a3a3;
    /* Primary (CloudHesive enterprise): light theme → black CTA on white bg */
    --primary: #0a0a0a;
    --primary-hover: #262626;
    --primary-strong: #000000;
    --primary-text: #ffffff;
    --primary-ring: rgba(0,0,0,0.14);
    --primary-soft: rgba(0,0,0,0.05);
    --primary-soft-border: rgba(0,0,0,0.12);

    /* ── Glassmorphism (light overrides) ── */
    --glass-bg: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-blur: 16px;
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

html { height: 100%; }
body {
    background: var(--bg-0);
    color: var(--text-primary);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s, color 0.3s;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Scrollbar ── */
main::-webkit-scrollbar { width: 4px; }
main::-webkit-scrollbar-track { background: transparent; }
main::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* ── App Header ── */
.app-header {
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    background: var(--bg-0);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 48px;
}
.header-border {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #60a5fa;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.header-logo-icon:hover { transform: scale(1.05); }
[data-theme="light"] .header-logo-icon {
    background: linear-gradient(135deg, #f5f5f5, #ebebeb);
    color: #0a0a0a;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.header-logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
    transition: filter 0.3s;
}
[data-theme="dark"] .header-logo-img {
    filter: brightness(0) invert(1);
}
.header-title {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}
.header-sep {
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--border-input);
    user-select: none;
}
.header-org {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
}
.header-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.header-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--icon-color);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.header-ctrl-btn:hover {
    background: var(--bg-2);
    color: var(--text-secondary);
}
.header-ctrl-danger:hover {
    color: #f87171;
    background: rgba(248,113,113,0.08);
}
.header-ctrl-sep {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 2px;
}

/* ── Auth Split Layout ── */
.auth-split {
    display: flex;
    flex-direction: row-reverse;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
.auth-hero {
    position: relative;
    width: 420px;
    min-width: 0;
    flex-shrink: 0;
    background: #0f172a;
    overflow: hidden;
}
.auth-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 40%, #0c1425 100%);
}
.auth-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(37,99,235,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 20%, rgba(6,182,212,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(245,158,11,0.06) 0%, transparent 70%);
}
.auth-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='0.6' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}
.auth-hero-content {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 36px;
}
.auth-form-panel {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px;
    background: var(--bg-0);
}
.auth-form-inner {
    width: 100%;
    max-width: 480px;
    margin: auto;
}
.auth-prereqs-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: border-color 0.15s, color 0.15s;
}
.auth-prereqs-link:hover {
    border-color: var(--text-muted);
    color: var(--text-strong);
}

/* ── Prerequisites Drawer (slides from LEFT) ── */
.prereqs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.prereqs-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.prereqs-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 760px;
    max-width: 94vw;
    background: var(--bg-1);
    border-left: 1px solid var(--border-input);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 40px rgba(0,0,0,0.2);
}
[data-theme="dark"] .prereqs-drawer {
    box-shadow: -8px 0 40px rgba(0,0,0,0.4);
}
.prereqs-drawer.open {
    transform: translateX(0);
}
.prereqs-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-strong);
    flex-shrink: 0;
}
.prereqs-drawer-subheader {
    flex-shrink: 0;
    padding: 14px 20px;
    background: var(--bg-0);
    border-bottom: 1px solid var(--border);
}
.prereqs-drawer-subheader:empty { display: none; }
.prereqs-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── Glow Effect ── */
.glow-brand {
    position: fixed; width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

/* ── Theme Toggle ── */
.theme-toggle {
    position: relative; width: 44px; height: 24px; border-radius: 12px;
    background: var(--bg-3); border: 1px solid var(--border-input);
    cursor: pointer; transition: background 0.3s; flex-shrink: 0;
}
.theme-toggle .knob {
    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--primary); transition: transform 0.3s;
    display: flex; align-items: center; justify-content: center;
}
[data-theme="light"] .theme-toggle .knob { transform: translateX(20px); }
.theme-toggle svg { width: 10px; height: 10px; color: var(--primary-text); }

/* ── Language Toggle ── */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.lang-toggle:hover {
    border-color: var(--text-muted);
    background: var(--bg-3);
}
.lang-toggle-flag {
    font-size: 14px;
    line-height: 1;
}
.lang-toggle-code {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.lang-toggle-highlight {
    animation: lang-pulse 0.5s ease-in-out 3;
    box-shadow: 0 0 0 3px var(--primary-ring);
    border-color: var(--primary) !important;
}
@keyframes lang-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--primary-ring); }
    50% { box-shadow: 0 0 0 6px var(--primary-ring); }
}

/* ── Nav Tabs ── */
.nav-tab {
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}
.nav-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-2);
}
.nav-tab.active {
    color: var(--text-strong);
    background: var(--bg-2);
    border-color: var(--border-input);
}


/* ── Sidebar ── */
.sidebar-step {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    text-align: left;
}
.sidebar-step:hover {
    background: var(--bg-2);
    color: var(--text-secondary);
}
.sidebar-step.active {
    background: var(--bg-2);
    color: var(--text-strong);
    font-weight: 600;
}
.sidebar-step.completed {
    color: var(--text-secondary);
}
.sidebar-step-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
    background: var(--bg-3);
    color: var(--text-muted);
    transition: all 0.15s;
}
.sidebar-step.active .sidebar-step-dot {
    background: var(--primary);
    color: var(--primary-text);
}
.sidebar-step.completed .sidebar-step-dot {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}
.sidebar-step.locked {
    opacity: 0.4;
    cursor: not-allowed;
}
.sidebar-step.locked:hover {
    background: transparent;
    color: var(--text-muted);
}
.sidebar-step.locked .sidebar-step-dot {
    background: var(--bg-3);
    color: var(--text-muted);
    opacity: 0.6;
}
.sidebar-step.frozen {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.sidebar-step.frozen:hover {
    background: transparent;
    color: var(--text-muted);
}
.sidebar-step.frozen .sidebar-step-dot {
    background: var(--bg-3);
    color: var(--text-muted);
    opacity: 0.6;
}
.sidebar-step[disabled] {
    pointer-events: none;
}

/* ── Sidebar Agent Indicator ── */
.sidebar-agent-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 12px;
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    transition: all 0.2s ease;
    position: relative;
}
[data-theme="light"] .sidebar-agent-indicator {
    background: rgba(59, 130, 246, 0.06);
}
.sidebar-agent-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}
.sidebar-agent-indicator-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
    flex: 1;
}
.sidebar-agent-close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.15s;
    padding: 0;
}
.sidebar-agent-close:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}
[data-theme="light"] .sidebar-agent-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ── Step Content ── */
.step-content {
    display: none;
    animation: fadeUp 0.25s ease-out forwards;
}
.step-content.active {
    display: block;
}

.step-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px;
}

/* ── Navigation Buttons ── */
.nav-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s ease;
    border: none;
}
.nav-btn:active { transform: scale(0.97); }

.nav-btn-primary {
    background: var(--primary); color: var(--primary-text);
    font-weight: 600;
}
.nav-btn-primary:hover { background: var(--primary-hover); }
.nav-btn-primary:disabled {
    opacity: 0.4; cursor: not-allowed;
}

.nav-btn-secondary {
    background: var(--bg-2); color: var(--text-secondary);
    border: 1px solid var(--border-input);
}
.nav-btn-secondary:hover {
    color: var(--text-strong); border-color: var(--text-muted);
}

/* ── Form Elements (shared base for tasks 7.2-7.5) ── */
.portal-input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    background: var(--bg-2); border: 1px solid var(--border-input);
    color: var(--text-primary); font-size: 0.85rem;
    font-family: var(--font-sans);
    outline: none; transition: all 0.15s ease;
}
.portal-input::placeholder { color: var(--placeholder); }
.portal-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

.portal-label {
    display: block; font-size: 0.75rem; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 6px;
}

/* ── Generate with AI button (pill) ── */
.btn-generate {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.625rem; font-weight: 500; line-height: 1;
    padding: 4px 10px; border-radius: 999px;
    background: var(--bg-2); border: 1px solid var(--border-input);
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.15s ease;
}
.btn-generate:hover {
    background: var(--bg-3); color: var(--text-primary);
    border-color: rgba(139, 92, 246, 0.4);
}
.btn-generate:active { transform: scale(0.96); }
.btn-generate:disabled {
    opacity: 0.5; cursor: not-allowed; transform: none;
}
.btn-generate svg { width: 12px; height: 12px; flex-shrink: 0; }
.btn-generate.generating {
    pointer-events: none; opacity: 0.7;
}
.btn-generate.generating svg {
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.portal-error {
    font-size: 0.75rem; color: #f87171; margin-top: 4px;
}

.portal-select {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    background: var(--bg-2); border: 1px solid var(--border-input);
    color: var(--text-primary); font-size: 0.85rem;
    font-family: var(--font-sans);
    outline: none; transition: all 0.15s ease;
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.portal-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

/* ── Step 0 Section Components ── */
.s0-section {
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-0);
    transition: border-color 0.15s;
}
.s0-section:hover { border-color: rgba(255,255,255,0.1); }
[data-theme="light"] .s0-section:hover { border-color: rgba(0,0,0,0.12); }

.s0-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.s0-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.s0-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-strong);
}
.s0-lang-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}
.s0-lang-btn:hover { border-color: var(--text-muted); }
.s0-lang-btn.active {
    border-color: rgba(37,99,235,0.4);
    background: rgba(37,99,235,0.06);
    color: var(--text-strong);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}
.s0-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    padding: 6px 14px;
    border-radius: 8px;
    background: none;
    border: 1px solid var(--border-input);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}
.s0-back-btn:hover { border-color: var(--text-muted); color: var(--text-secondary); }

/* ── Step 0: Welcome Banner ── */
.s0-welcome-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(139,92,246,0.04) 100%);
    border: 1px solid rgba(37,99,235,0.12);
}
[data-theme="light"] .s0-welcome-banner {
    background: linear-gradient(135deg, rgba(37,99,235,0.04) 0%, rgba(139,92,246,0.03) 100%);
    border-color: rgba(37,99,235,0.1);
}
.s0-welcome-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(37,99,235,0.1);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.s0-welcome-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}
.s0-welcome-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* ── Step 0: Identity Grid (Name + Language) ── */
.s0-identity-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
}
.s0-identity-name { min-width: 0; }
.s0-identity-lang { min-width: 160px; }
@media (max-width: 640px) {
    .s0-identity-grid { grid-template-columns: 1fr; }
    .s0-identity-lang { min-width: 0; }
}

/* ── Step 0: Quick Tips Box ── */
.s0-tips-box {
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(245,158,11,0.04);
    border: 1px solid rgba(245,158,11,0.12);
}
[data-theme="light"] .s0-tips-box {
    background: rgba(245,158,11,0.03);
    border-color: rgba(245,158,11,0.1);
}
.s0-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 8px;
}
.s0-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.s0-tips-list li {
    font-size: 0.74rem;
    color: var(--text-secondary);
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.s0-tips-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--text-muted);
    font-size: 0.7rem;
}

/* ══════════════════════════════════════════════════════════════════════
   ── Step 0 — Command Deck redesign (s0x-*) ──
   Two-column command layout: left config card, right template preview.
   Designed to fit without scroll and convey "pro agent builder" vibes.
   ══════════════════════════════════════════════════════════════════════ */
.s0x-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Hero strip ── */
.s0x-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 14px;
    background:
        radial-gradient(1200px 100px at 0% 0%, var(--primary-soft), transparent 60%),
        radial-gradient(900px 80px at 100% 100%, var(--glow-color), transparent 60%),
        var(--bg-1);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.s0x-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--primary-soft-border), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.s0x-hero-text { min-width: 0; }
.s0x-hero-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.015em;
    margin: 0;
}
.s0x-hero-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 3px 0 0;
}
.s0x-hero-actions { flex-shrink: 0; }
.s0x-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bg-0);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s ease;
}
.s0x-hero-back:hover {
    color: var(--text-strong);
    border-color: var(--primary);
    background: var(--primary-soft);
    transform: translateY(-1px);
}

/* ── Main grid ── */
.s0x-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .s0x-grid { grid-template-columns: 1fr; }
}

/* ── Shared card shell ── */
.s0x-card {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    overflow: hidden;
}
.s0x-cfg-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: 100%;
}

/* ── Name hero block ── */
.s0x-name-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.s0x-name-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.s0x-name-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: 0.005em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.s0x-name-input-wrap {
    position: relative;
}
.s0x-name-input {
    width: 100%;
    padding: 14px 44px 14px 16px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-strong);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    outline: none;
    transition: all 0.18s ease;
}

/* Validation indicator (inline at right edge of input) */
.s0x-name-status {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translate(0, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.15s, opacity 0.15s;
}
.s0x-name-status svg,
.s0x-name-status .s0x-name-status-spinner { display: none; }
.s0x-name-status.is-empty { opacity: 0; }
.s0x-name-status.is-checking {
    background: var(--bg-3);
}
.s0x-name-status.is-checking .s0x-name-status-spinner {
    display: block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-input);
    border-top-color: var(--text-strong);
    border-radius: 50%;
    animation: s0x-spin 0.7s linear infinite;
}
.s0x-name-status.is-valid {
    background: rgba(34,197,94,0.14);
    color: #22c55e;
}
.s0x-name-status.is-valid .s0x-name-status-check { display: block; }
.s0x-name-status.is-invalid {
    background: rgba(239,68,68,0.14);
    color: #ef4444;
}
.s0x-name-status.is-invalid .s0x-name-status-x { display: block; }
@keyframes s0x-spin { to { transform: rotate(360deg); } }

/* Borde del input reactivo al status */
.s0x-name-input-wrap:has(.s0x-name-status.is-valid) .s0x-name-input {
    border-color: rgba(34,197,94,0.5);
}
.s0x-name-input-wrap:has(.s0x-name-status.is-invalid) .s0x-name-input {
    border-color: rgba(239,68,68,0.55);
}
.s0x-name-input::placeholder {
    color: var(--placeholder);
    font-weight: 400;
}
.s0x-name-input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px var(--input-focus-shadow),
        0 4px 14px var(--primary-soft);
    background: var(--bg-0);
}
.s0x-name-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0;
}
.s0x-name-count {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.15s;
}
.s0x-name-count.is-short { color: #f59e0b; }
.s0x-name-count.is-full { color: #ef4444; font-weight: 600; }

/* ── Infra row (Region + Model) ── */
.s0x-infra-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) {
    .s0x-infra-row { grid-template-columns: 1fr; }
}
.s0x-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.s0x-field-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.s0x-field-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.s0x-icon-blue   { background: rgba(37,99,235,0.1);  color: #3b82f6; }
.s0x-icon-green  { background: rgba(34,197,94,0.1);  color: #22c55e; }
.s0x-icon-purple { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.s0x-field-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-strong);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.s0x-field-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 0;
}
.s0x-select {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
}

/* ── Template preview card (right column) ── */
.s0x-tpl-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}
.s0x-tpl-glow {
    position: absolute;
    top: -40%;
    right: -30%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--primary-soft) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.s0x-tpl-card > *:not(.s0x-tpl-glow) { position: relative; z-index: 1; }
.s0x-tpl-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.s0x-tpl-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-border);
    flex-shrink: 0;
}
.s0x-tpl-head-text { min-width: 0; }
.s0x-tpl-kicker {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}
.s0x-tpl-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.s0x-tpl-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.s0x-tpl-stats {
    display: flex;
    gap: 18px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.s0x-tpl-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-secondary);
}
.s0x-tpl-stat strong { color: var(--text-strong); font-weight: 700; }
.s0x-tpl-stat svg { color: var(--text-muted); flex-shrink: 0; }
.s0x-tpl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 68px;
    overflow: hidden;
}
.s0x-tpl-tag {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    line-height: 1.3;
}

/* System prompt preview inside template card */
.s0x-tpl-capabilities {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-0);
    border: 1px solid var(--border);
}
.s0x-tpl-capability-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.s0x-tpl-capability-list li {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding-left: 16px;
    position: relative;
}
.s0x-tpl-capability-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 700;
}

/* Footer: vertical badge + operations */
.s0x-tpl-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.s0x-tpl-vertical-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid;
}

/* Empty state (no template applied) */
.s0x-tpl-empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}
.s0x-tpl-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-border);
    color: var(--text-strong);
    margin-bottom: 4px;
}
.s0x-tpl-empty-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-strong);
}
.s0x-tpl-empty-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 6px;
    max-width: 280px;
}
.s0x-tpl-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 14px var(--primary-ring);
}
.s0x-tpl-empty-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--primary-ring);
}
.s0x-tpl-empty-btn:active { transform: translateY(0); }

/* ── Step 0: Proximos pasos stepper (right card, no template applied) ── */
.s0x-steps-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}
.s0x-steps-card > *:not(.s0x-tpl-glow) { position: relative; z-index: 1; }
.s0x-steps-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.s0x-steps-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.01em;
}
.s0x-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}
/* Vertical line linking step numbers */
.s0x-steps::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: var(--border-input);
    z-index: 0;
}
.s0x-step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    position: relative;
    z-index: 1;
}
.s0x-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    transition: all 0.15s;
}
.s0x-step-item:hover .s0x-step-num {
    border-color: var(--primary);
    color: var(--text-strong);
    background: var(--primary-soft);
}
.s0x-step-body {
    min-width: 0;
    flex: 1;
    padding-top: 1px;
}
.s0x-step-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px;
}
.s0x-step-head svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.s0x-step-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    letter-spacing: -0.005em;
}
.s0x-step-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.s0x-steps-footer-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    border: 1px dashed var(--border-input);
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}
.s0x-steps-footer-link svg { flex-shrink: 0; transition: transform 0.15s; }
.s0x-steps-footer-link:hover {
    border-color: var(--primary);
    border-style: solid;
    background: var(--primary-soft);
    color: var(--text-strong);
}
.s0x-steps-footer-link:hover svg:last-child { transform: translateX(2px); }

/* ── Tips block (inside the config card, pushed to the bottom) ── */
.s0x-tips {
    margin-top: auto;
    padding: 13px 16px;
    border-radius: 10px;
    background: rgba(245,158,11,0.05);
    border: 1px solid rgba(245,158,11,0.16);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-theme="light"] .s0x-tips {
    background: rgba(245,158,11,0.04);
    border-color: rgba(245,158,11,0.14);
}
.s0x-tips-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.s0x-tips-label svg { flex-shrink: 0; }
.s0x-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.s0x-tips-list li {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 14px;
    position: relative;
}
.s0x-tips-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f59e0b;
    opacity: 0.6;
}

/* ── Channel Cards (Step 1) ── */
.ch-card {
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-0);
}
.ch-card.ch-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary-ring);
}
.ch-card.ch-always-on {
    border-color: rgba(139,92,246,0.2);
    background: linear-gradient(135deg, var(--bg-0), rgba(139,92,246,0.02));
}
.ch-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 12px;
}
.ch-card-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.ch-badge-on {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(139,92,246,0.08);
    color: #8b5cf6;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── MCP collapsible section ── */
details.step-card summary::-webkit-details-marker { display: none; }
details.step-card[open] .mcp-chevron { transform: rotate(180deg); }

/* ── Channel tab bar ── */
.ch-tab-bar { display: flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--border); margin-bottom: 16px; overflow: hidden; }
.ch-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.78rem; font-weight: 500; font-family: var(--font-sans); transition: all 0.15s; flex-shrink: 0; justify-content: center; white-space: nowrap; }
.ch-tab:hover { color: var(--text-secondary); background: var(--bg-2); }
.ch-tab.active { background: var(--bg-0); color: var(--text-strong); box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 600; }
.ch-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex-shrink: 0; transition: background 0.2s; }
.ch-tab-dot.on { background: #22c55e; }
.ch-tab-dot.always { background: #8b5cf6; }
.ch-tab-icon { width: 15px; height: 15px; flex-shrink: 0; }
.ch-panel { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-0); }

/* Coming-soon channel tabs — compact to save space */
.ch-tab--soon {
    opacity: 0.45;
    cursor: not-allowed;
    padding: 8px 8px;
    gap: 4px;
    font-size: 0.72rem;
    flex-shrink: 1;
    min-width: 0;
}
.ch-tab--soon .ch-tab-icon { width: 13px; height: 13px; }
.ch-tab--soon:hover {
    background: transparent;
    color: var(--text-muted);
}
.ch-tab-soon-badge {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    line-height: 1.4;
}

/* ── Channel disabled hint (shown when channel is off) ── */
.ch-disabled-hint {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.ch-disabled-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 8px;
}
.ch-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ch-feature-list li {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ── Channel config grid utilities ── */
/* ── Web config section icon badges ── */
.web-config-section-header .s0-section-icon { width: 24px; height: 24px; border-radius: 6px; }
.web-config-section-header .s0-section-icon svg { width: 13px; height: 13px; }

.ch-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.ch-grid-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.ch-grid-main { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* ── Split layout: config card + independent sticky preview ── */
/* Override wizard max-width when split layout is present — needs more room for config + preview */
#view-wizard:has(.ch-split-layout) { max-width: 1280px; }
.ch-split-layout { display: flex; gap: 0; align-items: flex-start; }
.ch-split-config { flex: 1; min-width: 0; }
.ch-split-preview {
    position: sticky; top: 32px; align-self: flex-start;
    width: 360px; flex-shrink: 0;
    /* Top aligns with step-card padding (28px) so VISTA PREVIA label matches the h2 */
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: 28px; padding-bottom: 28px;
    min-height: calc(100vh - 200px);
    /* Rail track visual */
    border-left: 2px solid transparent;
    border-image: linear-gradient(to bottom, rgba(228,121,17,0.45) 0%, var(--border) 80px, var(--border) calc(100% - 80px), transparent 100%) 1;
    padding-left: 28px;
    margin-left: 24px;
}
.ch-row-sep { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ── MCP Server Panel (Step 1) ── */
.mcp-info-card {
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid rgba(139,92,246,0.15);
    background: linear-gradient(135deg, var(--bg-0), rgba(139,92,246,0.03));
    margin-bottom: 18px;
}
.mcp-info-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.mcp-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcp-info-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-strong);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mcp-info-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 4px;
}
.mcp-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 16px;
    align-items: stretch;
}
.mcp-row-bottom {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2.4fr;
    gap: 16px;
    margin-top: 14px;
    align-items: stretch;
}
.mcp-col { display: flex; flex-direction: column; gap: 14px; }
.mcp-section {}
.mcp-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mcp-endpoint-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
}
.mcp-endpoint-url {
    flex: 1;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.5;
}
.mcp-copy-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.mcp-copy-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
    background: var(--bg-3);
}
.mcp-endpoint-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
}
.mcp-status-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
}
.mcp-status-box.mcp-status-live {
    border-color: rgba(34,197,94,0.25);
    background: rgba(34,197,94,0.04);
}
.mcp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.5;
}
.mcp-status-dot.mcp-status-dot-live {
    background: #22c55e;
    opacity: 1;
    animation: pulse 2s infinite;
}
.mcp-status-text {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.mcp-ops-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    overflow: hidden;
}
.mcp-op-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
.mcp-op-row:last-child { border-bottom: none; }
.mcp-ops-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.mcp-op-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    transition: border-color 0.15s;
    min-width: 0;
}
.mcp-op-card:hover { border-color: rgba(139,92,246,0.35); }
.mcp-op-card .mcp-op-method { align-self: flex-start; }
.mcp-op-card .mcp-op-desc {
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.mcp-op-method {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: #8b5cf6;
    white-space: nowrap;
    background: rgba(139,92,246,0.08);
    padding: 2px 8px;
    border-radius: 4px;
}
.mcp-op-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
}
.mcp-tools-count {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(139,92,246,0.1);
    color: #8b5cf6;
}
.mcp-tools-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
}
.mcp-tool-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
.mcp-tool-row:last-child { border-bottom: none; }
.mcp-tool-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(139,92,246,0.08);
    color: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mcp-tool-name {
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-strong);
    white-space: nowrap;
}
.mcp-tool-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 6px;
}
.mcp-tool-type {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-muted);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.mcp-empty-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px dashed var(--border-input);
}
.mcp-protocol-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.mcp-protocol-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.mcp-protocol-key {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mcp-protocol-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}
.mcp-sdk-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    margin-top: 14px;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
}
@media (max-width: 768px) {
    .mcp-grid { grid-template-columns: 1fr; }
    .mcp-row-bottom { grid-template-columns: 1fr; }
    .mcp-ops-grid { grid-template-columns: 1fr; }
    .mcp-protocol-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Integration Cards (Step 2) ── */
.integration-section { margin-bottom: 0; padding-bottom: 0; }
.integration-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.integration-section-title { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.integration-section-subtitle { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 12px 0; line-height: 1.4; }
.integration-card { border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; background: var(--bg-0); margin-bottom: 10px; }
.integration-card.integration-active { border-color: rgba(228,121,17,0.3); box-shadow: 0 0 0 1px rgba(228,121,17,0.08); }
.integration-card-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 12px; }
.integration-card-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.integration-card-config { padding: 0 20px 16px; animation: fadeUp 0.2s ease-out; }

/* Injected tools expandable section */
.integration-injected-tools {
    border: 1px solid var(--border-input);
    border-radius: 10px;
    background: var(--bg-1);
    overflow: hidden;
    animation: integrationSlideDown 0.3s ease-out;
}
.integration-injected-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-input);
}
.integration-tools-list { display: flex; flex-direction: column; gap: 0; }
.integration-tool-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-input);
    background: transparent;
}
.integration-tool-badge:last-child { border-bottom: none; }
.integration-tool-badge .itb-name { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.integration-tool-badge .itb-separator { color: var(--text-muted); font-size: 0.8rem; margin: 0 2px; }
.integration-tool-badge .itb-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.3; }
.integration-source-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 5px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; background: rgba(228,121,17,0.1); color: #e47911; white-space: nowrap; }

/* Coming soon collapsed row */
.integration-coming-soon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px dashed var(--border);
    opacity: 0.55;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0;
    pointer-events: none;
}

/* Divider between integrations and custom tools */
.integration-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0;
}
.integration-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.integration-divider-text {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

/* Custom tools section header */
.custom-tools-section-header {
    margin-bottom: 12px;
}
.custom-tools-section-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.integration-toggle-connect .portal-toggle input:checked + .portal-toggle-slider { background: rgba(228,121,17,0.2); border-color: rgba(228,121,17,0.4); }
.integration-toggle-connect .portal-toggle input:checked + .portal-toggle-slider::before { background: #e47911; }

/* Slide-down animation for injected tools */
@keyframes integrationSlideDown {
    0% { opacity: 0; max-height: 0; transform: translateY(-8px); }
    100% { opacity: 1; max-height: 500px; transform: translateY(0); }
}

/* ── Animations ── */
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── Auth Type Buttons ── */
.auth-type-btn {
    background: var(--bg-2);
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    cursor: pointer;
    transition: all 0.15s ease;
}
.auth-type-btn:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
}
.auth-type-btn.active {
    background: rgba(37, 99, 235, 0.1);
    color: #60a5fa;
    border-color: rgba(37, 99, 235, 0.4);
}

/* ── Toggle Switch ── */
.portal-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.portal-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.portal-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg-3);
    border: 1px solid var(--border-input);
    border-radius: 12px;
    transition: all 0.3s;
}
.portal-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.3s;
}
.portal-toggle input:checked + .portal-toggle-slider {
    background: var(--primary-soft);
    border-color: var(--primary);
}
.portal-toggle input:checked + .portal-toggle-slider::before {
    transform: translateX(20px);
    background: var(--primary);
}

/* ── Logo Upload Zone ── */
.logo-upload-zone {
    border: 1.5px dashed var(--border-input);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.18s;
    background: var(--bg-0);
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-upload-zone:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.logo-upload-zone.dragover {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.logo-upload-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.logo-upload-icon {
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 2px;
}
.logo-upload-zone:hover .logo-upload-icon {
    color: var(--text-strong);
    opacity: 0.8;
}
.logo-upload-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.logo-upload-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.logo-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}
.logo-upload-preview img {
    max-width: 120px;
    max-height: 48px;
    border-radius: 6px;
    object-fit: contain;
}
.logo-upload-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.logo-upload-remove:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.logo-upload-zone--compact {
    width: 64px;
    height: 64px;
    min-height: auto;
    padding: 8px;
    flex-shrink: 0;
    border-radius: 8px;
}
.logo-upload-zone--compact .logo-upload-empty {
    gap: 0;
}
.logo-upload-zone--compact .logo-upload-preview img {
    max-width: 48px;
    max-height: 48px;
}

/* ── Summary Section ── */
.summary-section {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.summary-section:last-child {
    border-bottom: none;
}
.summary-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Deploy Spinner ── */
.deploy-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #3b82f6;
    border-right-color: rgba(59,130,246,0.3);
    animation: deploy-spin 0.9s cubic-bezier(0.5,0,0.5,1) infinite;
    position: relative;
}
.deploy-spinner::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(96,165,250,0.2);
    border-left-color: rgba(96,165,250,0.1);
    animation: deploy-spin 2.4s linear infinite reverse;
}
.deploy-spinner::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-bottom-color: rgba(59,130,246,0.4);
    animation: deploy-spin 1.5s cubic-bezier(0.5,0,0.5,1) infinite;
}
@keyframes deploy-spin {
    to { transform: rotate(360deg); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Agent Card Actions ── */
.agent-action-btn {
    padding: 7px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.agent-action-btn:hover {
    background: var(--bg-2);
    color: var(--text-strong);
    border-color: var(--border-input);
}
.agent-action-danger:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}
.agent-action-btn:active {
    transform: scale(0.95);
}

/* ── Agent Search/Filter Bar ── */
.agents-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.agents-search-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px 8px 34px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.15s ease;
}
.agents-search-input::placeholder { color: var(--placeholder); }
.agents-search-input:focus {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 2px var(--input-focus-shadow), 0 0 12px rgba(59, 130, 246, 0.15);
    flex-grow: 1.2;
    transition: all var(--anim-duration-fast) ease, flex-grow var(--anim-duration-fast) ease;
}
.agents-search-wrap {
    position: relative;
    flex: 1 1 280px;
    min-width: 280px;
}
.agents-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.agents-filter-pills {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.agents-filter-pill {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-input);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--anim-duration-fast) ease;
    white-space: nowrap;
}
.agents-filter-pill:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}
.agents-filter-pill.active {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.5);
    color: #60a5fa;
    font-weight: 600;
}

/* ── Agent Quick Actions Row ── */
.agent-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 16px;
    flex-wrap: wrap;
}
.agent-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}
.agent-quick-action-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-strong);
    background: var(--bg-3);
}
.agent-quick-action-btn.danger:hover {
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
    background: rgba(239, 68, 68, 0.06);
}
.agent-quick-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Agent Card Model Badge ── */
.agent-card-model {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* ── Agent Grid ── */
.agents-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Agent Card (row-based) ── */
.agent-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.15s ease;
    animation: fadeSlideUp var(--anim-duration-slow) var(--anim-ease-out) both;
    animation-delay: calc(var(--card-index, 0) * var(--anim-stagger-base));
}
.agent-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--card-status-color, #3b82f6), transparent);
    border-radius: 3px 0 0 3px;
    z-index: 1;
}
.agent-card:hover {
    border-color: var(--text-muted);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.agent-card-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}
.agent-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.agent-card-info {
    flex: 1;
    min-width: 0;
}
.agent-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.agent-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.agent-card-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
}
.agent-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
}
.agent-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 500;
    font-family: var(--font-sans);
    background: var(--bg-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.agent-card-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    font-family: var(--font-sans);
    flex-shrink: 0;
}
.agent-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.agent-card-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border-input);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.agent-card-expand:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}

/* ── Agent Card Avatar Ring ── */
.agent-card-avatar-ring {
    position: relative;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(135deg, var(--ring-color-1, #3b82f6), var(--ring-color-2, #2563eb));
}
.agent-card-avatar-ring .agent-card-avatar {
    border-radius: 8px;
}

/* ── Stat Cards ── */
.agents-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--stat-bg) 0%, transparent 100%);
    border: 1px solid var(--border-input);
    transition: border-color 0.15s ease, transform var(--anim-duration-normal) var(--anim-ease-out), box-shadow var(--anim-duration-normal) var(--anim-ease-out);
}
.agents-stat-card:hover {
    border-color: var(--stat-color);
}
.agents-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon-pulse {
    animation: pulse-subtle 2s ease-in-out infinite;
}
.agents-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.2;
    font-family: var(--font-mono);
}
.agents-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Input number: hide spinners for cleaner look ── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ── Disabled button state ── */
.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.nav-btn-secondary:disabled {
    opacity: 0.4;
}

/* ── Portal input invalid state ── */
.portal-input.invalid,
.portal-select.invalid {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}

/* ── Toast ── */
.portal-toast {
    transition: opacity 0.3s ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ── Tool Builder ──
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tool Card (collapsed view) ── */
.tool-card {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-0);
    transition: all 0.15s ease;
}
.tool-card:hover {
    border-color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tool-card-active {
    border-color: var(--tool-accent, var(--text-muted));
    box-shadow: 0 0 0 1px var(--tool-accent, transparent);
}
.tool-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.tool-card-badge {
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

/* ── Tool Edit Panel (expanded form) ── */
.tool-edit-panel {
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    margin-top: 8px;
    animation: fadeUp 0.2s ease-out;
}

/* ── Tool Wizard Stepper ── */
.tw-stepper { display: flex; align-items: center; gap: 0; padding: 16px 0 20px; margin-bottom: 4px; }
.tw-step { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 2px; transition: opacity 0.15s; }
.tw-step:hover { opacity: 0.85; }
.tw-step-num {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700; flex-shrink: 0; transition: all 0.2s;
    border: 2px solid var(--border-input); background: transparent; color: var(--text-muted);
}
.tw-step.active .tw-step-num { border-color: #10b981; background: #10b981; color: #fff; }
.tw-step.done .tw-step-num { border-color: #10b981; background: transparent; color: #10b981; }
.tw-step-label { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); transition: color 0.15s; white-space: nowrap; }
.tw-step.active .tw-step-label { color: var(--text-strong); font-weight: 600; }
.tw-step.done .tw-step-label { color: #10b981; }
.tw-step-line { flex: 1; height: 1px; background: var(--border-input); margin: 0 10px; min-width: 20px; }
.tw-step-line.done { background: #10b981; }

/* ── Parameter Grid Table ── */
.pg-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pg-table thead th {
    text-align: left; padding: 0 6px 10px; font-size: 0.65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
    white-space: nowrap;
}
.pg-table tbody td { padding: 5px 4px; vertical-align: middle; }
.pg-row-input {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    border: 1px solid transparent; background: var(--bg-0); color: var(--text-primary);
    font-size: 0.82rem; font-family: var(--font-sans); transition: all 0.15s;
}
.pg-row-input:hover { border-color: var(--border-input); }
.pg-row-input:focus { border-color: #10b981; outline: none; background: var(--bg-1); }
.pg-row-input::placeholder { color: var(--text-muted); opacity: 0.5; }
.pg-row-input.mono { font-family: var(--font-mono); font-size: 0.8rem; }
.pg-row-select {
    padding: 10px 12px; border-radius: 8px; border: 1px solid transparent;
    background: var(--bg-0); color: var(--text-primary); font-size: 0.82rem;
    font-family: var(--font-mono); cursor: pointer; appearance: auto;
    transition: all 0.15s;
}
.pg-row-select:hover { border-color: var(--border-input); }
.pg-row-select:focus { border-color: #10b981; outline: none; }
.pg-row-delete {
    width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; font-size: 1.2rem; flex-shrink: 0; opacity: 0.5;
}
.pg-row-delete:hover { background: rgba(239,68,68,0.1); color: #ef4444; opacity: 1; }

/* Toggle for param grid */
.pg-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; display: inline-block; }
.pg-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.pg-toggle-slider {
    position: absolute; inset: 0; border-radius: 11px; cursor: pointer; transition: all 0.2s;
    background: var(--bg-0); border: 1.5px solid var(--border-input);
}
.pg-toggle-slider::before {
    content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
    left: 2px; top: 50%; transform: translateY(-50%); background: var(--text-muted); transition: all 0.2s;
}
.pg-toggle input:checked + .pg-toggle-slider { background: rgba(16,185,129,0.12); border-color: #10b981; }
.pg-toggle input:checked + .pg-toggle-slider::before { transform: translate(18px, -50%); background: #10b981; }

/* Wizard navigation */
.tw-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.tw-nav-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 22px; border-radius: 8px;
    font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
    font-family: var(--font-sans); border: 1px solid var(--border-input); background: var(--bg-1); color: var(--text-secondary);
}
.tw-nav-btn:hover { border-color: var(--text-muted); color: var(--text-strong); }
.tw-nav-btn.primary { background: #10b981; border-color: #10b981; color: #fff; }
.tw-nav-btn.primary:hover { background: #059669; border-color: #059669; }

/* Preview collapsible JSON */
details[open] > summary svg:first-child { transform: rotate(90deg); }
details > summary::-webkit-details-marker { display: none; }

/* ── Add Tool Button ── */
.tool-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed var(--border-input);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}
.tool-add-btn:hover {
    border-color: var(--primary);
    color: var(--text-strong);
    background: var(--primary-soft);
}

/* ── Tool Parameter Card ── */
.tool-param-card {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    margin-bottom: 8px;
    transition: border-color 0.15s;
}
.tool-param-card:hover {
    border-color: var(--text-muted);
}
.tool-param-card:last-child {
    margin-bottom: 0;
}
.tool-param-req-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
}
.tool-param-req-toggle:has(input:checked) {
    color: #f87171;
}
/* Legacy support */
.tool-param-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

/* ── Small action button ── */
.tool-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-input);
    background: var(--bg-3);
    color: var(--text-secondary);
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}
.tool-btn-sm:hover {
    color: var(--text-strong);
    border-color: var(--text-muted);
}

/* ── Tool Template Rows (empty state) ── */
.tool-tpl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
    width: 100%;
    text-align: left;
}
.tool-tpl-row:hover {
    border-color: var(--text-muted);
    background: var(--bg-3);
}
.tool-tpl-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Operation Selector (radio cards) ── */
.op-select-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.op-select-btn {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
    color: var(--text-muted);
}
.op-select-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}
.op-select-btn.active {
    border-color: var(--ds-color, #2563EB);
    background: color-mix(in srgb, var(--ds-color, #2563EB) 6%, transparent);
    color: var(--ds-color, #2563EB);
}
.op-select-btn input.hidden { display: none; }

/* ── Datasource Selector (visual buttons) ── */
.ds-select-grid {
    display: flex;
    gap: 6px;
}
.ds-select-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 1;
    font-family: var(--font-sans);
    color: var(--text-muted);
}
.ds-select-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}
.ds-select-btn.active {
    border-color: var(--ds-color, #2563EB);
    background: color-mix(in srgb, var(--ds-color, #2563EB) 8%, transparent);
    color: var(--ds-color, #2563EB);
    box-shadow: 0 0 0 1px var(--ds-color, #2563EB);
}
.ds-select-btn.active span:last-child {
    color: var(--ds-color, #2563EB) !important;
    opacity: 0.7;
}

/* ── Prompt Template Buttons ── */
.prompt-tpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}
.prompt-tpl-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-strong);
}
.prompt-tpl-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.prompt-tpl-primary {
    background: var(--primary-soft);
    border-color: var(--primary-soft-border);
    color: var(--text-strong);
}
.prompt-tpl-primary:hover:not(:disabled) {
    background: var(--primary-soft);
    border-color: var(--primary);
}

/* ── Prompt Char Counter ── */
.prompt-char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.65rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    pointer-events: none;
}

/* ── Response Field Chips ── */
.response-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    background: var(--bg-3);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
}

/* ── Tool button active state (REST auth buttons) ── */
.tool-btn-sm.active {
    border-color: var(--primary);
    color: var(--text-strong);
    background: var(--primary-soft);
}

/* ── Resource Selector (dropdown + refresh) ── */
.resource-select-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}
.resource-select-wrapper .portal-select {
    flex: 1;
    min-width: 0;
}
.resource-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.resource-refresh-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
    background: var(--bg-3);
}

/* ── Custom Tool Code Editor ── */
/* ── Code Signature Bar (readonly function header) ── */
.code-signature-bar {
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.65;
    white-space: pre;
    background: rgba(37, 99, 235, 0.04);
    border-bottom: 1px dashed rgba(37, 99, 235, 0.15);
    color: #a3a3a3;
    user-select: none;
    overflow-x: auto;
    cursor: default;
    position: relative;
}
.code-signature-bar::after {
    content: 'read-only';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(37, 99, 235, 0.5);
    background: rgba(37, 99, 235, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(37, 99, 235, 0.1);
    pointer-events: none;
}
[data-theme="light"] .code-signature-bar {
    background: rgba(37, 99, 235, 0.03);
    border-bottom-color: rgba(37, 99, 235, 0.12);
    color: #525252;
}
[data-theme="light"] .code-signature-bar::after {
    color: rgba(37, 99, 235, 0.6);
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.12);
}

/* ── Permission Detection ── */
.custom-perms-box {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.04);
}
.custom-perm-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.62rem;
    font-family: var(--font-mono);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* ── Tool Delete Confirmation Overlay ── */
.tool-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.15s ease-out;
}
.tool-confirm-dialog {
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* ── JSON Import Dialog (Pro) ── */
.json-import-modal {
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    border-radius: 16px;
    max-width: 660px;
    width: 94%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
    overflow: hidden;
    animation: jiSlideIn 0.22s ease-out;
}
@keyframes jiSlideIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ji-header {
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--border);
}
.ji-body {
    padding: 14px 24px 10px;
    overflow-y: auto;
    flex: 1;
}
.ji-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ji-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-3);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
    white-space: nowrap;
}
.ji-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.ji-btn.accent {
    border-color: rgba(37,99,235,0.25);
    background: rgba(37,99,235,0.06);
    color: #60a5fa;
}
.ji-btn.accent:hover { background: rgba(37,99,235,0.12); }

.ji-editor-wrap {
    display: flex;
    border: 1px solid var(--border-input);
    border-radius: 10px;
    background: var(--bg-0);
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: clamp(180px, 40vh, 440px);
    flex-shrink: 0;
}
.ji-editor-wrap:focus-within {
    border-color: rgba(37,99,235,0.4);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}
.ji-editor-wrap.drag-over {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.2) !important;
}
.ji-editor-wrap.has-error:focus-within {
    border-color: rgba(239,68,68,0.4);
    box-shadow: 0 0 0 3px rgba(239,68,68,0.1);
}
.ji-editor-wrap.valid-glow:focus-within {
    border-color: rgba(34,197,94,0.35);
    box-shadow: 0 0 0 3px rgba(34,197,94,0.08);
}

.ji-line-nums {
    width: 40px;
    padding: 12px 6px 12px 4px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
    user-select: none;
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    opacity: 0.5;
    height: 100%;
}
.ji-textarea {
    flex: 1;
    border: none;
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.6;
    resize: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
    tab-size: 2;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
}
.ji-textarea::placeholder { color: var(--placeholder); font-family: var(--font-sans); font-size: 0.8rem; white-space: pre-line; }

.ji-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(37,99,235,0.05);
    border: 2px dashed rgba(37,99,235,0.35);
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.ji-drop-overlay.visible { display: flex; }

.ji-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 2px;
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.6;
    min-height: 20px;
}
.ji-meta-left { display: flex; gap: 12px; }

.ji-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 6px;
    border-radius: 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    font-size: 0.74rem;
    flex-wrap: wrap;
    transition: all 0.25s;
}
.ji-status.valid { background: rgba(34,197,94,0.04); border-color: rgba(34,197,94,0.15); }
.ji-status.invalid { background: rgba(239,68,68,0.04); border-color: rgba(239,68,68,0.15); }

.ji-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}
.ji-badge.good { background: rgba(34,197,94,0.08); color: #4ade80; }
.ji-badge.warn { background: rgba(245,158,11,0.08); color: #fbbf24; }
.ji-badge.info { background: rgba(37,99,235,0.08); color: #60a5fa; }
.ji-badge.bad { background: rgba(239,68,68,0.08); color: #f87171; }

.ji-badge-sep {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
}

.ji-error-detail {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    font-size: 0.74rem;
    color: #f87171;
    line-height: 1.6;
    display: none;
}
.ji-error-detail.visible { display: block; animation: jiSlideIn 0.15s ease-out; }
.ji-error-detail code {
    background: rgba(239,68,68,0.1);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

.ji-schema-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.74rem;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: var(--font-sans);
    transition: color 0.15s;
}
.ji-schema-toggle:hover { color: var(--text-secondary); }
.ji-schema-toggle svg { transition: transform 0.2s; }
.ji-schema-toggle.open svg { transform: rotate(90deg); }

.ji-schema {
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    font-size: 0.72rem;
    line-height: 1.8;
    color: var(--text-secondary);
    display: none;
}
.ji-schema.open { display: block; animation: jiSlideIn 0.15s ease-out; }
.ji-schema code {
    background: rgba(37,99,235,0.08);
    color: #60a5fa;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
}
.ji-schema .f-row { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; }
.ji-schema .f-req {
    font-size: 0.6rem; color: #f87171; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0;
}
.ji-schema .f-opt {
    font-size: 0.6rem; color: var(--text-muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.03em; flex-shrink: 0;
}
.ji-schema .f-indent {
    padding-left: 16px;
    border-left: 2px solid var(--border);
    margin: 2px 0 2px 6px;
}

.ji-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ji-footer .nav-btn { padding: 7px 20px; font-size: 0.8rem; }
.ji-footer .nav-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

@media (max-width: 640px) {
    .json-import-modal { width: 98%; max-height: 92vh; border-radius: 12px; }
    .ji-header { padding: 16px 18px 12px; }
    .ji-body { padding: 12px 16px 6px; }
    .ji-footer { padding: 12px 16px; }
    .ji-editor-wrap { height: clamp(160px, 35vh, 320px); }
    .ji-toolbar { gap: 4px; }
}

/* ── Pro Code Block ── */
.code-block {
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    background: #0d0d0d;
    overflow: hidden;
    font-family: var(--font-mono);
}
[data-theme="light"] .code-block {
    background: #fafafa;
    border-color: rgba(0,0,0,0.1);
}
.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
[data-theme="light"] .code-block-header {
    background: rgba(0,0,0,0.02);
    border-bottom-color: rgba(0,0,0,0.06);
}
.code-block-header .lang-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
.code-block-header .lang-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.code-block-header .copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 10px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}
.code-block-header .copy-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border-input);
    color: var(--text-secondary);
}
[data-theme="light"] .code-block-header .copy-btn:hover {
    background: rgba(0,0,0,0.04);
}
.code-block-body {
    display: flex;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}
.code-block-body::-webkit-scrollbar { width: 4px; height: 4px; }
.code-block-body::-webkit-scrollbar-track { background: transparent; }
.code-block-body::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; }
.code-line-numbers {
    padding: 12px 0;
    text-align: right;
    user-select: none;
    flex-shrink: 0;
    min-width: 38px;
    border-right: 1px solid rgba(255,255,255,0.04);
}
[data-theme="light"] .code-line-numbers {
    border-right-color: rgba(0,0,0,0.06);
}
.code-line-numbers span {
    display: block;
    padding: 0 10px 0 12px;
    font-size: 10px;
    line-height: 1.65;
    color: #3a3a3a;
}
[data-theme="light"] .code-line-numbers span {
    color: #c0c0c0;
}
.code-block-content {
    padding: 12px 16px;
    font-size: 11.5px;
    line-height: 1.65;
    white-space: pre;
    flex: 1;
    min-width: 0;
}
/* Syntax colors (dark) */
.code-block .syn-kw { color: #c084fc; }       /* keywords: import, from, def, const, var */
.code-block .syn-fn { color: #67e8f9; }       /* function names */
.code-block .syn-str { color: #86efac; }      /* strings */
.code-block .syn-num { color: #fbbf24; }      /* numbers */
.code-block .syn-cm { color: #525252; font-style: italic; }  /* comments */
.code-block .syn-op { color: #f87171; }       /* operators */
.code-block .syn-type { color: #f9a8d4; }     /* types */
.code-block .syn-prop { color: #93c5fd; }     /* properties/keys */
/* Syntax colors (light) */
[data-theme="light"] .code-block .syn-kw { color: #7c3aed; }
[data-theme="light"] .code-block .syn-fn { color: #0891b2; }
[data-theme="light"] .code-block .syn-str { color: #16a34a; }
[data-theme="light"] .code-block .syn-num { color: #d97706; }
[data-theme="light"] .code-block .syn-cm { color: #a3a3a3; font-style: italic; }
[data-theme="light"] .code-block .syn-op { color: #2563EB; }
[data-theme="light"] .code-block .syn-type { color: #db2777; }
[data-theme="light"] .code-block .syn-prop { color: #2563eb; }

/* ── Custom Code Body Editor ── */
.custom-code-body-editor {
    width: 100%;
    min-height: 120px;
    padding: 0 16px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    tab-size: 4;
    white-space: pre;
    overflow: hidden;
    border-left: 2px solid var(--accent, #10b981);
    margin-left: -2px;
}
.custom-code-body-editor:focus {
    color: var(--text-strong);
    background: rgba(255,255,255,0.015);
}
[data-theme="light"] .custom-code-body-editor:focus {
    background: rgba(0,0,0,0.015);
}
.custom-code-body-editor::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

/* ── API Example Tabs ── */
.api-tab-bar {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    width: fit-content;
}
.api-tab {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.api-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
[data-theme="light"] .api-tab:hover { background: rgba(0,0,0,0.04); }
.api-tab.active {
    background: var(--bg-3);
    color: var(--text-strong);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.api-tab .tab-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* ── Lambda Runtime Badge ── */
.runtime-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--btn-bg);
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}
.runtime-chip:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}
.runtime-chip.active {
    border-color: var(--ds-color, #10b981);
    color: var(--text-strong);
    background: color-mix(in srgb, var(--ds-color, #10b981) 8%, transparent);
}
.runtime-chip .rt-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ── Playground (Redesigned) ──
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   ── Playground (Redesigned) ──
   ══════════════════════════════════════════════════════════════════════════════ */

.pg-container {
    display: flex;
    gap: 0;
    height: calc(100vh - 140px);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-0);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
[data-theme="dark"] .pg-container {
    box-shadow: 0 4px 32px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
}

/* ── Chat Panel ── */
.pg-chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

/* ── Header ── */
.pg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-0);
    backdrop-filter: blur(12px);
}
.pg-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pg-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(99,102,241,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37,99,235,0.12);
    position: relative;
    overflow: hidden;
}
.pg-header-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.08));
    border-radius: inherit;
}
.pg-header-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.pg-header-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.pg-new-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    color: var(--text-secondary);
    transition: all 0.2s ease;
    font-family: var(--font-sans);
}
.pg-new-chat-btn:hover {
    color: var(--text-strong);
    border-color: var(--text-muted);
    background: var(--bg-2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pg-new-chat-btn:active {
    transform: translateY(0);
}

/* ── Tool Selector Toolbar ── */
.pg-toolbar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-0);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pg-toolbar-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}
.pg-toolbar-chips::-webkit-scrollbar { height: 3px; }
.pg-toolbar-chips::-webkit-scrollbar-track { background: transparent; }
.pg-toolbar-chips::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }

.pg-tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border-input);
    background: var(--bg-1);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.4;
}
.pg-tool-chip:hover {
    border-color: rgba(37,99,235,0.3);
    color: var(--text-strong);
    background: var(--bg-2);
}
.pg-tool-chip--active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text-strong);
    box-shadow: 0 0 0 2px var(--primary-ring);
}
.pg-tool-chip-icon {
    font-size: 0.82rem;
    line-height: 1;
}
.pg-tool-chip-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: -0.01em;
}
.pg-tool-chip-ds {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pg-tool-chip--active .pg-tool-chip-ds {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ── Template Prompt Pills ── */
/* Contextual prompt cards — shown below toolbar when a tool is selected */
.pg-tpl-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 0 2px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
/* Legacy label — kept for safety, no longer rendered */
.pg-tpl-label {
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
/* New card-style contextual prompt buttons */
.pg-tpl-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
    text-align: left;
    line-height: 1.35;
    max-width: 260px;
}
.pg-tpl-card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.pg-tpl-card:hover {
    border-color: rgba(37,99,235,0.35);
    background: var(--bg-0);
    color: var(--text-strong);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
.pg-tpl-card:hover svg {
    opacity: 0.8 !important;
    transform: translateX(2px);
}
.pg-tpl-card:active {
    transform: translateY(0);
    box-shadow: none;
}
/* Legacy pill — no longer rendered but kept so old code doesn't break */
.pg-tpl-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-0);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
}

/* ── Messages Area ── */
.pg-messages {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
    scroll-behavior: smooth;
}
.pg-messages::-webkit-scrollbar { width: 5px; }
.pg-messages::-webkit-scrollbar-track { background: transparent; }
.pg-messages::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }
.pg-messages::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Welcome State ── */
.pg-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 32px 24px 24px;
    min-height: 0;
    gap: 0;
}
.pg-welcome-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(99,102,241,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid rgba(37,99,235,0.10);
    flex-shrink: 0;
}
.pg-welcome-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}
.pg-welcome-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    max-width: 360px;
    line-height: 1.55;
}

/* ── Mock Banner (replaces "how it works") ── */
.pg-mock-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 420px;
    margin-bottom: 20px;
}

/* ── Suggestion Chips ── */
.pg-suggestions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 460px;
    width: 100%;
}
.pg-suggestion-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-input);
    background: var(--bg-0);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
    line-height: 1.35;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.pg-suggestion-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37,99,235,0.04), transparent);
    opacity: 0;
    transition: opacity 0.15s;
}
.pg-suggestion-chip:hover::before {
    opacity: 1;
}
.pg-suggestion-chip:hover {
    border-color: rgba(37,99,235,0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
.pg-suggestion-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.3;
    transition: opacity 0.15s;
}
.pg-suggestion-chip:hover svg {
    opacity: 0.7;
    color: var(--text-strong);
}

/* ── Input Area ── */
.pg-input-area {
    padding: 16px 24px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-0);
}
.pg-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: end;
    padding: 6px 6px 6px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--border-input);
    background: var(--bg-1);
    transition: all 0.2s ease;
}
.pg-input-wrapper:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-ring);
    background: var(--bg-0);
}
.pg-input {
    flex: 1;
    resize: none;
    border: none;
    background: transparent;
    color: var(--text-primary);
    padding: 10px 0;
    font-size: 0.86rem;
    font-family: var(--font-sans);
    outline: none;
    max-height: 120px;
    line-height: 1.5;
}
.pg-input::placeholder {
    color: var(--placeholder);
}
.pg-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--primary-ring);
}
.pg-send-btn svg { color: var(--primary-text); }
.pg-send-btn:hover {
    background: var(--primary-hover);
    transform: scale(1.06);
    box-shadow: 0 4px 12px var(--primary-ring);
}
.pg-send-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px var(--primary-ring);
}
.pg-input-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 8px;
    opacity: 0.5;
}

/* ── Chat Bubbles ── */
.pg-msg-user {
    display: flex;
    justify-content: flex-end;
    animation: pgSlideIn 0.3s ease-out;
}
@keyframes pgSlideIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.pg-msg-user-bubble {
    max-width: 72%;
    padding: 12px 18px;
    border-radius: 18px 18px 4px 18px;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 0.86rem;
    line-height: 1.55;
    word-break: break-word;
    box-shadow: 0 2px 12px var(--primary-ring);
}
.pg-msg-assistant {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: pgSlideIn 0.3s ease-out;
}
.pg-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(99,102,241,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(37,99,235,0.12);
    position: relative;
}
.pg-msg-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.06));
}
.pg-msg-avatar svg {
    width: 15px;
    height: 15px;
    color: var(--text-strong);
}
.pg-msg-content {
    flex: 1;
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--text-primary);
    padding: 14px 20px;
    border-radius: 4px 16px 16px 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    max-width: 92%;
    transition: border-color 0.2s;
    overflow-wrap: break-word;
    word-break: break-word;
}
.pg-msg-content:hover {
    border-color: rgba(255,255,255,0.1);
}
[data-theme="light"] .pg-msg-content:hover {
    border-color: rgba(0,0,0,0.1);
}

/* ── Typography ── */
.pg-msg-content p { margin: 0 0 10px; }
.pg-msg-content p:last-child { margin-bottom: 0; }
.pg-msg-content strong { color: var(--text-strong); font-weight: 700; }
.pg-msg-content em { font-style: italic; }
.pg-msg-content del { text-decoration: line-through; color: var(--text-muted); }
.pg-msg-content a {
    color: var(--text-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--text-muted);
    transition: text-decoration-color 0.15s;
    font-weight: 600;
}
.pg-msg-content a:hover { text-decoration-color: var(--text-strong); }

/* ── Headers ── */
.pg-msg-content h1, .pg-msg-content h2, .pg-msg-content h3, .pg-msg-content h4 {
    color: var(--text-strong);
    margin: 16px 0 8px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.pg-msg-content > :first-child { margin-top: 0; }
.pg-msg-content h1 { font-size: 1.1rem; font-weight: 700; }
.pg-msg-content h2 { font-size: 1rem; font-weight: 700; }
.pg-msg-content h3 { font-size: 0.92rem; font-weight: 600; }
.pg-msg-content h4 { font-size: 0.86rem; font-weight: 600; }

/* ── Inline Code ── */
.pg-msg-content code {
    font-family: var(--font-mono);
    font-size: 0.8em;
    background: var(--bg-3);
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--border);
}

/* ── Code Blocks ── */
.pg-msg-content pre {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.78rem;
    margin: 12px 0;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
.pg-msg-content pre code {
    background: none;
    padding: 0;
    border: none;
    font-size: inherit;
}
.pg-msg-content pre::-webkit-scrollbar { height: 4px; }
.pg-msg-content pre::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }

/* ── Tables ── */
.pg-msg-content .pg-table-wrap {
    overflow-x: auto;
    margin: 14px 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    -webkit-overflow-scrolling: touch;
}
.pg-msg-content .pg-table-wrap::-webkit-scrollbar { height: 4px; }
.pg-msg-content .pg-table-wrap::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
.pg-msg-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 0.8rem;
    min-width: 100%;
}
.pg-msg-content th {
    background: var(--bg-2);
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    position: relative;
    white-space: nowrap;
}
.pg-msg-content th:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    height: 50%;
    width: 1px;
    background: var(--border);
}
.pg-msg-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    transition: background 0.15s;
    vertical-align: top;
}
.pg-msg-content tr:last-child td { border-bottom: none; }
.pg-msg-content tr:hover td {
    background: rgba(37,99,235,0.03);
}
[data-theme="dark"] .pg-msg-content tr:hover td {
    background: rgba(255,255,255,0.02);
}
/* Status badges in tables */
.pg-msg-content td .pg-status-on,
.pg-msg-content td .pg-status-off {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}
.pg-msg-content td .pg-status-on {
    background: rgba(34,197,94,0.1);
    color: #22c55e;
}
.pg-msg-content td .pg-status-off {
    background: rgba(239,68,68,0.08);
    color: #ef4444;
}

/* ── Lists ── */
.pg-msg-content ul, .pg-msg-content ol {
    margin: 8px 0;
    padding-left: 22px;
}
.pg-msg-content li {
    margin-bottom: 5px;
    line-height: 1.6;
}
.pg-msg-content li::marker {
    color: var(--text-muted);
}
/* Nested lists */
.pg-msg-content li > ul, .pg-msg-content li > ol {
    margin: 4px 0 4px 0;
}
/* Task lists (GFM checkboxes) */
.pg-msg-content ul.contains-task-list,
.pg-msg-content .task-list-item {
    list-style: none;
}
.pg-msg-content ul.contains-task-list { padding-left: 4px; }
.pg-msg-content .task-list-item input[type="checkbox"] {
    margin-right: 8px;
    accent-color: var(--primary);
    vertical-align: middle;
    pointer-events: none;
}

/* ── Blockquote ── */
.pg-msg-content blockquote {
    border-left: 3px solid rgba(37,99,235,0.3);
    margin: 12px 0;
    padding: 8px 16px;
    color: var(--text-secondary);
    background: rgba(37,99,235,0.03);
    border-radius: 0 8px 8px 0;
}
.pg-msg-content blockquote p:last-child { margin-bottom: 0; }
.pg-msg-content blockquote blockquote {
    margin: 8px 0;
    border-left-color: rgba(37,99,235,0.15);
}

/* ── HR ── */
.pg-msg-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0;
}

/* ── Images ── */
.pg-msg-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid var(--border);
}

/* ── Definition Lists ── */
.pg-msg-content dl { margin: 10px 0; }
.pg-msg-content dt { font-weight: 700; color: var(--text-strong); margin-top: 8px; }
.pg-msg-content dd { margin-left: 16px; color: var(--text-secondary); }

/* ── Tools Panel (Redesigned) ── */
.pg-tools-panel {
    width: 280px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    background: var(--bg-0);
    position: relative;
}
.pg-tools-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--border) 10%, var(--border) 90%, transparent);
}
.pg-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-0);
}
.pg-tools-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
}
.pg-tools-count {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-2);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.pg-tools-entries {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pg-tools-entries::-webkit-scrollbar { width: 4px; }
.pg-tools-entries::-webkit-scrollbar-track { background: transparent; }
.pg-tools-entries::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }
.pg-tools-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: center;
    padding: 28px;
    opacity: 0.45;
    gap: 4px;
}

/* ── Tool Debug Entry (Redesigned) ── */
.tool-debug-entry {
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: pgSlideIn 0.25s ease-out;
}
.tool-debug-entry:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="dark"] .tool-debug-entry:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* ── Typing Indicator ── */
.pg-typing-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: pgSlideIn 0.3s ease-out;
}
.pg-typing-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.pg-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: pgBounce 1.4s infinite;
}
.pg-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.pg-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pgBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Connecting Indicator ── */
.pg-connecting-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: pgSlideIn 0.3s ease-out;
}
.pg-connecting-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 18px 18px 18px 4px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.pg-connecting-text {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
    animation: pgPulseText 1.5s ease-in-out infinite;
}
@keyframes pgPulseText {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ── Slow Response Indicator ── */
.pg-slow-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    font-size: 12px;
    animation: pgSlideIn 0.3s ease-out;
}
.pg-slow-indicator svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ── Error / Warning message bubbles ── */
.pg-msg-error,
.pg-msg-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin: 4px 0;
}
.pg-msg-error {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
}
.pg-msg-warning {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
}
.pg-msg-error-icon,
.pg-msg-warning-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}
.pg-msg-error-icon svg,
.pg-msg-warning-icon svg {
    width: 20px;
    height: 20px;
}
.pg-msg-error-icon svg { color: #ef4444; }
.pg-msg-warning-icon svg { color: #f59e0b; }
.pg-msg-error-content,
.pg-msg-warning-content {
    flex: 1;
    min-width: 0;
    font-size: 0.84rem;
    line-height: 1.55;
}
.pg-msg-error-content p,
.pg-msg-warning-content p {
    margin: 0 0 10px;
    color: var(--text-primary);
}
.pg-msg-error-content p:last-child,
.pg-msg-warning-content p:last-child {
    margin-bottom: 0;
}
.pg-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.08);
    color: #ef4444;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pg-retry-btn:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.45);
}
.pg-retry-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ── Summary / Deploy Review ──
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Summary grid cards ── */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.summary-card {
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-0);
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.summary-card:hover {
    border-color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.summary-card-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.summary-card-value {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-strong);
    word-break: break-all;
}
.summary-card-value.sm {
    font-size: 0.75rem;
}
.summary-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.summary-edit-btn:hover {
    background: var(--bg-3);
    color: var(--text-strong);
    border-color: var(--border-input);
}

/* ── Summary sections (full-width) ── */
.summary-block {
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-0);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.summary-block:hover {
    border-color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.summary-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.summary-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.summary-block-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* ── Channels status pills ── */
.summary-channel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
}
.summary-channel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.summary-channel.enabled {
    color: var(--text-strong);
}
.summary-channel.disabled {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ── Tool mini card ── */
.summary-tool {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    transition: border-color 0.15s;
}
.summary-tool:hover {
    border-color: var(--text-muted);
}
.summary-tool-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.summary-tool-name {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-strong);
}
.summary-tool-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.summary-tool-badge {
    font-size: 0.6rem;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid var(--border-input);
    background: var(--bg-3);
    color: var(--text-muted);
}

/* ── Summary channel detail rows ── */
.summary-channel-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}
.summary-ch-section {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-1);
}
.summary-ch-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.summary-ch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.72rem;
}
.summary-ch-label {
    color: var(--text-muted);
    min-width: 100px;
    flex-shrink: 0;
}
.summary-ch-value {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    word-break: break-all;
}

/* ── Summary tool detail (expanded) ── */
.summary-tool-detail {
    margin-top: 4px;
    padding: 8px 12px 8px 52px;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.summary-tool-detail-row {
    display: flex;
    gap: 6px;
}
.summary-tool-detail-label {
    color: var(--text-muted);
    min-width: 80px;
    flex-shrink: 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.summary-tool-detail-value {
    color: var(--text-secondary);
    word-break: break-all;
}

/* ── Summary web config grid ── */
.summary-web-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
@media (max-width: 640px) {
    .summary-web-grid { grid-template-columns: 1fr 1fr; }
}
.summary-web-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-1);
}
.summary-web-item-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.summary-web-item-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}
.summary-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border-input);
    flex-shrink: 0;
}
.summary-welcome-preview {
    font-size: 0.72rem;
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    line-height: 1.5;
    max-height: 80px;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Prompt preview ── */
.summary-prompt-preview {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.65;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    max-height: 130px;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
    cursor: pointer;
    transition: max-height 0.3s ease;
}
.summary-prompt-preview.expanded {
    max-height: 600px;
    overflow-y: auto;
}
.summary-prompt-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(transparent, var(--bg-0));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
    pointer-events: none;
}
.summary-prompt-expand-btn {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 500;
    color: #60a5fa;
    pointer-events: auto;
    cursor: pointer;
    background: none;
    border: none;
    padding: 2px 8px;
}

/* ── Resource Grid (detailed view) ── */
.res-grid { display: flex; flex-direction: column; gap: 2px; }
.res-row {
    border-bottom: 1px solid var(--border);
    padding: 10px 0;
}
.res-row:last-child { border-bottom: none; }
.res-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
}
.res-row-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border-radius: 6px;
    padding: 4px;
}
.res-aws-icon { width: 18px; height: 18px; }
.res-row-info { flex: 1; min-width: 0; }
.res-row-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-strong);
    line-height: 1.2;
}
.res-row-desc {
    font-size: 0.66rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
}
.res-row-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-3);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}
.res-row-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    padding-left: 38px;
}
.res-row-items--wrap {
    flex-direction: row;
    flex-wrap: wrap;
}
.res-item-code {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-secondary);
    background: var(--bg-2);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.res-item-code--sm {
    font-size: 0.62rem;
    padding: 2px 6px;
}
.res-item-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.res-item-tag {
    font-size: 0.6rem;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 3px;
}
.res-item-tag--backend { background: rgba(16,185,129,0.1); color: #10b981; }
.res-item-tag--tool { background: rgba(245,158,11,0.1); color: #f59e0b; }
.res-item-tag--s3 { background: rgba(63,134,36,0.1); color: #3F8624; }
.res-item-tag--cf { background: rgba(140,79,255,0.1); color: #8C4FFF; }
.res-item-tag--ddb { background: rgba(37,99,235,0.1); color: #2563eb; }
.res-item-tag--op { background: var(--bg-3); color: var(--text-muted); }

/* Legacy chip (unused, kept for compat) */
.summary-resource-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 500;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    color: var(--text-secondary);
}
.summary-resource-chip svg {
    width: 12px;
    height: 12px;
    opacity: 0.5;
}

/* ── Deploy Floating Banner ── */
.deploy-float-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: var(--bg-1);
    border: 1px solid var(--border-input);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
    animation: deploy-banner-in 0.3s ease;
}
@keyframes deploy-banner-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.deploy-float-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}
.deploy-float-btn {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--primary);
    color: var(--primary-text);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.deploy-float-btn:hover { background: var(--primary-hover); }
.deploy-float-bar {
    height: 3px;
    background: var(--bg-3);
}
.deploy-float-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-strong));
    transition: width 0.5s ease;
    border-radius: 0 0 0 12px;
}

/* ── Deploy CTA ── */
.summary-deploy-cta {
    text-align: center;
    padding: 24px 0 8px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}
.summary-deploy-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px var(--primary-ring);
    font-family: var(--font-sans);
}
.summary-deploy-btn:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 16px var(--primary-ring);
    transform: translateY(-1px);
}
.summary-deploy-btn:active {
    transform: translateY(0);
}
.summary-deploy-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* ── Deploy Diff (Pro) ─────────────────────────────────────────────────────
   Sits between Resources and Deploy CTA on the summary step. Changes are
   grouped by functional AREA (not by git kind), each change is rendered as
   a semantic card with a human summary + optional comparison.
   Design goals: scannable at a glance, explicit about impact, zero jargon. */
.deploy-diff-pro {
    position: relative;
    margin: 24px 0 8px;
    border-radius: 16px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px -20px rgba(139,92,246,0.18), 0 1px 2px rgba(0,0,0,0.03);
    overflow: hidden;
    animation: deployDiffProIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deploy-diff-pro::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);
    background-size: 200% 100%;
    animation: deployDiffProRibbon 8s linear infinite;
}
.deploy-diff-pro--ok {
    background: linear-gradient(180deg, rgba(34,197,94,0.04) 0%, var(--bg-1) 60%);
    border-color: rgba(34,197,94,0.25);
}
.deploy-diff-pro--ok::before {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    animation: none;
}
.deploy-diff-pro--info {
    background: linear-gradient(180deg, rgba(59,130,246,0.04) 0%, var(--bg-1) 60%);
    border-color: rgba(59,130,246,0.25);
}
.deploy-diff-pro--info::before {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    animation: none;
}

.deploy-diff-pro__intro {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
}
.deploy-diff-pro__intro-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ic-bg);
    color: var(--ic);
    flex-shrink: 0;
}
.deploy-diff-pro__intro-icon svg { width: 18px; height: 18px; }
.deploy-diff-pro__intro-title {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--text-strong);
    line-height: 1.3;
}
.deploy-diff-pro__intro-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Hero header for the "changes" state */
.deploy-diff-pro__hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 16px;
}
.deploy-diff-pro__hero-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(236,72,153,0.14));
    color: #8b5cf6;
    flex-shrink: 0;
}
.deploy-diff-pro__hero-icon svg { width: 22px; height: 22px; }
.deploy-diff-pro__hero-text { min-width: 0; }
.deploy-diff-pro__hero-eyebrow {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8b5cf6;
    margin-bottom: 2px;
}
.deploy-diff-pro__hero-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
    line-height: 1.3;
    margin: 0;
}
.deploy-diff-pro__hero-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: 4px 0 0;
}
.deploy-diff-pro__hero-stat {
    text-align: center;
    padding: 8px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(236,72,153,0.08));
    border: 1px solid rgba(139,92,246,0.18);
    min-width: 72px;
}
.deploy-diff-pro__hero-stat-value {
    font-size: 1.4rem;
    font-weight: 750;
    color: #8b5cf6;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.deploy-diff-pro__hero-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 600;
}

/* Top chip bar — clickable shortcuts to each category section */
.deploy-diff-pro__chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 22px 16px;
    border-bottom: 1px dashed var(--border);
}
.deploy-diff-pro-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: var(--cbg);
    color: var(--c);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.deploy-diff-pro-chip:hover {
    border-color: var(--c);
    transform: translateY(-1px);
}
.deploy-diff-pro-chip__icon { display: inline-flex; }
.deploy-diff-pro-chip__icon svg { width: 12px; height: 12px; }
.deploy-diff-pro-chip__count {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.deploy-diff-pro-chip__label { opacity: 0.9; }

/* Category sections */
.deploy-diff-pro__sections {
    display: flex; flex-direction: column; gap: 20px;
    padding: 20px 22px 22px;
}
.deploy-diff-pro-section {
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.deploy-diff-pro-section.is-flash {
    animation: deployDiffProFlash 1.2s ease-out;
}
.deploy-diff-pro-section__head {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.deploy-diff-pro-section__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--cbg);
    color: var(--c);
    flex-shrink: 0;
}
.deploy-diff-pro-section__icon svg { width: 14px; height: 14px; }
.deploy-diff-pro-section__title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: 0.01em;
}
.deploy-diff-pro-section__count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cbg);
    color: var(--c);
}
.deploy-diff-pro-section__cards {
    display: flex; flex-direction: column; gap: 8px;
}

/* Individual change card */
.deploy-diff-pro-card {
    position: relative;
    border-radius: 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    padding: 12px 14px 12px 16px;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.deploy-diff-pro-card::before {
    content: '';
    position: absolute; left: 0; top: 10px; bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--k, var(--border));
}
.deploy-diff-pro-card:hover {
    border-color: var(--kbr, var(--border));
    box-shadow: 0 4px 14px -6px rgba(0,0,0,0.08);
}
.deploy-diff-pro-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 4px;
}
.deploy-diff-pro-card__label {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--text-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deploy-diff-pro-card__pill {
    display: inline-flex; align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--k);
    background: var(--kb);
    flex-shrink: 0;
}
.deploy-diff-pro-card__summary {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 2px;
}
.deploy-diff-pro-tag {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(139,92,246,0.08);
    color: #8b5cf6;
    font-size: 0.68rem;
    font-weight: 600;
}
.deploy-diff-pro-metric {
    display: inline-flex; align-items: center; gap: 6px;
    font-variant-numeric: tabular-nums;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 0.72rem;
}
.deploy-diff-pro-metric__from { color: var(--text-muted); }
.deploy-diff-pro-metric__arrow { color: var(--text-muted); opacity: 0.6; }
.deploy-diff-pro-metric__to { color: var(--text-strong); font-weight: 600; }
.deploy-diff-pro-metric__unit { color: var(--text-muted); font-size: 0.68rem; }
.deploy-diff-pro-metric__delta {
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.68rem;
}
.deploy-diff-pro-metric__delta[data-sign="pos"] {
    color: #16a34a;
    background: rgba(34,197,94,0.12);
}
.deploy-diff-pro-metric__delta[data-sign="neg"] {
    color: #dc2626;
    background: rgba(239,68,68,0.12);
}
.deploy-diff-pro-chips-row {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.deploy-diff-pro-chips-row code {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-strong);
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 0.68rem;
}
.deploy-diff-pro-subtle {
    color: var(--text-secondary);
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Inline comparison (short values) */
.deploy-diff-pro-inline {
    display: flex; align-items: center; gap: 10px;
    margin-top: 6px;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 0.74rem;
    flex-wrap: wrap;
}
.deploy-diff-pro-inline__before {
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(239,68,68,0.08);
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(239,68,68,0.5);
    text-decoration-thickness: 1px;
}
.deploy-diff-pro-inline__after {
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(34,197,94,0.08);
    color: var(--text-strong);
    font-weight: 500;
}
.deploy-diff-pro-inline__arrow {
    width: 14px; height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.55;
}
.deploy-diff-pro-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.7rem;
}

/* Collapsible comparison for long values (welcome messages, etc.) */
.deploy-diff-pro-compare {
    margin-top: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    overflow: hidden;
}
.deploy-diff-pro-compare > summary {
    padding: 7px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 6px;
    user-select: none;
    transition: background 0.12s;
}
.deploy-diff-pro-compare > summary::-webkit-details-marker { display: none; }
.deploy-diff-pro-compare > summary:hover {
    background: var(--bg-1);
    color: var(--text-strong);
}
.deploy-diff-pro-compare > summary svg {
    width: 12px; height: 12px;
    transition: transform 0.2s ease;
}
.deploy-diff-pro-compare[open] > summary svg {
    transform: rotate(180deg);
}
.deploy-diff-pro-compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--border);
}
.deploy-diff-pro-compare__side {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    position: relative;
}
.deploy-diff-pro-compare__side[data-side="before"] {
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.03);
}
.deploy-diff-pro-compare__side[data-side="after"] {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.03);
}
.deploy-diff-pro-compare__side-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
}
.deploy-diff-pro-compare__side[data-side="before"] .deploy-diff-pro-compare__side-label {
    color: #dc2626;
}
.deploy-diff-pro-compare__side[data-side="after"] .deploy-diff-pro-compare__side-label {
    color: #16a34a;
}
.deploy-diff-pro-compare__side-value {
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--text-strong);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
}

@keyframes deployDiffProIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes deployDiffProRibbon {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes deployDiffProFlash {
    0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
    30%  { box-shadow: 0 0 0 6px rgba(139,92,246,0.18); transform: scale(1.005); }
    100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); transform: scale(1); }
}

/* Responsive: stack comparison grid and hero on narrow screens */
@media (max-width: 720px) {
    .deploy-diff-pro__hero {
        grid-template-columns: auto 1fr;
        grid-template-areas: "icon text" "stat stat";
    }
    .deploy-diff-pro__hero-icon { grid-area: icon; }
    .deploy-diff-pro__hero-text { grid-area: text; }
    .deploy-diff-pro__hero-stat { grid-area: stat; justify-self: start; min-width: 0; }
    .deploy-diff-pro-compare__grid { grid-template-columns: 1fr; }
}

/* ── Responsive ── */

/* --- Notebook / Small Desktop (≤1024px) --- */
@media (max-width: 1024px) {
    .auth-hero { width: 320px; }
    .auth-hero-content { padding: 28px 24px; }
    .auth-hero-content img { height: 36px !important; }
}
/* --- Tablet landscape (≤900px) --- */
@media (max-width: 900px) {
    .auth-split { flex-direction: column; overflow-y: auto; }
    .auth-hero { width: 100%; flex-shrink: 0; }
    .auth-hero-content { min-height: auto; padding: 28px 32px; }
    .auth-hero-content > img { height: 36px !important; }
    .auth-hero-content > p { font-size: 0.9rem !important; margin-top: 14px !important; }
    .auth-hero-steps { display: none; }
    .auth-hero-footer { display: none; }
    .auth-hero-features { grid-template-columns: 1fr 1fr 1fr !important; gap: 10px 18px !important; margin-top: 18px !important; }
    .auth-form-panel { align-items: flex-start; padding: 32px 24px; }
}
/* --- Tablet (≤768px) --- */
@media (max-width: 768px) {
    .auth-hero-features { grid-template-columns: 1fr 1fr !important; }
    .auth-hero-content { padding: 24px 20px; }
    .auth-form-panel { padding: 24px 20px; }
}
/* --- Mobile (≤640px) — auth adjustments --- */
@media (max-width: 640px) {
    .auth-hero-features { grid-template-columns: 1fr !important; }
    .auth-hero-content { padding: 20px 16px; }
}
/* --- Medium-height viewports (notebooks): hide steps to avoid scroll --- */
@media (max-height: 820px) {
    .auth-hero-steps { display: none; }
}
/* --- Short viewports: compact hero --- */
@media (max-height: 650px) {
    .auth-split { overflow-y: auto; }
    .auth-hero-steps { display: none; }
    .auth-hero-footer { display: none; }
}
/* --- Tablet (≤768px) --- */
@media (max-width: 768px) {
    #app-sidebar {
        display: none;
    }
    /* Show inline step indicator on mobile */
    #mobile-step-bar {
        display: flex !important;
    }
    .pg-tools-panel {
        display: none !important;
    }
    .pg-container {
        border-radius: 0;
        height: calc(100vh - 180px);
    }
    #view-wizard {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .step-card {
        padding: 20px;
    }
    /* Split layout — stack on tablet */
    .ch-split-layout { flex-direction: column; }
    .ch-split-preview {
        position: static; width: 100%;
        border-left: none; border-image: none;
        padding-left: 0; margin-left: 0;
        min-height: auto;
        /* Horizontal rail on top when stacked */
        border-top: 2px solid var(--border);
        padding-top: 16px; margin-top: 8px;
    }
    .chat-preview-label::before, .chat-preview-label::after { display: none; }
}

/* --- Mobile (≤640px) --- */
@media (max-width: 640px) {
    /* Agent detail grid — stack on mobile */
    .agent-detail-grid { grid-template-columns: 1fr !important; }

    /* Header */
    .header-inner { padding: 0 10px; }
    .header-org { display: none; }
    .header-sep { display: none; }
    .header-title { font-size: 0.75rem; }
    .header-logo-img { height: 18px; }
    .header-controls { gap: 1px; padding: 2px; }
    .header-ctrl-btn { padding: 4px 7px; }
    .header-ctrl-sep { display: none; }

    /* Wizard content */
    #view-wizard { padding: 12px; }
    .step-card { padding: 16px; border-radius: 12px; }

    /* Template picker — 2 columns */
    .tpl-picker-grid { grid-template-columns: 1fr 1fr !important; max-width: 100% !important; }
    .tpl-picker-card { padding: 12px 8px !important; }

    /* Tool template cards */
    .tool-tpl-card { padding: 10px 6px; }
    .tool-tpl-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

    /* Datasource selector — wrap on mobile */
    .ds-select-grid { flex-wrap: wrap; }
    .ds-select-btn { min-height: 60px !important; padding: 8px 6px !important; flex: 1 1 calc(33% - 6px) !important; }

    /* Tool edit form — stack grids */
    .tool-edit-grid { grid-template-columns: 1fr !important; }
    .tool-field-grid { grid-template-columns: 1fr !important; }
    .tool-param-row { flex-wrap: wrap; }

    /* Operation selector — 2 columns */
    .op-select-grid { grid-template-columns: 1fr 1fr !important; }

    /* API tab bar */
    .api-tab-bar { flex-wrap: wrap; }

    /* Playground */
    .pg-suggestions { grid-template-columns: 1fr; }
    .pg-container { height: calc(100vh - 160px); }
    .pg-welcome { justify-content: flex-start; padding: 16px 16px; }
    .pg-welcome-icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 10px; }
    .pg-welcome-title { font-size: 0.95rem; }
    .pg-welcome-desc { font-size: 0.78rem; margin-bottom: 12px; }
    .pg-how-it-works { font-size: 0.72rem; }
    .pg-messages { padding: 14px; gap: 10px; }
    .pg-msg-content { max-width: 96%; }
    .pg-msg-user-bubble { max-width: 88%; }

    /* Toolbar mobile */
    .pg-toolbar { padding: 8px 12px; gap: 6px; }
    .pg-tool-chip { padding: 4px 8px; font-size: 0.66rem; }
    .pg-tool-chip-label { font-size: 0.64rem; }
    .pg-tool-chip-ds { display: none; }
    .pg-tpl-row { gap: 4px; }
    .pg-tpl-pill { padding: 2px 7px; font-size: 0.62rem; }

    /* Channel grids — stack on mobile */
    .ch-grid-2col, .ch-grid-3col, .ch-grid-main { grid-template-columns: 1fr !important; }
    /* Summary */
    .summary-grid { grid-template-columns: 1fr; }

    /* Step nav bar */
    #step-nav { padding: 8px 12px; }
    #step-nav .nav-btn { font-size: 0.78rem; padding: 8px 14px; }

    /* Auth — tighter padding on mobile */
    .auth-form-panel { padding: 20px 16px; }

    /* Verticals grid — 2 cols still ok at 640 but tighter */
    .verticals-grid { max-width: 100% !important; gap: 10px !important; }

    /* Tailwind grid-cols-2 override for mobile */
    .grid-cols-2 { grid-template-columns: 1fr !important; }

    /* Modals / overlays */
    .tool-confirm-overlay > div { width: 96% !important; max-width: 100% !important; padding: 16px !important; }
}

/* --- Small phone (≤400px) --- */
@media (max-width: 400px) {
    .tpl-picker-grid { grid-template-columns: 1fr !important; }
    .tool-tpl-grid { grid-template-columns: 1fr !important; }
    .ds-select-btn { flex: 1 1 calc(50% - 6px) !important; }
    .op-select-grid { grid-template-columns: 1fr !important; }
    .verticals-grid { grid-template-columns: 1fr !important; }
}

/* ── Auth view: hide header brand on desktop (hero has it) ── */
@media (min-width: 641px) {
    /* Header becomes an absolute floating strip so the auth split goes edge-to-edge */
    .is-auth .app-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: transparent;
        z-index: 100;
        pointer-events: none;
    }
    .is-auth .app-header > * { pointer-events: auto; }
    .is-auth #header-brand { display: none; }
    .is-auth .header-inner {
        justify-content: flex-end;
        padding: 14px 22px 0;
        height: auto;
    }
    .is-auth .header-border { display: none; }
    /* Give the controls pill a subtle floating shadow so it reads as elevated */
    .is-auth .header-controls {
        background: var(--bg-1);
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        backdrop-filter: blur(6px);
    }
    [data-theme="dark"] .is-auth .header-controls {
        background: rgba(17,17,17,0.85);
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ── Extracted Inline Styles ──
   ══════════════════════════════════════════════════════════════════════════════ */

/* === Utility === */
.d-none { display: none; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline-flex { display: inline-flex; }
.d-block { display: block; }
.visibility-hidden { visibility: hidden; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-5 { gap: 5px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.border-top-separator { border-top: 1px solid var(--border); }
.border-bottom-separator { border-bottom: 1px solid var(--border); }

/* === Wizard / Step Nav === */
.mobile-step-label {
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
}
.mobile-step-dot {
    height: 8px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Auth === */
.auth-form-group { margin-bottom: 20px; }
.auth-type-row { display: flex; gap: 8px; }
.auth-type-btn-styled {
    font-size: 0.82rem;
    padding: 10px 14px;
}
.auth-submit-btn {
    margin-top: 8px;
    padding: 12px 20px;
    font-size: 0.9rem;
    border-radius: 10px;
}
.auth-arn-preview-box {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    word-break: break-all;
}
.auth-icon-btn-color { color: var(--icon-color); }

/* -- Prerequisites -- */
.prereqs-section {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-0);
}
.prereqs-section--warn {
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.04);
}
.prereqs-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.prereqs-step {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.prereqs-step-num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 1px;
}
.prereqs-step-text {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.6;
}
.prereqs-code {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--text-strong);
}
.prereqs-link {
    color: #60a5fa;
    text-decoration: underline;
}
.prereqs-perms-code {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    line-height: 1.7;
    color: var(--text-secondary);
}
.prereqs-comment { color: var(--text-muted); }
.prereqs-hint {
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.prereqs-emoji { font-size: 0.85rem; }

/* -- Prerequisites CLI Command Blocks -- */
.prereqs-section--cli {
    border-color: rgba(96,165,250,0.25);
    background: rgba(96,165,250,0.03);
}
[data-theme="dark"] .prereqs-section--cli {
    border-color: rgba(96,165,250,0.2);
    background: rgba(96,165,250,0.04);
}
.prereqs-cli-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.6;
}
.prereqs-cli-block {
    margin-bottom: 12px;
}
.prereqs-cli-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.prereqs-cli-code-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.prereqs-cli-pre {
    margin: 0;
    padding: 12px 14px;
    padding-right: 70px;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.65;
    color: #c9d1d9;
    white-space: pre;
    tab-size: 2;
}
[data-theme="light"] .prereqs-cli-pre {
    background: #1a1b26;
}
.prereqs-cli-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.prereqs-cli-copy-btn:hover {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.2);
}
.prereqs-cli-copy-btn.copied {
    color: #4ade80;
    border-color: rgba(74,222,128,0.3);
    background: rgba(74,222,128,0.08);
}
.prereqs-cli-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.2);
    font-size: 0.64rem;
    color: #d97706;
    line-height: 1.55;
}
[data-theme="dark"] .prereqs-cli-warning {
    color: #fbbf24;
    background: rgba(245,158,11,0.08);
}
.prereqs-cli-cloudshell-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    color: #60a5fa;
    text-decoration: none;
    transition: color 0.15s;
}
.prereqs-cli-cloudshell-link:hover {
    color: #93bbfd;
    text-decoration: underline;
}

/* Responsive: CLI code blocks scroll horizontally on small screens */
@media (max-width: 600px) {
    .prereqs-cli-pre {
        font-size: 0.56rem;
        padding: 10px 12px;
        padding-right: 60px;
    }
    .prereqs-cli-copy-btn {
        padding: 3px 8px;
        font-size: 0.55rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ── AWS Prereqs Walkthrough redesign (.prx-*) ──
   4-step guided setup: Bedrock → Auth → Trust Policy → Done.
   Method (OIDC/IAM) and Mode (Console/CLI) switchers at the top.
   ══════════════════════════════════════════════════════════════════════ */
.prx-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--text-primary);
}

/* ── Segments (rendered inside .prereqs-drawer-subheader, not sticky) ── */
.prx-segments {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prx-segment-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.prx-segment-label {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 60px;
}
.prx-pills {
    display: flex;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    flex: 1;
}
.prx-pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 7px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}
.prx-pill:hover { color: var(--text-secondary); }
.prx-pill.active {
    background: var(--bg-0);
    color: var(--text-strong);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.prx-pill-hint {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.75;
}
.prx-pill.active .prx-pill-hint { color: var(--text-muted); }

/* ── Before-you-start checklist ── */
.prx-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-soft), transparent 80%), var(--bg-0);
    border: 1px solid var(--primary-soft-border);
}
.prx-intro-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-soft-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-strong);
}
.prx-intro-body { min-width: 0; flex: 1; }
.prx-intro-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.005em;
    margin-bottom: 6px;
}
.prx-intro-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.prx-intro-list li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.prx-intro-list svg {
    color: #22c55e;
    flex-shrink: 0;
}

/* ── Step card ── */
.prx-step {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-0);
    transition: border-color 0.15s;
    position: relative;
}
.prx-step:hover { border-color: var(--border-input); }
.prx-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    box-shadow: 0 2px 8px var(--primary-ring);
    position: relative;
    z-index: 1;
}
/* Vertical connecting line between consecutive steps */
.prx-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 33px;
    top: 46px;
    bottom: -18px;
    width: 1px;
    background: var(--border);
    z-index: 0;
}
.prx-step-body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}
.prx-step-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-strong);
    letter-spacing: -0.005em;
    margin-bottom: 3px;
}
.prx-step-desc {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 14px;
}

/* ── Context "why" note inside a step ── */
.prx-why {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--bg-2);
    border-left: 2px solid var(--text-muted);
    margin-bottom: 12px;
}
.prx-why svg {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 1px;
}
.prx-why-text {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.prx-why-text strong { color: var(--text-strong); font-weight: 600; }

/* ── Substeps list ── */
.prx-sublist {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: sub;
}
.prx-sublist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.55;
    counter-increment: sub;
}
.prx-sublist li::before {
    content: counter(sub);
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    font-family: var(--font-mono);
}
.prx-sublist code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-strong);
    border: 1px solid var(--border-input);
}
.prx-sublist a { color: var(--text-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prx-sublist a:hover { text-decoration-thickness: 2px; }

/* ── External action button (primary CTA inside step) ── */
.prx-btn-ext {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 9px;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px var(--primary-ring);
    font-family: var(--font-sans);
}
.prx-btn-ext:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--primary-ring);
}
.prx-btn-ext svg { flex-shrink: 0; }

/* ── Code block (inside a step) ── */
.prx-code-wrap {
    position: relative;
    margin-bottom: 10px;
}
.prx-code-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.prx-code-pre {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.65;
    padding: 12px 50px 12px 14px;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}
.prx-code-copy {
    position: absolute;
    top: 28px;
    right: 8px;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--bg-3);
    border: 1px solid var(--border-input);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.prx-code-copy:hover {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary);
}
.prx-code-copy.copied {
    background: rgba(34,197,94,0.15);
    border-color: rgba(34,197,94,0.4);
    color: #22c55e;
}

/* ── Warning callout ── */
.prx-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(245,158,11,0.06);
    border: 1px solid rgba(245,158,11,0.2);
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-top: 8px;
}
.prx-warn svg {
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 1px;
}
.prx-warn strong { color: #f59e0b; font-weight: 600; }

/* ── Final step: "what to paste" card ── */
.prx-done {
    background: linear-gradient(135deg, rgba(34,197,94,0.08), transparent 70%), var(--bg-0);
    border-color: rgba(34,197,94,0.2);
}
.prx-done .prx-step-num {
    background: #16a34a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(22,163,74,0.25);
}
.prx-done-result {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px dashed var(--border-input);
    margin-top: 6px;
}
.prx-done-result-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.prx-done-result-value {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Permissions inline list ── */
.prx-perms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 14px;
    padding: 11px 14px;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    margin-bottom: 8px;
}
.prx-perms-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.prx-perms-group-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.prx-perms-group code {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.55;
    background: transparent;
    padding: 0;
    border: none;
}

/* Responsive */
@media (max-width: 640px) {
    .prx-segment-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .prx-segment-label { min-width: 0; }
    .prx-perms { grid-template-columns: 1fr; }
    .prx-intro { flex-direction: column; gap: 10px; }
}

/* === Section Icons (colored backgrounds) === */
.section-icon-blue { background: rgba(37,99,235,0.08); color: #3b82f6; }
.section-icon-amber { background: rgba(245,158,11,0.08); color: #f59e0b; }
.section-icon-green { background: rgba(34,197,94,0.08); color: #22c55e; }
.section-icon-purple { background: rgba(139,92,246,0.08); color: #8b5cf6; }

/* === SVG Icon Sizes === */
.icon-12 { width: 12px; height: 12px; }
.icon-13 { width: 13px; height: 13px; }
.icon-14 { width: 14px; height: 14px; }
.icon-15 { width: 15px; height: 15px; }
.icon-16 { width: 16px; height: 16px; }
.icon-20 { width: 20px; height: 20px; }
.icon-32 { width: 32px; height: 32px; }

/* === Form Field Helpers === */
.form-group { margin-bottom: 16px; }
.form-group-lg { margin-bottom: 20px; }
.form-fields-col {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-hint {
    font-size: 0.72rem;
    margin-top: 4px;
    color: var(--text-muted);
}
.form-hint-xs {
    font-size: 0.75rem;
    margin-top: 4px;
    color: var(--text-muted);
}
.form-hint-xxs {
    font-size: 0.7rem;
    margin-top: 4px;
    color: var(--text-muted);
}
.form-label-sm {
    font-size: 0.68rem;
    opacity: 0.7;
}
.form-label-lg {
    font-size: 0.8rem;
    font-weight: 600;
}
.form-label-xl {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-strong);
}
.form-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.form-label-flex {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.text-required { color: #f87171; }
.text-muted-var { color: var(--text-muted); }
.text-strong-var { color: var(--text-strong); }
.text-secondary-var { color: var(--text-secondary); }

/* === Step 0 — Template Picker & Verticals === */
.tpl-picker-header {
    text-align: center;
    padding: 8px 0 24px;
}
.tpl-picker-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 6px;
}
.tpl-picker-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 28px;
}
.tpl-picker-grid {
    display: grid;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
}
.tpl-picker-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.tpl-picker-grid--2col { grid-template-columns: 1fr 1fr; }
.verticals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 740px;
    margin: 0 auto;
    text-align: left;
}
.tpl-card-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    min-height: 120px;
    font-family: var(--font-sans);
}
.tpl-card-btn--sm {
    padding: 18px;
    min-height: 110px;
}
.tpl-card-btn:hover {
    border-color: var(--text-muted);
}
.tpl-card-icon {
    font-size: 2rem;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}
.tpl-card-icon--sm {
    font-size: 1.5rem;
    width: 42px;
    height: 42px;
    border-radius: 10px;
}
.tpl-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 4px;
}
.tpl-card-title--sm { font-size: 0.88rem; }
.tpl-card-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.tpl-card-count {
    font-size: 0.72rem;
    font-weight: 500;
    margin-top: auto;
}
.tpl-summary-box {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.tpl-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.tpl-summary-icon { font-size: 1.1rem; }
.tpl-summary-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-strong);
}
.tpl-summary-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(37,99,235,0.08);
    color: #60a5fa;
    font-weight: 500;
}
.tpl-summary-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}
.tpl-summary-stats {
    display: flex;
    gap: 16px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.tpl-summary-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tpl-summary-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.tpl-summary-tag {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

/* -- Divider with text -- */
.tpl-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin: 28px auto 20px;
}
.tpl-divider--wide { max-width: 680px; }
.tpl-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.tpl-divider-text {
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* -- Secondary action buttons (import / start blank) -- */
.tpl-action-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.tpl-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.84rem;
    font-family: var(--font-sans);
    transition: all 0.15s;
}
.tpl-action-btn:hover {
    border-color: var(--text-muted);
}
.tpl-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.tpl-back-btn:hover {
    border-color: var(--text-muted);
}
.tpl-back-wrapper {
    max-width: 680px;
    margin: 0 auto 18px;
    text-align: left;
}

/* === Step 1 — Channels === */
.ch-config-fields {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}
.ch-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.ch-options-row {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.ch-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ch-toggle-small { transform: scale(0.85); }
.ch-config-hint {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.ch-logo-row {
    display: flex;
    align-items: start;
    gap: 10px;
}
.ch-logo-url-wrap {
    flex: 1;
    min-width: 0;
}

/* -- API Examples -- */
.api-examples-border {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.api-examples-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.api-examples-toggle-btn:hover {
    border-color: var(--text-muted);
}
.api-examples-title {
    flex: 1;
    text-align: left;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.api-examples-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.api-examples-content {
    margin-top: 10px;
}
.api-tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: block;
}

/* === Step 2 — Tools === */
.tools-empty-hero {
    text-align: center;
    padding: 32px 0 16px;
}
.tools-empty-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--bg-2), rgba(37,99,235,0.06));
    border: 1px solid var(--border-input);
}
.tools-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-strong);
}
.tools-empty-desc {
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: var(--text-muted);
}
.tools-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 6px 14px;
    margin-bottom: 20px;
    border-radius: 9999px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    color: #60a5fa;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.tools-optional-note {
    font-size: 0.8rem;
    margin-bottom: 20px;
    color: var(--text-muted);
}
.tool-tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tool-tpl-card-btn {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 10px;
    text-align: left;
    min-height: 100px;
}
.tool-tpl-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}
.tool-tpl-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 3px;
}
.tool-tpl-card-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.tool-tpl-card-blank {
    border-style: dashed;
    opacity: 0.7;
}
.tool-tpl-card-blank-icon {
    background: var(--bg-3);
    color: var(--text-muted);
}
.tool-tpl-card-blank-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

/* -- Tool Card (in list) -- */
.tool-card-list {
    cursor: pointer;
    padding: 14px 18px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    border-radius: 10px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--tc-color, var(--border));
    background: var(--bg-0);
    position: relative;
}
.tool-card-list:hover {
    background: var(--bg-1);
    border-color: var(--border-input);
    border-left-color: var(--tc-color, var(--border-input));
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.tool-card-row { display: flex; align-items: center; gap: 12px; }
.tool-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.tool-card-body { flex: 1; min-width: 0; }
.tool-card-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.tool-card-name {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tool-card-name--empty { color: var(--text-muted); font-style: italic; font-weight: 400; font-family: var(--font-sans); }
.tool-card-complete { width: 13px; height: 13px; color: #10b981; flex-shrink: 0; }
.tool-card-op-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.tool-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tool-card-desc--empty { opacity: 0.45; }
.tool-card-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.tool-card-param-chip {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    background: var(--bg-2);
    color: var(--text-secondary);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
}
.tool-card-param-more {
    font-size: 0.68rem;
    color: var(--text-muted);
}
.tool-card-actions {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.tool-card-list:hover .tool-card-actions { opacity: 1; }
.tool-card-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.tool-card-action-btn:hover {
    background: var(--bg-2);
    color: var(--text-secondary);
    border-color: var(--border-input);
}
.tool-card-action-btn--danger:hover {
    background: rgba(239,68,68,.08);
    color: #ef4444;
    border-color: rgba(239,68,68,.2);
}

/* ── Tool editor: inner step content + segmented op control ── */
.te-step-content { padding: 4px 0 8px; }
.te-op-section { margin-top: 18px; }
.te-op-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 0 0 8px;
}
.te-op-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    background: var(--bg-2);
    padding: 3px;
    border-radius: 9px;
    border: 1px solid var(--border);
}
.te-op-seg-btn {
    padding: 5px 13px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.te-op-seg-btn:hover { background: var(--bg-3); color: var(--text-primary); }
.te-op-seg-btn.active {
    background: var(--bg-0);
    color: var(--ds-color, var(--primary));
    font-weight: 600;
    border-color: var(--border-input);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.te-op-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 6px 0 0;
    line-height: 1.4;
}

/* ── Param cards (replaces table) ── */
.te-params-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.te-params-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.te-param-cards { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.te-param-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-0);
    transition: border-color 0.12s;
}
.te-param-card.open { border-color: var(--border-input); }
.te-param-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s;
}
.te-param-card-row:hover { background: var(--bg-1); }
.te-param-card-summary { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow: hidden; }
.te-param-name-display {
    font-size: 0.8rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
}
.te-param-name-display--empty {
    color: var(--text-muted);
    font-style: italic;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 0.78rem;
}
.te-param-type-pill {
    font-size: 0.64rem;
    font-family: var(--font-mono);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    white-space: nowrap;
    flex-shrink: 0;
}
.te-param-req-badge {
    font-size: 0.64rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.te-param-req-badge--req { background: rgba(16,185,129,0.08); color: #10b981; border: 1px solid rgba(16,185,129,0.18); }
.te-param-req-badge--opt { background: var(--bg-2); color: var(--text-muted); border: 1px solid var(--border); }
.te-param-card-controls { display: flex; align-items: center; flex-shrink: 0; }
.te-param-delete {
    width: 22px; height: 22px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    font-size: 1rem;
}
.te-param-delete:hover { background: rgba(239,68,68,.08); color: #ef4444; }
.te-param-chevron {
    width: 13px; height: 13px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.18s ease;
}
.te-param-card.open .te-param-chevron { transform: rotate(180deg); }
.te-param-card-body {
    display: none;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-1);
}
.te-param-card.open .te-param-card-body { display: block; }
.te-param-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.te-param-required-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.te-param-desc-preview {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ── Select inside param card body ── */
.te-select {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-0);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: var(--font-mono);
    cursor: pointer;
    appearance: auto;
    transition: border-color 0.15s;
}
.te-select:focus { border-color: var(--primary); outline: none; }

/* ── Response section (below params) ── */
.te-resp-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.te-resp-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.te-resp-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.tools-list-col { display: flex; flex-direction: column; gap: 8px; }
.tool-add-full-btn {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    padding: 10px;
    border-style: dashed;
    border-radius: 10px;
}

/* -- Tool Edit Panel -- */
.tool-edit-styled {
    padding: 24px 28px;
}
.tool-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.tool-edit-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s;
    font-family: var(--font-sans);
}
.tool-edit-back-btn:hover { color: var(--text-strong); }
.tool-edit-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}
.tool-edit-grid--2col { grid-template-columns: 1fr 1.5fr; }
.tool-edit-grid--source { grid-template-columns: 150px 1fr; }
.tool-edit-grid--params { grid-template-columns: 1.3fr 1fr; gap: 24px; }
.tool-edit-separator {
    border-top: 1px solid var(--border);
    margin: 0 0 20px 0;
}
.tool-edit-ds-label {
    font-size: 0.75rem;
    font-weight: 500;
}
.tool-edit-ds-btns { display: flex; flex-direction: column; gap: 3px; }
.tool-edit-ds-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    white-space: nowrap;
}
.tool-edit-ds-icon { font-size: 1rem; width: 18px; text-align: center; }
.tool-desc-counter {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.tool-desc-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
}

/* -- Tool Parameters -- */
.tool-param-view {
    padding: 14px 18px;
    margin-bottom: 0;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
}
.tool-param-view-row { display: flex; align-items: flex-start; gap: 12px; }
.tool-param-view-body { flex: 1; min-width: 0; }
.tool-param-name {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-strong);
    font-size: 0.88rem;
    margin-bottom: 4px;
}
.tool-param-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tool-param-type {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-muted);
}
.tool-param-required-text { font-size: 0.8rem; }
.tool-param-desc {
    font-size: 0.78rem;
    margin-top: 4px;
    color: var(--text-muted);
}
.tool-param-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-top: 2px;
}
.tool-param-edit-card {
    padding: 20px 22px;
    margin-bottom: 0;
    border-radius: 10px;
    background: var(--bg-1);
}
.tool-param-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.tool-param-editing-label {
    font-size: 0.8rem;
    font-weight: 600;
}
.tool-param-req-btns { display: flex; gap: 8px; margin-top: 4px; }
.tool-param-req-btn {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.tool-spacer-10 { height: 10px; }

/* -- Response Fields -- */
.response-field-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    background: var(--bg-3);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
}
.response-field-remove {
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    font-size: 1.1rem;
    border: none;
    background: none;
    padding: 0;
}
.response-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.response-add-row { display: flex; gap: 8px; }
.response-add-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* -- Datasource: Mock Data -- */
.ds-mock-note {
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(249,115,22,0.06);
    border: 1px solid rgba(249,115,22,0.19);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ds-mock-note-icon { font-size: 1.1rem; }
.ds-mock-note-text { font-size: 0.78rem; color: #f97316; }
.ds-mock-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border-input);
    border-radius: 8px;
    max-width: 100%;
}
.ds-mock-table {
    width: 100%;
    font-size: 0.72rem;
    border-collapse: collapse;
    font-family: var(--font-mono);
    table-layout: fixed;
}
.ds-mock-table thead tr { background: var(--bg-3); }
.ds-mock-table th {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-input);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ds-mock-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border-input);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-mock-more {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}
.ds-mock-data-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

/* === Tool Schema Modal === */
.tool-schema-modal {
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    border-radius: 14px;
    padding: 20px 24px;
    max-width: 560px;
    width: 92%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.tool-schema-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.tool-schema-header-left { display: flex; align-items: center; gap: 8px; }
.tool-schema-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-strong);
}
.tool-schema-name {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.tool-schema-actions { display: flex; gap: 6px; }
.tool-schema-pre {
    flex: 1;
    overflow: auto;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.tool-schema-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 8px;
    flex-shrink: 0;
}

/* === Tool Help Modal === */
.tools-help-modal {
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    border-radius: 14px;
    padding: 24px;
    max-width: 520px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.tools-help-example-box {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}
.tools-help-tip-box {
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.15);
    border-radius: 8px;
    padding: 10px 12px;
}

/* === Step 3 — Prompt === */
.prompt-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-3);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
    margin-left: auto;
}
.prompt-mode-toggle:hover {
    border-color: var(--text-muted);
}

/* === Step 4 — Playground Tool Debug === */
.tool-debug-entry {
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid rgba(245,158,11,0.4);
    background: var(--bg-1);
    overflow: hidden;
    transition: border-color 0.3s;
}
.tool-debug-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
}
.tool-debug-seq {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(245,158,11,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.6rem;
    font-weight: 700;
    color: #f59e0b;
}
.tool-debug-name { color: var(--text-strong); }
.tool-debug-badge {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 5px;
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tool-debug-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f59e0b;
    animation: pulse 1.5s infinite;
}
.tool-debug-body {
    padding: 0 10px 8px;
    font-size: 0.68rem;
    font-family: var(--font-mono);
}
.tool-debug-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.tool-debug-label--result { margin-top: 6px; }
.tool-debug-pre {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 2px 0;
    max-height: 100px;
    overflow-y: auto;
}
.tool-debug-pre--result { max-height: 150px; }

/* === Step 5 — Deploy === */
.deploy-confirm-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 6px;
}
.deploy-confirm-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}
.deploy-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.deploy-progress-bar-track {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: var(--bg-2);
    overflow: hidden;
}
.deploy-progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    transition: width 0.5s ease;
}
.deploy-progress-bar-fill--destroy {
    background: linear-gradient(90deg, #ef4444, #f87171);
}
.deploy-spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}
.deploy-spinner-xs {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

/* === Agent Detail (expanded) === */
.agent-detail-container {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--anim-duration-slow) var(--anim-ease-out),
                opacity var(--anim-duration-normal) ease;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
}
.agent-detail-container.expanded {
    max-height: 6000px;
    opacity: 1;
}
.agent-detail-container .ui-detail-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}
.agent-detail-container.expanded .agent-detail-inner {
    animation: fadeSlideUp var(--anim-duration-slow) var(--anim-ease-out) both;
}
.agent-detail-inner { padding-top: 16px; }
.agent-detail-tool-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-1);
}
.agent-detail-tool-name {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-strong);
}
.agent-detail-tool-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.agent-detail-tool-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.agent-detail-badge-sm {
    font-size: 0.625rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}
.agent-detail-badge-op {
    background: var(--bg-3);
    color: var(--text-secondary);
}
.agent-detail-param-count {
    font-size: 0.625rem;
    color: var(--text-muted);
}
.agent-detail-prompt-pre {
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.625;
    padding: 16px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    max-height: 120px;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease;
}
.agent-detail-prompt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}
.agent-detail-prompt-chars {
    font-size: 0.625rem;
    color: var(--text-muted);
}
.agent-detail-prompt-toggle {
    font-size: 0.625rem;
    font-weight: 500;
    color: #60a5fa;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}
.agent-detail-infra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.agent-detail-infra-label {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-muted);
}
.agent-detail-infra-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.agent-detail-infra-value--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 12px;
    max-width: 60%;
}
.agent-detail-infra-value--truncate-sm { max-width: 55%; }
.agent-detail-infra-link {
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    color: #60a5fa;
}
.agent-detail-web-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.agent-detail-web-label {
    font-size: 0.625rem;
    margin-bottom: 4px;
    color: var(--text-muted);
}
.agent-detail-web-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.agent-detail-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.agent-detail-logo-img {
    max-width: 40px;
    max-height: 40px;
    border-radius: 6px;
    object-fit: contain;
}
.agent-detail-logo-hint {
    font-size: 0.625rem;
    color: var(--text-muted);
}
.agent-detail-infra-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* === Modals / Overlays === */
.modal-backdrop {
    background: rgba(0,0,0,0.6);
}
.modal-destroy-body {
    background: var(--bg-1);
    border: 1px solid var(--border-input);
}
.modal-destroy-icon-wrap {
    background: rgba(239,68,68,0.1);
}

/* -- JSON Import (header helpers) -- */
.ji-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ji-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ji-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(37,99,235,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
}
.ji-header-title {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-strong);
}
.ji-header-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 8px 0 0;
    line-height: 1.5;
}
.ji-schema-title {
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.74rem;
}

/* -- Error inline with icon -- */
.error-inline-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.error-inline-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #ef4444;
}
.model-hint-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.model-hint-row--success { color: #22c55e; }
.model-hint-row--error {
    align-items: flex-start;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    color: #f87171;
    line-height: 1.5;
    margin-top: 4px;
}

/* -- Toast (base positioning) -- */
.portal-toast {
    position: fixed;
    right: 24px;
    z-index: 100;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    max-width: 320px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeUp 0.2s ease-out;
    transition: opacity 0.2s ease;
}
.toast-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* -- Opacity helper for svg icons -- */
.icon-dim { opacity: 0.6; }
.icon-dim-half { opacity: 0.5; }

/* -- Custom code analysis -- */
.custom-code-error-icon { color: #ef4444; }
.custom-code-warn-icon { color: #f59e0b; }
.custom-code-success-icon { color: #10b981; }
.custom-code-perms-title { color: #10b981; }
.custom-code-perms-chip {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.2);
    color: #10b981;
}
.custom-code-valid-text { color: #10b981; }

/* ── Loading Skeletons ── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
    background-size: 200% 100%;
    animation: shimmer-premium 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-text-sm { height: 12px; width: 60%; }
.skeleton-text-lg { height: 18px; width: 80%; }

.skeleton-card {
    height: 120px;
    border-radius: 12px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-btn {
    height: 36px;
    width: 100px;
    border-radius: 8px;
}

/* Skeleton agent card — matches .agent-card row layout */
.skeleton-agent-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Skeleton select — matches .portal-select height */
.skeleton-select {
    height: 40px;
    width: 100%;
    border-radius: 8px;
}

/* Skeleton detail — matches agent detail panel */
.skeleton-detail {
    padding: 0 20px 20px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ── Error Boundary ── */
.error-boundary {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    max-width: 420px;
    width: 100%;
    animation: error-slide-in 0.3s ease-out;
}

@keyframes error-slide-in {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.error-boundary-content {
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid #ef4444;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.error-boundary-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.error-boundary-title {
    color: #ef4444;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.error-boundary-desc {
    color: var(--text-secondary, #888);
    font-size: 13px;
    margin: 0 0 12px 0;
}

.error-boundary-list {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.error-boundary-item {
    color: var(--text-muted, #666);
    font-size: 12px;
    font-family: var(--font-mono);
    padding: 4px 8px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
    margin-bottom: 4px;
    word-break: break-all;
}

.error-boundary-actions {
    display: flex;
    gap: 8px;
}

.error-boundary-btn-primary {
    background: #ef4444;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.error-boundary-btn-primary:hover { background: #dc2626; }

.error-boundary-btn-secondary {
    background: transparent;
    color: var(--text-secondary, #888);
    border: 1px solid var(--border, #333);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.error-boundary-btn-secondary:hover {
    background: rgba(255,255,255,0.05);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .error-boundary { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══ Design System — Component Classes (components.js)               ═══ */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.ui-btn:active { transform: scale(0.97); }
.ui-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.ui-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Button sizes */
.ui-btn-sm { padding: 6px 14px; font-size: 0.78rem; border-radius: 8px; }
.ui-btn-md { padding: 10px 20px; font-size: 0.85rem; }
.ui-btn-lg { padding: 12px 28px; font-size: 0.95rem; border-radius: 12px; }

/* Button variants */
.ui-btn-primary { background: var(--primary); color: var(--primary-text); font-weight: 600; }
.ui-btn-primary:hover { background: var(--primary-hover); }

.ui-btn-secondary {
    background: var(--bg-2);
    color: var(--text-secondary);
    border: 1px solid var(--border-input);
}
.ui-btn-secondary:hover {
    color: var(--text-strong);
    border-color: var(--text-muted);
}

.ui-btn-danger { background: #dc2626; color: #fff; }
.ui-btn-danger:hover { background: #b91c1c; }

.ui-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
}
.ui-btn-ghost:hover {
    background: var(--bg-2);
    color: var(--text-strong);
}

/* ── Badges / Pills ── */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.ui-badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.ui-badge-dot-pulse { animation: pulse 2s infinite; }

/* Badge color variants */
.ui-badge-blue   { background: rgba(59,130,246,0.08);  color: #60a5fa; }
.ui-badge-blue   .ui-badge-dot { background: #60a5fa; }
.ui-badge-green  { background: rgba(34,197,94,0.08);   color: #4ade80; }
.ui-badge-green  .ui-badge-dot { background: #4ade80; }
.ui-badge-yellow { background: rgba(234,179,8,0.08);   color: #facc15; }
.ui-badge-yellow .ui-badge-dot { background: #facc15; }
.ui-badge-red    { background: rgba(239,68,68,0.08);   color: #f87171; }
.ui-badge-red    .ui-badge-dot { background: #f87171; }
.ui-badge-gray   { background: var(--bg-3);            color: var(--text-muted); }
.ui-badge-gray   .ui-badge-dot { background: var(--text-muted); }
.ui-badge-purple { background: rgba(139,92,246,0.08);  color: #a78bfa; }
.ui-badge-purple .ui-badge-dot { background: #a78bfa; }
.ui-badge-orange { background: rgba(249,115,22,0.08);  color: #fb923c; }
.ui-badge-orange .ui-badge-dot { background: #fb923c; }

/* ── Cards ── */
.ui-card {
    border-radius: 12px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color 0.15s;
}
.ui-card:hover { border-color: rgba(255,255,255,0.1); }
[data-theme="light"] .ui-card:hover { border-color: rgba(0,0,0,0.12); }

.ui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.ui-card-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ui-card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    flex-shrink: 0;
}
.ui-card-header-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.ui-card-header-subtitle {
    font-size: 0.625rem;
    color: var(--text-muted);
}
.ui-card-body { padding: 16px; }
.ui-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

/* ── Form Elements ── */
.ui-form-group {
    margin-bottom: 16px;
}
.ui-form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.ui-form-required {
    color: #f87171;
    font-weight: 400;
}
.ui-form-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.ui-form-error {
    font-size: 0.75rem;
    color: #f87171;
    margin-top: 4px;
}

.ui-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.15s ease;
}
.ui-input::placeholder { color: var(--placeholder); }
.ui-input:focus {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}
.ui-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.15s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.ui-select:focus {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}
.ui-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ui-textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.15s ease;
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}
.ui-textarea::placeholder { color: var(--placeholder); }
.ui-textarea:focus {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

/* ── Section Headers ── */
.ui-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.ui-section-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ui-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ui-section-icon-blue   { background: rgba(37,99,235,0.08);  color: #2563EB; }
.ui-section-icon-green  { background: rgba(34,197,94,0.08);  color: #22c55e; }
.ui-section-icon-amber  { background: rgba(245,158,11,0.08); color: #f59e0b; }
.ui-section-icon-purple { background: rgba(139,92,246,0.08); color: #8b5cf6; }
.ui-section-icon-red    { background: rgba(239,68,68,0.08);  color: #ef4444; }
.ui-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}
.ui-section-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 2px 0 0;
}
.ui-section-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Empty States ── */
.ui-empty-state {
    text-align: center;
    padding: 60px 20px;
}
.ui-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.ui-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 8px;
}
.ui-empty-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 24px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.ui-empty-action { margin-top: 4px; }

/* ── Modal / Dialog ── */
.ui-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ui-modal-dialog {
    background: var(--bg-1);
    border: 1px solid var(--border-input);
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 440px;
    margin: 16px;
    text-align: center;
}
.ui-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.ui-modal-icon-danger { background: rgba(239,68,68,0.1); }
.ui-modal-icon-warning { background: rgba(245,158,11,0.1); }
.ui-modal-icon-info { background: rgba(59,130,246,0.1); }
.ui-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 8px;
}
.ui-modal-body {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}
.ui-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.ui-modal-footer .ui-btn { flex: 1; justify-content: center; }

/* ── Quick Guide Modal ── */
.qg-overlay {
    position: fixed; inset: 0; z-index: 9100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.52);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    animation: qg-fade-in 0.2s ease;
}
@keyframes qg-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes qg-fade-out { from { opacity: 1; } to { opacity: 0; } }
.qg-box {
    background: var(--bg-1); border: 1px solid var(--border-input);
    border-radius: 20px; max-width: 540px; width: calc(100% - 32px);
    box-shadow: 0 24px 72px rgba(0,0,0,0.22);
    animation: dpm-slide-up 0.2s ease;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 48px); overflow: hidden;
    position: relative;
}
.qg-body { flex: 1; overflow-y: auto; padding: 28px 28px 16px; scroll-behavior: smooth; }
.qg-close-btn {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; border-radius: 7px;
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: background 0.12s, color 0.12s;
}
.qg-close-btn:hover { background: var(--bg-3); color: var(--text-primary); }
.qg-close-btn:focus-visible { box-shadow: 0 0 0 3px rgba(17,85,204,0.35); outline: none; }

/* Page 1 — Hero */
.qg-hero { text-align: center; margin-bottom: 22px; }
.qg-hero-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(17,85,204,0.14), rgba(14,165,233,0.1));
    border: 1px solid rgba(17,85,204,0.22); color: #1155CC;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.qg-title { font-size: 1.18rem; font-weight: 700; color: var(--text-strong); margin: 0 0 8px; }
.qg-subtitle { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 14px; line-height: 1.55; }
.qg-time-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2);
    color: #059669; border-radius: 20px; padding: 4px 12px;
    font-size: 0.74rem; font-weight: 600;
}
.qg-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qg-highlight {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px;
}
.qg-highlight-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qg-highlight-title { font-size: 0.78rem; font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.qg-highlight-desc  { font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; }

/* Page 2 — Prerequisites */
.qg-page-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.qg-page-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.qg-page-title { font-size: 0.98rem; font-weight: 700; color: var(--text-strong); margin: 0 0 3px; }
.qg-page-desc  { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
.qg-checklist { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.qg-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-0); }
.qg-check-item:last-child { border-bottom: none; }
.qg-check-badge { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; }
.qg-check-badge--ok  { background: rgba(16,185,129,0.12); color: #059669; }
.qg-check-badge--opt { background: rgba(100,116,139,0.12); color: var(--text-muted); }
.qg-check-text { flex: 1; min-width: 0; }
.qg-check-title { font-size: 0.79rem; font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.qg-check-hint  { font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; }
.qg-check-hint code { font-family: var(--font-mono); background: var(--bg-3); padding: 0 3px; border-radius: 3px; font-size: 0.67rem; }
.qg-check-tag { font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.qg-check-tag--required { background: rgba(239,68,68,0.1);  color: #dc2626; border: 1px solid rgba(239,68,68,0.2); }
.qg-check-tag--opt      { background: rgba(100,116,139,0.1); color: var(--text-muted); border: 1px solid var(--border); }
.qg-tip {
    display: flex; align-items: flex-start; gap: 8px;
    background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.2);
    border-radius: 10px; padding: 10px 12px;
    font-size: 0.73rem; line-height: 1.5; color: #2563eb;
}
.qg-tip strong { color: #1155CC; }

/* Page 3 — Wizard steps timeline */
.qg-wizard-steps { display: flex; flex-direction: column; }
.qg-wstep { display: flex; gap: 12px; }
.qg-wstep-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 28px; }
.qg-wstep-num { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.qg-wstep-line { flex: 1; width: 1.5px; background: var(--border); margin: 3px 0; min-height: 8px; }
.qg-wstep-body { flex: 1; padding-bottom: 12px; padding-top: 4px; }
.qg-wstep-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.qg-wstep-label { font-size: 0.83rem; font-weight: 600; color: var(--text-strong); }
.qg-wstep-desc  { font-size: 0.71rem; color: var(--text-muted); line-height: 1.4; }

/* Navigation bar (bottom, all pages) */
.qg-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 28px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.qg-dots { display: flex; gap: 6px; }
.qg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-input); transition: all 0.2s; }
.qg-dot--active { width: 18px; border-radius: 3px; background: #1155CC; }
.qg-btn-back, .qg-btn-next, .qg-btn-finish {
    display: flex; align-items: center; gap: 5px;
    border: none; cursor: pointer; border-radius: 9px;
    font-size: 0.82rem; font-weight: 600; padding: 8px 14px;
    transition: all 0.15s; outline: none;
}
.qg-btn-back { background: var(--bg-2); color: var(--text-muted); border: 1px solid var(--border-input); }
.qg-btn-back:hover { color: var(--text-primary); }
.qg-btn-back--hidden { visibility: hidden; pointer-events: none; }
.qg-btn-next { background: var(--bg-2); color: var(--text-strong); border: 1px solid var(--border-input); }
.qg-btn-next:hover { background: var(--bg-3); }
.qg-btn-finish { background: #1155CC; color: #fff; }
.qg-btn-finish:hover { background: #0d47a1; }
.qg-btn-back:focus-visible, .qg-btn-next:focus-visible, .qg-btn-finish:focus-visible { box-shadow: 0 0 0 3px rgba(17,85,204,0.35); }
.qg-skip-row { text-align: center; padding: 0 28px 12px; flex-shrink: 0; }
.qg-btn-skip { background: none; border: none; color: var(--text-muted); font-size: 0.72rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: color 0.12s; outline: none; }
.qg-btn-skip:hover { color: var(--text-primary); }
.qg-btn-skip:focus-visible { box-shadow: 0 0 0 3px rgba(17,85,204,0.3); }

/* ── Discard Progress Modal ── */
.dpm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: dpm-fade-in 0.15s ease;
}
@keyframes dpm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dpm-box {
    background: var(--bg-1);
    border: 1px solid var(--border-input);
    border-radius: 18px;
    padding: 32px 28px 24px;
    max-width: 400px;
    width: calc(100% - 32px);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    animation: dpm-slide-up 0.18s ease;
}
@keyframes dpm-slide-up {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.dpm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.dpm-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0 0 8px;
}
.dpm-desc {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 24px;
}
.dpm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.dpm-btn {
    flex: 1;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    outline: none;
}
.dpm-btn:focus-visible { box-shadow: 0 0 0 3px rgba(139,92,246,0.35); }
.dpm-btn--secondary {
    background: var(--bg-2);
    color: var(--text-primary);
    border: 1px solid var(--border-input);
}
.dpm-btn--secondary:hover { background: var(--bg-3); }
.dpm-btn--danger {
    background: #ef4444;
    color: #fff;
}
.dpm-btn--danger:hover { background: #dc2626; }

/* ── Progress Bar ── */
.ui-progress { width: 100%; }
.ui-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ui-progress-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.ui-progress-right {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.ui-progress-track {
    width: 100%;
    border-radius: 4px;
    background: var(--bg-2);
    overflow: hidden;
}
.ui-progress-sm .ui-progress-track { height: 5px; border-radius: 3px; }
.ui-progress-md .ui-progress-track { height: 8px; border-radius: 4px; }
.ui-progress-fill {
    height: 100%;
    border-radius: inherit;
}
.ui-progress-blue   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.ui-progress-green  { background: linear-gradient(90deg, #22c55e, #4ade80); }
.ui-progress-red    { background: linear-gradient(90deg, #ef4444, #f87171); }
.ui-progress-orange { background: linear-gradient(90deg, #f97316, #fb923c); }

/* ── Icon Wrapper ── */
.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}

/* ── Key-Value Row ── */
.ui-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
}
.ui-kv-label {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--text-muted);
}
.ui-kv-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
    text-align: right;
}

/* ── Spinner Wrappers ── */
.ui-spinner-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}
.ui-spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.ui-spinner-md { width: 24px; height: 24px; border-width: 2.5px; }
.ui-spinner-lg { width: 48px; height: 48px; border-width: 3px; }
.ui-spinner-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* ── Detail Card (agent detail sections) ── */
.ui-detail-card {
    border-radius: 12px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    padding: 16px;
    margin-bottom: 12px;
}
.ui-detail-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.ui-detail-card-icon {
    color: var(--text-muted);
    display: flex;
    align-items: center;
}
.ui-detail-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* ── Channel Row ── */
.ui-channel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ui-channel-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ui-channel-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ui-channel-icon svg,
.ui-channel-icon span { width: 14px; height: 14px; }
.ui-channel-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-strong);
}
.ui-channel-sub {
    font-size: 0.625rem;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   DEBUG DASHBOARD
   ══════════════════════════════════════════════════════════════════════════════ */

/* -- Debug overlay (slide-in drawer from right) -- */
.debug-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 600px;
    max-width: 90vw;
    z-index: 9999;
    background: var(--bg-0);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -8px 0 40px rgba(0,0,0,0.25);
    border-left: 1px solid var(--border);
    transform: translateX(0);
    transition: transform 0.25s ease;
}
[data-theme="light"] .debug-overlay {
    box-shadow: -8px 0 30px rgba(0,0,0,0.1);
}
.debug-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,0.3);
}
.debug-overlay-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
    flex-shrink: 0;
}
.debug-overlay-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-strong);
}
.debug-overlay-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.debug-overlay-close:hover { background: var(--bg-2); color: var(--text-strong); }
.debug-overlay-body {
    flex: 1;
    overflow-y: auto;
}

/* -- Header debug button badge -- */
.debug-header-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 0.5rem;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    border-radius: 6px;
    padding: 0 4px;
    line-height: 1.4;
    min-width: 14px;
    text-align: center;
}
.header-ctrl-btn { position: relative; }

/* -- Nav badge -- */
.debug-nav-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    padding: 1px 6px;
    margin-left: auto;
    line-height: 1.4;
}

/* -- Filters -- */
.debug-filters {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-1);
}
.debug-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.debug-filter-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}
.debug-pill-group { display: flex; gap: 4px; }
.debug-pill {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.debug-pill:hover { border-color: var(--text-muted); color: var(--text-strong); }
.debug-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
}

/* -- Stats -- */
.debug-stats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.debug-stat { display: flex; align-items: center; gap: 4px; }
.debug-stat-num { font-weight: 700; color: var(--text-strong); }
.debug-stat-portal { color: #2563eb; }
.debug-stat-chatbot { color: #8b5cf6; }
.debug-stat-agent {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-2);
    margin: 0 2px;
}
.debug-stat-sep { color: var(--border); }

/* -- Buttons -- */
.debug-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.debug-btn:hover { border-color: var(--text-muted); color: var(--text-strong); }
.debug-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.debug-btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.debug-btn-danger { color: #ef4444; }
.debug-btn-danger:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; }
.debug-btn-secondary { background: var(--bg-0); }
.debug-btn-sm { font-size: 0.7rem; padding: 4px 10px; }

/* -- Error list -- */
.debug-error-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.debug-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.debug-error-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-0);
    overflow: hidden;
    transition: border-color 0.15s;
}
.debug-error-row:hover { border-color: var(--text-muted); }
.debug-error-row.expanded { border-color: var(--primary); }

/* -- Summary row -- */
.debug-error-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    gap: 12px;
    min-height: 42px;
}
.debug-error-summary:hover { background: var(--bg-1); }
.debug-error-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.debug-error-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* -- Badges -- */
.debug-status-badge {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-mono);
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text-muted);
    white-space: nowrap;
}
.debug-status-4xx { background: rgba(245,158,11,0.15); color: #f59e0b; }
.debug-status-5xx { background: rgba(239,68,68,0.15); color: #ef4444; }
.debug-status-js { background: rgba(168,85,247,0.15); color: #a855f7; }
.debug-status-net { background: rgba(107,114,128,0.2); color: #9ca3af; }

.debug-app-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.debug-app-portal { background: rgba(37,99,235,0.12); color: #60a5fa; }
.debug-app-chatbot { background: rgba(139,92,246,0.12); color: #a78bfa; }
.debug-app-unknown { background: var(--bg-2); color: var(--text-muted); }

.debug-type-badge {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-2);
    color: var(--text-muted);
}

.debug-method {
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.debug-method-GET { color: #22c55e; }
.debug-method-POST { color: #3b82f6; }
.debug-method-PUT { color: #f59e0b; }
.debug-method-DELETE { color: #ef4444; }
.debug-method-PATCH { color: #a855f7; }

.debug-endpoint {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.debug-corr {
    font-size: 0.62rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    opacity: 0.7;
}
.debug-duration {
    font-size: 0.65rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.debug-time {
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.debug-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.debug-copy-btn:hover { background: var(--bg-2); color: var(--text-strong); }
.debug-chevron { color: var(--text-muted); flex-shrink: 0; }

/* -- Detail panel -- */
.debug-error-detail {
    padding: 14px 14px 14px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.debug-detail-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.debug-detail-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.debug-detail-value {
    font-size: 0.78rem;
    color: var(--text-secondary);
    word-break: break-all;
}
.debug-detail-value code {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: var(--bg-2);
    padding: 2px 6px;
    border-radius: 4px;
}
.debug-detail-error {
    color: #ef4444;
    font-weight: 500;
}
.debug-detail-pre {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-secondary);
}
.debug-detail-stack {
    color: var(--text-muted);
    font-size: 0.65rem;
    max-height: 150px;
}
.debug-detail-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* -- Group count badge -- */
.debug-count-badge {
    font-size: 0.62rem;
    font-weight: 700;
    font-family: var(--font-mono);
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    padding: 2px 7px;
    border-radius: 9px;
    white-space: nowrap;
}

/* -- Group toggle button active state -- */
.debug-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
}

/* -- Occurrences timeline -- */
.debug-occ-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-0);
}
.debug-occ-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--border);
}
.debug-occ-row:last-child { border-bottom: none; }
.debug-occ-time {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.debug-occ-date {
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* -- CloudWatch log lookup -- */
.debug-cw-container { margin-top: 8px; }
.debug-cw-btn { margin-bottom: 4px; }
.debug-cw-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 12px 0;
}
.debug-cw-error {
    font-size: 0.75rem;
    color: #ef4444;
    padding: 8px 0;
}
.debug-cw-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 8px 0;
}
.debug-cw-results {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.debug-cw-header {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 8px 12px;
    background: var(--bg-2);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.debug-cw-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}
.debug-cw-row:last-child { border-bottom: none; }
.debug-cw-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.debug-cw-ts {
    font-size: 0.65rem;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-secondary);
}
.debug-cw-stream {
    font-size: 0.6rem;
    color: var(--text-muted);
    opacity: 0.6;
}
.debug-cw-msg {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
    margin: 0;
}

/* -- Source indicator -- */
.debug-source-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}
.debug-source-api { background: rgba(34,197,94,0.12); color: #22c55e; }
.debug-source-local { background: rgba(245,158,11,0.12); color: #f59e0b; }
.debug-source-none { background: rgba(107,114,128,0.12); color: #9ca3af; }

/* -- Error row focus visible -- */
.debug-error-summary:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    border-radius: 8px;
}

@keyframes migrate-spin {
    to { transform: rotate(360deg); }
}
.migrate-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #3b82f630;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: migrate-spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── Datasource Status Badges (tool card) ── */

.ds-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 5px;
    white-space: nowrap;
}
.ds-status-badge--mock {
    background: rgba(245,158,11,0.1);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
}
.ds-status-badge--ddb {
    background: rgba(16,185,129,0.06);
    color: #10b981;
    border: 1px solid rgba(16,185,129,0.2);
}
.ds-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Deploy Mock Warning Banner ── */

.deploy-mock-warning {
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(245,158,11,0.04);
    border: 1px solid rgba(245,158,11,0.2);
    margin-bottom: 10px;
}

/* ── Deploy summary mock tool badge ── */

.summary-tool-badge--mock {
    background: rgba(245,158,11,0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245,158,11,0.25);
    font-weight: 600;
}

/* ── DynamoDB Action Buttons (verify + seed) ── */

.ddb-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.76rem;
    font-weight: 600;
    font-family: var(--font-sans);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid;
}
.ddb-action-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}
.ddb-action-btn--verify {
    color: #10b981;
    background: rgba(16,185,129,0.06);
    border-color: rgba(16,185,129,0.2);
}
.ddb-action-btn--verify:hover {
    background: rgba(16,185,129,0.12);
    border-color: rgba(16,185,129,0.35);
}
.ddb-action-btn--seed {
    color: #3b82f6;
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.2);
}
.ddb-action-btn--seed:hover {
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.35);
}

/* ── Verification Results ── */

.verify-result-ok,
.verify-result-fail {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
}
.verify-result-ok {
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.2);
}
.verify-result-fail {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
}

/* ── Web Config Sections (Chatbot Customization) ── */

.web-config-section { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.web-config-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; user-select: none; font-size: 0.82rem; font-weight: 600; color: var(--text-strong); transition: background 0.15s; }
.web-config-section-header:hover { background: rgba(255,255,255,0.02); }
.web-config-section-header svg { width: 14px; height: 14px; color: var(--text-muted); transition: transform 0.2s; }
.web-config-section-header.collapsed svg { transform: rotate(-90deg); }
.web-config-section-body { padding: 14px; border-top: 1px solid var(--border); }
.web-config-section-body.collapsed { display: none; }

/* Color picker combo (legacy) */
.color-picker-combo { display: flex; align-items: center; gap: 8px; }
.color-picker-combo input[type="color"] { width: 36px; height: 36px; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; padding: 2px; background: var(--bg-1); }
.color-picker-combo input[type="text"] { flex: 1; }

/* Enhanced color picker with swatch */
.color-picker-enhanced { display: flex; align-items: center; gap: 8px; }
.color-picker-swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--border); cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; flex-shrink: 0; }
.color-picker-swatch:hover { border-color: var(--text-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.color-picker-swatch input[type="color"] { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); border: none; cursor: pointer; padding: 0; }
.color-picker-swatch::after { content: ''; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }

/* Avatar upload zone */
.avatar-upload-zone { width: 40px; height: 40px; border: 2px dashed var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; flex-shrink: 0; transition: border-color 0.15s; }
.avatar-upload-zone:hover { border-color: var(--text-muted); }
.avatar-upload-zone img { width: 100%; height: 100%; object-fit: cover; }

/* Radio card group */
.radio-card-group { display: flex; gap: 6px; }
.radio-card { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; text-align: center; cursor: pointer; font-size: 0.75rem; transition: all 0.15s; color: var(--text-muted); }
.radio-card:hover { border-color: var(--text-muted); }
.radio-card.active { border-color: rgba(37,99,235,0.4); background: rgba(37,99,235,0.06); color: var(--text-strong); }

/* Chat preview — phone device mockup */
.chat-preview-container { display: flex; flex-direction: column; align-items: center; }
.chat-preview-device { width: 280px; border-radius: 36px; border: 3px solid #3d3d3d; background: #1a1a1a; padding: 7px; box-shadow: 0 16px 56px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.08); position: relative; }
[data-theme="light"] .chat-preview-device { border-color: #aaa; background: #c0c0c0; box-shadow: 0 16px 56px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08); }
/* Legacy notch (hidden — replaced by Dynamic Island) */
.chat-preview-notch { display: none; }
/* Dynamic Island — modern iPhone style */
.chat-preview-dynamic-island {
    width: 84px; height: 22px;
    background: #000; border-radius: 20px;
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%); z-index: 2;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.04);
}
[data-theme="light"] .chat-preview-dynamic-island {
    background: #1a1a1a;
}
.chat-preview-screen { border-radius: 30px; overflow: hidden; height: 590px; display: flex; flex-direction: column; position: relative; }
.chat-preview-statusbar { height: 36px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 24px 5px; font-size: 0.6rem; font-weight: 600; flex-shrink: 0; }
.chat-preview-home-indicator { width: 110px; height: 4px; border-radius: 2px; margin: 7px auto 9px; flex-shrink: 0; }
/* Chat frame inside device */
.chat-preview-frame { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.chat-preview-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-shrink: 0; }
.chat-preview-messages { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.chat-preview-messages::-webkit-scrollbar { width: 0; }
.chat-preview-msg { display: flex; gap: 5px; align-items: flex-start; }
.chat-preview-msg.user { justify-content: flex-end; }
.chat-preview-bubble { max-width: 88%; padding: 7px 11px; font-size: 0.68rem; line-height: 1.45; word-break: break-word; }
.chat-preview-input { display: flex; align-items: center; gap: 5px; padding: 6px 10px; flex-shrink: 0; }
.chat-preview-input input { flex: 1; background: transparent; border: 1px solid; border-radius: 9px; padding: 6px 9px; font-size: 0.65rem; outline: none; }
.chat-preview-input button { width: 26px; height: 26px; border-radius: 7px; border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: default; flex-shrink: 0; }
.chat-preview-input button svg { width: 13px; height: 13px; }
.chat-preview-watermark { text-align: center; padding: 3px 6px; font-size: 0.52rem; flex-shrink: 0; }
.chat-preview-label {
    text-align: center; font-size: 0.65rem; font-weight: 600; color: var(--text-muted);
    padding: 4px 12px 8px; letter-spacing: 0.05em; text-transform: uppercase;
    position: relative;
}
/* Rail connector dash from left rail to label */
.chat-preview-label::before {
    content: '';
    position: absolute;
    left: -20px; top: 50%;
    width: 12px; height: 2px;
    background: linear-gradient(to right, rgba(228,121,17,0.45), rgba(228,121,17,0.1));
    transform: translateY(-50%);
}
/* Dot on the rail line */
.chat-preview-label::after {
    content: '';
    position: absolute;
    left: -24px; top: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(228,121,17,0.7);
    box-shadow: 0 0 6px rgba(228,121,17,0.3);
    transform: translateY(-50%);
}
/* Light theme: stronger rail for contrast */
[data-theme="light"] .ch-split-preview {
    border-image: linear-gradient(to bottom, rgba(228,121,17,0.6) 0%, var(--border) 80px, var(--border) calc(100% - 80px), transparent 100%) 1;
}
[data-theme="light"] .chat-preview-label::before {
    background: linear-gradient(to right, rgba(228,121,17,0.6), rgba(228,121,17,0.15));
}
[data-theme="light"] .chat-preview-label::after {
    background: rgba(228,121,17,0.85);
    box-shadow: 0 0 6px rgba(228,121,17,0.4);
}

/* ── Preview mode toggle ── */
.chat-preview-mode-toggle { margin-bottom: 6px; justify-content: center; }
.chat-preview-mode-toggle .te-seg-btn { display: flex; align-items: center; gap: 5px; }
.chat-preview-mode-desc {
    text-align: center; font-size: 0.62rem; color: var(--text-muted);
    margin-bottom: 14px; letter-spacing: 0.02em; opacity: 0.7;
}
/* Cross-fade transition */
.chat-preview-container { transition: opacity 0.15s ease, transform 0.15s ease; }
.chat-preview-container.preview-fade-out { opacity: 0; transform: translateY(6px); }

/* ── Browser frame (Website preview) ── */
.chat-preview-browser {
    width: 300px; margin: 0 auto;
    border-radius: 10px; overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04);
}
.chat-preview-browser-tab-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px 0;
    background: var(--bg-3, var(--bg-2));
}
.chat-preview-browser-tab {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 6px 6px 0 0;
    background: var(--bg-2); color: var(--text-primary);
    font-size: 0.58rem; font-weight: 500;
    border: 1px solid var(--border); border-bottom: none;
    max-width: 140px; min-width: 0;
    position: relative; top: 1px;
}
.chat-preview-browser-tab-new {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px;
    color: var(--text-muted);
}
.chat-preview-browser-dots {
    display: flex; gap: 5px; flex-shrink: 0;
}
.chat-preview-browser-dots span {
    width: 8px; height: 8px; border-radius: 50%;
}
.chat-preview-browser-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
.chat-preview-browser-nav {
    display: flex; gap: 4px; align-items: center; flex-shrink: 0;
    color: var(--text-muted);
}
.chat-preview-browser-address {
    flex: 1; display: flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 6px;
    background: var(--bg-1, var(--bg-surface));
    border: 1px solid var(--border);
    min-width: 0;
}
.chat-preview-browser-viewport {
    height: 510px; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Widget site mockup (Widget preview) ── */
.chat-preview-widget-site {
    width: 330px; height: 640px; margin: 0 auto;
    border-radius: 10px; overflow: hidden;
    background: var(--bg-1, var(--bg-surface));
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04);
    display: flex; flex-direction: column;
    position: relative;
}
.chat-preview-widget-nav {
    display: flex; align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}
.chat-preview-widget-body {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; padding: 12px 12px 56px;
    gap: 8px;
}
.chat-preview-widget-content {
    padding: 0;
}
.chat-preview-widget-hero {
    padding: 6px 4px 10px;
}
.chat-preview-widget-cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 0 4px;
}
.chat-preview-widget-card {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-2);
}
.chat-preview-widget-popup {
    flex: 1; display: flex; flex-direction: column;
    min-height: 0;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
}
.chat-preview-widget-fab {
    width: 42px; height: 42px; border-radius: 50%;
    position: absolute; bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.55;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
    cursor: default;
    transition: opacity 0.2s;
}

/* ── Light theme overrides for preview frames ── */
[data-theme="light"] .chat-preview-browser {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .chat-preview-browser-tab-bar {
    background: #e8e8ea;
}
[data-theme="light"] .chat-preview-browser-tab {
    background: #fff; border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .chat-preview-browser-toolbar {
    background: #fff;
}
[data-theme="light"] .chat-preview-widget-site {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    background: #f8f9fa;
}
[data-theme="light"] .chat-preview-widget-nav {
    background: #fff;
}
[data-theme="light"] .chat-preview-widget-card {
    background: #fff;
}
[data-theme="light"] .chat-preview-widget-popup {
    box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
}
[data-theme="light"] .chat-preview-widget-fab {
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

/* ── Legal content modal ── */
.legal-content h3 { font-size: 1rem; font-weight: 600; margin: 20px 0 8px; color: var(--text-strong); }
.legal-content h3:first-child { margin-top: 0; }
.legal-content p { margin: 0 0 12px; }
.legal-content ul { margin: 0 0 12px; padding-left: 20px; }
.legal-content li { margin-bottom: 4px; }
.legal-content a { color: var(--primary, #3b82f6); text-decoration: underline; }

/* ── OTP Email Chips ── */
.otp-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    cursor: text;
    min-height: 40px;
    align-items: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.otp-chips-container:focus-within {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}
.otp-chips-input {
    border: none;
    background: transparent;
    outline: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: var(--font-mono);
    min-width: 120px;
    flex: 1;
    padding: 2px 0;
}
.otp-chips-input::placeholder {
    color: var(--placeholder);
}
.otp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    white-space: nowrap;
    line-height: 1.4;
}
.otp-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    transition: all 0.15s;
}
.otp-chip-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ══════════════════════════════════════════════════════════════════════════
   Tool Editor PRO Redesign — te-* namespace
   Split layout (editor + live preview panel), section cards,
   segmented controls, datasource-colored accents.
   ══════════════════════════════════════════════════════════════════════════ */

.te-root {
    border-radius: 16px;
    background: var(--bg-1);
    border: 1px solid var(--border-input);
    overflow: hidden;
    animation: fadeUp 0.2s ease-out;
}

/* ── Inline editor (replaces full-viewport mode) ── */
.te-root--inline {
    border-radius: 12px;
    margin-top: 12px;
}
.te-header--inline {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(auto, max-content);
    align-items: center;
    gap: 12px;
    padding: 14px 20px 14px 20px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ds-color, #2563EB) 6%, transparent) 0%,
        transparent 55%);
    border-bottom: 1px solid var(--border);
}
/* ── Memory Step ── */
.mem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.mem-card {
    position: relative;
    padding: 22px 20px 20px;
    border-radius: 13px;
    border: 1.5px solid var(--border-input);
    background: var(--bg-0);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    outline: none;
}
.mem-card:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 2%, var(--bg-0));
}
.mem-card--active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, var(--bg-0));
    box-shadow: 0 0 0 1px var(--primary-ring, rgba(99,102,241,0.2));
}
.mem-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mem-card-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mem-icon-session {
    background: rgba(100,116,139,0.1);
    color: #64748b;
}
.mem-icon-persistent {
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
}
.mem-card-checkmark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s, transform 0.18s;
}
.mem-card-checkmark--visible {
    opacity: 1;
    transform: scale(1);
}
.mem-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.mem-card-name {
    font-size: 0.93rem;
    font-weight: 700;
    color: var(--text-strong);
}
.mem-card-badge {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.mem-badge-neutral {
    background: var(--bg-3);
    color: var(--text-muted);
}
.mem-badge-aws {
    background: rgba(255,153,0,0.13);
    color: #c47c0a;
}
.mem-card-desc {
    font-size: 0.79rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 14px;
}
.mem-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.mem-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.79rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.mem-feature-check {
    flex-shrink: 0;
    margin-top: 1px;
    color: #10b981;
    display: flex;
}
/* TTL picker — inside persistent card */
.mem-ttl-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.mem-ttl-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 9px;
}
.mem-ttl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.mem-ttl-pill {
    padding: 7px 4px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    font-family: var(--font-sans);
    line-height: 1.2;
}
.mem-ttl-pill:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: rgba(124,58,237,0.05);
}
.mem-ttl-pill--active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}
/* Info banner */
.mem-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
    max-width: 720px;
}
.mem-info-banner svg { flex-shrink: 0; margin-top: 1px; }
@media (max-width: 600px) {
    .mem-grid { grid-template-columns: 1fr; }
    .mem-ttl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Comportamiento Step (2-column settings layout) ─────────────────────── */
.bvr-card { padding: 0 !important; overflow: hidden; }
.bvr-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 540px;
}
.bvr-nav {
    border-right: 1px solid var(--border);
    background: var(--bg-0);
    display: flex;
    flex-direction: column;
    padding: 0;
}
.bvr-nav-header {
    padding: 28px 20px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.bvr-nav-title {
    font-size: 15px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px;
}
.bvr-nav-sub {
    font-size: 11.5px; color: var(--text-muted); line-height: 1.5;
}
.bvr-nav-items { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; }
.bvr-nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    background: none; border: none; width: 100%; text-align: left;
    color: var(--text-muted); font-size: 13px; font-weight: 500;
    transition: all 0.15s;
}
.bvr-nav-item:hover { background: var(--bg-1); color: var(--text-strong); }
.bvr-nav-item--active {
    background: var(--bg-2); color: var(--text-strong); font-weight: 600;
}
.bvr-nav-icon {
    width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.bvr-nav-icon--memory   { background: rgba(99,102,241,0.12); color: #6366f1; }
.bvr-nav-icon--kb       { background: rgba(16,185,129,0.12); color: #10b981; }
.bvr-nav-icon--guardrails { background: rgba(59,130,246,0.12); color: #3b82f6; }
.bvr-nav-label { flex: 1; }
.bvr-nav-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
}
.bvr-panel {
    padding: 28px 32px; overflow-y: auto; max-height: 80vh;
    background: var(--bg-1);
}
.bvr-panel-header { margin-bottom: 24px; }
.bvr-panel-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; color: var(--text-strong); margin-bottom: 6px;
}
.bvr-panel-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Responsive */
@media (max-width: 768px) {
    .bvr-layout { grid-template-columns: 1fr; }
    .bvr-nav { border-right: none; border-bottom: 1px solid var(--border); }
    .bvr-nav-items { flex-direction: row; padding: 8px; }
    .bvr-nav-item { flex-direction: column; gap: 4px; padding: 8px; font-size: 11px; }
    .bvr-nav-icon { width: 28px; height: 28px; }
}

/* ── Context Step Tabs (legacy — kept for any residual references) ────────── */
.ctx-tab-bar {
    display: flex; gap: 2px; margin-bottom: 24px;
    border-bottom: 2px solid var(--border);
}
.ctx-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px; font-size: 13px; font-weight: 500;
    color: var(--text-muted); background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.ctx-tab:hover { color: var(--text-strong); }
.ctx-tab--active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.ctx-tab-badge {
    padding: 1px 6px; border-radius: 99px; font-size: 10px; font-weight: 700;
    background: #10b981; color: white;
}

/* ── Knowledge Base Form ─────────────────────────────────────────────────── */
.kb-root { display: flex; flex-direction: column; gap: 16px; }

.kb-enable-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; background: var(--bg-2);
    border: 1px solid var(--border-input); border-radius: 12px; gap: 16px;
}
.kb-enable-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.kb-book-icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    display: flex; align-items: center; justify-content: center; color: #34d399;
}
.kb-enable-title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.kb-enable-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.kb-aws-badge {
    padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600;
    background: #fff3cd; color: #92400e; border: 1px solid #fbbf24;
    white-space: nowrap; flex-shrink: 0;
}
.kb-section { display: flex; flex-direction: column; gap: 6px; }
.kb-label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.kb-input, .kb-textarea {
    width: 100%; padding: 10px 14px; border-radius: 8px;
    border: 1.5px solid var(--border-input); background: var(--bg-2);
    color: var(--text-strong); font-size: 13px; font-family: inherit;
    outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.kb-input:focus, .kb-textarea:focus { border-color: #10b981; outline: none; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.kb-input--empty { border-color: #fbbf24; }
.kb-input--error, .kb-textarea.kb-input--error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.15) !important; }
.kb-textarea { resize: vertical; min-height: 72px; }
.kb-hint {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-muted);
}
.kb-hint svg { flex-shrink: 0; opacity: 0.7; }
.kb-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.kb-pill {
    padding: 5px 14px; border-radius: 8px; font-size: 12px; font-weight: 500;
    border: 1.5px solid var(--border-input); background: var(--bg-2);
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.kb-pill:hover { border-color: #10b981; color: var(--text-strong); }
.kb-pill--active { background: #10b981; border-color: #10b981; color: white; }
.kb-info-banner {
    display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
    color: #14532d; font-size: 13px; line-height: 1.5;
}
.kb-info-banner svg { flex-shrink: 0; margin-top: 1px; }

/* ── Guardrails Step ─────────────────────────────────────────────────────── */
.gr-root { display: flex; flex-direction: column; gap: 16px; }

/* Enable Card */
.gr-enable-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; background: var(--bg-2);
    border: 1px solid var(--border-input); border-radius: 12px; gap: 16px;
}
.gr-enable-left { display: flex; align-items: center; gap: 16px; flex: 1; }
.gr-shield-icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2849 100%);
    display: flex; align-items: center; justify-content: center; color: #60a5fa;
}
.gr-enable-title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.gr-enable-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.gr-aws-badge {
    padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600;
    background: #fff3cd; color: #92400e; border: 1px solid #fbbf24;
    white-space: nowrap; flex-shrink: 0;
}

/* Toggle */
.gr-toggle { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.gr-toggle input { display: none; }
.gr-toggle-track {
    width: 44px; height: 24px; background: var(--border-input); border-radius: 12px;
    position: relative; transition: background 0.2s;
}
.gr-toggle input:checked ~ .gr-toggle-track { background: #2563eb; }
.gr-toggle-thumb {
    position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
    background: white; border-radius: 50%; transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.gr-toggle input:checked ~ .gr-toggle-track .gr-toggle-thumb { transform: translateX(20px); }

/* Disabled hint */
.gr-disabled-hint {
    display: flex; align-items: center; gap: 8px; padding: 16px;
    background: var(--bg-2); border-radius: 8px;
    color: var(--text-muted); font-size: 13px;
    border: 1px solid var(--border-input);
}

/* Section */
.gr-section {
    background: var(--bg-2); border: 1px solid var(--border-input);
    border-radius: 12px; padding: 20px;
    display: flex; flex-direction: column; gap: 16px;
}
.gr-section-header { display: flex; align-items: flex-start; gap: 12px; }
.gr-section-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.gr-section-icon--red    { background: #fef2f2; color: #dc2626; }
.gr-section-icon--orange { background: #fff7ed; color: #ea580c; }
.gr-section-icon--yellow { background: #fefce8; color: #ca8a04; }
.gr-section-icon--purple { background: #f5f3ff; color: #7c3aed; }
.gr-section-title    { font-size: 14px; font-weight: 600; color: var(--text-strong); }
.gr-section-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Content Filters */
.gr-filters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gr-filter-card {
    background: var(--bg-1); border: 1px solid var(--border-input);
    border-radius: 10px; padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
}
.gr-filter-header { display: flex; flex-direction: column; gap: 2px; }
.gr-filter-label { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.gr-filter-desc  { font-size: 11px; color: var(--text-muted); }
.gr-filter-row   { display: flex; align-items: center; gap: 8px; }
.gr-filter-dir   { font-size: 11px; color: var(--text-muted); width: 52px; flex-shrink: 0; font-weight: 500; }
.gr-pills        { display: flex; gap: 4px; flex-wrap: wrap; }
.gr-pill {
    padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 500;
    border: 1px solid var(--border-input); background: var(--bg-1);
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.gr-pill:hover { border-color: var(--text-muted); }
.gr-pill--active { color: white; border-color: transparent; background: var(--text-muted); }
.gr-pill--active.gr-pill--low    { background: #d97706; }
.gr-pill--active.gr-pill--medium { background: #ea580c; }
.gr-pill--active.gr-pill--high   { background: #dc2626; }

/* Denied Topics */
.gr-topics-list { display: flex; flex-direction: column; gap: 6px; }
.gr-topic-chip {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--bg-1); border: 1px solid var(--border-input); border-radius: 8px;
}
.gr-topic-name { font-size: 13px; font-weight: 600; color: var(--text-strong); min-width: 80px; }
.gr-topic-def  { font-size: 12px; color: var(--text-muted); flex: 1; }
.gr-topic-remove {
    width: 22px; height: 22px; border-radius: 4px; border: none;
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.gr-topic-remove:hover { background: #fef2f2; color: #dc2626; }
.gr-topic-form { display: flex; flex-direction: column; gap: 8px; }
.gr-input, .gr-textarea {
    width: 100%; padding: 8px 12px; border-radius: 8px;
    border: 1.5px solid var(--border-input); background: var(--bg-2);
    color: var(--text-strong); font-size: 13px; font-family: inherit;
    outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.gr-input:focus, .gr-textarea:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
.gr-textarea { resize: vertical; min-height: 60px; }
.gr-add-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px;
    border-radius: 8px; border: 1px solid #2563eb; background: transparent;
    color: #2563eb; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background 0.15s; align-self: flex-start;
}
.gr-add-btn:hover { background: #eff6ff; }

/* Managed Words */
.gr-managed-row { margin-bottom: 2px; }
.gr-managed-label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.gr-managed-check {
    width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--border-input);
    background: var(--bg-2); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; flex-shrink: 0; margin-top: 2px;
}
.gr-managed-check--on { background: #2563eb; border-color: #2563eb; }
.gr-managed-title { font-size: 13px; font-weight: 600; color: var(--text-strong); }
.gr-managed-desc  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Word Tag Input */
.gr-words-area {
    background: var(--bg-2); border: 1.5px solid var(--border-input);
    border-radius: 8px; padding: 8px 12px; min-height: 42px;
}
.gr-words-tags   { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gr-word-tag {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
    background: var(--bg-1); border: 1px solid var(--border-input);
    border-radius: 99px; font-size: 12px; color: var(--text-strong);
}
.gr-word-tag button {
    border: none; background: transparent; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center; padding: 0;
}
.gr-word-tag button:hover { color: #dc2626; }
.gr-word-input {
    border: none; background: transparent; outline: none; font-size: 13px;
    color: var(--text-strong); min-width: 120px; flex: 1; padding: 2px 0;
}

/* PII Grid */
.gr-pii-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gr-pii-card {
    background: var(--bg-1); border: 1px solid var(--border-input);
    border-radius: 10px; padding: 12px;
    display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s;
}
.gr-pii-card--on { border-color: #7c3aed; }
.gr-pii-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gr-pii-label { font-size: 12px; font-weight: 600; color: var(--text-strong); }
.gr-pii-toggle { display: inline-flex; cursor: pointer; }
.gr-pii-toggle input { display: none; }
.gr-pii-track {
    width: 30px; height: 17px; background: var(--border-subtle);
    border-radius: 9px; position: relative; transition: background 0.2s;
}
.gr-pii-toggle input:checked ~ .gr-pii-track { background: #7c3aed; }
.gr-pii-thumb {
    position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
    background: white; border-radius: 50%; transition: transform 0.2s;
}
.gr-pii-toggle input:checked ~ .gr-pii-track .gr-pii-thumb { transform: translateX(13px); }
.gr-pii-action { display: flex; gap: 4px; }
.gr-pii-action-btn {
    flex: 1; padding: 3px 0; border-radius: 6px; font-size: 11px; font-weight: 500;
    border: 1px solid var(--border-subtle); background: transparent;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.gr-pii-action-btn--active { background: #7c3aed; border-color: #7c3aed; color: white; }

/* Info Banner */
.gr-info-banner {
    display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
    color: #1e40af; font-size: 13px; line-height: 1.5;
}
.gr-info-banner svg { flex-shrink: 0; margin-top: 1px; }

@media (max-width: 640px) {
    .gr-filters-grid { grid-template-columns: 1fr; }
    .gr-pii-grid     { grid-template-columns: repeat(2, 1fr); }
    .gr-enable-left  { flex-wrap: wrap; }
}

.te-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.te-back-btn:hover {
    background: var(--bg-3);
    color: var(--text-strong);
}
.te-header-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    height: 32px;
    border-radius: 8px;
    border: none;
    white-space: nowrap;
    background: var(--primary);
    color: var(--primary-text);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.te-header-save:hover {
    background: var(--primary-hover);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.te-body-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.te-body-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.te-body-action:hover {
    background: var(--bg-2);
    color: var(--text-secondary);
}
.te-inline-body {
    padding: 0 20px 20px;
    overflow-y: auto;
    max-height: 60vh;
}
.te-inline-section {
    border-bottom: 1px solid var(--border);
}
.te-inline-section:last-child {
    border-bottom: none;
}
.te-inline-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.te-inline-section-header:hover {
    opacity: 0.8;
}
.te-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
}
.te-inline-section-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ds-color, #2563EB) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--ds-color, #2563EB) 30%, transparent);
    color: var(--ds-color, #2563EB);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.te-inline-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.te-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ds-color, #2563EB) 15%, transparent);
    color: var(--ds-color, #2563EB);
    font-size: 0.68rem;
    font-weight: 700;
}
.te-section-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.te-inline-section-header.collapsed .te-section-chevron {
    transform: rotate(-90deg);
}
.te-inline-section-body {
    padding: 0 0 16px 32px;
}
.te-inline-section-body.collapsed {
    display: none;
}

/* ── Header ── */
.te-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ds-color, #2563EB) 6%, transparent) 0%,
        transparent 55%);
    border-bottom: 1px solid var(--border);
}
.te-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.te-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    background: color-mix(in srgb, var(--ds-color, #2563EB) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ds-color, #2563EB) 22%, transparent);
    flex-shrink: 0;
}
.te-header-text { min-width: 0; flex: 1; }
.te-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
    margin-bottom: 3px;
}
.te-header-name {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.te-header-name--empty {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 500;
}
.te-header-ds-chip {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 600;
}
.te-header-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.te-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}
.te-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.te-header-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-strong);
    background: var(--bg-3);
}
.te-header-btn--danger:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
.te-header-close { margin-left: 6px; }
.te-header-close:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* ── Split layout (editor + preview) ── */
.te-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    min-height: 520px;
}
.te-editor {
    padding: 20px 28px 24px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.te-preview {
    padding: 22px 22px;
    background: var(--bg-0);
    overflow-y: auto;
    max-height: calc(100vh - 220px);
    position: sticky;
    top: 0;
    align-self: stretch;
}
@media (max-width: 1200px) {
    .te-split { grid-template-columns: 1fr; }
    .te-editor { border-right: none; border-bottom: 1px solid var(--border); }
    .te-preview { position: static; max-height: none; }
}


/* ── Stepper override ── */
.te-stepper {
    padding: 4px 0 22px !important;
    margin-bottom: 0 !important;
}
.te-step-body {
    flex: 1;
    min-height: 0;
}

/* ── Navigation ── */
.te-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.te-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
}
.te-nav-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-strong);
}
.te-nav-btn--primary {
    background: var(--ds-color, #10b981);
    border-color: var(--ds-color, #10b981);
    color: #fff;
    font-weight: 600;
}
.te-nav-btn--primary:hover {
    filter: brightness(1.1);
    color: #fff;
}

/* ── Section card ── */
.te-section {
    border: 1px solid var(--border-input);
    border-radius: 14px;
    background: var(--bg-0);
    margin-bottom: 16px;
    overflow: hidden;
}
.te-section:last-child { margin-bottom: 0; }
.te-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
}
.te-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.te-section-header-text { flex: 1; min-width: 0; }
.te-section-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
    line-height: 1.3;
}
.te-section-desc {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin: 2px 0 0;
    line-height: 1.4;
}
.te-section-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.te-section-body { padding: 18px 20px; }
.te-section-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* ── Fields ── */
.te-field-group { display: flex; flex-direction: column; }
.te-field-label {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.te-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.te-field-label-row .te-field-label { margin-bottom: 0; }
.te-field-required { color: #ef4444; font-weight: 400; }
.te-field-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.72rem;
}
.te-field-counter {
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.te-field-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 5px 0 0;
    line-height: 1.4;
}
.te-field-error { font-size: 0.72rem; color: #ef4444; margin: 5px 0 0; }
.te-field-warning { font-size: 0.72rem; color: #facc15; margin: 5px 0 0; }
.te-field-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.te-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    outline: none;
    transition: all 0.15s;
    box-sizing: border-box;
}
.te-input:hover { border-color: var(--text-muted); }
.te-input:focus {
    border-color: var(--ds-color, #10b981);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color, #10b981) 18%, transparent);
}
.te-input::placeholder { color: var(--text-muted); opacity: 0.55; }
.te-input-mono {
    font-family: var(--font-mono);
    font-size: 0.83rem;
}
.te-input-lg {
    padding: 13px 16px;
    font-size: 0.88rem;
}
.te-textarea {
    resize: vertical;
    min-height: 82px;
    line-height: 1.5;
}

/* ── Datasource cards (Source step) ── */
.te-ds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .te-ds-grid { grid-template-columns: repeat(2, 1fr); } }
.te-ds-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 13px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: var(--font-sans);
    min-height: 76px;
}
.te-ds-card:hover {
    border-color: var(--text-muted);
    background: var(--bg-3);
    transform: translateY(-1px);
}
.te-ds-card.active {
    border-color: var(--ds-color);
    background: color-mix(in srgb, var(--ds-color) 9%, var(--bg-2));
    box-shadow: 0 0 0 1px var(--ds-color), 0 4px 18px color-mix(in srgb, var(--ds-color) 18%, transparent);
}
.te-ds-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: color-mix(in srgb, var(--ds-color) 13%, transparent);
    flex-shrink: 0;
    transition: background 0.15s;
}
.te-ds-card.active .te-ds-icon {
    background: color-mix(in srgb, var(--ds-color) 20%, transparent);
}
.te-ds-meta { flex: 1; min-width: 0; }
.te-ds-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 2px;
}
.te-ds-card.active .te-ds-label { color: var(--ds-color); }
.te-ds-sub {
    font-size: 0.73rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.te-ds-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ds-color);
    color: #fff;
}

/* ── Operation grid ── */
.te-op-grid { display: grid; gap: 8px; }
.te-op-btn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: var(--font-sans);
}
.te-op-btn input { display: none; }
.te-op-btn:hover {
    border-color: var(--text-muted);
    background: var(--bg-3);
}
.te-op-btn.active {
    border-color: var(--ds-color);
    background: color-mix(in srgb, var(--ds-color) 8%, var(--bg-2));
    box-shadow: 0 0 0 1px var(--ds-color);
}
.te-op-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-strong);
}
.te-op-btn.active .te-op-label { color: var(--ds-color); }
.te-op-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ── Segmented control (REST auth type) ── */
.te-segmented {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    background: var(--bg-2);
    border: 1px solid var(--border-input);
    border-radius: 10px;
}
.te-seg-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
}
.te-seg-btn:hover { color: var(--text-strong); }
.te-seg-btn.active {
    background: var(--bg-0);
    color: var(--ds-color, #2563EB);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.te-auth-body {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}

/* ── REST headers ── */
.te-header-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.te-header-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr 32px;
    gap: 8px;
    align-items: center;
}
.te-header-row-remove {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.te-header-row-remove:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
.te-empty-inline {
    padding: 16px;
    border: 1px dashed var(--border-input);
    border-radius: 10px;
    background: var(--bg-2);
    text-align: center;
}
.te-empty-inline p {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Buttons ── */
.te-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
}
.te-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-strong);
}
.te-btn:disabled { opacity: 0.4; pointer-events: none; }
.te-btn--test:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
}
.te-btn--verify {
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}
.te-btn--verify:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.14);
    border-color: #10b981;
    color: #10b981;
}
.te-btn--seed {
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}
.te-btn--seed:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.14);
    border-color: #3b82f6;
    color: #3b82f6;
}
.te-btn--add {
    background: var(--ds-color, #10b981);
    border-color: var(--ds-color, #10b981);
    color: #fff;
    font-weight: 600;
}
.te-btn--add:hover {
    filter: brightness(1.1);
    color: #fff;
    border-color: var(--ds-color, #10b981);
}

.te-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    border: 1px solid var(--border-input);
    background: transparent;
    color: var(--text-secondary);
}
.te-btn-ghost:hover {
    border-color: var(--text-muted);
    color: var(--text-strong);
    background: var(--bg-2);
}
.te-btn-ghost--primary {
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}
.te-btn-ghost--primary:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}
.te-btn-ghost--danger:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.te-btn-dashed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    border: 1px dashed var(--border-input);
    background: transparent;
    color: var(--text-muted);
}
.te-btn-dashed:hover {
    border-color: #10b981;
    color: #10b981;
}
.te-btn-dashed--danger:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.te-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Banner ── */
.te-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.te-banner--info {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.18);
}
.te-banner--neutral {
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.te-banner-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 2px;
}
.te-banner-desc {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ── Badge ── */
.te-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
    flex-shrink: 0;
}
.te-badge--amber {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.22);
}
.te-badge--muted {
    background: var(--bg-3);
    color: var(--text-muted);
}

/* ── Test / verify results ── */
.te-test-result { margin-top: 12px; }
.te-test-result:empty { display: none; }
.te-verify-result { margin-top: 12px; }
.te-verify-result:empty { display: none; }

/* ── Mock editor + preview ── */
.te-mock-editor {
    min-height: 220px !important;
    max-height: 440px;
    white-space: pre;
    tab-size: 2;
    font-size: 0.78rem !important;
}
.te-mock-preview {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-2);
    overflow: hidden;
}
.te-mock-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
}
.te-mock-preview-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.te-mock-preview-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.te-mock-preview-body {
    overflow-x: auto;
    max-width: 100%;
}
.te-mock-preview-table {
    width: 100%;
    font-size: 0.72rem;
    border-collapse: collapse;
    font-family: var(--font-mono);
    table-layout: fixed;
}
.te-mock-preview-table th {
    padding: 7px 12px;
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
}
.te-mock-preview-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.te-mock-preview-more {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 6px 14px;
    margin: 0;
    text-align: center;
}

/* ── Mock editable table ── */
.te-mock-edit-table {
    table-layout: auto;
}
.te-mock-edit-table th {
    white-space: nowrap;
    min-width: 80px;
}
.te-mock-edit-table td.te-mock-cell {
    padding: 0;
    max-width: none;
    overflow: visible;
}
.te-mock-cell-input {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 5px 12px;
    outline: none;
    min-width: 60px;
}
.te-mock-cell-input:focus {
    background: var(--bg-0);
    box-shadow: inset 0 0 0 1.5px var(--color-primary);
    border-radius: 3px;
}
.te-mock-cell--action {
    width: 36px;
    text-align: center;
}
.te-mock-del-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.te-mock-del-btn:hover {
    color: #ef4444;
    background: #ef444414;
}
.te-mock-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    border: 1.5px dashed var(--border-input);
    border-radius: 10px;
    background: var(--bg-2);
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    gap: 4px;
}
.te-mock-empty p { margin: 0; }
.te-mock-empty strong { color: var(--text-primary); }
.te-mock-json-toggle {
    margin-top: 12px;
}
.te-mock-json-toggle summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    padding: 4px 2px;
    width: fit-content;
    border-radius: 4px;
    list-style: none;
    outline: none;
}
.te-mock-json-toggle summary::-webkit-details-marker { display: none; }
.te-mock-json-toggle summary:hover { color: var(--text-primary); }
.te-mock-json-toggle[open] summary { color: var(--text-primary); margin-bottom: 8px; }

/* ── Empty state (params step) ── */
.te-empty-state {
    text-align: center;
    padding: 32px 16px;
    border: 1px dashed var(--border-input);
    border-radius: 12px;
    background: var(--bg-2);
}
.te-empty-state p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Params table wrapper ── */
.te-params-table-wrap {
    border: 1px solid var(--border-input);
    border-radius: 12px;
    background: var(--bg-2);
    padding: 14px 12px 10px;
    overflow-x: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   Integrations — Endpoint Search & Filter Bar
   ══════════════════════════════════════════════════════════════════════════ */
.integ-search-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.integ-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.integ-search-icon {
    position: absolute;
    left: 10px;
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}
.integ-search-input {
    width: 100%;
    padding: 9px 32px 9px 34px;
    border-radius: 9px;
    border: 1px solid var(--border-input);
    background: var(--bg-0);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: var(--font-sans);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.integ-search-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08);
    outline: none;
}
.integ-search-input::placeholder { color: var(--text-muted); }
.integ-search-clear {
    position: absolute;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: var(--bg-3);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    padding: 0;
}
.integ-search-clear:hover { background: var(--border-input); color: var(--text-strong); }

/* Method filter pills */
.integ-method-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.integ-method-pill {
    padding: 4px 11px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.12s;
    letter-spacing: 0.04em;
}
.integ-method-pill:hover {
    border-color: var(--pill-color, #8b5cf6);
    color: var(--pill-color, #8b5cf6);
    background: color-mix(in srgb, var(--pill-color, #8b5cf6) 6%, transparent);
}
.integ-method-pill.active {
    background: color-mix(in srgb, var(--pill-color, #8b5cf6) 12%, transparent);
    border-color: color-mix(in srgb, var(--pill-color, #8b5cf6) 35%, transparent);
    color: var(--pill-color, #8b5cf6);
}

/* Filter status bar */
.integ-filter-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(139,92,246,0.05);
    border: 1px solid rgba(139,92,246,0.18);
    margin-bottom: 10px;
}
.integ-filter-action-btn {
    font-size: 0.73rem;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-0);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.12s;
}
.integ-filter-action-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* ── Collapsible tag group headers ── */
.integ-tag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 1;
    transition: background 0.12s;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-strong);
    margin-bottom: 4px;
}
.integ-tag-header:hover { background: var(--bg-active); }

.integ-tag-chevron {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.18s ease;
}

.integ-tag-body {
    padding: 2px 0 4px 0;
}

/* ── Preset quick-select buttons ── */
.integ-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.integ-presets-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 2px;
}
.integ-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: all 0.12s;
}
.integ-preset-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.06);
}

/* ── Count badge inside method pill ── */
.integ-pill-cnt {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.08);
    line-height: 1.3;
}

/* ── Connector hub grid ── */
.integ-connector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.integ-connector-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 14px;
    gap: 12px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid var(--border-input);
    background: var(--bg-1);
    cursor: pointer;
    transition: all 0.18s;
}
.integ-connector-card:not(.integ-connector-card--soon):hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.03);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
}
.integ-connector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    margin-top: 2px;
}
.integ-connector-body {
    flex: 1;
    min-width: 0;
}
.integ-connector-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.integ-connector-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.integ-connector-desc {
    font-size: 0.71rem;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.integ-connector-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.integ-connector-badge--live {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
/* Coming-soon compact chips row */
.integ-soon-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.integ-soon-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 6px;
    border-radius: 20px;
    border: 1px dashed var(--border-input);
    background: var(--bg-2);
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.65;
}

/* ── Integration "just imported" pulse animation ── */
@keyframes integ-pulse-new {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
    60%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── Response chips (step 4) ── */
.te-resp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.te-resp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    background: var(--bg-3);
    border: 1px solid var(--border-input);
    color: var(--text-secondary);
}
.te-resp-chip-remove {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0;
    transition: color 0.15s;
}
.te-resp-chip-remove:hover { color: #ef4444; }
.te-resp-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.te-resp-input-row input { flex: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Live Preview Panel
   ══════════════════════════════════════════════════════════════════════════ */

.te-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.te-preview-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.te-preview-header-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.te-preview-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}
.te-preview-identity-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.te-preview-identity-body { min-width: 0; flex: 1; }
.te-preview-identity-name {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-strong);
    line-height: 1.2;
    word-break: break-all;
}
.te-preview-identity-name--empty {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 500;
}
.te-preview-identity-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    flex-wrap: wrap;
}
.te-preview-op-badge {
    font-size: 0.7rem;
    padding: 2px 9px;
    border-radius: 5px;
    font-weight: 600;
}
.te-preview-ds-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.te-preview-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}

.te-preview-block {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
}
.te-preview-block-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.te-preview-block-header svg { color: var(--text-muted); }
.te-preview-count {
    margin-left: auto;
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--bg-3);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.te-preview-conn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-0);
    border: 1px solid var(--border);
}
.te-preview-conn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.te-preview-conn-target {
    font-size: 0.76rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.te-pv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    margin-bottom: 5px;
}
.te-pv-row:last-child { margin-bottom: 0; }
.te-pv-row-name {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-strong);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.te-pv-row-type {
    font-size: 0.65rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg-3);
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.te-pv-row-badge {
    font-size: 0.62rem;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 500;
}
.te-pv-row-badge--required {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.te-pv-row-badge--optional {
    background: var(--bg-3);
    color: var(--text-muted);
}

.te-pv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.te-pv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.te-pv-empty {
    font-size: 0.74rem;
    color: var(--text-muted);
    opacity: 0.75;
    margin: 0;
    font-style: italic;
}

.te-preview-schema-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    border-radius: 9px;
    border: 1px solid var(--border-input);
    background: var(--bg-2);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
}
.te-preview-schema-btn:hover {
    border-color: var(--ds-color);
    color: var(--ds-color);
    background: color-mix(in srgb, var(--ds-color) 6%, var(--bg-2));
}

/* ── Starter suggestions editor (Canales > Web > Mensajes) ── */
.sugg-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sugg-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tone-group { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border-input); }
.tone-chip { padding: 4px 10px; border-radius: 6px; border: none; background: transparent; color: var(--text-secondary); font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: all 0.12s; font-family: inherit; }
.tone-chip:hover { color: var(--text-strong); background: var(--bg-3); }
.tone-chip--active { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.sugg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.sugg-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--border); transition: border-color 0.12s, box-shadow 0.12s, opacity 0.15s; }
.sugg-card:hover { border-color: rgba(139,92,246,0.25); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sugg-card--loading { opacity: 0.6; pointer-events: none; }
.sugg-card-row { display: flex; align-items: center; gap: 8px; }
.sugg-icon { width: 40px; text-align: center; font-size: 1.1rem; padding: 6px 4px; border-radius: 6px; border: 1px solid var(--border-input); background: var(--bg-2); color: var(--text-strong); font-family: inherit; }
.sugg-icon:focus { outline: none; border-color: #8b5cf6; }
.sugg-icon-trigger { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 8px; border-radius: 8px; border: 1px solid var(--border-input); background: var(--bg-2); color: var(--text-strong); cursor: pointer; transition: all 0.12s; min-width: 52px; height: 34px; flex-shrink: 0; }
.sugg-icon-trigger:hover { border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.04); }
.sugg-icon-trigger:focus-visible { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,0.15); }
.sugg-icon-trigger__emoji { font-size: 1.05rem; line-height: 1; min-width: 18px; text-align: center; }
.sugg-icon-trigger__caret { width: 11px; height: 11px; opacity: 0.5; flex-shrink: 0; }
.sugg-icon-picker { position: fixed; z-index: 2200; width: 280px; max-height: 360px; overflow-y: auto; padding: 10px 12px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-0); box-shadow: 0 10px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06); opacity: 0; transform: translateY(-4px); transition: opacity 0.12s ease, transform 0.12s ease; }
.sugg-icon-picker.is-open { opacity: 1; transform: translateY(0); }
.sugg-icon-picker__header { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.sugg-icon-picker__group { margin-bottom: 8px; }
.sugg-icon-picker__group-title { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 6px 0 4px; }
.sugg-icon-picker__grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.sugg-icon-picker__cell { width: 100%; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; padding: 0; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-strong); cursor: pointer; transition: all 0.1s; }
.sugg-icon-picker__cell:hover { background: rgba(139,92,246,0.08); transform: scale(1.08); }
.sugg-icon-picker__cell.is-active { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.45); }
.sugg-icon-picker__custom { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.sugg-icon-picker__custom-label { display: block; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; }
.sugg-icon-picker__custom-row { display: flex; gap: 6px; align-items: stretch; }
.sugg-icon-picker__input { flex: 1; height: 30px; text-align: center; font-size: 1rem; }
.sugg-icon-picker__clear { padding: 0 10px; height: 30px; border-radius: 6px; border: 1px solid var(--border-input); background: var(--bg-1); color: var(--text-muted); font-size: 0.7rem; cursor: pointer; transition: all 0.1s; }
.sugg-icon-picker__clear:hover { color: var(--text-strong); border-color: var(--text-muted); }
.sugg-text { flex: 1; font-size: 0.82rem; font-weight: 500; }
.sugg-prompt { font-size: 0.75rem; color: var(--text-secondary); font-family: var(--font-mono, "JetBrains Mono", monospace); }
.sugg-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sugg-icon-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border-input); background: var(--bg-2); color: var(--text-muted); cursor: pointer; transition: all 0.12s; }
.sugg-icon-btn:hover { color: var(--text-strong); border-color: var(--text-muted); }
.sugg-icon-btn--active { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.3); color: #8b5cf6; }
.sugg-icon-btn--danger:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.sugg-icon-btn--expand svg { transition: transform 0.15s ease; }
.sugg-icon-btn--expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.sugg-card [data-sugg-input] { display: none; }
.sugg-card.is-expanded [data-sugg-input] { display: block; }
.sugg-card.is-expanded [data-sugg-preview] { display: none; }
.sugg-prompt-preview { display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 0.7rem; color: var(--text-muted); cursor: pointer; border-radius: 6px; border: 1px dashed transparent; font-family: var(--font-mono, "JetBrains Mono", monospace); transition: background 0.12s, border-color 0.12s, color 0.12s; min-width: 0; }
.sugg-prompt-preview:hover { background: var(--bg-2); border-color: var(--border-input); color: var(--text-secondary); }
.sugg-prompt-preview__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-empty { padding: 20px 12px; text-align: center; border: 1px dashed var(--border-input); border-radius: 10px; background: var(--bg-2); }
.sugg-empty p { margin: 0; font-size: 0.8rem; color: var(--text-secondary); }
.sugg-empty-sub { margin-top: 3px !important; font-size: 0.72rem !important; color: var(--text-muted) !important; }
.sugg-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sugg-add-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; border: 1px dashed var(--border-input); background: transparent; color: var(--text-secondary); font-size: 0.74rem; font-weight: 500; cursor: pointer; transition: all 0.12s; font-family: inherit; }
.sugg-add-btn:hover { border-color: #8b5cf6; color: #8b5cf6; background: rgba(139,92,246,0.04); }
/* Sidebar step-gating badges */
.sidebar-step-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; height: 15px; min-width: 15px; border-radius: 999px; font-size: 9px; font-weight: 700; margin-left: 6px; flex-shrink: 0; }
.sidebar-step-badge--warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
.sidebar-step-badge--ok { background: rgba(34,197,94,0.15); color: #16a34a; }

/* ── Auto-normalize toast (post-import language adaptation) ── */
.auto-normalize-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,0.18); font-size: 0.78rem; color: var(--text-strong); font-family: inherit; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 9999; max-width: calc(100% - 32px); }
.auto-normalize-toast--visible { opacity: 1; transform: translate(-50%, 0); }
.auto-normalize-undo { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(139,92,246,0.3); background: rgba(139,92,246,0.08); color: #8b5cf6; font-size: 0.72rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.12s; margin-left: 4px; }
.auto-normalize-undo:hover { background: rgba(139,92,246,0.15); }

/* ── Empty State Premium ── */
.agents-empty-container {
    background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
    border-radius: 16px;
    padding: 48px 24px;
}
.agents-empty-illustration {
    animation: float-gentle 3s ease-in-out infinite;
}
.agents-empty-container .ui-empty-title {
    font-size: 1.2rem;
    font-weight: 700;
}
.agents-empty-container .ui-empty-desc {
    max-width: 420px;
    margin: 12px auto 0;
    line-height: 1.7;
    letter-spacing: 0.01em;
}
.agents-empty-container .ui-empty-action .ui-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ── Header Zone Premium ── */
.agents-header-zone {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 50%, transparent 100%);
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.agents-header-zone .ui-section-title {
    font-size: 1.2rem;
    font-weight: 700;
}
[data-theme="light"] .agents-header-zone {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(139, 92, 246, 0.015) 50%, transparent 100%);
}

/* ── Glassmorphism Utilities ── */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-hover {
    transition: transform var(--anim-duration-normal) var(--anim-ease-out),
                box-shadow var(--anim-duration-normal) var(--anim-ease-out);
}
.glass-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

@supports not (backdrop-filter: blur(1px)) {
    .glass {
        background: var(--bg-1);
    }
}

/* ── Dashboard Premium Animations ── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-subtle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.05); opacity: 0.8; }
}

@keyframes shimmer-premium {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ── Dark Mode Glow Effects (Task 11.1) ── */
:root .glass-hover:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
:root .agents-filter-pill:hover {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.04);
}
:root .agent-card-expand:hover {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .glass-hover:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .agents-filter-pill:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .agent-card-expand:hover {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
}

/* ── Theme Transition Smoothing (Task 11.1) ── */
.agent-card,
.agents-stat-card,
.agents-filter-bar,
.agents-filter-pill,
.agent-card-expand,
.agents-header-zone {
    transition: background-color var(--anim-duration-normal),
                color var(--anim-duration-normal),
                border-color var(--anim-duration-normal);
}

/* ── Responsive Breakpoints (Task 11.2) ── */
@media (max-width: 768px) {
    /* Stat cards: single column */
    .agents-header-zone [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Agent cards: full width, wrap rows */
    .agent-card-row {
        flex-wrap: wrap;
    }
    .agent-card-tags {
        order: 3;
        width: 100%;
        margin-top: 4px;
    }
    /* Action buttons: min 44x44px touch targets */
    .agent-action-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    /* Filter bar: stacked vertically */
    .agents-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .agents-search-wrap {
        min-width: 100%;
    }
    .agents-filter-pills {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Accessibility: Focus Visible for New Interactive Elements (Task 12.1) ── */
.glass-hover:focus-visible,
.agents-filter-pill:focus-visible,
.agent-card-expand:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Accessibility: Forced Colors for New Components (Task 12.1) ── */
@media (forced-colors: active) {
    .glass-hover,
    .agents-filter-pill,
    .agent-card-expand,
    .agents-stat-card,
    .agents-filter-bar,
    .agents-empty-container {
        border: 1px solid ButtonText;
    }
    .agent-detail-container {
        border-top: 1px solid ButtonText;
    }
    .agent-detail-container .ui-detail-card {
        border: 1px solid ButtonText;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ── Agent Cards v2 — Redesign completo (Linear style)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats row v2 ── */
.agents-stats-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.agents-stat-v2 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}
.agents-stat-v2:hover {
    border-color: var(--stat-v2-color, var(--text-muted));
    box-shadow: 0 0 0 1px var(--stat-v2-color, transparent), 0 4px 16px rgba(0,0,0,0.06);
}
.agents-stat-v2__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stat-v2-color, var(--text-muted));
    flex-shrink: 0;
}
.agents-stat-v2__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.agents-stat-v2__value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.agents-stat-v2__label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Header v2 ── */
.agents-header-v2 {
    margin-bottom: 6px;
}

/* ── Filter bar v2 ── */
.agents-filter-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.agents-search-v2 {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 280px;
}
.agents-search-v2__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
}
.agents-search-v2__input {
    width: 100%;
    padding: 7px 10px 7px 30px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.agents-search-v2__input:focus {
    border-color: var(--primary);
}
.agents-pills-v2 {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.agents-pill-v2 {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}
.agents-pill-v2:hover {
    border-color: var(--text-muted);
    color: var(--text-secondary);
}
.agents-pill-v2.active {
    background: rgba(94, 106, 210, 0.15);
    border-color: rgba(94, 106, 210, 0.5);
    color: #818cf8;
}

/* ── Grid v2 ── */
.agents-grid-v2 {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Card v2 base ── */
.agent-card-v2 {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    border-left: 3px solid var(--card-v2-accent, var(--glass-border));
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s;
    animation: fadeSlideIn var(--anim-duration-normal, 0.22s) var(--anim-ease-out, ease-out) both;
    animation-delay: calc(var(--card-index, 0) * var(--anim-stagger-base, 0.04s));
}
.agent-card-v2:hover {
    border-color: color-mix(in srgb, var(--card-v2-accent) 40%, var(--glass-border));
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Status accent colors */
.agent-card-v2--deployed  { --card-v2-accent: #22c55e; }
.agent-card-v2--configured { --card-v2-accent: #5e6ad2; }
.agent-card-v2--deploying  { --card-v2-accent: #eab308; }
.agent-card-v2--destroying { --card-v2-accent: #f97316; }
.agent-card-v2--failed     { --card-v2-accent: #ef4444; }

/* Stuck state — soft red pulse on border */
.agent-card-v2--stuck {
    animation: stuckPulse 2.5s ease-in-out infinite;
}
@keyframes stuckPulse {
    0%, 100% { border-left-color: #ef4444; }
    50%       { border-left-color: rgba(239, 68, 68, 0.3); }
}

/* ── Card v2 main row ── */
.agent-card-v2__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

/* ── Avatar v2 ── */
.agent-card-v2__avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--avatar-v2-bg, rgba(94,106,210,0.12));
    color: var(--avatar-v2-color, #818cf8);
}

/* ── Info block v2 ── */
.agent-card-v2__info {
    flex: 1;
    min-width: 0;
}
.agent-card-v2__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent-card-v2__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.agent-card-v2__sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    flex-shrink: 0;
}

/* ── Progress v2 (deploying/destroying) ── */
.agent-progress-v2 {
    flex: 1;
    max-width: 180px;
    min-width: 80px;
}
.agent-progress-v2__bar-wrap {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
[data-theme="light"] .agent-progress-v2__bar-wrap {
    background: rgba(0,0,0,0.08);
}
.agent-progress-v2__bar {
    height: 100%;
    border-radius: 2px;
    background: var(--card-v2-accent, var(--primary));
    transition: width 0.6s ease;
    min-width: 6px;
}
.agent-progress-v2__label {
    font-size: 0.67rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Indeterminate progress when no step data */
.agent-progress-v2__bar--indeterminate {
    width: 40% !important;
    animation: indeterminate 1.6s ease-in-out infinite;
}
@keyframes indeterminate {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(350%); }
}

/* ── Channels v2 ── */
.agent-card-v2__channels {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

/* ── Status badge v2 ── */
.agent-status-v2 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.71rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}
.agent-status-v2__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.agent-status-v2__spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* Status variants */
.agent-status-v2--deployed {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}
.agent-status-v2--deployed .agent-status-v2__dot { background: #22c55e; }

.agent-status-v2--configured {
    background: rgba(94, 106, 210, 0.1);
    border-color: rgba(94, 106, 210, 0.25);
    color: #818cf8;
}
.agent-status-v2--configured .agent-status-v2__dot { background: #5e6ad2; }

.agent-status-v2--deploying {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.25);
    color: #facc15;
}

.agent-status-v2--destroying {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.25);
    color: #fb923c;
}

.agent-status-v2--failed {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}
.agent-status-v2--failed .agent-status-v2__dot { background: #ef4444; }

/* ── Actions v2 ── */
.agent-card-v2__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.agent-card-v2:hover .agent-card-v2__actions,
.agent-card-v2:focus-within .agent-card-v2__actions {
    opacity: 1;
}

/* ── Stuck hint ── */
.agent-stuck-hint {
    display: none;
    align-items: center;
    gap: 5px;
    font-size: 0.69rem;
    color: #f87171;
    padding: 6px 16px 8px;
    border-top: 1px solid rgba(239, 68, 68, 0.15);
}
.agent-stuck-hint a {
    color: #f87171;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.agent-stuck-hint a:hover { color: #fca5a5; }
.agent-card-v2--stuck .agent-stuck-hint {
    display: flex;
}

/* ── Detail container (reuse existing) ── */
.agent-card-v2 .agent-detail-container {
    border-top: 1px solid var(--glass-border);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .agents-stats-v2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .agents-stats-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .agent-card-v2__row {
        flex-wrap: wrap;
    }
    .agent-card-v2__channels { order: 4; }
    .agent-card-v2__actions  { opacity: 1; order: 5; }
    .agents-search-v2 { max-width: 100%; }
}

/* ── Light theme overrides ── */
[data-theme="light"] .agents-pill-v2.active {
    background: rgba(94, 106, 210, 0.1);
    border-color: rgba(94, 106, 210, 0.4);
    color: #4f46e5;
}
[data-theme="light"] .agent-status-v2--deployed  { color: #16a34a; }
[data-theme="light"] .agent-status-v2--configured { color: #4f46e5; }
[data-theme="light"] .agent-status-v2--deploying  { color: #a16207; }
[data-theme="light"] .agent-status-v2--destroying { color: #c2410c; }
[data-theme="light"] .agent-status-v2--failed     { color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   ── Agent Detail Panel v2 — Tabbed layout (Linear style)
   ═══════════════════════════════════════════════════════════════════════════ */

.ad2 {
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
}

/* ── Action bar ── */
.ad2__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    flex-wrap: wrap;
}
.ad2__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
    text-decoration: none;
}
.ad2__action-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--text-muted);
    color: var(--text-primary);
}
.ad2__action-btn--primary {
    background: rgba(94,106,210,0.15);
    border-color: rgba(94,106,210,0.4);
    color: #818cf8;
}
.ad2__action-btn--primary:hover {
    background: rgba(94,106,210,0.25);
    border-color: rgba(94,106,210,0.6);
}
.ad2__action-btn--danger {
    color: #f87171;
    border-color: rgba(239,68,68,0.25);
}
.ad2__action-btn--danger:hover {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.4);
}
[data-theme="light"] .ad2__action-btn:hover {
    background: rgba(0,0,0,0.04);
}
[data-theme="light"] .ad2__action-btn--primary {
    background: rgba(94,106,210,0.08);
    color: #4f46e5;
}

/* ── Tab bar ── */
.ad2__tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--glass-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.ad2__tabs::-webkit-scrollbar { display: none; }

.ad2__tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}
.ad2__tab:hover { color: var(--text-secondary); }
.ad2__tab.active {
    color: #818cf8;
    border-bottom-color: #5e6ad2;
}
[data-theme="light"] .ad2__tab.active { color: #4f46e5; border-bottom-color: #4f46e5; }

.ad2__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    background: rgba(94,106,210,0.2);
    color: #818cf8;
}

/* ── Tab content area ── */
.ad2__panels {
    padding: 16px;
    overflow-y: auto;
    max-height: 500px;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}
.ad2__panels::-webkit-scrollbar { width: 4px; }
.ad2__panels::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

.ad2__panel { display: none; }
.ad2__panel.active { display: block; animation: fadeSlideIn 0.18s ease both; }

/* ── URL hero inside detail ── */
.ad2__url-hero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 8px;
    margin-bottom: 12px;
}
.ad2__url-hero__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(34,197,94,0.1);
    color: #10b981;
}
.ad2__url-hero__url {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: #60a5fa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.ad2__url-hero__url:hover { text-decoration: underline; }

/* ── Info chips row ── */
.ad2__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.ad2__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    font-size: 0.69rem;
    color: var(--text-muted);
}
.ad2__chip__label { font-weight: 500; color: var(--text-secondary); }

/* ── Error banner ── */
.ad2__error {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #f87171;
    align-items: flex-start;
}

/* ── Section headers inside panels ── */
.ad2__section-title {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 8px;
}

/* ── Row items (channels, tools, config) ── */
.ad2__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 6px;
}
.ad2__row:last-child { margin-bottom: 0; }
.ad2__row__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.ad2__row__body { flex: 1; min-width: 0; }
.ad2__row__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ad2__row__desc {
    font-size: 0.69rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.ad2__row__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* ── Toggle indicator ── */
.ad2__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.71rem;
    font-weight: 500;
    flex-shrink: 0;
}
.ad2__toggle--on  { color: #4ade80; }
.ad2__toggle--off { color: var(--text-muted); }
[data-theme="light"] .ad2__toggle--on { color: #16a34a; }

/* ── KV list (infra) ── */
.ad2__kv {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
}
.ad2__kv__row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--glass-bg);
    gap: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.ad2__kv__row:last-child { border-bottom: none; }
.ad2__kv__key {
    width: 110px;
    flex-shrink: 0;
    font-size: 0.69rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}
.ad2__kv__val {
    flex: 1;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
}

/* ── Prompt pre ── */
.ad2__prompt {
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.65;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    max-height: 180px;
    overflow: hidden;
    cursor: pointer;
    transition: max-height 0.3s ease;
}
.ad2__prompt--expanded { max-height: none; }

/* ── Suggestions grid ── */
.ad2__sugg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
}
.ad2__sugg-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    min-width: 0;
}
.ad2__sugg-icon { font-size: 0.95rem; flex-shrink: 0; }
.ad2__sugg-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ad2__sugg-prompt {
    font-size: 0.62rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── JSON export area ── */
.ad2__json-wrap {
    margin-top: 16px;
}
.ad2__json-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ad2__json-pre {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.6;
    padding: 12px;
    border-radius: 8px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    max-height: 200px;
    overflow: auto;
    margin: 0;
}

/* ── Accordion (embed snippet, etc.) ── */
.ad2__accordion {
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
.ad2__accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    cursor: pointer;
    background: var(--glass-bg);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    user-select: none;
}
.ad2__accordion-header:hover { background: rgba(255,255,255,0.03); }
.ad2__accordion-chev {
    margin-left: auto;
    transition: transform 0.2s;
    color: var(--text-muted);
}
.ad2__accordion-chev--open { transform: rotate(180deg); }
.ad2__accordion-body {
    display: none;
    padding: 10px 12px;
    border-top: 1px solid var(--glass-border);
    background: var(--glass-bg);
}
.ad2__accordion-body--open { display: block; }

@media (max-width: 640px) {
    .ad2__sugg-grid { grid-template-columns: 1fr; }
    .ad2__chips { gap: 4px; }
    .ad2__kv__key { width: 80px; }
}