/* styles.css - modern semi-transparent UI for the live site (cleaned & consolidated) */
:root{
  --glass-dark: rgba(12,16,20,0.66);
  --glass-light: rgba(255,255,255,0.66);
  --text-light: #eef2f7;
  --text-dark: #111827;
  --accent: #00aaff;
  --card-radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,0.28);
  --glass-border: rgba(255,255,255,0.06);
  --max-stage-width: 1280px;
  --gutter: 20px;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Microsoft Yahei", "PingFang SC", "Hiragino Sans GB", "Noto Sans", sans-serif;
}

/* global body */
html,body{
  height:100%;
}
body{
  margin:0;
  background:#000;
  color:var(--text-light);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:auto;
  transition:background 0.25s, color 0.25s;
}
body.light{
  background:#f5f7fb;
  color:var(--text-dark);
}

/* background container (image/video) */
#background{
  position:fixed;
  inset:0;
  z-index:-2;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:brightness(0.6);
}
#background img, #background video, #background .bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.7;
}

/* Top bar */
.top-bar{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  gap:12px;
  background:var(--glass-dark);
  backdrop-filter:blur(8px) saturate(120%);
  box-shadow:var(--shadow);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
body.light .top-bar{
  background:var(--glass-light);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.top-bar .left{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.06);
}
.info{ display:flex; flex-direction:column; gap:2px; }
.streamer-name{ font-weight:700; font-size:16px; }
.custom-top-text{ font-size:13px; color:var(--accent); }
.blog-link{ font-size:13px; color:var(--accent); text-decoration:none; margin-top:4px; }

/* theme toggle button */
.toggle-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  color:inherit;
}
.toggle-btn:hover{ transform:translateY(-1px); transition:transform .12s; }

/* main stage (centered and not full-screen) */
#content{
  display:flex;
  justify-content:center;
  padding:32px var(--gutter);
  box-sizing:border-box;
}
.stage{
  width:100%;
  max-width:var(--max-stage-width);
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:24px;
  align-items:start;
}

/* card common */
.card{
  background:var(--glass-dark);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow);
  padding:12px;
  border:1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}
body.light .card{
  background:var(--glass-light);
  color:var(--text-dark);
}

/* video area */
.video-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:12px;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
#liveVideo{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
  z-index:1;
  border-radius:10px;
}

/* canvas overlay sits on top of video */
#danmakuCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999; /* ensure above controls */
}

/* subtle text shadow for canvas text readability (JS canvas uses stroke + fill too) */
canvas#danmakuCanvas {
  text-shadow:
    0 0 4px rgba(0,0,0,0.8),
    0 0 8px rgba(0,0,0,0.6);
}

/* quality dropdown */
.dropdown{
  position:absolute;
  top:12px;
  right:12px;
  z-index:6;
}
.quality-list{
  position:absolute;
  right:0;
  top:36px;
  background:rgba(0,0,0,0.55);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.4);
  min-width:120px;
}
.quality-list div{
  padding:8px 12px;
  cursor:pointer;
  color:#fff;
  white-space:nowrap;
}
.quality-list div:hover{ background:rgba(255,255,255,0.05); }

/* no stream overlay */
.no-stream{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:18px;
  background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.6));
  z-index:5;
}

/* chat panel */
#chat-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  height: calc(100% * 0.8);
}
.controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.input{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:inherit;
  outline:none;
  min-height:36px;
}
.wide{ flex:1; }
.btn{
  padding:8px 12px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
.btn.outline{ background:transparent; border:1px solid rgba(255,255,255,0.08); color:inherit; }

.history{
  flex:1;
  overflow:auto;
  padding:6px;
  border-radius:8px;
  background: rgba(0,0,0,0.12);
  font-size:13px;
}
.history-line{ padding:6px 4px; border-bottom:1px dashed rgba(255,255,255,0.03); }

/* send row */
.send-row{
  display:flex;
  gap:8px;
  align-items:center;
}

/* settings */
.settings{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.setting-item{ display:flex; align-items:center; gap:8px; font-size:13px; }
.setting-row{ display:flex; gap:8px; }

/* toast right-bottom */
#toast{
  position:fixed;
  right:20px;
  bottom:20px;
  background:var(--glass-dark);
  color:var(--text-light);
  padding:10px 14px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  transform: translateY(12px);
  opacity:0;
  transition:opacity .28s, transform .28s;
  z-index:999;
}
#toast.show{ opacity:1; transform:translateY(0); }

/* responsiveness */
@media (max-width: 980px){
  .stage{ grid-template-columns: 1fr 320px; gap:16px; padding:0; }
}
@media (max-width: 800px){
  .stage{ grid-template-columns: 1fr; gap:14px; }
  #video-wrapper{ aspect-ratio: 16/9; }
  #chat-panel{ width:100%; height:auto; }
}

/* small visual tweaks for light theme */
body.light .input, body.light .btn.outline {
  border-color: rgba(0,0,0,0.06);
}