/* Pole pro psaní: výběr platformy (badge + šipka → menu „Psát jako"), výzva
   k přihlášení místo pole a přihlašovací okno (core/login-modal.js).
   Sdílené addonem (sidepanel.html) i webem (import v main.js). */

/* ---- výběr platformy u inputu (v0.2) ---- */
#input-area { position: relative; }
#platform-btn {
  display: inline-flex; align-items: center; gap: 2px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 2px 3px; cursor: pointer; flex-shrink: 0; color: var(--text-secondary, #aaa);
}
#platform-btn:hover, #platform-btn[aria-expanded="true"] { border-color: var(--border, #333); background: rgba(255, 255, 255, 0.04); }
#platform-btn .pm-arrow { font-size: 9px; line-height: 1; opacity: 0.7; }
#platform-menu {
  position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 40;
  min-width: 220px; background: var(--bg-secondary, #16161a); border: 1px solid var(--border, #333);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); padding: 4px;
}
#platform-menu.hidden { display: none; }
#platform-menu .pm-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.55; padding: 4px 8px 2px; }
#platform-menu .pm-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: 6px; padding: 6px 8px;
  color: var(--text-primary, #eee); cursor: pointer; font: inherit; font-size: 12px;
}
#platform-menu .pm-row:hover { background: rgba(255, 255, 255, 0.06); }
#platform-menu .pm-row.selected { background: rgba(255, 140, 0, 0.12); outline: 1px solid rgba(255, 140, 0, 0.35); }
#platform-menu .pm-badge { width: 18px; height: 18px; }
#platform-menu .pm-name { flex: 1; }
#platform-menu .pm-state { font-size: 11px; opacity: 0.75; }
#platform-menu .pm-login { color: #ffb347; font-weight: 600; opacity: 1; }
/* Broadcast (mod / streamer): tři loga vedle sebe, pod ním oddělovač od jednotlivých platforem. */
#platform-menu .pm-broadcast { border-bottom: 1px solid var(--border, #333); border-radius: 6px 6px 0 0; margin-bottom: 4px; }
#platform-menu .pm-bc-logos { display: inline-flex; gap: 3px; flex-shrink: 0; }
#platform-menu .pm-bc-logos .pm-badge { width: 16px; height: 16px; }
#platform-menu .pm-logout { border-top: 1px solid var(--border, #333); border-radius: 0; margin-top: 4px; opacity: 0.8; }

/* ---- přihlašovací okno (reflektorový hover podle AoE Inviter) ---- */
.uc-shade {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(6, 6, 9, 0.82); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 200ms ease, background 280ms ease;
}
.uc-shade.open { opacity: 1; }
.uc-login-win {
  position: relative; width: min(640px, 100%);
  background: linear-gradient(180deg, #17171b, #0f0f12);
  border: 1px solid #2a2a30; border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 140, 0, 0.08) inset;
  padding: 26px 28px 22px; text-align: center;
  transition: box-shadow 280ms ease;
}
.uc-login-win h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.3px; transition: filter 280ms ease; }
.uc-login-win h1::after {
  content: ""; display: block; width: 120px; height: 2px; margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, #ff8c00, transparent);
}
.uc-login-sub { margin: 10px 0 0; font-size: 12px; opacity: 0.7; transition: filter 280ms ease; }
.uc-login-note { margin: 6px 0 0; font-size: 11px; opacity: 0.45; }
.uc-login-err { margin: 12px 0 0; padding: 8px 10px; font-size: 12px; line-height: 1.45; color: #ffb4b4; background: rgba(255, 82, 82, 0.1); border: 1px solid rgba(255, 82, 82, 0.45); border-radius: 8px; }
.uc-login-close {
  position: absolute; top: 8px; right: 10px; width: 30px; height: 30px;
  background: transparent; border: none; color: var(--text-muted, #888); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.uc-login-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.uc-login-choices {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start;
  gap: clamp(14px, 6%, 48px); padding: clamp(16px, 4vh, 34px) clamp(4px, 3%, 24px);
}
.uc-login-choice {
  position: relative; flex: 0 1 min(150px, 26vh); min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: none; padding: 8px; cursor: pointer; color: var(--text-primary, #eee); font: inherit;
}
/* Pevný čtvercový box pro logo: YouTube je široké, Twitch/Kick čtvercové —
   názvy pod nimi tak sedí na stejné výšce. */
.uc-logo { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.uc-logo img {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto;
  /* Všechny stavy mají stejné pořadí funkcí (brightness saturate drop-shadow) —
     jinak prohlížeč filter neinterpoluje a ztmavení skočí bez animace. */
  filter: brightness(1) saturate(1) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  transition: filter 320ms ease, transform 160ms ease, opacity 320ms ease;
}
.uc-logo-gold { opacity: 0; }
.uc-login-choice[data-platform="kick"] .uc-logo img { max-width: 92%; max-height: 92%; }
.uc-login-name { position: relative; z-index: 1; font-size: 13px; font-weight: 700; letter-spacing: 0.4px; transition: color 280ms ease, opacity 280ms ease; }
/* Reflektor řídí JS třídami .is-active / .has-active (loginModal.js):
   ostatní couvnou do stínu, vybrané se prolne do zlata a rozsvítí. */
.uc-login-choices.has-active .uc-login-choice:not(.is-active) .uc-logo img { filter: brightness(0.32) saturate(0.4) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.uc-login-choices.has-active .uc-login-choice:not(.is-active) .uc-login-name { opacity: 0.35; }
.uc-login-choice::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 150%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 170, 60, 0.32), rgba(255, 140, 0, 0.12) 45%, transparent 72%);
  opacity: 0; transition: opacity 280ms ease;
}
.uc-login-choice.is-active .uc-logo img { transform: scale(1.06); filter: brightness(1) saturate(1) drop-shadow(0 0 18px rgba(255, 150, 40, 0.55)); }
.uc-login-choice.is-active .uc-logo-base { opacity: 0; }
.uc-login-choice.is-active .uc-logo-gold { opacity: 1; }
.uc-login-choice.is-active .uc-login-name { color: #ffb347; }
.uc-login-choice.is-active::before { opacity: 1; }
.uc-login-choice.busy .uc-logo { animation: uc-pulse 1s ease-in-out infinite; }
@keyframes uc-pulse { 50% { transform: scale(0.96); } }
.uc-shade.has-active .uc-login-win h1, .uc-shade.has-active .uc-login-sub { filter: brightness(0.5); }
.uc-shade.has-active .uc-login-win { box-shadow: inset 0 0 120px 24px rgba(0, 0, 0, 0.55), 0 24px 64px rgba(0, 0, 0, 0.6); }
.uc-shade.has-active { background: rgba(2, 2, 4, 0.93); }
.uc-login-note { line-height: 1.5; }


/* Badge u inputu v režimu Broadcast: zlatá loga všech tří platforem (Twitch, Kick, YouTube). */
#active-badge.badge.bc {
  width: 46px; height: 22px; padding: 0; font-size: 0; color: transparent; overflow: hidden;
  background-image: url(icons/platform/twitch-gold.svg), url(icons/platform/kick-gold.svg), url(icons/platform/youtube-gold.svg);
  background-repeat: no-repeat; background-size: 14px 14px, 12px 12px, 14px 14px;
  background-position: left center, center center, right center;
  filter: drop-shadow(0 0 3px rgba(255, 140, 0, 0.65));
}

/* Kick logo u inputu je opticky větší než ostatní: 2 px nahoře i dole (jako .pi.ki v chatu). */
#active-badge.ki, #platform-menu .pm-badge.ki { padding: 2px 0; box-sizing: border-box; background-origin: content-box; background-clip: content-box; }
.uc-login-choice[data-platform="kick"] img { padding: 3% 0; box-sizing: border-box; }

/* ---- výzva k přihlášení místo pole (bez přihlášení) ---- */
#login-cta {
  flex: 1; min-width: 0;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  background: rgba(255, 140, 0, 0.06);
  border: 1px dashed rgba(255, 140, 0, 0.55);
  color: #ffb347; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
  text-align: center;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}
#login-cta:hover, #login-cta:focus-visible {
  background: rgba(255, 140, 0, 0.16);
  border-style: solid; border-color: #ff8c00;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 140, 0, 0.25), 0 0 16px rgba(255, 140, 0, 0.35);
  transform: translateY(-1px);
}
#login-cta:active { transform: translateY(0); }
#login-cta.hidden { display: none; }

/* Skrytí prvků input řádku (id selektory addonu by jinak přebily .hidden). */
#input-area #msg-input.hidden, #input-area #btn-send.hidden, #input-area #platform-btn.hidden { display: none !important; }


/* ---- odpojení platformy v menu ---- */
#platform-menu .pm-unlink { margin-left: 4px; padding: 0 6px; border-radius: 4px; opacity: 0.55; font-size: 14px; line-height: 1; }
#platform-menu .pm-unlink:hover { opacity: 1; color: #ff5252; background: rgba(255, 82, 82, 0.12); }

/* ---- posuvný indikátor výběru (core/slide-indicator.js) — záložky panelu emotů, taby GIF panelu, ikony v poli ---- */
.uc-slide-host { position: relative; }
.uc-slide-ind {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; box-sizing: border-box;
  border: 1px solid rgba(255, 140, 0, 0.45); border-radius: 6px; background: var(--bg-tertiary, #1f1f23);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease;
}
.uc-slide-ind.uc-slide-noanim { transition: opacity 0.15s ease; }
.uc-slide-ind.uc-slide-off { opacity: 0; }
/* Ikony v poli pro psaní: stejný vzhled jako hover ikony (tmavé pozadí + UnityChat gradient v rámečku). */
.uc-slide-ind.uc-slide-ind--tool {
  border-radius: 5px; border-color: transparent;
  background: linear-gradient(var(--bg-secondary, #18181b), var(--bg-secondary, #18181b)) padding-box, var(--accent-gradient) border-box;
}
/* Aktivní ikona vlastní pozadí nekreslí — kreslí ho indikátor, který k ní přijede. */
.msg-input-wrap.uc-slide-host > .emote-btn.active, .msg-input-wrap.uc-slide-host > .uc-tool-btn.active { background: transparent; }
@media (prefers-reduced-motion: reduce) { .uc-slide-ind, .uc-slide-ind.uc-slide-noanim { transition: none; } }

/* ---- Varování u odpovědi napříč platformami (adresát nepoužívá UnityChat, core crossReplyWarningHtml) ---- */
#reply-indicator { flex-wrap: wrap; row-gap: 4px; }
#reply-indicator .ri-warn {
  flex-basis: 100%;
  order: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(245, 190, 60, 0.09);
  border: 1px solid rgba(245, 190, 60, 0.28);
  color: #f0c868;
  font-size: 11.5px;
  line-height: 1.35;
}
#reply-indicator .ri-warn-ico { flex: 0 0 auto; color: #f5be3c; }
#reply-indicator .ri-warn-text { flex: 1 1 auto; min-width: 0; }
#reply-indicator .ri-warn-act {
  flex: 0 0 auto;
  background: rgba(245, 190, 60, 0.14);
  border: 1px solid rgba(245, 190, 60, 0.45);
  color: #ffd77a;
  font: inherit;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
#reply-indicator .ri-warn-act:hover { background: rgba(245, 190, 60, 0.24); color: #fff0c4; }
#reply-indicator .ri-warn-act:focus-visible { outline: 2px solid #f5be3c; outline-offset: 1px; }