/* ==========================================================
   forum.watchwatch.store — stylesheet (2026-07-17, revisi 2: ikon SVG vektor
   menggantikan emoji, avatar dikunci keras biar tidak gepeng di flexbox, breakpoint
   desktop layak + hover state). Palet navy (--navy) tetap dipertahankan sebagai
   aksen brand watchwatch.store -- biru "Suka" (--like, #0866FF) tetap dipakai apa
   adanya karena itu warna makna universal "like" di banyak app, bukan cuma Facebook.
   ========================================================== */

:root{
  --navy:#0066CC;
  --navy-dark:#004499;
  --bg:#F0F2F5;
  --card:#ffffff;
  --text:#050505;
  --muted:#65676B;
  --border:#E4E6EB;
  --border-soft:#CED0D4;
  --bubble:#F0F2F5;
  --red:#dc2626;
  --like:#0866FF;
  --hover:#F2F2F2;
  /* --lebar-phone (2026-08-07) -- pola sama persis dengan assets/css/style.css
     situs utama (lihat catatan lengkap di sana). Dideklarasikan ulang di setiap
     breakpoint yang mengubah .phone{max-width}, dibaca .forum-fab supaya
     posisinya otomatis ikut lebar .phone breakpoint manapun tanpa formula
     calc() manual terpisah per breakpoint. */
  --lebar-phone:520px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{ overflow-x:hidden; width:100%; }

body{
  font-family:'Inter', -apple-system, sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  font-size:15px;
  line-height:1.34;
}

a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }
textarea{ font-family:inherit; }
svg{ display:block; flex-shrink:0; }

.phone{
  width:100%;
  max-width:520px;
  min-height:100vh;
  background:var(--bg);
  position:relative;
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
}

/* ---------- nav bawah (Beranda/Cari/Pesan/Akun) ---------- */
.bottom-nav{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:0; width:100%; max-width:520px;
  background:var(--card); border-top:1px solid var(--border);
  display:flex; z-index:40;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 10px rgba(0,0,0,.06);
}
.bn-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 0 7px; color:var(--muted); font-size:10.5px; font-weight:700;
}
.bn-item svg{ stroke:var(--muted); }
.bn-item.aktif{ color:var(--navy); }
.bn-item.aktif svg{ stroke:var(--navy); }

/* ---------- FAB kembali ke watchwatch.store (2026-08-05) ---------- */
/* Pasangan .forum-fab di situs utama (assets/css/style.css), arah sebaliknya.
   70px = tinggi .bottom-nav forum (lihat .phone padding-bottom di atas) --
   BEDA dari situs utama, .bottom-nav forum TIDAK PERNAH disembunyikan di
   breakpoint manapun (lebar cuma ikut membesar bareng .phone), jadi offset ini
   berlaku konsisten di semua lebar layar, tidak perlu override desktop terpisah. */
.forum-fab{
  position:fixed; right:14px;
  bottom:calc(70px + 14px + env(safe-area-inset-bottom));
  width:44px; height:44px; border-radius:50%;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  z-index:45; /* di atas .bottom-nav(40), di bawah modal/overlay forum (200+) */
  border:2px solid #fff;
}
/* Ikon tas belanja -- BUKAN logo WW polos (2026-08-05, revisi permintaan
   pemilik: ikon harus beda dari pasangannya di sisi ecommerce, langsung
   dikenali sebagai "menuju belanja"). */
.forum-fab svg{ width:22px; height:22px; }

/* ---------- header ---------- */
header{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:20;
}
header h1{ font-size:17px; font-weight:800; }
header h1 a{ color:#fff; }
header nav{ display:flex; align-items:center; gap:10px; }
header nav > a{
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.18);
  padding:8px 13px;
  border-radius:20px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
}
header nav > a:hover,
header nav > a:active{ background:rgba(255,255,255,.3); }
header nav svg{ stroke:#fff; }

/* ---------- lonceng notifikasi ---------- */
.icon-btn{
  position:relative;
  background:rgba(255,255,255,.18);
  border:none;
  color:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.icon-btn:hover,
.icon-btn:active{ background:rgba(255,255,255,.3); }
.icon-btn svg{ stroke:#fff; }
.badge-notif{
  position:absolute;
  top:-2px;
  right:-2px;
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-weight:800;
  min-width:17px;
  height:17px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border:2px solid var(--navy-dark);
}
.dropdown-notif{
  position:absolute;
  top:56px;
  right:12px;
  width:min(320px, calc(100vw - 24px));
  max-height:70vh;
  overflow-y:auto;
  background:var(--card);
  color:var(--text);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  z-index:30;
}
.notif-kosong{ padding:20px 16px; text-align:center; color:var(--muted); font-size:13px; }
.notif-item{
  display:block;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover,
.notif-item:active{ background:var(--bg); }
.notif-belum-dibaca{ background:#e6f1fb; }
.notif-waktu{ font-size:11px; color:var(--muted); margin-top:3px; }

/* ---------- konten utama ---------- */
main{ padding:14px 12px; display:flex; flex-direction:column; gap:12px; }

/* ---------- avatar bulat: DIKUNCI KERAS biar tidak gepeng di flexbox ---------- */
.avatar{
  width:40px; height:40px;
  min-width:40px; min-height:40px;
  flex:0 0 40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:16px;
  overflow:hidden;
  line-height:1;
}
.avatar.kecil{
  width:30px; height:30px; min-width:30px; min-height:30px; flex-basis:30px; font-size:12px;
}
.avatar.besar{
  width:56px; height:56px; min-width:56px; min-height:56px; flex-basis:56px; font-size:22px;
}

/* ---------- kartu post (feed & detail) ---------- */
.post-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  overflow:hidden;
}
.post-head{
  display:flex; align-items:center; gap:9px; padding:12px 14px 6px;
}
.post-head .who{ min-width:0; flex:1; }
.post-head .who strong{ display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:700; color:var(--text); }
.post-head .who span{ display:block; font-size:12px; color:var(--muted); margin-top:1px; }

/* ---------- pengumuman resmi admin (satu-satunya post yang TIDAK anonim) ---------- */
.post-card.pengumuman{ border-color:var(--navy); border-width:1.5px; }
.post-card.pengumuman .post-head{ background:linear-gradient(90deg, #e8f1fc 0%, transparent 100%); }
.badge-resmi{
  display:inline-flex; align-items:center; width:auto;
  background:var(--navy); color:#fff; font-size:10.5px; font-weight:800;
  padding:2px 8px; border-radius:9px; white-space:nowrap; flex-shrink:0;
}
/* Selector lebih spesifik dari ".post-head .who span{display:block}" (aturan lama
   untuk timestamp) yang kalau tidak dilawan bikin badge ini ikut jadi block
   full-width di dalam kartu post -- akun.php aman tanpa ini (bukan turunan .who). */
.post-head .who .badge-resmi{ display:inline-flex; width:auto; }

/* ---------- menu opsi titik-tiga (hapus post/komentar) ---------- */
.opsi-post{ position:relative; flex-shrink:0; }
.btn-opsi{
  width:30px; height:30px; border-radius:50%; background:none; border:none;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  flex-shrink:0;
}
.btn-opsi:hover{ background:var(--hover); }
.dropdown-opsi{
  display:none;
  position:absolute; top:34px; right:0; z-index:45;
  background:var(--card); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.16);
  min-width:150px; overflow:hidden;
}
.dropdown-opsi form{ margin:0; }
/* Selector 2-kelas SENGAJA (bukan cuma ".dropdown-opsi button") supaya spesifisitasnya
   menang lawan "main form button[type=submit]" (aturan umum tombol submit di
   buat.php/login.php/daftar.php) -- tanpa ini, tombol Hapus di sini ikut ke-style
   navy-full-width seperti tombol submit biasa, ketemu langsung waktu preview lokal. */
.opsi-post .dropdown-opsi button{
  display:block; width:100%; text-align:left; padding:11px 14px;
  background:none; border:none; font-size:13.5px; font-weight:700; color:var(--red);
}
.opsi-post .dropdown-opsi button:hover{ background:var(--bg); }

.post-card p.isi{ padding:2px 14px 8px; font-size:15px; white-space:pre-wrap; word-wrap:break-word; }

/* ---------- baris ikon like/komentar/share ala FB (satu baris, angka nempel
   langsung di ikonnya masing-masing -- gabungan .post-stats+.post-actions lama) ---------- */
.post-icon-row{
  display:flex; align-items:center; justify-content:space-around;
  border-top:1px solid var(--border); margin:6px 6px 0; padding:4px 0 2px;
}
.post-icon-row .btn-like,
.post-icon-row a,
.post-icon-row .btn-toggle-komentar,
.post-icon-row .btn-share{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:700; color:var(--muted);
  background:none; border:none;
}
.post-icon-row .btn-like:hover,
.post-icon-row a:hover,
.post-icon-row .btn-toggle-komentar:hover,
.post-icon-row .btn-share:hover{ background:var(--hover); }
.post-icon-row svg{ width:19px; height:19px; stroke:var(--muted); }
.post-icon-row .btn-like.liked{ color:var(--like); }
.post-icon-row .btn-like.liked svg{ stroke:var(--like); fill:var(--like); }

/* Panel komentar inline di kartu feed (index.php/cari.php) -- disembunyikan lewat
   inline style oleh assets/feed_komentar.js, bukan CSS (lihat kartuPostHtml()). */
.komentar-inline{ padding:10px 14px 12px; border-top:1px solid var(--border); }
.komentar-inline .komentar-baru{ margin:0 0 8px; }
.komentar-inline .komentar-list-inline .komentar-item:first-child{ padding-top:0; }

/* Badge bulat kecil (dipakai postingan lewat .like-dot polos, dan komentar lewat
   .komentar-like-badge yang juga menampilkan angka -- lihat assets/app.js). */
.like-dot{
  width:18px; height:18px; min-width:18px; border-radius:50%; background:var(--like);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.like-dot svg{ width:11px; height:11px; stroke:#fff; }
.komentar-like-badge{
  width:auto; height:18px; min-width:0; padding:0 6px 0 4px; border-radius:9px; gap:2px;
}
.komentar-like-badge b{ font-size:10px; font-weight:800; color:#fff; }

/* ---------- komentar (bubble ala Facebook) ---------- */
#komentar-section{ margin-top:2px; }
.section-label{ padding:8px 4px 2px; font-size:13px; font-weight:700; color:var(--muted); }

.komentar-baru{ display:flex; gap:8px; align-items:center; margin:8px 0 4px; }
.komentar-baru input,
.komentar-baru textarea{
  flex:1; min-width:0; border:none; background:var(--bubble); border-radius:19px;
  height:36px; padding:0 14px; font-size:13.5px; font-family:inherit; resize:none;
  line-height:36px;
}
.komentar-baru input:focus,
.komentar-baru textarea:focus{ outline:2px solid var(--navy); outline-offset:0; }
.komentar-baru button{
  background:var(--navy); color:#fff; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.komentar-baru button:hover{ background:var(--navy-dark); }
.komentar-baru button:disabled{ opacity:.6; }
.komentar-baru button svg{ width:16px; height:16px; margin-left:-2px; stroke:#fff; }
.form-komentar-pesan{ display:block; font-size:12px; color:var(--red); padding:0 4px; }

.komentar-item{ display:flex; gap:8px; padding:6px 2px; align-items:flex-start; }

.komentar-main{ flex:1; min-width:0; }
.bubble-row{ display:flex; align-items:flex-end; gap:6px; max-width:100%; }
.bubble-row .opsi-post{ flex-shrink:0; }
.bubble-row .opsi-post .btn-opsi{ width:24px; height:24px; }
.bubble-row .opsi-post .dropdown-opsi{ top:26px; }
.bubble{
  background:var(--bubble); border-radius:15px; padding:7px 12px;
  display:inline-block; max-width:100%;
}
.bubble-nama{ display:flex; align-items:center; gap:6px; }
.bubble strong{ font-size:12.5px; font-weight:700; }
.badge-author{
  background:var(--navy); color:#fff; font-size:9.5px; font-weight:800;
  letter-spacing:.02em; padding:1.5px 7px; border-radius:8px; flex-shrink:0;
}
.bubble p{ padding:0; font-size:13.5px; margin-top:1px; white-space:pre-wrap; word-wrap:break-word; }

.komentar-aksi{ display:flex; align-items:center; gap:13px; margin:4px 4px 0; font-size:12px; }
.komentar-aksi button,
.komentar-aksi a{
  background:none; border:none; font-size:12px; font-weight:700; color:var(--muted); padding:0;
}
.komentar-aksi .btn-like.liked{ color:var(--like); }
.komentar-aksi .waktu{ font-weight:400; color:var(--muted); }

.lihat-balasan{
  margin:5px 0 2px 38px;
  font-size:12.5px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:5px; background:none; border:none;
}
.lihat-balasan svg{ width:13px; height:13px; stroke:var(--muted); }
.lihat-balasan:hover{ color:var(--text); }

/* Garis vertikal penghubung balasan ala FB -- cuma tampil kalau container ini
   benar-benar punya isi (lihat :empty di bawah), jadi tidak ada garis nganggur
   nempel ke bawah kalau komentar itu belum/tidak punya balasan. */
.komentar-balasan{ margin-left:15px; padding-left:15px; border-left:2px solid var(--border); }
/* Dari kedalaman MAKS_KEDALAMAN_INDENT (panel_komentar.js) dan seterusnya, balasan
   dirender rata (tidak menjorok lagi) -- di layar sempit, menjorok terus tiap
   level bikin bubble menciut sampai tidak kebaca (ketemu waktu preview mobile). */
.komentar-balasan.rata{ margin-left:0; padding-left:0; border-left:none; }
.komentar-form-balas-slot:empty{ display:none; }
.komentar-balasan:empty{ display:none; }

.pesan-flash{
  text-align:center; color:#166534; background:#dcfce7; border:1px solid #bbf7d0;
  padding:12px 16px; border-radius:10px; font-size:13px; font-weight:700;
}

/* ---------- form buat.php/daftar.php/login.php + tombol umum ----------
   SENGAJA pakai child combinator "main > form" (bukan "main form" descendant
   biasa) -- forum ini juga punya form LAIN yang nested lebih dalam di dalam
   <main> (.komentar-baru buat komentar, .dropdown-opsi buat hapus), dan kalau
   pakai selector descendant biasa, textarea/tombol submit form-form itu ikut
   ke-style jadi kotak besar 140px/navy-full-width seperti form buat.php --
   ketemu langsung 3x waktu preview lokal (badge, tombol hapus, textarea
   komentar) sebelum akhirnya disempitkan begini. */
main > form textarea,
main > form input[type="email"],
main > form input[type="password"],
main > form input[type="text"]{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  font-size:14px;
  background:var(--card);
  color:var(--text);
  margin-bottom:10px;
}
main > form textarea{ min-height:140px; resize:vertical; }
main > form textarea:focus,
main > form input:focus{ outline:none; border-color:var(--navy); }
main > form button[type="submit"]{
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 20px;
  font-weight:700;
  font-size:14px;
  width:100%;
}
main > form button[type="submit"]:hover{ background:var(--navy-dark); }
main form button:disabled{ opacity:.6; }
main > h1{ font-size:19px; font-weight:800; margin-bottom:12px; }
main > p{ margin-bottom:10px; color:var(--muted); font-size:13px; }
main > p a{ color:var(--navy); font-weight:700; }
main > p.form-error{ color:var(--red); }

main.form-page{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  padding:20px 16px;
  margin:12px;
}

/* ---------- cari.php ---------- */
.form-cari{
  display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--border); border-radius:12px; padding:11px 14px; margin-bottom:2px;
}
.form-cari svg{ stroke:var(--muted); flex-shrink:0; }
.form-cari input{
  border:none; background:none; flex:1; min-width:0; font-size:14px; font-family:inherit;
}
.form-cari input:focus{ outline:none; }

/* ---------- akun.php (2026-08-14, sekarang halaman "Riwayat Postingan" --
   permintaan pemilik "menu akun di forum ganti jadi riwayat postingan jadi
   ga ada akun") ---------- */
.akun-card{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.06); padding:18px 16px;
  display:flex; align-items:center; gap:14px;
}
.akun-card p{ font-size:12px; color:var(--muted); }
.btn-keluar{
  display:block; text-align:center; background:var(--card); color:var(--red);
  border:1px solid var(--border); border-radius:10px; padding:13px; font-weight:700;
}
.btn-keluar:hover{ background:var(--bg); }
.riwayat-judul{ font-size:15px; font-weight:800; color:var(--text); margin-top:4px; }

/* ---------- feed beranda / footer pagination ---------- */
main > p.kosong{ text-align:center; color:var(--muted); padding:40px 10px; background:var(--card); border-radius:10px; border:1px solid var(--border); }

footer{ display:flex; justify-content:space-between; padding:10px 16px 20px; }
footer a{
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  background:var(--card);
  padding:8px 16px;
  border-radius:20px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
footer a:hover{ background:var(--bg); }

/* ---------- badge unread ikon Pesan di bottom nav ---------- */
.bn-badge{
  position:absolute; top:2px; left:calc(50% + 6px); z-index:1;
  background:var(--red); color:#fff; font-size:9px; font-weight:800;
  min-width:15px; height:15px; border-radius:8px; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--card);
}

/* ---------- pesan.php: kotak masuk ---------- */
.percakapan-row{
  display:flex; align-items:center; gap:12px; padding:12px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  margin-bottom:8px; box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.percakapan-row.belum-dibaca{ background:#e6f1fb; border-color:var(--navy); }
.percakapan-info{ flex:1; min-width:0; }
.percakapan-info strong{ display:block; font-size:14px; color:var(--text); }
.percakapan-info span{
  display:block; font-size:12.5px; color:var(--muted); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.percakapan-meta{ text-align:right; flex-shrink:0; }
.percakapan-meta .waktu{ display:block; font-size:11px; color:var(--muted); }
.titik-belum-dibaca{
  display:inline-block; margin-top:4px; background:var(--navy); color:#fff;
  font-size:10px; font-weight:800; min-width:18px; height:18px; border-radius:9px;
  text-align:center; line-height:18px;
}

/* ---------- pesan_chat.php: halaman chat ala FB Messenger ----------
   .chat-phone menimpa beberapa aturan .phone dasar (bukan cuma menambah) --
   halaman ini full-height flex-column (header/list/input-bar), TIDAK pakai
   bottom nav (sama seperti WhatsApp/Messenger, keluar dari 1 chat baru lihat
   nav lagi), jadi padding-bottom bawaan .phone untuk clearance nav tidak
   relevan di sini. */
.chat-phone{
  display:flex; flex-direction:column; height:100vh; padding-bottom:0;
}
/* Bug HP (2026-07-29, ditemukan lewat pengujian menyeluruh: "kolom ketik terlalu
   jauh ke bawah") -- 100vh di Safari iOS (dan sebagian browser Android) dihitung
   dari viewport TERBESAR (seolah address bar sudah hilang), padahal saat halaman
   PERTAMA dibuka address bar masih tampil, jadi kotak setinggi 100vh sebenarnya
   LEBIH TINGGI dari layar yang benar-benar terlihat -- .chat-input-bar yang duduk
   di ujung bawah flex-column ini ikut terdorong ke luar layar sampai pengguna
   scroll manual (address bar baru sembunyi setelah itu, tapi kesan pertamanya
   sudah terlanjur terlihat rusak/kolom ketik hilang). 100dvh (dynamic viewport
   height) mengikuti tinggi viewport yang SUNGGUHAN terlihat saat itu juga,
   termasuk saat address bar muncul/hilang -- browser lama yang belum kenal dvh
   otomatis mengabaikan baris ini dan tetap pakai 100vh di atas sebagai fallback. */
@supports (height:100dvh){
  .chat-phone{ height:100dvh; }
}
.chat-topbar{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#fff; padding:12px 16px; display:flex; align-items:center; gap:10px;
  justify-content:flex-start; flex-shrink:0;
}
.chat-back{ display:flex; flex-shrink:0; }
.chat-topbar strong{ font-size:15px; font-weight:700; }

/* Bug ditemukan 2026-07-30 -- perbaikan 07-29 (100vh -> 100dvh di .chat-phone,
   lihat di atas) benar tapi tidak lengkap: .chat-list ini flex:1 + overflow-y:auto
   TANPA min-height:0, jadi ukuran minimum otomatis flex item (default = ukuran
   kontennya sendiri, bukan 0) bisa menang atas flex:1 di sebagian browser/webview
   begitu pesan cukup banyak -- .chat-list jadi tumbuh melebihi jatah tingginya,
   .chat-input-bar (yang flex-shrink:0 di bawahnya) ikut terdorong ke luar batas
   100vh/100dvh .chat-phone, dan karena tidak ada lagi yang scroll di DALAM
   .chat-list, html/body sendiri yang jadi discroll -- persis gejala "kolom ketik
   ketinggalan di bawah, harus scroll halaman". min-height:0 memaksa .chat-list
   patuh ke flex:1 (tinggi jatahnya), overflow-y:auto lalu benar-benar aktif
   scroll di dalam elemen ini sendiri, bukan di halaman. */
.chat-list{
  flex:1; min-height:0; overflow-y:auto; padding:14px 12px;
  display:flex; flex-direction:column; gap:8px;
}
.pesan-bubble-row{ display:flex; align-items:center; gap:5px; }
.pesan-bubble-row.kanan{ justify-content:flex-end; }
.pesan-bubble-row.kiri{ justify-content:flex-start; }
.pesan-bubble{
  max-width:75%; padding:9px 14px; border-radius:18px; font-size:14px; line-height:1.35;
  white-space:pre-wrap; word-wrap:break-word;
}
.pesan-bubble-row.kanan .pesan-bubble{ background:var(--navy); color:#fff; border-bottom-right-radius:4px; }
.pesan-bubble-row.kiri .pesan-bubble{ background:var(--bubble); color:var(--text); border-bottom-left-radius:4px; }

.btn-hapus-pesan{
  background:none; border:none; color:var(--muted); opacity:.5;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.btn-hapus-pesan:hover{ opacity:1; color:var(--red); }

.btn-muat-lama{
  display:block; margin:0 auto 4px; padding:8px 16px;
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  font-size:12.5px; font-weight:700; color:var(--navy);
}
.btn-muat-lama:hover{ background:var(--hover); }
.btn-muat-lama:disabled{ opacity:.6; }

.chat-input-bar{
  flex-shrink:0; display:flex; gap:8px; align-items:center;
  padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border); background:var(--card);
}
.chat-input-bar textarea{
  flex:1; min-width:0; border:none; background:var(--bubble); border-radius:19px;
  height:36px; padding:0 14px; font-size:13.5px; font-family:inherit; resize:none; line-height:36px;
}
.chat-input-bar textarea:focus{ outline:2px solid var(--navy); outline-offset:0; }
.chat-input-bar button{
  background:var(--navy); color:#fff; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; border:none;
}
.chat-input-bar button:hover{ background:var(--navy-dark); }
.chat-input-bar button svg{ width:16px; height:16px; margin-left:-2px; stroke:#fff; }

/* ---------- HP miring & tablet (2026-08-07) ---------- */
/* Bug sekelas dengan situs utama (2026-08-07, ditemukan lewat audit responsif
   yang sama: "cari lagi ... di forum ... yang bikin bug responsifnya") --
   .phone/.bottom-nav forum SEBELUMNYA loncat langsung dari 520px (mobile) ke
   860px (900px+), TANPA apa pun di antaranya -- persis gejala bug iPad Mini 4
   yang sudah ditemukan+diperbaiki di situs utama (assets/css/style.css): di
   tablet potret (mis. iPad Mini 4, 768px) atau HP dilebarkan mendekati ukuran
   tablet, forum tampil sebagai kolom 520px sempit mengambang di tengah layar
   dengan ruang kosong besar kiri-kanan.

   REVISI (2026-08-07, laporan pemilik lanjutan: "hp dimiringin dan tablet dan
   ipad masih ga responsif ... masih tidak melebar") -- versi PERTAMA di sini
   sengaja dibatasi JUGA (min-height:600px) supaya TIDAK kena HP landscape,
   semata-mata supaya formula lama .forum-fab (angka tetap per breakpoint)
   tidak salah hitung. Itu keliru diprioritaskan -- HP landscape jadi TETAP
   520px sempit selamanya, padahal itu yang dikeluhkan pemilik. Diperbaiki
   dari akarnya lewat --lebar-phone (lihat :root di atas, dipakai .forum-fab
   di bawah) -- FAB sekarang otomatis membaca lebar .phone yang berlaku, jadi
   syarat (min-height:600px) tidak diperlukan lagi dan dihapus -- HP landscape
   sekarang ikut melebar sama seperti tablet potret. 680px dipilih (bukan
   angka baru) -- itu angka yang PERNAH dipakai sebagai lebar desktop forum
   sebelum revisi 2026-08-05 menaikkannya ke 860px, jadi sudah pernah teruji
   enak dilihat untuk satu-kolom feed selebar itu. */
@media (min-width:600px) and (max-width:899px){
  :root{ --lebar-phone:680px; }
  .phone{ max-width:680px; }
  .bottom-nav{ max-width:680px; }
  /* .forum-fab TIDAK PERLU override apa pun lagi di sini -- formulanya (lihat
     .forum-fab di bawah) sudah otomatis membaca --lebar-phone di atas. */
}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{ --lebar-phone:860px; } /* .forum-fab tetap direset right:14px polos di breakpoint ini (lihat aturannya di bawah) -- variable ini diperbarui murni supaya tetap akurat/tidak basi. */
  .phone{ max-width:860px; padding-top:8px; }
  .bottom-nav{ max-width:860px; }
  main{ padding:14px 0; }
  .post-icon-row .btn-like,
  .post-icon-row a,
  .post-icon-row .btn-toggle-komentar,
  .post-icon-row .btn-share{ cursor:pointer; }
}

/* .forum-fab -- bug sekelas dengan .forum-fab/.cs-fab situs utama (2026-08-05
   di sana, ditemukan lagi di sini 2026-08-07 lewat audit yang sama). right:14px
   polos (aturan dasar di atas) cuma benar kalau .phone selebar viewport
   (viewport <=520px, .phone width:100% fluid). Begitu .phone berhenti melebar
   dan DITENGAHKAN (520px tetap di 520-899px sebelum tablet/desktop, atau 680px
   di rentang tablet 600-899px di atas) sementara viewport-nya lebih lebar dari
   itu, ada margin kosong kiri-kanan -- right:14px polos bikin FAB "lepas"
   nempel ke tepi viewport ASLI, jauh dari kolom .phone yang terlihat.
   max(14px, calc((100vw - min(100vw, var(--lebar-phone))) / 2 + 14px)) BACA
   LANGSUNG dari --lebar-phone (bukan angka tetap per breakpoint) supaya FAB
   otomatis ikut lebar .phone yang berlaku SAAT INI, breakpoint apapun, tanpa
   perlu override calc() manual lagi tiap kali .phone berubah -- akar penyebab
   bug ini terus berulang di ronde audit sebelumnya (dulu perlu 2 aturan
   terpisah dengan angka tetap 260/340 yang gampang lupa disinkronkan, sekarang
   cukup 1 aturan generik). TIDAK berlaku lagi mulai 900px+ -- direset balik ke
   right:14px polos di sana (lihat aturan dasar .forum-fab, tidak diubah),
   karena widget mengambang menempel ke pojok viewport asli itu wajar/lazim di
   desktop, sama seperti situs utama. */
@media (max-width:899px){
  .forum-fab{ right:max(14px, calc((100vw - min(100vw, var(--lebar-phone))) / 2 + 14px)); }
}

/* Responsif desktop/tablet lebar & iPad (revisi KEDUA 2026-08-05 -- permintaan
   pemilik "tampilan forum di pc dekstop dan laptop kurang lebar", setelah
   revisi pertama 2026-07-29 masih dirasa terlalu sempit). Tiap tingkat
   dinaikkan lagi (680->860, 760->980, 840->1100) + breakpoint 1920px baru
   ditambahkan (sebelumnya mentok di 840px dari 1600px sampai monitor
   berapa pun lebarnya) -- pola sama dengan situs utama watchwatch.store yang
   terus bertambah lebar sampai breakpoint 1920px. Alasan "feed teks jangan
   terlalu lebar" dari revisi pertama TIDAK dihapus sepenuhnya (masih dikunci,
   bukan melebar penuh mengikuti viewport 100%), cuma plafonnya dinaikkan
   sesuai permintaan pemilik yang lebih diutamakan. .phone dan .bottom-nav
   WAJIB dinaikkan bersamaan di tiap breakpoint supaya nav bawah tetap sejajar
   persis dengan lebar feed di atasnya. */
@media (min-width:1280px){
  :root{ --lebar-phone:980px; }
  .phone{ max-width:980px; }
  .bottom-nav{ max-width:980px; }
}
@media (min-width:1600px){
  :root{ --lebar-phone:1100px; }
  .phone{ max-width:1100px; }
  .bottom-nav{ max-width:1100px; }
}
@media (min-width:1920px){
  :root{ --lebar-phone:1240px; }
  .phone{ max-width:1240px; }
  .bottom-nav{ max-width:1240px; }
}

/* ---------- toast + modal konfirmasi (2026-07-28) ----------
   Pengganti alert()/confirm()/prompt() native browser (kotak "forum.watchwatch.
   store menyatakan: ..." bawaan Chrome, tidak bisa diberi CSS sama sekali) --
   lihat assets/dialog.js. Sengaja class+nama fungsi sama dengan
   assets/js/dialog_pelanggan.js situs utama (tampilkanPesan/konfirmasiLalu/
   konfirmasiAksi) supaya satu pola dipakai konsisten di seluruh produk, walau
   forum ini stylesheet+JS-nya terpisah total dari situs utama. */
.forum-toast{
  position:fixed; left:50%; top:16px; transform:translateX(-50%);
  z-index:200; max-width:90%; padding:11px 18px; border-radius:10px;
  font-size:13px; font-weight:700; color:#fff; text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  animation:forumToastMasuk .25s ease, forumToastKeluar .35s ease 5.2s forwards;
}
.forum-toast.error{ background:var(--red); }
.forum-toast.sukses{ background:#16a34a; }
@keyframes forumToastMasuk{ from{ opacity:0; transform:translateX(-50%) translateY(-10px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes forumToastKeluar{ from{ opacity:1; } to{ opacity:0; visibility:hidden; } }

.forum-modal-overlay{
  display:none; position:fixed; inset:0; z-index:210;
  background:rgba(0,0,0,.45); align-items:center; justify-content:center; padding:20px;
}
.forum-modal-sheet{
  background:var(--card); border-radius:14px; padding:20px;
  width:100%; max-width:360px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.forum-modal-pesan{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.5; margin-bottom:16px; }
.forum-modal-input{
  width:100%; padding:10px 12px; margin-bottom:16px; font-size:13px;
  border:1.5px solid var(--border-soft); border-radius:8px; color:var(--text);
}
.forum-modal-btnrow{ display:flex; gap:8px; }
.forum-modal-btn{
  flex:1; padding:10px; border-radius:9px; font-size:13px; font-weight:700; border:1.5px solid transparent; cursor:pointer;
}
.forum-modal-btn.batal{ background:#fff; color:var(--navy); border-color:var(--navy); }
.forum-modal-btn.ya{ background:var(--navy); color:#fff; }