:root{--g:#14532D;--g2:#0B3B1F;--bg:#F4F6F3;--t:#1A1F1C;--m:#5B6660;--line:#E2E7E4;--mine:#D3ECD9;--red:#B91C1C}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--t);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit}
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:#fff}
.splash{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.logo{font-size:34px;font-weight:800;letter-spacing:-.5px}.logo span{color:var(--g)}

/* Auth */
.auth{flex:1;background:var(--bg);padding:56px 22px 28px;display:flex;flex-direction:column;gap:22px}
.auth .brand{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.badge{width:72px;height:72px;border-radius:22px;background:var(--g);display:flex;align-items:center;justify-content:center}
.sub{color:var(--m);font-size:15px}
.card{background:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:14px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:12px;padding:4px}
.tabs button{border:0;background:transparent;padding:10px;border-radius:9px;font-weight:600;color:var(--m)}
.tabs button.on{background:#fff;color:var(--g);box-shadow:0 1px 2px rgba(0,0,0,.08)}
label{font-size:13px;font-weight:600;color:#3D4842;display:block;margin-bottom:6px}
.in{width:100%;height:48px;border:1.5px solid #CBD3CE;border-radius:12px;padding:0 14px;font-size:16px;background:#fff;color:var(--t)}
.in:focus{outline:none;border-color:var(--g)}
.row{display:flex;gap:8px}
.row select.in{width:auto;flex:0 0 auto;padding:0 8px}
.pin{letter-spacing:10px;font-size:22px;text-align:center}
.hint{font-size:12px;color:var(--m);margin-top:6px}
.btn{height:50px;border:0;border-radius:14px;background:var(--g);color:#fff;font-size:16px;font-weight:700;width:100%}
.btn:disabled{opacity:.6}
.btn.ghost{background:#fff;color:var(--g);border:1.5px solid #CBD3CE}
.btn.danger{background:#fff;color:var(--red);border:1.5px solid #F1C5C5}
.err{color:var(--red);font-size:14px;min-height:18px}

/* Top bar */
.top{background:var(--g);color:#fff;padding:calc(env(safe-area-inset-top) + 12px) 10px 12px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:5}
.top h1{font-size:20px;margin:0;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top .meta{font-size:12px;opacity:.85}
.ib{width:44px;height:44px;border:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 auto}
.ib:active{background:rgba(255,255,255,.15)}
.ttl{flex:1;min-width:0;display:flex;flex-direction:column}
.ttl b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Lists */
.list{flex:1;overflow-y:auto}
.item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid #EEF1EF;background:#fff;width:100%;border-left:0;border-right:0;border-top:0;text-align:left;color:inherit}
.item:active{background:#F1F5F2}
.av{width:50px;height:50px;border-radius:50%;background:#DCEFE2;color:var(--g);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.av.grp{background:var(--g);color:#fff}
.it{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.it .l1{display:flex;justify-content:space-between;gap:8px}
.it .n{font-weight:650;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it .tm{font-size:12px;color:var(--m);flex:0 0 auto}
.it .p{font-size:14px;color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:10px;height:10px;border-radius:50%;background:var(--g);flex:0 0 auto;align-self:center}
.empty{padding:48px 24px;text-align:center;color:var(--m);display:flex;flex-direction:column;gap:14px;align-items:center}
.sec{padding:14px 16px 6px;font-size:13px;font-weight:700;color:var(--m);text-transform:uppercase;letter-spacing:.4px}

/* Bottom nav */
.nav{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#fff;padding-bottom:env(safe-area-inset-bottom);position:sticky;bottom:0}
.nav button{border:0;background:transparent;padding:8px 0 10px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--m);font-size:12px;min-height:56px}
.nav button.on{color:var(--g);font-weight:700}
.fab{position:fixed;right:max(18px,calc(50% - 262px));bottom:calc(76px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:18px;border:0;background:var(--g);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}

/* Chat */
.chat{flex:1;display:flex;flex-direction:column;background:#EEF1EC;min-height:0}
.msgs{flex:1;overflow-y:auto;padding:12px 12px 8px;display:flex;flex-direction:column;gap:6px}
.b{max-width:80%;padding:7px 11px 5px;border-radius:16px;background:#fff;align-self:flex-start;display:flex;flex-direction:column;gap:2px;word-wrap:break-word;overflow-wrap:anywhere}
.b.me{align-self:flex-end;background:var(--mine);border-bottom-right-radius:4px}
.b:not(.me){border-bottom-left-radius:4px}
.b .who{font-size:13px;font-weight:700}
.b .tx{font-size:15.5px;white-space:pre-wrap;line-height:1.35}
.b .tm{font-size:11px;color:var(--m);align-self:flex-end}
.day{align-self:center;font-size:12px;color:#3D4842;background:#DDE3DF;border-radius:999px;padding:3px 12px;margin:6px 0}
.older{align-self:center;border:0;background:#DDE3DF;border-radius:999px;padding:6px 14px;font-size:13px;color:#3D4842}
.composer{display:flex;gap:8px;align-items:flex-end;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#EEF1EC}
.composer textarea{flex:1;min-height:46px;max-height:120px;border:0;border-radius:23px;padding:12px 16px;font-size:16px;resize:none;background:#fff;color:var(--t);font-family:inherit}
.composer textarea:focus{outline:2px solid var(--g)}
.send{width:46px;height:46px;border-radius:50%;border:0;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* Forms page */
.page{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:14px;background:var(--bg);overflow-y:auto}
.check{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border-radius:12px}
.check input{width:22px;height:22px;accent-color:var(--g)}
.kv{background:#fff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kv .k{font-size:12px;color:var(--m);font-weight:600}
.kv .v{font-size:16px}
.tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:#DCEFE2;color:var(--g)}
.tag.red{background:#FDE2E2;color:var(--red)}
.mini{border:1.5px solid #CBD3CE;background:#fff;border-radius:10px;padding:6px 10px;font-size:13px;font-weight:600;color:var(--t)}
.mini.red{color:var(--red);border-color:#F1C5C5}

#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);background:#1A1F1C;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90%;text-align:center;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%)}
.offline{background:#FEF3C7;color:#78350F;font-size:13px;text-align:center;padding:6px}

/* v2: amafoto ya profile + emoji */
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;display:block}
.av.big{width:96px;height:96px;font-size:32px}
.composer .emo{width:46px;height:46px;color:var(--m);align-self:flex-end}
.composer .emo:active{background:#DDE3DF}
.ep{background:#fff;border-top:1px solid var(--line);display:flex;flex-direction:column;height:290px;padding-bottom:env(safe-area-inset-bottom)}
.ep[hidden]{display:none}
.ept{display:flex;overflow-x:auto;gap:2px;padding:6px 6px 0;border-bottom:1px solid var(--line);flex:0 0 auto}
.ept button{border:0;background:transparent;font-size:22px;min-width:44px;height:42px;border-radius:10px 10px 0 0;opacity:.55}
.ept button.on{opacity:1;background:#EEF5F0;box-shadow:inset 0 -3px 0 var(--g)}
.epg{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));align-content:start;padding:6px}
.epg button{border:0;background:transparent;font-size:30px;height:48px;border-radius:12px;line-height:1}
.epg button:active{background:#EEF1EC}
.epf{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-top:1px solid var(--line)}
.pop{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.45)}100%{transform:scale(1)}}
.b.big{background:transparent!important;padding:0 2px}
.b.big .tx{font-size:58px;line-height:1.15;letter-spacing:2px}
.b.big .tm{background:rgba(255,255,255,.85);border-radius:999px;padding:1px 6px}
.b.big .who{background:#fff;border-radius:999px;padding:1px 8px;align-self:flex-start}
.b.big.anim .tx{display:inline-block;animation:jump .9s cubic-bezier(.3,1.6,.5,1)}
.b.big .tx{transform-origin:50% 90%}
@keyframes jump{0%{transform:scale(.2) rotate(-12deg);opacity:0}40%{transform:scale(1.35) rotate(8deg);opacity:1}65%{transform:scale(.9) rotate(-4deg)}85%{transform:scale(1.08) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion:reduce){.b.big.anim .tx,.pop{animation:none}}

/* v2: ubutumwa bw'ijwi */
.composer{position:relative}
.send.recording{background:#B91C1C;transform:scale(1.25);transition:transform .15s}
.send{touch-action:none;user-select:none;-webkit-user-select:none}
.rec{position:absolute;left:8px;right:64px;top:8px;height:46px;background:#fff;border-radius:23px;display:flex;align-items:center;gap:10px;padding:0 16px;font-size:15px}
.rec[hidden]{display:none}
.rdot{width:10px;height:10px;border-radius:50%;background:#B91C1C;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.rhint{margin-left:auto;color:var(--m);font-size:13px}
.vn{display:flex;align-items:center;gap:10px;min-width:210px;padding:2px 0}
.vplay{width:40px;height:40px;border-radius:50%;border:0;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vbar{flex:1;height:4px;border-radius:2px;background:#CBD3CE;overflow:hidden}
.vfill{height:100%;width:0;background:var(--g);transition:width .2s linear}
.vmeta{font-size:12px;color:var(--m);white-space:nowrap}

/* v3: amahamagara */
.callui{position:fixed;inset:0;z-index:100;background:#0B3B1F;color:#fff;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 64px) 24px calc(env(safe-area-inset-bottom) + 48px);font-family:inherit}
.cu-top{display:flex;align-items:center;gap:6px;font-size:14px;opacity:.85}
.cu-av{width:128px!important;height:128px!important;font-size:44px!important;margin-top:48px;box-shadow:0 0 0 14px rgba(220,239,226,.12),0 0 0 30px rgba(220,239,226,.06)}
.cu-name{margin-top:36px;font-size:28px;font-weight:700;text-align:center}
.cu-st{margin-top:8px;font-size:18px;opacity:.9}
.cu-q{margin-top:16px;font-size:13px;background:rgba(255,255,255,.14);border-radius:999px;padding:6px 14px}
.cu-btns{margin-top:auto;display:flex;gap:56px;justify-content:center}
.cu-btns>div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px}
.cu-b{width:68px;height:68px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center}
.cu-b.on{background:#fff;color:#0B3B1F}
.cu-b.red{background:#C8102E}
.cu-b.green{background:#16A34A;animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)}100%{box-shadow:0 0 0 18px rgba(22,163,74,0)}}