*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0}
.etchat-wrapper{max-width:1200px;margin:0 auto;padding:20px}
.etchat-header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:16px;border-radius:12px;margin-bottom:20px}
.auth-grid,.chat-layout{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.box,.chat-main,.sidebar section{padding:18px;border-radius:12px;margin-bottom:16px}
.chat-window{height:420px;overflow:auto;padding:12px;border-radius:8px}
.msg{padding:6px 4px;border-bottom:1px solid rgba(128,128,128,.25)}
.msg-time{font-size:11px;opacity:.7}
.input-row{display:flex;gap:8px;margin-top:10px}
input,select,button{padding:10px;border-radius:6px;border:1px solid #999}
.input-row input{flex:1}
button{cursor:pointer}
.smilie-box button,.smilie-tabs button{margin:4px}
video{width:100%;min-height:180px;background:#000;border-radius:8px}
.rules-check{display:block;margin:10px 0}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{border:1px solid #aaa;padding:8px}
.inline{display:inline}
.install-box{max-width:620px;margin:30px auto;padding:20px;border-radius:12px}
.install-box input{width:100%;margin:6px 0 12px}
.error{background:#762323;color:white;padding:10px;border-radius:8px}
.success{background:#20733d;color:white;padding:10px;border-radius:8px}
@media(max-width:850px){.auth-grid,.chat-layout,.etchat-header{grid-template-columns:1fr;display:block}audio{width:100%}}

body{background:#e9edf2;color:#1d1d1d}
.etchat-header,.box,.chat-main,.sidebar section,.install-box{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.chat-window{background:#f8f8f8;border:1px solid #ddd}
button{background:#f0f0f0}


.online-users{display:flex;flex-direction:column;gap:6px}
.online-user{display:flex;justify-content:space-between;gap:8px;padding:7px;border-bottom:1px solid rgba(128,128,128,.3)}
.online-user small{opacity:.7;margin-left:4px}
.cam-on{font-weight:bold}
.cam-off{opacity:.55}
.small-note{font-size:13px;opacity:.8}


.top-player{min-width:320px}
.top-player strong{display:block;margin-bottom:6px}
.top-player audio{width:100%}
.stream-box input,.stream-box select{width:100%;margin:5px 0 10px}
.stream-status{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.stream-logo{font-size:34px}
.stream-status small{display:block;opacity:.75}
.stream-actions{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.stream-actions button{flex:1}
.stream-box audio{width:100%;margin:8px 0}
.smilie-panel{margin-top:10px;padding:10px;border-radius:8px;border:1px solid rgba(128,128,128,.35)}
.smilie-title{font-weight:bold;margin-bottom:8px}
.smilie-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.smilie-tabs button{font-size:13px}
.smilie-box{display:flex;flex-wrap:wrap;gap:5px;max-height:120px;overflow:auto;padding:6px;border-radius:8px;background:rgba(128,128,128,.08)}
.smilie-box button{min-width:34px;font-size:20px;line-height:1}
code{font-size:12px;word-break:break-all}


.open-smilie-popup{margin-top:8px;width:100%}
.smilie-popup.hidden{display:none}
.smilie-popup{position:fixed;right:25px;bottom:25px;z-index:9999;width:360px;max-width:calc(100vw - 30px)}
.smilie-popup-inner{border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);padding:12px;background:inherit;border:1px solid rgba(128,128,128,.5)}
.smilie-popup-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.smilie-popup-head button{font-size:22px;padding:4px 10px}
.smilie-popup-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.smilie-popup-tabs button{font-size:12px;padding:7px}
.smilie-popup-content{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:300px;overflow:auto}
.popup-smilie-btn{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:62px;font-size:11px;overflow:hidden}
.popup-smilie-btn img{max-width:32px;max-height:32px}
.emoji-big{font-size:26px}
.chat-smiley-img{max-width:28px;max-height:28px;vertical-align:middle}


/* ET-Chat ähnliche Smilie-Box */
.etchat-smilie-area{
  margin:10px 0;
  border:1px solid rgba(128,128,128,.45);
  border-radius:8px;
  padding:8px;
  background:rgba(128,128,128,.08);
}
.etchat-smilie-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:13px;
  margin-bottom:6px;
}
.etchat-smilie-head span{
  opacity:.7;
  font-size:12px;
}
.etchat-smilie-tabs{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-bottom:7px;
}
.etchat-smilie-tabs button{
  padding:5px 8px;
  font-size:12px;
}
.etchat-smilie-box{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-height:120px;
  overflow:auto;
  padding:5px;
  border-radius:6px;
  background:rgba(0,0,0,.05);
}
.etchat-smilie-item{
  width:32px;
  height:32px;
  padding:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  line-height:1;
}
.etchat-smilie-item img{
  max-width:26px;
  max-height:26px;
}
.etchat-smilie-empty{
  font-size:13px;
  opacity:.7;
  padding:8px;
}


/* Chat-Streambox: Anzeige-only, Bearbeitung nur Adminbereich */
.stream-box input,
.stream-box select,
.stream-box label {
  display:none !important;
}
.stream-box .small-note a{
  font-weight:bold;
}

/* ET-Chat Classic Smilie-Box */
.etchat-smilie-area{
  margin:8px 0;
  padding:6px;
  border:1px solid #888;
  border-radius:4px;
  background:rgba(180,180,180,.14);
}
.etchat-smilie-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:3px 4px 6px;
  font-size:13px;
}
.etchat-smilie-head button{
  padding:4px 8px;
  font-size:12px;
}
.etchat-smilie-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:5px;
  font-size:12px;
}
.etchat-smilie-toolbar select{
  padding:4px;
  font-size:12px;
}
.etchat-smilie-box-classic{
  display:grid;
  grid-template-columns:repeat(auto-fill, 30px);
  gap:3px;
  max-height:96px;
  overflow:auto;
  padding:4px;
  border:1px inset rgba(128,128,128,.65);
  background:rgba(255,255,255,.35);
}
.etchat-smilie-item{
  width:28px;
  height:28px;
  padding:1px;
  border:1px solid rgba(90,90,90,.45);
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.7);
  cursor:pointer;
  font-size:20px;
}
.etchat-smilie-item:hover{
  outline:1px solid #3b82f6;
}
.etchat-smilie-item img{
  max-width:24px;
  max-height:24px;
}
.etchat-smilie-window.hidden{
  display:none;
}
.etchat-smilie-window{
  position:fixed;
  z-index:9999;
  right:24px;
  bottom:24px;
  width:330px;
  max-width:calc(100vw - 32px);
  border:1px solid #555;
  border-radius:6px;
  background:#f1f1f1;
  color:#222;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  padding:8px;
}
.etchat-smilie-window-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:bold;
  margin-bottom:7px;
}
.etchat-smilie-window-title button{
  padding:3px 9px;
  font-size:18px;
}
.etchat-smilie-window-box{
  display:grid;
  grid-template-columns:repeat(auto-fill, 30px);
  gap:3px;
  max-height:260px;
  overflow:auto;
  padding:5px;
  border:1px inset #aaa;
  background:white;
}
.chat-smiley-img{
  max-width:28px;
  max-height:28px;
  vertical-align:middle;
}