/**
 * Cognitive Studio Visualizer Button Styles
 * ITERATION 267: Unified button styling system
 * 
 * File: as-vis-buttons.css
 * Purpose: All button styles for intent visualizer
 * Dependencies: as-variables.css (if using CSS variables)
 * 
 * Naming convention:
 * - as-vis-buttons-{component}-{modifier}
 * - Legacy support included for backward compatibility
 */

/* ============================================
   CONTROL BAR CONTAINER
   ============================================ */

.as-vis-buttons-control-bar,
.intent-control-bar { /* Legacy support */
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 4px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

/* Show on hover */
.intent-block-instance:hover .as-vis-buttons-control-bar,
.intent-block-instance:hover .intent-control-bar {
    opacity: 1;
    pointer-events: auto;
}

/* Always show during execution */
.intent-block-instance.executing .as-vis-buttons-control-bar,
.intent-block-instance.active-intent .as-vis-buttons-control-bar,
.intent-block-instance.executing .intent-control-bar,
.intent-block-instance.active-intent .intent-control-bar {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   BASE BUTTON STYLES
   ============================================ */

.as-vis-buttons-btn,
.intent-control-btn { /* Legacy support */
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    border-radius: 3px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.as-vis-buttons-btn:hover,
.intent-control-btn:hover {
    background: #f0f0f0;
    border-color: #999;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.as-vis-buttons-btn:active,
.intent-control-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BUTTON TYPES & ORDER
   ============================================ */

/* Edit Button (Order 1) */
.as-vis-buttons-btn-edit,
.comment-edit-btn {
    order: 1;
    background: rgba(14, 165, 233, 0.05);
    border-color: rgba(14, 165, 233, 0.3);
}

.as-vis-buttons-btn-edit:hover,
.comment-edit-btn:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.5);
}

/* JSON Highlight Button (Order 2) */
.as-vis-buttons-btn-json,
.json-highlight-btn {
    order: 2;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.as-vis-buttons-btn-json:hover,
.json-highlight-btn:hover {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

/* Menu Button (Order 3) */
.as-vis-buttons-btn-menu,
.intent-menu-button {
    order: 3;
    font-size: 16px;
    z-index: 1000000 !important;
    position: relative !important;
}

.as-vis-buttons-btn-menu:hover,
.intent-menu-button:hover {
    background: #e8f4fd;
    border-color: #0ea5e9;
}

/* Remove Button (Order 4) */
.as-vis-buttons-btn-remove,
.intent-remove {
    order: 4;
    font-size: 18px;
    font-weight: 300;
}

.as-vis-buttons-btn-remove:hover,
.intent-remove:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #dc2626;
    transform: scale(1.1);
}

/* ============================================
   CONTEXT-SPECIFIC STYLES
   ============================================ */

/* Comment Blocks */
.comment-intent .as-vis-buttons-control-bar,
.comment-intent .intent-control-bar {
    top: 8px;
    right: 8px;
    gap: 6px;
}

.comment-intent .as-vis-buttons-btn,
.comment-intent .intent-control-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

/* Hide old comment-specific controls */
.comment-intent .comment-controls-container,
.comment-intent .intent-markdown-button {
    display: none !important;
}

/* Nested Intents - Higher Z-Index */
.nested-intent .as-vis-buttons-control-bar,
.level-1 .as-vis-buttons-control-bar,
.level-2 .as-vis-buttons-control-bar,
.level-3 .as-vis-buttons-control-bar {
    z-index: 20;
}

.nested-intent .as-vis-buttons-btn-menu,
.nested-intent .intent-menu-button,
.level-1 .as-vis-buttons-btn-menu,
.level-1 .intent-menu-button,
.level-2 .as-vis-buttons-btn-menu,
.level-2 .intent-menu-button {
    z-index: 1000002 !important;
}

/* Gate Sockets */
.socket-zone--gate .as-vis-buttons-control-bar,
.socket-zone--gate .intent-control-bar {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
}

/* Branch Content - Tighter Space */
.branch-content .as-vis-buttons-control-bar,
.branch-content .intent-control-bar {
    top: 3px;
    right: 3px;
}

.branch-content .as-vis-buttons-btn,
.branch-content .intent-control-btn {
    width: 22px;
    height: 22px;
    font-size: 13px;
}

/* ============================================
   STATES & ANIMATIONS
   ============================================ */

/* Focus State */
.as-vis-buttons-btn:focus,
.intent-control-btn:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 1px;
    z-index: 1000003;
}

/* Disabled State */
.as-vis-buttons-btn:disabled,
.intent-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading State */
.as-vis-buttons-btn.is-loading,
.intent-control-btn.loading {
    pointer-events: none;
    animation: button-pulse 1s infinite;
}

@keyframes button-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Success State */
.as-vis-buttons-btn.is-success,
.intent-control-btn.success {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: white !important;
    animation: button-success 0.3s ease;
}

@keyframes button-success {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* JSON Highlight Flash */
.json-highlight-flash {
    animation: json-flash 2s ease-in-out;
}

@keyframes json-flash {
    0%, 100% { background-color: transparent; }
    20%, 80% { background-color: rgba(255, 193, 7, 0.2); }
}

/* ============================================
   Z-INDEX HIERARCHY
   ============================================ */

/*
 * Z-Index Scale (from bottom to top):
 * - Intent blocks: 1
 * - Control bars: 10
 * - Control buttons: 11
 * - Nested control bars: 20
 * - Menu buttons: 1000000
 * - Nested menu buttons: 1000002
 * - Intent parameter menus: 1000007+
 */

.intent-menu-overlay {
    z-index: 1000006 !important;
}

.intent-parameter-menu {
    z-index: 1000007 !important;
}

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

/* Small Screens - Always Show */
@media (max-width: 768px) {
    .as-vis-buttons-control-bar,
    .intent-control-bar {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Touch Devices - Larger Hit Areas */
@media (hover: none) and (pointer: coarse) {
    .as-vis-buttons-btn,
    .intent-control-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    
    .as-vis-buttons-control-bar,
    .intent-control-bar {
        gap: 8px;
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .as-vis-buttons-btn,
    .intent-control-btn {
        background: #2d2d2d;
        border-color: #444;
        color: #e0e0e0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .as-vis-buttons-btn:hover,
    .intent-control-btn:hover {
        background: #3a3a3a;
        border-color: #666;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    }
    
    /* Dark mode specific button colors */
    .as-vis-buttons-btn-edit:hover,
    .comment-edit-btn:hover {
        background: rgba(14, 165, 233, 0.25);
        border-color: rgba(14, 165, 233, 0.6);
    }
    
    .as-vis-buttons-btn-json:hover,
    .json-highlight-btn:hover {
        background: rgba(255, 193, 7, 0.25);
        border-color: rgba(255, 193, 7, 0.6);
    }
    
    .as-vis-buttons-btn-remove:hover,
    .intent-remove:hover {
        background: rgba(239, 68, 68, 0.25);
        border-color: rgba(239, 68, 68, 0.6);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .as-vis-buttons-control-bar,
    .intent-control-bar {
        display: none !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide buttons temporarily */
.as-vis-buttons-hidden {
    display: none !important;
}

/* Force show buttons */
.as-vis-buttons-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ===== Comment Block Button Flexbox Fix ===== */
/* ITERATION 267: Using flexbox to prevent button overlap */

/* Remove all absolute positioning from comment buttons */
.comment-intent .comment-edit-btn,
.comment-intent .intent-menu-button,
.comment-intent .intent-remove {
    position: static !important; /* Override any absolute positioning */
    top: auto !important;
    right: auto !important;
}

/* Flexbox container for comment control bar */
.comment-intent .as-vis-buttons-control-bar,
.comment-intent .intent-control-bar {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 6px; /* Consistent spacing between buttons */
    align-items: center;
    z-index: 10;
}

/* Ensure buttons maintain their size */
.comment-intent .as-vis-buttons-btn,
.comment-intent .intent-control-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}


/* JSON Highlight Button */
.as-vis-buttons-btn-json,
.json-highlight-btn {
    order: 2; /* Place between edit and menu buttons */
    font-size: 12px;
    font-weight: bold;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.as-vis-buttons-btn-json:hover,
.json-highlight-btn:hover {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

/* Flash effect for JSON editor */
.json-highlight-flash {
    animation: json-flash 2s ease-in-out;
}

@keyframes json-flash {
    0%, 100% { 
        background-color: transparent;
        box-shadow: none;
    }
    20%, 80% { 
        background-color: rgba(255, 193, 7, 0.1);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
    }
}

/* Base control bar - ensure flexbox for ALL blocks, not just comments */
.as-vis-buttons-control-bar,
.intent-control-bar {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex !important; /* Force flexbox */
    flex-direction: row;
    gap: 4px; /* Consistent spacing */
    align-items: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

/* Remove ANY absolute positioning from buttons inside control bars */
.as-vis-buttons-control-bar button,
.intent-control-bar button,
.as-vis-buttons-control-bar .as-vis-buttons-btn,
.intent-control-bar .intent-control-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
}

/* Ensure consistent button sizing */
.as-vis-buttons-btn,
.intent-control-btn {
    width: 24px;
    height: 24px;
    flex-shrink: 0; /* Prevent shrinking */
    flex-grow: 0; /* Prevent growing */
}

/* Comment blocks - slightly larger buttons */
.comment-intent .as-vis-buttons-btn,
.comment-intent .intent-control-btn {
    width: 28px;
    height: 28px;
}

/* Ensure proper button order */
.as-vis-buttons-control-bar .comment-edit-btn,
.as-vis-buttons-control-bar .as-vis-buttons-btn-edit { order: 1; }

.as-vis-buttons-control-bar .json-highlight-btn,
.as-vis-buttons-control-bar .as-vis-buttons-btn-json { order: 2; }

.as-vis-buttons-control-bar .intent-menu-button,
.as-vis-buttons-control-bar .as-vis-buttons-btn-menu { order: 3; }

.as-vis-buttons-control-bar .intent-remove,
.as-vis-buttons-control-bar .as-vis-buttons-btn-remove { order: 4; }

/* Special case: if buttons are being added without the control bar wrapper */
.intent-block-instance > button {
    position: static !important;
}