#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; }

/* === v2.7 integrated mobile delete and loading fix === */
.sgc10-msg{ position:relative; word-break:break-word; }
.sgc10-msg-actions{ margin-top:6px; display:flex; justify-content:flex-end; }
.sgc10-delete-msg{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  visibility:visible !important;
  opacity:1 !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  background:#dc2626 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:999px !important;
  padding:7px 12px !important;
  font-size:13px !important;
  line-height:1 !important;
  cursor:pointer !important;
  z-index:5 !important;
}
.sgc10-empty{ padding:14px; color:#666; text-align:center; }

@media (max-width:768px){
  #sgc10_container{
    display:flex !important;
    flex-direction:column !important;
    height:100dvh !important;
    min-height:620px !important;
    overflow:hidden !important;
    width:100% !important;
  }
  .sgc10-sidebar{
    width:100% !important;
    max-height:34dvh !important;
    overflow-y:auto !important;
    border-right:0 !important;
    border-bottom:1px solid #eee !important;
    box-sizing:border-box !important;
  }
  .sgc10-chat{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
  }
  .sgc10-chat-header{ flex:0 0 auto !important; }
  .sgc10-messages{
    flex:1 1 auto !important;
    min-height:220px !important;
    max-height:none !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  #sgc10_send_form{ flex:0 0 auto !important; }
  .sgc10-msg{ max-width:96% !important; padding:10px 12px !important; }
  .sgc10-msg-actions{ display:flex !important; justify-content:flex-end !important; margin-top:8px !important; }
  .sgc10-delete-msg{
    min-width:82px !important;
    min-height:40px !important;
    font-size:14px !important;
    padding:8px 14px !important;
    touch-action:manipulation !important;
  }
}


/* v2.7.1 force Delete visibility on every device */
.sgc10-msg-actions {
  display: block !important;
  margin-top: 6px !important;
}
.sgc10-delete-msg {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  min-width: 72px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  z-index: 20 !important;
  position: relative !important;
}
@media (max-width: 768px) {
  .sgc10-msg-actions {
    display: block !important;
    margin-top: 8px !important;
  }
  .sgc10-delete-msg {
    display: inline-flex !important;
    min-height: 40px !important;
    min-width: 84px !important;
    font-size: 14px !important;
    touch-action: manipulation !important;
  }
}


/* permission-fixed: keep the v2.7.1 visible button, but make it less tall */
.sgc10-delete-msg {
  width: auto !important;
  min-width: auto !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}


/* === v2.7.1 mobile create-group visibility fix ===
   Keeps the stable plugin logic unchanged.
   Problem fixed: on phones, the group list could visually cover/push the
   "+ New Group" button and create panel below the visible area. */
@media (max-width: 768px) {
  #sgc10_container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .sgc10-sidebar {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  #sgc10_groups_list {
    display: block !important;
    max-height: 28dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 10px !important;
    padding-bottom: 4px !important;
  }

  .sgc10-group {
    position: relative !important;
    z-index: 1 !important;
    min-height: 38px !important;
  }

  #sgc10_new_group {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 30 !important;
    margin: 8px 0 10px 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  #sgc10_create_panel {
    position: relative !important;
    z-index: 35 !important;
    display: none;
    width: 100% !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
    clear: both !important;
  }

  #sgc10_create_panel input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
    margin-bottom: 8px !important;
  }

  #sgc10_users_list {
    max-height: 26dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 0 !important;
  }

  .sgc10-create-actions {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .sgc10-create-actions .sgc10-btn {
    flex: 1 1 0 !important;
    min-height: 42px !important;
  }

  .sgc10-chat {
    min-height: 420px !important;
  }
}