/* ==========================================================================
   Ponsel chat Sarah (komponen publik) - semua kelas berawalan pc-
   Meniru aplikasi Sarah asli (webchat-page.js): kepala hijau #075E54, latar
   kertas krem bercorak doodle, gelembung pengguna #D9FDD3 + centang biru,
   gelembung Sarah putih, pil tanggal hijau pucat.
   Tinggi ponsel DIKUNCI lewat aspect-ratio (9:18); percakapan bergulir di
   dalam .pc-chat, jadi tinggi tidak berubah antar skenario.
   ========================================================================== */

.pc-akar {
  --pc-lebar: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%; max-width: 100%; min-width: 0;
}

/* ---------- bingkai ponsel ---------- */
.pc-ponsel {
  position: relative; box-sizing: border-box;
  width: min(100%, var(--pc-lebar)); aspect-ratio: 9 / 18; flex: 0 0 auto;
  overflow: hidden; /* mematikan min-height:auto dari aspect-ratio: isi tak boleh memanjangkan ponsel */
  border-radius: 13% / 6.5%;
  background: linear-gradient(145deg, #2a2d2f 0%, #0c0e0f 45%, #1b1e20 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 24px 60px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .3);
  container-type: inline-size; container-name: pc;
}
.pc-layar {
  position: absolute; inset: clamp(8px, 3.2cqw, 12px); overflow: hidden;
  border-radius: 10.5% / 5.1%; background: #EFEAE2;
  display: flex; flex-direction: column;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans Thai", "Leelawadee UI",
    "Noto Sans Arabic", "Segoe UI Arabic", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px; color: #111b21; line-height: 1.38; text-align: start;
  -webkit-font-smoothing: antialiased;
}
@container pc (max-width: 330px) { .pc-layar { font-size: 13px; } }
@container pc (max-width: 290px) { .pc-layar { font-size: 12.2px; } }

/* bilah status ponsel */
.pc-status {
  flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 2.05em; padding: 0 1.5em; background: #06514a; color: #fff;
  font-size: .8em; font-weight: 600; letter-spacing: .02em; direction: ltr;
}
.pc-status-jam { font-variant-numeric: tabular-nums; }
.pc-pulau { position: absolute; left: 50%; top: .38em; width: 27%; height: 1.3em; margin-left: -13.5%;
  background: #000; border-radius: 1em; }
.pc-status-ikon { display: flex; align-items: center; gap: .35em; }
.pc-status-ikon svg { display: block; height: .95em; width: auto; fill: #fff; }

/* kepala percakapan */
.pc-kepala {
  flex: 0 0 auto; display: flex; align-items: center; gap: .6em;
  padding: .45em .75em .55em .35em; background: #075E54; color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); position: relative; z-index: 2;
}
.pc-kembali { font-size: 1.7em; line-height: 1; padding: 0 .05em; opacity: .95; }
.pc-avatar {
  flex: 0 0 auto; width: 2.5em; height: 2.5em; border-radius: 50%; overflow: hidden;
  background: #0b0b0d; color: #e6c15c; display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-weight: 700; font-size: 1em; letter-spacing: .03em;
}
.pc-avatar img { width: 72%; height: 72%; object-fit: contain; display: block; }
.pc-htxt { flex: 1 1 auto; min-width: 0; }
.pc-nama { display: block; font-weight: 700; font-size: 1.1em; line-height: 1.2; }
.pc-keadaan { display: block; font-size: .86em; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .2s ease; }
.pc-keadaan.pc-ketik { font-style: italic; }
.pc-hikon { display: flex; gap: 1.1em; flex: 0 0 auto; }
.pc-hikon svg { width: 1.3em; height: 1.3em; fill: #fff; opacity: .95; display: block; }

/* area percakapan: latar doodle ala aplikasi asli */
.pc-chat {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: auto;
  padding: .5em .45em .7em; scrollbar-width: none;
  background-color: #EFEAE2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.04' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 28v22M18 33h7v12h-7z'/%3E%3Ccircle cx='112' cy='24' r='9'/%3E%3Cpath d='M28 108l12-14 9 7 16-20'/%3E%3Cpath d='M96 96h18m-7-7l7 7-7 7'/%3E%3Cpath d='M64 44q9-11 18 0'/%3E%3Cpath d='M118 118v-16M118 106h6v12h-6z'/%3E%3Cpath d='M20 84c6-8 14-8 20 0'/%3E%3Ccircle cx='40' cy='24' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.pc-chat::-webkit-scrollbar { width: 0; height: 0; }

/* pil tanggal */
.pc-tgl { display: flex; justify-content: center; margin: .5em 0 .55em; }
.pc-tgl span { background: #e7f3ec; color: #41695a; font-size: .8em; font-weight: 700; letter-spacing: .05em;
  padding: .38em 1em; border-radius: 1em; box-shadow: 0 1px 1px rgba(11, 20, 26, .06); white-space: nowrap; }

/* baris + gelembung */
.pc-baris { display: flex; margin: .22em 0; }
.pc-baris.pc-saya { justify-content: flex-end; }
.pc-baris.pc-lanjut { margin-top: .12em; }
.pc-gelembung {
  position: relative; max-width: 86%; min-width: 0; box-sizing: border-box;
  padding: .4em .6em .45em; border-radius: .55em; box-shadow: 0 1px .5px rgba(0, 0, 0, .13);
  overflow-wrap: break-word; word-break: normal;
}
.pc-gelembung::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.pc-saya .pc-gelembung { background: #D9FDD3; border-start-end-radius: 0; margin-inline-end: 8px; }
.pc-dia .pc-gelembung { background: #fff; border-start-start-radius: 0; margin-inline-start: 8px; }
.pc-saya .pc-gelembung::before { right: -8px; background: radial-gradient(circle at bottom left, transparent 8px, #D9FDD3 0); }
.pc-dia .pc-gelembung::before { left: -8px; background: radial-gradient(circle at bottom right, transparent 8px, #fff 0); }
.pc-lanjut .pc-gelembung { border-radius: .55em; }
.pc-lanjut .pc-gelembung::before { display: none; }
/* RTL: gelembung dicerminkan (milik pengguna di kiri, Sarah di kanan) */
.pc-akar[dir="rtl"] .pc-saya .pc-gelembung::before { right: auto; left: -8px; background: radial-gradient(circle at bottom right, transparent 8px, #D9FDD3 0); }
.pc-akar[dir="rtl"] .pc-dia .pc-gelembung::before { left: auto; right: -8px; background: radial-gradient(circle at bottom left, transparent 8px, #fff 0); }

/* isi gelembung */
.pc-g { display: block; min-height: 1.38em; unicode-bidi: plaintext; }
.pc-akar[dir="rtl"] .pc-g { unicode-bidi: normal; }
.pc-jeda { display: block; height: .55em; }
.pc-butir { display: block; position: relative; padding-inline-start: 1.05em; margin: .08em 0; }
.pc-butir::before { content: "•"; position: absolute; inset-inline-start: .15em; top: 0; color: #54656f; }
.pc-gelembung b { font-weight: 700; }
.pc-gelembung i { font-style: italic; }
.pc-catatan { display: block; margin-top: .45em; padding-top: .35em; border-top: 1px dashed rgba(0, 0, 0, .14);
  font-size: .78em; color: #667781; font-style: italic; }
/* jam + centang: mengambang di akhir baris terakhir (seperti aplikasi asli) */
.pc-waktu {
  float: right; position: relative; top: .5em; margin: 0 -.15em 0 .9em; direction: ltr;
  display: inline-flex; align-items: center; gap: .25em; height: 1.2em;
  font-size: .72em; color: #667781; line-height: 1; white-space: nowrap; user-select: none;
  font-style: normal; font-weight: 400;
}
.pc-akar[dir="rtl"] .pc-waktu { float: left; margin: 0 .9em 0 -.15em; }
.pc-gelembung::after { content: ""; display: block; clear: both; }
/* gelembung suara: jam tetap di pojok */
.pc-gelembung > .pc-waktu { float: none; position: absolute; top: auto; bottom: .45em; right: .65em; left: auto; margin: 0; }
.pc-akar[dir="rtl"] .pc-gelembung > .pc-waktu { right: auto; left: .65em; margin: 0; }
.pc-centang { width: 1.55em; height: 1em; display: block; fill: #8696a0; transition: fill .25s ease; }
.pc-centang.pc-dibaca { fill: #53bdeb; }

/* pengungkapan bertahap */
.pc-muncul { animation: pc-muncul .28s ease-out both; }
@keyframes pc-muncul { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pc-sembunyi { display: none !important; }

/* gelembung "sedang mengetik" (tiga titik) */
.pc-titik { display: inline-flex; gap: .28em; align-items: center; height: 1.38em; padding: 0 .15em; }
.pc-titik i { width: .45em; height: .45em; border-radius: 50%; background: #8696a0; display: block;
  animation: pc-lompat 1.1s infinite ease-in-out; }
.pc-titik i:nth-child(2) { animation-delay: .15s; }
.pc-titik i:nth-child(3) { animation-delay: .3s; }
@keyframes pc-lompat { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-.28em); opacity: 1; } }

/* pesan suara */
.pc-suara { display: flex; align-items: center; gap: .55em; min-width: 12.5em; padding: .15em 0 .95em; direction: ltr; }
.pc-akar[dir="rtl"] .pc-suara { direction: rtl; }
.pc-putar { flex: 0 0 auto; width: 2.1em; height: 2.1em; display: flex; align-items: center; justify-content: center; color: #54656f; }
.pc-putar svg { width: 1.35em; height: 1.35em; fill: currentColor; display: block; }
.pc-akar[dir="rtl"] .pc-putar svg { transform: scaleX(-1); }
.pc-gelombang { flex: 1 1 auto; display: flex; align-items: center; gap: 2px; height: 1.9em; min-width: 0; }
.pc-gelombang i { flex: 1 1 0; min-width: 2px; max-width: 3px; border-radius: 2px; background: #b3c4ba; display: block; }
.pc-gelombang i.pc-diputar { background: #53a7d8; }
.pc-mik { flex: 0 0 auto; width: 2.35em; height: 2.35em; border-radius: 50%; background: #0b0b0d; position: relative;
  display: flex; align-items: center; justify-content: center; }
.pc-mik img { width: 70%; height: 70%; object-fit: contain; }
.pc-mik svg { position: absolute; bottom: -.1em; inset-inline-start: -.2em; width: 1em; height: 1em; fill: #53bdeb; }
.pc-durasi { position: absolute; bottom: .55em; left: 4.3em; font-size: .72em; color: #667781; direction: ltr; }
.pc-akar[dir="rtl"] .pc-durasi { left: auto; right: 4.3em; }

/* kaki ponsel: kolom ketik (hiasan, tidak interaktif) */
.pc-kaki { flex: 0 0 auto; display: flex; align-items: center; gap: .4em; padding: .4em .45em .75em; background: #F0F2F5; }
.pc-kolom { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5em; background: #fff; border-radius: 1.4em;
  padding: .55em .85em; color: #8696a0; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.pc-kolom svg { width: 1.25em; height: 1.25em; fill: #8696a0; flex: 0 0 auto; }
.pc-isian { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-isian.pc-terisi { color: #111b21; text-overflow: clip; display: flex; justify-content: flex-end; } /* ujung ketikan selalu terlihat */
.pc-kirim { flex: 0 0 auto; width: 2.6em; height: 2.6em; border-radius: 50%; background: #00A884; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.pc-kirim svg { width: 1.25em; height: 1.25em; fill: #fff; display: block; }
.pc-akar[dir="rtl"] .pc-kirim svg.pc-panah { transform: scaleX(-1); }
.pc-rekam { color: #c0392b; display: flex; align-items: center; gap: .45em; font-variant-numeric: tabular-nums; }
.pc-rekam::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #c0392b; animation: pc-kedip 1s infinite; }
@keyframes pc-kedip { 50% { opacity: .35; } }
.pc-garis-rumah { position: absolute; bottom: .35em; left: 50%; width: 34%; margin-left: -17%; height: 4px; border-radius: 3px; background: rgba(0, 0, 0, .55); }

/* ---------- chip saran di bawah ponsel ---------- */
.pc-chip-wadah { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pc-chip-judul { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 0; }
.pc-chip-baris { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; min-width: 0; }
.pc-chip {
  font: inherit; font-size: .88rem; line-height: 1.25; cursor: pointer; max-width: 100%;
  padding: .5em .95em; border-radius: 999px; border: 1px solid rgba(212, 178, 106, .45);
  background: rgba(212, 178, 106, .08); color: inherit; text-align: center; overflow-wrap: anywhere;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pc-chip:hover { background: rgba(212, 178, 106, .18); border-color: rgba(212, 178, 106, .8); }
.pc-chip:focus-visible { outline: 2px solid #d4b26a; outline-offset: 2px; }
.pc-chip[aria-pressed="true"] { background: #d4b26a; border-color: #d4b26a; color: #0b1a14; }
.pc-kaki-catatan { font-size: .75rem; opacity: .6; margin: 0; text-align: center; }

.pc-akar [hidden] { display: none !important; }
.pc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .pc-muncul, .pc-titik i, .pc-rekam::before { animation: none !important; }
  .pc-centang, .pc-keadaan, .pc-chip { transition: none !important; }
}

/* aksara bersambung / tanpa huruf besar: jarak huruf merusak sambungan (Arab) */
.pc-akar:lang(ar) .pc-chip-judul, .pc-akar:lang(ar) .pc-tgl span,
.pc-akar:lang(zh) .pc-chip-judul, .pc-akar:lang(zh) .pc-tgl span,
.pc-akar:lang(th) .pc-chip-judul, .pc-akar:lang(th) .pc-tgl span { letter-spacing: 0; text-transform: none; }