/* =========================================================
   WRATH64 STUDIOS
   SITE POLICIES
   JANE PUBLIC ASSISTANCE
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.policies-frame {
    min-height: calc(100vh - 28px);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.policies-layout {
    width: min(100%, 1280px);

    margin: 0 auto;

    padding: 55px 0;

    display: grid;

    grid-template-columns:
        300px
        2px
        minmax(0, 680px);

    column-gap: 55px;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   LEFT PANEL
   ========================================================= */

.policies-left-panel {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;
}


/* =========================================================
   JANE FILE
   ========================================================= */

.jane-file {

    /*
       Tamaño maestro del monitor.
    */

    --jane-width: 270px;


    /*
       Tamaño visual de Jane dentro del monitor.

       112% permite que el personaje ocupe mejor
       el recuadro sin deformarlo.

       El exceso se recorta gracias a overflow:hidden.
    */

    --jane-visual-width: 112%;


    /*
       Ajuste inferior común.

       Tanto idle como talk se apoyan en esta misma base.
    */

    --jane-bottom: -8px;


    /*
       El TALK sheet puede requerir un ajuste mínimo
       respecto al GIF debido a cómo fue exportado.

       Dejamos ambos inicialmente alineados.
    */

    --jane-talk-bottom-adjust: 0px;


    position: relative;

    width: var(--jane-width);

    max-width: 100%;
}


/* =========================================================
   FIXED VIEWPORT

   El monitor:
   - nunca cambia de tamaño
   - nunca se mueve
   - nunca respira
   - nunca cambia al hablar

   Solo cambia lo que hay dentro.
   ========================================================= */

.jane-viewport {
    position: relative;

    width: 100%;

    /*
       Basado en el encuadre original de Jane.
    */

    aspect-ratio: 294 / 311;

    overflow: hidden;

    isolation: isolate;

    background: #000000;

    border-top:
        2px solid
        var(--white-line);

    border-bottom:
        2px solid
        var(--white-line);
}


/* =========================================================
   IDLE GIF

   /assets/images/jane-idle.gif

   IMPORTANTÍSIMO:

   NO usamos background-size.
   NO usamos aspect-ratio artificial.
   NO usamos height:100%.

   El GIF conserva su proporción original.
   ========================================================= */

.jane-idle-image {
    position: absolute;

    z-index: 2;

    left: 50%;

    bottom: var(--jane-bottom);

    width: var(--jane-visual-width);

    height: auto;

    max-width: none;

    display: block;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    user-select: none;

    transform:
        translateX(-50%);

    transform-origin:
        center bottom;

    image-rendering: pixelated;

    image-rendering: crisp-edges;

    filter:
        grayscale(1)
        contrast(1.08)
        brightness(0.98);

    transition: none !important;
}


/* =========================================================
   ACTIVE IDLE
   ========================================================= */

.jane-idle-image.is-active {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   TALK SPRITESHEET

   /assets/images/576879.png

   4 columns × 4 rows.

   Un frame mantiene 299 / 304.

   La capa está anclada al MISMO borde inferior
   utilizado por el GIF.

   Por tanto, al cambiar idle → talk,
   el personaje no debería saltar.
   ========================================================= */

.jane-talk-layer {
    position: absolute;

    z-index: 3;

    left: 50%;

    bottom:
        calc(
            var(--jane-bottom)
            +
            var(--jane-talk-bottom-adjust)
        );

    width: var(--jane-visual-width);

    aspect-ratio: 299 / 304;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    user-select: none;

    transform:
        translateX(-50%);

    transform-origin:
        center bottom;

    background-image:
        url("/assets/images/576879.png?v=4");

    background-repeat:
        no-repeat;

    background-size:
        400%
        400%;

    background-position:
        0%
        0%;

    image-rendering:
        pixelated;

    filter:
        grayscale(1)
        contrast(1.08)
        brightness(0.98);

    transition:
        none !important;
}


/* =========================================================
   ACTIVE TALK
   ========================================================= */

.jane-talk-layer.is-active {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   GEOMETRY GUARANTEE

   Ninguna transición de estado puede cambiar:
   top / left / bottom / scale / size.

   El JS únicamente deberá modificar
   background-position del TALK sheet.
   ========================================================= */

.jane-idle-image,
.jane-talk-layer {
    will-change: auto;
}


/* =========================================================
   CRT SCANLINES
   ========================================================= */

.jane-scanlines {
    position: absolute;

    z-index: 20;

    inset: 0;

    pointer-events: none;

    background:

        repeating-linear-gradient(

            to bottom,

            rgba(255,255,255,0.026)
            0px,

            rgba(255,255,255,0.026)
            1px,

            rgba(0,0,0,0.15)
            2px,

            rgba(0,0,0,0.15)
            4px

        );
}


/* =========================================================
   CRT NOISE
   ========================================================= */

.jane-noise {
    position: absolute;

    z-index: 21;

    inset: 0;

    opacity: 0;

    pointer-events: none;

    background:

        repeating-linear-gradient(

            90deg,

            transparent
            0px,

            transparent
            2px,

            rgba(255,255,255,0.09)
            3px,

            transparent
            4px

        );
}


/* =========================================================
   GLITCH

   NO mueve a Jane.

   Solo cambia:
   - brillo
   - contraste
   - ruido
   ========================================================= */

.jane-file.is-glitching
.jane-idle-image.is-active,

.jane-file.is-glitching
.jane-talk-layer.is-active {
    animation:
        jane-phosphor-glitch
        420ms
        steps(1,end);
}


.jane-file.is-glitching
.jane-noise {
    animation:
        jane-noise-glitch
        420ms
        steps(1,end);
}


/* =========================================================
   PHOSPHOR GLITCH
   ========================================================= */

@keyframes jane-phosphor-glitch {

    0% {
        filter:
            grayscale(1)
            contrast(1.08)
            brightness(0.98);
    }


    15% {
        filter:
            grayscale(1)
            contrast(1.90)
            brightness(1.35);
    }


    29% {
        filter:
            grayscale(1)
            contrast(1.45)
            brightness(0.72);
    }


    45% {
        filter:
            grayscale(1)
            contrast(2.05)
            brightness(1.20);
    }


    62% {
        filter:
            grayscale(1)
            contrast(1.25)
            brightness(0.80);
    }


    79% {
        filter:
            grayscale(1)
            contrast(1.65)
            brightness(1.08);
    }


    100% {
        filter:
            grayscale(1)
            contrast(1.08)
            brightness(0.98);
    }

}


/* =========================================================
   NOISE GLITCH
   ========================================================= */

@keyframes jane-noise-glitch {

    0% {
        opacity: 0.75;
    }


    18% {
        opacity: 0.12;
    }


    34% {
        opacity: 0.82;
    }


    52% {
        opacity: 0.18;
    }


    70% {
        opacity: 0.60;
    }


    100% {
        opacity: 0;
    }

}


/* =========================================================
   JANE META
   ========================================================= */

.jane-meta {
    margin-top: 14px;

    color:
        var(--terminal-green);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 11px;

    line-height: 1.6;

    text-shadow:
        0 0 3px
        rgba(0,255,102,0.55);
}


.jane-meta p {
    margin:
        0
        0
        4px;
}


.jane-meta span {
    color:
        #f1fff5;
}


/* =========================================================
   JANE TALKING STATUS
   ========================================================= */

.jane-file[data-state="talking"]
.jane-meta span {
    color:
        #00ff66;

    text-shadow:
        0 0 5px
        rgba(0,255,102,0.85);
}


/* =========================================================
   MAIN DIVIDER
   ========================================================= */

.policies-divider {
    width: 2px;

    height: 380px;

    justify-self: center;

    background:
        var(--white-line);
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.policies-right-panel {
    width: 100%;

    max-width: 680px;

    min-width: 0;
}


/* =========================================================
   TERMINAL
   ========================================================= */

.policies-terminal {
    width: 100%;

    max-width: 680px;
}


/* =========================================================
   NAV
   ========================================================= */

.policies-nav {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;
}


/* =========================================================
   NAV BUTTONS
   ========================================================= */

.policies-nav-button,
.policies-nav-button:link,
.policies-nav-button:visited {
    margin: 0;

    padding: 0;

    border: none;

    background: transparent;

    color:
        var(--terminal-green);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 13px;

    line-height: 1.5;

    text-decoration: none;

    cursor: pointer;

    text-shadow:

        0 0 3px
        rgba(0,255,102,0.55),

        0 0 6px
        rgba(0,255,102,0.17);
}


.policies-nav-button:hover {
    color:
        #ffffff;

    text-shadow:

        0 0 3px
        #ffffff,

        0 0 8px
        rgba(0,255,102,0.80);
}


.policies-nav-button.is-active {
    color:
        #ffffff;

    text-shadow:

        0 0 3px
        #ffffff,

        0 0 8px
        rgba(0,255,102,0.70);
}


.policies-nav-button:focus-visible {
    outline:
        1px dotted
        var(--terminal-green);

    outline-offset:
        4px;
}


/* =========================================================
   RECORD WINDOW
   ========================================================= */

.policies-record-window {
    position: relative;

    width: 100%;

    height: 500px;

    min-height: 390px;

    max-height: 62vh;

    overflow: hidden;

    background:
        #000000;

    border:
        1px solid
        var(--terminal-green);

    box-shadow:

        inset
        0 0 0 1px
        rgba(0,255,102,0.05),

        0 0 6px
        rgba(0,255,102,0.08);
}


/* =========================================================
   RECORD VIEW
   ========================================================= */

.policies-record-view {
    box-sizing: border-box;

    width: 100%;

    height: 100%;

    overflow-x: hidden;

    overflow-y: auto;

    padding:
        18px
        20px
        25px;

    background:
        #000000;

    color:
        var(--terminal-green);

    scrollbar-width:
        thin;

    scrollbar-color:
        #00a944
        #020202;
}


.policies-record-view[hidden] {
    display:
        none !important;
}


/* =========================================================
   RECORD SCROLLBAR
   ========================================================= */

.policies-record-view::-webkit-scrollbar {
    width: 10px;
}


.policies-record-view::-webkit-scrollbar-track {
    background:
        #020202;
}


.policies-record-view::-webkit-scrollbar-thumb {
    background:
        #00692d;

    border:
        1px solid
        #00bb4d;
}


/* =========================================================
   RECORD HEADING
   ========================================================= */

.policies-record-heading {
    margin:
        0
        0
        18px;

    padding-bottom:
        9px;

    border-bottom:
        1px solid
        rgba(0,255,102,0.28);

    color:
        #effff3;

    font-size: 14px;

    font-weight: bold;

    text-decoration:
        underline;

    text-underline-offset:
        2px;
}


/* =========================================================
   POLICY DOCUMENT
   ========================================================= */

.policies-document-section {
    display: grid;

    grid-template-columns:
        34px
        minmax(0,1fr);

    gap: 12px;

    margin:
        0
        0
        24px;

    padding:
        0
        0
        24px;

    border-bottom:
        1px dashed
        rgba(0,255,102,0.20);
}


.policies-document-section:last-child {
    margin-bottom:
        0;

    border-bottom:
        none;
}


.policies-document-number {
    padding-top: 3px;

    color:
        #6da980;

    font-size: 11px;
}


.policies-document-section h2 {
    margin:
        0
        0
        11px;

    color:
        #effff3;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 14px;

    font-weight: normal;

    line-height: 1.45;
}


.policies-document-section p {
    margin:
        0
        0
        12px;

    color:
        #7effa9;

    font-size: 12.5px;

    line-height: 1.75;
}


.policies-inline-action,
.policies-inline-action:visited {
    display: inline-block;

    margin-top: 8px;

    color:
        var(--terminal-green);

    font-size: 12px;

    text-decoration: none;
}


.policies-inline-action:hover {
    color:
        #ffffff;
}


/* =========================================================
   FAQ CONVERSATION
   ========================================================= */

.jane-conversation {
    box-sizing:
        border-box;

    width: 100%;

    background:
        #020302;

    border:
        1px solid
        rgba(0,255,102,0.40);

    scroll-margin-top:
        10px;
}


/* =========================================================
   SELECTED QUESTION
   ========================================================= */

.jane-selected-question {
    box-sizing:
        border-box;

    width: 100%;

    padding:
        12px
        15px;

    background:
        rgba(0,255,102,0.035);

    border-bottom:
        1px dashed
        rgba(0,255,102,0.30);
}


.jane-selected-question[hidden] {
    display:
        none !important;
}


/* =========================================================
   ANSWER WINDOW
   ========================================================= */

.jane-answer-scroll {
    box-sizing: border-box;

    width: 100%;

    height: 180px;

    overflow-x: hidden;

    overflow-y: auto;

    padding:
        13px
        15px;

    scrollbar-width:
        thin;

    scrollbar-color:
        #007833
        #020202;
}


.jane-answer-scroll::-webkit-scrollbar {
    width: 8px;
}


.jane-answer-scroll::-webkit-scrollbar-track {
    background:
        #020202;
}


.jane-answer-scroll::-webkit-scrollbar-thumb {
    background:
        #00692d;

    border:
        1px solid
        #00aa49;
}


/* =========================================================
   CHAT
   ========================================================= */

.jane-chat-message {
    margin:
        0
        0
        18px;
}


.jane-chat-speaker {
    margin-bottom: 8px;

    color:
        #effff3;

    font-size: 12px;

    font-weight: bold;
}


.jane-chat-text {
    padding-left: 12px;

    border-left:
        1px solid
        rgba(0,255,102,0.35);
}


.jane-chat-text p {
    margin:
        0
        0
        7px;

    color:
        #83fca9;

    font-size: 12px;

    line-height: 1.7;
}


.jane-selected-question
.jane-chat-text p {
    color:
        #c8d4cc;
}


/* =========================================================
   ANSWER
   ========================================================= */

.jane-answer {
    width: 100%;
}


/* =========================================================
   TYPING STATUS
   ========================================================= */

.jane-typing-status {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 12px;

    color:
        #73887a;

    font-size: 9px;

    letter-spacing:
        0.06em;
}


.jane-typing-status[hidden] {
    display:
        none !important;
}


/* =========================================================
   TYPING LED
   ========================================================= */

.jane-typing-led {
    width: 6px;

    height: 6px;

    flex:
        0 0 auto;

    background:
        #00ff66;

    box-shadow:

        0 0 3px
        #00ff66,

        0 0 7px
        rgba(0,255,102,0.65);

    animation:
        jane-typing-led-blink
        0.55s
        steps(1,end)
        infinite;
}


@keyframes jane-typing-led-blink {

    0%,
    54% {
        opacity: 1;
    }

    55%,
    100% {
        opacity: 0.18;
    }

}


/* =========================================================
   FAQ CONTROLS
   ========================================================= */

.jane-faq-controls {
    margin-top: 14px;
}


.jane-faq-controls[hidden] {
    display:
        none !important;
}


.jane-faq-control-button,
.jane-faq-control-button:visited {
    color:
        var(--terminal-green);

    font-size: 12px;

    text-decoration: none;
}


.jane-faq-control-button:hover {
    color:
        #ffffff;
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.jane-faq-separator {
    width: 100%;

    height: 1px;

    margin:
        15px
        0;

    background:
        rgba(0,255,102,0.22);
}


/* =========================================================
   QUESTION SELECTOR
   ========================================================= */

.jane-question-selector {
    box-sizing: border-box;

    width: 100%;

    padding:
        13px
        15px
        15px;

    background:
        #010201;

    border:
        1px solid
        rgba(0,255,102,0.40);
}


/* =========================================================
   QUESTION HEADING
   ========================================================= */

.jane-question-heading {
    margin-bottom: 10px;

    padding-bottom: 7px;

    color:
        #748b7b;

    font-size: 10px;

    letter-spacing:
        0.08em;

    border-bottom:
        1px dashed
        rgba(0,255,102,0.20);
}


/* =========================================================
   QUESTION LIST
   ========================================================= */

.jane-question-list {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;
}


/* =========================================================
   QUESTION BUTTON
   ========================================================= */

.jane-question-button {
    display: inline-flex;

    align-items: baseline;

    gap: 6px;

    max-width: 100%;

    margin: 0;

    padding: 3px 0;

    border: none;

    background: transparent;

    color:
        var(--terminal-green);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 12px;

    line-height: 1.5;

    text-align: left;

    cursor: pointer;
}


.jane-question-button:hover {
    color:
        #ffffff;

    transform:
        translateX(3px);
}


.jane-question-button.is-selected {
    color:
        #ffffff;

    text-shadow:
        0 0 5px
        rgba(0,255,102,0.75);
}


.jane-question-button:disabled {
    opacity: 0.35;

    cursor: wait;

    transform: none;
}


/* =========================================================
   TYPEWRITER CURSOR
   ========================================================= */

.jane-faq-cursor {
    display: inline-block;

    width: 7px;

    height: 13px;

    margin-left: 3px;

    vertical-align: -2px;

    background:
        var(--terminal-green);

    box-shadow:
        0 0 5px
        rgba(0,255,102,0.60);

    animation:
        jane-cursor-blink
        0.72s
        steps(1,end)
        infinite;
}


@keyframes jane-cursor-blink {

    0%,
    49% {
        opacity: 1;
    }


    50%,
    100% {
        opacity: 0;
    }

}


/* =========================================================
   TYPO CORRECTION
   ========================================================= */

.jane-chat-text.is-correcting {
    text-shadow:

        -1px 0
        rgba(255,255,255,0.25),

        1px 0
        rgba(0,255,102,0.55);
}


/* =========================================================
   FINAL TERMINAL CURSOR
   ========================================================= */

.policies-final-cursor {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .policies-layout {
        display: flex;

        flex-direction: column;

        width: 100%;

        padding:
            45px
            0;

        gap: 38px;
    }


    .policies-divider {
        display: none;
    }


    .policies-right-panel {
        width: 100%;

        max-width: 720px;
    }


    .policies-record-window {
        height: 510px;

        max-height: 66vh;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .policies-layout {
        padding:
            30px
            0;

        gap: 30px;
    }


    .jane-file {
        --jane-width: 190px;

        --jane-visual-width: 112%;

        --jane-bottom: -6px;
    }


    .policies-nav {
        gap: 11px;
    }


    .policies-nav-button {
        font-size: 11px;
    }


    .policies-record-window {
        height: 540px;

        max-height: 72vh;
    }


    .policies-record-view {
        padding:
            14px
            13px
            20px;
    }


    .policies-record-heading {
        font-size: 12px;
    }


    .policies-document-section {
        grid-template-columns:
            27px
            minmax(0,1fr);

        gap: 8px;
    }


    .policies-document-section h2 {
        font-size: 12px;
    }


    .policies-document-section p {
        font-size: 11px;
    }


    .jane-chat-speaker,
    .jane-chat-text p,
    .jane-question-button {
        font-size: 11px;
    }


    .jane-answer-scroll {
        height: 185px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .jane-file.is-glitching
    .jane-idle-image.is-active,

    .jane-file.is-glitching
    .jane-talk-layer.is-active,

    .jane-file.is-glitching
    .jane-noise,

    .jane-faq-cursor,

    .jane-typing-led {
        animation:
            none !important;
    }


    .jane-question-button:hover {
        transform:
            none;
    }

}