* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    background: #000000;
    color: #00FF00;
    font-family: "Courier New", Courier, monospace;
    min-height: 100%;
}

body {
    padding: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.45);
}

/* Léger effet scanlines CRT */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

.terminal { max-width: 40rem; margin: 0 auto; }

.prompt { opacity: 0.6; margin-bottom: 1.5rem; font-size: 0.8rem; letter-spacing: 0.1em; }

.flash { color: #FF3333; text-shadow: 0 0 6px rgba(255, 0, 0, 0.5); margin-bottom: 1rem; }

#mission-text { white-space: pre-wrap; min-height: 2rem; margin-bottom: 1.5rem; }

form { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.5rem; }

label { letter-spacing: 0.05em; }

input[type="text"] {
    background: #000;
    border: 1px solid #00FF00;
    color: #00FF00;
    font: inherit;
    padding: 0.6rem;
    text-shadow: inherit;
    outline: none;
}
input[type="text"]:focus { box-shadow: 0 0 8px rgba(0, 255, 0, 0.6); }

input[type="file"] { display: none; }

.file-label span, button {
    display: inline-block;
    background: #000;
    border: 1px solid #00FF00;
    color: #00FF00;
    font: inherit;
    padding: 0.7rem 1rem;
    cursor: pointer;
    text-align: center;
    text-shadow: inherit;
    width: 100%;
}
.file-label span:hover, button:hover { background: #00FF00; color: #000; text-shadow: none; }

.file-name { font-size: 0.85rem; opacity: 0.7; }
.file-name:empty::before { content: attr(data-empty); }

.loader, .waiting { margin: 1rem 0; letter-spacing: 0.08em; }
/* Progression de l'envoi : barre en caractères, sur sa propre ligne */
.loader-progress { display: block; margin-top: 0.5rem; white-space: pre; font-size: 0.85rem; overflow: hidden; }

/* Assistance du QG : bouton discret, avertissement encadré, solution obtenue */
.assist { margin-bottom: 1.5rem; }
.assist-open { opacity: 0.6; font-size: 0.85rem; }
.assist-open:hover { opacity: 1; }
.assist-warning {
    border: 1px solid #FF3333;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.assist-title { color: #FF3333; text-shadow: 0 0 6px rgba(255, 0, 0, 0.5); letter-spacing: 0.08em; }
.assist-warning strong { color: #FF3333; text-shadow: 0 0 6px rgba(255, 0, 0, 0.5); }
.assist-actions { margin-bottom: 0; }
.assist-solution { margin-bottom: 1.5rem; }

/* Lien de suivi du point relais, intégré au texte de mission (écran final) */
#mission-text a.mission-link {
    color: #00FF00;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-shadow: inherit;
}
#mission-text a.mission-link:hover { background: #00FF00; color: #000; text-shadow: none; }

.dots::after { content: ""; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

[hidden] { display: none !important; }

/* --- Canal direct (chat) : indicateur fixe en haut à droite du terminal --- */
.chat { position: fixed; top: 0.75rem; right: 0.75rem; z-index: 10; }

/* Enveloppe : icône de comms sur le HUD du terminal */
.chat-toggle {
    position: relative;
    width: 2.9rem;
    height: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 1px solid #00FF00;
    color: #00FF00;
    font: inherit;
    text-shadow: inherit;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.35);
}
.chat-toggle:hover { background: #00FF00; color: #000; text-shadow: none; box-shadow: 0 0 12px rgba(0, 255, 0, 0.7); }
.chat-toggle:focus-visible { outline: 2px solid #00FF00; outline-offset: 2px; }
.chat-toggle-icon { font-size: 1.55rem; line-height: 1; }

/* Pastille de messages non lus : seul accent non-vert (comme .flash) */
.chat-badge {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #FF3333;
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 1.15rem;
    text-align: center;
    text-shadow: none;
    border: 1px solid #000;
    box-shadow: 0 0 8px rgba(255, 51, 51, 0.85);
}

/* Alerte : l'enveloppe clignote (fond rouge plein) tant qu'il reste des non-lus */
.chat-toggle.chat-alert { animation: chat-blink 0.9s steps(1, end) infinite; }
@keyframes chat-blink {
    0%, 100% {
        background: #000;
        color: #00FF00;
        border-color: #FF3333;
        box-shadow: 0 0 14px rgba(255, 51, 51, 0.85);
    }
    50% {
        background: #FF3333;
        color: #000;
        border-color: #FF3333;
        box-shadow: 0 0 20px rgba(255, 51, 51, 0.95);
    }
}

/* Panneau déroulant ancré sous l'enveloppe */
.chat-panel {
    position: absolute;
    top: calc(2.9rem + 0.5rem);
    right: 0;
    width: min(21rem, calc(100vw - 1.5rem));
    background: #000;
    border: 1px solid #00FF00;
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.4);
    padding: 0.75rem;
}
.chat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    border-bottom: 1px solid rgba(0, 255, 0, 0.35);
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
}
.chat-panel-head > span { opacity: 0.75; }

/* Croix de fermeture du panneau */
.chat-close {
    width: auto;
    background: none;
    border: none;
    color: #00FF00;
    font: inherit;
    text-shadow: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}
.chat-close:hover { background: none; color: #FFFFFF; text-shadow: 0 0 8px rgba(0, 255, 0, 0.8); }

@media (prefers-reduced-motion: reduce) {
    /* Pas de clignotement : état rouge plein fixe pour signaler les non-lus */
    .chat-toggle.chat-alert {
        animation: none;
        background: #FF3333;
        color: #000;
        border-color: #FF3333;
        box-shadow: 0 0 14px rgba(255, 51, 51, 0.9);
    }
}

.chat-thread {
    list-style: none;
    max-height: 14rem;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.msg {
    max-width: 85%;
    padding: 0.35rem 0.55rem;
    border: 1px solid #00FF00;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.msg-qg    { align-self: flex-start; }
.msg-agent { align-self: flex-end; background: rgba(0, 255, 0, 0.12); }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-receipt { align-self: flex-end; font-size: 0.7rem; opacity: 0.55; letter-spacing: 0.04em; }
.msg-receipt.read { opacity: 0.95; }

.chat-panel textarea {
    background: #000;
    border: 1px solid #00FF00;
    color: #00FF00;
    font: inherit;
    text-shadow: inherit;
    padding: 0.6rem;
    outline: none;
    width: 100%;
    resize: vertical;
}
.chat-panel textarea:focus { box-shadow: 0 0 8px rgba(0, 255, 0, 0.6); }