/* Live system styles: auth, dashboards, inventory, chat */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-bg, #f5f5f5);
    padding: 2rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.auth-card h1 {
    margin: 0;
    font-size: 1.5rem;
}

.auth-subtitle {
    color: var(--text-secondary, #6b7280);
    margin: 0.25rem 0 1.5rem;
}

.auth-card label {
    display: block;
    margin-bottom: 0.875rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.auth-card input[type="email"],
.auth-card input[type="password"] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    margin-top: 0.25rem;
    font-size: 1rem;
}

.auth-submit {
    width: 100%;
    padding: 0.75rem;
    background: var(--accent, #7CB342);
    color: white;
    border: 0;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.5rem;
}

.auth-submit:hover { background: var(--accent-dark, #689F38); }

.auth-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.625rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.auth-demo-creds {
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    background: var(--surface-elevated, #f8f9fa);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.auth-demo-creds ul { margin: 0.5rem 0 0; padding-left: 1rem; }
.auth-demo-creds code { background: white; padding: 0.125rem 0.375rem; border-radius: 4px; }

/* Dashboards */
.dashboard {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.dashboard-header h1 {
    margin: 0;
    font-size: 1.75rem;
}

.dashboard-nav { display: flex; gap: 1rem; align-items: center; }

.dashboard-nav a, .dashboard-nav .link-btn {
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.dashboard-nav a:hover, .dashboard-nav .link-btn:hover { color: var(--accent, #7CB342); }

.empty-state {
    background: var(--surface-elevated, #f8f9fa);
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
}

/* Quote table & cards */
.quote-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.quote-table th {
    background: var(--surface-elevated, #f8f9fa);
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: var(--text-secondary, #6b7280);
}

.quote-table td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-light, #f0f0f0);
    vertical-align: top;
}

.quote-table small { display: block; color: var(--text-muted, #9ca3af); font-size: 0.75rem; }

.quote-card-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.quote-card a { display: block; padding: 1rem 1.25rem; border-radius: 10px; background: white; border: 1px solid var(--border, #e5e7eb); color: inherit; text-decoration: none; }
.quote-card a:hover { border-color: var(--accent, #7CB342); }
.quote-card h2 { font-size: 1rem; margin: 0.5rem 0 0.25rem; }
.quote-card .meta { font-size: 0.8125rem; color: var(--text-secondary, #6b7280); margin: 0; }

.status-pill {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: #e5e7eb;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pill.status-draft { background: #e5e7eb; color: #374151; }
.status-pill.status-submittedtoconsultant { background: #dbeafe; color: #1e40af; }
.status-pill.status-inreview { background: #fef3c7; color: #92400e; }
.status-pill.status-quoteready { background: #d1fae5; color: #065f46; }
.status-pill.status-accepted { background: #dcfce7; color: #14532d; }
.status-pill.status-cancelled { background: #fee2e2; color: #991b1b; }

.btn-action {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: var(--accent, #7CB342);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    border: 0;
    font-size: 0.875rem;
    cursor: pointer;
}
.btn-action:hover { background: var(--accent-dark, #689F38); color: white; }

/* Quote detail / chat */
.quote-review { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
.quote-review .meta { color: var(--text-secondary, #6b7280); font-size: 0.875rem; }
.quote-snapshot { margin: 2rem 0; padding: 1rem; background: var(--surface-elevated, #f8f9fa); border-radius: 8px; }
.quote-snapshot pre { white-space: pre-wrap; word-break: break-word; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); margin: 0.5rem 0 0; }

.status-form { display: flex; gap: 0.5rem; align-items: center; }
.status-form select { padding: 0.375rem 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }

.quote-chat { background: white; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 1.25rem; }
.chat-thread {
    height: 360px;
    overflow-y: auto;
    background: var(--surface-elevated, #f8f9fa);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.chat-bubble {
    max-width: 85%;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
}
.chat-bubble strong { font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.chat-bubble .chat-time { font-size: 0.75rem; color: var(--text-muted, #9ca3af); margin-left: 0.5rem; }
.chat-bubble p { margin: 0.25rem 0 0; white-space: pre-wrap; }
.chat-bubble.chat-consultant { background: #ecfdf5; border-color: #a7f3d0; align-self: flex-start; }
.chat-bubble.chat-user { background: #eff6ff; border-color: #bfdbfe; align-self: flex-end; }

.chat-input-row { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.chat-input-row textarea { flex: 1; padding: 0.625rem 0.75rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; resize: vertical; font: inherit; }
.chat-input-row button { padding: 0 1.25rem; background: var(--accent, #7CB342); color: white; border: 0; border-radius: 6px; cursor: pointer; }
.chat-input-row button:hover { background: var(--accent-dark, #689F38); }
.chat-system-note { background: #fffbeb; border: 1px solid #fde68a; padding: 0.625rem; border-radius: 6px; font-size: 0.875rem; color: #92400e; margin-bottom: 0.75rem; }

/* Inventory */
.inventory-filter { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.inventory-filter select, .inventory-filter input { padding: 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }
.inventory-filter button { padding: 0.5rem 1rem; background: var(--primary, #1F201F); color: white; border: 0; border-radius: 6px; cursor: pointer; }

.inventory-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; }
.inventory-table th, .inventory-table td { padding: 0.625rem 0.875rem; border-top: 1px solid var(--border-light, #f0f0f0); text-align: left; vertical-align: middle; }
.inventory-table th { background: var(--surface-elevated, #f8f9fa); font-size: 0.8125rem; text-transform: uppercase; color: var(--text-secondary, #6b7280); }
.inventory-table .thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.inventory-table .thumb-placeholder { width: 48px; height: 48px; background: #f3f4f6; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; color: var(--text-muted, #9ca3af); }

.inventory-edit { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
.inventory-edit-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 320px; align-items: start; margin-bottom: 2rem; }
.inventory-form { display: grid; gap: 0.75rem; }
.inventory-form label { font-size: 0.8125rem; color: var(--text-secondary, #6b7280); display: block; }
.inventory-form input, .inventory-form select { width: 100%; padding: 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; margin-top: 0.25rem; }
.inventory-form input:disabled { background: var(--surface-elevated, #f8f9fa); color: var(--text-muted, #9ca3af); }
.inventory-form .checkbox { display: flex; gap: 0.5rem; align-items: center; }
.inventory-form button { width: fit-content; }

.inventory-image-panel { background: white; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 1rem; }
.inventory-image-panel .preview { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.inventory-image-panel .preview-placeholder { width: 100%; aspect-ratio: 1; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #9ca3af); }
.inventory-image-panel pre { background: var(--surface-elevated, #f8f9fa); padding: 0.5rem; border-radius: 6px; font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; }
.inventory-image-panel .hint { font-size: 0.75rem; color: var(--text-muted, #9ca3af); margin-top: 0.25rem; }
.prompt-label { font-size: 0.8125rem; color: var(--text-secondary, #6b7280); margin-top: 0.75rem; margin-bottom: 0.25rem; }

.stock-panel { background: white; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 1rem; }
.stock-form { display: flex; gap: 0.5rem; align-items: end; margin: 0.75rem 0 1rem; }
.stock-form label { font-size: 0.8125rem; color: var(--text-secondary, #6b7280); display: block; }
.stock-form input { padding: 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }
.stock-table { width: 100%; border-collapse: collapse; }
.stock-table th, .stock-table td { padding: 0.5rem; border-top: 1px solid var(--border-light, #f0f0f0); text-align: left; }
.stock-table th { background: var(--surface-elevated, #f8f9fa); font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary, #6b7280); }

/* Variant carousel (for chat-embedded selection) */
.variant-carousel {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.25rem;
    -webkit-overflow-scrolling: touch;
}
.variant-card {
    flex: 0 0 140px;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: white;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 120ms ease, transform 120ms ease;
}
.variant-card:hover { transform: translateY(-2px); }
.variant-card.selected { border-color: var(--accent, #7CB342); box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.2); }
.variant-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.variant-card .variant-card-placeholder { width: 100%; height: 140px; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #9ca3af); font-size: 0.75rem; }
.variant-card .variant-card-label { padding: 0.5rem; font-size: 0.8125rem; }
.variant-card .variant-card-stock { padding: 0 0.5rem 0.5rem; font-size: 0.6875rem; color: var(--text-muted, #9ca3af); }

/* ==== Tree builder (master-detail) ==== */
.tree-list-create { background: white; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.tree-create-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tree-create-form input { flex: 1; min-width: 200px; padding: 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }

.tree-builder { max-width: 1400px; margin: 1.5rem auto; padding: 0 1.5rem; }
.tree-builder-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.tree-builder-header h1 { margin: 0.25rem 0; font-size: 1.5rem; }
.tree-builder-header .back-link { color: var(--text-secondary, #6b7280); text-decoration: none; font-size: 0.875rem; }
.tree-builder-header .back-link:hover { color: var(--accent, #7CB342); }
.tree-builder-actions { display: flex; gap: 0.5rem; align-items: center; }

.tree-builder-body { display: grid; grid-template-columns: 320px 1fr; gap: 1.25rem; align-items: start; }

.tree-builder-rail { background: white; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 0.75rem; min-height: 480px; }
.rail-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; padding: 0 0.25rem; }
.rail-toolbar strong { font-size: 0.8125rem; text-transform: uppercase; color: var(--text-secondary, #6b7280); letter-spacing: 0.5px; }
.rail-toolbar .link-btn { background: none; border: 0; color: var(--accent, #7CB342); cursor: pointer; font: inherit; padding: 0; }
.rail-toolbar .link-btn:hover { text-decoration: underline; }

.rail-tree, .rail-children { list-style: none; padding: 0; margin: 0; }
.rail-children { padding-left: 1rem; border-left: 1px dashed var(--border-light, #f0f0f0); margin-left: 0.5rem; }
.rail-empty { padding: 1rem; color: var(--text-muted, #9ca3af); font-size: 0.875rem; text-align: center; }
.rail-empty.rail-error { color: #b91c1c; }
.rail-node.collapsed > .rail-children { display: none; }

.rail-node-row { display: flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0; }
.rail-node-toggle { background: none; border: 0; cursor: pointer; color: var(--text-muted, #9ca3af); padding: 0 0.125rem; font-size: 0.75rem; }
.rail-node-pick { flex: 1; display: flex; align-items: center; gap: 0.5rem; background: none; border: 0; text-align: left; padding: 0.375rem 0.5rem; border-radius: 6px; cursor: pointer; font: inherit; color: inherit; }
.rail-node-pick:hover { background: var(--surface-elevated, #f8f9fa); }
.rail-node.selected > .rail-node-row > .rail-node-pick { background: #ecfdf5; color: #14532d; }
.rail-node-icon { width: 1.25rem; height: 1.25rem; border-radius: 4px; background: var(--surface-elevated, #f8f9fa); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
.rail-node-title { flex: 1; font-size: 0.875rem; }
.rail-node-chip { font-size: 0.6875rem; color: var(--text-muted, #9ca3af); background: var(--surface-elevated, #f8f9fa); padding: 0.0625rem 0.375rem; border-radius: 999px; }
.rail-node-add { background: none; border: 0; cursor: pointer; color: var(--text-muted, #9ca3af); padding: 0 0.375rem; border-radius: 4px; }
.rail-node-add:hover { background: var(--surface-elevated, #f8f9fa); color: var(--accent, #7CB342); }

.rail-validation { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light, #f0f0f0); display: grid; gap: 0.25rem; font-size: 0.75rem; }
.validation-ok { color: var(--text-muted, #9ca3af); }
.validation-warning { color: #92400e; background: #fffbeb; padding: 0.25rem 0.5rem; border-radius: 4px; }
.validation-error { color: #991b1b; background: #fef2f2; padding: 0.25rem 0.5rem; border-radius: 4px; }
.validation-info { color: #1e40af; background: #eff6ff; padding: 0.25rem 0.5rem; border-radius: 4px; }

.tree-builder-pane { background: white; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 1.25rem; min-height: 480px; }
.pane-empty { color: var(--text-muted, #9ca3af); text-align: center; padding: 4rem 1rem; }

.node-editor { display: grid; gap: 0.75rem; }
.node-editor-head { display: grid; gap: 0.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light, #f0f0f0); }
.node-editor-title-row { display: flex; gap: 0.5rem; }
.node-editor-title-row input[type="text"] { flex: 1; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 1rem; }
.node-type-select { padding: 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; min-width: 9rem; background: var(--surface-elevated, #f8f9fa); }
.node-editor-meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: 0.875rem; color: var(--text-secondary, #6b7280); }
.node-editor-meta .checkbox { display: flex; align-items: center; gap: 0.375rem; }
.node-editor-meta input[type="number"] { padding: 0.375rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }

.block-label { font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary, #6b7280); letter-spacing: 0.5px; display: block; margin-top: 0.5rem; }
.block-label-row { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.block-label-row .link-btn { background: none; border: 0; color: var(--accent, #7CB342); cursor: pointer; font: inherit; padding: 0; }
.block-label-row .link-btn:hover { text-decoration: underline; }

.node-editor textarea, .node-editor select { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font: inherit; }

.option-list, .product-list { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.option-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.6fr 2rem; gap: 0.375rem; align-items: center; }
.option-row input, .option-row select { padding: 0.375rem 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 0.875rem; }

.branch-picker { display: flex; align-items: center; gap: 0.25rem; }
.branch-target-btn { flex: 1; text-align: left; padding: 0.375rem 0.5rem; border: 1px dashed var(--border, #e5e7eb); border-radius: 6px; background: var(--surface-elevated, #f8f9fa); cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.branch-target-btn:hover { border-style: solid; border-color: var(--accent, #7CB342); color: var(--text, #111827); }
.branch-target-btn[data-has-target="true"] { color: var(--text, #111827); border-style: solid; }
.branch-clear { font-size: 0.875rem; }

.picker-search { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 0.9375rem; }
.picker-status { color: var(--text-muted, #9ca3af); font-size: 0.8125rem; margin: 0.5rem 0; }
.picker-list { display: grid; gap: 0.25rem; max-height: 360px; overflow-y: auto; }
.picker-hit { display: flex; align-items: center; gap: 0.5rem; text-align: left; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: white; cursor: pointer; font: inherit; }
.picker-hit:hover { border-color: var(--accent, #7CB342); background: var(--surface-elevated, #f8f9fa); }
.picker-hit-icon { width: 1.25rem; height: 1.25rem; border-radius: 4px; background: var(--surface-elevated, #f8f9fa); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
.picker-hit-title { flex: 1; font-size: 0.875rem; }
.picker-hit-meta { font-size: 0.75rem; color: var(--text-muted, #9ca3af); }

.product-row { display: grid; grid-template-columns: 1.5fr auto auto auto 2rem; gap: 0.5rem; align-items: center; padding: 0.5rem; background: var(--surface-elevated, #f8f9fa); border-radius: 6px; }
.product-row-name { font-size: 0.875rem; }
.product-row-name code { background: white; padding: 0.0625rem 0.375rem; border-radius: 4px; font-size: 0.75rem; }
.inline-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
.inline-label input, .inline-label select { padding: 0.25rem 0.375rem; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; font-size: 0.8125rem; }

.product-search { margin-top: 0.5rem; padding: 0.5rem; background: var(--surface-elevated, #f8f9fa); border-radius: 6px; }
.product-search input { width: 100%; padding: 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }
.product-search-results { display: grid; gap: 0.25rem; margin-top: 0.5rem; max-height: 220px; overflow-y: auto; }
.product-search-hit { text-align: left; background: white; border: 1px solid var(--border, #e5e7eb); padding: 0.375rem 0.5rem; border-radius: 6px; cursor: pointer; font-size: 0.8125rem; }
.product-search-hit:hover { border-color: var(--accent, #7CB342); }
.product-search-hit code { background: var(--surface-elevated, #f8f9fa); padding: 0.0625rem 0.25rem; border-radius: 4px; font-size: 0.75rem; }
.product-search-hit small { color: var(--text-muted, #9ca3af); margin-left: 0.5rem; }

.node-editor-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light, #f0f0f0); }

.node-editor-eventtype .node-editor-head { display: grid; gap: 0.5rem; }
.node-editor-eventtype-heading { margin: 0; font-size: 1.125rem; color: #075985; }
.node-editor-eventtype input[type="text"] { padding: 0.625rem 0.75rem; border: 1px solid #bae6fd; border-radius: 6px; font-size: 1rem; background: #f0f9ff; }
.node-editor-eventtype-future { padding: 0.5rem 0; opacity: 0.6; }
.footer-right { display: flex; gap: 0.5rem; }

.btn-secondary { padding: 0.375rem 0.875rem; background: white; color: var(--text-secondary, #6b7280); border: 1px solid var(--border, #e5e7eb); border-radius: 6px; cursor: pointer; font-size: 0.875rem; }
.btn-secondary:hover { background: var(--surface-elevated, #f8f9fa); color: var(--text, #111827); }
.btn-danger { padding: 0.375rem 0.875rem; background: white; color: #b91c1c; border: 1px solid #fecaca; border-radius: 6px; cursor: pointer; font-size: 0.875rem; }
.btn-danger:hover { background: #fef2f2; }
.btn-danger-ghost { background: none; border: 0; color: var(--text-muted, #9ca3af); cursor: pointer; font-size: 1.125rem; line-height: 1; padding: 0 0.25rem; border-radius: 4px; }
.btn-danger-ghost:hover { color: #b91c1c; background: #fef2f2; }

.anti-forgery-holder { display: none; }

.auth-info { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 6px; padding: 0.625rem; margin-bottom: 1rem; font-size: 0.875rem; }
.tree-list-create { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.tree-delete-all-form { display: inline-flex; gap: 0.5rem; align-items: center; margin-left: auto; }
.tree-delete-all-form input[type="text"] { padding: 0.375rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 0.8125rem; width: 16rem; }
.tree-row-actions { display: inline-flex; gap: 0.5rem; align-items: center; }

/* Template role pills + onboarding row highlight */
.role-pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}
.role-pill.role-onboarding { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.role-pill.role-refinement { background: #dbeafe; color: #1e40af; }
.role-pill.role-upsell { background: #ede9fe; color: #5b21b6; }
.role-pill.role-infogathering { background: #d1fae5; color: #065f46; }
.tree-row-onboarding { background: #fffbeb; }
.tree-row-onboarding td:first-child { border-left: 3px solid #f59e0b; }
.btn-ghost { background: transparent; border: 1px solid var(--border, #e5e7eb); color: var(--text-secondary, #6b7280); padding: 0.25rem 0.625rem; border-radius: 6px; font-size: 0.8125rem; cursor: pointer; }
.btn-ghost:hover { background: var(--surface-elevated, #f8f9fa); color: var(--text, #111827); }
.purpose-form select { padding: 0.25rem 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 0.8125rem; background: white; }

/* Inventory picker modal */
.section-heading-actions { display: inline-flex; gap: 0.5rem; align-items: center; }
.btn-pill-inventory { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.btn-pill-inventory:hover { background: #ddd6fe; }
.option-card-product {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: #ede9fe;
    color: #5b21b6;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
}
.inventory-picker-body { display: flex; flex-direction: column; gap: 0.75rem; max-height: 70vh; }
.inventory-picker-filters { display: flex; gap: 0.5rem; }
.inventory-picker-filters .picker-search { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 0.9375rem; }
.inventory-picker-category { padding: 0.5rem 0.75rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: white; font-size: 0.875rem; min-width: 10rem; }
.inventory-picker-results-wrap { display: flex; flex-direction: column; gap: 0.375rem; min-height: 12rem; max-height: 18rem; }
.inventory-picker-results-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.inventory-picker-select-all { display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; }
.inventory-picker-results { flex: 1; overflow-y: auto; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; background: var(--surface-elevated, #f8f9fa); }
.inv-row { display: grid; grid-template-columns: 1.25rem 5rem 1fr 8rem 5rem; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.75rem; border-bottom: 1px solid var(--border-light, #f0f0f0); cursor: pointer; font-size: 0.8125rem; }
.inv-row:last-child { border-bottom: 0; }
.inv-row:hover { background: white; }
.inv-row-code { font-family: var(--mono-font, monospace); color: var(--text-secondary, #6b7280); font-size: 0.75rem; }
.inv-row-name { font-weight: 500; color: var(--text, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row-cat { color: var(--text-secondary, #6b7280); font-size: 0.75rem; }
.inv-row-rate { color: var(--text-secondary, #6b7280); font-size: 0.75rem; text-align: right; }
.inventory-picker-staged-wrap { border-top: 1px solid var(--border, #e5e7eb); padding-top: 0.625rem; }
.inventory-picker-staged-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; font-size: 0.8125rem; }
.inventory-picker-staged { display: flex; flex-wrap: wrap; gap: 0.375rem; min-height: 2rem; }
.inv-staged-empty { color: var(--text-muted, #9ca3af); font-size: 0.8125rem; margin: 0; }
.inv-staged-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem 0.25rem 0.625rem; background: #ede9fe; color: #5b21b6; border-radius: 999px; font-size: 0.75rem; }
.inv-staged-code { font-family: var(--mono-font, monospace); font-size: 0.6875rem; color: #6b21a8; }
.inv-staged-name { font-weight: 500; }
.inv-staged-remove { background: none; border: 0; color: #6b21a8; cursor: pointer; padding: 0; font-size: 0.875rem; line-height: 1; }
.inv-staged-remove:hover { color: #991b1b; }

/* ---- Pushed templates on Quote/Summary ---- */
.quote-summary-consultant-bar { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin: 1rem 0; }
.quote-pushed { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 1.25rem; margin: 1.5rem 0; }
.quote-pushed-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.quote-pushed-header h2 { margin: 0; font-size: 1.0625rem; }
.pushed-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.625rem; }
.pushed-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--surface-elevated, #f8f9fa); }
.pushed-card-pending { border-left: 3px solid #f59e0b; background: #fffbeb; }
.pushed-card-submitted { border-left: 3px solid #10b981; }
.pushed-card-main { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.pushed-card-main strong { font-size: 0.9375rem; }
.pushed-card-note { font-style: italic; color: var(--text-secondary, #6b7280); font-size: 0.8125rem; margin: 0.25rem 0; }
.pushed-card-actions { display: flex; gap: 0.5rem; }
.pushed-card-answers { font-size: 0.8125rem; }
.pushed-card-answers summary { cursor: pointer; color: var(--text-secondary, #6b7280); }
.pushed-card-json { background: var(--surface-elevated, #f8f9fa); padding: 0.5rem; border-radius: 4px; max-height: 12rem; overflow: auto; font-size: 0.75rem; }
.quote-push-form { display: grid; gap: 0.625rem; padding-top: 0.75rem; border-top: 1px dashed var(--border, #e5e7eb); }
.quote-push-row { display: grid; gap: 0.25rem; }
.quote-push-row label { font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.quote-push-row select, .quote-push-row input { padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 0.875rem; }
.quote-push-form button { justify-self: start; }

/* ---- Client-side fill-in template page ---- */
.quote-fill { max-width: 56rem; margin: 0 auto; padding: 2rem 1.5rem; }
.quote-fill-header h1 { margin: 0.5rem 0; }
.quote-fill-header .meta { display: flex; gap: 0.5rem; align-items: center; }
.consultant-note { background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 6px; padding: 0.75rem 1rem; margin: 1rem 0; }
.consultant-note p { margin: 0.25rem 0 0; }
.quote-fill-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.quote-fill-question { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 1rem 1.25rem; margin: 0; }
.quote-fill-question legend { font-weight: 600; padding: 0 0.375rem; }
.quote-fill-question legend .required { color: #b91c1c; margin-left: 0.25rem; }
.quote-fill-body { color: var(--text-secondary, #6b7280); margin: 0 0 0.625rem; font-size: 0.875rem; }
.quote-fill-radio, .quote-fill-check { display: flex; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; margin: 0.25rem 0; cursor: pointer; align-items: center; }
.quote-fill-radio:hover, .quote-fill-check:hover { border-color: var(--accent, #7CB342); }
.quote-fill-checkboxes { display: grid; gap: 0.25rem; }
.quote-fill-desc { color: var(--text-secondary, #6b7280); font-size: 0.75rem; margin-left: 0.5rem; }
.quote-fill-input { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font-size: 0.9375rem; }
.quote-fill-notes-label { display: grid; gap: 0.25rem; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.quote-fill-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 0.5rem; }

/* ---- Consultant realtime report ---- */
.quote-report { padding: 1.5rem; max-width: 80rem; margin: 0 auto; }
.quote-report-hero { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.quote-report-counters { display: flex; gap: 1rem; }
.report-counter { display: flex; flex-direction: column; align-items: end; padding: 0.625rem 1rem; background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; min-width: 6rem; }
.report-counter .num { font-size: 1.25rem; font-weight: 700; }
.report-counter .meta { font-size: 0.75rem; color: var(--text-secondary, #6b7280); }
.report-counter-warn { border-color: #f59e0b; background: #fffbeb; }
.quote-report-summary { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; padding: 1.25rem; margin: 1rem 0; border-left: 4px solid #7CB342; }
.quote-report-summary-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.quote-report-summary-head h2 { margin: 0; font-size: 1rem; }
.quote-report-summary-actions { display: flex; gap: 0.625rem; align-items: center; }
.quote-report-summary-body p { margin: 0; line-height: 1.5; font-size: 0.9375rem; }
.quote-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
.quote-report-col h2 { font-size: 1rem; margin: 0 0 0.625rem; }
.report-section { background: #fff; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; padding: 0.875rem 1rem; margin-bottom: 0.5rem; }
.report-section header { display: flex; justify-content: space-between; align-items: baseline; }
.report-section header h3, .report-section header h4 { margin: 0; font-size: 0.9375rem; }
.report-section dl { display: grid; grid-template-columns: 9rem 1fr; gap: 0.25rem 0.75rem; margin: 0.5rem 0 0; font-size: 0.875rem; }
.report-section dt { color: var(--text-secondary, #6b7280); font-weight: 500; }
.report-section dd { margin: 0; }
.report-section-note { font-style: italic; color: var(--text-secondary, #6b7280); font-size: 0.8125rem; margin: 0.25rem 0 0; }
.report-note { color: var(--text-secondary, #6b7280); font-style: italic; }
.report-line-items { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.875rem; }
.report-line-items li { padding: 0.125rem 0; }
.report-bucket { margin-bottom: 1rem; }
.report-bucket h3 { display: flex; gap: 0.5rem; align-items: center; }
.quote-report-products { margin-top: 1.5rem; }
@media (max-width: 980px) { .quote-report-grid { grid-template-columns: 1fr; } }

/* Test walk modal */
.walk-node h4 { margin: 0.5rem 0; }
.walk-option { display: block; padding: 0.5rem 0.75rem; background: var(--surface-elevated, #f8f9fa); border: 1px solid var(--border, #e5e7eb); border-radius: 6px; margin: 0.25rem 0; cursor: pointer; }
.walk-option:hover { border-color: var(--accent, #7CB342); }
.walk-actions { margin-top: 1rem; }
.walk-history-heading { margin: 1.25rem 0 0.5rem; font-size: 0.875rem; color: var(--text-secondary, #6b7280); }
.walk-history { list-style: none; padding: 0.5rem 0.75rem; background: var(--surface-elevated, #f8f9fa); border-radius: 6px; font-size: 0.875rem; margin: 0; }
.walk-history li { padding: 0.25rem 0; border-bottom: 1px solid var(--border-light, #f0f0f0); }
.walk-history li:last-child { border-bottom: 0; }

@media (max-width: 900px) {
    .tree-builder-body { grid-template-columns: 1fr; }
    .option-row { grid-template-columns: 1fr; }
    .product-row { grid-template-columns: 1fr; }
}

/* ---- View toggle ---- */
.view-toggle { display: inline-flex; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; overflow: hidden; background: var(--surface-elevated, #f8f9fa); padding: 2px; gap: 2px; }
.view-toggle-btn { background: transparent; border: 0; padding: 0.375rem 0.875rem; cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); border-radius: 6px; font-weight: 500; transition: background 120ms, color 120ms; }
.view-toggle-btn.active { background: white; color: var(--text, #111827); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.view-toggle-btn:hover:not(.active) { color: var(--text, #111827); background: rgba(255,255,255,0.5); }

/* ---- Graph workspace (fills the viewport) ---- */
/* Hoist the workspace out of the centred .tree-builder gutters when graph view is active.
 * Flex column locks the editor to the viewport: header takes its natural height, body fills
 * the rest, page-level scroll never appears. Without this, .tree-graph-body's fixed
 * calc(100vh - 70px) over- or under-shoots the actual header height — the document grows
 * past the viewport and page-scrolls the floatbars out of view as the user navigates. */
.tree-builder:has([data-view-graph]:not([hidden])) {
    max-width: none;
    padding: 0;
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tree-builder:has([data-view-graph]:not([hidden])) .tree-builder-header {
    padding: 0.875rem 1.25rem;
    margin: 0;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    background: white;
    z-index: 30;
    flex: 0 0 auto;
}
.tree-builder:has([data-view-graph]:not([hidden])) .tree-graph-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.tree-graph-body {
    position: relative;
    height: calc(100vh - 70px);
    width: 100%;
    overflow: hidden;
    background: #fafbfc;
}

.tree-graph-workspace { position: absolute; inset: 0; overflow: hidden; }

.tree-graph-canvas {
    position: absolute; inset: 0;
    overflow: hidden;
    cursor: grab;
    background-color: #fafbfc;
    background-image:
        radial-gradient(circle, rgba(15, 23, 42, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
}
.tree-graph-canvas.panning { cursor: grabbing; }
.tree-graph-svg { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; overflow: visible; }
.tree-graph-svg path, .tree-graph-svg text { pointer-events: auto; }
.tree-graph-svg .tree-graph-edge-hit { pointer-events: stroke; cursor: pointer; }
.tree-graph-edge-label {
    font-size: 11px;
    fill: var(--text-secondary, #475569);
    pointer-events: none;
    paint-order: stroke;
    stroke: white;
    stroke-width: 4px;
    stroke-linejoin: round;
    font-weight: 500;
}
.tree-graph-edge.selected .tree-graph-edge-label,
.tree-graph-edge.incident .tree-graph-edge-label { fill: #14532d; font-weight: 600; }
.tree-graph-nodes { position: absolute; top: 0; left: 0; transform-origin: 0 0; }

.tree-graph-node {
    position: absolute;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 0.625rem 0.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    user-select: none;
    transition: border-color 140ms, box-shadow 140ms, transform 140ms;
    display: flex; flex-direction: column; gap: 0.375rem;
    /* overflow:visible so the connector port and the floating + button render outside the
       card without being clipped to its rounded border. */
    overflow: visible;
}
.tree-graph-node::before {
    content: '';
    position: absolute;
    /* Negative offsets pull the rail out to the parent's outer (border-box) edge so its
       border-radius arc lines up exactly with the card's rounded corner — the previous
       content-box positioning left a 1px sliver of border showing inside the curve. */
    left: -1px; top: -1px; bottom: -1px;
    width: 5px;
    background: var(--node-accent, #94a3b8);
    border-radius: 12px 0 0 12px;
    pointer-events: none;
}
.tree-graph-node:hover { border-color: var(--accent, #7CB342); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
.tree-graph-node.selected { border-color: var(--accent, #7CB342); box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.22), 0 4px 14px rgba(15, 23, 42, 0.08); }
.tree-graph-node.has-error { border-color: #dc2626; }
.tree-graph-node.has-warning { border-color: #d97706; }
.tree-graph-node.has-info { border-color: #2563eb; }
.tree-graph-node.dragging-subtree { opacity: 0.85; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15); cursor: grabbing; }
.tree-graph-node-row { display: flex; align-items: center; gap: 0.5rem; }
.tree-graph-node-icon {
    width: 1.75rem; height: 1.75rem;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.875rem;
    background: var(--node-icon-bg, #f1f5f9);
    color: var(--node-icon-fg, #475569);
    flex-shrink: 0;
}
.tree-graph-node-title {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text, #0f172a);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.tree-graph-node-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.6875rem; color: var(--text-muted, #94a3b8); align-items: center; }
.tree-graph-node-type {
    background: rgba(15, 23, 42, 0.04);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.625rem;
    color: var(--text-secondary, #64748b);
}
.tree-graph-node-chip {
    background: rgba(15, 23, 42, 0.04);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-weight: 500;
}
.tree-graph-node.has-error .tree-graph-node-chip:last-child { background: #fee2e2; color: #991b1b; }
.tree-graph-node.has-warning .tree-graph-node-chip:last-child { background: #fef3c7; color: #92400e; }
.tree-graph-node.has-info .tree-graph-node-chip:last-child { background: #dbeafe; color: #1e40af; }

.tree-graph-node-port {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    background: white;
    border: 2px solid var(--accent, #7CB342);
    border-radius: 999px;
    cursor: crosshair;
    /* Always visible (was hover-only) so consultants can find the connector. */
    opacity: 1;
    transition: transform 140ms;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}
.tree-graph-node-port:hover { transform: translateX(-50%) scale(1.3); }

/* Node-type accent: a coloured left rail + matching icon */
.tree-graph-node.node-type-question { --node-accent: #3b82f6; --node-icon-bg: #dbeafe; --node-icon-fg: #1e40af; }
.tree-graph-node.node-type-task { --node-accent: #10b981; --node-icon-bg: #d1fae5; --node-icon-fg: #065f46; }
.tree-graph-node.node-type-customselector { --node-accent: #8b5cf6; --node-icon-bg: #ede9fe; --node-icon-fg: #5b21b6; }
.tree-graph-node.node-type-recommendation { --node-accent: #f59e0b; --node-icon-bg: #fef3c7; --node-icon-fg: #92400e; }
.tree-graph-node.node-type-upsell { --node-accent: #f97316; --node-icon-bg: #ffedd5; --node-icon-fg: #9a3412; }
.tree-graph-node.node-type-computed { --node-accent: #6b7280; --node-icon-bg: #f3f4f6; --node-icon-fg: #374151; }
.tree-graph-node.node-type-eventtype,
.tree-graph-node.node-type-start { --node-accent: #0ea5e9; --node-icon-bg: #e0f2fe; --node-icon-fg: #075985; }

/* Locked nodes — pinned by the system, no drag, subtle visual cue */
.tree-graph-node.node-locked { cursor: default; border-style: dashed; }
.tree-graph-node.node-locked:hover { transform: none; }

/* Synthetic option-nodes — task-styled cards sitting between a Question and its downstream targets
   when the Question has branching ON. They are client-only (no TreeNode row) so they have no
   inspector / no + button / no port — clicking just opens the parent Question inspector. */
.tree-graph-node.synth-option.is-dead { border-style: dashed; border-color: #d97706; }

/* Per-node "+" button — always visible, anchored OUTSIDE the node card so the rounded
   corners and shadow don't clip it. Vertically centered on the right edge. */
.tree-graph-node-add {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--accent, #7CB342);
    color: white;
    border: 2px solid white;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    transition: transform 120ms, background 120ms;
    padding: 0;
    z-index: 5;
}
.tree-graph-node-add:hover { transform: translateY(-50%) scale(1.15); background: var(--accent-dark, #689F38); }
.tree-graph-node-add:active { transform: translateY(-50%) scale(0.95); }
/* "+ adds a Question" variant — used on synthetic option-nodes and the EventType seed. Blue
   to signal "wires up to the next Question", distinct from the green "+ adds an Option" on
   Questions themselves. */
.tree-graph-node-add.tree-graph-node-add-question { background: #3b82f6; }
.tree-graph-node-add.tree-graph-node-add-question:hover { background: #2563eb; }

/* Per-option × button — sits inside the synthetic option card's title row. Deletes ONLY that
   option (not the parent Question) via the dedicated DeleteOption endpoint. */
.tree-graph-option-delete {
    background: transparent;
    border: 0;
    padding: 0 0.25rem;
    margin-left: auto;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    border-radius: 4px;
    transition: background 120ms, color 120ms;
}
.tree-graph-option-delete:hover { background: #fee2e2; color: #b91c1c; }

/* Global "add" FAB. Hidden in v2: every node has its own + so a global add isn't needed.
   Kept in markup for legacy click handlers but display:none keeps it out of the consultant's way. */
.tree-graph-add-fab { display: none; }
.tree-graph-add-fab.legacy-show {
    display: inline-flex;
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3rem; height: 3rem;
    border-radius: 999px;
    background: var(--accent, #7CB342);
    color: white;
    border: 0;
    font-size: 1.625rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(124, 179, 66, 0.4), 0 2px 4px rgba(15, 23, 42, 0.1);
    z-index: 8;
    transition: transform 120ms, box-shadow 120ms;
    align-items: center; justify-content: center;
}
.tree-graph-add-fab:hover { background: var(--accent-dark, #689F38); transform: scale(1.06); box-shadow: 0 8px 22px rgba(124, 179, 66, 0.5); }
.tree-graph-add-fab:active { transform: scale(0.96); }

/* Floating toolbars */
.tree-graph-floatbar {
    position: absolute;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    /* Pinned above the inspector (z=7) so the controls never disappear under the side panel. */
    z-index: 8;
}
/* Top-left so the inspector (right side) never covers the controls regardless of width. */
.tree-graph-floatbar-top { top: 1rem; left: 1rem; }
.tree-graph-floatbar-bottom-left { left: 1rem; bottom: 1rem; z-index: 8; }
.floatbar-btn {
    background: transparent; border: 0;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.375rem;
    transition: background 120ms, color 120ms;
    min-width: 2rem;
    justify-content: center;
}
.floatbar-btn:hover { background: var(--surface-elevated, #f1f5f9); color: var(--text, #0f172a); }
.floatbar-btn.active { background: var(--accent, #7CB342); color: white; }
.floatbar-btn.active:hover { background: var(--accent-dark, #689F38); color: white; }
.floatbar-divider { width: 1px; height: 18px; background: var(--border-light, #e5e7eb); margin: 0 4px; }
.floatbar-validation .validation-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #10b981; }
.tree-graph-floatbar-bottom-left:has(.floatbar-validation:hover) .validation-dot,
.floatbar-validation.has-issues .validation-dot { background: #f59e0b; }

.tree-graph-validation-list {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    min-width: 320px;
    max-width: 480px;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 0.375rem;
    display: grid;
    gap: 0.125rem;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.tree-graph-validation-item { text-align: left; background: none; border: 0; padding: 0.5rem 0.625rem; border-radius: 6px; cursor: pointer; font-size: 0.8125rem; display: flex; gap: 0.5rem; align-items: flex-start; color: var(--text, #0f172a); }
.tree-graph-validation-item:hover { background: var(--surface-elevated, #f1f5f9); }
.tree-graph-validation-item .severity-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; margin-top: 0.375rem; flex-shrink: 0; }
.tree-graph-validation-item.severity-error .severity-dot { background: #dc2626; }
.tree-graph-validation-item.severity-warning .severity-dot { background: #d97706; }
.tree-graph-validation-item.severity-info .severity-dot { background: #2563eb; }

/* Inspector — slide-over from the right, collapsible. */
.tree-graph-inspector {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    background: white;
    border-left: 1px solid var(--border, #e5e7eb);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.06);
    z-index: 7;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
}
.tree-graph-inspector[data-collapsed="true"] { transform: translateX(calc(100% - 28px)); }
.tree-graph-inspector-handle {
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 64px;
    border: 1px solid var(--border, #e5e7eb);
    border-right: 0;
    background: white;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #64748b);
    box-shadow: -2px 0 6px rgba(15, 23, 42, 0.04);
}
.tree-graph-inspector-handle:hover { color: var(--accent, #7CB342); }
.tree-graph-inspector-handle .handle-icon { font-size: 1.25rem; line-height: 1; transition: transform 220ms; display: inline-block; }
.tree-graph-inspector[data-collapsed="false"] .handle-icon { transform: rotate(180deg); }
/* min-height:0 lets the flex child actually shrink and scroll instead of growing past the panel. */
.tree-graph-inspector-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden; /* hard guarantee — vertical scroll only inside the inspector */
    padding: 1.25rem 1.25rem 5rem;
}
.tree-graph-inspector-body * { box-sizing: border-box; }
.tree-graph-inspector-body input,
.tree-graph-inspector-body select,
.tree-graph-inspector-body textarea {
    max-width: 100%;
}
.tree-graph-inspector .pane-empty { padding: 3rem 1rem; text-align: center; color: var(--text-muted, #94a3b8); font-size: 0.875rem; }

/* Autosave status badge in the inspector header. */
.inspector-status { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: #f1f5f9; color: #64748b; vertical-align: middle; margin-left: 0.5rem; }
.inspector-status.is-saving { background: #fef3c7; color: #92400e; }
.inspector-status.is-saved { background: #dcfce7; color: #166534; }
.inspector-status.is-dirty { background: #fee2e2; color: #991b1b; }
.inspector-status.is-error { background: #fecaca; color: #7f1d1d; }
.inspector-status .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.7; }
/* Floatbar variant: drop the inspector-context margin since the floatbar has its own gap,
 * and bump the padding slightly so it reads as a peer of the floatbar buttons. */
.inspector-status.floatbar-status { margin-left: 0.25rem; padding: 0.25rem 0.625rem; }

/* Sticky footer keeps Delete / Close reachable no matter how long the form is. */
.node-editor-footer.sticky-footer {
    position: sticky;
    bottom: -1.25rem;
    margin: 0.75rem -1.25rem -1.25rem;
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
    background: white;
    border-top: 1px solid var(--border-light, #f0f0f0);
    z-index: 1;
}

/* Edge inspector */
.edge-inspector h4 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--text, #0f172a); }
.edge-inspector-line { font-size: 0.875rem; margin: 0.25rem 0; color: var(--text, #0f172a); }
.edge-inspector-line .meta { color: var(--text-muted, #94a3b8); margin-left: 0.25rem; font-size: 0.8125rem; }
.edge-inspector input[type="text"] { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }
.edge-inspector-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }

/* Block-label-row actions: place auto-layout / +Add Option side-by-side. */
.block-label-row-actions { display: inline-flex; gap: 0.75rem; align-items: center; }
.block-label-row-actions .link-btn { font-size: 0.8125rem; }

.hint { color: var(--text-muted, #94a3b8); font-size: 0.8125rem; margin: 0.5rem 0 0; }

.walk-input-row { display: flex; gap: 0.75rem; }
.walk-input-row label { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; font-size: 0.8125rem; color: var(--text-secondary, #64748b); }

/* Below ~900px the docked inspector becomes a bottom sheet. */
@media (max-width: 900px) {
    .tree-graph-inspector { width: 100%; height: 60vh; top: auto; bottom: 0; border-left: 0; border-top: 1px solid var(--border, #e5e7eb); transform: translateY(calc(100% - 32px)); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
    .tree-graph-inspector[data-collapsed="true"] { transform: translateY(calc(100% - 32px)); }
    .tree-graph-inspector[data-collapsed="false"] { transform: translateY(0); }
    .tree-graph-inspector-handle { left: 50%; top: -28px; transform: translateX(-50%); width: 64px; height: 28px; border-radius: 8px 8px 0 0; border: 1px solid var(--border, #e5e7eb); border-bottom: 0; }
    .tree-graph-inspector[data-collapsed="false"] .handle-icon { transform: rotate(-90deg); }
    .tree-graph-inspector[data-collapsed="true"] .handle-icon { transform: rotate(90deg); }
}

/* ==== Inspector v2 — stacked vertical layout, toggle switches, option cards ====
 * Built to fit the 420px docked inspector without horizontal scroll. Every field gets
 * its own row; checkboxes are presented as iOS-style toggle switches; option rows are
 * vertical cards instead of a 5-column grid that used to crush sub-fields below ~80px.
 */
.node-editor { display: flex; flex-direction: column; gap: 1.125rem; }
.node-editor-head { display: flex; flex-direction: column; gap: 0.625rem; padding-bottom: 0.875rem; border-bottom: 1px solid var(--border-light, #f0f0f0); }
.node-editor-status-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.node-editor-eyebrow { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #94a3b8); font-weight: 600; }
.node-editor-section { display: flex; flex-direction: column; gap: 0.625rem; }
.node-editor-section:empty { display: none; }

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #6b7280); font-weight: 600; }
.field-hint { text-transform: none; letter-spacing: 0; color: var(--text-muted, #9ca3af); font-weight: 400; font-size: 0.7rem; margin-left: 0.25rem; }
.field-input { width: 100%; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font: inherit; background: white; min-width: 0; }
.field-input:focus { outline: 2px solid var(--accent, #7CB342); outline-offset: -1px; border-color: transparent; }
.field-input-narrow { max-width: 5rem; }
.field-inline { flex-direction: row; align-items: center; gap: 0.75rem; }
.field-inline .field-label { flex: 1; margin: 0; }
.field-compact { gap: 0.2rem; }
.field-compact .field-label { font-size: 0.625rem; }
.field-compact .field-input { padding: 0.4rem 0.5rem; font-size: 0.8125rem; }
textarea.field-input { resize: vertical; min-height: 4.5rem; line-height: 1.45; }

/* Section heading row — small label on the left, pill-add button on the right. */
.section-heading-row { display: flex; justify-content: space-between; align-items: center; }
.btn-pill-add {
    background: white;
    border: 1px dashed var(--border, #cbd5e1);
    color: var(--accent, #6b8e23);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.btn-pill-add:hover { background: var(--accent, #7CB342); color: white; border-color: var(--accent, #7CB342); border-style: solid; }

/* Toggle switch — semantic checkbox underneath; track + thumb on top. */
.toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0;
    position: relative;
}
.toggle .toggle-label { flex: 1; font-size: 0.875rem; color: var(--text, #0f172a); }
.toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 180ms;
    flex-shrink: 0;
}
.toggle-track::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 180ms;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.toggle-input:checked ~ .toggle-track { background: var(--accent, #7CB342); }
.toggle-input:checked ~ .toggle-track::before { transform: translateX(16px); }
.toggle-input:focus-visible ~ .toggle-track { outline: 2px solid var(--accent, #7CB342); outline-offset: 2px; }

/* Option card — vertical layout per option. Replaces the old 5-column grid that
 * squashed sub-inputs to ~60px in the 420px inspector. */
.option-card {
    background: var(--surface-elevated, #f8fafc);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.option-card-head { display: flex; align-items: center; gap: 0.5rem; }
.option-card-index {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    flex-shrink: 0;
    min-width: 1.75rem;
    text-align: center;
    line-height: 1.2;
}
.option-card-label {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font: inherit;
    font-weight: 500;
    background: white;
}
.option-card-label:focus { outline: 2px solid var(--accent, #7CB342); outline-offset: -1px; border-color: transparent; }
.option-card-fields { display: flex; flex-direction: column; gap: 0.5rem; }

.option-list { display: flex; flex-direction: column; gap: 0.625rem; }

/* Small icon-only button (× clears / removes). */
.btn-icon-clear {
    background: transparent;
    border: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-icon-clear:hover { background: #fef2f2; color: #b91c1c; }

/* Branch picker tweaks: keep the dashed button and × clear aligned and full-width-flexible. */
.branch-picker { display: flex; align-items: center; gap: 0.375rem; }
.branch-picker .branch-target-btn { flex: 1; min-width: 0; }

/* ==== Right-click context menu (graph nodes + option pills) ==== */
.ctx-menu {
    position: fixed;
    z-index: 9999;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
    padding: 0.25rem;
    min-width: 200px;
    font-size: 0.875rem;
    list-style: none;
    margin: 0;
    animation: ctx-menu-pop 80ms ease-out;
}
@keyframes ctx-menu-pop {
    from { opacity: 0; transform: translateY(-2px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.45rem 0.625rem;
    border-radius: 5px;
    cursor: pointer;
    color: var(--text, #0f172a);
    user-select: none;
    line-height: 1.2;
}
.ctx-menu-item:hover { background: #f1f5f9; }
.ctx-menu-item.is-danger { color: #b91c1c; }
.ctx-menu-item.is-danger:hover { background: #fef2f2; }
.ctx-menu-item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.ctx-menu-icon {
    width: 16px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    flex-shrink: 0;
}
.ctx-menu-item.is-danger .ctx-menu-icon { color: #ef4444; }
.ctx-menu-label { flex: 1; }
.ctx-menu-sep {
    height: 1px;
    background: var(--border-light, #f0f0f0);
    margin: 0.25rem 0.125rem;
}

/* ==== Customer storefront ==== */
.storefront {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--primary-bg, #f5f5f5);
}

.storefront-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.storefront-brand strong { font-size: 1rem; }
.storefront-subtitle { color: var(--text-secondary, #6b7280); font-size: 0.875rem; margin-left: 0.5rem; }
.storefront-header-actions { display: flex; gap: 1rem; align-items: center; }
.storefront-header-actions a, .storefront-header-actions .link-btn {
    color: var(--text-secondary, #6b7280);
    text-decoration: none;
    font-size: 0.875rem;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.storefront-header-actions a:hover, .storefront-header-actions .link-btn:hover { color: var(--accent, #7CB342); }
.storefront-signout { display: inline; }

/* Event-type picker */
.storefront-picker { padding: 3rem 1.5rem; display: flex; justify-content: center; }
.picker-card {
    width: 100%;
    max-width: 880px;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 2rem 2.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.picker-card h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.picker-card-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1rem 0; }
.picker-card-state .meta { color: var(--text-secondary, #6b7280); margin: 0; max-width: 32rem; }
.picker-card-actions { display: flex; gap: 0.75rem; margin-top: 1rem; justify-content: center; }
.picker-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border-light, #f0f0f0);
    border-top-color: var(--accent, #7CB342);
    border-radius: 50%;
    animation: picker-spin 0.8s linear infinite;
    margin-bottom: 0.5rem;
}
@keyframes picker-spin { to { transform: rotate(360deg); } }
.picker-search { margin: 1.25rem 0 1rem; }
.picker-search input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 0.95rem;
}
.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.picker-option {
    text-align: left;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    display: grid;
    gap: 0.25rem;
    transition: border-color 120ms ease, transform 120ms ease;
}
.picker-option:hover { border-color: var(--accent, #7CB342); transform: translateY(-1px); }
.picker-option strong { font-size: 0.95rem; }
.picker-option small { color: var(--text-muted, #9ca3af); font-size: 0.75rem; }
.picker-error { color: #b91c1c; margin-top: 1rem; font-size: 0.875rem; }

.picker-option-skeleton {
    height: 4.25rem;
    background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%;
    border: 1px solid var(--border-light, #f0f0f0);
    cursor: default;
    animation: picker-skel 1.4s ease-in-out infinite;
}
@keyframes picker-skel {
    0% { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}
.picker-empty {
    grid-column: 1 / -1;
    background: var(--surface-elevated, #f8f9fa);
    border: 1px dashed var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9375rem;
}
.picker-empty strong { color: var(--text, #111827); }
.picker-empty small { display: inline-block; margin-top: 0.25rem; font-size: 0.8125rem; }

/* Three-pane shell */
.storefront-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

.storefront-banner {
    grid-column: 1 / -1;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    border: 1px solid transparent;
}
.storefront-banner-info {
    background: #eff6ff;
    color: #1e3a8a;
    border-color: #bfdbfe;
}

.storefront-tasklist, .storefront-rail, .storefront-main {
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
}
.storefront-tasklist, .storefront-rail {
    min-height: 480px;
}
.storefront-tasklist { padding: 0.875rem; position: sticky; top: 1rem; }
.storefront-tasklist header { display: flex; justify-content: space-between; align-items: baseline; padding: 0.25rem 0.5rem 0.875rem; }
.storefront-tasklist header strong { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary, #6b7280); }
.storefront-tasklist header span { font-size: 0.75rem; color: var(--text-muted, #9ca3af); font-variant-numeric: tabular-nums; }
.storefront-tasklist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }

.tasklist-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    cursor: default;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    transition: background 120ms ease, color 120ms ease;
}
.tasklist-item .tasklist-status {
    flex: 0 0 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f3f4f6;
    color: var(--text-muted, #9ca3af);
    font-variant-numeric: tabular-nums;
}
.tasklist-item .tasklist-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tasklist-item.tasklist-item-current {
    background: #ecfdf5;
    color: #065f46;
    cursor: pointer;
    font-weight: 600;
}
.tasklist-item.tasklist-item-current .tasklist-status {
    background: var(--accent, #7CB342);
    color: white;
    box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.18);
}
.tasklist-item.tasklist-item-done { color: var(--text, #111827); cursor: pointer; }
.tasklist-item.tasklist-item-done .tasklist-status { background: #d1fae5; color: var(--accent, #7CB342); }
.tasklist-item.tasklist-item-done:hover, .tasklist-item.tasklist-item-current:hover { background: var(--surface-elevated, #f8f9fa); }
.tasklist-item.tasklist-item-current:hover { background: #d1fae5; }

.storefront-main {
    padding: 1.25rem 1.5rem 1.75rem;
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

/* Progress bar */
.storefront-progress {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
}
.storefront-progress-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.8125rem;
}
.storefront-progress-label {
    font-weight: 600;
    color: var(--text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.storefront-progress-count {
    color: var(--text-muted, #9ca3af);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.storefront-progress-track {
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.storefront-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent, #7CB342) 0%, #4d9b1f 100%);
    border-radius: 999px;
    transition: width 280ms ease;
}

.storefront-task .task-card {
    display: grid;
    gap: 1rem;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 1.25rem 1.375rem;
}
.task-card header h2 { margin: 0; font-size: 1.375rem; line-height: 1.3; color: var(--text, #111827); }
.task-card header .meta { margin: 0.375rem 0 0; color: var(--text-secondary, #6b7280); font-size: 0.9375rem; }
.task-card-info, .task-card-end { background: var(--surface-elevated, #f8f9fa); }
.task-card-end h2 { margin-top: 0; font-size: 1.125rem; }

.task-options { display: grid; gap: 0.5rem; }
.task-option {
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 0.25rem;
    font: inherit;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.task-option strong { font-size: 0.9375rem; }
.task-option small { color: var(--text-muted, #9ca3af); font-size: 0.8125rem; line-height: 1.4; }
.task-option:hover { border-color: var(--accent, #7CB342); transform: translateY(-1px); }
.task-option.selected {
    border-color: var(--accent, #7CB342);
    background: #ecfdf5;
    box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.18);
}

/* Free-input answer fields: Number/Date/Time/Email/Phone/Url/TextInput/LongText/File etc.
   The storefront renderer drops the appropriate native control into [data-answer-input]
   and tags the container with .task-answer-free (single field) or with .task-address /
   .task-field-row layouts for structured inputs. */
.task-answer.task-answer-free { display: grid; gap: 0.5rem; }
.task-answer.task-options { display: grid; gap: 0.5rem; }

.task-field {
    display: grid;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}
.task-field > span { font-weight: 500; color: var(--text, #111827); }
.task-field input,
.task-field textarea,
.task-field select {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    font: inherit;
    background: white;
    color: var(--text, #111827);
}
.task-field input:focus,
.task-field textarea:focus,
.task-field select:focus {
    outline: none;
    border-color: var(--accent, #7CB342);
    box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.15);
}
.task-field input[type="file"] {
    padding: 0.375rem;
    background: var(--surface-elevated, #f8f9fa);
}
.task-field-hint { color: var(--text-muted, #9ca3af); font-size: 0.75rem; }

.task-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.task-address { display: grid; gap: 0.5rem; }

@media (max-width: 540px) {
    .task-field-row { grid-template-columns: 1fr; }
}

.task-products { display: grid; gap: 0.5rem; }
.task-products .product-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    background: var(--surface-elevated, #f8f9fa);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}
.product-row-info { display: grid; gap: 0.125rem; }
.product-row-info small { color: var(--text-muted, #9ca3af); font-size: 0.75rem; }
.product-row-qty { display: flex; gap: 0.375rem; align-items: center; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.product-row-qty input { width: 4rem; padding: 0.25rem 0.375rem; border: 1px solid var(--border, #e5e7eb); border-radius: 4px; font: inherit; }
.product-row-price { font-size: 0.8125rem; color: var(--text-muted, #9ca3af); white-space: nowrap; }

.task-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}
.selector-option {
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 0.75rem;
    cursor: pointer;
    display: grid;
    gap: 0.375rem;
    text-align: left;
    font: inherit;
}
.selector-option:hover { border-color: var(--accent, #7CB342); }
.selector-option.selected { border-color: var(--accent, #7CB342); box-shadow: 0 0 0 3px rgba(124, 179, 66, 0.2); }
.selector-thumb {
    aspect-ratio: 1.4;
    border-radius: 6px;
    background: #e5e7eb center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #9ca3af);
    font-weight: 600;
}
.selector-thumb.has-image { background-color: #d1d5db; }
.selector-label { font-weight: 600; font-size: 0.875rem; }
.selector-option small { color: var(--text-muted, #9ca3af); font-size: 0.75rem; }

.task-footer { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.task-notes summary { cursor: pointer; color: var(--text-secondary, #6b7280); font-size: 0.8125rem; }
.task-notes textarea { width: 100%; margin-top: 0.5rem; padding: 0.5rem 0.625rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; font: inherit; }
.task-footer-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Quote rail */
.storefront-rail { padding: 0.75rem; position: sticky; top: 1rem; display: grid; gap: 0.75rem; }
.storefront-rail header { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0.5rem; }
.storefront-rail header strong { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary, #6b7280); }
.quote-rail-status { font-size: 0.6875rem; padding: 0.125rem 0.5rem; background: #e5e7eb; border-radius: 999px; color: #374151; }

.quote-rail-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.375rem; }
.quote-rail-empty { color: var(--text-muted, #9ca3af); font-size: 0.875rem; padding: 1rem 0.5rem; text-align: center; }
.quote-rail-group { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted, #9ca3af); padding: 0.5rem 0.5rem 0.125rem; }
.quote-rail-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    background: var(--surface-elevated, #f8f9fa);
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
}
.quote-rail-item-info { display: grid; gap: 0.125rem; }
.quote-rail-item-info strong { font-size: 0.875rem; }
.quote-rail-item-info small { color: var(--text-muted, #9ca3af); font-size: 0.75rem; }
.quote-rail-item-total { font-size: 0.875rem; font-weight: 600; }

.quote-rail-totals {
    border-top: 1px solid var(--border-light, #f0f0f0);
    padding-top: 0.625rem;
    display: grid;
    gap: 0.25rem;
}
.quote-rail-totals > div { display: flex; justify-content: space-between; align-items: center; }
.quote-rail-totals > div span { color: var(--text-secondary, #6b7280); font-size: 0.875rem; }
.quote-rail-totals > div strong { font-size: 1rem; }
.quote-rail-totals .meta { font-size: 0.75rem; margin: 0; }

.quote-rail-actions .btn-action { width: 100%; padding: 0.625rem; }
.quote-rail-actions .btn-action:disabled { background: var(--border, #e5e7eb); color: var(--text-muted, #9ca3af); cursor: not-allowed; }

/* Floating "View Quote" button — mobile only */
.storefront-view-quote-fab {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    background: var(--accent, #7CB342);
    color: white;
    border: 0;
    border-radius: 999px;
    padding: 0.75rem 1.125rem;
    font: inherit;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
}
.storefront-view-quote-fab .view-quote-fab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.4375rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.25);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.storefront-view-quote-fab:not(.has-items) .view-quote-fab-count { display: none; }

/* Toast */
.storefront-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: #111827;
    color: white;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    z-index: 1080;
}
.storefront-toast.toast-error { background: #991b1b; }

@media (max-width: 1100px) {
    .storefront-shell { grid-template-columns: 1fr; gap: 1rem; }
    .storefront-tasklist, .storefront-rail { position: static; min-height: 0; }
}

/* Phone breakpoint — mobile mock-up layout:
   progress bar on top, question card, quote button bottom-right floating,
   AI assistant chat docked at the bottom. The tasklist is hidden in favour
   of the progress bar, since space is at a premium. */
@media (max-width: 720px) {
    .storefront-header {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.625rem 0.875rem;
    }
    .storefront-shell {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .storefront-picker {
        padding: 1.5rem 0.875rem;
    }
    .picker-card {
        padding: 1.25rem 1rem;
    }
    .picker-grid {
        grid-template-columns: 1fr;
    }

    /* Tasklist is hidden on phones — progress bar carries step info. */
    .storefront-tasklist { display: none; }

    .storefront-main {
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        min-height: auto;
        gap: 0.75rem;
    }
    .storefront-task .task-card { padding: 1.125rem 1rem; }
    .task-card header h2 { font-size: 1.1875rem; }

    /* Quote rail: fixed bottom drawer, hidden by default; the FAB opens it. */
    .storefront-rail {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        margin: 0;
        border-radius: 14px 14px 0 0;
        border-bottom: 0;
        z-index: 1050;
        max-height: 75vh;
        display: flex;
        flex-direction: column;
        padding: 0.875rem 1rem 1rem;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
        min-height: 0;
        transform: translateY(100%);
        transition: transform 240ms ease;
    }
    .storefront-rail.is-open { transform: translateY(0); }
    .storefront-rail::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0.375rem;
        width: 2.5rem;
        height: 3px;
        background: var(--border, #e5e7eb);
        border-radius: 999px;
        transform: translateX(-50%);
    }
    .storefront-rail header {
        padding: 0.625rem 0.25rem 0.5rem;
        border-bottom: 1px solid var(--border-light, #f0f0f0);
        cursor: pointer;
    }
    .storefront-rail .quote-rail-list,
    .storefront-rail .quote-rail-totals,
    .storefront-rail .quote-rail-actions {
        overflow-y: auto;
    }

    .storefront-view-quote-fab { display: inline-flex; }

    .product-row, .task-products .product-row {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        row-gap: 0.5rem;
    }
    .product-row .product-row-qty { grid-column: 2; justify-self: start; }
    .product-row .product-row-price { grid-column: 2; justify-self: end; }

    .task-footer-actions { flex-wrap: wrap; }
    .task-footer-actions button { flex: 1 1 auto; }

    .storefront-toast { left: 0.75rem; right: 0.75rem; bottom: auto; top: 0.75rem; }

    /* On phones, surface the AI assistant as a docked bottom-of-page panel
       — it's already inside the task card via <details>, but we restyle it
       to feel like the "AI Assistant Chat" bar from the mock. */
    .rooney-panel {
        margin-top: 0.5rem;
        border-radius: 12px;
    }
    .rooney-panel > summary {
        padding: 0.75rem 0.875rem;
        font-weight: 600;
    }
}

/* Ask Rooney — per-task AI assistant panel */
.rooney-panel {
    margin: 1rem 0 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface-elevated, #f8f9fa);
    overflow: hidden;
}
.rooney-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    user-select: none;
}
.rooney-panel > summary::-webkit-details-marker { display: none; }
.rooney-panel[open] > summary { border-bottom: 1px solid var(--border-light, #f0f0f0); }
.rooney-panel .rooney-icon {
    width: 1.5rem; height: 1.5rem; border-radius: 999px;
    background: var(--accent, #7CB342); color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem;
}
.rooney-panel .rooney-title { font-weight: 600; }
.rooney-panel .rooney-hint { color: var(--text-muted, #9ca3af); font-size: 0.8125rem; margin-left: auto; }

.rooney-body { padding: 0.75rem 0.875rem; display: grid; gap: 0.625rem; }
.rooney-log {
    max-height: 240px;
    overflow-y: auto;
    display: grid;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.rooney-log:empty::before {
    content: 'Ask about this step — Rooney can suggest options or quantities.';
    color: var(--text-muted, #9ca3af);
    font-size: 0.8125rem;
}
.rooney-msg { display: grid; gap: 0.125rem; }
.rooney-msg-role {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #9ca3af);
}
.rooney-msg-content {
    margin: 0;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.rooney-msg[data-role="user"] .rooney-msg-content { border-color: #dbeafe; }

.rooney-input { display: flex; gap: 0.5rem; align-items: flex-start; }
.rooney-input textarea {
    flex: 1;
    resize: vertical;
    min-height: 2.25rem;
    font: inherit;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
}
.rooney-input .btn-action { padding: 0.5rem 0.875rem; }
.rooney-input .btn-action:disabled { opacity: 0.6; cursor: progress; }

/* Hint overlays on product rows */
.product-row-recommended {
    border: 1px solid var(--accent, #7CB342);
    box-shadow: 0 0 0 2px rgba(124, 179, 66, 0.12);
    background: #f7fdf2;
}
.rooney-chip {
    display: inline-block;
    margin-top: 0.25rem;
    background: var(--accent, #7CB342);
    color: white;
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.rooney-qty-chip {
    display: block;
    margin-top: 0.125rem;
    color: var(--accent-dark, #689F38);
    font-size: 0.6875rem;
    font-weight: 600;
}

/* ==== Quote summary ==== */
.quote-summary { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; }
.quote-summary .meta { color: var(--text-secondary, #6b7280); font-size: 0.875rem; margin: 0.25rem 0; }
.quote-summary .meta span { margin-right: 0.5rem; }

.quote-summary-hero {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.quote-summary-hero h1 { margin: 0.25rem 0 0.5rem; font-size: 1.625rem; }
.quote-summary-back { color: var(--text-secondary, #6b7280); text-decoration: none; font-size: 0.875rem; }
.quote-summary-back:hover { color: var(--accent, #7CB342); }

.quote-summary-hero-totals {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: right;
    min-width: 180px;
}
.quote-summary-hero-totals strong { display: block; font-size: 1.25rem; color: var(--accent-dark, #689F38); }
.quote-summary-hero-actions { margin-top: 0.5rem; }

.quote-summary-sections { display: flex; flex-direction: column; gap: 1rem; }

.summary-section {
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}
.summary-section header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; gap: 1rem; }
.summary-section h2 { margin: 0; font-size: 1.125rem; }
.summary-section header .meta { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted, #9ca3af); }
.summary-section-body { color: var(--text-secondary, #6b7280); margin: 0 0 0.75rem; }

.summary-section-answer { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 0.75rem; }
.summary-section-answer dt { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted, #9ca3af); }
.summary-section-answer dd { margin: 0; font-size: 0.9375rem; }
.summary-section-answer .summary-note { font-style: italic; color: var(--text-secondary, #6b7280); }

.summary-line-items { width: 100%; border-collapse: collapse; margin-top: 0.5rem; font-size: 0.875rem; }
.summary-line-items th, .summary-line-items td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--border-light, #f0f0f0); text-align: left; }
.summary-line-items th { background: var(--surface-elevated, #f8f9fa); font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary, #6b7280); }
.summary-line-items .num { text-align: right; }
.summary-line-items-subtotal td { font-weight: 600; background: var(--surface-elevated, #f8f9fa); }

.summary-transcript { margin-top: 0.75rem; border-top: 1px dashed var(--border, #e5e7eb); padding-top: 0.5rem; }
.summary-transcript summary { cursor: pointer; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.summary-transcript ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.summary-transcript li { background: var(--surface-elevated, #f8f9fa); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.summary-transcript li strong { font-size: 0.75rem; text-transform: uppercase; color: var(--accent-dark, #689F38); }
.summary-transcript li .meta { display: inline; margin-left: 0.5rem; font-size: 0.6875rem; }
.summary-transcript li p { margin: 0.25rem 0 0; white-space: pre-wrap; }
.summary-transcript-user { background: #eff6ff; }
.summary-transcript-assistant { background: #ecfdf5; }

.quote-summary-status-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--surface-elevated, #f8f9fa);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
}
.quote-summary-status-form label { font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.quote-summary-status-form select { padding: 0.375rem 0.5rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; }

.quote-summary-chat { margin-top: 2rem; }
.quote-summary-chat header { margin-bottom: 0.75rem; }
.quote-summary-chat header h2 { margin: 0; font-size: 1.125rem; }

@media print {
    .quote-summary-hero-actions, .quote-summary-back, .quote-summary-status-form, .quote-summary-chat { display: none; }
    .summary-section, .quote-summary-hero { box-shadow: none; border-color: #ddd; }
    .summary-transcript[open] summary { display: none; }
}

/* ---------- Tree-builder AI assistant panel ---------- */
.tree-ai-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 380px;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    background: white;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    z-index: 80;
    overflow: hidden;
}
.tree-ai-panel[hidden] { display: none; }
.tree-ai-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-light, #f0f0f0);
    background: var(--surface-elevated, #f8f9fa);
}
.tree-ai-panel-header strong { font-size: 0.95rem; }
.tree-ai-panel-close {
    background: none; border: none; cursor: pointer;
    font-size: 1.25rem; line-height: 1; color: var(--text-secondary, #6b7280);
    padding: 0.125rem 0.5rem; border-radius: 6px;
}
.tree-ai-panel-close:hover { background: rgba(0,0,0,0.05); color: var(--text, #111827); }
.tree-ai-panel-log {
    flex: 1 1 auto; overflow-y: auto;
    padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;
    font-size: 0.875rem; line-height: 1.45;
}
.tree-ai-msg { padding: 0.5rem 0.75rem; border-radius: 8px; max-width: 92%; word-wrap: break-word; white-space: pre-wrap; }
.tree-ai-msg-system { background: #f1f5f9; color: var(--text-secondary, #475569); align-self: center; max-width: 100%; font-size: 0.8125rem; }
.tree-ai-msg-system em { color: #1e293b; font-style: normal; background: #e2e8f0; padding: 0 0.25rem; border-radius: 3px; }
.tree-ai-msg-user { background: var(--accent, #7CB342); color: white; align-self: flex-end; }
.tree-ai-msg-assistant { background: #f8f9fa; border: 1px solid var(--border-light, #f0f0f0); color: var(--text, #111827); align-self: flex-start; }
.tree-ai-msg-pending { color: var(--text-secondary, #6b7280); font-style: italic; }
.tree-ai-tools {
    align-self: stretch; display: flex; flex-direction: column; gap: 0.25rem;
    margin: 0.125rem 0;
    font-size: 0.75rem;
}
.tree-ai-tool {
    padding: 0.3rem 0.55rem; border-radius: 6px; border: 1px solid var(--border-light, #f0f0f0);
    background: #fafbfc; color: var(--text-secondary, #6b7280);
}
.tree-ai-tool.ok { border-left: 3px solid var(--accent, #7CB342); }
.tree-ai-tool.fail { border-left: 3px solid #dc2626; color: #7f1d1d; }
.tree-ai-tool code { background: rgba(0,0,0,0.05); padding: 0 0.25rem; border-radius: 3px; font-size: 0.7rem; }
.tree-ai-panel-input {
    display: flex; gap: 0.5rem; padding: 0.625rem;
    border-top: 1px solid var(--border-light, #f0f0f0);
    background: white;
}
.tree-ai-panel-input textarea {
    flex: 1; resize: none;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
    font-family: inherit; font-size: 0.875rem; line-height: 1.4;
}
.tree-ai-panel-input textarea:focus { outline: none; border-color: var(--accent, #7CB342); box-shadow: 0 0 0 2px rgba(124,179,66,0.15); }
.tree-ai-panel-input .btn-action { align-self: stretch; padding: 0.5rem 0.875rem; }
.tree-ai-panel-input .btn-action:disabled { opacity: 0.6; cursor: progress; }