#sgc10_container {display:flex; border:1px solid #ddd; height:560px; font-family:system-ui, Arial, sans-serif;}
.sgc10-sidebar {width:28%; border-right:1px solid #eee; overflow-y:auto; padding:10px; background:#fafafa;}
.sgc10-chat {flex:1; display:flex; flex-direction:column;}
.sgc10-chat-header {display:flex; align-items:center; justify-content:space-between; padding:10px; border-bottom:1px solid #eee;}
.sgc10-messages {flex:1; overflow-y:auto; padding:10px;}
.sgc10-msg {margin:6px 0; padding:8px 10px; background:#f3f7ff; border-radius:10px; max-width:80%;}
.sgc10-btn {background:#0073aa; color:#fff; border:none; padding:8px 12px; border-radius:6px; cursor:pointer;}
.sgc10-btn:hover {background:#006197;}
.sgc10-btn.alt {background:#aaa;}
.sgc10-btn.small {padding:6px 10px; font-size:12px;}
.sgc10-create {margin-top:10px; padding:8px; background:#fff; border:1px solid #eee; border-radius:8px;}
.sgc10-user {display:block; margin:3px 0;}
#sgc10_send_form {display:flex; gap:6px; padding:10px; border-top:1px solid #eee;}
#sgc10_send_form textarea {flex:1; resize:vertical; min-height:38px;}
.sgc10-img {max-width:220px; display:block; margin-top:6px;}
.sgc10-video {max-width:240px; display:block; margin-top:6px;}
.sgc10-group {padding:8px; border-bottom:1px solid #eee; cursor:pointer; border-radius:6px;}
.sgc10-group:hover {background:#eef6ff;}


/* --- Unread badge --- */
.sgc10-group { display:flex; align-items:center; justify-content:space-between; }
.sgc10-group-name { flex:1; }
.sgc10-badge{
  min-width:20px; height:20px; padding:0 6px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  background:#d11; color:#fff;
}

/* --- Manage modal --- */
.sgc10-modal{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;
  padding:12px;
}
.sgc10-modal-card{
  width:100%; max-width:520px;
  background:#fff; border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.sgc10-modal-header, .sgc10-modal-footer{
  display:flex; align-items:center;
  padding:12px 14px;
  background:#f6f7f8;
}
.sgc10-modal-body{ padding:12px 14px; }
.sgc10-icon-btn{
  margin-left:auto;
  background:transparent; border:0; font-size:18px; cursor:pointer;
}
.sgc10-field span{ display:block; font-size:12px; opacity:.8; margin-bottom:6px; }
.sgc10-field input{ width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; }
.sgc10-section{ margin-top:12px; }
.sgc10-section-title{ font-size:12px; font-weight:700; margin-bottom:8px; opacity:.8; }
.sgc10-users-scroll{ max-height:180px; overflow:auto; border:1px solid #eee; border-radius:12px; padding:10px; background:#fff; }
.sgc10-user-row{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f2f2f2; }
.sgc10-user-row:last-child{ border-bottom:0; }
.sgc10-pill{ font-size:12px; padding:4px 10px; border-radius:999px; background:#e9eef6; }
.sgc10-btn.tiny{ padding:6px 10px; font-size:12px; border-radius:10px; }
.sgc10-btn.danger{ background:#b11; color:#fff; }
.sgc10-spacer{ flex:1; }


/* File input mobile friendly */
#sgc10_send_form input[type=file]{ width:100%; max-width:100%; font-size:14px; }



/* --- Message bar: big textarea + separate action bar --- */
#sgc10_send_form{ display:flex; flex-direction:column; gap:10px; }
#sgc10_send_form .sgc10-textarea{
  width:100%;
  min-height:90px;
  padding:12px;
  border:1px solid #ddd;
  border-radius:14px;
  font-size:16px;
  resize:vertical;
}
#sgc10_send_form .sgc10-sendbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#sgc10_send_form .sgc10-attach{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  user-select:none;
}
#sgc10_send_form .sgc10-attach input.sgc10-file{ display:none; }
#sgc10_send_form .sgc10-sendbtn{ flex:0 0 auto; padding:10px 16px; border-radius:12px; }