/* Mobile refinements and profile modal */
html{-webkit-text-size-adjust:100%}
.profile-modal{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.profile-modal.open{opacity:1;visibility:visible}
.profile-backdrop{position:absolute;inset:0;border:0;background:rgba(8,31,29,.58);backdrop-filter:blur(3px)}
.profile-card{position:relative;width:min(100%,410px);overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 28px 80px rgba(0,31,27,.32);transform:translateY(14px) scale(.98);transition:transform .22s ease}
.profile-modal.open .profile-card{transform:translateY(0) scale(1)}
.profile-cover{height:116px;background:radial-gradient(circle at 75% 10%,rgba(106,239,189,.34),transparent 28%),linear-gradient(135deg,#075e54,#119786)}
.profile-close{position:absolute;z-index:2;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.17);color:#fff;font-size:25px;line-height:1}
.profile-close:hover{background:rgba(255,255,255,.27)}
.profile-main{padding:0 27px 27px;text-align:center}
.profile-avatar-large{width:90px;height:90px;margin:-47px auto 12px;border:5px solid #fff;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 31px Inter,sans-serif;box-shadow:0 8px 25px rgba(22,66,61,.18)}
.profile-main h2{margin:0;font-size:23px;line-height:1.25}
.profile-handle{display:block;margin-top:3px;color:#718087;font:13px Inter,sans-serif}
.profile-status{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 10px;border-radius:999px;background:#eaf8f3;color:#16855e;font-size:11px;font-weight:600}
.profile-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#27bd76}
.profile-details{margin:23px 0 18px;border:1px solid #e8eeec;border-radius:14px;text-align:left;overflow:hidden}
.profile-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff}
.profile-row+.profile-row{border-top:1px solid #e8eeec}
.profile-row svg{width:19px;min-width:19px;color:#128c7e}
.profile-row span{display:block;color:#87949a;font-size:10px;line-height:1.1}
.profile-row strong{display:block;margin-top:3px;color:#26383d;font-size:13px;font-weight:600}
.profile-logout{width:100%;height:45px;border:1px solid #f1d6d9;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff7f8;color:#bd3f4b;font-weight:600}
.profile-logout svg{width:18px}
body.modal-open{overflow:hidden}

@media(max-width:680px){
  .auth-page{min-height:100dvh;background:#f6faf8}
  .auth-shell,.auth-panel{min-height:100dvh}
  .auth-panel{display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom))}
  .auth-card{width:100%;max-width:460px;padding:26px 20px;border-radius:20px;box-shadow:0 10px 34px rgba(13,49,45,.09)}
  .mobile-brand{margin-bottom:22px}
  .auth-heading{text-align:center}
  .auth-heading h2{font-size:27px}
  .auth-heading p{font-size:14px}
  .auth-tabs{margin:22px 0 20px}
  .field{margin-bottom:15px}
  .input-wrap{height:50px}
  .input-wrap input{font-size:16px}
  .primary-button{height:50px}
  .privacy-note{justify-content:center;text-align:left}

  .chat-page{height:100dvh;min-height:100dvh;overflow:hidden}
  .chat-shell{height:100dvh;min-height:100dvh}
  .sidebar,.conversation,.active-chat{height:100dvh;min-height:0}
  .sidebar-head{height:62px;min-height:62px;padding-left:15px;padding-right:14px;padding-top:env(safe-area-inset-top)}
  .search-area{padding:10px 11px 7px}
  .search-box{height:46px}
  .search-box input{font-size:16px}
  .list-label{padding:11px 15px 7px}
  .contact{min-height:72px;padding:10px 14px;grid-template-columns:48px minmax(0,1fr) auto}
  .contact .avatar{width:48px;height:48px}
  .conversation-head{height:62px;min-height:62px;padding:0 12px;gap:9px;padding-top:env(safe-area-inset-top)}
  .messages{min-height:0;padding:16px 10px calc(16px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .composer{min-height:64px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));gap:8px}
  .composer textarea{font-size:16px}
  .bubble{max-width:89%;font-size:14px}
  .welcome-state{padding:24px 20px}.welcome-illustration{transform:scale(.86);margin-bottom:-2px}.welcome-state h2{font-size:24px}.welcome-state p{font-size:14px}
  .profile-modal{padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .profile-card{border-radius:21px}.profile-cover{height:102px}.profile-main{padding:0 19px 20px}.profile-avatar-large{width:82px;height:82px;margin-top:-43px}
}

@media(max-width:370px){
  .auth-card{padding:22px 16px}.mobile-brand{margin-bottom:17px}.auth-heading h2{font-size:25px}.auth-tabs{margin-top:18px}.switch-copy{margin:17px 0}.privacy-note{padding-top:14px}
  .brand.compact{font-size:16px}.brand.compact .brand-mark{width:32px;height:32px}.my-avatar{width:38px;height:38px}.contact{padding-left:11px;padding-right:11px}
}

@media(max-height:690px) and (max-width:680px){
  .auth-panel{align-items:flex-start;overflow-y:auto}.auth-card{margin:auto 0}.mobile-brand{margin-bottom:15px}.auth-heading h2{font-size:24px}.auth-tabs{margin:16px 0}.field{margin-bottom:12px}.switch-copy{margin:14px 0}.privacy-note{padding-top:12px}
}