/* ── Variables & reset ─────────────────────────────────── */
:root {
    --bg:        #0e0e0e;
    --bg2:       #141414;
    --bg3:       #1a1a1a;
    --border:    rgba(255,255,255,.07);
    --accent:    #77ff88;
    --accent2:   #77ffee;
    --danger:    rgba(255,80,80,.8);
    --text:      #e0e0e0;
    --text-dim:  rgba(255,255,255,.35);
    --text-muted:rgba(255,255,255,.18);
    --font:      "Fira Code", monospace;
    --radius:    2px;
    --gap:       1rem;
    --trans:     .15s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body  { height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); }
a           { color: inherit; text-decoration: none; }
button      { cursor: pointer; font-family: var(--font); }
input, textarea { font-family: var(--font); }

/* Scanlines */
body::before {
    content: "";
    position: fixed; inset: 0; pointer-events: none; z-index: 9998;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px);
}

/* Scrollbar */
::-webkit-scrollbar              { width: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(119,255,136,.2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(119,255,136,.4); }

/* Bouton standard */
.btn {
    display: inline-flex; align-items: center; gap: .5em;
    padding: .55em 1.4em;
    border: 1px solid rgba(119,255,136,.3);
    background: transparent;
    color: var(--accent);
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.btn:hover  { border-color: var(--accent); background: rgba(119,255,136,.06); }
.btn--solid { background: rgba(119,255,136,.12); }
.btn--danger{ border-color: rgba(255,80,80,.4); color: var(--danger); }
.btn--danger:hover { background: rgba(255,80,80,.08); border-color: var(--danger); }

/* Input */
.inp {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .85rem;
    padding: .6em .9em;
    outline: none;
    transition: border-color var(--trans);
}
.inp:focus { border-color: rgba(119,255,136,.4); }

/* Label */
.lbl { font-size: .72rem; letter-spacing: .15em; color: var(--text-dim); text-transform: uppercase; margin-bottom: .4em; display: block; }

/* Tag */
.tag { font-size: .65rem; letter-spacing: .1em; padding: .15em .5em; border: 1px solid var(--border); color: var(--text-dim); }

/* Glitch title */
.glitch-title {
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    letter-spacing: .4em;
    text-transform: uppercase;
    position: relative;
    animation: g-idle 7s infinite;
}
.glitch-title::before, .glitch-title::after {
    content: attr(data-text); position: absolute; inset: 0; opacity: 0;
}
.glitch-title::before { color: #77f8; animation: g-a 7s infinite; }
.glitch-title::after  { color: #ff68; animation: g-b 7s infinite; }
@keyframes g-idle { 0%,92%,100%{transform:translate(0)} 93%{transform:translate(-2px,1px)} 94%{transform:translate(2px,-1px)} 95%{transform:translate(0)} }
@keyframes g-a    { 0%,92%,100%{opacity:0} 93%{opacity:.5;transform:translate(-3px,1px);clip-path:inset(20% 0 50% 0)} 94%{opacity:.3;clip-path:inset(65% 0 5% 0)} 95%{opacity:0} }
@keyframes g-b    { 0%,93%,100%{opacity:0} 94%{opacity:.5;transform:translate(3px,-1px);clip-path:inset(40% 0 30% 0)} 95%{opacity:0} }

/* Messages ──────────────────────────────────────────────── */
.msg {
    display: flex; flex-direction: column; gap: .25em;
    max-width: 72%; padding: .65em .9em;
    background: var(--bg2); border-left: 2px solid transparent;
    position: relative; margin-bottom: .4em;
    animation: msg-in .15s ease;
}
.msg--mine { align-self: flex-end; border-left: none; border-right: 2px solid rgba(119,255,136,.5); background: rgba(119,255,136,.05); }
/* Message sans texte (média seul) — bulle compacte sans fond lourd */
.msg--media-only { background: transparent; padding: .3em 0; border-color: transparent !important; }
.msg--media-only .msg-meta { padding: 0 .3em; }
.msg--media-only .msg-actions { padding: 0 .3em; }
@keyframes msg-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.msg-meta   { display: flex; gap: .7em; align-items: center; }
.msg-nick   { font-size: .7rem; letter-spacing: .1em; color: var(--accent); }
.msg-time   { font-size: .65rem; color: var(--text-muted); }
.msg-pin    { font-size: .65rem; color: var(--accent2); }
.msg-body   { font-size: .85rem; line-height: 1.5; word-break: break-word; }
.msg-body code  { background: var(--bg3); padding: .1em .3em; font-size: .8em; }
.msg-body pre   { background: var(--bg3); padding: .7em 1em; overflow-x: auto; font-size: .78em; margin: .4em 0; }
.msg-quote  { font-size: .75rem; color: var(--text-dim); border-left: 2px solid var(--accent); padding-left: .6em; margin-bottom: .3em; }
.msg-quote--link { cursor: pointer; transition: color var(--trans); }
.msg-quote--link:hover { color: var(--text); }

.msg--highlight { animation: msg-hl .8s ease !important; }
@keyframes msg-hl {
    0%,100% { background: var(--bg2); }
    40%     { background: rgba(119,255,136,.14); border-left-color: var(--accent); }
}

.msg-actions { display: none; gap: .4em; }
.msg:hover .msg-actions { display: flex; }
.msg-action { background: none; border: 1px solid var(--border); color: var(--text-dim); font-size: .7rem; padding: .15em .4em; transition: color var(--trans), border-color var(--trans); }
.msg-action:hover { color: var(--accent); border-color: rgba(119,255,136,.4); }
.msg-action--del:hover { color: var(--danger); border-color: rgba(255,80,80,.4); }

.msg-reactions { display: flex; flex-wrap: wrap; gap: .3em; }
.reaction { background: var(--bg3); border: 1px solid var(--border); font-size: .75rem; padding: .1em .5em; transition: border-color var(--trans); }
.reaction:hover { border-color: rgba(119,255,136,.4); }

/* TTL bar */
.msg-ttl-bar  { height: 2px; background: var(--bg3); margin-top: .3em; }
.msg-ttl-fill { height: 100%; background: var(--accent); transition: width .5s linear; }

/* ── Médias dans les messages ─────────────────────────────── */

/* Vignette image */
.msg-thumb {
    position: relative; display: inline-block;
    border-radius: 8px; overflow: hidden;
    cursor: zoom-in; margin: .25em 0; flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.msg-img {
    width: 220px; height: 165px;
    object-fit: cover; display: block;
    transition: filter .18s;
}
.msg-thumb:hover .msg-img { filter: brightness(.55); }
.msg-thumb-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .25em; padding: .5em;
    opacity: 0; transition: opacity .18s;
    pointer-events: none;
}
.msg-thumb:hover .msg-thumb-overlay { opacity: 1; }
.msg-thumb-icon { font-size: 1.6rem; color: #fff; line-height: 1; }
.msg-thumb-name {
    font-size: .62rem; color: rgba(255,255,255,.9);
    letter-spacing: .06em; text-align: center;
    max-width: 190px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.msg-thumb-size { font-size: .58rem; color: rgba(255,255,255,.65); }

/* Vidéo compacte */
.msg-video-wrap { display: inline-block; margin: .25em 0; }
.msg-video {
    width: 280px; max-height: 190px;
    border-radius: 8px; display: block;
    background: #000;
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.msg-video-info {
    display: flex; align-items: center; justify-content: space-between;
    width: 280px; margin-top: .2em;
    font-size: .62rem; color: var(--text-dim); letter-spacing: .05em;
}
.msg-dl-btn {
    color: var(--text-dim); text-decoration: none; flex-shrink: 0;
    transition: color var(--trans); letter-spacing: .08em; font-size: .62rem;
}
.msg-dl-btn:hover { color: var(--accent); }

/* Reaction picker */
.reaction-picker { display: flex; gap: .3em; background: var(--bg3); border: 1px solid var(--border); padding: .4em; position: absolute; z-index: 100; }
.rp-emoji { background: none; border: none; font-size: 1.1rem; transition: transform .1s; }
.rp-emoji:hover { transform: scale(1.3); }

/* Typing indicator */
#typing-indicator { font-size: .7rem; color: var(--text-dim); letter-spacing: .08em; min-height: 1.2em; padding: .2em .5em; }

/* Reply bar */
#reply-bar { display: none; align-items: center; gap: .7em; padding: .4em .8em; background: var(--bg2); border-top: 1px solid var(--border); font-size: .75rem; color: var(--text-dim); }
#reply-cancel { background: none; border: none; color: var(--text-dim); font-size: .9rem; }
#reply-cancel:hover { color: var(--danger); }

/* Upload progress bar */
#upload-progress-wrap { height: 3px; background: var(--bg3); display: none; }
#upload-progress-bar  { height: 100%; width: 0%; background: var(--accent); transition: width .1s linear; }

/* ── Lightbox ── */
#media-lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,.94);
    align-items: center; justify-content: center; flex-direction: column;
    gap: .8em;
}
#media-lightbox.lb-open { display: flex; }
.lb-img {
    max-width: 94vw; max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(0,0,0,.8);
}
.lb-close {
    position: absolute; top: 1rem; right: 1.2rem;
    background: none; border: none;
    color: var(--text-dim); font-size: 2rem; line-height: 1;
    cursor: pointer; transition: color var(--trans);
}
.lb-close:hover { color: #fff; }
.lb-info {
    font-size: .7rem; letter-spacing: .1em;
    color: var(--text-dim); text-align: center;
    max-width: 80vw; word-break: break-all;
}