html,
body{
  overflow-x:hidden;
}
@media (max-width:700px){

  #chattersBox{
    right:45px;
    width:280px;
    max-width:calc(100vw - 60px);
  }

  #chattersBox.hidden{
    transform:translateX(300px);
  }

}




:root{
  --bg:#f4f4f4;
  --text:#111;
  --card:#fff;
  --border:#ddd;
  --button:#2b7cff;
  --muted:#555;
}

html[data-theme="dark"]{
  --bg:#111;
  --text:#eee;
  --card:#202020;
  --border:#333;
  --button:#2b7cff;
  --muted:#bbb;
}


body{
  background:var(--bg) !important;
  color:var(--text) !important;
}

.card, .box, .panel, section, main{
  background-color:var(--card);
  color:var(--text);
}

input, select, textarea{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
}

button.theme-toggle{
  position:fixed !important;
  right:12px !important;
  bottom:12px !important;
  z-index:99999 !important;

  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  max-width:none !important;

  padding:10px 14px !important;
  margin:0 !important;

  border:0 !important;
  border-radius:999px !important;

  background:var(--button) !important;
  color:white !important;

  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:bold !important;
  font-family:Arial,sans-serif !important;

  box-shadow:0 4px 12px rgba(0,0,0,.35) !important;
}
/* Chat-Seiten Fix */
html[data-theme="light"] .msg,
html[data-theme="light"] .message,
html[data-theme="light"] .chat-msg,
html[data-theme="light"] .chat-message,
html[data-theme="light"] .event,
html[data-theme="light"] .eventbox{
  background:#ffffff !important;
  color:#111 !important;
}

html[data-theme="light"] .msg *,
html[data-theme="light"] .message *,
html[data-theme="light"] .chat-msg *,
html[data-theme="light"] .chat-message *,
html[data-theme="light"] .event *,
html[data-theme="light"] .eventbox *{
  color:#111 !important;
}

html[data-theme="light"] .user,
html[data-theme="light"] .username,
html[data-theme="light"] .name{
  color:#0b8f2a !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .box{
  background:#fff !important;
  color:#111 !important;
}
/* Chat Kopfbereich Fix */
html[data-theme="light"] .sticky-top,
html[data-theme="light"] .top-line,
html[data-theme="light"] .status-line,
html[data-theme="light"] .event-line-compact{
  background:#ffffff !important;
  color:#111 !important;
}

html[data-theme="light"] .sticky-top *,
html[data-theme="light"] .top-line *,
html[data-theme="light"] .status-line *,
html[data-theme="light"] .event-line-compact *{
  color:#111 !important;
}

html[data-theme="dark"] .sticky-top,
html[data-theme="dark"] .top-line,
html[data-theme="dark"] .status-line,
html[data-theme="dark"] .event-line-compact{
  background:#181818 !important;
  color:#eee !important;
}

html[data-theme="dark"] .sticky-top *,
html[data-theme="dark"] .top-line *,
html[data-theme="dark"] .status-line *,
html[data-theme="dark"] .event-line-compact *{
  color:#eee !important;
}
#naviHudOverlay{
  position:fixed;
  inset:0;
  z-index:99990;
  pointer-events:none;
  display:none;
  align-items:center;
  justify-content:center;
  opacity:.72;
}

#naviHudOverlay.show{
  display:flex;
}

#naviHudOverlay.hide-touch{
  opacity:0;
}

.naviHudBox{
  display:flex;
  align-items:center;
  gap:28px;
  padding:28px 42px;
  border-radius:28px;
  background:rgba(0,0,0,.55);
  color:white;
  box-shadow:0 0 35px rgba(0,0,0,.5);
}

#naviHudArrow{
  font-size:90px;
  line-height:1;
}

#naviHudText{
  font-size:42px;
  font-weight:bold;
  white-space:nowrap;
}

#naviHudDistance{
  font-size:54px;
  font-weight:bold;
  color:#00ff88;
  white-space:nowrap;
}

@media (orientation: landscape) and (max-height:600px){
  .naviHudBox{
    width:92vw;
    justify-content:center;
    padding:18px 26px;
  }

  #naviHudArrow{
    font-size:82px;
  }

  #naviHudText{
    font-size:34px;
  }

  #naviHudDistance{
    font-size:44px;
  }
}

.lowBitrate{
  color:#ff2222 !important;
  font-size:22px !important;
  font-weight:bold;
  text-shadow:0 0 10px #ff0000;
}

.cockpit-title{
  grid-template-columns:1fr 1fr !important;
}

.cockpitGrid{
  display:grid !important;
  grid-template-columns:1.7fr .9fr !important;
  gap:6px !important;
  margin-top:5px !important;
}

.cockpitLeft,
.cockpitRight{
  background:#181818 !important;
  border:1px solid #333 !important;
  border-radius:10px !important;
  padding:6px 8px !important;
}

.cockpitLine,
.techLine{
  font-size:13px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  margin:2px 0 !important;
}

.bitrateLine{
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}

.bitrateBad{
  border-color:#ff2222 !important;
  box-shadow:0 0 12px rgba(255,0,0,.55) !important;
}

.bitrateBad .bitrateLine{
  color:#ff2222 !important;
  font-size:22px !important;
  text-shadow:0 0 8px #ff0000 !important;
}

.bitrateWarn{
  border-color:#ffaa00 !important;
}

.bitrateWarn .bitrateLine{
  color:#ffaa00 !important;
  font-weight:900 !important;
}

@media(max-width:700px){
  .cockpitGrid{
    grid-template-columns:1.45fr .95fr !important;
  }

  .cockpitLine,
  .techLine{
    font-size:12px !important;
  }

  .bitrateBad .bitrateLine{
    font-size:20px !important;
  }
}

/* HEUHOT Chat Cockpit - immer lesbar */
html[data-theme="light"] .cockpitLeft,
html[data-theme="light"] .cockpitRight,
html[data-theme="dark"] .cockpitLeft,
html[data-theme="dark"] .cockpitRight{
  background:#181818 !important;
  color:#ffffff !important;
  border:1px solid #333 !important;
}

html[data-theme="light"] .cockpitLeft *,
html[data-theme="light"] .cockpitRight *,
html[data-theme="dark"] .cockpitLeft *,
html[data-theme="dark"] .cockpitRight *{
  color:#ffffff !important;
}

html[data-theme="light"] .bitrateBad .bitrateLine,
html[data-theme="dark"] .bitrateBad .bitrateLine{
  color:#ff2222 !important;
  font-size:20px !important;
  font-weight:900 !important;
  text-shadow:0 0 8px #ff0000 !important;
}

html[data-theme="light"] .bitrateWarn .bitrateLine,
html[data-theme="dark"] .bitrateWarn .bitrateLine{
  color:#ffaa00 !important;
  font-weight:900 !important;
}

/* HeuHot Chat: fester Kopf, scrollbarer Nachrichtenbereich */
html, body{
    height:auto;
    overflow:auto;
}
body{
  display:flex;
  flex-direction:column;
}

.sticky-top{
  flex:0 0 auto;
}

.chat-area{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding-right:48px !important;
}

.chat-area h2{
  flex:0 0 auto;
}

#chatBox{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-right:48px !important;
}


/* Scrollbar Chat */
#chatBox::-webkit-scrollbar{
  width:8px;
}

#chatBox::-webkit-scrollbar-thumb{
  background:#666;
  border-radius:10px;
}
/* Fix: Chatters/Lurker Button mobil sichtbar, aber weiter verschiebbar */
#chattersToggle{
  z-index:99999 !important;
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  touch-action:none;
}

#chattersBox{
  z-index:99998 !important;
}
/* Chatters/Lurker: Button + Ziehgriff */
#chattersFloat{
  position:fixed !important;
  right:10px !important;
  bottom:110px !important;
  z-index:99999 !important;
  display:flex !important;
  gap:4px !important;
  align-items:center !important;
}

#chattersDrag{
  width:34px !important;
  height:52px !important;
  min-width:34px !important;
  padding:0 !important;
  border-radius:14px !important;
  background:#444 !important;
  color:white !important;
  font-size:20px !important;
  touch-action:none !important;
  cursor:grab !important;
}

#chattersToggle{
  position:static !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  padding:0 !important;
  border-radius:16px !important;
  z-index:auto !important;
  touch-action:manipulation !important;
}

#chattersBox{
  z-index:99998 !important;
}