/* BamChat hierarchy and compact Telegram-style navigation refinements. */
.brand-kicker{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:1.55rem;font-weight:850;line-height:1;letter-spacing:.12em;color:var(--amber-2)}
.brand-sub{margin-top:4px;font-size:.62rem;font-weight:500;line-height:1;letter-spacing:.08em;color:var(--muted);opacity:.72}
.searchbar{min-height:50px;padding:0 13px;border-radius:17px;gap:9px}.searchbar>svg{width:19px;height:19px}.searchbar input{font-size:.86rem;font-weight:400;line-height:1.2}.searchbar input::placeholder{font-weight:400;letter-spacing:0}
.bottom-nav{height:68px;border-radius:24px;padding:5px 9px}.nav-item{gap:3px;font-size:.68rem}.nav-item svg{width:20px;height:20px}.pay-nav{transform:translateY(-2px)}.pay-medallion{width:48px;height:48px;font-size:1.1rem;box-shadow:0 7px 20px rgba(198,136,69,.28),inset 0 1px rgba(255,255,255,.25)}
@media(max-width:520px){.bottom-nav{bottom:max(4px,env(safe-area-inset-bottom));height:66px}.screen{padding-bottom:100px}.pay-nav{transform:translateY(-2px)}}
.bottom-nav .nav-item{height:56px;min-height:56px}.bottom-nav .nav-item.active::after{bottom:2px;width:5px;height:5px}.bottom-nav .pay-nav{height:58px;min-height:58px;transform:translateY(-2px)}

/* Visual reference pass: premium BamChat shell inspired by the supplied screens. */
:root{
  --bam-ink:#090909;
  --bam-panel:rgba(32,29,25,.78);
  --bam-panel-strong:rgba(48,43,36,.9);
  --bam-line:rgba(245,218,174,.22);
  --bam-gold:#e8bd7d;
  --bam-gold-soft:#b99261;
  --bam-white:#f8f4ed;
}
body{background:
  radial-gradient(ellipse at 84% -8%,rgba(177,126,68,.2),transparent 38%),
  radial-gradient(ellipse at -20% 55%,rgba(112,74,35,.16),transparent 40%),
  var(--bam-ink)!important;color:var(--bam-white)}
.screen{background:
  radial-gradient(ellipse at 78% 8%,rgba(193,143,82,.13),transparent 31%),
  linear-gradient(155deg,rgba(255,255,255,.018),transparent 38%),
  transparent!important}
.topbar{padding-top:clamp(22px,5vw,40px);padding-left:22px;padding-right:22px}
.brand-kicker{font-family:Georgia,'Times New Roman',serif;font-size:1.46rem;letter-spacing:.19em;font-weight:700;color:#efd09d;text-shadow:0 0 22px rgba(227,177,105,.18)}
.brand-sub{margin-top:5px;font-size:.61rem;letter-spacing:.18em;color:#eee1cf;opacity:.78}
.icon-btn{border:1px solid rgba(246,221,181,.25)!important;background:rgba(24,22,20,.72)!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.2);width:50px!important;height:50px!important}
.icon-btn:hover,.icon-btn:focus-visible{border-color:rgba(239,194,126,.7)!important;background:rgba(78,58,34,.62)!important}
.hero{padding:26px 22px 14px!important}
.hero h1{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(2rem,8vw,2.8rem)!important;line-height:1.04!important;font-weight:400!important;letter-spacing:-.035em!important;color:#f5eee4!important}
.hero h1 em{font-style:normal;color:#e6bd80}
.hero p{margin-top:8px!important;font-size:.74rem!important;letter-spacing:.18em!important;color:#c7b8a4!important}
.searchbar{margin-left:18px;margin-right:18px;width:auto!important;min-height:54px;padding:0 16px;border-radius:28px;background:rgba(247,244,239,.96)!important;border:1px solid rgba(255,255,255,.7)!important;box-shadow:0 12px 35px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.8)!important;color:#403a32!important}
.searchbar>svg{color:#332e28!important;width:21px;height:21px}
.searchbar input{color:#403a32!important;font-size:.82rem!important}
.searchbar input::placeholder{color:#6b6258!important;opacity:1!important}
.search-end{border:1px solid rgba(89,77,63,.12);background:rgba(255,255,255,.24);color:#6a5d4e;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:1rem}
.section{padding-left:18px!important;padding-right:18px!important}
.section-head{margin-bottom:10px!important}
.section-head h2,.section-head h3{font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important;letter-spacing:-.02em!important;color:#f5eee4!important}
.section-head h2{font-size:1.45rem!important}.section-head h3{font-size:1.16rem!important}
.section-link{color:#d4c5b0!important;font-size:.75rem!important}
.active-row{gap:12px!important;padding:3px 2px 5px!important;overflow-x:auto;scrollbar-width:none}.active-row::-webkit-scrollbar{display:none}
.person-chip{min-width:60px!important;gap:7px!important;color:#dfd4c7!important;font-size:.72rem!important}
.avatar{background:linear-gradient(145deg,#4d463c,#171614)!important;border-color:rgba(239,205,157,.45)!important;box-shadow:0 5px 18px rgba(0,0,0,.25)}
.avatar-md{width:58px!important;height:58px!important;font-size:.7rem!important}.person-chip:first-child .avatar{background:rgba(255,255,255,.05)!important;border-style:dashed!important;font-size:1.8rem!important;font-weight:300}
.presence{width:11px!important;height:11px!important;border:2px solid #16130f!important;background:#2ee0b6!important}
.conversation-list.card{padding:4px 12px!important;border-radius:25px!important;background:linear-gradient(145deg,rgba(68,61,51,.72),rgba(24,22,20,.9))!important;border:1px solid rgba(236,204,160,.13)!important;box-shadow:0 14px 40px rgba(0,0,0,.25)!important}
.conversation-row{min-height:77px!important;padding:9px 4px!important;border-bottom:1px solid rgba(235,220,200,.13)!important}
.conversation-row:last-child{border-bottom:0}.conversation-row:hover,.conversation-row:focus-visible{background:rgba(242,193,120,.08)!important}
.conversation-copy strong{font-size:1rem!important;color:#faf5ed!important}.conversation-copy>span{font-size:.79rem!important;color:#c9bcac!important;margin-top:4px!important}.conversation-meta small{font-size:.7rem!important;color:#d6c9ba!important}.unread{background:#e9d1aa!important;color:#2c241b!important}
.bottom-nav{background:rgba(15,14,13,.92)!important;border:1px solid rgba(242,213,171,.23)!important;box-shadow:0 -10px 34px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.08)!important}
.nav-item{color:#d7cfc5!important}.nav-item.active{color:#f4d49e!important}.nav-item.active svg{filter:drop-shadow(0 0 7px rgba(241,192,117,.55))}.pay-medallion{background:radial-gradient(circle at 35% 28%,#fff0ce,#c68a4c 68%,#79502e)!important;border:1px solid #f4d9ae!important;color:#372719!important}

/* World, Pay, thread and profile surfaces inherit the same visual language. */
[class*="world"] .card,[class*="pay"] .card,[class*="profile"] .card,[class*="thread"] .card,.modal-content{background:linear-gradient(145deg,rgba(68,61,51,.78),rgba(24,22,20,.9))!important;border-color:rgba(236,204,160,.2)!important;box-shadow:0 14px 38px rgba(0,0,0,.24)!important}
[class*="world"] h1,[class*="world"] h2,[class*="pay"] h1,[class*="pay"] h2,[class*="thread"] h1,[class*="thread"] h2{font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important}
@media(max-width:520px){.topbar{padding-top:22px}.hero{padding-top:22px!important}.searchbar{margin-left:18px;margin-right:18px}.section{padding-left:18px!important;padding-right:18px!important}.conversation-list.card{border-radius:22px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Desktop adapts the same visual system into a real responsive app shell. */
@media(min-width:900px){
  .app-shell{width:min(1120px,calc(100vw - 48px))!important}
  .screen{width:100%!important;border-radius:30px!important}
  .hero{padding-left:34px!important;padding-right:34px!important}
  .searchbar{margin-left:34px;margin-right:34px}
  .section{padding-left:34px!important;padding-right:34px!important}
  .active-row{gap:16px!important}
  .conversation-list.card{max-width:100%!important}
  .bottom-nav{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(1072px,calc(100vw - 48px))!important}
}

/* Official Account verification must be unmistakable in the demo. */
.official-card .verified{display:inline-flex!important;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;background:linear-gradient(145deg,#ffe8bd,#c78d4c)!important;color:#2b1c0e!important;font-size:.68rem!important;font-weight:900!important;vertical-align:middle;box-shadow:0 0 0 2px rgba(242,202,145,.16),0 2px 9px rgba(224,169,94,.32)}
.official-card .verified::after{content:"Official";position:absolute;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}