/* ===== Midnight AI - CSS Part 2: Programmer Space UI, code cards, call principles overlay ===== */

/* ---------- SIDEBAR RIWAYAT CHAT — Programmer Space (muncul dari KANAN) ---------- */
#psSidebarScrim {
  position: fixed; inset: 0; z-index: 219; background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s;
}
#psSidebarScrim.show { opacity: 1; visibility: visible; pointer-events: auto; }
#psSidebar {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 220;
  width: 300px; max-width: 84vw;
  background: #0d0e13; border-left: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
#psSidebar.open { transform: translateX(0); }
.ps-sb-header { padding: 16px 14px 12px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.ps-sb-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-sb-title { font-size: 14.5px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.ps-sb-close {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.ps-sb-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.ps-sb-newchat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: linear-gradient(135deg, #5cd6c0, #7c5cf7); color: #0a0a0f; border: none;
  border-radius: 12px; padding: 10px 0; font-family: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: filter .15s, transform .1s;
}
.ps-sb-newchat:hover { filter: brightness(1.06); }
.ps-sb-newchat:active { transform: scale(.97); }
#psHistList { flex: 1; overflow-y: auto; padding: 10px 10px 6px; }
#psHistList::-webkit-scrollbar { width: 6px; }
#psHistList::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.ps-hist-empty { padding: 30px 10px; text-align: center; color: rgba(255,255,255,.35); font-size: 12.5px; }
.ps-hist-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; margin-bottom: 2px; position: relative; transition: background .12s; color: #f0f0f2;
}
.ps-hist-item:hover { background: rgba(255,255,255,.05); }
.ps-hist-item.active { background: rgba(126,232,210,.1); border: 1px solid rgba(126,232,210,.22); }
.ps-hist-item .phi-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-hist-item .phi-actions { display: none; align-items: center; gap: 2px; flex-shrink: 0; }
.ps-hist-item:hover .phi-actions { display: flex; }
.phi-actions button { width: 24px; height: 24px; border: none; background: transparent; color: rgba(255,255,255,.5); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.phi-actions button:hover { background: rgba(255,255,255,.1); color: #fff; }
.phi-actions button.danger:hover { background: rgba(220,38,38,.18); color: #ff8b8b; }
.ps-sb-footer { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.3); flex-shrink: 0; }

/* --- Area chat --- */
#psMessages {
  flex: 1; overflow-y: auto; padding: 18px 16px 10px;
  display: flex; flex-direction: column; gap: 14px;
}
#psMessages::-webkit-scrollbar { width: 6px; }
#psMessages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.ps-empty {
  margin: auto; text-align: center; color: rgba(255,255,255,.4);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px;
}
.ps-empty svg { opacity: .5; }
.ps-empty b { color: rgba(255,255,255,.7); font-size: 15px; }
.ps-msg { max-width: 82%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.ps-msg.user { align-self: flex-end; background: linear-gradient(120deg, rgba(124,92,247,.32), rgba(92,214,192,.22)); color: #fff; border-bottom-right-radius: 4px; }
.ps-msg.ai { align-self: flex-start; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); color: #f0f0f2; border-bottom-left-radius: 4px; }
.ps-msg.ai .ps-msg-text { white-space: pre-wrap; word-wrap: break-word; }
.ps-msg.ai pre { background: rgba(0,0,0,.35); padding: 10px 12px; border-radius: 9px; overflow-x: auto; margin: 6px 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.ps-msg.ai code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.ps-msg.err { align-self: center; color: #f5a3a3; background: rgba(220,38,38,.12); border: 1px solid rgba(220,38,38,.24); font-size: 13px; }

/* ---------- BUBBLE "POLOS" — dipakai saat jawaban AI berisi kode: tanpa background/padding bubble chat,
   supaya panel kode (menulis live -> kartu label final) tampil sebagai elemen mandiri, bukan di dalam bubble. ---------- */
.ps-msg.ai.ps-code-only {
  background: transparent; border: none; padding: 0; max-width: 100%; width: 100%;
}
.ps-msg.ai.ps-code-only .ps-msg-text {
  display: block; padding: 2px 2px 8px; font-size: 12.5px; color: rgba(255,255,255,.55);
}
.ps-msg.ai.ps-code-only .ps-msg-text:empty { display: none; }
.ps-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; }
.ps-typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); animation: psTyping 1.1s ease-in-out infinite; }
.ps-typing span:nth-child(2) { animation-delay: .15s; }
.ps-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes psTyping { 0%,60%,100%{ transform: translateY(0); opacity:.4; } 30%{ transform: translateY(-4px); opacity:1; } }

/* --- Input --- */
#psInputWrap { flex-shrink: 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.08); }
.ps-input-row {
  display: flex; align-items: flex-end; gap: 8px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 8px 8px 8px 14px;
}
.ps-input-row textarea {
  flex: 1; background: transparent; border: none; resize: none; color: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.5; max-height: 140px; padding: 4px 0;
}
.ps-input-row textarea::placeholder { color: rgba(255,255,255,.35); }
#psSendBtn {
  width: 36px; height: 36px; border-radius: 12px; border: none; flex-shrink: 0;
  background: linear-gradient(135deg, #5cd6c0, #7c5cf7); color: #0a0a0f;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s, opacity .15s;
}
#psSendBtn:hover { transform: scale(1.06); }
#psSendBtn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.ps-hint { text-align: center; font-size: 10.5px; color: rgba(255,255,255,.3); padding-top: 8px; }

/* ---------- KARTU "SEDANG MENULIS KODE" (live typing, tampil sebelum kartu final Preview/Unduh) ---------- */
.ps-write-card {
  margin-top: 4px; width: 100%; max-width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(124,92,247,.28); background: #0b0c10;
  box-shadow: 0 8px 26px -10px rgba(124,92,247,.3);
  animation: psGenCardIn .3s cubic-bezier(.34,1.2,.4,1) both;
}
.ps-write-card .pswc-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 13px; font-size: 12.5px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; background: rgba(255,255,255,.03);
}
.ps-write-card .pswc-head .pswc-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #7ee8d2; flex-shrink: 0;
  animation: pswcDotBlink 1s ease-in-out infinite;
}
@keyframes pswcDotBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.ps-write-card .pswc-head span.pswc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ps-write-card .pswc-head .pswc-status { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.4); flex-shrink: 0; }
.ps-write-card .pswc-body {
  max-height: 46vh; min-height: 90px; overflow-y: auto; padding: 12px 13px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.65;
  color: #b8e8dc; white-space: pre; overflow-x: auto;
}
.ps-write-card .pswc-body::-webkit-scrollbar { width: 5px; height: 5px; }
.ps-write-card .pswc-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
.ps-write-card .pswc-cursor {
  display: inline-block; width: 6px; height: 13px; background: #7ee8d2; margin-left: 1px;
  vertical-align: -2px; animation: pswcCursorBlink .85s steps(1) infinite;
}
@keyframes pswcCursorBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* ---------- PREVIEW LIVE (real-time) — tabel HTML yang benar-benar sudah dirender,
   tampil di dalam kartu "sedang menulis" begitu ada halaman HTML terdeteksi, dan
   ikut ter-update tiap beberapa kode baru masuk, bukan menunggu animasi selesai. ---------- */
.pswc-tabs {
  display: flex; gap: 4px; padding: 8px 13px 0; border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.pswc-tab {
  padding: 6px 12px; border-radius: 8px 8px 0 0; font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.45); cursor: pointer; border: none; background: transparent;
  font-family: inherit; transition: color .15s, background .15s;
}
.pswc-tab.active { color: #7ee8d2; background: rgba(126,232,210,.09); }
.pswc-tab:hover { color: #fff; }
.pswc-live-wrap { display: none; position: relative; }
.pswc-live-wrap.show { display: block; }
.pswc-body.hide { display: none; }
.pswc-live-frame {
  width: 100%; height: 46vh; min-height: 160px; border: none; background: #fff;
  display: block;
}
.pswc-live-badge {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: rgba(10,10,15,.72); backdrop-filter: blur(4px);
  padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #7ee8d2;
  letter-spacing: .02em; pointer-events: none;
}
.pswc-live-badge .pswc-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #7ee8d2; animation: pswcDotBlink 1s ease-in-out infinite;
}

/* ---------- KARTU KODE HTML (di dalam Programmer Space, versi gelap) ---------- */
.ps-msg.ai .ps-code-card {
  margin-top: 4px; width: 100%; max-width: 100%; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
}
.ps-code-card .pscc-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; color: #fff;
}
.ps-code-card .pscc-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-code-card .pscc-head svg { flex-shrink: 0; opacity: .7; }
.ps-code-card .pscc-actions { display: flex; gap: 6px; padding: 10px 12px; }
.ps-code-card .pscc-actions-secondary { padding-top: 0; justify-content: center; }
.pscc-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03);
  color: #f0f0f2; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pscc-btn.primary { background: linear-gradient(135deg, #5cd6c0, #7c5cf7); color: #0a0a0f; border-color: transparent; }
.pscc-btn:hover { opacity: .85; }
.pscc-btn.pscc-copy { flex: none; padding: 7px 18px; border-style: dashed; color: rgba(255,255,255,.55); transition: background .15s, color .15s, border-color .15s, transform .1s; }
.pscc-btn.pscc-copy:active { transform: scale(.96); }
.pscc-btn.pscc-copy.copied { border-style: solid; border-color: #22c55e; color: #6ee7a0; background: rgba(34,197,94,.1); }
.ps-code-card .pscc-footer { padding: 7px 12px; font-size: 10.5px; color: rgba(255,255,255,.32); border-top: 1px solid rgba(255,255,255,.07); }

/* ---------- LABEL GAMBAR DI CHAT BIASA ---------- */
.msg-image-wrap {
  position: relative; display: inline-block; width: 64px; height: 64px; flex-shrink: 0;
}
.msg-image-wrap .msg-attach-thumb { width: 100%; height: 100%; }
.msg-image-label {
  display: inline-flex; align-items: center; gap: 3px;
  position: absolute; bottom: 3px; left: 3px; right: 3px; z-index: 2;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  border-radius: 6px; padding: 2px 4px; font-size: 8.5px; font-weight: 700; color: #fff;
  letter-spacing: .01em; pointer-events: none; overflow: hidden; white-space: nowrap;
}
.msg-image-label svg { flex-shrink: 0; opacity: .9; width: 9px; height: 9px; }
.msg-image-label span { overflow: hidden; text-overflow: ellipsis; }
.msg-image-label.label-generated {
  background: linear-gradient(120deg, rgba(245,120,154,.85), rgba(124,92,247,.85));
  position: absolute; bottom: auto; top: 8px; left: 8px; right: auto;
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
}

/* ---------- TOMBOL PERJELAS PROMPT GAMBAR (di toolbar utama) ---------- */
.prompt-enhance-toggle.image-mode {
  background: linear-gradient(120deg, rgba(245,120,154,.15), rgba(124,92,247,.15)) !important;
  border-color: rgba(245,120,154,.4) !important;
  color: #e879c7 !important;
}
.prompt-enhance-toggle.image-mode svg { color: #e879c7; }

/* ---------- KARTU LOADING "MEMPERJELAS PROMPT HTML" (Programmer Space) ---------- */
.ps-gen-card {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(124,92,247,.3); background: rgba(255,255,255,.03); width: 260px; max-width: 100%;
  box-shadow: 0 6px 20px -8px rgba(124,92,247,.3);
  animation: psGenCardIn .35s cubic-bezier(.34,1.2,.4,1) both;
}
@keyframes psGenCardIn { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ps-gen-card .ps-gen-top { position: relative; padding: 16px 14px 14px; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.ps-gen-card .ps-gen-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(92,214,192,.14) 45%, rgba(124,92,247,.18) 50%, rgba(92,214,192,.14) 55%, transparent 70%);
  background-size: 220% 100%; animation: psGenShimmer 2.1s ease-in-out infinite;
}
@keyframes psGenShimmer { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } }
.ps-gen-card .ps-gen-orb { position: relative; z-index: 1; width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ps-gen-card .ps-gen-orb svg { width: 16px; height: 16px; color: #7ee8d2; position: relative; z-index: 2; animation: psOrbPulse 1.6s ease-in-out infinite; }
.ps-gen-card .ps-gen-orb::before, .ps-gen-card .ps-gen-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #7ee8d2; border-right-color: rgba(124,92,247,.6);
}
.ps-gen-card .ps-gen-orb::before { animation: psOrbSpin 1.1s linear infinite; }
.ps-gen-card .ps-gen-orb::after { inset: -6px; border-top-color: rgba(124,92,247,.35); border-right-color: transparent; animation: psOrbSpin 1.9s linear infinite reverse; }
@keyframes psOrbSpin { to { transform: rotate(360deg); } }
@keyframes psOrbPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.88); } }
.ps-gen-card .ps-gen-txt { position: relative; z-index: 1; font-size: 13px; font-weight: 700; color: #fff; }
.ps-gen-card .ps-gen-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ps-gen-card .ps-gen-bar-track { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.ps-gen-card .ps-gen-bar-fill { height: 100%; border-radius: 3px; width: 8%; background: linear-gradient(90deg, #5cd6c0, #7c5cf7); transition: width 1.1s cubic-bezier(.4,0,.2,1); }
.ps-gen-card .ps-gen-hint { font-size: 10.5px; color: rgba(255,255,255,.4); }

/* ---------- MODAL PREVIEW HTML (Programmer Space) ---------- */
#psPreviewModal {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 230;
  display: none; flex-direction: column;
}
#psPreviewModal.show { display: flex; }
.ps-preview-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
  background: #121319; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0;
}
.ps-preview-top .ps-pv-title { font-weight: 700; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-preview-top .ps-pv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ps-preview-top .icon-btn { color: rgba(255,255,255,.7); }
.ps-preview-top .icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
#psPreviewFrame { flex: 1; border: none; background: #fff; width: 100%; }

/* ========== HALAMAN CALL ELEGAN ========== */
#midnightCallPage {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: radial-gradient(ellipse at 28% 18%, rgba(106,92,247,.22) 0%, transparent 52%),
              radial-gradient(ellipse at 78% 82%, rgba(245,120,154,.18) 0%, transparent 48%),
              radial-gradient(ellipse at 55% 50%, rgba(15,12,30,1) 0%, #080810 100%);
  color: #fff; overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.04);
  transition: opacity .38s cubic-bezier(.4,0,.2,1), transform .42s cubic-bezier(.16,1,.3,1), visibility .42s;
  will-change: opacity, transform;
}
#midnightCallPage.active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1);
}
#midnightCallPage.closing {
  opacity: 0; transform: scale(.96);
  transition: opacity .3s cubic-bezier(.4,0,1,1), transform .32s cubic-bezier(.4,0,1,1), visibility .32s;
}
/* Elemen internal masuk dengan stagger halus saat halaman aktif */
#callTopBar, #callCenter, #callBottom {
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
}
#midnightCallPage.active #callTopBar { opacity: 1; transform: translateY(0); transition-delay: .08s; }
#midnightCallPage.active #callCenter { opacity: 1; transform: translateY(0); transition-delay: .14s; }
#midnightCallPage.active #callBottom { opacity: 1; transform: translateY(0); transition-delay: .2s; }

/* Floating orbs */
.call-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); z-index: 0; }
.call-orb-1 { width: 340px; height: 340px; background: rgba(106,92,247,.2); top: -100px; left: -80px; animation: cOrbA 10s ease-in-out infinite; }
.call-orb-2 { width: 260px; height: 260px; background: rgba(245,120,154,.16); bottom: -70px; right: -50px; animation: cOrbB 13s ease-in-out infinite; }
.call-orb-3 { width: 180px; height: 180px; background: rgba(92,214,192,.1); top: 38%; left: 58%; animation: cOrbC 15s ease-in-out infinite; }
@keyframes cOrbA{0%,100%{transform:translate(0,0)scale(1);}50%{transform:translate(28px,22px)scale(1.08);}}
@keyframes cOrbB{0%,100%{transform:translate(0,0)scale(1);}50%{transform:translate(-24px,-18px)scale(1.06);}}
@keyframes cOrbC{0%,100%{transform:translate(0,0)scale(1);}50%{transform:translate(18px,26px)scale(.93);}}

/* Stars bg */
#midnightCallPage::after {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1px 1px at 15% 22%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 8%, rgba(255,255,255,.28) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 68%, rgba(255,255,255,.22) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 45%, rgba(255,255,255,.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 80%, rgba(255,255,255,.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 15%, rgba(167,139,245,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 63% 75%, rgba(245,120,154,.4) 0%, transparent 100%);
}

/* Top bar */
#callTopBar { width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:16px 14px 0; z-index:10; flex-shrink:0; }

/* ---------- Tombol logo pemicu kartu prinsip (ruang kosong kiri atas) ---------- */
.call-principle-logo-btn {
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  cursor:pointer; backdrop-filter:blur(10px); overflow:hidden; padding:0;
  transition: background .22s cubic-bezier(.4,0,.2,1), border-color .22s, transform .15s;
}
.call-principle-logo-btn img { width:100%; height:100%; object-fit:cover; display:block; }
.call-principle-logo-btn:hover { background:rgba(255,255,255,.12); border-color:rgba(167,139,245,.5); }
.call-principle-logo-btn:active { transform:scale(.92); }

/* ---------- Kartu Prinsip Panggilan (overlay elegan) ---------- */
#callPrincipleOverlay {
  position: fixed; inset: 0; z-index: 400;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background: rgba(6,5,12,.72); backdrop-filter: blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .32s cubic-bezier(.4,0,.2,1), visibility .32s;
}
#callPrincipleOverlay.open { opacity:1; visibility:visible; pointer-events:auto; }

.principle-card {
  position:relative; width:100%; max-width:360px;
  background: radial-gradient(ellipse at 22% 0%, rgba(106,92,247,.25) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 100%, rgba(245,120,154,.18) 0%, transparent 50%),
              rgba(16,14,26,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  padding: 26px 22px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
  color:#fff;
  transform: translateY(14px) scale(.96);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
#callPrincipleOverlay.open .principle-card { transform: translateY(0) scale(1); }

.principle-card-icon {
  width:52px; height:52px; border-radius:16px; margin:0 auto 14px;
  background: linear-gradient(145deg, rgba(106,92,247,.35), rgba(245,120,154,.25));
  border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}
.principle-card-icon svg { width:24px; height:24px; color:#e8e2ff; }

.principle-card-title {
  text-align:center; font-size:16.5px; font-weight:800; letter-spacing:-.01em;
  margin-bottom:6px; color:#fff;
}
.principle-card-sub {
  text-align:center; font-size:11.5px; color:rgba(255,255,255,.45); font-weight:600;
  margin-bottom:16px; letter-spacing:.02em;
}

.principle-card-body {
  font-size:13px; line-height:1.65; color:rgba(255,255,255,.72);
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 15px; margin-bottom:18px;
  max-height: 46vh; overflow-y:auto;
  white-space: pre-wrap;
}
.principle-card-body::-webkit-scrollbar { width:5px; }
.principle-card-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:4px; }

/* Textarea muncul saat mode edit */
.principle-card-edit {
  display:none; width:100%; font-family:inherit; font-size:13px; line-height:1.6;
  color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(167,139,245,.4);
  border-radius:14px; padding:13px 14px; margin-bottom:18px; resize:vertical;
  min-height:120px; max-height:44vh;
}
#callPrincipleOverlay.edit-mode .principle-card-body { display:none; }
#callPrincipleOverlay.edit-mode .principle-card-edit { display:block; }

.principle-card-actions { display:flex; flex-direction:column; gap:9px; }
.principle-btn {
  width:100%; border:none; border-radius:13px; padding:12px 0; font-family:inherit;
  font-size:13.5px; font-weight:700; cursor:pointer; letter-spacing:.01em;
  transition: transform .15s, background .2s, opacity .2s;
}
.principle-btn:active { transform: scale(.97); }
.principle-btn-primary {
  background: linear-gradient(135deg, #7c6cf7, #a75cf5);
  color:#fff; box-shadow:0 10px 26px rgba(106,92,247,.35);
}
.principle-btn-primary:hover { opacity:.92; }
.principle-btn-ghost {
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75);
}
.principle-btn-ghost:hover { background: rgba(255,255,255,.1); }
.principle-btn-row { display:flex; gap:9px; }
.principle-btn-row .principle-btn { flex:1; }

/* Badge terverifikasi + animasi masuk saat submit dari mode edit */
.principle-verified-badge {
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:14px; padding:9px 0; border-radius:999px;
  background: rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3);
  color: rgba(134,239,172,.95); font-size:11.5px; font-weight:700;
  opacity:0; transform: translateY(6px); pointer-events:none;
  transition: opacity .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.34,1.56,.64,1);
}
.principle-verified-badge.show {
  opacity:1; transform: translateY(0);
  animation: principleBadgePulse .5s cubic-bezier(.34,1.56,.64,1);
}
.principle-verified-badge svg { width:14px; height:14px; flex-shrink:0; }
@keyframes principleBadgePulse {
  0% { transform: scale(.7) translateY(6px); opacity:0; }
  60% { transform: scale(1.06) translateY(0); opacity:1; }
  100% { transform: scale(1) translateY(0); }
}

/* Perizinan mikrofon */
.call-mic-perm-btn {
  display:flex; align-items:center; gap:6px; flex-shrink:0; min-width:0;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:7px 12px 7px 10px; font-size:10.5px; font-weight:600;
  color:rgba(255,255,255,.55); cursor:pointer; backdrop-filter:blur(10px);
  font-family:inherit;
  transition: background .22s cubic-bezier(.4,0,.2,1), border-color .22s, color .22s, transform .15s;
}
.call-mic-perm-btn span#callMicPermLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.call-mic-perm-btn:hover { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.24); }
.call-mic-perm-btn:active { transform:scale(.96); }
.call-mic-perm-btn .perm-dot { width:6px; height:6px; border-radius:50%; background:#ef4444; flex-shrink:0; transition:background .3s, box-shadow .3s; box-shadow:0 0 6px #ef444488; }
.call-mic-perm-btn.granted .perm-dot { background:#22c55e; box-shadow:0 0 6px #22c55e88; }
.call-mic-perm-btn.granted { color:rgba(134,239,172,.85); border-color:rgba(34,197,94,.28); background:rgba(34,197,94,.06); }
.call-mic-perm-btn svg { width:12px; height:12px; opacity:.7; flex-shrink:0; }

.call-top-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* Autolisten & suara btn */
.call-pill-btn {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:7px 11px; font-size:10px; font-weight:600;
  color:rgba(255,255,255,.5); cursor:pointer; backdrop-filter:blur(10px);
  font-family:inherit; position:relative; white-space:nowrap;
  transition: background .22s cubic-bezier(.4,0,.2,1), border-color .22s, color .22s, transform .15s;
}
.call-pill-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.call-pill-btn:active { transform:scale(.96); }
.call-pill-btn.on { background:rgba(106,92,247,.18); border-color:rgba(106,92,247,.4); color:rgba(167,139,245,.9); }
.call-pill-btn svg { width:12px; height:12px; flex-shrink:0; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.call-pill-btn.on svg { transform:rotate(-360deg); }

/* Voice dropdown */
.call-voice-drop {
  position:absolute; right:0; top:42px;
  background:rgba(14,14,24,.97); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:10px; min-width:250px; max-height:300px; overflow-y:auto;
  z-index:300; box-shadow:0 20px 56px rgba(0,0,0,.65); backdrop-filter:blur(20px);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.96); transform-origin:top right;
  transition: opacity .2s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.34,1.56,.64,1), visibility .22s;
  pointer-events:none;
}
.call-voice-drop.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
.call-voice-drop::-webkit-scrollbar { width:4px; }
.call-voice-drop::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }
.cvd-filter { display:flex; gap:4px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.08); }
.cvd-filter-btn {
  flex:1; font-size:10px; font-weight:700; padding:5px 0; border-radius:9px;
  border:none; background:rgba(255,255,255,.05); color:rgba(255,255,255,.4);
  cursor:pointer; transition:all .15s; font-family:inherit;
}
.cvd-filter-btn.active { background:rgba(106,92,247,.28); color:rgba(167,139,245,1); }
.cvd-item {
  width:100%; text-align:left; padding:9px 10px; border-radius:11px; border:none;
  background:transparent; color:rgba(255,255,255,.6); font-size:11.5px; cursor:pointer;
  display:flex; align-items:center; gap:9px; transition:background .12s; font-family:inherit;
}
.cvd-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.cvd-item.active { background:rgba(106,92,247,.2); color:rgba(167,139,245,1); }
.cvd-item .cvd-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.cvd-item .cvd-lang { font-size:9.5px; color:rgba(255,255,255,.3); margin-top:1px; }
.cvd-check { width:13px; height:13px; color:#a78bf5; flex-shrink:0; }

/* Center */
#callCenter { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:5; padding:16px 24px; width:100%; }

.call-avatar-wrap { position:relative; width:164px; height:164px; display:flex; align-items:center; justify-content:center; }
.call-ring { position:absolute; border-radius:50%; border:1.5px solid rgba(167,139,245,.2); opacity:0; }
.call-ring-a { inset:-22px; }
.call-ring-b { inset:-40px; }
.call-ring-c { inset:-60px; }
.call-avatar-img {
  width:148px; height:148px; border-radius:50%;
  background:var(--accent) url('https://hostgambar.vercel.app/image/AgACAgUAAyEGAATk_963AAICHGqIbusgQc2prKeZaCX5MTq33FoSAAL7FGsb-5lIVM7d8EEPsfd3AQADAgADeQADPQQ') center/cover;
  border:3px solid rgba(167,139,245,.35);
  box-shadow:0 0 0 9px rgba(106,92,247,.09), 0 0 48px rgba(106,92,247,.28);
  position:relative; z-index:2;
  transition: box-shadow .5s cubic-bezier(.4,0,.2,1), border-color .5s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.34,1.56,.64,1);
}
#midnightCallPage.active .call-avatar-img { animation: avatarSettle .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes avatarSettle { 0%{ transform:scale(.86); } 60%{ transform:scale(1.03); } 100%{ transform:scale(1); } }
.call-avatar-glow {
  position:absolute; inset:-18px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(106,92,247,.32) 0%, transparent 70%);
  filter:blur(18px); z-index:0; opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1);
}
/* Speaking */
#midnightCallPage.cs-speaking .call-avatar-img { border-color:rgba(167,139,245,.85); box-shadow:0 0 0 9px rgba(106,92,247,.18),0 0 64px rgba(106,92,247,.5); }
#midnightCallPage.cs-speaking .call-avatar-glow { opacity:1; }
#midnightCallPage.cs-speaking .call-ring-a { animation:callRingOut 2s ease-out infinite; }
#midnightCallPage.cs-speaking .call-ring-b { animation:callRingOut 2s ease-out .35s infinite; }
#midnightCallPage.cs-speaking .call-ring-c { animation:callRingOut 2s ease-out .7s infinite; }
@keyframes callRingOut{0%{opacity:.55;transform:scale(.82);}100%{opacity:0;transform:scale(1.55);}}
/* Listening */
#midnightCallPage.cs-listening .call-avatar-img { border-color:rgba(92,214,192,.7); box-shadow:0 0 0 9px rgba(92,214,192,.08),0 0 42px rgba(92,214,192,.3); }

.call-ai-name { font-size:20px; font-weight:800; letter-spacing:-.02em; text-shadow:0 2px 16px rgba(106,92,247,.5); }
.call-status-txt { font-size:12px; color:rgba(255,255,255,.45); letter-spacing:.02em; transition:color .35s cubic-bezier(.4,0,.2,1); min-height:16px; }
#midnightCallPage.cs-listening .call-status-txt { color:rgba(134,239,197,.75); }
#midnightCallPage.cs-speaking .call-status-txt { color:rgba(196,181,253,.85); }

/* Waveform */
.call-waveform { display:flex; align-items:center; justify-content:center; gap:4px; height:38px; }
.call-wvb { width:3.5px; border-radius:3px; background:rgba(167,139,245,.35); height:6px; transition:height .1s ease, background .25s; }

/* --- Speaking: tiap bar delay & durasi beda dikit biar gelombangnya kelihatan hidup, bukan serempak --- */
#midnightCallPage.cs-speaking .call-wvb { background:rgba(167,139,245,.85); animation-name:callWvSpeak; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
#midnightCallPage.cs-speaking .call-wvb:nth-child(1){ animation-duration:.86s; animation-delay:0s; }
#midnightCallPage.cs-speaking .call-wvb:nth-child(2){ animation-duration:.94s; animation-delay:.1s; }
#midnightCallPage.cs-speaking .call-wvb:nth-child(3){ animation-duration:.78s; animation-delay:.2s; }
#midnightCallPage.cs-speaking .call-wvb:nth-child(4){ animation-duration:.98s; animation-delay:.08s; }
#midnightCallPage.cs-speaking .call-wvb:nth-child(5){ animation-duration:.82s; animation-delay:.18s; }
@keyframes callWvSpeak{0%,100%{height:6px;}50%{height:30px;}}

/* --- Listening: sama, delay & durasi bertingkat di seluruh 5 bar --- */
#midnightCallPage.cs-listening .call-wvb { background:rgba(92,214,192,.75); animation-name:callWvListen; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
#midnightCallPage.cs-listening .call-wvb:nth-child(1){ animation-duration:1.05s; animation-delay:0s; }
#midnightCallPage.cs-listening .call-wvb:nth-child(2){ animation-duration:1.15s; animation-delay:.12s; }
#midnightCallPage.cs-listening .call-wvb:nth-child(3){ animation-duration:.95s; animation-delay:.24s; }
#midnightCallPage.cs-listening .call-wvb:nth-child(4){ animation-duration:1.2s; animation-delay:.09s; }
#midnightCallPage.cs-listening .call-wvb:nth-child(5){ animation-duration:1s; animation-delay:.2s; }
@keyframes callWvListen{0%,100%{height:5px;}50%{height:18px;}}

.call-transcript { font-size:13.5px; color:rgba(255,255,255,.78); text-align:center; max-width:340px; min-height:44px; line-height:1.65; padding:0 8px; font-weight:400; opacity:0; transform:translateY(4px); transition:opacity .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1); }
.call-transcript.vis { opacity:1; transform:translateY(0); }

/* Text fallback */
.call-txt-fallback {
  width:100%; max-width:340px; align-items:center; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; overflow:hidden; backdrop-filter:blur(10px);
  display:flex; opacity:0; visibility:hidden; max-height:0; margin-bottom:0; pointer-events:none;
  transition: opacity .26s cubic-bezier(.4,0,.2,1), max-height .32s cubic-bezier(.4,0,.2,1), margin-bottom .32s cubic-bezier(.4,0,.2,1), visibility .32s, transform .3s cubic-bezier(.4,0,.2,1);
  transform: translateY(6px);
}
.call-txt-fallback.vis { opacity:1; visibility:visible; max-height:60px; margin-bottom:2px; pointer-events:auto; transform:translateY(0); }
.call-txt-input { flex:1; background:transparent; border:none; padding:12px 18px; color:#fff; font-size:13px; font-family:inherit; }
.call-txt-input::placeholder { color:rgba(255,255,255,.32); }
.call-txt-input:focus { outline:none; }
.call-txt-send { width:40px; height:40px; margin:3px; border-radius:50%; background:rgba(106,92,247,.7); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .18s, transform .15s; }
.call-txt-send:hover { background:rgba(106,92,247,.95); }
.call-txt-send:active { transform:scale(.92); }
.call-txt-send svg { width:15px; height:15px; }

/* Bottom controls */
#callBottom { width:100%; display:flex; flex-direction:column; align-items:center; gap:20px; padding:0 24px 36px; z-index:10; flex-shrink:0; }
.call-ctrl-row { display:flex; align-items:center; justify-content:center; gap:28px; width:100%; }
.call-ctrl-btn {
  width:52px; height:52px; border-radius:50%; border:none; background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.65); display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(8px); font-family:inherit;
  transition: background .2s cubic-bezier(.4,0,.2,1), color .2s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.call-ctrl-btn:hover { background:rgba(255,255,255,.15); color:#fff; transform:scale(1.06); }
.call-ctrl-btn:active { transform:scale(.92); }
.call-ctrl-btn svg { width:19px; height:19px; }

/* Main mic button */
.call-mic-main-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.call-mic-halo { position:absolute; width:76px; height:76px; border-radius:50%; background:rgba(106,92,247,.3); filter:blur(16px); opacity:0; pointer-events:none; transition:opacity .35s cubic-bezier(.4,0,.2,1); }
#midnightCallPage.cs-listening .call-mic-halo { opacity:1; animation:micHaloPulse 1.6s ease-in-out infinite; }
@keyframes micHaloPulse{0%,100%{transform:scale(1);opacity:.45;}50%{transform:scale(1.45);opacity:.8;}}

#callMicMain {
  width:70px; height:70px; border-radius:50%; border:none;
  background:linear-gradient(135deg,#6a5cf7,#7c3aed); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 28px rgba(106,92,247,.55); font-family:inherit;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1);
}
#callMicMain:hover { transform:scale(1.06); box-shadow:0 8px 36px rgba(106,92,247,.72); }
#callMicMain:active { transform:scale(.94); }
#callMicMain svg { width:27px; height:27px; transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
#callMicMain.muted { background:rgba(255,255,255,.12); box-shadow:none; }
#callMicMain.muted svg { transform:scale(.92); opacity:.7; }

#callEndMain {
  width:52px; height:52px; border-radius:50%; border:none;
  background:rgba(239,68,68,.85); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 20px rgba(239,68,68,.45); font-family:inherit;
  transition: background .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
#callEndMain svg { width:22px; height:22px; transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
#callEndMain:hover { background:#ef4444; transform:scale(1.06); box-shadow:0 6px 26px rgba(239,68,68,.6); }
#callEndMain:active { transform:scale(.9) rotate(-8deg); }