/* layout */
#app{
  position:fixed; inset:0; display:grid;
  grid-template-rows: 48px 1fr auto; /* header / content / composer */
  background:#0b1220; color:#e7ebf3; font:14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
#topbar{ display:flex; align-items:center; padding:0 12px; border-bottom:1px solid #182034; }

#content{
  position:relative; display:grid; grid-template-columns: 1fr 220px; gap:0;
  min-height:0; /* allow inner scroll */
}
#messages{ overflow:auto; padding:10px 12px; }
#sidebar{
  border-left:1px solid #182034; overflow:auto; padding:10px;
}

/* sidebar */
#sidebar .side-title{ font-weight:600; opacity:.8; margin-bottom:6px; }
#chan-list{ list-style:none; margin:0; padding:0; }
#chan-list li{
  padding:6px 8px; border-radius:8px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#chan-list li.active{ background:#10192b; }

/* composer (bitis çizgisi burada) */
#composer{
  display:flex; gap:8px; padding:10px; border-top:1px solid #182034;
}
#text{
  flex:1; padding:10px; border-radius:10px;
  border:1px solid #203050; background:#0e1727; color:#e7ebf3;
}
#send{
  padding:10px 14px; border-radius:10px; border:1px solid #203050;
  background:#12213a; color:#e7ebf3; cursor:pointer;
}

/* messages */
.msg{ margin:8px 0; }
.msg .nick{ color:#8ab4ff; cursor:pointer; }
.badge{ font-size:11px; opacity:.7; margin-left:6px; }

/* small screens: sidebar alta insin istersen burayı değiştirebilirsin */
/*
@media (max-width: 720px){
  #content{ grid-template-columns: 1fr; }
  #sidebar{ order: 2; border-left:none; border-top:1px solid #182034; }
}
*/