/* Live room, Instagram-Live style (chat.js): comments float bottom-left, reactions in a column on the right (thumb side), flames rise the full height of the screen. Colours follow the skin via --g / --gr. */
#live{position:fixed;left:0;right:0;bottom:0;z-index:80;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px));font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:#fff}
#live[hidden]{display:none}
html.has-live body{padding-bottom:230px}
/* the comments */
.lvstream{pointer-events:none;margin:0 62px 8px 0;max-height:26vh;overflow:hidden;padding:18px 10px 6px;border-radius:16px;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.62) 55%);display:flex;flex-direction:column;justify-content:flex-end;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}
#chatlist{display:contents}
.chatmsg{display:flex;gap:8px;align-items:flex-start;padding:4px 0;font-size:14px;line-height:1.3;word-break:break-word;text-shadow:0 1px 3px rgba(0,0,0,.7);animation:cmin .28s ease-out}
@keyframes cmin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.chatmsg .av{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px system-ui,sans-serif;color:#fff;text-transform:uppercase;box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.chatmsg div{min-width:0}
.chatmsg b{margin-right:6px;font-weight:700;font-size:13px}
.chatmsg .t{opacity:.97}
.chatempty{opacity:.75;font-size:14px;padding:6px 0;text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* the comment bar */
#chatform{pointer-events:auto;display:flex;align-items:center;gap:6px;padding:5px 6px 5px 14px;border-radius:999px;background:rgba(10,12,11,.62);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#chatform input{min-width:0;border:0;background:transparent;color:#fff;font:inherit;font-size:15px;padding:9px 4px}
#chatform input::placeholder{color:rgba(255,255,255,.72)}
#chatform input:focus{outline:0}
#chatform #chatnick{flex:0 1 92px;border-right:1px solid rgba(255,255,255,.25);margin-right:4px;padding-right:8px}
#chatform #chatmsg{flex:1 1 auto}
#chatform.hasnick #chatnick{display:none}
.lvedit{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:14px;cursor:pointer}
.lvedit[hidden]{display:none}
#chatform button[type=submit]{flex:0 0 auto;height:34px;padding:0 16px;border-radius:999px;border:0;background:var(--g,#ffd34d);color:#111;font:700 13px system-ui,sans-serif;cursor:pointer}
#chatform button[type=submit]:disabled{opacity:.5}
#chaterr{pointer-events:none;min-height:0;font-size:12px;color:#ffb0b0;text-shadow:0 1px 3px #000;padding:0 14px}
#chaterr:not(:empty){margin-top:6px}
/* the column on the right: where the thumb is */
.lvrail{pointer-events:none;position:absolute;right:12px;bottom:calc(66px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px;align-items:center}
.lvrail button{pointer-events:auto;position:relative;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,12,11,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .12s,background .12s;-webkit-tap-highlight-color:transparent}
.lvrail button:hover:not(:disabled){background:rgba(255,255,255,.22)}
.lvrail button:active:not(:disabled){transform:scale(.86)}
.lvrail button:disabled{opacity:.45;cursor:default}
.lvrail button:focus-visible,#chatform button:focus-visible,.lvedit:focus-visible{outline:2px solid var(--g,#ffd34d);outline-offset:2px}
.lvrail i{font-style:normal;position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.3);font:700 10px/15px system-ui,sans-serif;text-align:center}
.lvrail i:empty{display:none}
.lvchat svg{width:22px;height:22px;fill:currentColor}
.lvrail .lvchat{background:rgba(var(--gr,255,211,77),.25);border-color:rgba(var(--gr,255,211,77),.7)}
#chatbadge{background:#ff3b3b!important;border-color:#ff3b3b!important}
#chatbadge[hidden]{display:none}
#live.min .lvstream,#live.min #chatform,#live.min #chaterr{display:none}
#live.min{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
#live.min .lvrail{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
/* flames: fly from the bottom of the screen to the top */
#reactfx{position:fixed;right:0;bottom:0;top:0;width:150px;pointer-events:none;overflow:hidden;z-index:95}
.rfx{position:absolute;bottom:-30px;animation:rfxup 3s cubic-bezier(.25,.6,.35,1) forwards;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));will-change:transform,opacity}
@keyframes rfxup{0%{transform:translate(0,0) scale(.5);opacity:0}8%{opacity:1;transform:translate(0,-30px) scale(1.15)}30%{transform:translate(calc(var(--dx,0px)*.7),calc(var(--rise,-600px)*.28)) scale(1.05)}65%{transform:translate(calc(var(--dx,0px)*-.4),calc(var(--rise,-600px)*.64)) scale(1)}100%{transform:translate(calc(var(--dx,0px)*.3),var(--rise,-600px)) scale(.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.rfx{animation-name:rfxfade}@keyframes rfxfade{from{opacity:1}to{opacity:0}}}
/* computers: a solid, low box in the bottom-right corner (reactions in a row on top, comments, comment bar) */
@media(min-width:700px){
  #live{left:auto;right:16px;bottom:16px;width:360px;padding:10px 12px 12px;border-radius:16px;background:#0d0f0e;border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 44px rgba(0,0,0,.65);pointer-events:auto}
  .lvrail{position:static;order:-1;flex-direction:row;justify-content:space-between;gap:6px;margin-bottom:8px}
  .lvrail button{width:42px;height:42px;font-size:21px;background:rgba(255,255,255,.07);backdrop-filter:none;-webkit-backdrop-filter:none}
  .lvstream{margin:0 0 8px;height:140px;max-height:none;padding:0 2px;border-radius:0;background:none;-webkit-mask-image:none;mask-image:none}
  .chatmsg{text-shadow:none}
  #chatform{background:rgba(255,255,255,.07)}
  #live.min{padding:8px 12px}
  #live.min .lvrail{margin-bottom:0}
  #reactfx{width:200px;right:6px}
  html.has-live body{padding-bottom:0}
}
/* skins that pin the control row to the bottom of the screen: the room rides above it */
html[data-skin=meters] #live,html[data-skin=wormhole] #live{bottom:96px}
/* the 💬 button pulses until the room has been opened once */
.lvchat.attn{animation:lvpulse 1.5s ease-out infinite}
@keyframes lvpulse{0%{box-shadow:0 0 0 0 rgba(var(--gr,255,211,77),.75);transform:scale(1)}60%{box-shadow:0 0 0 16px rgba(var(--gr,255,211,77),0);transform:scale(1.08)}100%{box-shadow:0 0 0 0 rgba(var(--gr,255,211,77),0);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.lvchat.attn{animation:none;box-shadow:0 0 0 4px rgba(var(--gr,255,211,77),.5)}}
/* phones: a blank slate with one button at the bottom; tapping it opens the room (reactions, comments, comment bar), tapping the cross closes it again */
@media(max-width:699px){
  #live.min:not(.rx) .lvrail button[data-k]{display:none}
  html.has-live body{padding-bottom:84px}
  html.has-live.live-open body{padding-bottom:230px}
  #live:not(.min) .lvchat svg{display:none}
  #live:not(.min) .lvchat::after{content:"\00d7";font-size:30px;line-height:1;margin-top:-3px}
  .lvchat{width:52px;height:52px}
}