/* Gaya "Pixel Kantor": bingkai tebal, bayangan kotak, huruf pixel. Dipakai dashboard dan kantor live. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Inter:wght@400;500;600;700&display=swap');
:root {
  --latar:#24223a; --kertas:#f4efe6; --kertas2:#fff7e6; --putih:#ffffff; --tinta:#15111c; --teks:#2a2230; --redup:#6b6070;
  --oranye:#e0723a; --toska:#3f8f8a; --hijau:#8bea7b; --hijau-tua:#2f7d47; --kuning:#f6c453; --merah:#f87171; --biru:#7cc3f0; --ungu:#c4a1f2;
  --garis-putus:#d6cfc2; --pixel:'Press Start 2P', ui-monospace, monospace; --angka:VT323, ui-monospace, monospace;
}
* { box-sizing:border-box; }
body {
  margin:0; color:var(--teks); font:14px/1.45 Inter, system-ui, sans-serif;
  background:var(--latar);
  background-image:linear-gradient(rgba(255,255,255,.035) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.035) 2px, transparent 2px);
  background-size:24px 24px;
}
a { color:var(--toska); }
.px-kotak { background:var(--kertas); border:4px solid var(--tinta); box-shadow:6px 6px 0 var(--tinta); }
.px-judul { font-family:var(--pixel); font-size:11px; line-height:1.6; margin:0; }
.px-angka { font-family:var(--angka); }

/* Bilah atas */
.atas { display:flex; align-items:center; gap:22px; padding:10px 14px; margin-bottom:22px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo-ikon { width:36px; height:36px; flex:0 0 auto; background:var(--toska); border:3px solid var(--tinta); box-shadow:inset -6px -6px 0 #2c6a66, inset 6px 6px 0 #6fc0b9; }
.logo b { display:block; font-family:var(--pixel); font-size:11px; line-height:1.6; }
.logo small { display:block; font-size:12px; color:var(--redup); }
.atas nav { display:flex; gap:6px; flex:1; overflow-x:auto; }
.atas nav a { font-family:var(--pixel); font-size:9px; color:var(--teks); text-decoration:none; padding:8px 10px; border:3px solid transparent; white-space:nowrap; }
.atas nav a.aktif { background:var(--oranye); color:#fff; border-color:var(--tinta); box-shadow:3px 3px 0 var(--tinta); }
.atas nav a:not(.aktif):hover { border-color:var(--tinta); }
.atas .kanan { display:flex; align-items:center; gap:12px; }
.tgl { font-family:var(--angka); font-size:20px; white-space:nowrap; }
.keluar { margin:0; }
.keluar .px-tombol { font-size:8px; padding:8px 9px; }
.ava-bos { width:40px; height:42px; object-fit:cover; image-rendering:pixelated; border:3px solid var(--tinta); background:#a7d3a1; }

/* Tombol dan isian */
button, input { font:inherit; color:inherit; }
.px-tombol { font-family:var(--pixel); font-size:9px; line-height:1.4; padding:10px 12px; cursor:pointer; color:var(--tinta); background:var(--putih); border:3px solid var(--tinta); box-shadow:3px 3px 0 var(--tinta); }
.px-tombol:hover { transform:translate(-1px, -1px); box-shadow:4px 4px 0 var(--tinta); }
.px-tombol:active { transform:translate(3px, 3px); box-shadow:0 0 0 var(--tinta); }
.px-tombol.utama { background:var(--oranye); color:#fff; }
.px-tombol.ok { background:var(--hijau); }
.px-tombol.tolak { background:var(--merah); color:#fff; }
.px-tombol.toska { background:var(--toska); color:#fff; }
.px-input { background:var(--putih); border:3px solid var(--tinta); padding:9px 10px; outline:none; min-width:0; }
.px-input:focus { box-shadow:inset 0 0 0 2px var(--kuning); }

/* Obrolan */
.obrolan { display:flex; flex-direction:column; }
.obrolan header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px 10px; }
.live { font-family:var(--pixel); font-size:8px; color:#fff; background:#ef4444; border:2px solid var(--tinta); padding:3px 5px; animation:kedip 1.6s infinite; }
@keyframes kedip { 50% { opacity:.5; } }
.pesan-list { overflow-y:auto; padding:0 16px 12px; }
.pesan { display:flex; gap:10px; padding:7px 0; align-items:flex-start; }
@keyframes masuk { from { background:#fde68a; } to { background:var(--putih); } }
.ava { flex:0 0 40px; height:42px; margin-top:16px; border:2px solid var(--tinta); background:#fde68a; display:grid; place-items:center; font-size:17px; overflow:hidden; }
.ava img { width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.pesan .nm { font-size:12px; color:var(--redup); }
.pesan .nm b { color:var(--teks); margin-right:4px; font-size:13px; }
.pesan > div:last-child { min-width:0; flex:1; }
/* Isi obrolan berupa balon kata dengan ekor ke wajah pengirimnya. */
.pesan .tx { position:relative; font-size:13px; word-break:break-word; background:var(--putih); border:2px solid var(--tinta); box-shadow:2px 2px 0 var(--tinta); padding:6px 9px; margin-top:3px; }
.pesan .tx::before { content:''; position:absolute; left:-8px; top:10px; border-right:8px solid var(--tinta); border-top:5px solid transparent; border-bottom:5px solid transparent; }
.pesan .tx::after { content:''; position:absolute; left:-5px; top:11px; border-right:6px solid var(--putih); border-top:4px solid transparent; border-bottom:4px solid transparent; }
.pesan.baru .tx { animation:masuk .9s ease-out; }

@media (max-width: 700px) {
  .atas { flex-wrap:wrap; gap:10px; }
  .atas nav { order:3; flex-basis:100%; }
  .tgl { display:none; }
}