/* ── Stockertim Market League — League Chat ─────────────────────────────────────
   A public, moderated chat room. Two mount modes:
     • floating  — a launcher bubble + drawer, site-wide (default)
     • inline    — fills a [data-league-chat-embed] container (home rail, league pages)
   Priority (admin > leader > top > player > user) drives bubble colour + a STAFF/
   rank badge; higher-priority senders read first. Colour family matches the League
   leaderboard (cyan / gold / podium pills). */

:root{
  --lc-bg:#070b12; --lc-bg2:#0b1220; --lc-panel:#0d1524; --lc-line:rgba(120,150,210,.16);
  --lc-ink:#eaf1ff; --lc-mut:rgba(233,241,255,.66); --lc-cy:#44f1ff; --lc-cy2:#2bd4e6;
  --lc-gold:#ffcf5e; --lc-gold2:#f4bb3c; --lc-radius:16px;
}

/* ── Base panel ───────────────────────────────────────────────────────────────── */
.lc-panel{
  display:flex; flex-direction:column; color:var(--lc-ink);
  background:linear-gradient(180deg,var(--lc-panel),var(--lc-bg)); border:1px solid var(--lc-line);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
}
/* inline (fills its container — home rail / league pages) */
.lc-panel.lc-inline{ height:100%; width:100%; min-height:0; border-radius:14px; overflow:hidden; }
[data-league-chat-embed]{ flex:1 1 auto; min-height:0; display:flex; }
.lc-embed{ flex:1 1 auto; min-height:0; min-width:0; display:flex; }

/* ── Floating root (site-wide): desktop docked rail + mobile bottom sheet ─────── */
.lc-root{ position:fixed; z-index:96; }
.lc-root .lc-panel.lc-floating{
  position:fixed; overflow:hidden; z-index:96; box-shadow:-14px 0 50px rgba(0,0,0,.5);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
}

/* collapsed affordances */
.lc-railtab, .lc-bottombar{
  position:fixed; display:none; align-items:center; gap:8px; cursor:pointer; border:0; z-index:95;
  color:#04121a; font:800 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  background:linear-gradient(135deg,var(--lc-gold),var(--lc-gold2)); box-shadow:0 8px 26px rgba(0,0,0,.42);
}
.lc-railtab .lc-dot, .lc-bottombar .lc-dot{
  min-width:17px; height:17px; padding:0 5px; border-radius:999px; background:#e5384a; color:#fff;
  font-size:10.5px; font-weight:800; display:none; align-items:center; justify-content:center; }
.lc-root.lc-has-unread .lc-dot{ display:inline-flex; }

/* DESKTOP / laptop — vertical docked rail on the right, collapsible to an edge tab */
@media (min-width:900px){
  .lc-root .lc-panel.lc-floating{
    top:var(--lc-top,120px); right:0; bottom:0; width:340px; max-width:92vw; border-radius:0;
    border-top:0; border-right:0; border-bottom:0; transform:translateX(calc(100% + 20px));
  }
  .lc-root[data-open="true"] .lc-panel.lc-floating{ transform:none; }
  .lc-railtab{
    display:flex; top:calc(var(--lc-top,120px) + 26px); right:0; padding:14px 9px; border-radius:12px 0 0 12px;
    writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:.5px; gap:6px;
  }
  .lc-railtab .lc-tab-ico{ font-size:15px; writing-mode:horizontal-tb; }
  .lc-root[data-open="true"] .lc-railtab{ display:none; }
  .lc-bottombar{ display:none !important; }
  .lc-scrim{ display:none !important; }
}

/* MOBILE / small screens — bottom-centre pill that pops up a collapsible sheet */
@media (max-width:899px){
  .lc-railtab{ display:none !important; }
  .lc-bottombar{
    display:flex; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom,0px));
    padding:11px 18px; border-radius:999px; justify-content:center;
  }
  .lc-root.lc-hasbottombar .lc-bottombar{ bottom:calc(60px + env(safe-area-inset-bottom,0px)); }
  .lc-root[data-open="true"] .lc-bottombar{ display:none; }
  .lc-root .lc-panel.lc-floating{
    left:0; right:0; bottom:0; width:100%; height:86vh; height:86dvh; border-radius:20px 20px 0 0;
    border-left:0; border-right:0; border-bottom:0; transform:translateY(100%);
  }
  .lc-root[data-open="true"] .lc-panel.lc-floating{ transform:none; }
}
.lc-bottombar .lc-bb-ico{ font-size:15px; }
.lc-bottombar .lc-bb-chev{ font-size:11px; opacity:.8; }

/* ── AlphaView dock — round pip at the bottom-right, below the Vision launcher ──
   On AlphaView the right rail is taken by Analytics / Alerts / Search / Flow, so
   the League launcher would sit behind them. When the Vision launcher (.vso) is on
   the page, JS adds .lc-avdock and the launcher becomes a round golden pip stacked
   directly below Vision (right:18px; Vision sits at bottom:88px) — same footprint
   and feel as Vision, on BOTH desktop and mobile. Uses !important to beat the
   base/media-query display:none rules. */
.lc-root.lc-avdock .lc-railtab{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:0;
  position:fixed; top:auto !important; left:auto; right:18px; bottom:34px;
  width:46px; height:46px; min-width:0; padding:0;
  writing-mode:horizontal-tb; text-orientation:mixed; letter-spacing:0;
  border-radius:50%; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.lc-root.lc-avdock .lc-bottombar{ display:none !important; }
/* keep only the trophy glyph + the unread dot; drop the "League Chat" wordmark */
.lc-root.lc-avdock .lc-railtab > span:not(.lc-tab-ico):not(.lc-dot){ display:none !important; }
.lc-root.lc-avdock .lc-railtab .lc-tab-ico{ writing-mode:horizontal-tb; font-size:21px; line-height:1; }
.lc-root.lc-avdock .lc-railtab .lc-dot{ position:absolute; top:-3px; right:-3px; }
.lc-root.lc-avdock[data-open="true"] .lc-railtab{ display:none !important; }
@media (max-width:640px){
  .lc-root.lc-avdock .lc-railtab{ right:12px; bottom:28px; width:44px; height:44px; }
}

/* header */
.lc-head{ display:flex; align-items:center; gap:8px; padding:11px 12px; border-bottom:1px solid var(--lc-line);
  background:linear-gradient(180deg,rgba(43,212,230,.10),transparent); flex:0 0 auto; }
.lc-head .lc-title{ font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:7px; }
/* Live dot: the ripple is a transform+opacity pulse on a pseudo (compositor-only),
   not an animated box-shadow — and it stops while the floating panel is collapsed. */
.lc-head .lc-live{ position:relative; width:8px; height:8px; border-radius:50%; background:#2ed17e; }
.lc-head .lc-live::after{ content:""; position:absolute; inset:0; border-radius:50%; background:rgba(46,209,126,.5);
  animation:lc-pulse 2s ease-out infinite; }
.lc-head .lc-live.off{ background:#8a97ad; }
.lc-head .lc-live.off::after{ animation:none; display:none; }
.lc-root[data-open="false"] .lc-live::after{ animation:none; }
@keyframes lc-pulse{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(2.6); opacity:0 } }
.lc-head .lc-sp{ flex:1; }
.lc-head .lc-hbtn{ background:rgba(255,255,255,.06); border:1px solid var(--lc-line); color:var(--lc-ink);
  width:30px; height:30px; border-radius:9px; cursor:pointer; font-size:14px; line-height:1; display:flex;
  align-items:center; justify-content:center; }
.lc-head .lc-hbtn:hover{ background:rgba(255,255,255,.12); }
.lc-panel.lc-inline .lc-close{ display:none; }

/* trending strip */
.lc-trending{ display:flex; gap:7px; overflow-x:auto; padding:8px 10px; border-bottom:1px solid var(--lc-line);
  background:rgba(255,207,94,.05); flex:0 0 auto; scrollbar-width:none; }
.lc-trending::-webkit-scrollbar{ display:none; }
.lc-trending.lc-empty{ display:none; }
.lc-trending .lc-tr-lead{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  color:var(--lc-gold); white-space:nowrap; flex:0 0 auto; }
.lc-tr-chip{ display:inline-flex; align-items:baseline; gap:5px; padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--lc-line); white-space:nowrap; flex:0 0 auto; font-size:12px; }
.lc-tr-chip .lc-tr-t{ font-weight:800; }
.lc-tr-chip .lc-tr-cc{ font-size:10px; font-weight:700; color:var(--lc-cy); }
.lc-tr-chip .lc-tr-pct{ font-weight:800; color:var(--lc-gold); }

/* pinned commentary */
.lc-pin{ display:none; gap:9px; align-items:flex-start; padding:9px 11px; border-bottom:1px solid var(--lc-line);
  background:linear-gradient(180deg,rgba(255,207,94,.12),rgba(255,207,94,.04)); flex:0 0 auto; }
.lc-pin.lc-on{ display:flex; }
.lc-pin .lc-pin-ico{ font-size:14px; }
.lc-pin .lc-pin-body{ font-size:13px; }
.lc-pin .lc-pin-who{ font-weight:800; color:var(--lc-gold); margin-right:5px; }

/* stream */
.lc-stream{ flex:1 1 auto; overflow-y:auto; padding:10px 11px 6px; display:flex; flex-direction:column; gap:8px;
  min-height:0; }
.lc-empty-note{ margin:auto; text-align:center; color:var(--lc-mut); font-size:13px; padding:20px; }

/* message bubble */
.lc-msg{ display:flex; flex-direction:column; max-width:86%; align-self:flex-start; }
.lc-msg.me{ align-self:flex-end; align-items:flex-end; }
.lc-msg .lc-from{ display:flex; align-items:center; gap:6px; font-size:11px; margin:0 3px 3px; color:var(--lc-mut); }
.lc-msg .lc-nick{ font-weight:800; color:var(--lc-ink); }
.lc-msg .lc-badge{ font-size:9.5px; font-weight:900; letter-spacing:.4px; padding:2px 6px; border-radius:999px;
  text-transform:uppercase; }
.lc-badge.b-staff{ background:linear-gradient(135deg,var(--lc-gold),var(--lc-gold2)); color:#3a2600; }
.lc-badge.b-1{ background:linear-gradient(135deg,#ffe487,#f4bb3c); color:#3a2600; }
.lc-badge.b-2{ background:linear-gradient(135deg,#93d2ff,#4aa6f2); color:#062036; }
.lc-badge.b-3{ background:linear-gradient(135deg,#ffa9ba,#ff6f8b); color:#3a0011; }
.lc-badge.b-top{ background:rgba(68,241,255,.18); color:var(--lc-cy); border:1px solid rgba(68,241,255,.4); }
.lc-badge.b-player{ background:rgba(255,255,255,.08); color:var(--lc-mut); }
.lc-msg .lc-bubble{ padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.06);
  border:1px solid var(--lc-line); white-space:pre-wrap; word-break:break-word; font-size:13.5px; }
.lc-msg.me .lc-bubble{ background:linear-gradient(180deg,var(--lc-cy),var(--lc-cy2)); color:#04121a; border-color:transparent; }
.lc-msg.admin .lc-bubble{ background:linear-gradient(180deg,rgba(255,207,94,.20),rgba(255,207,94,.08));
  border-color:rgba(255,207,94,.5); box-shadow:0 0 0 1px rgba(255,207,94,.18); }
.lc-msg.leader .lc-bubble{ border-color:rgba(255,180,90,.4); }
.lc-msg.top .lc-bubble{ border-color:rgba(68,241,255,.32); }
.lc-msg .lc-time{ font-size:10px; color:var(--lc-mut); margin:2px 4px 0; }
.lc-msg.new-in{ animation:lc-in .28s ease; }
@keyframes lc-in{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }

/* composer + states */
.lc-foot{ flex:0 0 auto; border-top:1px solid var(--lc-line); padding:9px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18)); }
.lc-compose{ display:flex; gap:8px; align-items:flex-end; }
.lc-compose textarea{ flex:1; resize:none; max-height:96px; min-height:38px; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,.06); border:1px solid var(--lc-line); color:var(--lc-ink); font:inherit; font-size:13.5px; }
.lc-compose textarea:focus{ outline:none; border-color:rgba(68,241,255,.5); }
.lc-send{ flex:0 0 auto; width:40px; height:40px; border:0; border-radius:11px; cursor:pointer; color:#04121a;
  font-size:16px; background:linear-gradient(135deg,var(--lc-cy),var(--lc-cy2)); }
.lc-send:disabled{ opacity:.5; cursor:not-allowed; }
.lc-state{ text-align:center; color:var(--lc-mut); font-size:13px; padding:4px 4px 6px; }
.lc-state a,.lc-state .lc-link{ color:var(--lc-cy); font-weight:700; cursor:pointer; text-decoration:none; }
.lc-state.lc-warn{ color:#ffb4b4; }

/* nickname chooser */
.lc-nickform{ display:flex; flex-direction:column; gap:7px; }
.lc-nickform .lc-nr{ display:flex; gap:7px; align-items:center; }
.lc-nickform input{ flex:1; padding:9px 11px; border-radius:11px; background:rgba(255,255,255,.06);
  border:1px solid var(--lc-line); color:var(--lc-ink); font:inherit; }
.lc-nickform input:focus{ outline:none; border-color:rgba(68,241,255,.5); }
.lc-nickform .lc-suffix{ font-weight:800; color:var(--lc-cy); font-size:14px; }
.lc-nickform .lc-njoin{ padding:9px 14px; border:0; border-radius:11px; cursor:pointer; color:#04121a; font-weight:800;
  background:linear-gradient(135deg,var(--lc-cy),var(--lc-cy2)); }
.lc-nickform .lc-njoin:disabled{ opacity:.5; cursor:not-allowed; }
.lc-nickform .lc-nhint{ font-size:11.5px; color:var(--lc-mut); }
.lc-nickform .lc-nerr{ font-size:12px; color:#ffb4b4; min-height:1px; }
.lc-nickform .lc-npreview{ color:var(--lc-ink); font-weight:800; }

/* scrim (mobile bottom-sheet backdrop) */
.lc-scrim{ position:fixed; inset:0; z-index:94; background:rgba(2,4,8,.55); opacity:0; pointer-events:none;
  transition:opacity .2s ease; }
.lc-root[data-open="true"] .lc-scrim{ opacity:1; pointer-events:auto; }
@media (min-width:900px){ .lc-scrim{ display:none !important; } }

/* ── Staff inline moderation (edit / hide) + staff chat-name bar ──────────────── */
.lc-msg{position:relative}
.lc-mod{display:none;gap:6px;margin-top:5px}
.lc-msg:hover .lc-mod{display:flex}
.lc-mod-btn{font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;letter-spacing:.04em;
  color:#cfe0ff;background:rgba(120,150,210,.14);border:1px solid rgba(150,175,220,.3);border-radius:7px;
  padding:4px 8px;cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease}
.lc-mod-btn:hover{background:rgba(120,150,210,.28);color:#fff}
.lc-mod-btn.lc-mod-hide:hover,.lc-mod-btn.lc-mod-del:hover{background:rgba(232,84,92,.24);border-color:rgba(232,84,92,.5);color:#ffd2d8}
.lc-staffbar{font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:rgba(200,215,255,.66);
  padding:2px 2px 8px}
.lc-staffbar b{color:var(--lc-gold,#ffcf5e)}
.lc-rename{font:inherit;color:#7ec8ff;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.lc-rename:hover{color:#a7dbff}
.lc-njoin.lc-ghost{background:none;border:1px solid rgba(150,175,220,.3);color:rgba(210,222,245,.8);margin-left:8px}