:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#172c28;background:#edf1ee;font-size:13px;--green:#087b65;--line:#e4ebe7;--app-height:100dvh}*{box-sizing:border-box}body{margin:0;height:var(--app-height);max-width:760px;margin-inline:auto;display:flex;flex-direction:column;background:#fff;overflow:hidden}button,input,textarea,select{font:inherit}button,summary,select{cursor:pointer}button{border:0;border-radius:18px;background:#eef5f0;color:#246253;padding:7px 12px;min-height:40px}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--green);color:white;font-weight:650}button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:2px}h1,h2,h3,p{margin:0}.icon-button{font-size:30px;line-height:1;background:transparent;min-width:42px;padding:3px}.app-header{flex:none;padding:calc(5px + env(safe-area-inset-top)) 12px 5px;background:#fff;border-bottom:1px solid var(--line);z-index:5}.top-row{display:flex;align-items:center;gap:8px;min-height:38px}h1{font-size:19px;letter-spacing:-.5px;color:var(--green);flex:1}.account-picker{display:block}.account-picker select{max-width:145px;padding:7px 8px;border:1px solid #dce6e0;border-radius:18px;background:#f3f8f4;color:var(--green);font-weight:650;min-height:36px}.menu{position:relative}.menu summary{list-style:none;font-size:25px;min-width:36px;text-align:center}.menu summary::-webkit-details-marker{display:none}.menu-panel{position:absolute;right:0;top:36px;width:215px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 26px #19352d26;padding:12px}.menu-panel p{margin-bottom:8px;font-size:12px}.menu-panel button{width:100%}#status{font-size:11px;color:#5b7c6e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:19px}#status.offline{color:#9d5c11}main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}#work{flex:1;min-height:0;display:flex;flex-direction:column}#list-view{flex:1;min-height:0;display:flex;flex-direction:column}.list-toolbar{display:flex;gap:6px;padding:10px 12px 6px;align-items:center}.search{flex:1}.search input{border:0;background:#f0f3f1;border-radius:24px;padding:10px 15px;width:100%;font-size:16px;outline-color:var(--green)}.tabs{display:flex;gap:7px;padding:0 12px 4px}.tabs button{font-size:12px;min-height:32px;padding:5px 15px;background:#f2f4f3;color:#63726c}.tabs .active{background:#d9f5df;color:#086b45}.muted{font-size:11px;color:#6e7f77;line-height:1.4}#count{padding:2px 15px 5px;font-size:10px}#contacts{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.contact{width:100%;display:flex;align-items:center;gap:11px;text-align:left;border-radius:0;padding:10px 14px;background:white;border-bottom:1px solid #f1f4f2}.avatar{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#dfece4;color:#26775c;font-size:16px;font-weight:650}.contact-body{flex:1;min-width:0}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.contact strong{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600}.contact time{font-size:10px;color:#7b887f;white-space:nowrap}.contact p{margin-top:4px;font-size:12px;color:#738076;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.contact-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}.badge{background:#20a769;color:white;border-radius:12px;min-width:18px;text-align:center;padding:1px 5px;font-size:10px;flex:none}.list-hint{padding:4px 14px;font-size:10px}.bottom-nav{display:flex;flex:none;border-top:1px solid var(--line);padding:5px 10px calc(5px + env(safe-area-inset-bottom));gap:10px}.bottom-nav button{flex:1;background:transparent;min-height:42px}.bottom-nav .active{background:#e4f5e9;color:#075c3f}#empty{padding:30px;text-align:center;color:#70847a}#chat-view{flex:1;min-height:0;display:flex;flex-direction:column;background:#eeeae2}.chat-heading{flex:none;display:flex;align-items:center;gap:5px;background:#fff;padding:5px 7px;border-bottom:1px solid var(--line)}.chat-heading .avatar{width:32px;height:32px;font-size:13px}.chat-title{flex:1;min-width:0;padding-left:4px}.chat-title h2{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-title small{font-size:10px;color:#708277;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#history{flex:1;min-height:60px;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px;scrollbar-width:thin}.bubble{width:fit-content;max-width:88%;padding:7px 9px;background:white;border-radius:3px 11px 11px;margin:5px 26px 5px 0;box-shadow:0 1px 1px #25352913}.bubble.outgoing{background:#d9fdd3;margin-left:auto;margin-right:0;border-radius:11px 3px 11px 11px}.bubble small{font-size:10px;color:#6b7e70}.bubble p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;margin-top:3px;font-size:13px}.composer{flex:none;max-height:65%;overflow-y:auto;padding:5px 8px calc(6px + env(safe-area-inset-bottom));background:#f7f9f7;border-top:1px solid #d9e3dc}.draft-heading{margin:4px 3px;font-size:10px;color:#667b6c}.draft-heading label{font-weight:600}textarea{display:block;width:100%;border:1px solid #dce6de;border-radius:17px;padding:9px 12px;background:white;color:#172c28;font-size:16px;line-height:1.4;min-height:42px;max-height:24dvh;resize:none;outline-color:var(--green);overflow-y:auto}.actions{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}.actions button{flex:1;white-space:nowrap;font-size:11px;min-height:36px;padding:6px 8px}.composer-note{display:none}#typing-state{display:block;font-size:10px;color:#829185;min-height:13px;margin:3px 4px 0}#chinese-guard{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:10px;color:#26724e;background:#e9f5eb;border-radius:8px;padding:0 7px}#chinese-guard button{font-size:10px;padding:3px 6px;min-height:28px;background:transparent}#chinese-guard.warning{background:#fff0d5;color:#935408;border:1px solid #d89a40}.translation-details{margin:3px 4px;font-size:10px;color:#6b8070}.translation-details summary{padding:2px 0}.translation-details p{margin:4px 0}#translation-settings{font-size:10px;overflow-wrap:anywhere;line-height:1.4}.translation-preview{background:#e7f3ff;border:1px solid #ccdeec;border-radius:10px;padding:7px 9px;margin:5px 0;max-height:20dvh;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere}.translation-preview strong{font-size:10px;color:#517186}.translation-preview p{font-size:13px;line-height:1.45;margin-top:4px}.message-translation{margin-top:6px;padding-top:5px;border-top:1px dashed #c7d7c8;overflow-wrap:anywhere}.message-translation p{font-size:12px;color:#51715b}.message-translation button{font-size:10px;min-height:28px;padding:4px 8px;background:#f0f7ee}.translation-error,.media-error{display:block;color:#a44916;font-size:11px}.attachment{border-top:1px solid #d7e4d7;margin-top:5px;padding-top:5px;font-size:12px;overflow-wrap:anywhere}.attachment img,.attachment video{display:block;max-width:100%;max-height:360px;margin-top:5px;border-radius:6px}.attachment audio{max-width:100%;display:block;margin-top:5px}.attachment a{display:inline-block;margin:6px 0;color:#087b65}.attachment button{margin-top:5px}.record{background:#f4f8f5;border:1px solid var(--line);padding:10px;border-radius:10px;margin:8px 0;overflow-wrap:anywhere}.record small{display:block;color:#70847a;margin:5px 0}.record button{margin-top:6px}#records-view{overflow-y:auto;padding:8px 12px;flex:1;min-height:0}.records-heading{display:flex;align-items:center;gap:5px}.records-heading h2{font-size:17px}#notice,#receipt{white-space:pre-wrap;padding:8px 10px;background:#fff0d7;border-bottom:1px solid #edddba;font-size:12px;line-height:1.4;max-height:18dvh;overflow:auto;flex:none}#login{padding:20px}#login p{margin:12px 0;color:#70847a}#login a{display:block;padding:12px;background:var(--green);color:white;border-radius:12px;text-align:center;text-decoration:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(min-width:650px){body{border-inline:1px solid #d6e3d9}.bubble{max-width:75%}}@media(max-height:500px){.app-header{padding-top:2px;padding-bottom:2px}#status{display:none}.translation-details,#typing-state{display:none}.composer{max-height:68%}.chat-heading{padding:2px 5px}.draft-heading{margin:2px}.translation-preview{max-height:18dvh}}
:root{--app-height:100dvh}
.composer{display:flex;flex-direction:column}.composer>*{flex-shrink:0}.composer textarea,.composer .translation-preview{flex-shrink:1}.composer textarea{min-height:42px}.translation-preview{min-height:42px;max-height:calc(var(--app-height) * .2)}
/* Account-link QR is ephemeral; compact on narrow phones. */
#account-dialog{border:1px solid #d7e4df;border-radius:16px;padding:18px;max-width:360px;width:calc(100% - 48px);max-height:85dvh;overflow:auto}#account-dialog::backdrop{background:#0006}#account-qr{display:block;width:240px;max-width:100%;height:auto;margin:12px auto}#account-qr[hidden]{display:none}#add-account{font-size:24px;min-width:34px;padding:2px 6px}#account-dialog h2{font-size:18px;margin-top:0}#account-dialog .actions{flex-wrap:wrap}
/* compact2: WhatsApp-like density and server-sourced acknowledgement ticks */
.app-header{padding:calc(2px + env(safe-area-inset-top)) 7px 2px}.top-row{min-height:32px;justify-content:flex-end;gap:4px}.account-picker{margin-left:auto}.account-picker select{min-height:30px;max-width:132px;padding:3px 8px;font-size:12px}.menu summary{font-size:21px;min-width:30px}.menu-panel{top:31px;width:230px;padding:9px}.menu-panel>button{min-height:32px;margin-top:5px}.menu-panel #chinese-guard{margin:6px 0}.menu-panel .translation-details{margin:5px 0}#status{display:none!important}#add-account{min-height:30px;font-size:20px}.list-toolbar{padding:5px 8px 3px}.search input{padding:7px 11px;font-size:13px}.tabs{padding:0 8px 2px}.tabs button{min-height:27px;padding:3px 12px;font-size:11px}#count{padding:1px 10px 2px}.contact{gap:8px;padding:6px 9px;min-height:51px}.contact .avatar,.chat-heading .avatar{width:34px;height:34px;font-size:13px}.contact strong{font-size:12px}.contact p{font-size:10.5px}.contact time{font-size:9px}.contact-bottom{gap:4px}.badge{font-size:9px;min-width:16px;padding:0 4px}.chat-heading{min-height:43px;padding:3px 6px;gap:4px}.contact-summary{min-width:0;flex:1;display:flex;align-items:center;gap:7px;text-align:left;background:transparent;padding:0;border-radius:8px;min-height:36px}.contact-summary .chat-title{min-width:0;display:block}.contact-summary #contact-name{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-summary #contact-id{display:block;font-size:9px;color:#75847c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-heading .icon-button,.chat-heading>#history-refresh{min-height:32px;min-width:32px;padding:2px 6px}.bubble{font-size:12px;padding:5px 7px}.bubble small{font-size:8.5px}.ack{display:inline-block;color:#7b8a83;font-weight:700;font-size:11px;line-height:1;letter-spacing:-2px;padding-right:2px}.ack.read{color:#1c8fdd}.ack.pending{font-size:12px;letter-spacing:0}.ack.failed{color:#c94b40;letter-spacing:0}.contact-bottom>.ack{flex:none}.composer{padding:4px 7px calc(4px + env(safe-area-inset-bottom))}.draft-heading{margin:0 2px 2px;font-size:10px}#draft{min-height:42px;padding:6px 8px;font-size:12px}.composer-actions{display:grid;grid-template-columns:auto 1fr 1.2fr;gap:5px}.composer-actions button{min-height:34px;padding:5px 7px}.original-send{font-size:10px;background:#f0f3f1;color:#5d6e66}.translate-action{font-weight:700;border:1px solid #70bba3;background:#e7f5ee;color:#087b65}#send-translated{font-weight:750}#typing-state{font-size:9px;margin:1px 2px}.translation-preview{max-height:15dvh;padding:5px 7px;margin:3px 0}.translation-preview p{font-size:11px}#contact-dialog{border:1px solid #d7e4df;border-radius:14px;padding:14px;width:calc(100% - 36px);max-width:380px}#contact-dialog::backdrop{background:#0006}#contact-dialog h2{font-size:16px;margin-bottom:8px}.detail-row{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;border-bottom:1px solid #edf1ef;font-size:12px}.detail-row span{color:#708078}.detail-row strong{text-align:right;overflow-wrap:anywhere}#contact-dialog .actions{margin-top:10px}
/* NBDex shares the compact mobile shell but never gains a WhatsApp send path. */
#nbdex-view{padding:.55rem;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}#nbdex-view .records-heading{position:sticky;top:0;background:#fff;z-index:2;padding:.25rem 0}.nbdex-chat-heading{display:flex;align-items:center;gap:.55rem;padding:.35rem 0}.nbdex-chat-heading strong{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nbdex-thread{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.55rem .65rem}.nbdex-thread small{font-size:.7rem;color:#6b7c76}#nbdex-history{display:flex;flex-direction:column;gap:.45rem;padding:.4rem 0 9rem}#nbdex-history .bubble{max-width:92%;padding:.55rem .65rem}#nbdex-history .bubble p{white-space:pre-wrap;margin:.2rem 0;font-size:.83rem}#nbdex-history .bubble button{font-size:.7rem;padding:.25rem .45rem}.nbdex-composer{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #dce7e2;padding:.5rem max(.6rem,env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left));z-index:4}.nbdex-composer textarea{width:100%;max-height:24vh;resize:none}.nbdex-composer .actions{justify-content:flex-end;margin-top:.35rem}.nbdex-composer small{font-size:.68rem;color:#6b7c76}
.bubble.system-message{max-width:90%;margin:6px auto;background:#f0f3f1;border:1px solid #dce5df;border-radius:9px;box-shadow:none;text-align:center;color:#52645b}.bubble.system-message small{color:#708078}.bubble.system-message p{font-size:11px}
.emoji-bar{display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;flex:none;margin:2px 0}.emoji-bar button{min-height:29px;min-width:31px;background:transparent;padding:2px;font-size:17px}.emoji-bar::-webkit-scrollbar{display:none}.quote-preview{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:5px 8px;margin:2px 0;border-left:3px solid #0a8d73;background:#e9f5ef;border-radius:5px;font-size:11px}.quote-preview span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quote-preview button{min-height:22px;padding:0 6px}.message-actions{display:none;gap:3px;flex-wrap:wrap;margin-top:5px;border-top:1px solid #dfe8e1;padding-top:4px}.message-actions.open{display:flex}.message-actions button{min-height:27px;padding:2px 6px;font-size:12px}.message-actions button:first-child{font-size:10px}.bubble:not(.system-message){cursor:pointer}
.account-alert{padding:7px 10px;background:#fff4d8;color:#825313;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:8px}.account-alert button{background:#f8e4af;color:#70460a;min-height:27px;padding:3px 8px;font-size:10px;flex:none}
.compose-state{background:#fff4d8;color:#80551c;border:1px solid #ead7ac;border-radius:8px;padding:5px 8px;font-size:11px;line-height:1.35;margin:2px 0 5px}