/*
 * Mockup Contact Us My ALVA. Builds on the charging app styles
 * (static/charging/charging.css: ALVA DS v2 tokens, phone frame, home) and the
 * IoT prototype's shared bits (static/iot-charging/iot.css: desktop frame fit,
 * side panel). Classes only: CESA's CSP forbids style="" attributes.
 */
.bar>div.w100{width:100%}
.hint-menu{display:flex;align-items:center;gap:8px;margin:0 16px;padding:10px 12px;border-radius:8px;border:1px dashed rgba(51,255,201,.45);color:#EDEDED}

/* ---------- Menu ---------- */
.mprof{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(120deg,#12664D 0%,#0E3F31 70%,#1F2120 100%)}
.ava.lg{width:56px;height:56px;font-size:18px}
.invite{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;width:74px;flex:none}
.invite-b{width:44px;height:30px;border-radius:6px;background:var(--green);display:flex;align-items:center;justify-content:center}
.mlist{padding:8px 16px}
.mitem{display:flex;align-items:center;gap:16px;width:100%;padding:11px 8px;color:#fff}
.beta-t{color:#8097FF;font-size:12px;font-weight:700;letter-spacing:.5px}
.msep{height:1px;background:rgba(137,138,141,.45);margin:8px 0}
.mfoot{text-align:center;padding:16px 16px calc(28px + env(safe-area-inset-bottom));color:#EDEDED}
.logout{color:#FF4B58;margin-top:18px;letter-spacing:1px}
.ucount{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--err1);color:#fff;font-size:12px;font-weight:700;font-stretch:100%}

/* ---------- Contact Us ---------- */
.clist2{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.ccard{display:flex;align-items:flex-start;gap:14px;width:100%;background:#fff;border-radius:6px;padding:16px;box-shadow:var(--sh200);color:var(--tp)}
.ccard .m3{color:var(--tp);line-height:20px}
.csep{height:1px;background:var(--bddis);margin:24px 0}

/* ---------- Customer Care home ---------- */
.cprof{display:flex;align-items:center;gap:12px;padding:12px 16px 14px;background:#262827;border-bottom:1px solid rgba(137,138,141,.3)}
.chip.wa{font-size:11px;height:22px}
.pline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.verif{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:500;color:var(--green)}
.cwarn{display:flex;gap:8px;align-items:flex-start;margin:10px 16px 0;padding:10px 12px;border-radius:8px;background:var(--warn2);color:var(--warnink)}
.ttabs{display:flex;margin:12px 16px 4px;background:#2A2C2B;border-radius:10px;padding:4px}
.ttab{flex:1;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;color:#C9CACA;font-size:14px;font-weight:700}
.ttab.on{background:var(--green);color:var(--tp)}
.tcount{min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:rgba(0,0,0,.18);font-size:12px;display:inline-flex;align-items:center;justify-content:center;font-stretch:100%}
.tlist{padding:8px 0 4px}
.tcard{display:block;width:calc(100% - 32px);margin:0 16px 8px;padding:12px 14px;border-radius:8px;border:1px solid rgba(137,138,141,.45);color:#fff;text-align:left}
.tcard.un{background:var(--battrack);border-color:var(--battrack)}
.tmeta{display:flex;align-items:center;gap:8px}
.tmeta .when{margin-left:auto;color:#C9CACA}
.vchip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:11px;background:rgba(51,255,201,.14);color:var(--green);font-size:11px;font-weight:700;letter-spacing:.3px;font-stretch:100%;white-space:nowrap}
.vchip.former{background:rgba(158,159,159,.18);color:#C9CACA}
.tsub{margin-top:10px;color:#fff}
.tlast{margin-top:4px;color:#C9CACA;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tfoot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.tfoot .ucount{margin-left:auto}
.tempty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 16px;text-align:center;color:#EDEDED}
.more{display:block;width:calc(100% - 32px);margin:4px 16px 0;height:44px;border-radius:8px;border:1px dashed #898A8D;color:#fff;font-size:14px;font-weight:700;text-align:center}
.newbar{margin-top:auto;position:sticky;bottom:0;z-index:5;padding:12px 16px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(31,33,32,0) 0%,#1F2120 30%)}

/* ---------- Chat baru ---------- */
.vlist{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.vcard{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--bddis);border-radius:12px;text-align:left}
.vcard.sel{border:1.5px solid var(--bdsucc);background:var(--succ2)}
.vimg{width:76px;height:52px;border-radius:8px;background:var(--dark);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.vimg img{width:76px;height:48px;object-fit:contain}
.vimg.sm{width:44px;height:32px;border-radius:6px}
.vimg.sm img{width:44px;height:30px}
.chip.sm{height:20px;font-size:11px;padding:0 7px}

/* ---------- Chat ---------- */
.chatscr{background:#141515}
.chathead{position:sticky;top:0;z-index:5}
.chathead .nav{gap:10px}
.vpin{display:flex;align-items:center;gap:8px;margin:0 12px 10px;padding:8px 12px;border-radius:8px;background:rgba(51,255,201,.1);border:1px solid rgba(51,255,201,.35);color:#EDEDED}
.chatlog{flex:1;padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px}
.daysep{display:flex;justify-content:center;margin:6px 0}
.daysep span,.sysmsg span{font-size:11px;color:#C9CACA;background:#2A2C2B;border-radius:10px;padding:4px 10px;text-align:center}
.sysmsg{display:flex;justify-content:center}
.bub{max-width:82%;padding:8px 12px 6px;border-radius:14px;font-size:14px;line-height:20px}
.bub.them{align-self:flex-start;background:#2A2C2B;color:#fff;border-bottom-left-radius:4px}
.bub.mine{align-self:flex-end;background:#0B5C45;color:#fff;border-bottom-right-radius:4px}
.bname{font-size:11px;font-weight:700;color:var(--green);margin-bottom:2px}
.btime{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:10px;color:#9E9F9F;margin-top:2px}
.donebar{display:flex;gap:8px;align-items:flex-start;margin:0 12px 8px;padding:10px 12px;border-radius:8px;background:var(--succ1);color:var(--tbrand2)}
.donebar.warn{background:var(--warn2);color:var(--warnink)}
.composer{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 12px calc(14px + env(safe-area-inset-bottom));background:#1F2120;border-top:1px solid rgba(137,138,141,.3)}
.composer input{flex:1;height:42px;border-radius:21px;border:1px solid #3A3C3B;background:#2A2C2B;color:#fff;padding:0 16px;font:inherit;font-size:14px;outline:0}
.composer input:disabled{opacity:.5}
.sendb{width:42px;height:42px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.sendb:disabled{opacity:.4}

/* ---------- Catatan Mockup panel ---------- */
.nsteps{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:17px;color:#EDEDED}
.njwt{margin:0;padding:10px;border-radius:8px;background:#0F1010;color:var(--green);font-size:11px;line-height:16px;font-family:ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-all}
.flagid{display:inline-block;width:16px;height:11px;vertical-align:-1px;margin-left:4px;border-radius:2px;background:linear-gradient(180deg,#E70011 50%,#fff 50%);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.closedbar{position:sticky;bottom:0;z-index:5;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:#1F2120;border-top:1px solid rgba(137,138,141,.3)}