/* Gaya "kartu customer" untuk halaman agent: header navy bersudut membulat, kapsul, kartu berbingkai biru, pil. Dipasang lewat agentCdCssLink() (includes/layout.php). Warna lewat variabel --cd-*; mode gelap otomatis. */
/* ── Konsep desain halaman customer: header navy bersudut bawah membulat, ikon bulat, kapsul/pil, kartu berbingkai biru dengan ubin ikon.
   Warna dipusatkan di variabel --cd-* supaya mudah disesuaikan (mode gelap otomatis). ── */
:root{--cd-navy:#16096f;--cd-blue:#2a3ccf;--cd-teal:#52bccb;--cd-ink:#1b1b3a;--cd-mute:#6b6f85;--cd-lav:#c9c4ff;--cd-page:#fff;--cd-card:#fff;--cd-tile:#eef0ff;--cd-line:#e4e6f0;--cd-shadow:rgba(42,60,207,.10);--cd-shadow-hover:rgba(42,60,207,.24);--cd-soft:#d3d7f3}
@media(prefers-color-scheme:dark){:root{--cd-page:#100d36;--cd-card:#1b1850;--cd-tile:#2a2778;--cd-ink:#eceaff;--cd-mute:#a9acd6;--cd-line:#34308a;--cd-blue:#6f7cf5;--cd-shadow:rgba(0,0,0,.35);--cd-shadow-hover:rgba(111,124,245,.35);--cd-soft:#3a3892}}
body{background:var(--cd-page)}
.cd-hero{background:var(--cd-navy);border-radius:0 0 30px 30px;padding:26px 24px 30px;color:#fff}
.cd-wrap{max-width:1100px;margin:0 auto}
.cd-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cd-avatar{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;font-weight:800;flex-shrink:0;letter-spacing:.02em}
.cd-hello{flex:1;min-width:180px}
.cd-hello h1{font-size:1.35rem;font-weight:700;line-height:1.25;color:#fff}
.cd-hello p{font-size:.88rem;color:var(--cd-lav);margin-top:2px}
.cd-state{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:var(--cd-teal);color:var(--cd-navy);font-size:.88rem;font-weight:800;white-space:nowrap}
.cd-state.off{background:#fde68a;color:#78350f}
.cd-state .dot{width:9px;height:9px;border-radius:50%;background:#15803d;box-shadow:0 0 0 3px rgba(21,128,61,.25)}
.cd-state.off .dot{background:#b45309;box-shadow:0 0 0 3px rgba(180,83,9,.25)}
.cd-caps{display:flex;flex-wrap:nowrap;gap:8px;margin-top:18px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.cd-caps::-webkit-scrollbar{display:none}
.cd-cap{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);background:transparent;color:#fff;font-size:.84rem;font-weight:700;white-space:nowrap;text-decoration:none}
.cd-cap:hover{background:#fff;color:var(--cd-navy);text-decoration:none}
.cd-body{padding:26px 24px 40px}
.cd-sect{font-size:1.08rem;font-weight:800;color:var(--cd-ink)}
.cd-sect-sub{font-size:.84rem;color:var(--cd-mute);margin:2px 0 14px}
.cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:26px}
.cd-card{display:flex;align-items:center;gap:14px;padding:14px;background:var(--cd-card);border:1.5px solid var(--cd-soft);border-radius:18px;box-shadow:0 2px 10px var(--cd-shadow);color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
a.cd-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--cd-shadow-hover);text-decoration:none}
a.cd-card:active{transform:scale(.985)}
.cd-ic{width:52px;height:52px;border-radius:14px;background:var(--cd-tile);color:var(--cd-blue);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.cd-info{flex:1;min-width:0}
.cd-num{font-size:1.7rem;font-weight:800;color:var(--cd-ink);line-height:1.1}
.cd-nm{font-size:1.02rem;font-weight:700;color:var(--cd-ink);line-height:1.3}
.cd-lb{font-size:.82rem;color:var(--cd-mute);margin-top:2px;line-height:1.35}
.cd-chip{display:inline-block;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--cd-tile);color:var(--cd-blue);margin-top:6px;margin-right:4px}
.cd-pick{flex-shrink:0;padding:9px 20px;border-radius:999px;background:var(--cd-blue);color:#fff;font-size:.88rem;font-weight:700;line-height:1;white-space:nowrap}
a.cd-card:hover .cd-pick{background:var(--cd-navy)}
.cd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-bottom:8px}
.cd-level{margin-bottom:26px;background:var(--cd-card)}
.cd-level.top .cd-ic{background:#dcfce7;color:#166534}
.cd-online{display:inline-block;width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.25);margin-right:6px}
@media(max-width:640px){.cd-hero{padding:20px 16px 24px}.cd-body{padding:20px 16px 32px}.cd-list{grid-template-columns:1fr}.cd-state{order:3}}


/* ── Dipakai halaman agent lain (mis. Pesan Teks): ikon bulat berjudul, kolom cari pil putih, kapsul filter aktif, kartu percakapan, paginasi ── */
.cd-title{display:flex;align-items:center;gap:14px}
.cd-title .cd-avatar{font-size:1.5rem}
.cd-title h1{font-size:1.35rem;font-weight:700;line-height:1.25;color:#fff}
.cd-title p{font-size:.88rem;color:var(--cd-lav);margin-top:2px}
.cd-search{position:relative;margin-top:18px}
.cd-search>i.ti-search{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--cd-navy);font-size:1.15rem;pointer-events:none}
.cd-search input[type=text]{width:100%;padding:14px 46px 14px 48px;background:#fff;color:#1b1b3a;border:none;border-radius:999px;font-size:.95rem;outline:none;box-shadow:0 3px 12px rgba(0,0,0,.18)}
.cd-search input[type=text]::placeholder{color:#9a9db3}
.cd-search input[type=text]:focus{border:none;box-shadow:0 0 0 3px rgba(82,188,203,.55)}
.cd-search .cd-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#6b6f85;font-size:1.1rem;text-decoration:none}
.cd-search .cd-clear:hover{background:#eef0ff;text-decoration:none}
.cd-cap.on{background:#fff;color:var(--cd-navy);border-color:#fff}
.cd-feed{display:flex;flex-direction:column;gap:12px}
.cd-thread{align-items:flex-start;flex-wrap:wrap}
.cd-thread.unread{box-shadow:0 6px 18px var(--cd-shadow-hover)}
.cd-thread.slow{border-color:#dc2626;background:rgba(220,38,38,.07)}
.cd-av{width:46px;height:46px;border-radius:50%;background:var(--cd-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;flex-shrink:0}
.cd-thread.slow .cd-av{background:#dc2626}
.cd-nmrow{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cd-time{margin-left:auto;font-size:.78rem;color:var(--cd-mute);white-space:nowrap}
.cd-tag{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--cd-tile);color:var(--cd-blue);text-decoration:none;white-space:nowrap}
a.cd-tag:hover{text-decoration:none;filter:brightness(.95)}
.cd-tag.new{background:var(--cd-blue);color:#fff}
.cd-tag.read{background:rgba(107,111,133,.15);color:var(--cd-mute)}
.cd-tag.warn{background:#fee2e2;color:#b91c1c}
.cd-tag.ok{background:#dcfce7;color:#166534}
.cd-tag.hub{background:#e0e7ff;color:#3730a3}
.cd-tag.teal{background:#e6f6f9;color:#0f6b7a}
.cd-tag.gray{background:rgba(107,111,133,.15);color:var(--cd-mute)}
.cd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cd-last{font-size:.86rem;color:var(--cd-mute);margin-top:5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.cd-last i{margin-right:3px}
.cd-note{font-size:.84rem;color:var(--cd-mute);display:flex;align-items:center;gap:5px;margin-top:3px;cursor:pointer}
.cd-thread .hist-label-input{background:var(--cd-card) !important;color:var(--cd-ink) !important;border:1px solid var(--cd-line) !important;border-radius:10px !important}
.cd-thread .cd-note button{background:var(--cd-blue) !important;border-radius:10px !important}
.cd-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;flex-shrink:0}
.cd-actions .cd-pick{text-align:center;text-decoration:none}
.cd-ghost{padding:8px 18px;border-radius:999px;border:1.5px solid var(--cd-blue);color:var(--cd-blue);font-size:.8rem;font-weight:700;line-height:1;text-align:center;text-decoration:none;white-space:nowrap}
.cd-ghost:hover{background:var(--cd-tile);text-decoration:none}
.cd-empty{text-align:center;color:var(--cd-mute);padding:44px 10px;font-size:.92rem;line-height:1.5}
.cd-empty i{display:block;font-size:2.4rem;color:#b9bdd6;margin-bottom:8px}
.cd-empty b{color:var(--cd-ink)}
.cd-pages{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:22px}
.cd-pages a{min-width:38px;padding:9px 12px;border-radius:999px;border:1.5px solid var(--cd-blue);color:var(--cd-blue);font-size:.84rem;font-weight:700;text-align:center;text-decoration:none}
.cd-pages a:hover{background:var(--cd-tile);text-decoration:none}
.cd-pages a.on{background:var(--cd-blue);color:#fff}
@media(max-width:640px){.cd-thread .cd-actions{flex-direction:row;width:100%}.cd-thread .cd-actions>*{flex:1}.cd-time{margin-left:0;width:100%}}

/* ── Riwayat panggilan (history.php): baris kapsul berlabel, kotak isi (pesan, catatan, follow up), tombol kecil ── */
.cd-caprow{display:flex;align-items:center;gap:10px;margin-top:12px}
.cd-caprow .cd-caps{margin-top:0;flex:1;min-width:0}
.cd-caplabel{flex:0 0 78px;white-space:nowrap;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--cd-lav)}
.cd-cap.sm{padding:6px 13px;font-size:.8rem}
button.cd-cap{font-family:inherit;cursor:pointer}
.cd-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:10px}
.cd-box{background:var(--cd-tile);border-radius:14px;padding:10px 12px;min-width:0}
.cd-box-h{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--cd-mute);margin-bottom:5px;display:flex;align-items:center;gap:5px}
.cd-box .notes-text{color:var(--cd-ink)}
.cd-box .notes-toggle,.cd-box .notes-edit-btn:hover{color:var(--cd-blue)}
.cd-box .notes-edit-btn{color:var(--cd-mute)}
.cd-box .fu-notes-text{color:var(--cd-mute)}
.cd-box .fu-wrap{min-width:0}
.cd-dash{color:var(--cd-mute);font-size:.84rem}
@media(max-width:640px){.cd-caplabel{flex-basis:70px;font-size:.62rem}}

/* ── Daftar berbentuk tabel yang bisa digeser ke samping (history.php): kartu berbingkai biru, header tabel bernuansa customer ── */
.cd-tablecard{background:var(--cd-card);border:1.5px solid var(--cd-soft);border-radius:18px;box-shadow:0 2px 10px var(--cd-shadow);overflow:hidden}
.cd-tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cd-tablecard table{width:100%;border-collapse:collapse}
.cd-tablecard th{background:var(--cd-tile);color:var(--cd-mute);border-bottom:2px solid var(--cd-line);font-size:.72rem;letter-spacing:.05em;white-space:nowrap}
.cd-tablecard td{color:var(--cd-ink);border-bottom:1px solid var(--cd-line);vertical-align:top}
.cd-tablecard tr:last-child td{border-bottom:none}
.cd-tablecard tr:hover td{background:var(--cd-tile)}
.cd-tablecard td.cd-cust{min-width:240px}
.cd-tablecard td.notes-cell{min-width:200px}
.cd-tablecard td .cd-tag{white-space:nowrap}
.cd-tablecard tr.cd-row-slow td{background:rgba(220,38,38,.09)}
.cd-tablecard tr.cd-row-slow td:first-child{box-shadow:inset 4px 0 0 #dc2626}
.cd-tablecard tr.cd-row-unread td{background:rgba(42,60,207,.07)}
.cd-tablecard tr.cd-row-slow:hover td,.cd-tablecard tr.cd-row-unread:hover td{filter:brightness(.97)}
.cd-tag.amber{background:#fef3c7;color:#92400e}

/* ── Percakapan agent (agent_message.php): tema "chat" halaman customer ──────────────────────────────────────────────────────────────
   Variabel warna dipetakan ulang HANYA di dalam .cd-chat (seperti body.view-chat di customer.css), sehingga panel, kartu Aksi Order,
   dan semua dialog (yang memakai var(--surface, --border, --text1..3, --primary)) ikut berganti tema tanpa mengubah markup/skrip satu per satu.
   Pesan agent = balon biru berteks putih (kanan); pesan customer = balon putih bergaris tipis (kiri); kolom ketik membulat; tombol pil biru. */
.cd-chat,.cd-page{--surface:#fff;--surface2:#f1f3fa;--border:#e4e6f0;--text1:#1b1b3a;--text2:#4b4f68;--text3:#6b6f85;--primary:#2a3ccf;--primary-d:#16096f;--primary-light:#eef0ff;--brand-grad:linear-gradient(135deg,#2a3ccf,#16096f);--shadow-lg:0 12px 30px rgba(22,9,111,.18);--cd-list:#f3f5fb;--cd-soft:#d3d7f3;
  background:var(--cd-page);color:var(--text1);min-height:calc(100vh - 60px)}
@media(prefers-color-scheme:dark){.cd-chat,.cd-page{--surface:#1b1850;--surface2:#24206a;--border:#34308a;--text1:#eceaff;--text2:#c9c9ee;--text3:#a9acd6;--primary:#8f9bff;--primary-d:#6f7cf5;--primary-light:#2a2778;--shadow-lg:0 12px 30px rgba(0,0,0,.5);--cd-list:#14123f;--cd-soft:#3a3892}}
.cd-chat a{color:var(--primary)}
/* panel: bingkai biru 2px + header navy (ikon bulat, nama, keterangan berwarna lavender) */
.cd-chat .msg-panel,.cd-chat .order-panel{border:1.5px solid var(--cd-soft);border-radius:18px;box-shadow:0 2px 10px var(--cd-shadow)}
.cd-chat .msg-panel{padding-top:0;overflow:hidden}
.cd-chat .msg-header{background:var(--cd-navy);margin:0 -16px 16px;padding:16px;border-bottom:none;border-radius:0 0 22px 22px}
.cd-chat .msg-avatar{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.cd-chat .msg-title{color:#fff;font-size:1.1rem}
.cd-chat .msg-sub{color:var(--cd-lav)}
.cd-chat .msg-sub a{color:#fff}
/* area pesan + balon */
.cd-chat .msg-list{background:var(--cd-list);border:1px solid var(--border);border-radius:18px;padding:12px;max-height:min(52vh,440px)}
.cd-chat .msg-bubble{font-size:.92rem}
.cd-chat .msg-bubble.agent{background:var(--cd-blue);color:#fff;border-color:var(--cd-blue);box-shadow:none;border-radius:18px 18px 4px 18px}
.cd-chat .msg-bubble.customer{background:#fff;color:#1b1b3a;border:1px solid var(--cd-line);box-shadow:0 1px 3px rgba(22,9,111,.08);border-radius:18px 18px 18px 4px}
@media(prefers-color-scheme:dark){.cd-chat .msg-bubble.agent{background:#3446e0;border-color:#4b5bf0}}
.cd-chat .msg-bubble.agent a{color:#fff;text-decoration:underline}
.cd-chat .msg-bubble.agent .msg-reply-preview{border-left-color:rgba(255,255,255,.7)}
.cd-chat .msg-bubble.agent [style*="color"]{color:inherit}
/* kolom ketik + tombol */
.cd-chat .msg-input-row textarea{border:1.5px solid var(--cd-line);border-radius:16px}
.cd-chat .msg-input-row textarea:focus{outline:none;border-color:var(--cd-blue);box-shadow:0 0 0 3px rgba(42,60,207,.14)}
.cd-chat .btn{border-radius:999px}
.cd-chat .btn-primary{background:var(--cd-blue);color:#fff}
.cd-chat .msg-edit-area textarea{border-radius:12px}
.cd-chat .reply-banner{border-left-color:var(--cd-blue);border-radius:12px}
.cd-chat .order-btn{border-radius:999px}
.cd-chat .order-btn-offer{background:var(--cd-blue)}
/* dialog (follow up, presentasi, pembayaran, pembatalan) */
.cd-chat .fu-toast{border-radius:20px}
.cd-chat .fu-toast-save{background:var(--cd-blue);border-radius:999px;padding:9px 20px}
.cd-chat .fu-toast-cancel{border-radius:999px;padding:9px 20px}
.cd-chat .fu-result-btn,.cd-chat .pres-composer-item,.cd-chat .pres-composer-btn{border-radius:14px}
.cd-chat .fu-result-btn:hover,.cd-chat .fu-textarea:focus,.cd-chat .pres-composer-add-row input:focus{border-color:var(--cd-blue)}
.cd-chat .fu-result-btn.selected{border-color:var(--cd-blue);background:var(--cd-tile);color:var(--text1)}
@media(max-width:640px){.cd-chat .msg-page{padding:12px}}

/* ── Halaman agent umum (.cd-page): fee, laporan, profil, jadwal, tenant, dll ─────────────────────────────────────────────────────────
   Pembungkus .cd-page memetakan ulang variabel warna (sama seperti .cd-chat) sehingga kartu/tombol/formulir/tabel bawaan layout.php
   ikut tema customer tanpa menulis ulang markup. Header halaman = .cd-hero (di dalam .cd-page, di atas .container). */
.cd-page{background:var(--cd-page);color:var(--text1);min-height:calc(100vh - 60px)}
.cd-page .container{max-width:1100px;padding:26px 24px 44px}
.cd-page .page-title{color:var(--cd-ink)}
.cd-page .page-sub{color:var(--cd-mute)}
.cd-page .card{background:var(--cd-card);border:1.5px solid var(--cd-soft);border-radius:18px;box-shadow:0 2px 10px var(--cd-shadow)}
.cd-page .card-title{color:var(--cd-ink)}
.cd-page .btn{border-radius:999px}
.cd-page .btn-lg,.cd-page .btn-xl{border-radius:999px}
.cd-page .btn-primary{background:var(--cd-blue);color:#fff}
.cd-page .btn-ghost{border:1.5px solid var(--cd-blue);color:var(--cd-blue)}
.cd-page .btn-ghost:hover{background:var(--cd-tile)}
.cd-page input[type=text],.cd-page input[type=email],.cd-page input[type=password],.cd-page input[type=number],.cd-page input[type=url],.cd-page input[type=date],.cd-page input[type=time],.cd-page input[type=tel],.cd-page select,.cd-page textarea{border:1.5px solid var(--cd-line);border-radius:14px;background:var(--cd-card);color:var(--cd-ink)}
.cd-page input:focus,.cd-page select:focus,.cd-page textarea:focus{border-color:var(--cd-blue);box-shadow:0 0 0 3px rgba(42,60,207,.14)}
.cd-page label{color:var(--cd-mute)}
.cd-page th{background:var(--cd-tile);color:var(--cd-mute);border-bottom:2px solid var(--cd-line)}
.cd-page td{color:var(--cd-ink);border-bottom:1px solid var(--cd-line)}
.cd-page tr:hover td{background:var(--cd-tile)}
.cd-page .badge-blue{background:var(--cd-tile);color:var(--cd-blue)}
.cd-page .badge-gray{background:rgba(107,111,133,.15);color:var(--cd-mute)}
.cd-page .alert-info{background:var(--cd-tile);color:var(--cd-ink);border:1px solid var(--cd-line)}
.cd-page .stat-card{background:var(--cd-card);border:1.5px solid var(--cd-soft);border-radius:18px;box-shadow:0 2px 10px var(--cd-shadow)}
.cd-page .stat-value{color:var(--cd-ink)}
.cd-page .stat-label{color:var(--cd-mute)}
.cd-page .form-hint{color:var(--cd-mute)}
.cd-capform{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.cd-capform input[type=date]{width:auto;padding:7px 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.12);color:#fff;font-size:.82rem;color-scheme:dark}
.cd-capform span{color:var(--cd-lav)}
.cd-capform button{padding:7px 16px;border-radius:999px;border:none;background:#fff;color:var(--cd-navy);font-weight:700;font-size:.82rem;cursor:pointer}
.cd-note-line{font-size:.84rem;color:var(--cd-mute);margin-bottom:16px;display:flex;align-items:center;gap:6px}
@media(max-width:640px){.cd-page .container{padding:18px 14px 36px}}
.cd-title p b,.cd-title p a{color:#fff}
/* laporan (includes/report_page.php): judul sudah ada di .cd-hero, sisakan tombol Unduh/Cetak di kanan */
.cd-page .rp-top .page-title,.cd-page .rp-top .page-sub{display:none}
.cd-page .rp-top{justify-content:center}
.cd-page .rp-top>div{justify-content:center}
.cd-page .rp-filter a.chip{border:1.5px solid var(--cd-blue);background:transparent;color:var(--cd-blue)}
.cd-page .rp-filter a.chip.on{background:var(--cd-blue);color:#fff}
.cd-page .rp-filter input[type=date]{border:1.5px solid var(--cd-line);border-radius:999px;background:var(--cd-card);color:var(--cd-ink)}
/* panggilan aktif (agent_call.php) */
.cd-chat .call-panel{border:1.5px solid var(--cd-soft);border-radius:22px;box-shadow:0 2px 10px var(--cd-shadow);background:var(--surface)}
.cd-chat .caller-avatar{background:var(--cd-navy);box-shadow:0 0 0 4px var(--cd-tile)}
.cd-chat .caller-sub{color:var(--cd-mute)}
.cd-page .rp-kpi,.cd-page .rp-card{border:1.5px solid var(--cd-soft);border-radius:18px;box-shadow:0 2px 10px var(--cd-shadow);background:var(--cd-card)}
.cd-page .rp-kpi .l,.cd-page .rp-kpi .h{color:var(--cd-mute)}
/* halaman admin: blok .page-header bawaan dipindah ke dalam hero navy (.cd-ph) -- judul putih, aksi berupa pil */
.cd-phrow{display:flex;align-items:center;gap:14px}
.cd-phrow .cd-avatar{font-size:1.5rem;flex-shrink:0}
.cd-phrow .page-header{flex:1;min-width:0;margin-bottom:0;align-items:center !important}
.cd-ph .page-title{color:#fff;font-size:1.35rem;line-height:1.25}
.cd-ph .page-sub{color:var(--cd-lav);font-size:.88rem;margin-top:2px}
.cd-ph .page-sub a,.cd-ph .page-sub b{color:#fff}
.cd-ph .btn{border-radius:999px}
.cd-ph .btn-primary{background:#fff;color:var(--cd-navy)}
.cd-ph .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}
.cd-ph .btn-ghost:hover{background:rgba(255,255,255,.14)}
.cd-ph .btn-danger{background:#fecaca;color:#7f1d1d}
@media(max-width:640px){.cd-phrow{align-items:flex-start}}
.cd-ph .page-title>i{display:none}
/* teks panjang (email, nama) di kartu statistik tidak boleh melebihi layar HP */
.cd-page .stat-card{min-width:0}
.cd-page .stat-value{overflow-wrap:anywhere;word-break:break-word;min-width:0}
/* nama merek tenant di bawah topbar (variabel --cd-brand diisi agentCdCssLink): baris di atas isi hero; pada halaman chat/panggilan (tanpa hero) menjadi pita navy */
.cd-hero::before{content:var(--cd-brand);display:block;text-align:center;font-weight:800;font-size:1.05rem;color:#fff;margin:-8px auto 16px;letter-spacing:.01em}
.cd-chat::before{content:var(--cd-brand);display:block;background:var(--cd-navy);color:#fff;text-align:center;font-weight:800;font-size:1.05rem;padding:14px 16px 18px;border-radius:0 0 30px 30px}
.cd-chat .call-page{min-height:calc(100vh - 130px)}
/* Panggilan agent (agent_call.php) memakai desain halaman panggilan customer (call.php): lencana "Terhubung", timer besar, tombol kontrol
   persegi membulat berlabel, tombol Tutup/Jawab/Tolak lebar penuh, bingkai video dan panel catatan satu tema. */
.cd-chat .call-panel .call-active-label{display:inline-flex;align-self:center;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;background:#dcfce7;color:#166534;font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px}
.cd-chat .call-panel .pulse-dot{background:#16a34a}
.cd-chat .call-panel .call-timer{font-size:3rem;font-weight:800;color:var(--text1);letter-spacing:2px;line-height:1;margin:4px 0 8px}
.cd-chat .call-panel .audio-wave .bar{background:var(--cd-blue)}
.cd-chat .call-panel .video-stage{border:1.5px solid var(--cd-soft);border-radius:18px}
.cd-chat .call-panel .controls{gap:10px;width:100%}
.cd-chat .call-panel .ctrl-btn{flex:1;width:auto;height:auto;min-height:56px;padding:8px 4px;border-radius:16px;border:1.5px solid var(--cd-line);background:var(--cd-tile);color:var(--cd-navy);flex-direction:column;gap:4px;font-size:1.25rem;transition:all .15s}
.cd-chat .call-panel .ctrl-btn:hover:not(:disabled){border-color:var(--cd-blue)}
.cd-chat .call-panel .ctrl-btn .ctrl-lbl{font-size:.68rem;font-weight:700;line-height:1}
.cd-chat .call-panel .ctrl-btn.active-mute{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.cd-chat .call-panel .btn-hangup{width:100%;justify-content:center;border-radius:16px;padding:14px;background:#ef4444;font-size:.95rem;font-weight:700;box-shadow:0 4px 12px rgba(239,68,68,.3);transition:all .15s}
.cd-chat .call-panel .btn-hangup:hover{background:#dc2626;box-shadow:0 6px 18px rgba(239,68,68,.4)}
.cd-chat .call-panel .btn-answer{width:100%;justify-content:center;border-radius:16px;padding:15px;font-size:1rem;background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px rgba(16,185,129,.35)}
.cd-chat .call-panel .btn-decline{width:100%;justify-content:center;border-radius:16px;padding:13px;border:1.5px solid #fecaca;background:#fef2f2;color:#dc2626;font-weight:700;font-size:.92rem}
.cd-chat .call-panel .btn-decline:hover{background:#fee2e2;border-color:#fecaca;color:#dc2626}
.cd-chat .call-panel .notes-panel{background:var(--cd-list);border:1.5px solid var(--cd-soft);border-radius:16px}
.cd-chat .call-panel .notes-textarea{border-radius:12px}
.topbar-brand.kk-fixed .brand-name{display:inline !important}
@media(max-width:640px){.topbar-brand.kk-fixed{gap:6px}.topbar-brand.kk-fixed .brand-name{font-size:.88rem}.topbar-user{gap:5px !important}}
/* kapsul periode laporan: satu baris, bisa digeser mendatar; form tanggal di baris berikutnya */
.cd-page .rp-chips{display:flex;flex:1 1 100%;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0}
.cd-page .rp-chips::-webkit-scrollbar{display:none}
.cd-page .rp-chips a.chip{flex:0 0 auto;white-space:nowrap}
.cd-page .rp-top>div:first-child{display:none}
/* Latar krem bawaan layout.php (topbar, sidebar, menu, dialog) diganti biru muda soft; aksen terakota (teks/menu aktif) tidak diubah */
:root{--bg:#f3f5fd;--surface:#f4f6ff;--surface2:#e9edfc;--border:#d9ddf2;--text1:#1b1b3a;--text2:#4b4f68;--text3:#6b6f85;--primary-light:#e6eaff}
@media(prefers-color-scheme:dark){:root{--bg:#100d36;--surface:#16134a;--surface2:#1b1850;--border:#34308a;--text1:#eceaff;--text2:#c9c9ee;--text3:#a9acd6;--primary-light:#2a2778}}
.badge-blue{background:var(--cd-tile);color:var(--cd-blue)}
.badge-gray{background:rgba(107,111,133,.15);color:var(--cd-mute)}
.alert-info{background:var(--cd-tile);color:var(--cd-ink);border:1px solid var(--cd-line)}
/* HP portrait: ikon Keluar tampil di topbar (menggantikan avatar inisial); menu hamburger bisa digulir dan Ganti Password/Keluar menempel di dasarnya (layout.php) */
@media(max-width:640px){#logoutBtnTop{display:inline-flex !important;padding:6px 8px !important}.topbar-user .avatar{display:none}}