/**
 * Cognitive Studio Visualizer CSS - Consolidated
 * Version 2.2 - Iteration 182
 * Enhanced with Gate-above-branches layout
 * ITERATION 267: Button styles moved to as-vis-buttons.css
 */

/* ===================================
   CSS VARIABLES & THEME
   =================================== */
:root {
    /* Intent level colors */
    --intent-purple: 168, 85, 247;
    --intent-indigo: 102, 126, 234;
    --intent-blue: 59, 130, 246;
    --intent-green: 34, 197, 94;
    
    /* Spacing - ITERATION 129: Reduced values */
    --intent-indent: 70px;  /* Reduced from 90px */
    --intent-gap: 4px;      /* Reduced from 8px */
    --intent-padding: 5px;  /* Reduced from 6px */
    
    /* ITERATION 182: Gate purple color */
    --gate-purple: 147, 51, 234;
}

/* ===================================
   BASE STRUCTURE
   =================================== */

/* Block wrapper - ITERATION 129: Removed extra margin */
.intent-block-wrapper {
    position: relative;
    margin-bottom: 0;
}

.intent-block-wrapper[data-level="0"] {
    margin-bottom: 0;  /* Removed gap, let drop zones handle spacing */
}

/* Main block styling - ITERATION 129: Further reduced padding to 5px */
.intent-block-instance {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: grab;
    padding: 5px;  /* Reduced from 6px 8px to uniform 5px */
}

.intent-block-instance:active {
    cursor: grabbing;
}

.intent-block-instance:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===================================
   TABLE LAYOUT - ITERATION 129: Remove extra margins
   =================================== */

/* Intent table structure */
.intent-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;  /* REMOVED the 20px margin that was causing extra space */
}

/* ITERATION 129: Specific cell padding reductions */
.intent-name-cell,
.intent-desc-cell {
    padding: 5px !important;  /* Reduced from 20px to 5px */
}

/* Also ensure the intent rows respect the tighter spacing */
.intent-name-row,
.intent-desc-row,
.intent-nested-row {
    /* Remove any default spacing that might be added */
    margin: 0;
    padding: 0;
}

.intent-row {
    display: table-row;
}

.intent-col {
    display: table-cell;
    vertical-align: middle;
    padding: var(--intent-padding);
}

/* Column widths */
.col-icon {
    width: var(--intent-indent);
    text-align: center;
}

.col-content {
    /* Takes remaining space */
}

.col-controls {
    width: auto;
    text-align: right;
    padding-right: 40px; /* Space for absolute positioned remove button */
}
.col-nested {
    width: 100% !important;
    max-width: none !important;
}

/* Or if using the new structure */
.intent-nested-cell {
    width: 100% !important;
    max-width: none !important;
    padding: 5px !important;  /* ITERATION 129: Match the 5px padding */
}

/* Main row - ITERATION 129: Reduced min-height */
.main-row {
    position: relative;
    min-height: 40px;  /* Further reduced from 48px */
}

/* ===================================
   NESTED LAYOUT - ITERATION 129: Tighter spacing
   =================================== */

/* Nested row */
.nested-row .col-nested {
    padding: 0;
    background: rgba(0, 0, 0, 0.02);
    border-top: 1px solid rgba(var(--intent-purple), 0.2);
}

/* Nested intent modifications */
.intent-block-instance.nested-intent {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 5px;  /* Ensure nested intents also have 5px padding */
}

.intent-block-instance.nested-intent:last-child {
    border-bottom: none;
}

/* ===================================
   LEVEL-BASED STYLING
   =================================== */

/* Level 0 - Base */
.intent-block-instance.level-0 {
    background: var(--bg-secondary);
}

/* Level 1 - Purple */
.intent-block-instance.level-1 {
    background: rgba(var(--intent-purple), 0.03);
    border-color: rgba(var(--intent-purple), 0.15);
}

/* Level 2 - Indigo */
.intent-block-instance.level-2 {
    background: rgba(var(--intent-indigo), 0.03);
    border-color: rgba(var(--intent-indigo), 0.15);
}

/* Level 3 - Blue */
.intent-block-instance.level-3 {
    background: rgba(var(--intent-blue), 0.03);
    border-color: rgba(var(--intent-blue), 0.15);
}

/* Level 4 - Green */
.intent-block-instance.level-4 {
    background: rgba(var(--intent-green), 0.03);
    border-color: rgba(var(--intent-green), 0.15);
}

/* ===================================
   CONTAINER STYLING
   =================================== */

/* Container styling adjustments */
.intent-block-instance.container-type {
    position: relative;
    overflow: visible;
}

.intent-block-instance.container-type:hover {
    border-color: rgba(var(--intent-purple), 0.5);
}
/* Clean up - remove old indicators */
.container-indicator,
.nest-depth-indicator,
.col-controls {
    display: none !important;
}

/* ===================================
   CONTENT ELEMENTS - ITERATION 129: Reduced sizes
   =================================== */

/* Icons */
.intent-icon {
    font-size: 48px;  /* Reduced from 32px */
    line-height: 1;
    display: block;
    margin-top: 2px;  /* Reduced from 4px */
}

/* Icon cell - fixed width - ITERATION 129: Tighter padding */
.intent-icon-cell {
    width: 32px;
    text-align: center;
    vertical-align: top;
    padding: 2px;  /* Reduced from 8px 6px to uniform 5px */
}

/* Line numbers */
.intent-line-number {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
    font-weight: 600;
    opacity: 0.7;
}

/* Nested line numbers with level colors */
.nested-intent .intent-line-number {
    padding: 1px 4px;  /* Reduced from 2px 6px */
    border-radius: 3px;
    display: inline-block;
}

/* Level-based coloring for nested rows */
.level-1 .intent-nested-row {
    background: rgba(var(--intent-purple), 0.02);
}

.level-2 .intent-nested-row {
    background: rgba(var(--intent-indigo), 0.02);
}

.level-3 .intent-nested-row {
    background: rgba(var(--intent-blue), 0.02);
}

.level-4 .intent-nested-row {
    background: rgba(var(--intent-green), 0.02);
}

/* Ensure proper spacing - ITERATION 129: Reduced font sizes */
.intent-type {
    font-weight: 600;
    font-size: 14px;  /* Reduced from 16px */
    color: var(--text-primary);
    margin: 0;  /* Remove any default margins */
}

.intent-summary {
    font-size: 12px;  /* Reduced from 14px */
    color: var(--text-secondary);
    line-height: 1.3;  /* Reduced from 1.4 */
    margin: 0;  /* Remove any default margins */
}

/* Large background brackets for containers */
.intent-bracket-left,
.intent-bracket-right {
    position: absolute;
    top: 0;
    bottom: 0;
    font-family: 'Courier New', monospace;
    font-size: 60px;  /* Reduced from 80px */
    font-weight: 300;
    color: rgba(var(--intent-purple), 0.1);
    display: flex;
    align-items: center;
    pointer-events: none;
    user-select: none;
}

.intent-bracket-left {
    left: 3px;  /* Reduced from 5px */
}

.intent-bracket-right {
    right: 3px;  /* Reduced from 5px */
}

/* ===================================
   DROP ZONES - ITERATION 129: Minimal height
   =================================== */

.intent-drop-zone {
    position: relative;
    height: 4px;  /* Reduced from 10px */
    margin: 1px 0;  /* Reduced from 2px */
    visibility: hidden;
    transition: all 0.2s ease;
}

/* Drop indicator line */
.intent-drop-zone .drop-indicator-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgb(var(--intent-blue));
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Active drop zone */
.intent-drop-zone.active-drop-zone {
    min-height: 12px;  /* Reduced from 20px */
    background: rgba(var(--intent-blue), 0.1);
}

.intent-drop-zone.active-drop-zone .drop-indicator-line {
    opacity: 1;
    box-shadow: 0 0 10px rgba(var(--intent-blue), 0.7);
}

/* Drop zones in nested sections */
.col-nested .intent-drop-zone {
    height: 2px;  /* Reduced from 4px */
    margin: 0;
}

.col-nested .intent-drop-zone.active-drop-zone .drop-indicator-line {
    background: rgb(var(--intent-purple));
    height: 2px;
}

/* Empty container styling - ITERATION 129: Reduced spacing */
.empty-container-drop {
    margin: 8px;  /* Reduced from 12px */
    min-height: 48px;  /* Reduced from 60px */
}

.empty-hint {
    color: rgba(var(--intent-purple), 0.5);
    font-size: 12px;  /* Reduced from 13px */
    font-style: italic;
}

/* ===================================
   DRAG STATES
   =================================== */

/* Program display states */
.program-display.drag-over {
    background: rgba(var(--intent-indigo), 0.05);
    border: 2px dashed rgba(var(--intent-indigo), 0.3);
}

.program-display.drag-over-empty {
    background: rgba(var(--intent-blue), 0.05);
}

/* Show drop zones during drag */
.program-display.drag-over .intent-drop-zone {
    visibility: visible;
    min-height: 4px;  /* Reduced from 6px */
}

/* Dragging states */
.intent-block-instance.dragging,
.intent-block-instance.dragging-internal {
    opacity: 0.5;
}

.col-nested.drag-over {
    background: rgba(var(--intent-purple), 0.05);
}

/* ===================================
   EMPTY STATE - ITERATION 129: Reduced padding
   =================================== */

.empty-program {
    text-align: center;
    padding: 40px 16px;  /* Reduced from 60px 20px */
    color: var(--text-muted);
    pointer-events: none;
}

.empty-program .empty-icon {
    font-size: 48px;
    opacity: 0.5;
    margin-bottom: 12px;  /* Reduced from 16px */
}

.empty-program p {
    margin: 6px 0;  /* Reduced from 8px */
}

.empty-program .hint {
    font-size: 13px;  /* Reduced from 14px */
    opacity: 0.7;
}

/* ===================================
   TOAST NOTIFICATIONS
   =================================== */

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);  /* Reduced padding */
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    position: fixed;
    top: 20px;
    right: -420px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10003;
}

.toast.show {
    right: 20px;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Toast variants */
.toast-success {
    border-color: var(--success);
    background: linear-gradient(to right,
        rgba(16, 185, 129, 0.1) 0%,
        var(--bg-secondary) 100%
    );
}

.toast-warning {
    border-color: var(--warning);
    background: linear-gradient(to right,
        rgba(245, 158, 11, 0.1) 0%,
        var(--bg-secondary) 100%
    );
}

.toast-error {
    border-color: var(--error);
    background: linear-gradient(to right,
        rgba(239, 68, 68, 0.1) 0%,
        var(--bg-secondary) 100%
    );
}

/* ITERATION 129: Clean up table spacing */
.intent-nested-row td {
    padding: 0;
    background: rgba(0, 0, 0, 0.02);
}

/* Nested cell content */
.intent-nested-cell {
    padding: 4px 0;  /* Reduced from 8px */
}

/* Nested blocks fill width */
.intent-nested-cell .intent-block-wrapper {
    width: 100%;
}

.intent-nested-cell .intent-block-instance {
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.intent-nested-cell .intent-block-instance:last-child {
    border-bottom: none;
}

.intent-desc-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Icon sizing - ITERATION 129: Reduced */
.intent-icon {
    font-size: 30px;  /* Reduced from 36px */
    line-height: 1;
}

/* ===================================
   ANIMATIONS
   =================================== */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 1200px) {
    .col-icon {
        width: 60px;  /* Reduced from 70px */
    }
    
    .intent-icon {
        font-size: 24px;  /* Reduced from 28px */
    }
}

/* ===================================
   ITERATION 177 - Cognitive Sockets
   =================================== */

/* Conditional & Monitor Block Modifiers */
.intent-block--conditional {
    border-top: 3px solid var(--gatekeeper-purple, #8B5CF6);
    background: linear-gradient(180deg, 
        rgba(139, 92, 246, 0.05) 0%, 
        transparent 100px);
}

.intent-block--monitor {
    border-left: 3px solid var(--spymaster-orange, #F97316);
    background: linear-gradient(90deg,
        rgba(249, 115, 22, 0.05) 0%,
        transparent 100px);
}

/* Socket Zone Base Styles */
.socket-zone {
    margin: 10px;
    padding: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.socket-zone--gate {
    border-color: rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.1) 0%, 
        rgba(139, 92, 246, 0.05) 100%);
}

.socket-zone--spymaster {
    border-color: rgba(249, 115, 22, 0.3);
    background: linear-gradient(135deg,
        rgba(249, 115, 22, 0.1) 0%,
        rgba(249, 115, 22, 0.05) 100%);
}

/* Socket Occupied State */
.socket-zone--occupied {
    border-style: solid;
    background: rgba(0, 0, 0, 0.5);
}

.socket-zone--occupied .socket-placeholder {
    display: none;
}

/* Socket Ready State (when dragging compatible item) */
.socket-zone--ready {
    animation: socket-pulse 1s infinite;
}

.socket-zone--gate.socket-zone--ready {
    border-color: #F59E0B;
    background: rgba(245, 158, 11, 0.2);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.socket-zone--spymaster.socket-zone--ready {
    border-color: #F97316;
    background: rgba(249, 115, 22, 0.2);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

@keyframes socket-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Socket Labels */
.socket-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.socket-icon {
    font-size: 1.2rem;
}

/* Socket Placeholder (empty state) */
.socket-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 60px;
}

.socket-plug {
    font-size: 2rem;
    opacity: 0.3;
    animation: plug-rotate 3s linear infinite;
}

@keyframes plug-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.socket-hint {
    margin-top: 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* Socket Content (when occupied) */
.socket-content {
    margin-top: 10px;
}

.socket-content .intent-block {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Monitored Intents Zone */
.monitored-intents-zone {
    margin: 15px;
    padding: 15px;
    background: rgba(59, 130, 246, 0.05);
    border: 2px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.zone-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

.zone-icon {
    font-size: 1.2rem;
}

.monitored-intents-container {
    min-height: 100px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* SpyMaster Containers */
.spymaster-sockets {
    margin: 15px;
}

.spymaster-container {
    margin-bottom: 20px;
    padding-left: 20px;
    border-left: 2px solid rgba(249, 115, 22, 0.2);
}

/* Reaction Intents Zone */
.reaction-intents-zone {
    margin-top: 10px;
    margin-left: 20px;
}

.reaction-intents-container {
    min-height: 80px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 1px dashed rgba(249, 115, 22, 0.2);
}

.indented {
    margin-left: 20px;
}

/* Add SpyMaster Button */
.add-spymaster-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 8px 16px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px dashed rgba(249, 115, 22, 0.3);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.add-spymaster-btn:hover {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.5);
    color: rgba(255, 255, 255, 0.9);
}

.btn-icon {
    font-size: 1rem;
}

/* Remove SpyMaster Button */
.remove-spymaster {
    margin-left: auto;
    padding: 2px 6px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.remove-spymaster:hover {
    background: rgba(239, 68, 68, 0.4);
    color: #fff;
}

/* Drag States */
.dragging-gate {
    cursor: grabbing;
}

.dragging-spymaster {
    cursor: grabbing;
}

/* Visual feedback during drag */
body.dragging-gate .socket-zone--gate:not(.socket-zone--occupied) {
    animation: gate-glow 1s infinite;
}

body.dragging-spymaster .socket-zone--spymaster:not(.socket-zone--occupied) {
    animation: spymaster-glow 1s infinite;
}

@keyframes gate-glow {
    0%, 100% {
        border-color: rgba(245, 158, 11, 0.3);
        box-shadow: none;
    }
    50% {
        border-color: rgba(245, 158, 11, 0.8);
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
    }
}

@keyframes spymaster-glow {
    0%, 100% {
        border-color: rgba(249, 115, 22, 0.3);
        box-shadow: none;
    }
    50% {
        border-color: rgba(249, 115, 22, 0.8);
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
    }
}

/* Drop hint visibility */
.drop-hint {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.875rem;
    font-style: italic;
}

/* Execution State Animations */
.socket-zone--executing {
    animation: executing-pulse 2s infinite;
}

@keyframes executing-pulse {
    0%, 100% {
        background-color: rgba(34, 197, 94, 0.1);
    }
    50% {
        background-color: rgba(34, 197, 94, 0.2);
    }
}

/* Error State */
.socket-zone--error {
    border-color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* CSS Variables for Theme Consistency */
:root {
    --gatekeeper-purple: #8B5CF6;
    --spymaster-orange: #F97316;
    --eventbus-blue: #3B82F6;
    --filehandle-green: #10B981;
    --socket-yellow: #F59E0B;
}

/* ===================================
   ITERATION 178: BRANCH CONTAINER STYLES
   =================================== */

.branch-container {
    margin: 10px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}

.branch-section {
    margin-bottom: 15px;
    padding: 10px;
    border-left: 3px solid;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.branch-section:last-child {
    margin-bottom: 0;
}

.true-branch {
    border-color: #10b981;
}

.false-branch {
    border-color: #ef4444;
}

.try-block {
    border-color: #3b82f6;
}

.catch-block {
    border-color: #f59e0b;
}

.finally-block {
    border-color: #8b5cf6;
}

.switch-case {
    border-color: #06b6d4;
}

.switch-default {
    border-color: #64748b;
}

.branch-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.branch-icon {
    font-size: 32px;
}

/* Change this existing rule */
.branch-content {
    padding-left: 5px; /* was 20px */
}

.empty-branch,
.empty-monitored {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    border: 2px dashed rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.container-content {
    padding: 10px 0;
}

/* Ensure nested intents in branches are properly indented */
.branch-content .intent-block-wrapper {
    margin-left: 0;
}

/* Visual distinction for branching containers */
.branching-container {
    background: linear-gradient(135deg, 
        rgba(var(--intent-purple), 0.05) 0%, 
        transparent 100%);
}

.monitor-container {
    background: linear-gradient(135deg,
        rgba(var(--intent-blue), 0.05) 0%,
        transparent 100%);
}

/* ===================================
   ITERATION 182: Gate Section Styling
   =================================== */
.gate-section {
    border-color: #F59E0B; /* Yellow to match socket */
    background: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.1) 0%, 
        rgba(245, 158, 11, 0.05) 100%);
}

.gate-section.empty {
    border-style: dashed;
    opacity: 0.8;
}

.gate-section .branch-header {
    color: #fbbf24; /* Light yellow */
}

.gate-section .branch-icon {
    color: #F59E0B;
}

/* Visual hierarchy - gate slightly larger */
.gate-section .socket-zone {
    margin: 0;
    min-height: 80px;
}

/* Vertical alignment enhancement */
.if-else-branches {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.if-else-branches .branch-section {
    margin-bottom: 0; /* Let gap handle spacing */
}

/* Gate glow effect when ready */
.gate-section .socket-zone--ready {
    border-color: #F59E0B; /* was #9333EA */
    background: rgba(245, 158, 11, 0.2); /* was rgba(147, 51, 234, 0.2) */
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); /* was rgba(147, 51, 234, 0.4) */
}

/* Lock icon animation for emphasis */
@keyframes lock-pulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
}

.gate-section .branch-icon {
    display: inline-block;
    animation: lock-pulse 3s ease-in-out infinite;
    color: #F59E0B;
}

/* ITERATION 182: Enhanced visual separation */
.gate-section + .true-branch {
    margin-top: 5px;
}

.gate-section .socket-content .intent-block-instance {
    border: 2px solid #F59E0B; /* was #9333EA */
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.05) 0%, /* was rgba(147, 51, 234, 0.05) */
        transparent 100%);
}

/* And add this to reduce all nested content padding */
.nested-intents-container,
.container-content {
    padding-left: 5px; /* reduce from default */
}

/* ITERATION 182: Intent parameter menu positioning fixes */
.intent-parameter-menu {
    position: fixed !important; /* Ensure it's fixed */
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8); /* Darker shadow for visibility */
    min-width: 280px;
    max-width: 400px;
    z-index: 999999;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s ease;
    max-height: 80vh; /* Prevent menu from being too tall */
    overflow-y: auto;
}

/* Ensure menu stays on top of everything */
.intent-parameter-menu.active {
    opacity: 1;
    transform: scale(1);
    z-index: 999999 !important;
}

/* Ensure scrollbar is visible when needed */
.intent-parameter-menu::-webkit-scrollbar {
    width: 8px;
}

.intent-parameter-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.intent-parameter-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* Gate blocks in palette - matching socket color */
.intent-block--gate {
    background: linear-gradient(135deg, #2b2202 0%, #3a3520 100%);
    border: 2px solid #412a03; /* Amber/yellow border */
}

.intent-block--gate:hover {
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, #5a5540 0%, #4a4530 100%);
}

/* SpyMaster blocks in palette */
.intent-block--spymaster {
    background: linear-gradient(135deg, #553c2c 0%, #3e2723 100%);
    border: 2px solid #ff7043;
}

.intent-block--spymaster:hover {
    border-color: #ff8a65;
    box-shadow: 0 0 10px rgba(255, 112, 67, 0.5);
}

/* Icon positioning in palette */
.intent-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.intent-block-icon-container {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.intent-block-content {
    flex: 1;
    min-width: 0;
}

/* Match the socket zone colors */
.socket-zone--gate {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

/* ITERATION 185: Gate intent visual enhancements */
.intent-block--gate {
    position: relative;
    overflow: hidden;
}

.intent-block--gate::before {
    content: '⚡';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

/* Ensure content sits above the background emoji */
.intent-block--gate .intent-block-icon-container,
.intent-block--gate .intent-block-content {
    position: relative;
    z-index: 1;
}

/* Tone down socket zone backgrounds */
.socket-zone {
    background: rgba(59, 130, 246, 0.05); /* Was 0.1 */
}

.socket-zone--gate {
    background: rgba(147, 51, 234, 0.05); /* Was 0.1 */
}

.socket-zone--spymaster {
    background: rgba(239, 68, 68, 0.05); /* Was 0.1 */
}

.socket-zone--ready {
    background: rgba(34, 197, 94, 0.1); /* Slightly more visible when ready */
}

.socket-zone--occupied {
    background: rgba(59, 130, 246, 0.03); /* Even more subtle when occupied */
}

/* Gate instance styling */
.gate-instance {
    background: rgba(147, 51, 234, 0.05);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 4px;
    padding: 8px;
    margin: 4px;
}

.gate-instance .gate-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gate-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(239, 68, 68, 0.8);
    color: white;
    border: none;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.gate-instance:hover .gate-remove {
    opacity: 1;
}

.gate-remove:hover {
    background: rgba(239, 68, 68, 1);
}

/* ITERATION 185: Special intent visual backgrounds ONLY in palette */

/* Base setup for all special blocks IN PALETTE ONLY */
#blocksContent .intent-block--gate,
#blocksContent .intent-block--spymaster,
#blocksContent .intent-block--monitor,
#blocksContent .intent-block--decision,
#blocksContent .intent-block--object,
#blocksContent .intent-block--memory,
#blocksContent .intent-block--loop,
#blocksContent .intent-block--communication {
    position: relative;
    overflow: hidden;
}

/* Ensure content sits above backgrounds for all special blocks IN PALETTE */
#blocksContent .intent-block--gate .intent-block-icon-container,
#blocksContent .intent-block--gate .intent-block-content,
#blocksContent .intent-block--spymaster .intent-block-icon-container,
#blocksContent .intent-block--spymaster .intent-block-content,
#blocksContent .intent-block--monitor .intent-block-icon-container,
#blocksContent .intent-block--monitor .intent-block-content,
#blocksContent .intent-block--decision .intent-block-icon-container,
#blocksContent .intent-block--decision .intent-block-content,
#blocksContent .intent-block--object .intent-block-icon-container,
#blocksContent .intent-block--object .intent-block-content,
#blocksContent .intent-block--memory .intent-block-icon-container,
#blocksContent .intent-block--memory .intent-block-content,
#blocksContent .intent-block--loop .intent-block-icon-container,
#blocksContent .intent-block--loop .intent-block-content,
#blocksContent .intent-block--communication .intent-block-icon-container,
#blocksContent .intent-block--communication .intent-block-content {
    position: relative;
    z-index: 1;
}

/* Gate blocks - Lightning bolt - PALETTE ONLY */
#blocksContent .intent-block--gate::before {
    content: '⚡';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 120px;
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

/* [Rest of palette-only ::before pseudo-elements...] */

/* Socket zone refinements */
.socket-zone {
    background: rgba(59, 130, 246, 0.05);
    border: 1px dashed rgba(59, 130, 246, 0.2);
    transition: all 0.2s ease;
}

.socket-zone--gate {
    background: rgba(147, 51, 234, 0.05);
    border-color: rgba(147, 51, 234, 0.2);
}

.socket-zone--spymaster {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

.socket-zone--ready {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.socket-zone--occupied {
    background: rgba(59, 130, 246, 0.03);
    border-style: solid;
}

/* [Continue with rest of non-button styles...] */

/* ===================================
   ITERATION 263: Active intent highlighting
   =================================== */
@keyframes pulse-executing {
    0% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(14, 165, 233, 0.3);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
        transform: scale(1);
    }
}

.intent-block-instance.active-intent {
    border: 2px solid #0ea5e9 !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, transparent 100%);
    position: relative;
}

.executing-indicator {
    position: absolute;
    top: -8px;
    right: 40px;
    background: #0ea5e9;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    animation: pulse-text 1s ease-in-out infinite;
    z-index: 100;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ITERATION 268: Ensure three-column layout is visible when agent selected */
.agent-details-three-column {
    display: none; /* Hidden by default */
    flex: 1;
    min-width: 0;
    background: #1a1a1a;
    border-left: 1px solid #333;
}

.agent-details-three-column.agent-selected {
    display: flex;
    flex-direction: column;
}

.agents-top-section {
    display: flex;
    height: 100%;
    gap: 0;
}

.agents-list-panel {
    width: 300px;
    flex-shrink: 0;
}

/* When an agent is selected, show the details panel */
.agents-container-wrapper:has(.agent-block.selected) .agent-details-three-column {
    display: flex;
    flex-direction: column;
}

#agentDetailsContent {
    flex: 1;
    display: flex;
    gap: 0;
    overflow: hidden;
}

/* Three columns within the details */
.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.column-left {
    max-width: 400px;
}

.column-center {
    flex: 2;
}

.column-right {
    max-width: 350px;
}

/* ITERATION 273 */ 

.intent-completed {
    background: #d4f4dd !important;
    border-color: #4caf50 !important;
}
/* ITERATION 273 */ 
.intent-completed::before {
    content: '✓ ';
    color: #4caf50;
    font-weight: bold;
}
/* ITERATION 273 */ 
.intent-blinking {
    animation: blink 1s ease-in-out infinite;
}
/* ITERATION 273 */ 
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
/* ITERATION 273 */ 
.status-complete {
    color: #4caf50;
    font-weight: bold;
}
/* ITERATION 273 */ 
.intent-block-instance.executing,
.intent-block-instance.active-intent {
    animation: pulse-executing 1s ease-in-out infinite;
}
/* ITERATION 273 */ 
@keyframes pulse-executing {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    50% { 
        box-shadow: 0 2px 16px rgba(59, 130, 246, 0.6);
    }
}
/* ITERATION 273 */ 
.intent-block-instance.executing,
.intent-block-instance.active-intent,
.intent-block-instance.intent-blinking {
    animation: pulse-executing 1s ease-in-out infinite;
}
/* ITERATION 273 */ 
@keyframes pulse-executing {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 2px 16px rgba(59, 130, 246, 0.6);
        transform: scale(1.02);
    }
}
/* ITERATION 273 */ 
.executing-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
}
/* ITERATION 273 */ 
.agent-status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
    border: 1px solid #2a3441;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.agent-status-info {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #e4e6eb;
}

/* ITERATION 273 */ 

.agent-icon {
    font-size: 20px;
    filter: brightness(1.2);
}

.agent-id {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-weight: 600;
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.1);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(88, 166, 255, 0.2);
}

.agent-separator {
    color: #3a4350;
    font-weight: 300;
}
/* ITERATION 273 */ 

.agent-start-time {
    color: #8b949e;
}

.agent-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e4e6eb;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.status-dot-green {
    background-color: #3fb950;
    box-shadow: 0 0 8px rgba(63, 185, 80, 0.6);
}

.status-dot-yellow {
    background-color: #d29922;
    box-shadow: 0 0 8px rgba(210, 153, 34, 0.6);
}

.status-dot-red {
    background-color: #f85149;
    box-shadow: 0 0 8px rgba(248, 81, 73, 0.6);
}

.status-dot-blue {
    background-color: #58a6ff;
    box-shadow: 0 0 8px rgba(88, 166, 255, 0.6);
}

.status-dot-gray {
    background-color: #6e7681;
    box-shadow: 0 0 8px rgba(110, 118, 129, 0.4);
}

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

#agentStatusText {
    font-weight: 500;
    color: #e4e6eb;
}

.agent-progress {
    color: #8b949e;
}

#agentProgressText {
    font-weight: 600;
    color: #58a6ff;
    background: rgba(88, 166, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
}

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

#copyAgentIdBtn {
    background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
    color: #e4e6eb;
    border: 1px solid #30363d;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
}

#copyAgentIdBtn:hover {
    background: linear-gradient(135deg, #30363d 0%, #21262d 100%);
    border-color: #58a6ff;
    color: #58a6ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(88, 166, 255, 0.2);
}

#copyAgentIdBtn:active {
    transform: translateY(0);
}

/* Three column container adjustment for dark theme */
.three-column-container {
    display: flex;
    gap: 4px;
    height: calc(100% - 65px); /* Account for header */
    background: #0d1117;
    border-radius: 6px;
    padding: 4px;
}

/* Optional: Dark theme for the entire details panel */
.agent-details-three-column {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 8px;
}

#agentDetailsContent {
    background: transparent;
}

.intent-block-instance {
    cursor: pointer;
    transition: all 0.2s ease;
}

.intent-block-instance:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 12px rgba(88, 166, 255, 0.3);
}

.intent-block-instance.intent-selected {
    border: 2px solid #58a6ff;
    background: rgba(88, 166, 255, 0.05);
}

/* Ensure proper column widths */
.agents-top-section {
    display: flex;
    gap: 8px;
    height: 100%;
}

.agents-list-panel {
    width: 300px;
    flex-shrink: 0;
}

.agent-details-three-column {
    flex: 1;
    min-width: 0; /* Important for flex children */
    overflow: hidden;
}

.three-column-container {
    display: flex;
    gap: 4px;
    height: 100%;
    width: 100%;
}

.three-column-container .column-left {
    width: 30%;
    min-width: 300px;
    flex-shrink: 0;
}

.three-column-container .column-center {
    flex: 1 1 auto;
    min-width: 0; /* Important for flex children */
    overflow: auto;
}

.three-column-container .column-right {
    width: 25%;
    min-width: 250px;
    flex-shrink: 0;
}

/* Stabilize the program display container */
#agentProgramDisplay {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.program-display {
    min-height: 400px;
    max-height: calc(100vh - 200px);
}

/* Prevent intent blocks from changing container size */
.intent-block-wrapper {
    margin: 8px 0;
    transition: none; /* Remove transitions that might cause reflow */
}

.intent-block-instance {
    min-height: 60px; /* Consistent minimum height */
}

/* Completed intents - dark green-gray instead of white */
.intent-block-instance.completed {
    background: linear-gradient(135deg, #1e2e28 0%, #1a2621 100%);
    border-color: #2d4a3d;
    opacity: 0.85;
}

/* Remove the white background that's being applied */
.intent-block-instance.intent-completed {
    background: linear-gradient(135deg, #1e2e28 0%, #1a2621 100%) !important;
    border-color: #2d4a3d !important;
}

/* Optional: Add a subtle checkmark without the bright green */
.intent-block-instance.intent-completed::after {
    content: '✓';
    position: absolute;
    top: 5px;
    right: 10px;
    color: #4a6b5a;
    font-size: 14px;
    opacity: 0.7;
}