/* ========================================================
   Game Details Grid
   ======================================================== */

/* Card container styling */
.game-details-card {
    width: 100%;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, sans-serif;
    color: #e2e8f0; /* Crisp off-white */
}

.game-details-title {
    font-size: calc(var(--ui-scale) * 1);
    font-weight: 700;
    margin-bottom: calc(var(--ui-scale) * 0.75);
    color: #f8fafc;
}

/* Two-column layout grid */
.details-grid {
    display: flex;
    flex-direction: column;
    gap: calc(var(--ui-scale) * 0.4);
}

.grid-row {
    display: grid;
    grid-template-columns: minmax(110px, calc(var(--ui-scale) * 6)) 1fr;
    align-items: center;
    gap: calc(var(--ui-scale) * 0.5);
    padding: calc(var(--ui-scale) * 0.2) 0;
}

/* Muted labels */
.label {
    color: #94a3b8; /* Subtle gray */
    font-size: calc(var(--ui-scale) * 0.85);
    font-weight: 500;
}

/* Clear values */
.value {
    /* color: #f1f5f9; */
    font-size: calc(var(--ui-scale) * 0.88);
    line-height: 1.4;
    overflow-wrap: break-word; /* FIX: Modern standard property replacing deprecated keyword break-word */
}

/* Hierarchy & Accent updates */
.emphasis {
    font-weight: 600;
}

.highlight-result {
    color: #38bdf8; /* Soft blue to make the game outcome pop */
}

.status-subtext {
    color: #cbd5e1;
}

/* Modernized Share Button */
.modern-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #334155;
    border: 1px solid #475569;
    color: #f1f5f9;
    padding: calc(var(--ui-scale) * 0.2) calc(var(--ui-scale) * 0.4);
    border-radius: 4px;
    font-size: calc(var(--ui-scale) * 0.8);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.modern-share-btn:hover {
    background-color: #475569;
}


/* ========================================================
   3. CONTROLS ROW COMPONENT STYLING
   ======================================================== */

.controls-row {
    display: flex !important; /* Forces flexbox behavior over any inline JS string alterations */
    flex-flow: row nowrap; /* Forces elements onto a single line */
    width: 100%;
    max-width: 82vmin;
    margin-top: calc(var(--ui-scale) * 0.5);
    gap: calc(var(--ui-scale) * 0.5);
}

.large-button {
    flex: 1 1 0%; /* Dictates even, flexible horizontal distribution */
    min-width: 0;  /* Prevents buttons from expanding past container bounds if text is wide */

    /* Your existing presentation styles below */
    min-height: calc(var(--ui-scale) * 1);
    font-size: calc(var(--ui-scale) * 0.95);
    font-weight: 700;
    border-radius: calc(var(--ui-scale) * 0.35);
    border: 1px solid #cbd5e1;
    background-color: #f1f5f9;
    color: #334155;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ui-scale) * 0.4);
    transition: background-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.large-button:hover {
    background-color: #e2e8f0;
}

.large-button:active {
    transform: scale(0.98);
}

.large-button:disabled {
    background-color: #f8fafc; /* Lighter background */
    color: #94a3b8;            /* Faded text/icon color */
    border-color: #e2e8f0;      /* Lighter border */
    cursor: not-allowed;       /* Shows a blocked cursor */
    transform: none;           /* Prevents active scaling */
    pointer-events: none;      /* Disables hover and click events completely */
}

.style-hidden {
    display: none !important;
}

/* eval tootip */
.tooltip-container {
    position: relative; /* Allows positioning of the tooltip text relative to this container */
    cursor: help; /* Changes the cursor to a question mark on hover */
}

.tooltip-text {
    visibility: hidden; /* Hides the tooltip text by default */
    opacity: 0; /* Makes the tooltip invisible */
    width: 200px; /* Adjust as needed */
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1; /* Ensures the tooltip appears above other content */
    bottom: 125%; /* Positions the tooltip above the question mark */
    left: 50%;
    margin-left: -100px; /* Centers the tooltip horizontally */
    transition: opacity 0.3s; /* Smooth fade-in effect */
}

.tooltip-container:hover .tooltip-text {
    visibility: visible; /* Makes the tooltip visible on hover */
    opacity: 1; /* Fades the tooltip in */
}


/* ==========================================================================
   SECTION 8: AI ACTION BUTTONS — COMPACT, SCALABLE & OPTIMIZED
   ========================================================================== */
:root {
    --ai-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Container Base Configuration --- */
.ai-btn-container {
    position: relative !important;
    display: inline-block !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    margin-top: 1rem;
}

.ai-btn-container,
.ai-btn-container *,
.ai-btn-container *::before,
.ai-btn-container *::after {
    box-sizing: border-box !important;
}

/* --- Base Element Framework Configurations (CRITICAL: Placed above modifiers) --- */
.ai-btn-container .ai-explain-btn,
.ai-btn-container .ai-lichess-btn {
    all: unset !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 0.5rem !important; /* Reduced slightly for better balance */
    width: 100% !important;

    /* FIX: Changed height from 6.25rem to a standard button height */
    height: 3.25rem !important; /* ~52px height */
    padding: 0 1.25rem !important;
    margin: 0 !important;
    background-size: 200% auto !important;
    border-radius: 0.75rem !important;
    cursor: pointer !important;
    overflow: hidden !important;

    /* FIX: Reduced typography size for standard desktop layouts */
    font-size: 1.125rem !important; /* ~18px font size */
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    transition: var(--ai-transition) !important;
}

.ai-btn-container .ai-explain-btn::before,
.ai-btn-container .ai-lichess-btn::before {
    content: "" !important;
    position: absolute !important;
    inset: -0.125rem;
    border-radius: 0.875rem !important;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.ai-btn-container .ai-icon,
.ai-btn-container .ai-lichess-icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease !important;
}

.ai-btn-container .ai-btn-text {
    display: inline-block !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* --- Contextual Dynamic Tooltip System Base Settings --- */
.ai-btn-container .ai-tooltip {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    bottom: 135% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0.25rem) !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
    padding: 0.625rem 1.125rem !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    border: 0.0625rem solid #475569 !important;
    box-shadow: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 20%) !important;
    z-index: 99999 !important;
}

.ai-btn-container .ai-tooltip::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-width: 0.375rem !important;
    border-style: solid !important;
    border-color: #0f172a transparent transparent !important; /* Optimization: Dropped redundant final transparent bounds */
}

/* --- Container States (Loading State Precedes Hover State Interactions) --- */
.ai-btn-container.is-loading .ai-icon {
    animation: ai-pulse 1.5s infinite ease-in-out !important; /* FIX: Reference the standard kebab case pattern */
}

/* --- Component Variant Profiles --- */
.ai-btn-container .ai-explain-btn {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%) !important;
    box-shadow: 0 0.375rem 1rem rgb(168 85 247 / 30%) !important;
}

.ai-btn-container.is-loading .ai-explain-btn {
    opacity: 0.75 !important;
    cursor: wait !important;
    box-shadow: none !important;
}

.ai-btn-container .ai-explain-btn::before {
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899) !important;
}

.ai-btn-container.is-loading {
    pointer-events: none !important;
}

.ai-btn-container .ai-lichess-btn {
    background: linear-gradient(135deg, #2b2a29 0%, #363432 50%, #403e3b 100%) !important;
    box-shadow: 0 0.375rem 1rem rgb(54 52 50 / 30%) !important;
    border: 0.0625rem solid #4a4845 !important;
}

.ai-btn-container .ai-lichess-btn::before {
    background: linear-gradient(135deg, #454341, #575451, #6e6a66) !important;
}

/* --- Shared Hover & Active Interaction Rules (Modifiers Grouped Together) --- */
.ai-btn-container .ai-explain-btn:hover,
.ai-btn-container .ai-lichess-btn:hover {
    background-position: right center !important;
    transform: translateY(-0.1875rem) !important;
}

.ai-btn-container .ai-explain-btn:hover::before,
.ai-btn-container .ai-lichess-btn:hover::before {
    opacity: 1 !important;
}

.ai-btn-container .ai-explain-btn:active,
.ai-btn-container .ai-lichess-btn:active {
    transform: translateY(0) !important;
}

.ai-btn-container .ai-explain-btn:hover {
    box-shadow: 0 0.5rem 1.5rem rgb(168 85 247 / 45%) !important;
}

.ai-btn-container .ai-lichess-btn:hover {
    box-shadow: 0 0.5rem 1.5rem rgb(54 52 50 / 50%) !important;
    border-color: #6e6a66 !important;
}

.ai-btn-container .ai-explain-btn:hover .ai-icon {
    transform: rotate(15deg) scale(1.1) !important;
}

.ai-btn-container .ai-lichess-btn:hover .ai-lichess-icon {
    transform: rotate(-12deg) scale(1.1) !important;
}

.ai-btn-container:hover .ai-tooltip {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* --- Unified Keyframe Framework Layouts (FIX: Format expansion and naming fixes) --- */
@keyframes ai-pulse {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 1;
    }
}

/* --- Adaptive Flex Layout Matrix --- */
.ai-row-layout {
    display: flex !important;
    flex-flow: row nowrap !important; /* Shorthand combining direction and wrap configurations safely */
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 40.625rem !important;
    margin: 1rem auto !important;
}

.ai-row-layout .ai-btn-container {
    flex: 1 1 0% !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

/* eval result layout */

/* Creates the two-column horizontal layout */
.eval-flex-wrapper {
    display: flex;
    flex-direction: row;

    /* 1.25rem equals 20px if the default base font size is 16px */
    gap: 1.25rem;
    align-items: flex-start;
    width: 100%;
}

/* Allows the text side to take up the majority of the remaining space */
.eval-text-side {
    flex: 0 1 auto;
}

/* Container for the canvas eval bar */
.eval-bar-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Limits the layout container to roughly the natural size of the canvas */
    max-width: 30rem;
}

/* Makes the canvas completely responsive within its side panel */
.eval-bar-side canvas {
    width: 100%;
    height: auto;
}

/* Internal clean card wrappers */
.panel-body, #explain-content-target {
    font-size: calc(var(--ui-scale) * 1.5);
    line-height: 1.5;
    color: #334155;
}

.loading-wrapper {
    display: flex;
    justify-content: center;
    padding: calc(var(--ui-scale) * 1);
}

.loading-message-wrapper{
    display: flex;
    flex-direction: column; /* Stacks the text and GIF vertically */
    align-items: center;    /* Centers them horizontally */
    text-align: center;     /* Centers the text lines nicely */
    gap: 15px;              /* Adds some space between text and GIF */
    padding: calc(var(--ui-scale) * 1);
}