/* Chat Habib v46 — PWA user UI aligned with Android native app */
:root{
  --native-dark:#147A73;
  --native-accent:#00A884;
  --native-soft:#E7F4F1;
  --native-bg:#F4F7F6;
  --native-text:#17201D;
  --native-muted:#6D7874;
}
body.native-user-ui{background:var(--native-bg);color:var(--native-text)}
body.native-user-ui .shell{max-width:860px;background:var(--native-bg);box-shadow:0 8px 28px rgba(15,35,29,.08)}
body.native-user-ui .topbar{
  height:auto;min-height:64px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));
  gap:10px;border-bottom:0;background:#fff;box-shadow:0 2px 8px rgba(19,44,37,.08);z-index:20;
}
body.native-user-ui .topbar .avatar{
  width:44px;height:44px;background:var(--native-dark);color:#fff;border-radius:50%;font-size:20px;font-weight:800;
}
body.native-user-ui .topbar .avatar img{display:block;width:100%;height:100%;object-fit:cover}
body.native-user-ui .topbar .grow{min-width:0}
body.native-user-ui .topbar .title{overflow-wrap:anywhere}
body.native-user-ui .topbar .title{font-size:17px;font-weight:800;color:var(--native-text);line-height:1.15}
body.native-user-ui .topbar .subtitle{margin-top:3px;font-size:11px;color:#7A8581;line-height:1.2}
body.native-user-ui .user-account-wrap{display:none!important}
.native-active-pill{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:var(--native-soft);color:var(--native-dark);font-size:11px;font-weight:700;white-space:nowrap}
@media(max-width:420px){body.native-user-ui .topbar .native-active-pill{display:none}}

body.native-user-ui #content.chat{
  background:var(--native-bg);background-image:none;padding:12px 12px 122px;scrollbar-width:none;
}
body.native-user-ui #content.chat::-webkit-scrollbar{display:none}
body.native-user-ui .day{margin:4px 0 12px;color:#7B8783;font-size:11px}
body.native-user-ui .msgrow{margin:7px 0}
body.native-user-ui .bubble{
  max-width:min(84%,620px);padding:9px 11px;border-radius:16px 16px 16px 5px;background:#fff;border:0;
  box-shadow:0 1px 3px rgba(20,50,42,.08);color:var(--native-text);
}
body.native-user-ui .msgrow.me .bubble{background:var(--native-soft);border:0;border-radius:16px 16px 5px 16px}
body.native-user-ui .message-text{font-size:14px;line-height:1.42}
body.native-user-ui .meta{margin-top:4px;color:#7A8581;font-size:9px}
body.native-user-ui .reply-quote{border-left-color:var(--native-accent);background:rgba(255,255,255,.62)}
body.native-user-ui .reply-quote b{color:var(--native-dark)}

body.native-user-ui .user-group-shelf{
  order:0;background:var(--native-bg);border:0;padding:9px 12px 4px;
}
body.native-user-ui .user-group-shelf-head{margin-bottom:4px}
body.native-user-ui .user-group-shelf-head b{color:var(--native-muted);font-size:12px}
body.native-user-ui .user-group-shelf-head small{display:none}
body.native-user-ui .user-group-shelf-head button{color:var(--native-dark);font-size:11px}
body.native-user-ui .user-group-shelf-list{gap:8px;padding:4px 0 6px}
body.native-user-ui .user-group-card{
  width:185px;min-width:185px;padding:10px;border:0;border-radius:16px;background:#fff;box-shadow:0 1px 4px rgba(20,50,42,.07);
}
body.native-user-ui .user-group-card:hover{background:#fff}
body.native-user-ui .user-group-card-avatar{width:40px;height:40px;background:var(--native-soft);color:var(--native-dark)}
body.native-user-ui .user-group-card-avatar i{background:var(--native-dark)}
body.native-user-ui .user-group-card-body b{font-size:13px;color:var(--native-text)}
body.native-user-ui .user-group-card-body small{color:#7A8581;font-size:10px}
body.native-user-ui .user-group-card-body em{font-size:10px;color:#7A8581}

body.native-user-ui .composer-wrap{
  position:fixed;left:50%;transform:translateX(-50%);bottom:70px;width:min(860px,100%);z-index:18;background:transparent;
  padding:0 10px;
}
body.native-user-ui .composer{
  position:static;left:auto;bottom:auto;transform:none;width:100%;padding:8px;gap:7px;border:1px solid #E1E8E5;
  border-radius:19px;background:#fff;box-shadow:0 3px 14px rgba(15,45,36,.08);align-items:flex-end;
}
body.native-user-ui .composer textarea{
  min-height:44px;max-height:116px;border:0;background:#fff;border-radius:14px;padding:11px 8px;box-shadow:none!important;
}
body.native-user-ui .composer textarea:focus{border:0;box-shadow:none!important}
body.native-user-ui .attach{width:44px;height:44px;background:#F0F4F2;color:var(--native-text);border-radius:50%;font-size:20px}
body.native-user-ui .send{width:44px;height:44px;background:var(--native-dark);border-radius:50%;font-size:17px}
body.native-user-ui .file-preview:empty{display:none}
body.native-user-ui .file-preview:not(:empty){margin:0 2px 6px}

body.native-user-ui .nav{
  height:70px;padding-bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(4,1fr);border-top:1px solid #E5EBE8;
  background:#fff;z-index:21;
}
body.native-user-ui .nav button{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px;
  background:#fff;color:#78827E;font-size:10px;font-weight:600;line-height:1;border:0;
}
body.native-user-ui .nav button .native-nav-icon{font-size:21px;line-height:1.05}
body.native-user-ui .nav button .native-nav-label{font-size:10px;line-height:1}
body.native-user-ui .nav button.active{color:var(--native-dark);background:#fff}
body.native-user-ui .nav button.active:before{content:"";position:absolute;top:3px;width:32px;height:3px;border-radius:999px;background:var(--native-dark)}
body.native-user-ui .group-nav-badge{top:4px;right:calc(50% - 21px);background:var(--native-dark)}

body.native-user-ui #content.page{background:var(--native-bg);padding:12px 12px 88px}
body.native-user-ui .announce{border:0;border-radius:16px;padding:14px;background:#fff;box-shadow:0 1px 4px rgba(20,50,42,.06)}
body.native-user-ui .announce h3{color:var(--native-text);font-size:14px}
body.native-user-ui .announce p{color:#33413C;font-size:13px;line-height:1.48}

body.native-user-ui .group-user-page{padding:0!important;display:flex;flex-direction:column;min-height:0}
body.native-user-ui .group-user-list{padding:12px;background:var(--native-bg)}
body.native-user-ui .group-row{border:0;border-radius:16px;background:#fff;margin-bottom:8px;box-shadow:0 1px 4px rgba(20,50,42,.06)}
body.native-user-ui .group-row.active{background:var(--native-soft)}
body.native-user-ui .group-avatar{background:var(--native-soft);color:var(--native-dark)}
body.native-user-ui .group-unread{background:var(--native-dark)}
body.native-user-ui .group-user-chat{background:var(--native-bg)}
body.native-user-ui .group-user-head{background:#fff;border-bottom:1px solid #E5EBE8}
body.native-user-ui .group-messages{background:var(--native-bg);background-image:none}
body.native-user-ui .group-msg .bubble{border:0;box-shadow:0 1px 3px rgba(20,50,42,.08)}
body.native-user-ui .group-msg.me .bubble{background:var(--native-soft)}
body.native-user-ui .group-compose-wrap{background:transparent}
body.native-user-ui .group-compose{border-radius:18px;background:#fff;border:1px solid #E1E8E5;box-shadow:0 3px 14px rgba(15,45,36,.08)}

.native-account-page{max-width:680px;margin:0 auto;padding:4px 0 12px}
.native-account-hero{display:flex;align-items:center;gap:13px;padding:16px;border-radius:20px;background:#fff;box-shadow:0 1px 4px rgba(20,50,42,.06)}
.native-account-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--native-dark);color:#fff;font-size:23px;font-weight:800;flex:0 0 auto}
.native-account-avatar img{width:100%;height:100%;object-fit:cover}
.native-account-hero h2{margin:0;color:var(--native-text);font-size:18px}
.native-account-hero p{margin:4px 0 0;color:#7A8581;font-size:12px}
.native-account-section{margin-top:10px;padding:7px;border-radius:18px;background:#fff;box-shadow:0 1px 4px rgba(20,50,42,.06)}
.native-account-action{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:13px;background:#fff;text-align:left;color:var(--native-text)}
.native-account-action:active{background:#F2F7F5}
.native-account-action>span:first-child{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--native-soft);font-size:17px}
.native-account-action>div{flex:1;min-width:0}
.native-account-action b,.native-account-action small{display:block}
.native-account-action b{font-size:13px}.native-account-action small{margin-top:2px;color:#7A8581;font-size:10px}
.native-account-action .chev{width:auto;background:transparent;color:#9AA39F;font-size:18px}
.native-account-action.danger{color:#B42318}.native-account-action.danger>span:first-child{background:#FDEDEC}

/* Login/onboarding follows the same Android visual language. */
.login:not(.admin-login){background:var(--native-bg)}
.login:not(.admin-login) .card{border:0;border-radius:24px;box-shadow:0 5px 22px rgba(15,45,36,.08)}
.login:not(.admin-login) .brandlock .logo{background:var(--native-dark);border-radius:16px}
.login:not(.admin-login) .eyebrow{color:var(--native-dark)}
.login:not(.admin-login) .trustline span{background:var(--native-soft);color:var(--native-dark)}
.login:not(.admin-login) .primary{min-height:50px;background:var(--native-dark);border-radius:13px}
.login:not(.admin-login) .field input{min-height:48px;border-color:#DCE5E1;border-radius:12px}

@media(max-width:640px){
  body.native-user-ui .shell{box-shadow:none}
  body.native-user-ui .topbar{padding-left:14px;padding-right:14px}
  body.native-user-ui #content.chat{padding-left:10px;padding-right:10px}
  body.native-user-ui .user-group-shelf{padding-left:10px;padding-right:10px}
  body.native-user-ui .user-group-card{width:168px;min-width:168px}
  body.native-user-ui .bubble{max-width:88%}
  body.native-user-ui .composer-wrap{padding:0 8px}
  .native-active-pill{font-size:10px;padding:5px 8px}
}