:root {
  --latar: #f4f1ea; --kartu: #ffffff; --teks: #1f2a24; --redup: #6b7268; --garis: #e2ddd2;
  --aksen: #2f6b4f; --aksen-teks: #ffffff; --gelembung-saya: #2f6b4f; --gelembung-saya-teks: #ffffff;
  --sistem: #efe9da; --kuning: #b07d12; --merah: #b3402f; --hijau: #2f6b4f;
  --tinggi-tab: 60px; --pinggir: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #141a17; --kartu: #1e2622; --teks: #e9ece8; --redup: #9aa39c; --garis: #2c3631;
    --aksen: #5fae86; --aksen-teks: #0c120f; --gelembung-saya: #3c7a5c; --gelembung-saya-teks: #ffffff;
    --sistem: #232c27; --kuning: #e0b54a; --merah: #e0705e; --hijau: #5fae86;
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* .tulis/.tab memakai display:flex yang mengalahkan atribut hidden */
html, body { margin: 0; background: var(--latar); color: var(--teks); overflow-x: hidden; }
body { font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: pan-y; }
.atas { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 52px;
  padding: 0 var(--pinggir); background: var(--latar); border-bottom: 1px solid var(--garis); }
.atas h1 { font-size: 18px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kembali { font-size: 30px; line-height: 1; background: none; border: 0; color: var(--aksen); padding: 0 8px 4px 0; cursor: pointer; }
main { max-width: 600px; margin: 0 auto; padding: 12px var(--pinggir) calc(var(--tinggi-tab) + 90px); }
.tab { position: fixed; bottom: 0; left: 0; right: 0; z-index: 6; display: flex; height: var(--tinggi-tab);
  padding-bottom: env(safe-area-inset-bottom); background: var(--kartu); border-top: 1px solid var(--garis); }
.tab a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; color: var(--redup); text-decoration: none; }
.tab a span { font-size: 20px; }
.tab a.aktif { color: var(--aksen); font-weight: 600; }
.tulis { position: fixed; left: 0; right: 0; bottom: var(--tinggi-tab); z-index: 6; display: flex; gap: 8px;
  max-width: 600px; margin: 0 auto; padding: 8px var(--pinggir); background: var(--latar); border-top: 1px solid var(--garis); }
.tulis textarea { flex: 1; resize: none; max-height: 120px; padding: 10px 12px; border-radius: 20px; border: 1px solid var(--garis);
  background: var(--kartu); color: var(--teks); font: inherit; }
.tulis button, .tombol { border: 0; border-radius: 20px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer;
  background: var(--aksen); color: var(--aksen-teks); }
.tombol.kedua { background: transparent; color: var(--aksen); border: 1px solid var(--aksen); }
.tombol:disabled { opacity: .5; }
.pesan { display: flex; flex-direction: column; margin: 8px 0; }
.gelembung { max-width: 86%; padding: 10px 12px; border-radius: 16px; background: var(--kartu); white-space: pre-wrap;
  overflow-wrap: anywhere; border: 1px solid var(--garis); }
.pesan.saya { align-items: flex-end; }
.pesan.saya .gelembung { background: var(--gelembung-saya); color: var(--gelembung-saya-teks); border: 0; }
.pesan.sistem .gelembung { background: var(--sistem); font-size: 14px; max-width: 100%; }
.waktu { font-size: 11px; color: var(--redup); margin: 2px 6px; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 12px; margin: 8px 0; }
.kartu h3 { margin: 0 0 6px; font-size: 16px; }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.redup { color: var(--redup); font-size: 14px; }
.daftar { list-style: none; margin: 0; padding: 0; }
.daftar li { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px; padding: 12px; margin: 8px 0; }
.daftar li a { color: inherit; text-decoration: none; display: block; }
.chip { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--sistem); margin: 2px 4px 2px 0; }
.chip.hijau { color: var(--hijau); } .chip.kuning { color: var(--kuning); } .chip.merah { color: var(--merah); }
.tahap { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--garis); }
.tahap:last-child { border-bottom: 0; }
img.pratinjau, video.pratinjau { width: 100%; border-radius: 10px; margin-top: 8px; display: block; }
textarea.catatan { width: 100%; margin-top: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--garis);
  background: var(--latar); color: var(--teks); font: inherit; }
input, select { font: inherit; padding: 10px; border-radius: 10px; border: 1px solid var(--garis); background: var(--kartu);
  color: var(--teks); width: 100%; }
label { display: block; margin: 10px 0 4px; font-size: 14px; color: var(--redup); }
@media (prefers-reduced-motion: no-preference) { .gelembung, .kartu { transition: opacity .2s; } }
pre.perintah { margin: 4px 0 0; padding: 10px; border-radius: 10px; background: var(--latar); border: 1px solid var(--garis);
  font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
/* Kerangka aplikasi (index.html) tanpa position:fixed. Safari iPhone menggeser elemen fixed saat halaman digulir atau bilah
   alamat/keyboard berubah (kotak tulis & tab "ikut naik" ke tengah layar). Di sini halaman setinggi layar yang terlihat
   (100dvh; keyboard: app.js mengikuti visualViewport) dan hanya <main> yang bergulir. */
body.aplikasi { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
body.aplikasi .atas { position: static; flex: none; }
body.aplikasi main { flex: 1; min-height: 0; width: 100%; max-width: none; margin: 0; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px max(var(--pinggir), calc((100% - 600px) / 2)) 24px; }
body.aplikasi .tulis { position: static; flex: none; max-width: none; margin: 0; padding: 8px max(var(--pinggir), calc((100% - 600px) / 2)); }
body.aplikasi .tab { position: static; flex: none; height: calc(var(--tinggi-tab) + env(safe-area-inset-bottom)); }
body.aplikasi.papan-ketik .tab { display: none; }   /* keyboard terbuka: ruang untuk pesan, bukan tab */
/* Penanda proses: gelembung "mengetik" saat operator menjawab, strip tugas Mesin (antre/jalan) di atas kotak tulis */
.mengetik .gelembung { display: flex; align-items: center; gap: 8px; color: var(--redup); font-size: 14px; }
.titik-ketik { display: inline-flex; gap: 4px; }
.titik-ketik i { width: 7px; height: 7px; border-radius: 50%; background: var(--redup); animation: ketik 1.2s infinite ease-in-out; }
.titik-ketik i:nth-child(2) { animation-delay: .15s; } .titik-ketik i:nth-child(3) { animation-delay: .3s; }
@keyframes ketik { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.proses { flex: none; padding: 6px max(var(--pinggir), calc((100% - 600px) / 2)); background: var(--sistem);
  border-top: 1px solid var(--garis); font-size: 13px; line-height: 1.35; }
.proses a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; padding: 2px 0; }
.denyut { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--aksen); animation: denyut 1.4s infinite; }
.denyut.antre { background: var(--kuning); animation: none; }
@keyframes denyut { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .titik-ketik i, .denyut { animation: none; } }
input[type=checkbox] { width: auto; margin: 0 8px 0 0; vertical-align: middle; }