.back-button{display:none}

@media(max-width:700px){
  html,body{width:100%;height:100%;overflow:hidden;background:#fff}
  .app-shell{display:block;width:100%;height:100dvh;min-height:0;margin:0;overflow:hidden;box-shadow:none}
  .rail{display:none}
  .chat-list{display:flex;width:100%;height:100dvh;min-width:0;border:0;padding-bottom:env(safe-area-inset-bottom)}
  .list-heading{padding-top:max(22px,env(safe-area-inset-top))}
  .chat-list>header{padding-top:max(24px,env(safe-area-inset-top))}
  .chat-items,.chats{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .chat{grid-template-columns:48px minmax(0,1fr) auto;padding:12px 14px}
  .secure{margin-top:8px}

  .conversation{display:none;position:fixed;inset:0;z-index:10;width:100%;height:100dvh;min-width:0;grid-template-rows:auto minmax(0,1fr) auto;background:#f8f9fa}
  body.mobile-chat-open .conversation{display:grid}
  body.mobile-chat-open .chat-list{display:none}
  .conversation-header{min-height:66px;padding:env(safe-area-inset-top) 10px 0;border-bottom:1px solid var(--line)}
  .conversation-header>div{min-width:0;gap:8px}
  .conversation-header span{min-width:0}
  .conversation-header strong{display:block;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .conversation-header .avatar{width:39px;height:39px;border-radius:13px}
  .conversation-header nav{gap:5px}
  .conversation-header nav button{width:36px;height:36px}
  .conversation-header .chat-search-button{display:none}
  .back-button{display:grid!important;place-items:center;width:34px!important;height:40px!important;border:0!important;background:transparent!important;font-size:32px!important;line-height:1}

  .messages{min-width:0;padding:16px 11px 20px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .message-line{max-width:100%}
  .bubble{max-width:84%;overflow-wrap:anywhere}
  .bubble p{font-size:14px;line-height:1.45}
  .welcome-message{margin-top:14vh;padding:20px}

  .composer{grid-template-columns:34px minmax(0,1fr) 34px 40px;gap:3px;margin:0;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:#fff}
  .composer input{min-width:0;padding:0 6px;font-size:16px}
  .composer>button{min-width:0}
  .emoji-panel{right:8px;bottom:calc(58px + env(safe-area-inset-bottom))}

  .auth-overlay,.modal-overlay{align-items:end;padding:0;background:#0b1324c7}
  .auth-card,.modal-card{width:100%;max-height:94dvh;overflow-y:auto;padding:28px 22px calc(25px + env(safe-area-inset-bottom));border-radius:25px 25px 0 0}
  .auth-logo{margin-bottom:15px}
  .auth-card input{font-size:16px}
  .modal-card .search{margin-left:0;margin-right:0}
  .user-results{max-height:50dvh}
  .toast{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));left:12px;max-width:none;text-align:center}

  .call-overlay{padding:0}
  .call-overlay section{width:100%;height:100dvh;justify-content:center;border:0;border-radius:0}
}

@media(max-width:360px){
  .conversation-header{padding-left:4px;padding-right:4px}
  .conversation-header strong{max-width:34vw}
  .conversation-header nav button{width:33px;height:33px}
  .composer{grid-template-columns:31px minmax(0,1fr) 31px 38px;padding-left:4px;padding-right:4px}
}