/* Styles communs à l'app et à l'overlay : polices, couleurs, logos, lignes de messages. */

/* --- Polices (servies en local depuis node_modules, voir server/app.js) ------------ */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/fonts/barlow-semi-condensed-latin-700-normal.woff2') format('woff2');
}

/* --- Couleurs ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  --bg: #1b1d23;
  --surface: #23262e;
  --surface-2: #2c3039;
  --line: #383c48;
  --text: #eceef3;
  --text-2: #a9afbd;
  --text-3: #7c8392;
  --focus: #8cb6ff;
  --warn: #f2b33d;
  --err: #ff7466;

  /* Couleurs des plateformes : --x = couleur de marque, --x-ink = version lisible en texte */
  --twitch: #9146ff;
  --twitch-ink: #b98fff;
  --tiktok: #25f4ee;
  --tiktok-ink: #6ff8f4;
  --kick: #53fc19;
  --kick-ink: #86fd5c;
  --youtube: #ff0000;
  --youtube-ink: #ff6a61;
  --facebook: #0866ff;
  --facebook-ink: #6aa2ff;
  --instagram: #d62f87;
  --instagram-ink: #f27bb8;

  /* Couleurs de marque (MultiChat, propulsé par Synaxess) */
  --brand-1: #5fd0ff;
  --brand-2: #1f74ea;
  --brand-ink: #5cb6f2;

  --font-ui: 'Barlow Semi Condensed', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
  --font-text: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --chat-size: 15px;
  --chat-lh: 1.45;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f2f3f6;
  --line: #d6d9e0;
  --text: #16181d;
  --text-2: #4a505e;
  --text-3: #6b7181;
  --focus: #2f6fe4;
  --brand-ink: #1f7fd6;
  --warn: #a86500;
  --err: #c7271a;
  --twitch-ink: #6c22e0;
  --tiktok-ink: #00807b;
  --kick-ink: #237a00;
  --youtube-ink: #c80000;
  --facebook-ink: #0754d6;
  --instagram-ink: #b0156a;
}

/* Chaque plateforme définit son accent et sa pastille de logo. */
.p-twitch {
  --accent: var(--twitch);
  --ink: var(--twitch-ink);
  --tile-bg: #9146ff;
  --tile-fg: #ffffff;
  --logo: url('/logos/twitch.svg');
}
.p-tiktok {
  --accent: var(--tiktok);
  --ink: var(--tiktok-ink);
  --tile-bg: #000000;
  --tile-fg: #ffffff;
  --logo: url('/logos/tiktok.svg');
}
.p-kick {
  --accent: var(--kick);
  --ink: var(--kick-ink);
  --tile-bg: #53fc19;
  --tile-fg: #000000;
  --logo: url('/logos/kick.svg');
}
.p-youtube {
  --accent: var(--youtube);
  --ink: var(--youtube-ink);
  --tile-bg: #ffffff;
  --tile-fg: #ff0000;
  --logo: url('/logos/youtube.svg');
}
.p-facebook {
  --accent: var(--facebook);
  --ink: var(--facebook-ink);
  --tile-bg: #0866ff;
  --tile-fg: #ffffff;
  --logo: url('/logos/facebook.svg');
}
.p-instagram {
  --accent: var(--instagram);
  --ink: var(--instagram-ink);
  /* Rail aux couleurs d'Instagram : on ne le confond pas avec le rouge de YouTube. */
  --rail: linear-gradient(180deg, #feda75, #fa7e1e 30%, #d62976 62%, #962fbf 85%, #4f5bd5);
  --tile-bg: #d62f87;
  --tile-fg: #ffffff;
  --logo: url('/logos/instagram.svg');
}

/* --- Pastille logo --------------------------------------------------------------- */
.ptile {
  --tile: 18px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  border-radius: calc(var(--tile) * 0.26);
  background: var(--tile-bg);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.ptile::after {
  content: '';
  position: absolute;
  inset: 18%;
  background: var(--tile-fg);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.ptile.p-youtube::after {
  inset: 12%;
}
:root[data-theme='light'] .ptile {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}

/* --- Ligne de message ------------------------------------------------------------ */
.msg {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 12px 3px 14px;
  font: 400 var(--chat-size) / var(--chat-lh) var(--font-text);
  color: var(--text);
}
/* Rail de couleur : on reconnaît la plateforme même du coin de l'œil. */
.msg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rail, var(--accent));
}
.msg > .ptile {
  margin-top: calc((var(--chat-size) * var(--chat-lh) - var(--tile)) / 2);
}
.msg > .time {
  flex: none;
  min-width: 2.6em;
  font-size: 0.78em;
  line-height: calc(var(--chat-size) * var(--chat-lh));
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.msg > .body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.msg .name {
  font-weight: 700;
  color: var(--nc-d, var(--ink));
}
:root[data-theme='light'] .msg .name {
  color: var(--nc-l, var(--ink));
}
.msg .colon {
  color: var(--text-3);
}
.msg.is-action .text {
  font-style: italic;
  color: var(--text-2);
}
.msg .emote {
  height: 1.75em;
  width: auto;
  max-width: 6em;
  margin: -0.35em 0.05em;
  vertical-align: middle;
}
.msg .reply {
  font-size: 0.82em;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges : petites étiquettes discrètes, sauf Streamer et Modo qui doivent sauter aux yeux. */
.badges:empty {
  display: none;
}
.badge {
  display: inline-block;
  margin-right: 5px;
  padding: 0.2em 0.42em 0.16em;
  border-radius: 4px;
  font: 600 0.72em / 1.1 var(--font-ui);
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
  color: var(--text-2);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.badge.b-broadcaster {
  color: #fff;
  background: #d23b3b;
  box-shadow: none;
}
.badge.b-moderator {
  color: #062b10;
  background: #39c46b;
  box-shadow: none;
}
.badge.b-vip {
  color: #3a0a2a;
  background: #f28ad0;
  box-shadow: none;
}
.badge.b-first {
  color: #2b1d00;
  background: var(--warn);
  box-shadow: none;
}

/* Événements (dons, abonnements, raids…) : fond teinté de la couleur de la plateforme. */
.msg.is-event {
  margin: 4px 8px;
  padding: 8px 10px 8px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  align-items: center;
}
.msg.is-event::before {
  top: 0;
  bottom: 0;
  border-radius: 8px 0 0 8px;
  width: 4px;
}
.msg.is-event > .ptile,
.msg.is-event > .time {
  align-self: flex-start;
}
.msg .ev {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.msg .ev-icon {
  font-size: 1em;
}
.msg .ev-title {
  font-weight: 700;
}
.msg .ev-detail,
.msg.is-event .text {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
}
.msg .amount {
  padding: 0.12em 0.5em;
  border-radius: 999px;
  font: 700 0.85em / 1.3 var(--font-ui);
  font-variant-numeric: tabular-nums;
  color: #111;
  background: var(--amount-bg, var(--accent));
}
.msg .ev-image {
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.msg.is-pending .ev-title::after {
  content: ' …';
  color: var(--text-3);
}
.msg.is-deleted .text {
  font-style: italic;
  color: var(--text-3);
}
.msg.is-deleted .emote {
  display: none;
}