/* K5: panel Tech Lead Assistant — disalin VERBATIM dari makmal/09-assistant/gaya.css bahagian "Panel" (baris portal mini .p-* 09 dibuang
   sebab .p-nama/.p-jawatan bertembung dengan kad pasukan K4). Penyesuaian K5 (sasaran sentuh 44px, kedudukan) dalam styles.css blok "Arah K5". */
/* ---------- Panel ---------- */
.tirai { position: fixed; inset: 0; z-index: 80; background: rgb(5 9 20 / .45); }
.pembantu {
  position: fixed; z-index: 90; top: 72px; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden;
  border-radius: 20px; border: 1px solid rgb(238 242 249 / .16);
  background: linear-gradient(180deg, rgb(19 30 58 / .9), rgb(10 16 32 / .94));
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 40px 80px -30px rgb(0 0 0 / .7);
  color: var(--ais);
}
.pembantu::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--cahaya) / .7), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .pembantu.masuk { animation: panel-masuk 320ms var(--lengkung) both; }
  @keyframes panel-masuk { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  .pb-blok { animation: blok-masuk 260ms var(--lengkung) both; }
  @keyframes blok-masuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.pb-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 18px; border-bottom: 1px solid var(--ais-garis); }
.pb-label { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ais); }
.pb-asal { margin-top: 4px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; color: var(--ais-redup); }
.pb-alat { display: flex; align-items: center; gap: 6px; }
.pb-bahasa { display: inline-grid; grid-auto-flow: column; padding: 3px; border-radius: 999px; border: 1px solid var(--ais-garis); }
.pb-bahasa button { min-height: 38px; min-width: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ais-redup); font: 500 11px/1 var(--mono); cursor: pointer; }
.pb-bahasa button[aria-pressed="true"] { background: var(--ais); color: var(--ink); }
.pb-tutup { min-height: 44px; min-width: 44px; border: 1px solid var(--ais-garis); border-radius: 50%; background: transparent; color: var(--ais); font-size: 22px; line-height: 1; cursor: pointer; }
.pb-notis { padding: 8px 18px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .04em; color: #F2E3C6; background: rgb(255 214 140 / .06); border-bottom: 1px solid rgb(255 214 140 / .18); }
.pb-isi { overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 18px; display: grid; gap: 14px; align-content: start; }
.pb-isi:focus { outline: none; }
.pb-tajuk-kecil { font: 500 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); }
.pb-cip { display: grid; gap: 8px; }
.pb-cip button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--ais-garis); background: rgb(255 255 255 / .03); color: var(--ais); font: 500 15px/1.3 var(--sans); text-align: left; cursor: pointer; transition: border-color 200ms var(--lengkung), background-color 200ms var(--lengkung); }
.pb-cip button::after { content: "→"; color: var(--ais-redup); }
.pb-cip button:hover, .pb-cip button:focus-visible { border-color: rgb(var(--cahaya) / .6); background: rgb(var(--cahaya) / .07); }
.pb-cip.sebaris { display: flex; flex-wrap: wrap; }
.pb-cip.sebaris button { min-height: 40px; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; }
.pb-cip.sebaris button::after { content: none; }
.pb-blok { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ais-garis); }
.pb-soalan { font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); }
.pb-soalan b { color: var(--ais); font-weight: 500; letter-spacing: .02em; text-transform: none; font-family: var(--sans); font-size: 15px; display: block; margin-top: 2px; }
.pb-jawapan { font-size: 15.5px; line-height: 1.55; color: #DCE3EF; }
.pb-isi .pk-grid { grid-template-columns: minmax(0, 1fr); }
.pb-isi .pk-kad { padding: 14px; }
.pb-senarai { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ais-garis); font-size: 14px; }
.pb-senarai li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--ais-garis); }
.pb-senarai .k { font: 500 12px/1.6 var(--mono); color: #CFE6FF; }
.pb-senarai .t { color: #DCE3EF; }
.pb-lagi { justify-self: start; min-height: 40px; border: 0; background: none; color: var(--ais-redup); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 0; }
.pb-tindakan { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-butang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--ais); color: var(--ink); font: 560 14.5px/1 var(--sans); cursor: pointer; }
.pb-butang.hantu { background: transparent; color: var(--ais); border: 1px solid rgb(238 242 249 / .4); }
.pb-ringkas { padding: 14px; border-radius: 14px; border: 1px dashed rgb(238 242 249 / .25); display: grid; gap: 8px; font-size: 14.5px; }
.pb-ringkas ol { margin: 0; padding-left: 18px; color: #DCE3EF; }
.pb-ringkas .saluran { font: 500 12px/1.6 var(--mono); color: #CFE6FF; }
.pb-taip { padding: 10px 16px 14px; border-top: 1px solid var(--ais-garis); display: grid; gap: 6px; }
.pb-taip label { font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8D97AC; }
.pb-taip-baris { display: flex; gap: 6px; }
.pb-taip input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ais-garis); background: rgb(255 255 255 / .03); color: var(--ais); font: 400 14px/1 var(--sans); }
.pb-taip input::placeholder { color: #8D97AC; }
.pb-taip button { min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ais-garis); background: transparent; color: var(--ais-redup); font: 500 11px/1 var(--mono); text-transform: uppercase; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--ais); color: var(--ink); font: 500 13px/1.4 var(--mono); }
html.kunci-skrol, html.kunci-skrol body { overflow: hidden; }

@media (max-width: 640px) {
  .pembantu { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(88vh, 88svh); border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  @media (prefers-reduced-motion: no-preference) { @keyframes panel-masuk { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } }
}
@media (prefers-reduced-motion: reduce) { .pb-cip button { transition: none; } }
/* Pintu 2 langkah 4 (p2d): link page dalam jawapan (`.pb-halaman`: "Hosting page", "For agencies page", "Team on the homepage", brief) duduk atas
   latar panel GELAP, bukan dalam kad putih → warna --ais (dulu --navy pk-link = kontras 1.66, ditangkap gate kontras keadaan jawapan). */
.pb-halaman .pk-link { color: var(--ais); }
/* Pintu 2 langkah 4 (verifier P1-1): `.pb-senarai .k` terkena kelas global `.k` (baris kerja K8, styles.css: padding 26px 34px + border-bottom)
   → baris MOF / perolehan / pek pecah. Reset di sini (panel homepage + 19 page + skrin penuh). */
.pb-senarai .k { position: static; display: block; padding: 0; border: 0; grid-template-columns: none; }
/* p2d verifier P2: saluran WhatsApp + e-mel = link sebenar, sebaris bila muat, tiada pemisah "·" tergantung @390 */
.pb-saluran { display: flex; flex-wrap: wrap; gap: 0 18px; font: 500 12.5px/1.6 var(--mono); }
/* Simulator iOS 29 Okt (P1): field "Or type your own" 14px → Safari iOS zum masuk bila fokus (skala 1.14, butang ASK terkeluar skrin, zum kekal
   selepas tutup panel). Skrin sentuh: ≥ 16px (tiada zum) + sasaran tekan 44px (styles.css dah minta 44px, tapi panel.css dimuat kemudian = 40px menang). */
@media (pointer: coarse) {
  .pb-taip input { font-size: 16px; min-height: 44px; }
  .pb-taip button { min-height: 44px; }
}