.back-button{display:none}
.mobile-profile-button{display:none}

@media(max-width:700px){
  html,body{width:100%;height:100%;min-height:0;overflow:hidden;background:#fff}
  body{position:fixed;inset:0;overscroll-behavior:none}
  .app-shell{display:block;position:fixed;top:var(--app-top,0px);right:0;bottom:auto;left:0;width:100%;height:var(--app-height,100dvh);min-height:0;margin:0;overflow:hidden;box-shadow:none}
  .rail{display:none}
  .chat-list{display:flex;width:100%;height:var(--app-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-header-actions{display:flex;gap:8px}
  .chat-list header .mobile-profile-button{display:grid;place-items:center;background:#e9eef6;color:var(--navy)}
  .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;touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .secure{margin-top:8px}

  .conversation{display:none;position:fixed;top:var(--app-top,0px);right:0;bottom:auto;left:0;z-index:10;width:100%;height:var(--app-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:36px minmax(0,1fr) 36px 42px;gap:4px;margin:0;padding:8px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border:0;border-top:1px solid var(--line);border-radius:0;background:#fff;box-shadow:0 -10px 32px #0d1b1412}
  .composer input{min-width:0;padding:0 6px;font-size:16px}
  .composer{align-self:end}
  .composer>button{min-width:0}
  .emoji-panel{right:8px;bottom:calc(58px + env(safe-area-inset-bottom))}

  .auth-overlay,.modal-overlay{top:var(--app-top,0px);right:0;bottom:auto;left:0;height:var(--app-height,100dvh);align-items:end;padding:0;background:#0b1324c7}
  .auth-card,.modal-card{width:100%;max-height:min(94dvh,calc(var(--app-height,100dvh) - 8px));overflow-y:auto;padding:24px 22px calc(18px + 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}
  .modal-card.user-search-card{height:calc(var(--app-height,100dvh) - max(8px,env(safe-area-inset-top)));max-height:none;overflow:hidden;padding:0 20px calc(12px + env(safe-area-inset-bottom))}
  .user-search-header{position:relative;z-index:2;padding:24px 2px 0;background:inherit}
  .user-search-header .search{margin-top:18px;margin-bottom:12px}
  .user-search-card .user-results{min-height:0;max-height:none;padding:0 2px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .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:var(--app-height,100dvh);justify-content:center;border:0;border-radius:0}
}

@media(max-width:700px) and (display-mode:standalone){
  .composer{padding-right:max(14px,env(safe-area-inset-right));padding-bottom:calc(max(14px,env(safe-area-inset-bottom)) + 8px);padding-left:max(14px,env(safe-area-inset-left))}
  .composer .send{border-radius:13px;box-shadow:0 8px 22px #8fce2345}
}

@media(max-width:700px) and (max-height:650px){
  .chat-list>header{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:7px}
  .chat-list h1{margin:1px 0;font-size:25px}
  .search{margin-bottom:7px;padding-top:8px;padding-bottom:8px}
  .filters{padding-bottom:7px}
  .chat{min-height:62px;padding-top:8px;padding-bottom:8px}
  .secure{display:none}
  .conversation-header{min-height:54px}
  .messages{padding-top:9px;padding-bottom:10px}
  .composer{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
  .auth-logo{width:43px;height:43px;margin-bottom:9px}
  .auth-card h2{margin-top:4px;font-size:23px}
  .auth-card>p{margin-bottom:12px}
  .auth-card form{gap:8px}
  .auth-card input,.primary{height:40px}
}

@media(max-width:900px) and (orientation:landscape){
  .call-identity .avatar{width:70px;height:70px;border-radius:23px}
  .call-identity h2{margin-top:10px;font-size:22px}
  .call-identity small{margin-bottom:12px}
}

@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}
}

.chat-search input{min-width:0}.chat-search-clear{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;margin:-3px -5px -3px 0;padding:0;border:0;border-radius:50%;background:#e8eee8;color:#405047;font-size:18px}.chat-pin{margin-right:6px;color:#8bbd29;font-size:9px;font-style:normal;vertical-align:2px}