:root{
  --bg:#0e0e10;
  --panel:#18181b;
  --panel2:#1f1f23;

  --text:#efeff1;
  --muted:#adadb8;
  --border:#2b2b31;

  --accent:#9147ff;

  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow2:0 14px 40px rgba(0,0,0,.45);

  --radius:14px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --msg-gap:10px;

  /* modern glass */
  --glass: rgba(24,24,27,.72);
  --glass2: rgba(31,31,35,.55);
  --ring: 0 0 0 4px rgba(145,71,255,.16);
}

html[data-theme="light"]{
  --bg:#f7f7fb;
  --panel:#ffffff;
  --panel2:#f1f1f6;

  --text:#0e0e10;
  --muted:#4b4b57;
  --border:#e2e2ea;

  --shadow:0 10px 30px rgba(0,0,0,.12);
  --shadow2:0 14px 34px rgba(0,0,0,.14);

  --glass: rgba(255,255,255,.75);
  --glass2: rgba(241,241,246,.55);
  --ring: 0 0 0 4px rgba(145,71,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  overflow:hidden; /* Body NICHT scrollen – Scroll läuft im Chat */
}

/* App */
.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* =========================
   Header (Modern, 2-spaltig)
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;

  padding:14px 14px 12px;
  border-bottom:1px solid var(--border);

  /* glass */
  background:
    radial-gradient(1200px 240px at 10% 0%, rgba(145,71,255,.20), transparent 60%),
    radial-gradient(900px 260px at 90% 0%, rgba(0,211,126,.12), transparent 55%),
    linear-gradient(180deg, var(--glass), rgba(0,0,0,0));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* layout */
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "brand user"
    "controls share";
  gap: 12px 16px;
  align-items:start;
}

/* Brand */
.brand{
  grid-area: brand;
  font-weight:800;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
  line-height:1;
}
.brand::before{
  content:"";
  width:10px;height:10px;border-radius:3px;
  background:var(--accent);
  box-shadow:var(--ring);
}

/* User box */
.userbox{
  grid-area: user;
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:end;
  align-self:center;
  padding:6px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
html[data-theme="light"] .userbox{
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
}
.userbox .avatar{
  width:34px;height:34px;border-radius:999px;
  border:1px solid var(--border);
}
.usernames{display:flex;flex-direction:column;line-height:1.1}
.usernames .uname{font-weight:800;font-size:13px}
.usernames .uchan{font-size:12px;color:var(--muted)}

/* Controls */
.controls{
  grid-area: controls;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
.field input,.field select{
  height:38px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  min-width: 170px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
html[data-theme="light"] .field input,
html[data-theme="light"] .field select{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.field input:focus,.field select:focus{
  border-color: rgba(145,71,255,.45);
  box-shadow: var(--ring);
}
.field input[type="number"]{min-width:110px;width:110px}
.field select{min-width:130px;width:130px}

/* Buttons */
.btn{
  height:38px;
  padding:0 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  border:1px solid rgba(145,71,255,.45);
  background:rgba(145,71,255,.20);
  color:var(--text);
  transition: transform .08s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  /* WICHTIG: kein margin-top hier! */
}
a.btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform: translateY(1px); }

.btn.secondary{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}
html[data-theme="light"] .btn.secondary{
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
}
.btn.tiny{
  height:30px;
  padding:0 10px;
  font-size:12px;
  margin:0 !important;
  border-radius: 10px;
}

/* Share (rechts, modern) */
.shareline{
  grid-area: share;
  justify-self:end;
  align-self:end;

  display:flex;
  flex-direction:column;
  gap:8px;

  padding:10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  max-width: 560px;
}
html[data-theme="light"] .shareline{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}

.sharelabel{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}

.shareBox{
  display:flex;
  align-items:center;
  gap:10px;
}

.shareurl,
.shareInput{
  flex:1;
  width: 100%;
  height: 34px;
  padding:0 10px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
  min-width: 260px;
}
html[data-theme="light"] .shareurl,
html[data-theme="light"] .shareInput{
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
}

.shareCopyBtn{
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.copyIcon{ font-size:14px; }

/* Toast */
.copyToast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: rgba(20,28,34,.92);
  border: 1px solid rgba(255,255,255,.10);
  color: #E6E6E6;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;
}
.copyToast.show{ opacity: 1; transform: translateY(0); }

/* Responsive: alles untereinander */
@media (max-width: 980px){
  .topbar{
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "user"
      "controls"
      "share";
  }
  .userbox{ justify-self:start; }
  .shareline{ justify-self:stretch; max-width:none; }
  .shareInput{ min-width: 0; }
}

/* =========================
   Main + Chat Card
   ========================= */
.main{
  flex:1;
  padding:14px;
  display:flex;
  justify-content:center;
  min-height:0;
  overflow:hidden;
}

.chatcard{
  width:min(980px,100%);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:60vh;
  min-height:0;
}

.chathead{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  background:var(--panel2);
  border-bottom:1px solid var(--border);
}

.status{width:10px;height:10px;border-radius:999px;background:#777}
.status.live{background:#00d37e}
.statusText{font-weight:800}
.spacer{flex:1}

.chat{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:var(--msg-gap);
  overflow:auto;
  flex:1;
  line-height:1.28;
  min-height:0;
}

.msg{display:flex;gap:10px;align-items:flex-start}
.badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:1px}
.badge-pill{
  font-size:11px;
  font-weight:900;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--muted)
}
.user{font-weight:900;white-space:nowrap}
.user .colon{opacity:.7;margin-left:2px}
.text{word-break:break-word;flex:1}
.emote{height:28px;vertical-align:-7px}

.chatfoot{
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--panel2);
  color:var(--muted);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.foot-actions{display:flex;align-items:center;gap:10px}
.linkbtn{
  background:transparent;border:0;color:var(--text);opacity:.8;
  cursor:pointer;font:inherit;padding:2px 6px;border-radius:8px
}
.linkbtn:hover{opacity:1;background:rgba(255,255,255,.06)}

/* =========================
   Modal
   ========================= */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.modal-overlay.show{ display: flex; }

.modal{
  width: min(520px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
.modal-head{
  display:flex;align-items:center;justify-content: space-between;gap: 12px;
  padding: 12px 14px;background: var(--panel2);border-bottom: 1px solid var(--border);
}
.modal-title{ font-weight: 900; }
.iconbtn{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.modal-body{ padding: 14px; }
.modal-foot{
  padding: 12px 14px;
  background: var(--panel2);
  border-top: 1px solid var(--border);
  display:flex;
  justify-content: flex-end;
}
.modal-hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.opt-group{ margin-top: 14px; }
.opt-title{ font-size: 12px; color: var(--muted); font-weight: 800; margin-bottom: 8px; }
.checks{ display: flex; flex-wrap: wrap; gap: 10px; }
.check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  user-select: none;
}
html[data-theme="light"] .check{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.check input{ accent-color: var(--accent); }

.chlog{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.chlog b{font-weight:900}

/* =========================
   Login
   ========================= */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:min(520px, 100%);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:22px;
  text-align:center;
}
.login-brand{font-size:22px;font-weight:900;margin-bottom:8px}
.login-text{color:var(--muted);margin-bottom:30px;line-height:1.35}
.login-hint{margin-top:14px;font-size:12px;color:var(--muted)}

/* Readonly field */
.field.readonly .rovalue{
  height:38px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color:var(--text);
  font-weight:800;
}

/* Bigger modal + grid */
.modal.modal-lg{ width:min(980px, calc(100vw - 28px)); }
.modal-body.modal-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 860px){
  .modal-body.modal-grid{ grid-template-columns: 1fr; }
}
.checks.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 12px;
}

/* =========================
   Event cards
   ========================= */
.chat-event{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(var(--evt-rgb), .18), rgba(var(--evt-rgb2), .10));
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  position: relative;
  overflow: clip;
}
html[data-theme="light"] .chat-event{
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.chat-event::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: rgba(var(--evt-rgb), .95);
}
.chat-event .evt-title{font-weight:900;font-size:.95em;margin-bottom:2px}
.chat-event .evt-text{color:var(--text);opacity:.92;line-height:1.25;word-break:break-word}
.chat-event .evt-meta{margin-top:6px;font-size:.82em;color:var(--muted);opacity:.9}

/* Event type colors */
.evt-follow      { --evt-rgb:  83, 255, 195; --evt-rgb2:  83, 180, 255; }
.evt-sub         { --evt-rgb: 247, 147,  30; --evt-rgb2: 255, 200,  90; }
.evt-resub       { --evt-rgb: 247, 147,  30; --evt-rgb2: 255, 170,  70; }
.evt-giftsub     { --evt-rgb: 255, 170,  70; --evt-rgb2: 247, 147,  30; }
.evt-bits        { --evt-rgb: 175, 120, 255; --evt-rgb2: 120, 200, 255; }
.evt-raid        { --evt-rgb: 255,  90, 110; --evt-rgb2: 255, 160,  80; }
.evt-points      { --evt-rgb:  65, 160, 255; --evt-rgb2:  80, 255, 200; }
.evt-poll        { --evt-rgb: 255, 210,  80; --evt-rgb2: 255, 140,  60; }
.evt-prediction  { --evt-rgb:  80, 255, 160; --evt-rgb2:  60, 140, 255; }
.evt-hypetrain   { --evt-rgb: 255,  80, 220; --evt-rgb2: 255, 160,  60; }
.evt-online      { --evt-rgb:  80, 255, 120; --evt-rgb2:  80, 180, 255; }
.evt-offline     { --evt-rgb: 180, 180, 180; --evt-rgb2: 120, 120, 120; }

/* =========================================================
   ✅ FIX-BLOCK (MUSS AM ENDE STEHEN, sonst wird’s überschrieben)
========================================================= */

/* Flex-Scroll-Fix (wichtig bei overflow in Flexbox) */
.app{ height:100vh; min-height:0; }
.main{ min-height:0; overflow:hidden; }
.chatcard{ min-height:0; }
.chat{ min-height:0; overflow-y:auto; }

/* index.php: Card soll den verfügbaren Platz nutzen */
body:not(.view) .main{ flex:1; min-height:0; overflow:hidden; }
body:not(.view) .chatcard{ height:100%; width:100% }

/* view.php: definierter Scroll-Container (dein HTML nutzt view-wrap + viewchat) */
body.view{ overflow:hidden; }
body.view .view-wrap{
  height:100vh;
  width:100vw;
  display:flex;
  min-height:0;
}
body.view .viewchat{
  flex:1;
  min-height:0;
  overflow-y:auto;
}

/* optional: falls irgendwas aus Versehen eine feste Höhe setzt */
.chat-event{ height:auto; }

.pulseLive{ position:relative; }
.pulseLive::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;border-radius:999px;
  margin-right:8px;
  background: var(--accent);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation:pulse 1.5s infinite;
  vertical-align:middle;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  70%{ box-shadow:0 0 0 10px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}
.bar{
  flex:1;
  min-width:6px;
  border-radius:6px;
  background: color-mix(in srgb, var(--accent) 55%, var(--panel2));
  opacity:.9;
  transform-origin:bottom;
  animation:grow .6s ease-out;
}
@keyframes grow{ from{ transform:scaleY(.25); opacity:.5 } to{ transform:scaleY(1); opacity:.9 } }