:root { --noir: #0a0a0a; --noir2: #151515; --blanc: #fff; --gris: #a8a8a8; --rouge: #e5192b; --twitch: #9146ff; --tt1: #25f4ee; --tt2: #fe2c55; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--blanc); background: var(--noir); }
button { font: inherit; cursor: pointer; }
.hide { display: none !important; }

/* ---------- messages (commun a l'overlay, a la moderation et a la tablette) ---------- */
.msg { display: flex; align-items: flex-start; gap: .45em; padding: .3em .6em; line-height: 1.28; word-break: break-word; overflow-wrap: anywhere; }
.dot { flex: 0 0 auto; width: .7em; height: .7em; margin-top: .35em; border-radius: 50%; }
.msg.twitch .dot { background: var(--twitch); }
.msg.tiktok .dot { background: var(--tt1); box-shadow: .13em .13em 0 var(--tt2); }
.badges { display: inline-flex; gap: .25em; margin-right: .35em; vertical-align: middle; }
.bd { font-size: .6em; font-weight: 900; letter-spacing: .04em; padding: .1em .4em; border-radius: .3em; background: #333; color: #fff; text-transform: uppercase; }
.bd.broadcaster { background: var(--rouge); } .bd.moderator { background: #1f9d55; } .bd.vip { background: #c026d3; } .bd.subscriber { background: #555; }
.name { font-weight: 900; margin-right: .4em; }
.text { font-weight: 600; }
.emote { height: 1.45em; vertical-align: middle; margin: -.2em .05em; }
.msg.deleted .text, .msg.deleted .name { text-decoration: line-through; opacity: .45; }

/* ---------- overlay OBS : fond transparent ---------- */
body.overlay { background: transparent; overflow: hidden; }
#feed { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .22em; padding: .3em; font-size: var(--size, 22px); }
.overlay .msg { background: rgba(10, 10, 10, .84); border-left: .22em solid var(--rouge); border-radius: .35em; max-width: 100%; text-shadow: 0 .05em .12em rgba(0, 0, 0, .8); animation: in .4s cubic-bezier(.2, .9, .3, 1.2); }
.overlay .msg.out { animation: out .6s ease-in forwards; }
@keyframes in { from { opacity: 0; transform: translateX(-1.6em) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes out { to { opacity: 0; transform: translateY(-.6em); } }

/* ---------- pages d'administration (login, moderation, tablette) ---------- */
body.app { background: radial-gradient(ellipse at 50% 0%, #1c0a0d 0%, var(--noir) 70%); min-height: 100%; }
.login { max-width: 360px; margin: 14vh auto 0; padding: 26px; background: var(--noir2); border: 2px solid #2a2a2a; border-radius: 16px; }
.login h1 { margin: 0 0 16px; font-size: 20px; letter-spacing: .08em; } .login h1 span, .top h1 span { color: var(--rouge); }
.login input { width: 100%; padding: 12px; margin-bottom: 12px; border-radius: 9px; border: 1px solid #333; background: #000; color: #fff; font-size: 16px; }
.login button, .btn { padding: 11px 16px; border: 0; border-radius: 10px; font-weight: 900; background: var(--blanc); color: #111; }
.login button { width: 100%; background: var(--rouge); color: #fff; }
.err { color: #ff6b78; margin: 0 0 12px; font-size: 14px; min-height: 1.2em; }

.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid #2a2a2a; background: rgba(10, 10, 10, .9); position: sticky; top: 0; z-index: 5; }
.top h1 { margin: 0; font-size: 16px; letter-spacing: .1em; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #1c1c1c; border: 1px solid #333; font-size: 13px; font-weight: 800; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: #666; }
.chip.ok i { background: #34e27a; } .chip.warn i { background: #f5b400; } .chip.bad i { background: var(--rouge); }
.spacer { flex: 1; }
.top .btn { padding: 7px 12px; font-size: 13px; background: #222; color: #fff; border: 1px solid #333; }
.top .btn.red { background: var(--rouge); border-color: var(--rouge); }
.note { margin: 0; padding: 8px 16px; font-size: 13px; color: var(--gris); background: #120a0b; border-bottom: 1px solid #2a2a2a; }
.note b { color: #fff; }
#log { padding: 8px 10px 90px; font-size: 16px; }
#log .msg { border-bottom: 1px solid #1d1d1d; align-items: center; }
#log .body { flex: 1; min-width: 0; }
.acts { display: flex; flex-wrap: wrap; gap: 5px; flex: 0 0 auto; }
.acts button { padding: 5px 9px; border: 0; border-radius: 7px; background: #262626; color: #fff; font-size: 12.5px; font-weight: 800; }
.acts button:hover:not(:disabled) { background: #3a3a3a; }
.acts button.ban { background: #4a1118; } .acts button.ban.sure, .acts button.sure { background: var(--rouge); }
.acts button:disabled { opacity: .35; cursor: default; }
.ro { font-size: 11.5px; color: var(--gris); font-style: italic; flex: 0 0 auto; }
#toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: #222; border: 1px solid #444; font-weight: 800; z-index: 20; max-width: 90vw; }
#toast.bad { background: #3a0d13; border-color: var(--rouge); } #toast.ok { border-color: #34e27a; }

/* ---------- tablette : gros boutons ---------- */
body.tablet #log { font-size: 19px; padding-bottom: 150px; }
body.tablet #log .msg { padding: .55em .7em; cursor: pointer; border-radius: 10px; margin-bottom: 3px; }
body.tablet #log .msg.sel { background: #2a0f13; outline: 2px solid var(--rouge); }
#bar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px; background: #0d0d0d; border-top: 2px solid #2a2a2a; z-index: 6; }
#bar button { min-height: 72px; border: 0; border-radius: 14px; font-size: 18px; font-weight: 900; background: #262626; color: #fff; }
#bar button.ban { background: #5a1119; } #bar button.sure { background: var(--rouge); }
#bar button:disabled { opacity: .3; }
#sel { position: fixed; left: 0; right: 0; bottom: 92px; padding: 6px 14px; font-size: 14px; color: var(--gris); background: #0d0d0d; z-index: 6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }