@media (max-width:768px){

#scs-app{
  display:flex;
  flex-direction:column;
  height:100dvh;
  background:#f6f7f9;
}

/* ===== FIRST PAGE ONLY =====
   First page must show only the user list / select-user area.
   This removes the mic, message box, upload, send button, and divider line
   without touching the second chat page. */
#scs-app:not(.scs-chat-open) #scs-sidebar{
  display:block !important;
  width:100% !important;
  max-height:none !important;
  height:100dvh !important;
  overflow:auto !important;
  background:#fff;
  border-bottom:0 !important;
}

#scs-app:not(.scs-chat-open) #scs-main{
  display:none !important;
}

/* Extra safety in case any composer/mic is outside #scs-main on some installs. */
#scs-app:not(.scs-chat-open) #scs-compose,
#scs-app:not(.scs-chat-open) #scs-text,
#scs-app:not(.scs-chat-open) #scs-file,
#scs-app:not(.scs-chat-open) #scs-send,
#scs-app:not(.scs-chat-open) .scs-compose,
#scs-app:not(.scs-chat-open) .scs-mic,
#scs-app:not(.scs-chat-open) .scs-voice,
#scs-app:not(.scs-chat-open) .scs-audio,
#scs-app:not(.scs-chat-open) button[aria-label*="mic" i],
#scs-app:not(.scs-chat-open) button[title*="mic" i],
#scs-app:not(.scs-chat-open) button[class*="mic" i],
#scs-app:not(.scs-chat-open) [class*="microphone" i],
#scs-app:not(.scs-chat-open) [class*="voice" i]{
  display:none !important;
}

#scs-app:not(.scs-chat-open) hr,
#scs-app:not(.scs-chat-open) .scs-divider{
  display:none !important;
  border:0 !important;
}

/* ===== SECOND CHAT PAGE - original behavior kept ===== */
#scs-sidebar{
  max-height:35vh;
  overflow:auto;
  background:#fff;
  border-bottom:1px solid #e5e5e5;
}

#scs-app.scs-chat-open #scs-sidebar{
  display:none;
}

#scs-main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

#scs-mobile-backbar{
  display:none;
  background:#fff;
  padding:12px 14px;
  font-weight:600;
  border-bottom:1px solid #e5e5e5;
  cursor:pointer;
}

#scs-app.scs-chat-open #scs-mobile-backbar{
  display:block;
}

#scs-header{
  background:#fff;
  padding:12px 14px;
  font-weight:700;
  border-bottom:1px solid #e5e5e5;
}

#scs-messages{
  flex:1;
  overflow-y:auto;
  padding:14px;
}

#scs-messages .scs-msg{
  max-width:96%;
  padding:12px;
  margin-bottom:10px;
  border-radius:16px;
  background:#fff;
}

#scs-messages .scs-msg.me{
  margin-left:auto;
  background:#dcf8c6;
}

#scs-compose{
  background:#fff;
  border-top:1px solid #e5e5e5;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#scs-text{
  width:100%;
  padding:14px;
  border-radius:20px;
  border:1px solid #ccc;
}

#scs-file,
#scs-send{
  width:100%;
}

#scs-send{
  background:#22c55e;
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px;
  font-weight:700;
}
}