/* ==========================================================================
   clipme-live.css — "LIVE HLS INGEST" panel. Loaded by /live-clipping only.
   Mount: <div class="clipme-hls"></div>  (DOM is built by /clipme-live.js)

   Every selector is prefixed `html body .clipme-hls` so the theme's global
   rules can't override it. Fonts: Inter + JetBrains Mono (already on the page).
   Everything on the panel is illustrative UI state — no metrics, no claims.
   ========================================================================== */

html body .clipme-hls{
  --hls-ground:#0c0d12;
  --hls-text:#ffffff;
  --hls-muted:#9b9ba6;
  --hls-red:#e63a55;
  --hls-green:#45e06a;
  --hls-twitch:#a970ff;
  --hls-yt:#ff3d3d;
  --hls-line:rgba(255,255,255,.09);
  --hls-fill:rgba(255,255,255,.035);
  --hls-fill2:rgba(255,255,255,.06);
  --hls-fill3:rgba(255,255,255,.11);
  --hls-shadow:0 34px 90px rgba(0,0,0,.55), 0 10px 28px rgba(0,0,0,.35);
  --hls-mono:"JetBrains Mono",ui-monospace,monospace;
  --hls-sans:"Inter",system-ui,sans-serif;
  display:block;
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:36px 0 40px;
  font-family:var(--hls-sans);
  color:var(--hls-text);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html.light body .clipme-hls{
  --hls-ground:#f6f6f8;
  --hls-text:#16161a;
  --hls-muted:#5f5f6a;
  --hls-line:rgba(0,0,0,.1);
  --hls-fill:rgba(0,0,0,.03);
  --hls-fill2:rgba(0,0,0,.05);
  --hls-fill3:rgba(0,0,0,.09);
  --hls-shadow:0 26px 70px rgba(22,22,26,.14), 0 8px 22px rgba(22,22,26,.08);
}
html body .clipme-hls *,
html body .clipme-hls *::before,
html body .clipme-hls *::after{ box-sizing:border-box; }

/* ---- the glass panel -------------------------------------------------- */
html body .clipme-hls .clipme-hls-panel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:18px;
  border:1px solid var(--hls-line);
  background:linear-gradient(180deg, var(--hls-fill) 0%, rgba(255,255,255,0) 58%), var(--hls-ground);
  box-shadow:var(--hls-shadow);
  padding:18px 20px 16px;
  min-height:300px;
  display:flex;
  flex-direction:column;
  gap:14px;
  color:var(--hls-text);
}
html body .clipme-hls .clipme-hls-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 8% -10%, rgba(230,58,85,.16), rgba(230,58,85,0) 70%),
    radial-gradient(420px 220px at 100% 110%, rgba(69,224,106,.07), rgba(69,224,106,0) 70%);
}

/* ---- header row -------------------------------------------------------- */
html body .clipme-hls .clipme-hls-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--hls-line);
}
html body .clipme-hls .clipme-hls-live{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  font:600 11px/1 var(--hls-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--hls-text);
  white-space:nowrap;
}
html body .clipme-hls .clipme-hls-dot{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hls-red);
  box-shadow:0 0 0 0 rgba(230,58,85,.55);
  animation:clipmeHlsPulse 1.6s ease-out infinite;
}
@keyframes clipmeHlsPulse{
  0%   { box-shadow:0 0 0 0 rgba(230,58,85,.55); }
  70%  { box-shadow:0 0 0 8px rgba(230,58,85,0); }
  100% { box-shadow:0 0 0 0 rgba(230,58,85,0); }
}
html body .clipme-hls .clipme-hls-plats{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
}
html body .clipme-hls .clipme-hls-plat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:500 10.5px/1 var(--hls-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--hls-muted);
  white-space:nowrap;
}
html body .clipme-hls .clipme-hls-plat[data-plat="kick"]{ --p:var(--hls-green); }
html body .clipme-hls .clipme-hls-plat[data-plat="twitch"]{ --p:var(--hls-twitch); }
html body .clipme-hls .clipme-hls-plat[data-plat="youtube"]{ --p:var(--hls-yt); }
html body .clipme-hls .clipme-hls-plat i{
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--p);
  box-shadow:0 0 8px var(--p);
}
html body .clipme-hls .clipme-hls-plat b{ font-weight:600; color:var(--hls-text); }
html body .clipme-hls .clipme-hls-plat em{ font-style:normal; color:var(--p); }

/* ---- three columns ----------------------------------------------------- */
html body .clipme-hls .clipme-hls-grid{
  display:grid;
  grid-template-columns:160px minmax(0,1fr) 184px;
  gap:14px;
  flex:1 1 auto;
  min-height:0;
}
html body .clipme-hls .clipme-hls-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 12px 10px;
  border:1px solid var(--hls-line);
  border-radius:12px;
  background:var(--hls-fill);
}
html body .clipme-hls .clipme-hls-lbl{
  margin:0;
  max-width:none;
  font:500 10px/1.3 var(--hls-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--hls-muted);
}

/* segments ticker */
html body .clipme-hls .clipme-hls-seglist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
html body .clipme-hls .clipme-hls-seg{
  margin:0;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:6px 8px;
  border-radius:7px;
  border:1px solid var(--hls-line);
  background:var(--hls-fill2);
  font:500 10px/1.2 var(--hls-mono);
  letter-spacing:.02em;
  color:var(--hls-text);
  white-space:nowrap;
  transition:opacity .3s ease;
  animation:clipmeHlsSegIn .38s cubic-bezier(.2,.8,.2,1);
}
html body .clipme-hls .clipme-hls-seg-name{ overflow:hidden; text-overflow:ellipsis; }
html body .clipme-hls .clipme-hls-seg-dur{ color:var(--hls-green); flex:none; }
html body .clipme-hls .clipme-hls-seg:nth-child(2){ opacity:.86; }
html body .clipme-hls .clipme-hls-seg:nth-child(3){ opacity:.7; }
html body .clipme-hls .clipme-hls-seg:nth-child(4){ opacity:.52; }
html body .clipme-hls .clipme-hls-seg:nth-child(5){ opacity:.36; }
html body .clipme-hls .clipme-hls-seg:nth-child(6){ opacity:.2; }
@keyframes clipmeHlsSegIn{
  from{ opacity:0; transform:translateY(-9px); }
}
html body .clipme-hls .clipme-hls-segbar{
  position:relative;
  margin-top:auto;
  height:3px;
  border-radius:2px;
  overflow:hidden;
  background:var(--hls-fill3);
}
html body .clipme-hls .clipme-hls-segbar::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:100%;
  border-radius:2px;
  background:var(--hls-green);
  opacity:.8;
  transform-origin:0 50%;
  animation:clipmeHlsSegBar .7s linear infinite;
}
@keyframes clipmeHlsSegBar{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}

/* 18-cell signal meter */
html body .clipme-hls .clipme-hls-cells{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:5px;
}
html body .clipme-hls .clipme-hls-cell{
  position:relative;
  display:block;
  height:28px;
  border-radius:5px;
  overflow:hidden;
  background:var(--hls-fill2);
  border:1px solid var(--hls-line);
}
html body .clipme-hls .clipme-hls-cell::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:4px;
  background:var(--c, var(--hls-green));
  opacity:calc(.3 + var(--lvl, 0) * .7);
  transform-origin:50% 100%;
  transform:scaleY(var(--lvl, 0));
  transition:transform .18s ease, opacity .18s ease, background-color .3s ease;
}

/* chat velocity strip — the only named signal on the panel */
html body .clipme-hls .clipme-hls-chat{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--hls-line);
  display:flex;
  flex-direction:column;
  gap:6px;
}
html body .clipme-hls .clipme-hls-chat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
html body .clipme-hls .clipme-hls-tag{
  font:500 9px/1 var(--hls-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--hls-green);
  padding:3px 6px;
  border-radius:99px;
  border:1px solid currentColor;
  transition:color .25s ease;
}
html body .clipme-hls .clipme-hls-panel[data-state="moment"] .clipme-hls-tag,
html body .clipme-hls .clipme-hls-panel[data-state="lookahead"] .clipme-hls-tag{ color:var(--hls-red); }
html body .clipme-hls .clipme-hls-spark{
  display:block;
  width:100%;
  height:44px;
  border-radius:6px;
}

/* decision stack */
html body .clipme-hls .clipme-hls-dbody{
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1 1 auto;
}
html body .clipme-hls .clipme-hls-states{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
html body .clipme-hls .clipme-hls-state{
  margin:0;
  max-width:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  border-radius:8px;
  border:1px solid transparent;
  font:500 11px/1.2 var(--hls-mono);
  letter-spacing:.02em;
  color:var(--hls-muted);
  opacity:.42;
  white-space:nowrap;
  transition:opacity .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease;
}
html body .clipme-hls .clipme-hls-state i{
  display:block;
  flex:none;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
html body .clipme-hls .clipme-hls-state span{ overflow:hidden; text-overflow:ellipsis; }
html body .clipme-hls .clipme-hls-state.is-done{ opacity:.7; color:var(--hls-text); }
html body .clipme-hls .clipme-hls-state.is-on{
  opacity:1;
  color:var(--hls-text);
  border-color:var(--hls-line);
  background:var(--hls-fill2);
}
html body .clipme-hls .clipme-hls-state[data-k="watching"].is-on i{ animation:clipmeHlsBlink 1.1s ease-in-out infinite; }
@keyframes clipmeHlsBlink{
  0%,100%{ opacity:1; }
  50%    { opacity:.25; }
}
html body .clipme-hls .clipme-hls-state[data-k="moment"].is-on{
  color:var(--hls-red);
  border-color:rgba(230,58,85,.45);
  background:rgba(230,58,85,.1);
}
html body .clipme-hls .clipme-hls-state[data-k="lookahead"].is-on{
  color:var(--hls-green);
  border-color:rgba(69,224,106,.4);
  background:rgba(69,224,106,.09);
}
html body .clipme-hls .clipme-hls-state[data-k="cut"].is-on{
  color:var(--hls-text);
  border-color:var(--hls-fill3);
  background:var(--hls-fill3);
}

/* the vertical clip card */
html body .clipme-hls .clipme-hls-slot{
  position:relative;
  height:112px;
  flex:none;
}
html body .clipme-hls .clipme-hls-slot::before{
  content:"";
  position:absolute;
  left:50%; top:0;
  width:62px;
  height:110px;
  transform:translateX(-50%);
  border-radius:9px;
  border:1px dashed var(--hls-line);
  opacity:.9;
  transition:opacity .3s ease;
}
html body .clipme-hls .clipme-hls-panel.has-card .clipme-hls-slot::before{ opacity:0; }
html body .clipme-hls .clipme-hls-card{
  position:absolute;
  left:50%; top:0;
  width:62px;
  height:110px;
  padding:7px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  gap:3px;
  border-radius:9px;
  border:1px solid var(--hls-line);
  background:linear-gradient(160deg, var(--hls-fill3), var(--hls-fill));
  box-shadow:0 14px 30px rgba(0,0,0,.4);
  opacity:0;
  transform:translate(-50%, 18px) scale(.94);
  transition:opacity .4s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
html body .clipme-hls .clipme-hls-panel.has-card .clipme-hls-card{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}
html body .clipme-hls .clipme-hls-card-bar{
  position:absolute;
  left:7px; right:7px; top:7px;
  height:3px;
  border-radius:2px;
  background:var(--hls-fill3);
  overflow:hidden;
}
html body .clipme-hls .clipme-hls-card-bar::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:42%;
  border-radius:2px;
  background:var(--hls-red);
}
html body .clipme-hls .clipme-hls-card-ratio{
  position:absolute;
  right:7px; top:14px;
  font:500 7.5px/1 var(--hls-mono);
  letter-spacing:.06em;
  color:var(--hls-muted);
}
html body .clipme-hls .clipme-hls-card-mark{
  font:800 11px/1 var(--hls-sans);
  letter-spacing:-.02em;
  color:var(--hls-red);
}
html body .clipme-hls .clipme-hls-card-meta{
  font:500 7px/1.25 var(--hls-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--hls-muted);
}

/* ---- footer ------------------------------------------------------------ */
html body .clipme-hls .clipme-hls-foot{
  margin:0;
  max-width:none;
  padding-top:12px;
  border-top:1px solid var(--hls-line);
  font:500 10.5px/1.5 var(--hls-mono);
  letter-spacing:.06em;
  color:var(--hls-muted);
  text-align:center;
}

/* ---- narrow screens: stack the columns, no horizontal scroll ---------- */
@media (max-width:700px){
  html body .clipme-hls{ margin:28px 0 32px; }
  html body .clipme-hls .clipme-hls-panel{ min-height:0; padding:16px 14px 14px; gap:12px; }
  html body .clipme-hls .clipme-hls-grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
  html body .clipme-hls .clipme-hls-seg:nth-child(n+4){ display:none; }
  html body .clipme-hls .clipme-hls-segbar{ margin-top:4px; }
  html body .clipme-hls .clipme-hls-chat{ margin-top:2px; }
  html body .clipme-hls .clipme-hls-dbody{
    display:grid;
    grid-template-columns:minmax(0,1fr) 84px;
    align-items:center;
    gap:12px;
  }
  html body .clipme-hls .clipme-hls-state{ white-space:normal; }
  html body .clipme-hls .clipme-hls-foot{ font-size:10px; }
}

/* ---- reduced motion: a single finished frame, nothing moves ----------- */
@media (prefers-reduced-motion: reduce){
  html body .clipme-hls *,
  html body .clipme-hls *::before,
  html body .clipme-hls *::after{
    animation:none !important;
    transition:none !important;
  }
  html body .clipme-hls .clipme-hls-dot{ box-shadow:0 0 0 3px rgba(230,58,85,.25); }
}
html body .clipme-hls .clipme-hls-panel.is-static *,
html body .clipme-hls .clipme-hls-panel.is-static *::before,
html body .clipme-hls .clipme-hls-panel.is-static *::after{
  animation:none !important;
  transition:none !important;
}