:root {
  --bg: #060606;
  --panel: #222;
  --text: #e5e7eb;
  --accent: #e6ecee;
  --border: #6b6c6c;
  --input: #363637;

  --font-base: 16px;
  --font-msg: 15px;
  --font-user: 13px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
  font-size:var(--font-base);
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:920px; margin:0 auto; padding:16px; }

.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
}

.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

input, textarea, select, button{
  background:var(--input);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}

input:focus, textarea:focus, button:focus{
  border-color: var(--accent);
}

button{ cursor:pointer; }
button:disabled{ opacity:.6; cursor:not-allowed; }

.nav{ display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.badge{ padding:3px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; }

.error{ color:#fecaca; }
.ok{ color:#bbf7d0; }

.msg{
  border-top:1px solid var(--border);
  padding:10px 0;
  display:flex;
  gap:10px;
}
.msg:first-child{ border-top:none; }

.msg .meta{
  font-size:var(--font-user);
  opacity:.88;
}

.msg .content{
  font-size:var(--font-msg);
}

.avatar{
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid var(--border);
  object-fit:cover;
  flex:0 0 auto;
}

/* Smilies größer */
.smiley{
  width:100px;
  height:100px;
  vertical-align:middle;
  margin:0 6px;
  object-fit:contain;
}

/* Smiley Panel (Picker) */
.smiley-panel{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:8px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  z-index:50;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.smiley-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  font-size: calc(var(--font-base) - 2px);
  opacity:.92;
}

.smiley-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.smiley-item{
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background: var(--input);
  cursor:pointer;
  padding:0;
}

.smiley-item:hover{ filter: brightness(1.10); }

.smiley-item img{
  width:100px;
  height:100px;
}