/* ── CyberMsg — composants du 28/10/2026 + thème CLAIR ───────────────────────────────
   Chargée par index.php, pages/auth_app.php et pages/anon_room.php APRÈS les .css du module
   et le <style> en ligne, AVANT mobile.css (qui garde le dernier mot sur téléphone).
   ⚠ Servie avec ?v= (Cloudflare met les .css en cache) : modifier = changer le ?v= dans les 3 pages.
   Le thème SOMBRE est celui d'origine : rien ici ne le modifie, hors composants neufs.
   Le thème se choisit par appareil (localStorage « cybermsg_theme », posé avant le CSS). */

/* ── Couleurs d'écriture (nom + texte) : 8 couleurs, une teinte par thème, toutes lisibles ── */
[data-ink="vert"]   { --ink: #77ff88; }
[data-ink="cyan"]   { --ink: #77ffee; }
[data-ink="bleu"]   { --ink: #8ab4ff; }
[data-ink="violet"] { --ink: #c9a2ff; }
[data-ink="rose"]   { --ink: #ff9bd6; }
[data-ink="rouge"]  { --ink: #ff8a80; }
[data-ink="orange"] { --ink: #ffb36b; }
[data-ink="jaune"]  { --ink: #ffe27a; }
:root[data-theme="light"] [data-ink="vert"]   { --ink: #11793a; }
:root[data-theme="light"] [data-ink="cyan"]   { --ink: #0b6e6b; }
:root[data-theme="light"] [data-ink="bleu"]   { --ink: #1f56b8; }
:root[data-theme="light"] [data-ink="violet"] { --ink: #6a3fb5; }
:root[data-theme="light"] [data-ink="rose"]   { --ink: #a8246d; }
:root[data-theme="light"] [data-ink="rouge"]  { --ink: #b3261e; }
:root[data-theme="light"] [data-ink="orange"] { --ink: #a04a07; }
:root[data-theme="light"] [data-ink="jaune"]  { --ink: #7a5d00; }
.msg[data-ink] .msg-nick, .msg[data-ink] .msg-body,
.cm-card-name[data-ink], .member-name[data-ink] { color: var(--ink); }

.ink-swatches { display: flex; flex-wrap: wrap; gap: .5em .4em; }
.ink-swatch { position: relative; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: .25em; min-width: 3.2em; }
.ink-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ink-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); display: block; }
.ink-dot[data-ink] { background: var(--ink); }
.ink-dot[data-ink-default] { background: linear-gradient(135deg, var(--text) 0 50%, var(--accent) 50% 100%); }
.ink-swatch input:checked + .ink-dot { border-color: var(--bg2); box-shadow: 0 0 0 2px var(--accent); }
.ink-swatch input:focus-visible + .ink-dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.ink-name { font-size: .55rem; color: var(--text-dim); letter-spacing: .04em; }

/* ── Messages : photo, nom cliquable, « modifié », réaction à moi ── */
.msg-avatar { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
              display: inline-flex; align-items: center; justify-content: center;
              background: var(--bg3); font-size: .62rem; color: var(--text-dim); }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-nick[data-member] { cursor: pointer; }
.msg-nick[data-member]:hover, .msg-nick[data-member]:focus-visible { text-decoration: underline; outline: none; }
.msg-edited { font-size: .6rem; color: var(--text-muted); font-style: italic; letter-spacing: .04em; }
.reaction--mine { border-color: rgba(119,255,136,.55);
                  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
                  background: color-mix(in srgb, var(--accent) 14%, var(--bg3)); }
.msg-quote--link { cursor: pointer; }

/* ── Fil : jours, « nouveaux messages », début, bouton ↓, dépôt de fichier ── */
.thread { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thread > .messages-wrap, .thread > .anon-messages { flex: 1; min-height: 0; position: relative; }   /* repère des offsetTop */
.day-sep, .new-sep { display: flex; align-items: center; gap: .8em; margin: .9em 0 .6em;
                     font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.day-sep::before, .day-sep::after, .new-sep::before, .new-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.new-sep { color: #ff7a7a; }
.new-sep::before, .new-sep::after { background: rgba(255,122,122,.45); }
.thread-top { text-align: center; font-size: .66rem; letter-spacing: .12em; color: var(--text-muted); padding: .5em 0 .9em; }
.jump-btn { position: absolute; right: 14px; bottom: 12px; z-index: 50; width: 42px; height: 42px; border-radius: 50%;
            display: none; align-items: center; justify-content: center; cursor: pointer;
            background: var(--bg3); border: 1px solid var(--border); color: var(--accent); font-size: 1.15rem;
            box-shadow: 0 4px 16px rgba(0,0,0,.35); }
.jump-btn.show { display: flex; }
.jump-btn[data-count]:not([data-count=""])::after {
    content: attr(data-count); position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px; background: var(--accent); color: #000; font-size: .62rem; font-weight: bold;
    display: flex; align-items: center; justify-content: center; }
.cm-drop { outline: 2px dashed var(--accent); outline-offset: -8px; }

/* ── Barre « modification en cours » (au-dessus de la saisie, comme la réponse) ── */
.edit-bar { display: none; align-items: center; gap: .7em; padding: .45em .9em; background: var(--bg2);
            border-top: 1px solid var(--border); font-size: .75rem; color: var(--accent); }
.edit-bar.open { display: flex; }
.edit-bar span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.edit-bar button { background: none; border: none; color: var(--text-dim); font-size: .95rem; padding: .1em .4em; }
.edit-bar button:hover { color: var(--danger); }

/* ── Recherche dans le salon ── */
.search-bar { max-height: 0; overflow: hidden; transition: max-height .2s ease; padding: 0 1em; flex-shrink: 0; }
.search-bar.open { max-height: 4.2em; padding: .5em 1em; border-bottom: 1px solid var(--border); }
.search-bar .inp { width: 100%; }
.search-count { font-size: .62rem; color: var(--text-muted); letter-spacing: .06em; padding: .25em 0 0; min-height: 1.1em; }

/* ── Épinglés : un clic ramène au message dans la conversation ── */
.pinned-item { cursor: pointer; position: relative; }
.pinned-item .msg-actions { display: none !important; }
.pinned-item .msg { max-width: 100%; margin-bottom: 0; cursor: pointer; }
.pinned-item:hover .msg, .pinned-item:focus-visible .msg { outline: 1px solid var(--accent); }
.pinned-go { display: block; font-size: .6rem; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; padding: .25em .2em 0; }

/* ── Fiche profil (clic sur un nom) ── */
.cm-card-bg { position: fixed; inset: 0; z-index: 800; background: rgba(0,0,0,.6);
              display: flex; align-items: center; justify-content: center; padding: 16px; }
.cm-card { width: min(360px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
           background: var(--bg2); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.5);
           padding: 1.6em 1.4em 1.2em; display: flex; flex-direction: column; align-items: center; gap: .7em; text-align: center; }
.cm-card-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
                  display: flex; align-items: center; justify-content: center; background: var(--bg3); font-size: 2.2rem; color: var(--accent); }
.cm-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-card-name { font-size: 1rem; letter-spacing: .08em; overflow-wrap: anywhere; }
.cm-card-me { font-size: .7rem; color: var(--text-dim); }
.cm-card-tags { display: flex; gap: .4em; flex-wrap: wrap; justify-content: center; }
.tag--on { color: var(--accent); border-color: currentColor; }
.cm-card-bio { width: 100%; text-align: left; font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; background: var(--bg3); padding: .7em .8em; }
.cm-card-bio--empty { text-align: center; color: var(--text-muted); background: none; }
.cm-card-actions { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; margin-top: .3em; }

/* ── Petits éléments de formulaire communs aux pages ── */
.settings-note { font-size: .68rem; color: var(--text-muted); line-height: 1.45; }
.form-error    { color: var(--danger); font-size: .75rem; min-height: 1em; }

/* ── Bouton clair / sombre (☀ en sombre = passer au clair, ☾ en clair) ── */
.theme-btn::before { content: "☀"; font-size: 1rem; line-height: 1; }
:root[data-theme="light"] .theme-btn::before { content: "☾"; }
.landing-theme { position: fixed; top: 12px; right: 12px; z-index: 20; padding: .45em .7em; }

/* ══ Thème CLAIR ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
    --bg: #eef1ee; --bg2: #ffffff; --bg3: #e5e9e5;
    --border: rgba(0,0,0,.12);
    --accent: #0f7a2e;            /* remplacée par la couleur du salon rendue lisible (readableAccent) */
    --accent2: #0a6e6b;
    --danger: #c62828;
    --text: #1b1f1c; --text-dim: rgba(0,0,0,.64); --text-muted: rgba(0,0,0,.58);
}
:root[data-theme="light"] body::before {
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.022) 2px, rgba(0,0,0,.022) 4px); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); }

:root[data-theme="light"] .btn { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
:root[data-theme="light"] .btn:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: var(--accent); }
:root[data-theme="light"] .btn--solid { background: color-mix(in srgb, var(--accent) 13%, transparent); }
:root[data-theme="light"] .btn--danger { border-color: rgba(198,40,40,.45); color: var(--danger); }
:root[data-theme="light"] .btn--danger:hover { background: rgba(198,40,40,.07); border-color: var(--danger); }
:root[data-theme="light"] .inp:focus,
:root[data-theme="light"] .compose-input:focus,
:root[data-theme="light"] .anon-compose-input:focus { border-color: var(--accent); }

:root[data-theme="light"] .glitch-title::before { color: #2f3dd6aa; }
:root[data-theme="light"] .glitch-title::after  { color: #b08a00aa; }

:root[data-theme="light"] .msg { box-shadow: 0 1px 2px rgba(0,0,0,.07); }
:root[data-theme="light"] .msg--mine { background: color-mix(in srgb, var(--accent) 8%, #fff);
                                       border-right-color: color-mix(in srgb, var(--accent) 65%, transparent); }
:root[data-theme="light"] .msg--media-only { box-shadow: none; }
:root[data-theme="light"] .msg-thumb { box-shadow: 0 2px 10px rgba(0,0,0,.18); }
:root[data-theme="light"] .msg.msg--open { outline-color: color-mix(in srgb, var(--accent) 40%, transparent); }
:root[data-theme="light"] .mention { background: color-mix(in srgb, var(--accent) 13%, transparent); }
:root[data-theme="light"] .mention::after { color: #0c8a3a; }
:root[data-theme="light"] .mention-box { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 -6px 24px rgba(0,0,0,.14); }
:root[data-theme="light"] .mention-item.active,
:root[data-theme="light"] .mention-item:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
:root[data-theme="light"] .reaction-picker { box-shadow: 0 6px 24px rgba(0,0,0,.15); }
:root[data-theme="light"] .new-sep { color: #c62828; }
:root[data-theme="light"] .new-sep::before, :root[data-theme="light"] .new-sep::after { background: rgba(198,40,40,.35); }
:root[data-theme="light"] .jump-btn { box-shadow: 0 4px 14px rgba(0,0,0,.18); }
:root[data-theme="light"] .jump-btn[data-count]:not([data-count=""])::after,
:root[data-theme="light"] .room-badge { color: #fff; }

:root[data-theme="light"] .room-item:hover  { background: rgba(0,0,0,.035); }
:root[data-theme="light"] .room-item.active { background: color-mix(in srgb, var(--accent) 9%, transparent); }
:root[data-theme="light"] .send-btn { background: color-mix(in srgb, var(--accent) 10%, transparent);
                                      border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
:root[data-theme="light"] .send-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); }

:root[data-theme="light"] .anon-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent);
                                             background: color-mix(in srgb, var(--accent) 4%, var(--bg2)); }
:root[data-theme="light"] .anon-room-share,
:root[data-theme="light"] .preview-opt { background: color-mix(in srgb, var(--accent) 6%, transparent); }
:root[data-theme="light"] .pw-gate,
:root[data-theme="light"] .modal-bg,
:root[data-theme="light"] .cm-card-bg { background: rgba(20,24,20,.45); }
:root[data-theme="light"] .pw-gate-box { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-theme="light"] .modal,
:root[data-theme="light"] .pw-gate-box,
:root[data-theme="light"] .cm-card { box-shadow: 0 12px 40px rgba(0,0,0,.2); }
:root[data-theme="light"] .modal { border-color: rgba(0,0,0,.14); }
:root[data-theme="light"] .session-lost,
:root[data-theme="light"] .cm-toast { background: #fff1f0; color: #b3261e; border-color: rgba(198,40,40,.4); }
:root[data-theme="light"] .qr-dock { border-color: var(--accent); }