@media (max-width:768px){

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

/* sidebar */
#scs-sidebar{
  max-height:35vh;
  overflow:auto;
  background:#fff;
  border-bottom:1px solid #e5e5e5;
}

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

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

/* back bar */
#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;
}

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

/* messages */
#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;
}

/* composer */
#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;
}
}