/* ================= Mas Agra — Halaman Chat Pelanggan ================= */
:root {
  --red-900: #6E1414;
  --red-800: #8B1A1A;
  --red-700: #A21F24;
  --red-600: #B8282E;
  --red-50:  #FCEDEB;
  --cream-50:  #FFFCF6;
  --cream-100: #FBF5EA;
  --cream-200: #F4EAD7;
  --cream-300: #E8DAC0;
  --gold: #D9A441;
  --ink: #3A2A22;
  --ink-2: #6B5A4E;
  --muted: #9A8A7C;
  --green: #2F7A4A;
  --shadow: 0 10px 30px rgba(110, 20, 20, .10);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--red-900);
  background: linear-gradient(135deg, var(--red-900), var(--red-700) 60%, var(--red-600));
  -webkit-font-smoothing: antialiased;
}
.chat-shell {
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 0;
  padding: 24px;
}
/* ---------- panel kiri (merah) ---------- */
.chat-side {
  color: #FFF4E2;
  padding: 36px 30px;
  display: flex;
  align-items: center;
}
.side-logo { width: 76px; height: 76px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.chat-side h1 { font-size: 34px; margin: 18px 0 6px; letter-spacing: .3px; }
.side-sub { margin: 0 0 26px; color: #F6DCC0; line-height: 1.55; }
.side-list { list-style: none; padding: 0; margin: 0 0 26px; }
.side-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 8px;
  background: rgba(255, 244, 226, .08);
  border: 1px solid rgba(255, 244, 226, .14);
  border-radius: 12px; font-weight: 500;
}
.side-list span { font-size: 18px; }
.side-note {
  font-size: 13px; line-height: 1.5;
  background: rgba(0,0,0,.18); border-left: 3px solid var(--gold);
  padding: 12px 14px; border-radius: 8px; color: #F6DCC0;
}
.side-note b { color: #FFE3A8; }

/* ---------- panel chat (cream) ---------- */
.chat-main {
  background: var(--cream-100);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(90deg, var(--red-800), var(--red-700));
  color: #fff;
}
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.who { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.who strong { font-size: 17px; }
.status { font-size: 12.5px; color: #FBE3CF; display: flex; align-items: center; gap: 6px; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: #6EE7A0; box-shadow: 0 0 0 3px rgba(110,231,160,.25); }
.head-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25);
  padding: 8px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px;
}
.head-btn:hover { background: rgba(255,255,255,.22); }

.chat-body {
  flex: 1; overflow-y: auto; padding: 22px 20px 10px;
  background:
    radial-gradient(circle at 20px 20px, rgba(162,31,36,.045) 2px, transparent 2.5px) 0 0 / 28px 28px,
    var(--cream-100);
  scroll-behavior: smooth;
}
.row { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-end; animation: pop .22s ease-out; }
.row.user { justify-content: flex-end; }
.row .mini { width: 30px; height: 30px; border-radius: 50%; flex: none; background: #fff; }
.row.cont .mini { visibility: hidden; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.bubble {
  max-width: min(78%, 560px);
  padding: 11px 15px; border-radius: 16px;
  line-height: 1.55; font-size: 14.5px; word-wrap: break-word;
}
.bot .bubble {
  background: #fff; border: 1px solid var(--cream-300);
  border-bottom-left-radius: 5px; box-shadow: 0 2px 6px rgba(58,42,34,.05);
}
.user .bubble {
  background: linear-gradient(135deg, var(--red-700), var(--red-600));
  color: #fff; border-bottom-right-radius: 5px;
  box-shadow: 0 4px 12px rgba(162,31,36,.22);
  white-space: pre-wrap;
}
.bubble p { margin: 0 0 6px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 4px 0 8px; padding-left: 20px; }
.bubble li { margin: 2px 0; }
.bubble strong { color: var(--red-800); }
.user .bubble strong { color: #fff; }
.bubble a { color: var(--red-700); font-weight: 600; }
.time { font-size: 11px; color: var(--muted); margin: -6px 0 12px 40px; }
.row.user + .time { text-align: right; margin-right: 4px; }

/* kartu informasi (agen, jadwal, S&K) */
.cards { display: grid; gap: 10px; width: min(78%, 560px); }
.card {
  background: #fff; border: 1px solid var(--cream-300);
  border-left: 4px solid var(--red-700);
  border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(58,42,34,.05);
}
.card.muted { opacity: .6; border-left-color: var(--muted); }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.card-h b { font-size: 15px; color: var(--ink); }
.badge {
  flex: none; font-size: 12px; font-weight: 700;
  background: var(--red-50); color: var(--red-700);
  padding: 3px 9px; border-radius: 999px;
}
.card dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; font-size: 13.5px; }
.card dt { color: var(--ink-2); }
.card dd { margin: 0; }
.card dd a { color: var(--red-700); font-weight: 600; text-decoration: none; }
.card dd a:hover { text-decoration: underline; }
.card .txt { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; }

/* form refund */
.form-card {
  width: min(78%, 480px);
  background: #fff; border: 1px solid var(--cream-300); border-top: 4px solid var(--red-700);
  border-radius: 14px; padding: 16px; box-shadow: var(--shadow);
}
.form-card h4 { margin: 0 0 12px; color: var(--red-800); font-size: 15.5px; }
.fld { margin-bottom: 10px; }
.fld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.fld input {
  width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--cream-300);
  background: var(--cream-50); font: inherit; font-size: 14px; color: var(--ink);
}
.fld input:focus { outline: none; border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(184,40,46,.14); background: #fff; }
.fld input[readonly] { background: var(--cream-200); color: var(--ink-2); }
.fld.err input { border-color: #C0392B; }
.fld small { color: #B3261E; font-size: 12px; }
.form-card button {
  width: 100%; margin-top: 4px; padding: 11px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--red-700), var(--red-600)); color: #fff; font: inherit; font-weight: 700;
}
.form-card button:hover { filter: brightness(1.06); }
.form-card.done { opacity: .6; pointer-events: none; }

/* indikator mengetik */
.typing .bubble { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--red-600); opacity: .35; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: 1; transform: translateY(-2px); } }

/* balasan cepat */
.quick {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 18px 4px;
  background: var(--cream-100); max-height: 128px; overflow-y: auto;
}
.quick:empty { display: none; }
.quick button {
  border: 1.5px solid var(--red-700); color: var(--red-700); background: #fff;
  padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: .15s;
}
.quick button:hover { background: var(--red-700); color: #fff; }

/* input */
.chat-input {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px; background: #fff; border-top: 1px solid var(--cream-300);
}
.chat-input textarea {
  flex: 1; resize: none; max-height: 120px;
  border: 1.5px solid var(--cream-300); background: var(--cream-50);
  border-radius: 14px; padding: 11px 14px; font: inherit; font-size: 14.5px; color: var(--ink);
}
.chat-input textarea:focus { outline: none; border-color: var(--red-600); background: #fff; }
.send, .date-btn {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.send { background: linear-gradient(135deg, var(--red-700), var(--red-600)); color: #fff; box-shadow: 0 6px 14px rgba(162,31,36,.28); }
.send:disabled { opacity: .5; cursor: default; }
.date-btn { position: relative; background: var(--cream-200); color: var(--red-700); border: 1.5px solid var(--gold); overflow: hidden; }
.date-btn[hidden] { display: none; }
.date-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.date-btn input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.date-btn.pulse { animation: pulse 1.6s ease-out 2; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(217,164,65,.6); } 100% { box-shadow: 0 0 0 12px rgba(217,164,65,0); } }
.foot { text-align: center; font-size: 11.5px; color: var(--muted); padding: 0 12px 10px; background: #fff; }

/* ---------- responsif ---------- */
@media (max-width: 900px) {
  .chat-shell { grid-template-columns: 1fr; padding: 0; }
  .chat-side { display: none; }
  .chat-main { border-radius: 0; height: 100dvh; }
  .bubble, .cards, .form-card { max-width: 88%; width: auto; }
  .cards, .form-card { width: 88%; }
  .head-btn span { display: none; }
}

/* kode percakapan & info agen titik naik */
.sesi { margin-top: 3px; align-self: flex-start; background: rgba(255,255,255,.14); border: 1px dashed rgba(255,227,168,.6); color: #FFE9C7;
  font: inherit; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; cursor: pointer; }
.sesi b { color: #fff; letter-spacing: .3px; }
.sesi:hover { background: rgba(255,255,255,.22); }
.sesi.copied::after { content: ' ✓ disalin'; color: #B8F5CF; }
.card dt.sub, .card dd.sub { font-size: 12.5px; }
.card dt.sub { padding-left: 10px; color: var(--muted); }
.card dd.sub { color: var(--ink-2); padding-left: 8px; border-left: 2px solid var(--cream-300); }

/* slider foto kelas */
.card.has-img { padding-top: 0; overflow: hidden; }
.slider { position: relative; margin: 0 -14px 12px; background: var(--cream-200); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slides::-webkit-scrollbar { display: none; }
.slides img { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; scroll-snap-align: start; cursor: zoom-in; user-select: none; }
.sl-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--red-800); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); opacity: 0; transition: opacity .15s; }
.slider:hover .sl-btn { opacity: 1; }
.sl-btn.prev { left: 8px; } .sl-btn.next { right: 8px; }
.dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.dots i.on { background: #fff; width: 18px; border-radius: 4px; }
.sl-count { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.kchip { display: inline-block; margin: -2px 0 8px; font-size: 12px; font-weight: 700; color: var(--red-800); background: var(--red-50); border: 1px solid #F1C9C4; padding: 2px 10px; border-radius: 999px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,8,6,.88); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-width: min(1100px, 100%); max-height: 90vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox button { position: absolute; top: 14px; right: 18px; background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; }
@media (hover: none) { .sl-btn { opacity: .9; } }
.sesi { white-space: nowrap; }
.sesi .lbl-s { display: none; }
@media (max-width: 900px) { .sesi .lbl { display: none; } .sesi .lbl-s { display: inline; } }

/* =====================================================================
   RESPONSIVE WEB DESIGN — halaman chat
   ===================================================================== */
img { max-width: 100%; }
@media (max-width: 1100px) and (min-width: 901px) {
  .chat-shell { grid-template-columns: 270px 1fr; padding: 18px; }
  .chat-side { padding: 24px 18px; }
  .chat-side h1 { font-size: 28px; }
}
@media (max-width: 900px) {
  body { background: var(--cream-100); }
  .chat-main { height: 100vh; height: 100dvh; }
  .chat-head { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .chat-body { padding: 16px 12px 8px; }
  .bubble { max-width: 86%; font-size: 14.5px; }
  .cards, .form-card { width: calc(100% - 40px); max-width: 520px; }
  .quick { flex-wrap: nowrap; overflow-x: auto; max-height: none; padding: 8px 12px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .quick::-webkit-scrollbar { display: none; }
  .quick button { flex: none; }
  .chat-input { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .chat-input textarea { font-size: 16px; } /* mencegah zoom otomatis di iPhone */
  .fld input { font-size: 16px; }
  .chat-main > .foot, .chat-main > .cfoot { display: none; }
  .time { margin-left: 40px; }
}
@media (max-width: 420px) {
  .row .mini { width: 26px; height: 26px; }
  .bubble { max-width: 88%; padding: 10px 13px; }
  .cards, .form-card { width: calc(100% - 36px); }
  .card dl, .ccard dl { grid-template-columns: 84px 1fr; font-size: 13px; }
  .who strong { font-size: 16px; }
  .avatar { width: 38px; height: 38px; }
  .head-btn { padding: 8px; }
}
/* layar pendek (HP landscape) */
@media (max-height: 480px) and (max-width: 900px) {
  .chat-head { padding-top: 6px; padding-bottom: 6px; }
  .status { display: none; }
  .quick { padding-top: 4px; }
}

/* ================= Live chat dengan CS ================= */
.cs-banner { padding: 9px 16px; font-size: 13px; line-height: 1.45; border-top: 1px solid var(--cream-300); }
.cs-banner.b-menunggu { background: #FFF4DC; color: #7A4F0E; }
.cs-banner.b-cs { background: #E7F4EC; color: #1B5E36; }
.cs-banner button { font: inherit; font-size: 12px; font-weight: 700; margin-left: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; background: #fff; color: inherit; cursor: pointer; }
.sys-pill { width: fit-content; max-width: 90%; margin: 12px auto; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; text-align: center; color: #1B5E36; background: #E7F4EC; border: 1px dashed #A8D5B9; }
.row.cs .bubble { background: #F2FAF5; border-color: #A8D5B9; }
.row.cs .bubble strong { color: #1D6F42; }
.cs-name { font-size: 11.5px; font-weight: 800; color: #1D6F42; margin-bottom: 2px; }
.status .cs-dot { background: #6EE7A0; }
.status .wait-dot { background: #FFD58A; box-shadow: 0 0 0 3px rgba(255,213,138,.3); animation: blink 1.2s infinite; }

/* ================= Lampiran foto (E-Ticket / tiket perjalanan) ================= */
.attach-bar[hidden] { display: none !important; }
.attach-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px 0; background: #fff; }
.attach-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 14px;
  color: #fff; background: linear-gradient(135deg, var(--red-600, #B8282E), var(--red-800, #8B1A1A)); padding: 9px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(162, 31, 36, .28); animation: attachPulse 1.8s ease-in-out 2; }
.attach-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.attach-btn.busy { opacity: .7; pointer-events: none; }
.attach-bar small { color: var(--muted); font-size: 12px; }
.attach-bar small.err { color: #B3261E; font-weight: 600; }
.attach-bar.wajib small::before { content: 'Wajib · '; color: #B3261E; font-weight: 700; }
@keyframes attachPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.bubble.photo { padding: 6px; }
.bubble.photo img { display: block; max-width: 220px; max-height: 260px; border-radius: 12px; }
.bubble.photo span { display: block; font-size: 11.5px; opacity: .85; padding: 4px 4px 0; }
.foot .adm-link { color: inherit; opacity: .55; margin-left: 4px; }
@media (max-width: 720px) { .attach-bar { padding: 8px 12px 0; } .attach-btn { font-size: 13.5px; padding: 8px 14px; } }

/* ================= Mode suara (telepon Mas Agra) ================= */
.mic-btn { flex: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--cream-100); color: var(--red-700); border: 1.5px solid var(--cream-300); transition: .15s; }
.mic-btn:hover { border-color: var(--red-600); }
.mic-btn.on { background: var(--red-700); color: #fff; border-color: var(--red-700); box-shadow: 0 0 0 4px rgba(184,40,46,.18); }
.voice-panel[hidden] { display: none !important; }
.voice-panel { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: #fff;
  background: linear-gradient(135deg, var(--red-900), var(--red-700)); border-top: 1px solid rgba(255,255,255,.12); }
.vp-orb { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #FFE9C7; }
.vp-orb svg { position: relative; z-index: 1; }
.vp-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,227,168,.7); opacity: 0; }
.voice-panel[data-state="listen"] .vp-orb { background: #2F7A4A; color: #fff; }
.voice-panel[data-state="listen"] .vp-orb i { animation: vpRing 1.6s ease-out infinite; }
.voice-panel[data-state="listen"] .vp-orb i + i { animation-delay: .8s; }
.voice-panel[data-state="speak"] .vp-orb { background: var(--gold); color: var(--red-900); animation: vpTalk .6s ease-in-out infinite alternate; }
.voice-panel[data-state="proses"] .vp-orb i { opacity: 1; border-color: transparent; border-top-color: #FFE9C7; animation: vpSpin .9s linear infinite; }
.voice-panel[data-state="pause"] .vp-orb { opacity: .7; }
@keyframes vpRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes vpTalk { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes vpSpin { to { transform: rotate(360deg); } }
.vp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-info b { font-size: 14px; }
.vp-info small { font-size: 12.5px; color: #FFE9C7; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-info small:empty { display: none; }
.vp-act { display: flex; gap: 6px; flex: none; }
.vp-btn { height: 38px; min-width: 38px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: inherit; font-size: 13px; font-weight: 700; }
.vp-btn:hover { background: rgba(255,255,255,.22); }
.vp-btn.on { background: #2F7A4A; border-color: #6EE7A0; }
.vp-btn.end { background: #fff; color: var(--red-700); border-color: #fff; }
.vp-btn[hidden] { display: none; }
.row.user .bubble.voice::before { content: '🎙️ '; }
@media (prefers-reduced-motion: reduce) { .vp-orb, .vp-orb i { animation: none !important; } }
@media (max-width: 420px) {
  .voice-panel { padding: 8px 10px; gap: 8px; }
  .vp-orb { width: 38px; height: 38px; }
  .vp-btn { height: 34px; min-width: 34px; padding: 0 8px; }
  .vp-btn.cs span { display: none; }
  .mic-btn, .send { width: 42px; height: 42px; }
}
.card-h.no-title { align-items: center; }
.card-h.no-title .kchip { margin: 0; }

/* ---------- daftar pilihan (titik naik/turun, kota, provinsi) ---------- */
.pilih {
  width: min(78%, 560px); background: #fff; border: 1px solid var(--cream-300); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(58,42,34,.05); overflow: hidden;
}
.pl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--cream-200); background: linear-gradient(180deg, var(--cream-50), #fff); }
.pl-h b { font-size: 15px; color: var(--red-800); line-height: 1.35; }
.pl-h span { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--cream-200); padding: 2px 9px; border-radius: 999px; }
.pl-cari { display: flex; align-items: center; gap: 8px; margin: 10px 12px 2px; padding: 0 12px; border: 1px solid var(--cream-300); border-radius: 10px; background: var(--cream-50); color: var(--muted); }
.pl-cari:focus-within { border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(184,40,46,.12); background: #fff; }
.pl-cari input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); padding: 9px 0; outline: none; }
.pl-list { list-style: none; margin: 0; padding: 6px 0; }
.pl-row { padding: 2px 8px; }
.pl-row + .pl-row { border-top: 1px dashed var(--cream-200); }
.pl-row.lebih { display: none; }
.pilih.semua .pl-row.lebih, .pilih.mencari .pl-row.lebih { display: block; }
.pl-row[hidden] { display: none !important; }
.pl-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; font: inherit; color: var(--ink); padding: 9px 6px; border-radius: 10px;
  transition: background .15s;
}
.pl-pick:hover { background: var(--cream-100); }
.pl-pick:focus-visible { outline: 2px solid var(--red-600); outline-offset: 1px; }
.pl-no { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--red-700); background: var(--red-50); }
.pl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-t b { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.pl-t small { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.pl-go { flex: none; width: 8px; height: 8px; border-top: 2px solid var(--red-600); border-right: 2px solid var(--red-600); transform: rotate(45deg); margin-right: 6px; opacity: .55; transition: opacity .15s, transform .15s; }
.pl-pick:hover .pl-go { opacity: 1; transform: translateX(2px) rotate(45deg); }
.pl-jams { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 0 6px 9px 40px; }
.pl-lbl { font-size: 11px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.pl-jam { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--cream-100); border: 1px solid var(--cream-300); padding: 1px 7px; border-radius: 6px; }
.pl-jam.lebih { display: none; }
.pl-row.buka .pl-jam.lebih { display: inline-block; }
.pl-more { font: inherit; font-size: 12px; font-weight: 700; color: var(--red-700); background: none; border: 0; padding: 1px 4px; cursor: pointer; }
.pl-more:hover { text-decoration: underline; }
.pl-all { display: block; width: calc(100% - 24px); margin: 0 12px 10px; padding: 9px; border: 1px dashed #E7B9B4; border-radius: 10px; background: var(--red-50); color: var(--red-700); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.pl-all:hover { background: #F9DCD8; }
.pl-kosong { padding: 10px 14px 12px; font-size: 13px; color: var(--ink-2); }
.pl-f { padding: 9px 14px 11px; font-size: 12.5px; color: var(--ink-2); background: var(--cream-50); border-top: 1px solid var(--cream-200); }
.pilih.done .pl-pick { cursor: default; }
.pilih.done .pl-pick:hover { background: transparent; }
.pilih.done .pl-go, .pilih.done .pl-cari, .pilih.done .pl-all, .pilih.done .pl-f { display: none; }
.pilih.done .pl-row:not(.dipilih) { opacity: .55; }
.pl-row.dipilih .pl-pick { background: var(--red-50); }
.pl-row.dipilih .pl-no { background: var(--red-700); color: #fff; }
@media (max-width: 900px) { .pilih { width: 88%; } }
@media (max-width: 420px) { .pilih { width: calc(100% - 36px); } .pl-jams { padding-left: 38px; } }
.pilih.mencari .pl-all { display: none; }
.pl-lokasi {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 10px 12px 2px; padding: 10px 12px; text-align: left; cursor: pointer;
  border: 1px solid #BFE0CB; border-radius: 12px; background: linear-gradient(135deg, #EEF8F1, #F7FCF8); color: var(--ink); font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.pl-lokasi:hover { border-color: var(--green); box-shadow: 0 2px 10px rgba(47,122,74,.15); }
.pl-lokasi:disabled { opacity: .7; cursor: progress; }
.pl-lokasi > span:last-child { display: flex; flex-direction: column; }
.pl-lokasi b { font-size: 14px; color: var(--green); }
.pl-lokasi small { font-size: 12px; color: var(--ink-2); }
.pl-pin { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #BFE0CB; font-size: 16px; }
.pilih.done .pl-lokasi { display: none; }