/*
 * ANSI Art Viewer - WebGL Renderer Styles
 * Styles for the ANSI art viewer tool including drop area,
 * canvas rendering, zoom controls, and fullscreen mode.
 */

/* ── Drop area ─────────────────────────────────────────── */

.ansi-drop-area {
    border: 2px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.ansi-drop-area:hover,
.ansi-drop-area.drag-over {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.ansi-drop-area i {
    font-size: 2.5rem;
    opacity: 0.4;
}

/* ── Canvas wrapper ────────────────────────────────────── */

.ansi-canvas-wrapper {
    overflow: auto;
    background: #000;
}

#ansi-preview-body {
    min-height: 150px;
    max-height: 800px;
    overflow: hidden;
}

#ansi-preview-body .ansi-canvas-wrapper {
    max-height: 800px;
}

/* ── Canvas element ────────────────────────────────────── */

.ansi-canvas-wrapper canvas {
    display: block;
    margin: 0 auto;
}

/* ── Zoom display ──────────────────────────────────────── */

.ansi-zoom-display {
    min-width: 3.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar (between header and body) ────────────────── */

#ansi-toolbar {
    border-top: none;
}

/* ── Fullscreen overrides ──────────────────────────────── */

body.fullscreen-mode .fullscreen-controls {
    width: 320px;
    min-width: 300px;
    max-width: 320px;
}

body.fullscreen-mode #fullscreen-ansi-preview-wrapper {
    overflow: auto;
    height: 100%;
}

body.fullscreen-mode .fullscreen-preview-body {
    background: #000;
    padding: 0 !important;
}

body.fullscreen-mode .fullscreen-preview-footer {
    padding: 0.5rem 1rem;
    background: var(--bs-card-cap-bg, rgba(0,0,0,.03));
    border-top: 1px solid var(--bs-border-color);
}

body.fullscreen-mode .fullscreen-preview-footer .card-footer {
    border: none;
    padding: 0;
    background: transparent;
}

/* Info panel inside main card body in fullscreen — remove card nesting */
body.fullscreen-mode #ansi-info-panel {
    border: none;
    border-radius: 0;
    margin: 1rem -1rem -1rem;
    border-top: 1px solid var(--bs-border-color);
}

body.fullscreen-mode #ansi-info-panel .card-header {
    border-radius: 0;
}

body.fullscreen-mode #ansi-info-panel .card-body {
    padding: 0.75rem 1rem;
}

body.fullscreen-mode #ansi-info-panel .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}