/* PELLE dell'overlay condivisa tra la pagina OBS (overlay.html) e l'ANTEPRIMA
   dal vivo nel pannello: così ciò che vedi nell'editor è identico all'overlay.
   Tutto è guidato da variabili CSS, così il "gestionale overlay" può cambiare
   qualsiasi cosa (colori, font, forma, animazione…) senza toccare questo file. */

:root {
  /* stack di font (niente file esterni: usa i font di sistema) */
  --font-sistema: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-rotondo: "Segoe UI Rounded", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Quicksand", system-ui, sans-serif;
  --font-condensato: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", "Oswald", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --font-serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --font-manga: "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------- ALERT card */
.alert-card {
  --acc: #9146ff;
  --bg: #0f0f14;
  --op: 88;
  --fg: #ffffff;
  --radius: 18px;
  --border: 2px;
  --size: 27px;
  --font: var(--font-sistema);
  position: relative;
  min-width: 320px; max-width: 74vw;
  background: color-mix(in srgb, var(--bg) var(--op), transparent);
  border: var(--border) solid var(--acc);
  border-radius: var(--radius);
  padding: 1.05rem 1.5rem;
  text-align: center;
  color: var(--fg);
  font-family: var(--font);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
}
.alert-card.glow { box-shadow: 0 16px 50px rgba(0, 0, 0, .5), 0 0 34px color-mix(in srgb, var(--acc) 55%, transparent); }
.alert-card .alert-ico { width: 46px; height: 46px; margin: 0 auto .35rem; color: var(--acc); }
.alert-card .alert-ico svg { width: 100%; height: 100%; }
.alert-card.senza-ico .alert-ico { display: none; }
.alert-card .alert-media { display: block; max-width: 100%; max-height: 42vh; margin: 0 auto .6rem; border-radius: 12px; object-fit: contain; }
.alert-card .alert-testo { font-size: var(--size); font-weight: 800; line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.alert-card .alert-testo b { color: var(--acc); }

/* entrata: opacità/scala di partenza + una delle animazioni scelte */
.alert-card { opacity: 0; }
.alert-card.dentro { opacity: 1; }
.alert-card.anim-slide  { transform: translateY(-22px); transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.alert-card.anim-slide.dentro { transform: translateY(0); }
.alert-card.anim-pop    { transform: scale(.6); transition: opacity .3s ease, transform .45s cubic-bezier(.2,1.5,.4,1); }
.alert-card.anim-pop.dentro { transform: scale(1); }
.alert-card.anim-zoom   { transform: scale(1.6); transition: opacity .3s ease, transform .4s ease; }
.alert-card.anim-zoom.dentro { transform: scale(1); }
.alert-card.anim-fade   { transition: opacity .5s ease; }
.alert-card.anim-flip   { transform: perspective(700px) rotateX(-90deg); transform-origin: top; transition: opacity .3s ease, transform .5s ease; }
.alert-card.anim-flip.dentro { transform: perspective(700px) rotateX(0); }
.alert-card.anim-bounce { transform: translateY(-40px); transition: opacity .25s ease; }
.alert-card.anim-bounce.dentro { transform: translateY(0); animation: al-bounce .6s cubic-bezier(.28,.84,.42,1); }
@keyframes al-bounce { 0% { transform: translateY(-40px); } 60% { transform: translateY(6px); } 80% { transform: translateY(-3px); } 100% { transform: translateY(0); } }

/* ---------------------------------------------------------------- CHAT righe */
.chat-riga {
  --bg: #0f0f14;
  --op: 78;
  --fg: #f2f2f5;
  --radius: 10px;
  --font: var(--font-sistema);
  background: color-mix(in srgb, var(--bg) var(--op), transparent);
  border-radius: var(--radius);
  padding: .3rem .6rem;
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.3;
  word-break: break-word;
}
.chat-riga.ombra { box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.chat-riga .chat-user { margin-right: .35rem; }
.chat-riga.user-bold .chat-user { font-weight: 800; }
/* stemmi (badge) Twitch/7TV: piccoli, in linea, appena prima del nome */
.chat-riga .chat-badge { height: 1em; width: auto; vertical-align: -0.15em; margin-right: .18rem; border-radius: 3px; }
.chat-riga .chat-badge:last-of-type { margin-right: .35rem; }
/* emote 7TV: immagini in linea col testo, alte quanto ~1.5 righe */
.chat-riga .emote { height: 1.5em; width: auto; vertical-align: middle; margin: -0.15em 0.05em 0; }
.chat-riga { opacity: 0; }
.chat-riga.dentro { opacity: 1; }
.chat-riga.anim-slide { transform: translateX(-10px); transition: opacity .25s ease, transform .25s ease; }
.chat-riga.anim-slide.dentro { transform: translateX(0); }
.chat-riga.anim-fade { transition: opacity .3s ease; }
.chat-riga.anim-nessuna { transition: none; }
.chat-riga.uscita { opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease; }
/* dimensioni del testo chat */
.chat-riga.dim-piccola { font-size: .85rem; }
.chat-riga.dim-media   { font-size: 1.05rem; }
.chat-riga.dim-grande  { font-size: 1.3rem; }
.chat-riga.dim-enorme  { font-size: 1.6rem; }

/* ------------------------------------------------------------- WIDGET fissi */
/* etichette persistenti (ultimo follower, ultimo sub, ...) */
.ovl-widget {
  --bg: #0f0f14;
  --op: 85;
  --fg: #ffffff;
  --acc: #9146ff;
  --radius: 12px;
  --font: var(--font-sistema);
  display: inline-flex; align-items: center; gap: .5rem;
  background: color-mix(in srgb, var(--bg) var(--op), transparent);
  border-radius: var(--radius);
  padding: .4rem .8rem;
  color: var(--fg);
  font-family: var(--font);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
  white-space: nowrap;
}
.ovl-widget .w-ico { width: 20px; height: 20px; color: var(--acc); flex: 0 0 auto; }
.ovl-widget .w-ico svg { width: 100%; height: 100%; }
.ovl-widget .w-testo { font-weight: 700; }
.ovl-widget .w-testo b { color: var(--acc); }
.ovl-widget.dim-piccola { font-size: .82rem; }
.ovl-widget.dim-media   { font-size: 1rem; }
.ovl-widget.dim-grande  { font-size: 1.25rem; }

/* anteprima nel pannello: uno SCHERMO 16:9 fedele. Dentro c'è un "palco" grande
   1920x1080 scalato per riempire il riquadro, così ogni pezzo ha le stesse
   proporzioni che avrà davvero nell'overlay a schermo intero. */
.ovl-anteprima {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 16 / 9; border-radius: var(--r-m, 12px);
  background: #14171f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='54'%3E%3Cpath d='M0 27h96M48 0v54' stroke='%23ffffff10' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 8.33% 8.33%;
}
.ap-stage {
  position: absolute; top: 0; left: 0;
  width: 1920px; height: 1080px; transform-origin: top left;
}
.ap-stage .ap-el { position: absolute; }             /* posizionati via left/top % dallo script */
.ap-stage .ap-chat { display: flex; flex-direction: column; gap: 6px; }
.ap-stage .ap-chat.destra { align-items: flex-end; }

/* --- editor WYSIWYG: selezione + maniglie ridimensiona/ruota --------------- */
.ap-stage .ap-el { cursor: grab; }
.ap-stage .ap-el:hover { outline: 2px solid rgba(145, 70, 255, .35); outline-offset: 6px; }
.ap-stage .ap-el.sel  { outline: 3px dashed #9146ff; outline-offset: 6px; }
/* maniglie: figlie dell'elemento, contro-scalate via style inline (scale(1/s)),
   visibili solo sull'elemento selezionato. Grandi apposta: il palco è rimpicciolito. */
.ap-stage .ap-handle {
  position: absolute; display: none;
  width: 60px; height: 60px; border-radius: 50%;
  background: #9146ff; color: #fff; border: 4px solid #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; font-weight: 900;
  cursor: pointer; user-select: none; z-index: 5;
}
.ap-stage .ap-el.sel .ap-handle { display: flex; }
.ap-stage .ap-h-scala { right: -30px; bottom: -30px; cursor: nwse-resize; transform-origin: center; }
.ap-stage .ap-h-ruota { top: -78px; left: 50%; margin-left: -30px; cursor: grab; transform-origin: center; }

/* --- inspector (barra dimensione/rotazione sotto l'anteprima) -------------- */
.ovl-inspector {
  margin-top: .6rem; padding: .7rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, #9146ff 10%, transparent);
  border: 1px solid color-mix(in srgb, #9146ff 30%, transparent);
  display: flex; flex-direction: column; gap: .5rem;
}
.ovl-insp-testa { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ovl-insp-nome { font-weight: 800; }
.ovl-insp-reset { border: 0; background: rgba(145, 70, 255, .18); color: inherit; border-radius: 8px; padding: .3rem .7rem; cursor: pointer; font-weight: 700; }
.ovl-insp-reset:hover { background: rgba(145, 70, 255, .32); }
.ovl-insp-riga { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: .6rem; }
.ovl-insp-riga input[type="range"] { width: 100%; }
.ovl-insp-val { text-align: right; font-variant-numeric: tabular-nums; opacity: .85; }