/* SOLIDABLE Components CSS - Ritual Interface Components */

/* Terminal Prompt Component */
.terminal-prompt {
    font-size: 1.4rem;
    margin-bottom: 3rem;
    text-align: center;
    opacity: 0;
    animation: fadeIn 1.4s ease-in forwards;
    letter-spacing: 0.8px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Command Input Component */
.command-input {
    background: transparent;
    border: none;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 1.6rem;
    text-align: center;
    outline: none;
    border-bottom: 3px solid var(--color-primary);
    padding: 0.8rem 1rem;
    min-width: 400px;
    max-width: 500px;
    width: 100%;
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
    transition: border-color 0.2s ease, text-shadow 0.2s ease;
    text-shadow: 0 0 8px color-mix(in oklab, var(--color-primary) 50%, transparent);
    letter-spacing: 1px;
    margin: 0 auto;
    display: block;
    line-height: 1.2;
    vertical-align: baseline;
    box-sizing: border-box;
    caret-color: var(--color-primary);
    height: auto;
}

.command-input:hover {
    border-color: var(--color-accent);
}

.command-input:focus-visible {
    border-color: var(--color-secondary);
    text-shadow: 0 0 10px color-mix(in oklab, var(--color-secondary) 45%, transparent);
}

/* Command Submit Button */
.cmd-submit {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-family: inherit;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    margin-top: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeIn 2.5s ease-in forwards;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2px;
}

.cmd-submit:hover {
    background: var(--color-primary);
    color: var(--color-bg);
    text-shadow: none;
    box-shadow: 0 0 15px color-mix(in oklab, var(--color-primary) 40%, transparent);
}

.cmd-submit:active {
    transform: scale(0.98);
}

/* Main Interface Container */
.interface-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0 1rem;
    min-height: 60vh;
    margin-top: 15vh;
}

/* Responsive adjustments for centered interface */
@media (max-width: 768px) {
    .terminal-prompt {
        font-size: 1.2rem;
        margin-bottom: 2rem;
        letter-spacing: 0.6px;
    }
    
    .command-input {
        font-size: 1.4rem;
        min-width: 280px;
        max-width: 400px;
        padding: 0.7rem 0.8rem;
    }
    
    .cmd-submit {
        font-size: 0.9rem;
        padding: 0.5rem 1.2rem;
        margin-top: 1.2rem;
    }
    
    .interface-center {
        margin-top: 15vh;
        min-height: 50vh;
    }
    
    .connection-status {
        top: 3rem;
    }
}

@media (max-width: 480px) {
    .interface-center {
        padding: 0 0.5rem;
        margin-top: 25vh;
        min-height: 40vh;
    }
    
    .terminal-prompt {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
        letter-spacing: 0.4px;
    }
    
    .command-input {
        font-size: 1.2rem;
        min-width: 240px;
        max-width: 320px;
        padding: 0.6rem 0.7rem;
        letter-spacing: 0.5px;
    }
    
    .cmd-submit {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
        margin-top: 1rem;
    }
    
    .connection-status {
        top: 6rem;
        font-size: 0.7rem;
    }
}

/* Cursor Component */
.cursor {
    display: inline-block;
    width: 2px;
    height: 1.5rem;
    background: var(--color-primary);
    animation: blink 1s infinite;
    margin-left: 5px;
    position: absolute;
    visibility: hidden;
}

/* Hide custom cursor when input is focused */
.command-input:focus + .cursor {
    visibility: hidden;
}

/* Show custom cursor only when input is not focused */
.command-input:not(:focus) + .cursor {
    visibility: visible;
}

/* Echo Response Component */
.echo-response {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem;
    opacity: 0;
    color: var(--color-secondary);
    text-align: left;
    max-width: 86ch;
    white-space: pre-wrap;
    line-height: 1.35;
    text-shadow: 0 0 6px color-mix(in oklab, var(--color-secondary) 35%, transparent);
}

/* Connection Status */
.connection-status {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: color-mix(in oklab, var(--color-accent) 85%, #ffffff 0%);
    opacity: 0.8;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px color-mix(in oklab, var(--color-accent) 30%, transparent);
}

/* Loading Skeleton */
.loading-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

.skeleton-line {
    width: min(80ch, 80vw);
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.14), rgba(255,255,255,0.06));
    background-size: 200% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    mix-blend-mode: screen;
}
.skeleton-title { height: 18px; width: min(40ch, 70vw); }
.skeleton-input {
    width: min(40ch, 70vw);
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(0,255,174,0.10), rgba(0,255,174,0.18), rgba(0,255,174,0.10));
    background-size: 200% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(0,255,174,0.15) inset;
}

@keyframes shimmer {
    0% { background-position: 0% 0%; opacity: 0.6; }
    50% { background-position: 100% 0%; opacity: 0.9; }
    100% { background-position: 0% 0%; opacity: 0.6; }
}

/* Loader Dots (for typewriter states) */
.loader-dots::after {
    content: '…';
    display: inline-block;
    width: 1ch;
    overflow: hidden;
    animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
    0% { content: '\2026'; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: '\2026'; }
}

/* Hidden Hint Component */
.hidden-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    opacity: 0.3;
    color: #00ffff;
    text-align: center;
}

/* Invisible Hot Zones */
.hot-zones { position: fixed; inset: 0; pointer-events: none; }
.hot-zone {
    position: absolute; background: transparent; border: none; padding: 0; margin: 0;
    pointer-events: auto; cursor: none; outline: none;
}

.hz-top-left { top: 0; left: 0; width: 18vw; height: 28vh; }
.hz-top-right { top: 0; right: 0; width: 18vw; height: 28vh; }
.hz-bottom-left { bottom: 0; left: 0; width: 18vw; height: 32vh; }
.hz-bottom-right { bottom: 0; right: 0; width: 18vw; height: 32vh; }
.hz-center { top: 35%; left: 35%; width: 30%; height: 30%; }

.hot-zone::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(400px 240px at 50% 50%, color-mix(in oklab, var(--color-accent) 8%, transparent) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.2s ease;
    mix-blend-mode: screen;
}

.hot-zone:hover::after, .hot-zone:focus-visible::after { opacity: 0.18; }
.hot-zone:focus-visible { box-shadow: 0 0 0 2px var(--color-accent) inset; }

/* Glitch accent utility */
.glitch {
    position: relative; display: inline-block;
}
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; overflow: hidden;
}
.glitch::before { color: var(--color-accent); transform: translate(1px, 0); opacity: 0.8; }
.glitch::after { color: var(--color-secondary); transform: translate(-1px, 0); opacity: 0.6; }

/* Helper color spans inside echo ASCII */
.c-primary { color: var(--color-primary); }
.c-secondary { color: var(--color-secondary); }
.c-accent { color: var(--color-accent); }

/* Mobile Component Adjustments */
@media (max-width: 768px) {
    .command-input {
        min-width: 250px;
        font-size: 1.2rem;
    }
    
    .terminal-prompt {
        font-size: 1rem;
    }
}

/* Mobile-first controls */
@media (max-width: 480px) {
    .terminal-prompt { margin-bottom: 1rem; }
}

/* On touch devices, show a submit button and adapt layout */
@media (pointer: coarse) {
    .command-input {
        min-width: min(90vw, 480px);
        font-size: 1.25rem;
        padding-bottom: 0.6rem;
    }
    .cmd-submit {
        display: inline-flex;
        align-items: center; justify-content: center;
        margin-top: 0.75rem;
        padding: 0.5rem 1rem;
        font-family: inherit;
        font-size: 1rem;
        color: var(--color-bg);
        background: var(--color-primary);
        border: 1px solid color-mix(in oklab, var(--color-primary) 60%, transparent);
        border-radius: 6px;
        box-shadow: 0 0 10px color-mix(in oklab, var(--color-primary) 35%, transparent);
    }
    .echo-response {
        position: static;
        transform: none;
        margin-top: 1rem;
        max-width: 90vw;
        font-size: 0.9rem;
    }
    .hidden-hint { bottom: calc(1rem + env(safe-area-inset-bottom)); }
    /* Visual feedback for touch */
    .hot-zone.touch-active::after { opacity: 0.18; }
}

/* Hidden by default on non-touch */
.cmd-submit { display: none; cursor: pointer; }