/* KM3 2 Nov (Abdi): Komunikasi › WhatsApp Office; token --ui-* seperti Phonebook/Daftar Grup, penampil chat memakai wa-archive.css. */
.wao-halaman{min-width:0;max-width:100%}
.wao-tab{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px;border-bottom:1px solid var(--ui-line)}
.ui-shell .wao-tab-link{min-height:0;padding:8px 14px;border:0;border-radius:8px 8px 0 0;background:transparent;color:var(--ui-muted-text);font-weight:400}
.ui-shell .wao-tab-link.wao-aktif{background:var(--ui-info-bg);color:var(--ui-info);font-weight:600}
.wao-pita{margin:6px 0 12px;padding:8px 12px;border:1px solid var(--ui-warn-line);border-radius:8px;background:var(--ui-warn-bg);color:var(--ui-warn)}
.wao-pita[hidden]{display:none}
.wao-kartu{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.wao-akun h2,.wao-bagian h2{margin:0;font-size:16px}
.wao-akun-kepala{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.wao-kode-kecil{margin:2px 0 10px;color:var(--ui-muted-text);overflow-wrap:anywhere}
.wao-baris{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-top:1px solid var(--ui-line)}
.wao-label{color:var(--ui-muted-text);flex:none}.wao-isi{text-align:right;overflow-wrap:anywhere}
.wao-bagian{margin:0 0 14px}.wao-catatan{margin:6px 0 0;color:var(--ui-muted-text)}
.wao-galat{padding:12px;border:1px solid var(--ui-danger-line);border-radius:8px;background:var(--ui-danger-bg);color:var(--ui-danger)}
.wao-galat p{margin:0 0 8px}
.wao-dialog{max-width:min(92vw,420px);width:100%;border:1px solid var(--ui-line);border-radius:12px;padding:16px;background:var(--ui-panel);color:inherit}
.wao-dialog::backdrop{background:#0006}
.wao-kode-area{display:grid;place-items:center;min-height:240px;margin:10px 0}
.wao-kode-area img{max-width:100%;height:auto}.wao-basi{opacity:.35}
.wao-kode{font-size:30px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.wao-hitung{margin:0 0 8px;text-align:center;color:var(--ui-muted-text)}
.wao-dialog .wao-galat{margin:8px 0}
/* Kotak masuk: tambahan di penampil bersama. */
.wa-head-extra{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.wa-web .wao-chip{padding:4px 10px;border-radius:14px;background:#0B141A0D;color:#008069;font-size:12.5px;text-decoration:none;white-space:nowrap}
.wao-pegang{flex:none;font-size:12px;color:#667781}.wao-dipegang{color:#008069;font-weight:600}
.wa-web .wa-send-draf{width:auto;height:auto;padding:8px 14px;border-radius:18px;font-size:13px}
.wa-web .wa-compose-warn{margin:0 0 6px;padding:6px 12px;border:1px solid var(--ui-warn-line);border-radius:8px;background:var(--ui-warn-bg);color:var(--ui-warn);text-align:left}
@media(max-width:760px){
 .wao-baris{flex-wrap:wrap}
 .wa-thread-head{flex-wrap:wrap;padding-block:6px}
 .wa-head-extra{flex:1 1 100%;order:5;justify-content:flex-start}
}
.wao-baris .wao-isi{margin-left:auto}.wao-bagian .actions{margin-top:12px}
.ui-shell a.wao-tombol{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-panel);color:inherit;font-weight:600;text-decoration:none}
/* WC3 9 Nov (contoh v2): kartu flex kolom, deret tombol koneksi rata di dasar dan sejajar antarkartu; akun putus berbingkai merah.
   Pita merah akun putus juga dipakai Beranda (berkas ini dimuat di semua halaman). */
.wao-akun{display:flex;flex-direction:column;min-width:0}
.wao-akun.wao-putus{border-color:var(--ui-danger-line);box-shadow:inset 0 0 0 1px var(--ui-danger-line)}
.wao-akun-judul{min-width:0;flex:1 1 auto}
.wao-akun-kanan{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
/* Lencana di shell = titik + teks (ui-rangka.css): putus memakai kelas bersama `off` (titik merah) + teks merah; tersambung hijau. */
.ui-shell .wao-status.badge.off{color:var(--ui-danger);font-weight:600}.ui-shell .wao-status.ui-status-beta_approved{color:var(--ui-ok)}
.ui-shell .wao-status.ui-status-beta_reviewed::before{background:var(--ui-warn)}.ui-shell .wao-status.ui-status-draft::before{background:var(--ui-muted-text)}
.ui-shell .wao-atur{min-height:0;padding:2px 0;border:0;background:transparent;color:var(--ui-info);font-size:13px;font-weight:600}
.wao-merah .wao-isi{color:var(--ui-danger);font-weight:600}
.wao-bab{margin:14px 0 6px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ui-muted-text)}
.wao-kotak-abu{margin:0;padding:8px 10px;border-radius:8px;background:var(--ui-hover);color:var(--ui-text);line-height:1.5}
.wao-tugas{margin:0;padding-left:20px}.wao-tugas li{margin:4px 0}.wao-tugas small{display:block;color:var(--ui-muted-text)}
.wao-akun .wao-tombol-koneksi{margin-top:auto;padding-top:16px}.wao-akun .wao-tombol-koneksi button{flex:1 1 auto}
.wao-tombol-koneksi button,.wao-tombol-dialog button{white-space:nowrap}
.wao-pita-daftar[hidden],.wao-kode-area[hidden],.wao-hitung[hidden],.wao-langkah[hidden],.wao-tombol-dialog [hidden]{display:none}
.wao-pita-putus{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:6px 0 12px;padding:10px 14px;border:1px solid var(--ui-danger-line);border-radius:10px;background:var(--ui-danger-bg);color:var(--ui-danger);font-weight:600}
.wao-pita-putus span{flex:1 1 260px;overflow-wrap:anywhere}
.wao-pita-putus a,.ui-shell .wao-pita-putus .wao-pita-aksi,.wao-pita-putus .wao-pita-aksi{min-height:0;padding:0;border:0;background:transparent;color:var(--ui-danger);font-weight:700;text-decoration:underline}
.wao-dialog input[type=tel]{width:100%}
.wao-pilih{margin:12px 0 0;padding:0;border:0;min-width:0}.wao-pilih legend{padding:0;font-size:13px;font-weight:600}
.wao-pilih-baris{display:flex;align-items:center;gap:8px;margin:6px 0;padding:8px 10px;border:1px solid var(--ui-line);border-radius:8px;font-weight:400}
.wao-pilih-baris input{width:auto;margin:0}.wao-pilih-baris.wao-tidak{color:var(--ui-muted-text);background:var(--ui-hover)}
.wao-tombol-dialog{margin-top:14px}
.wao-langkah{margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--ui-info-bg);color:var(--ui-info)}
.wao-langkah.wao-tersambung{background:var(--ui-ok-bg);color:var(--ui-ok);font-weight:600}
.wao-dialog{max-width:min(92vw,520px)}
@media(max-width:760px){
 .wao-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;inset:0;border:0;border-radius:0;overflow:auto}
}