@media (max-width:1180px){
  :root{--sc-sidebar-width:320px;--sc-detail-width:280px}
}

@media (max-width:980px){
  .smartchats-app{grid-template-columns:310px minmax(0,1fr)}
  .sc-detail{
    position:fixed;z-index:40;top:12px;right:12px;bottom:12px;
    width:min(340px,calc(100vw - 24px));
    border:1px solid var(--sc-border);border-radius:var(--sc-radius);
    box-shadow:var(--sc-shadow);transform:translateX(calc(100% + 24px));transition:transform .2s ease
  }
  .smartchats-app.is-detail-open .sc-detail{transform:translateX(0)}
  .sc-detail-close{display:inline-grid!important}
}

@media (max-width:720px){
  body{background:#fff}
  .smartchats-app{
    height:100vh;min-height:100vh;margin:0;border:0;border-radius:0;box-shadow:none;
    grid-template-columns:1fr
  }
  .sc-sidebar,.sc-chat{grid-column:1;grid-row:1}
  .sc-sidebar{z-index:2;border-right:0}
  .sc-chat{z-index:3;transform:translateX(100%);transition:transform .2s ease}
  .smartchats-app.is-chat-open .sc-chat{transform:translateX(0)}
  .sc-back-btn{display:inline-grid!important}
  .sc-detail{top:0;right:0;bottom:0;width:min(340px,92vw);border-radius:0}
  .sc-message-scroll{padding:15px 12px 20px}
  .sc-bubble{max-width:86%}
  .sc-chat-head,.sc-sidebar-head{padding-left:12px;padding-right:12px}
  .sc-file-preview{margin-left:0}
}

@media (max-width:420px){
  .sc-chat-actions .sc-btn{display:none}
  .sc-brand-subtitle{display:none}
  .sc-conversation-item{padding-left:11px;padding-right:11px}
  .sc-bubble{max-width:92%}
}