/* Canvas-specific styles */
/* High-performance canvas rendering and interactions */

/* Canvas container optimizations */
#main-canvas {
    /* Hardware acceleration for smooth transformations */
    transform: translateZ(0);
    will-change: transform;

    /* Disable image smoothing for crisp rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;

    /* Prevent touch actions that might interfere with panning */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Canvas states */
#main-canvas.panning {
    cursor: move !important;
}

#main-canvas.zooming {
    cursor: zoom-in !important;
}

#main-canvas.loading {
    opacity: 0.8;
    cursor: wait !important;
}

/* Text input positioning and behavior on canvas */
.canvas-text-input {
    /* Ensure proper layering above canvas */
    position: absolute;
    z-index: var(--z-input);

    /* Optimize for frequent position updates */
    will-change: transform, left, top;

    /* Prevent sub-pixel rendering issues */
    transform: translateZ(0);

    /* Remove transitions to avoid visual lag/shift with overlays */
    transition: none;
}

/* Hide scrollbars by default */
.canvas-text-input::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Show thin scrollbars when focused */
.canvas-text-input:focus::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 6px;
}

.canvas-text-input:focus::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.canvas-text-input:focus::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
}

.canvas-text-input:focus::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
}

/* Ensure both horizontal and vertical scrollbars work */
.canvas-text-input:focus::-webkit-scrollbar-corner {
    background: rgba(255, 255, 255, 0.1);
}

/* Additional scrollbar hiding for better browser support */
.canvas-text-input {
    /* Hide scrollbars in Firefox by default */
    scrollbar-width: none;
    /* Hide scrollbars in IE/Edge by default */
    -ms-overflow-style: none;
}

/* Show thin scrollbars in Firefox when focused */
.canvas-text-input:focus {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.1);
}

/* Text input states on canvas */
.canvas-text-input.dragging {
    transition: none;
    /* Disable transitions while dragging */
    cursor: move;
}

.canvas-text-input.calculating {
    background: rgba(0, 122, 204, 0.05);
    border-color: var(--accent-blue);
}

.canvas-text-input.has-result {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 1px rgba(50, 205, 50, 0.2);
}

/* Calculation result positioning */
.calculation-result {
    /* Ensure proper positioning relative to input */
    position: absolute;
    z-index: var(--z-result);

    /* Optimize for position updates */
    will-change: transform, left, top;
    transform: translateZ(0);

    /* Smooth appearance */
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.calculation-result.entering {
    opacity: 0;
    transform: translateY(-5px);
}

.calculation-result.visible {
    opacity: 1;
    transform: translateY(0);
}

.calculation-result.leaving {
    opacity: 0;
    transform: translateY(5px);
}

/* Inline calculation results for mixed calculations */
.inline-calculation-result {
    position: absolute;
    z-index: 1001;
    pointer-events: none;
    color: var(--accent-purple);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family-mono);
    opacity: 0.9;
    transition: opacity var(--transition-fast);
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    background: rgba(159, 79, 255, 0.1);
    padding: 0px 6px;
    border-radius: 4px;
    border: 1px solid rgba(159, 79, 255, 0.3);
}

.inline-calculation-result:hover {
    opacity: 1;
}

/* Inline result overlays for mixed calculations (legacy - keep for now) */
.inline-result-overlay {
    position: absolute;
    z-index: 1002;
    pointer-events: none;
    color: var(--accent-green);
    font-weight: 500;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
}

.inline-result-overlay:hover {
    opacity: 1;
}

/* Grid overlay styles */
.canvas-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: var(--grid-opacity, 0.05);
}

/* Canvas element overlays */
.canvas-element-overlay {
    position: absolute;
    pointer-events: none;
    z-index: var(--z-overlay);
    border-radius: var(--radius-sm);
    transition: opacity var(--transition-fast);
}

/* Modern text selection - VS Code style */
::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* Text input selection */
.canvas-text-input::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

.canvas-text-input::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

/* Highlight matches - subtle background only */
.highlight-match {
    background: var(--highlight-match);
    /* border-radius: 2px; */
    padding: 0;
}

/* Unify new overlay highlight class */
.mp-highlight-match {
    background: var(--highlight-match);
    /* border-radius: 2px; */
    padding: 0;
}

/* Active (selected) text uses native ::selection with higher contrast */
.highlight-match.active,
.mp-highlight-match.active {
    background: var(--highlight-match-active);
    color: var(--selection-text);
}

/* Overlay element that mirrors textarea content for matches */
.mp-text-highlight-overlay {
    position: absolute;
    pointer-events: none;
    z-index: var(--z-overlay);
    transform: translateZ(0);
    will-change: left, top;
    mix-blend-mode: normal;
    transition: none;
}

/* Canvas performance optimizations */
.canvas-optimized {
    /* Force hardware acceleration */
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Viewport culling indicators (development only) */
.canvas-element.out-of-viewport {
    display: none;
}

.canvas-element.in-viewport {
    display: block;
}

/* Touch-specific styles for mobile canvas interaction */
@media (hover: none) and (pointer: coarse) {
    #main-canvas {
        cursor: default;
    }

    .canvas-text-input {
        /* Larger touch targets on mobile */
        min-height: 44px;
        min-width: 120px;
        font-size: 18px;
        /* Prevent zoom on focus */
    }

    .calculation-result {
        /* Larger touch targets for results */
        padding: var(--spacing-sm) var(--spacing-md);
        min-height: 36px;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    #main-canvas {
        /* Ensure crisp rendering on retina displays */
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Canvas loading states */
.canvas-loading {
    position: relative;
}

.canvas-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: canvas-spinner 0.8s linear infinite;
    z-index: var(--z-overlay);
}

@keyframes canvas-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Canvas error states */
.canvas-error {
    position: relative;
}

.canvas-error::before {
    content: '⚠';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: var(--accent-red);
    z-index: var(--z-overlay);
}

/* Canvas debug mode (development) */
.canvas-debug .canvas-text-input {
    border: 2px dashed var(--accent-orange);
}

.canvas-debug .calculation-result {
    border: 2px dashed var(--accent-green);
}

.canvas-debug .canvas-element-overlay.debug {
    border: 1px solid var(--accent-red);
    background: rgba(255, 68, 68, 0.1);
}

/* Pan and zoom indicators */
.pan-indicator {
    position: fixed;
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: var(--font-family-mono);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.pan-indicator.visible {
    opacity: 1;
}

.zoom-indicator {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: var(--font-family-mono);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.zoom-indicator.visible {
    opacity: 1;
}

/* Minimap (future feature) */
.canvas-minimap {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 200px;
    height: 150px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    z-index: var(--z-overlay);
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.canvas-minimap:hover {
    opacity: 1;
}

/* Canvas performance monitoring (development) */
.canvas-fps {
    position: fixed;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-family: var(--font-family-mono);
    z-index: var(--z-overlay);
}

/* Disable certain CSS features for better performance */
.canvas-performance-mode * {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Canvas element animations */
@keyframes element-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes element-disappear {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.95) translateY(5px);
    }
}

.canvas-element.appearing {
    animation: element-appear var(--transition-fast) ease-out;
}

.canvas-element.disappearing {
    animation: element-disappear var(--transition-fast) ease-in;
}

/* Reduce animations for better performance on lower-end devices */
@media (prefers-reduced-motion: reduce) {

    .canvas-element.appearing,
    .canvas-element.disappearing {
        animation: none;
    }

    .calculation-result {
        transition: opacity var(--transition-fast);
    }
}