/* Chat-only visual and interaction layer. */
.screen:has(.chat-hub){overflow:hidden;background:#fffefa}
.chat-hub{height:100%;overflow-y:auto;overscroll-behavior:contain;background:#fffefa;color:#17375f;scrollbar-width:none}
.chat-hub::-webkit-scrollbar{display:none}
.chat-appbar{height:72px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:rgba(255,254,250,.97);border-bottom:1px solid transparent;transition:border-color .18s ease,box-shadow .18s ease}
.chat-scrolled .chat-appbar{border-color:#d9e2e5;box-shadow:0 3px 10px rgba(23,55,95,.04)}
.chat-product,.chat-app-actions{display:flex;align-items:center}.chat-product{gap:10px}.chat-product strong{font-size:20px;line-height:24px;font-weight:750;letter-spacing:-.025em}
.chat-sprite{display:block;flex:none;background-image:url("../assets/home-figma-reference.png");background-repeat:no-repeat;background-size:426px 837px}.chat-brand-logo{width:23px;height:22px;background-position:-39px -34px}.chat-user-avatar{width:36px;height:36px;border-radius:50%;background-position:-290px -29px;opacity:1;transition:width .18s ease,opacity .15s ease,margin .18s ease}.chat-scrolled .chat-user-avatar{width:0;opacity:0;margin-right:-9px}
.chat-app-actions{gap:9px}.chat-app-actions button{width:34px;height:38px;border:0;background:transparent;display:grid;place-items:center;color:#17375f}.chat-search-trigger{width:0!important;overflow:hidden;opacity:0;pointer-events:none;transform:scale(.85);transition:width .18s ease,opacity .18s ease,transform .18s ease}.chat-scrolled .chat-search-trigger{width:36px!important;opacity:1;pointer-events:auto;transform:scale(1)}.chat-hub .primary-avatar-button{transition:width .18s ease,opacity .15s ease}.chat-hub.chat-scrolled .primary-avatar-button{width:0;overflow:hidden;opacity:0;pointer-events:none}
.chat-scan-trigger svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chat-search-glyph{position:relative;width:18px;height:18px;border:2px solid currentColor;border-radius:50%;display:block}.chat-search-glyph:after{content:"";position:absolute;width:8px;height:2px;background:currentColor;right:-6px;bottom:-3px;transform:rotate(48deg);border-radius:2px}
.chat-more{display:flex!important;flex-direction:column;justify-content:center;gap:3px!important}.chat-more i{width:4px;height:4px;border-radius:50%;background:#17375f}.chat-overflow-menu{position:absolute;right:15px;top:60px;width:178px;padding:7px 0;background:#173c35;color:#fff;border:1px solid #466a63;border-radius:16px;box-shadow:0 16px 30px rgba(21,48,43,.23);overflow:hidden}.chat-overflow-menu[hidden]{display:none}.chat-overflow-menu button{width:100%;height:48px;border:0;border-bottom:1px solid rgba(255,255,255,.13);background:transparent;color:#fff;display:grid;grid-template-columns:31px 1fr;align-items:center;text-align:left;padding:0 15px}.chat-overflow-menu button:last-child{border-bottom:0}.chat-overflow-menu button span{font-size:21px;color:#baff50}.chat-overflow-menu button b{font-size:13px;font-weight:650}
.chat-scroll-content{box-sizing:border-box;min-height:calc(100% + 96px);padding:14px 20px 24px}
.chat-filter-row{position:relative;display:flex;align-items:center;gap:8px}.chat-filter-row .chat-filters{min-width:0;flex:1}.chat-filter-row>.chat-more{width:32px;height:32px;flex:none;border:1px solid #bfd0e0;border-radius:50%;background:#fff}.chat-filter-row>.chat-overflow-menu{top:42px;right:0}
.primary-chat-more{width:36px!important;height:40px!important;border:0!important;border-radius:0!important;background:transparent!important}.primary-chat-more i{width:4px;height:4px}.chat-header-overflow{z-index:24;right:20px;top:70px}
.chat-expanded-search{width:100%;height:50px;display:flex;align-items:center;gap:12px;padding:0 17px;border:1px solid #bfd0e0;border-radius:16px;background:#fff;color:#17375f;text-align:left;overflow:hidden;transition:height .18s ease,opacity .16s ease,margin .18s ease,border-width .18s ease}.chat-expanded-search .chat-search-glyph{width:15px;height:15px;border-width:1.8px}.chat-search-placeholder{color:#74879a;font-size:14px}.chat-scrolled .chat-expanded-search{height:0;margin:0;opacity:0;border-width:0}
.chat-filters{display:flex;align-items:center;gap:8px;margin:13px 0 14px;min-height:34px}.chat-filter{height:32px;padding:0 16px;border:1px solid #bfd0e0;border-radius:17px;background:#fff;color:#17375f;font-size:12px;font-weight:600;white-space:nowrap}.chat-filter.active{background:#d8ebff;border-color:#a7cae7;color:#286da5}
.chat-conversation-list,.chat-contact-list{background:transparent}.chat-conversation{width:100%;height:76px;border:0;border-bottom:1px solid #e0e6e8;background:transparent;display:grid;grid-template-columns:50px minmax(0,1fr) 44px;align-items:center;gap:11px;text-align:left;padding:0}.chat-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;font-weight:750;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}.chat-avatar.coral{background:linear-gradient(145deg,#f08b73,#a268d1)}.chat-avatar.blue{background:linear-gradient(145deg,#58a9e6,#506bd1)}.chat-avatar.aqua{background:linear-gradient(145deg,#3bb9b3,#3979be)}.chat-avatar.violet{background:linear-gradient(145deg,#825cf2,#e45f9b)}.chat-avatar.gold{background:linear-gradient(145deg,#e3b64b,#e77c63)}.chat-avatar.green{background:linear-gradient(145deg,#72bd83,#3c8c83)}.chat-avatar.navy{background:linear-gradient(145deg,#386ea5,#263f79)}.chat-avatar.peach{background:linear-gradient(145deg,#f1ae83,#d66873)}
.chat-row-copy{min-width:0;display:flex;flex-direction:column;gap:5px}.chat-row-copy b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}.chat-row-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#6c8195}.chat-conversation time{align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:7px;font-size:9px;color:#8797a5}.chat-conversation time em{width:18px;height:18px;border-radius:9px;background:#3d7fb5;color:#fff;text-align:center;line-height:18px;font-style:normal;font-size:9px}
.chat-contact-count{height:27px;margin:0;color:#6c8195;font-size:11px}.chat-contact-row{width:100%;height:83px;border:0;border-bottom:1px solid #e0e6e8;background:transparent;display:grid;grid-template-columns:48px minmax(0,1fr) 12px;align-items:center;gap:11px;text-align:left;padding:0;color:#17375f}.chat-contact-avatar{width:46px;height:46px;border-radius:15px;background:#d6ebff;display:grid;place-items:center;font-size:13px;font-weight:650}.chat-contact-avatar.merchant{background:#ffe6a1;font-size:21px}.chat-contact-row>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}.chat-contact-row b{font-size:14px}.chat-contact-row small,.chat-contact-row em{font-size:11px;color:#6c8195;font-style:normal}.chat-contact-row>i{font-style:normal;font-size:21px;color:#55728d}
.chat-local-note{margin:18px 0 0;text-align:center;color:#91a0ac;font-size:10px}
.screen:has(.chat-search-page){bottom:0;overflow:hidden;background:#fffefa}.chat-search-page{height:100%;background:#fffefa;color:#17375f}.chat-search-appbar{height:78px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #e0e6e8;background:#fffefa}.chat-search-back{width:40px;height:48px;border:0;background:transparent;color:#17375f;display:grid;place-items:center}.chat-search-back .icon{font-size:34px;line-height:1}.chat-search-field{height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid #bfd0e0;border-radius:17px;background:#fff}.chat-search-field .chat-search-glyph{width:16px;height:16px;border-width:1.8px}.chat-search-field input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#17375f;font-size:14px}.chat-search-field input::placeholder{color:#8292a1}.chat-search-results{height:calc(100% - 78px);overflow:auto;padding:12px 20px 30px}.chat-search-matches [data-chat-row]{display:none}.chat-search-page.has-query .chat-search-matches [data-chat-row]:not([hidden]){display:grid}.chat-search-page.has-query .chat-search-empty:not(.no-results){display:none}.chat-search-empty{min-height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#17375f}.chat-search-empty-icon{width:82px;height:82px;border-radius:28px;background:#e4f2ff;display:grid;place-items:center;margin-bottom:19px}.chat-search-empty-icon i{position:relative;width:28px;height:28px;border:3px solid #3478aa;border-radius:50%}.chat-search-empty-icon i:after{content:"";position:absolute;width:13px;height:3px;border-radius:2px;background:#3478aa;right:-10px;bottom:-5px;transform:rotate(47deg)}.chat-search-empty h2{margin:0;font-size:20px;letter-spacing:-.02em}.chat-search-empty p{margin:8px 0 0;color:#8292a1;font-size:11px}.chat-search-matches .chat-contact-count{display:none}
@media(max-width:760px){.chat-appbar{padding-left:20px;padding-right:20px}.chat-scroll-content{padding-left:20px;padding-right:20px}}
.chat-conversation,.chat-contact-row{border-bottom:0}

.chat-primary-header .primary-header-actions{gap:7px}.chat-header-contacts{width:70px!important;height:34px!important;padding:0 10px!important;border:1px solid #bfd8e9!important;border-radius:17px!important;background:linear-gradient(180deg,#f3f9fd,#e6f2fb)!important;color:#286da5!important;display:flex!important;align-items:center;justify-content:center;gap:7px;box-shadow:0 3px 10px rgba(47,117,169,.08)}.chat-header-contacts>b{font-size:10px;font-weight:750;white-space:nowrap}.chat-header-contacts>i{position:relative;width:18px;height:18px;flex:none}.chat-header-contacts>i:before,.chat-header-contacts>i:after{content:"";position:absolute;top:1px;width:6px;height:6px;border:1.5px solid currentColor;border-radius:50%}.chat-header-contacts>i:before{left:1px}.chat-header-contacts>i:after{right:1px}.chat-header-contacts>i span:before,.chat-header-contacts>i span:after{content:"";position:absolute;bottom:1px;width:9px;height:6px;border:1.5px solid currentColor;border-top-left-radius:7px;border-top-right-radius:7px;border-bottom:0}.chat-header-contacts>i span:before{left:0}.chat-header-contacts>i span:after{right:0}.chat-header-contacts.active{border-color:#82b5d8!important;background:#dceeff!important;box-shadow:inset 0 0 0 1px rgba(67,137,185,.12)}.chat-single-navigation{justify-content:flex-start}
.chat-scrolled .chat-search-trigger{order:-1}

/* 轻量双层导航方案。原始三胶囊样式保留在上方，移除 chat-refined 标记即可回退。 */
.chat-refined-navigation{margin:12px 0 15px}.chat-single-navigation{height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-type-tabs{display:flex;align-items:center;gap:8px}.chat-type-tabs button{height:32px;padding:0 16px;border:1px solid #d1dde4;border-radius:16px;background:#fff;color:#60768a;font-size:11px;font-weight:650}.chat-type-tabs button.active{border-color:#a9cbe6;background:#e4f1fc;color:#286da5}.chat-contacts-entry{height:34px;display:flex;align-items:center;gap:7px;padding:0 9px 0 10px;border:0;border-radius:10px;background:transparent;color:#286da5}.chat-contacts-entry b{font-size:12px;font-weight:700}.chat-contacts-entry em{font-size:18px;font-style:normal;color:#7897af}.chat-contacts-entry>i{position:relative;width:18px;height:18px;display:block}.chat-contacts-entry>i:before,.chat-contacts-entry>i:after{content:"";position:absolute;top:1px;width:6px;height:6px;border:1.5px solid currentColor;border-radius:50%}.chat-contacts-entry>i:before{left:1px}.chat-contacts-entry>i:after{right:1px}.chat-contacts-entry>i span:before,.chat-contacts-entry>i span:after{content:"";position:absolute;bottom:1px;width:9px;height:6px;border:1.5px solid currentColor;border-top-left-radius:7px;border-top-right-radius:7px;border-bottom:0}.chat-contacts-entry>i span:before{left:0}.chat-contacts-entry>i span:after{right:0}.chat-contacts-entry.active{background:#e4f1fc;box-shadow:inset 0 0 0 1px #a9cbe6}.chat-refined[data-chat-mode="contacts"] .chat-contact-count{padding-top:2px}

.conversation-screen{background:#fffdf7;color:#17375f}.conversation-header{height:72px;padding:8px 14px;border-bottom:1px solid #e1e8ea;background:rgba(255,253,247,.96);display:grid;grid-template-columns:38px minmax(0,1fr) 38px;align-items:center;position:sticky;top:0;z-index:8}.conversation-back,.conversation-more{height:38px;border:0;background:transparent;color:#17375f}.conversation-back .icon{font-size:32px}.conversation-more{font-size:15px;letter-spacing:2px}.conversation-person{min-width:0;border:0;background:transparent;display:flex;align-items:center;gap:10px;text-align:left}.conversation-person .chat-avatar{width:42px;height:42px;font-size:14px;flex:none}.conversation-person>span:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}.conversation-person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.conversation-person small{color:#397cac;font-size:9px;font-weight:650}.conversation-body{min-height:calc(100% - 132px);padding:18px 20px 80px;background:#f5f8f7;display:flex;flex-direction:column;gap:12px}.conversation-body .date-chip{margin:auto}.conversation-body .bubble{box-shadow:0 3px 12px rgba(23,55,95,.05)}.conversation-body .bubble.received{border:1px solid #e1e8ea}.conversation-body .bubble.sent{background:#397cac}.conversation-composer{position:absolute;z-index:9;left:0;right:0;bottom:0;height:64px;padding:9px 14px;border-top:1px solid #dce6e9;background:#fff;display:grid;grid-template-columns:40px 1fr 40px;gap:8px;align-items:center}.conversation-composer button{height:40px;border:0;border-radius:50%;background:#eef4f5;color:#397cac;font-size:22px}.conversation-composer input{min-width:0;height:42px;padding:0 15px;border:1px solid #dce6e9;border-radius:21px;background:#f7faf9;outline:0;font-size:11px}.conversation-composer .conversation-voice{font-size:18px}.contact-detail-screen{background:#fffdf7}.contact-detail-page{padding:24px 24px 34px;text-align:center}.contact-detail-avatar{width:82px;height:82px;margin:6px auto 14px;font-size:26px}.contact-detail-page h2{margin:0 0 18px;font-size:19px}.contact-identity-card{overflow:hidden;border:1px solid #dce6e9;border-radius:18px;background:#fff;text-align:left}.contact-identity-card>div{min-height:54px;padding:0 14px;border-bottom:1px solid #e4ebed;display:grid;grid-template-columns:58px 1fr auto;align-items:center}.contact-identity-card>div:last-child{border-bottom:0}.contact-identity-card span{color:#71847c;font-size:10px}.contact-identity-card strong{font-size:12px;text-align:right}.contact-identity-card em{margin-left:8px;padding:3px 6px;border-radius:7px;background:#e5f5e9;color:#328059;font-size:8px;font-style:normal}.contact-mns-row strong{color:#397cac}.contact-action-grid{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.contact-action-grid button{height:76px;border:1px solid #dce6e9;border-radius:17px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.contact-action-grid span{color:#397cac;font-size:18px}.contact-action-grid strong{font-size:10px}.group-conversation{gap:14px}.group-chat-note{margin:0;padding:10px 12px;border-radius:14px;background:#eef4f5;color:#71847c;font-size:9px;line-height:1.5;text-align:center}.group-payment-card{position:relative;margin-left:28px;padding:14px 16px;border:1px solid #dce6e9;border-radius:18px;background:#fff}.group-payment-card>header{display:flex;align-items:center;gap:8px;margin:0 0 11px -42px}.group-payment-card header .chat-avatar{width:36px;height:36px;font-size:11px}.group-payment-card header strong{font-size:10px}.group-payment-card>div{display:grid;grid-template-columns:1fr auto;gap:3px;text-align:left}.group-payment-card>div>span{color:#71847c;font-size:9px}.group-payment-card b{grid-row:2;font-size:22px}.group-payment-card b small{font-size:9px}.group-payment-card em{grid-column:2;grid-row:1/3;align-self:center;padding:5px 8px;border-radius:9px;background:#edf5fb;color:#397cac;font-size:9px;font-style:normal;font-weight:750}.group-payment-card time{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #e4ebed;color:#8797a5;font-size:8px;text-align:right}.group-payment-card.gold{border-left:4px solid #d8a541}.group-payment-card.blue{border-left:4px solid #4f8fbd}.group-payment-card.coral{border-left:4px solid #d96662}

/* Standalone contacts directory. */
.standalone-contacts-screen{background:#fffdf8;color:#17375f}.standalone-contacts-page{position:relative;height:100%;overflow:hidden;background:#fffdf8}.standalone-contacts-header{position:relative;z-index:4;height:68px;padding:8px 18px 5px;border-bottom:1px solid #e2e9e6;background:rgba(255,253,248,.96);display:grid;grid-template-columns:42px 1fr 42px;align-items:center}.standalone-contacts-header>button{width:38px;height:38px;padding:0;border:0;background:transparent;color:#17375f}.standalone-contacts-back .icon{font-size:31px}.standalone-contacts-header h1{margin:0;text-align:center;font-size:18px}.standalone-contacts-search{display:grid;place-items:center}.standalone-contacts-search .chat-search-glyph{display:block;width:18px;height:18px}.standalone-contacts-main{box-sizing:border-box;height:calc(100% - 68px);padding:17px 34px 34px 20px;overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth}.standalone-contact-owner{min-height:74px;padding:13px 15px;border-radius:20px;background:linear-gradient(145deg,#eaf5fb,#f4f9f7);display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center}.standalone-contact-owner-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,#4f91c4,#397bab);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;box-shadow:0 6px 16px rgba(57,124,172,.16)}.standalone-contact-owner>span:last-child{display:flex;flex-direction:column;gap:5px}.standalone-contact-owner strong{font-size:17px}.standalone-contact-owner small{color:#6f847c;font-size:10px}.standalone-contact-id-label{margin:15px 3px 8px;color:#748880;font-size:10px}.standalone-add-contact{width:100%;min-height:70px;padding:10px 12px;border:0;border-radius:18px;background:#f2f7f4;display:grid;grid-template-columns:44px 1fr 14px;gap:11px;align-items:center;color:#17375f;text-align:left}.standalone-add-contact>span:first-child{width:44px;height:44px;border-radius:15px;background:#e3f1d5;color:#5b963b;display:grid;place-items:center}.standalone-add-contact svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}.standalone-add-contact>span:nth-child(2){display:flex;flex-direction:column;gap:5px}.standalone-add-contact strong{font-size:13px}.standalone-add-contact small{color:#71847c;font-size:9px}.standalone-add-contact i,.standalone-contact-row>i{color:#7f958c;font-size:18px;font-style:normal}.standalone-contact-directory{margin-top:14px}.standalone-contact-directory>h2{height:25px;margin:0;padding:5px 3px 0;background:#fffdf8;color:#70857d;font-size:11px;position:sticky;top:0;z-index:2}.standalone-contact-row{width:100%;min-height:64px;padding:7px 2px;border:0;border-bottom:1px solid #e5ebe8;background:transparent;display:grid;grid-template-columns:46px 1fr 14px;gap:11px;align-items:center;color:#17375f;text-align:left}.standalone-contact-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800}.standalone-contact-avatar.sky{background:#5997c9}.standalone-contact-avatar.coral{background:#df8172}.standalone-contact-avatar.violet{background:#8a72d1}.standalone-contact-avatar.navy{background:#34546f}.standalone-contact-avatar.green{background:#59a87d}.standalone-contact-avatar.orange{background:#e49a67}.standalone-contact-avatar.aqua{background:#54aeb5}.standalone-contact-avatar.purple{background:#9c70cb}.standalone-contact-row strong{font-size:13px}.standalone-contact-alphabet{position:absolute;z-index:5;right:5px;top:164px;bottom:16px;width:24px;display:flex;flex-direction:column;align-items:center;justify-content:center}.standalone-contact-alphabet button{flex:1;min-height:12px;width:22px;padding:0;border:0;background:transparent;color:#71877e;font-size:7px;line-height:1;font-weight:650}.standalone-contact-alphabet button:active{color:#397eaa}.standalone-contact-search-results{padding-top:4px}.standalone-contact-search-results .standalone-contact-row[hidden]{display:none}