:root{--ink:#09253d;--muted:#627890;--line:#d4e3e8;--paper:#fff;--canvas:#eef7f7;--teal:#08798a;--teal-dark:#045b6a;--teal-soft:#dff5f5;--cyan:#48cad1;--lime:#b5ef54;--shadow:0 18px 45px rgba(9,58,70,.14);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}button,input,textarea{font:inherit}button{color:inherit}.demo-bar{height:34px;display:flex;align-items:center;justify-content:center;gap:18px;background:#09253d;color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}.network-toggle{border:0;border-radius:999px;padding:5px 10px;background:#dff9ed;color:#08734f;font-size:11px;font-weight:900;cursor:pointer}.network-toggle span{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#10a66c}.network-toggle[aria-pressed=true]{background:#fff1d6;color:#9a5800}.network-toggle[aria-pressed=true] span{background:#e18500}body{margin:0;min-height:100vh;background:radial-gradient(circle at 25% 0,#d8f5eb 0,transparent 30%),linear-gradient(135deg,#eaf4f2,#f7fbff);padding-bottom:20px}.app-shell{position:relative;width:min(100%,430px);height:calc(100vh - 54px);min-height:650px;margin:10px auto 0;background:var(--canvas);border:1px solid #c7d9dc;border-radius:30px;box-shadow:var(--shadow);overflow:hidden}.app-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,var(--teal),#05a0ae)}.brand-mark svg{width:31px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.brand strong{display:block;font-size:18px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:1px}.header-actions{display:flex;align-items:center;gap:9px}.icon-text-btn{display:grid;place-items:center;border:0;background:transparent;color:var(--teal);cursor:pointer}.icon-text-btn span{font-size:21px;line-height:17px}.icon-text-btn b{font-size:9px}.avatar-button{width:38px;height:38px;border:2px solid #fff;border-radius:50%;background:#d9f7c4;box-shadow:0 0 0 1px #bdd3d6;font-weight:900;cursor:pointer}.view{height:calc(100% - 136px);overflow:auto}.chat-list-view{padding:15px 14px 120px}.greeting-card{display:flex;justify-content:space-between;align-items:center;padding:19px 20px;border-radius:24px;background:linear-gradient(120deg,#075d6b,#078b94);color:#fff;box-shadow:0 11px 28px rgba(7,105,118,.2)}.greeting-card small{font-size:13px}.greeting-card h1{font-size:29px;line-height:1;margin:5px 0 8px}.greeting-card p{margin:0;font-size:12px;opacity:.9}.secure-seal{width:56px;height:56px;border-radius:50%;display:grid;place-content:center;text-align:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35)}.secure-seal span{font-size:22px;font-weight:900}.secure-seal small{font-size:8px;font-weight:900;letter-spacing:.15em}.notification-card{width:100%;margin:13px 0;padding:13px;display:grid;grid-template-columns:42px 1fr auto;gap:11px;align-items:center;text-align:left;border:1px solid #9fe3e5;border-radius:18px;background:linear-gradient(100deg,#ccf5f1,#ecfff8);cursor:pointer}.notification-card.enabled{border-color:#b9ddb0;background:#edfae8}.notification-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--teal);color:#fff;font-size:24px}.notification-card strong,.notification-card small{display:block}.notification-card strong{font-size:13px}.notification-card small{font-size:10px;color:var(--muted);margin-top:3px}.notification-card .arrow{color:var(--teal);font-weight:900}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:17px 3px 10px}.section-heading h2{margin:0;font-size:20px}.section-heading span{display:block;margin-top:2px;color:var(--muted);font-size:10px}.compose-btn{width:38px;height:38px;border:0;border-radius:13px;background:var(--teal);color:#fff;font-size:23px;cursor:pointer;box-shadow:0 7px 16px rgba(8,121,138,.24)}.search-box{height:42px;display:flex;align-items:center;gap:8px;padding:0 13px;background:#fff;border:1px solid var(--line);border-radius:14px}.search-box span{color:var(--muted);font-size:21px}.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink)}.conversation-list{margin-top:9px;border-radius:19px;overflow:hidden;border:1px solid var(--line);background:#fff}.conversation{width:100%;display:grid;grid-template-columns:49px 1fr;gap:11px;align-items:center;padding:13px 12px;border:0;border-bottom:1px solid #e4edef;background:#fff;text-align:left;cursor:pointer}.conversation:last-child{border-bottom:0}.conversation:hover{background:#f5fbfb}.conversation-avatar{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#dff4f0;color:#087568;font-weight:900}.conversation-avatar.official{background:linear-gradient(145deg,#08798a,#05a0ad);color:#fff}.conversation-avatar.blue{background:#e2edff;color:#2462a8}.conversation-avatar.lime{background:#effbd7;color:#4e7900}.conversation-avatar>span{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:var(--lime);color:#234f00;font-size:9px}.conversation-main,.conversation-top,.conversation-preview{min-width:0}.conversation-top,.conversation-preview{display:flex;align-items:center;justify-content:space-between;gap:8px}.conversation-top strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-top time{color:var(--muted);font-size:9px}.conversation-preview{margin-top:5px}.conversation-preview span,.conversation-preview b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:10px;font-style:normal}.conversation-preview b{color:var(--ink)}.conversation-preview i{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--teal);color:#fff;font-size:9px;font-style:normal;font-weight:900}.privacy-note{display:flex;align-items:flex-start;justify-content:center;gap:7px;margin:18px 20px;color:var(--muted);font-size:9px;text-align:left}.privacy-note span{color:var(--teal);font-size:18px}.privacy-note p{margin:0}.privacy-note strong{color:#3a6370}.conversation-view{display:flex;flex-direction:column;height:calc(100% - 136px);padding:0;overflow:hidden;background-color:#eaf4f2;background-image:radial-gradient(rgba(8,121,138,.06) 1px,transparent 1px);background-size:18px 18px}.conversation-header{height:64px;display:grid;grid-template-columns:34px 40px 1fr 36px;gap:7px;align-items:center;padding:8px 11px;background:#fff;border-bottom:1px solid var(--line)}.conversation-header .conversation-avatar{width:39px;height:39px;border-radius:13px;font-size:12px}.back-btn,.more-btn{border:0;background:transparent;font-size:22px;cursor:pointer}.contact-title{border:0;background:transparent;text-align:left;padding:0;cursor:pointer}.contact-title strong,.contact-title small{display:block}.contact-title strong{font-size:13px}.contact-title small{font-size:9px;color:var(--muted);margin-top:3px}.contact-title i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#13a36c}.encryption-strip{padding:7px 10px;background:#fffbe6;color:#6f671f;text-align:center;font-size:8px;border-bottom:1px solid #ece5b2}.encryption-strip button{border:0;background:transparent;color:#08798a;font-size:inherit;font-weight:900;cursor:pointer}.message-stream{flex:1;padding:14px 13px 20px;overflow:auto}.date-pill{width:max-content;margin:0 auto 12px;padding:5px 10px;border-radius:10px;background:#fff;color:var(--muted);font-size:8px;box-shadow:0 2px 8px rgba(10,46,55,.08)}.system-message{max-width:85%;margin:0 auto 13px;padding:8px 10px;border-radius:10px;background:#dff7f4;color:#477078;text-align:center;font-size:8px}.message{width:max-content;max-width:82%;margin:5px 0;padding:9px 10px 5px;border-radius:15px;box-shadow:0 2px 6px rgba(15,60,68,.08)}.message p{margin:0;font-size:12px;line-height:1.4}.message time{display:block;margin-top:4px;color:#71858d;font-size:7px;text-align:right}.message.incoming{border-top-left-radius:4px;background:#fff}.message.outgoing{margin-left:auto;border-top-right-radius:4px;background:#cdf4eb}.ticks{font-weight:900}.ticks.read{color:#058ba0}.offline-notice{display:flex;align-items:center;gap:9px;padding:9px 14px;background:#fff2d7;border-top:1px solid #eacb8d}.offline-notice span{font-size:22px;color:#b36c00}.offline-notice strong,.offline-notice small{display:block}.offline-notice strong{font-size:10px}.offline-notice small{font-size:8px;color:#8c6a2e}.composer{display:grid;grid-template-columns:36px 1fr 42px;gap:7px;align-items:end;padding:9px 10px calc(9px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}.composer label{display:flex;min-height:38px;padding:8px 11px;border-radius:18px;background:#f1f6f6}.composer textarea{width:100%;max-height:90px;resize:none;border:0;outline:0;background:transparent;font-size:12px}.attach-btn,.send-btn{border:0;cursor:pointer}.attach-btn{height:38px;border-radius:50%;background:#e8f4f3;color:var(--teal);font-size:25px}.send-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff}.send-btn svg{width:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.bottom-nav{position:absolute;z-index:3;left:0;right:0;bottom:0;height:64px;display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom);background:rgba(255,255,255,.97);border-top:1px solid var(--line)}.conversation-view:not([hidden])~.bottom-nav{display:none}.bottom-nav button{position:relative;border:0;background:transparent;color:#6a7d91;cursor:pointer}.bottom-nav span,.bottom-nav b{display:block}.bottom-nav span{font-size:18px}.bottom-nav b{font-size:8px;margin-top:3px}.bottom-nav .active{color:var(--teal)}.bottom-nav i{position:absolute;top:6px;left:55%;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#d63838;color:#fff;font-size:8px;font-style:normal}.sheet-dialog{width:min(calc(100% - 26px),400px);padding:0;border:0;border-radius:26px;color:var(--ink);box-shadow:0 30px 80px rgba(0,31,42,.28)}.sheet-dialog::backdrop{background:rgba(2,27,37,.58);backdrop-filter:blur(3px)}.sheet-dialog form{position:relative;padding:25px 22px 20px;text-align:center}.dialog-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#edf4f4;font-size:22px;cursor:pointer}.dialog-shield{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 11px;border-radius:21px;background:linear-gradient(145deg,var(--teal),#06a7b2);color:#fff;font-size:35px}.eyebrow{margin:0;color:var(--teal);font-size:8px;font-weight:900;letter-spacing:.17em}.sheet-dialog h2{margin:5px 0 9px;font-size:23px}.sheet-dialog>form>p:not(.eyebrow){margin:0;color:var(--muted);font-size:11px;line-height:1.5}.security-list{margin:17px 0;text-align:left}.security-list>div{display:flex;gap:10px;margin:10px 0}.security-list>div>span{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#def6e8;color:#087d53;font-weight:900}.security-list p,.recovery-card p{margin:0}.security-list strong,.security-list small,.recovery-card strong,.recovery-card small{display:block}.security-list strong,.recovery-card strong{font-size:11px}.security-list small,.recovery-card small{margin-top:2px;color:var(--muted);font-size:9px;line-height:1.35}.recovery-card{display:flex;gap:10px;padding:13px;border:1px solid #b9dcdf;border-radius:15px;background:#effafa;text-align:left}.recovery-card>span{color:var(--teal);font-size:25px}.primary-action{width:100%;margin-top:15px;padding:12px;border:0;border-radius:13px;background:var(--teal);color:#fff;font-size:11px;font-weight:900;cursor:pointer}.toast{position:fixed;z-index:20;left:50%;bottom:28px;transform:translate(-50%,18px);max-width:calc(100% - 30px);padding:10px 15px;border-radius:12px;background:#09253d;color:#fff;font-size:11px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}@media(max-width:470px){body{padding:0;background:var(--canvas)}.demo-bar{height:30px}.app-shell{width:100%;height:calc(100vh - 30px);min-height:580px;margin:0;border:0;border-radius:0;box-shadow:none}}@media(min-width:760px){.app-shell{width:430px;height:min(860px,calc(100vh - 54px))}}