/* ============================================================
   CITS — Stylesheet Utama
   Tema  : Bank Blue & Coral (profesional, fokus urgensi)
   Struktur layout & komponen mengacu VISTA (prefix ct-).
   ============================================================ */

:root {
  --ct-primary:       #1d4ed8;
  --ct-primary-dark:  #1e40af;
  --ct-primary-700:   #1e3a8a;
  --ct-primary-light: #dbeafe;
  --ct-primary-50:    #eff6ff;
  --ct-sidebar:       #0b1f44;
  --ct-sidebar-2:     #14306b;
  --ct-sidebar-text:  #bcd0f5;
  --ct-accent:        #f97316;
  --ct-accent-dark:   #ea580c;
  --ct-danger:        #ef4444;
  --ct-bg:            #f1f5f9;
  --ct-white:         #ffffff;
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db;
  --g400:#9ca3af; --g500:#6b7280; --g600:#4b5563; --g700:#374151; --g900:#111827;
  --sidebar-w:264px; --header-h:60px; --radius:10px;
  --shadow:0 1px 3px rgba(11,31,68,.08),0 1px 2px rgba(11,31,68,.06);
  --shadow-md:0 6px 18px -4px rgba(11,31,68,.18);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; }
body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--ct-bg); color:var(--g700); line-height:1.6; }
a { color:var(--ct-primary-dark); }

/* ── Layout ── */
.ct-wrapper { display:flex; min-height:100vh; }
.ct-sidebar { width:var(--sidebar-w); background:linear-gradient(185deg,var(--ct-sidebar),var(--ct-sidebar-2)); flex-shrink:0; position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:40; transition:transform .25s; }
.ct-main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.ct-header { height:var(--header-h); background:var(--ct-white); border-bottom:1px solid var(--g200); display:flex; align-items:center; padding:0 1.5rem; gap:1rem; position:sticky; top:0; z-index:30; box-shadow:var(--shadow); }
.ct-content { flex:1; padding:1.5rem; }
.ct-footer { background:var(--ct-white); border-top:1px solid var(--g200); padding:.75rem 1.5rem; font-size:.72rem; color:var(--g500); text-align:center; }

/* ── Sidebar ── */
.ct-sidebar-logo { padding:1.15rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.07); }
.ct-sidebar-logo a { display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.ct-logo-mark { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--ct-primary),var(--ct-accent)); color:#fff; font-weight:800; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ct-logo-text strong { display:block; color:#fff; font-size:1.05rem; font-weight:700; letter-spacing:-.3px; }
.ct-logo-text small { display:block; color:var(--ct-sidebar-text); font-size:.62rem; }

.ct-sidebar-user { padding:.85rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:.7rem; }
.ct-avatar { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ct-avatar-sm { width:32px; height:32px; font-size:.85rem; background:var(--ct-primary); }
.ct-sidebar-user-info .name { color:#fff; font-size:.78rem; font-weight:600; line-height:1.25; }
.ct-sidebar-user-info .role { color:var(--ct-sidebar-text); font-size:.68rem; }

.ct-nav { padding:.6rem 0 1.5rem; }
.ct-nav-group { padding:.85rem 1.25rem .3rem; font-size:.62rem; text-transform:uppercase; letter-spacing:1px; color:rgba(188,208,245,.55); font-weight:700; }
.ct-nav-item { display:flex; align-items:center; gap:.6rem; padding:.58rem 1.25rem; color:var(--ct-sidebar-text); text-decoration:none; font-size:.8rem; transition:background .15s,color .15s; position:relative; }
.ct-nav-item > span:first-of-type { flex:1; min-width:0; }
.ct-nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.ct-nav-item.active { background:rgba(29,78,216,.4); color:#fff; }
.ct-nav-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ct-accent); border-radius:0 2px 2px 0; }
.ct-nav-item svg { width:17px; height:17px; flex-shrink:0; }
.ct-nav-badge { flex:0 0 auto; align-self:center; background:var(--ct-accent); color:#fff; font-size:.62rem; font-weight:700; line-height:1; padding:3px 7px; min-width:18px; text-align:center; border-radius:999px; white-space:nowrap; }

/* ── Header ── */
.ct-menu-btn { display:none; background:none; border:none; cursor:pointer; color:var(--g700); }
.ct-menu-btn svg { width:22px; height:22px; }
.ct-header-title { font-weight:600; color:var(--g900); flex:1; font-size:.95rem; }
.ct-header-bell { position:relative; color:var(--g600); display:flex; cursor:pointer; }
.ct-header-bell svg { width:20px; height:20px; }
.ct-bell-badge { position:absolute; top:-6px; right:-8px; background:var(--ct-accent); color:#fff; font-size:.58rem; font-weight:700; padding:1px 5px; border-radius:999px; }
.ct-header-user { display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--g700); cursor:pointer; position:relative; }
.ct-header-user-name { font-weight:600; }
.ct-dropdown { position:absolute; top:140%; right:0; background:#fff; border:1px solid var(--g200); border-radius:var(--radius); box-shadow:var(--shadow-md); min-width:230px; z-index:50; overflow:hidden; }
.ct-dropdown-head { padding:.75rem 1rem; border-bottom:1px solid var(--g100); background:var(--ct-primary-50); }
.ct-dropdown-head strong { display:block; font-size:.82rem; color:var(--g900); }
.ct-dropdown-head small { font-size:.68rem; color:var(--g500); }
.ct-dropdown a { display:flex; align-items:center; gap:.55rem; padding:.6rem 1rem; font-size:.8rem; color:var(--g700); text-decoration:none; }
.ct-dropdown a svg { width:15px; height:15px; }
.ct-dropdown a:hover { background:var(--g50); }
.ct-hidden { display:none !important; }

/* ── Notif panel (popup) ── */
.ct-notif-panel { position:absolute; top:140%; right:0; width:340px; max-height:440px; overflow-y:auto; background:#fff; border:1px solid var(--g200); border-radius:var(--radius); box-shadow:var(--shadow-md); z-index:60; }
.ct-notif-head { padding:.7rem 1rem; border-bottom:1px solid var(--g100); font-weight:700; font-size:.82rem; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:#fff; }
.ct-notif-item { display:flex; gap:.6rem; padding:.7rem 1rem; border-bottom:1px solid var(--g100); text-decoration:none; color:var(--g700); }
.ct-notif-item:hover { background:var(--g50); }
.ct-notif-item.unread { background:var(--ct-primary-50); }
.ct-notif-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:.3rem; background:var(--g300); }
.ct-notif-dot.INFO { background:var(--ct-primary); }
.ct-notif-dot.WARNING { background:var(--ct-accent); }
.ct-notif-dot.URGENT { background:var(--ct-danger); }
.ct-notif-item .t { font-size:.8rem; font-weight:600; color:var(--g900); }
.ct-notif-item .m { font-size:.74rem; color:var(--g500); }
.ct-notif-item .ago { font-size:.66rem; color:var(--g400); }

/* ── Page header ── */
.ct-page-header { margin-bottom:1.25rem; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.ct-page-header h1 { font-size:1.25rem; font-weight:700; color:var(--g900); }
.ct-page-header p { font-size:.8rem; color:var(--g500); margin-top:.1rem; }
.ct-breadcrumb { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--g500); margin-top:.25rem; }
.ct-breadcrumb a { color:var(--ct-primary-dark); text-decoration:none; }
.ct-page-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Cards ── */
.ct-card { background:var(--ct-white); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--g200); margin-bottom:1.25rem; }
.ct-card-header { padding:.9rem 1.15rem; border-bottom:1px solid var(--g200); display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.ct-card-header h2 { font-size:.92rem; font-weight:600; color:var(--g900); display:flex; align-items:center; gap:.45rem; }
.ct-card-header h2 svg { width:17px; height:17px; color:var(--ct-primary); }
.ct-card-body { padding:1.15rem; }
.ct-card-body.no-pad { padding:0; }
.ct-card-footer { padding:.8rem 1.15rem; border-top:1px solid var(--g100); display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* ── Stat cards ── */
.ct-stat-card { background:var(--ct-white); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--g200); padding:1.1rem 1.2rem; display:flex; gap:.9rem; align-items:center; }
.ct-stat-icon { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ct-stat-icon svg { width:23px; height:23px; }
.ct-stat-number { font-size:1.6rem; font-weight:700; color:var(--g900); line-height:1.1; }
.ct-stat-label { font-size:.72rem; color:var(--g500); margin-top:1px; }

/* ── Tabel ── */
.ct-table-wrap { overflow-x:auto; }
.ct-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.ct-table th { background:var(--ct-primary-50); padding:.6rem .8rem; text-align:left; font-weight:600; color:var(--ct-primary-700); border-bottom:2px solid var(--ct-primary-light); white-space:nowrap; }
.ct-table td { padding:.6rem .8rem; border-bottom:1px solid var(--g100); color:var(--g700); vertical-align:middle; }
.ct-table tbody tr:hover td { background:var(--ct-primary-50); }
.ct-table tr.row-danger td { background:#fef2f2; }
.ct-table tr.row-warning td { background:#fffbeb; }
.ct-table .text-center { text-align:center; }
.ct-table .text-right { text-align:right; }
.ct-table .nowrap { white-space:nowrap; }

/* ── Form ── */
.ct-form-group { margin-bottom:1rem; }
.ct-form-label { display:block; font-size:.78rem; font-weight:600; color:var(--g700); margin-bottom:.35rem; }
.ct-form-label .required { color:#ef4444; margin-left:2px; }
.ct-input,.ct-select,.ct-textarea { width:100%; padding:.5rem .75rem; border:1px solid var(--g300); border-radius:7px; font-size:.84rem; font-family:inherit; background:#fff; color:var(--g900); transition:border-color .15s,box-shadow .15s; }
.ct-input:focus,.ct-select:focus,.ct-textarea:focus { outline:none; border-color:var(--ct-primary); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.ct-input:disabled,.ct-input[readonly] { background:var(--g100); color:var(--g500); }
.ct-textarea { resize:vertical; min-height:78px; }
.ct-form-hint { font-size:.7rem; color:var(--g500); margin-top:.25rem; }
.ct-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ct-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }

/* ── Tombol ── */
.ct-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:7px; font-size:.79rem; font-weight:600; cursor:pointer; border:1px solid transparent; text-decoration:none; transition:background .15s,opacity .15s; font-family:inherit; white-space:nowrap; }
.ct-btn svg { width:15px; height:15px; }
.ct-btn-primary { background:var(--ct-primary); color:#fff; }
.ct-btn-primary:hover { background:var(--ct-primary-dark); }
.ct-btn-accent { background:var(--ct-accent); color:#fff; }
.ct-btn-accent:hover { background:var(--ct-accent-dark); }
.ct-btn-success { background:#16a34a; color:#fff; }
.ct-btn-success:hover { background:#15803d; }
.ct-btn-danger { background:#ef4444; color:#fff; }
.ct-btn-danger:hover { background:#dc2626; }
.ct-btn-secondary { background:#fff; color:var(--g700); border-color:var(--g300); }
.ct-btn-secondary:hover { background:var(--g100); }
.ct-btn-sm { padding:.32rem .6rem; font-size:.72rem; }
.ct-btn-block { width:100%; justify-content:center; }
.ct-btn:disabled,.ct-btn.disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ── Alert ── */
.ct-alert { display:flex; align-items:flex-start; gap:.6rem; padding:.8rem 1rem; border-radius:var(--radius); border-left:4px solid; margin-bottom:1rem; font-size:.82rem; }
.ct-alert-ico { width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.ct-alert-success { background:#f0fdf4; border-color:#16a34a; color:#166534; }
.ct-alert-error { background:#fef2f2; border-color:#ef4444; color:#991b1b; }
.ct-alert-warning { background:#fffbeb; border-color:var(--ct-accent); color:#92400e; }
.ct-alert-info { background:var(--ct-primary-50); border-color:var(--ct-primary); color:var(--ct-primary-700); }

/* ── Badge ── */
.ct-badge { display:inline-flex; align-items:center; padding:.18rem .55rem; border-radius:999px; font-size:.68rem; font-weight:700; line-height:1.4; }
.ct-badge-green { background:#dcfce7; color:#166534; }
.ct-badge-teal { background:#ccfbf1; color:#115e59; }
.ct-badge-blue { background:#dbeafe; color:#1e40af; }
.ct-badge-amber { background:#fef3c7; color:#92400e; }
.ct-badge-red { background:#fee2e2; color:#991b1b; }
.ct-badge-gray { background:var(--g200); color:var(--g600); }

/* ── Grid ── */
.ct-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.ct-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.ct-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }

/* ── Tabs ── */
.ct-tabs { display:flex; gap:.2rem; border-bottom:2px solid var(--g200); margin-bottom:1.25rem; flex-wrap:wrap; }
.ct-tab { padding:.55rem 1rem; font-size:.8rem; font-weight:600; color:var(--g500); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.ct-tab:hover { color:var(--ct-primary); }
.ct-tab.active { color:var(--ct-primary-dark); border-color:var(--ct-primary); }
.ct-tab svg { width:15px; height:15px; }

/* ── Toolbar / search ── */
.ct-toolbar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.ct-search { display:flex; }
.ct-search input { border-radius:7px 0 0 7px; border-right:none; min-width:200px; }
.ct-search button { border-radius:0 7px 7px 0; }

/* ── Definition list ── */
.ct-dl { display:grid; grid-template-columns:150px 1fr; gap:.5rem 1rem; font-size:.82rem; }
.ct-dl dt { color:var(--g500); font-weight:600; }
.ct-dl dd { color:var(--g900); }

/* ── Empty state ── */
.ct-empty { text-align:center; padding:2.5rem 1rem; color:var(--g500); }
.ct-empty svg { width:46px; height:46px; color:var(--g300); margin-bottom:.6rem; }
.ct-empty p { font-size:.83rem; }

/* ── Modal ── */
.ct-modal { position:fixed; inset:0; background:rgba(11,31,68,.55); z-index:80; display:flex; align-items:flex-start; justify-content:center; padding:3rem 1rem; overflow-y:auto; }
.ct-modal-content { background:#fff; border-radius:var(--radius); width:100%; max-width:560px; box-shadow:var(--shadow-md); }
.ct-modal-header { padding:.9rem 1.15rem; border-bottom:1px solid var(--g200); display:flex; justify-content:space-between; align-items:center; }
.ct-modal-header h3 { font-size:.95rem; font-weight:700; color:var(--g900); }
.ct-modal-body { padding:1.15rem; }
.ct-modal-footer { padding:.8rem 1.15rem; border-top:1px solid var(--g100); display:flex; justify-content:flex-end; gap:.5rem; }

/* ── Utilities ── */
.ct-mt { margin-top:1.25rem; } .ct-mb { margin-bottom:1.25rem; } .ct-mb0 { margin-bottom:0; }
.ct-text-muted { color:var(--g500); }
.ct-text-danger { color:#dc2626; }
.ct-text-right { text-align:right; }
.ct-text-center { text-align:center; }
.ct-flex { display:flex; gap:.5rem; align-items:center; }
.ct-flex-between { display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ct-w-full { width:100%; }
.ct-fw-700 { font-weight:700; }
.ct-small { font-size:.74rem; }
.ct-divider { border:none; border-top:1px solid var(--g200); margin:1rem 0; }

/* ============================================================
   RUANG GANGGUAN — Chat / Thread terisolasi
   ============================================================ */
.ct-chat { display:flex; flex-direction:column; height:calc(100vh - var(--header-h) - 3rem); background:#fff; border:1px solid var(--g200); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.ct-chat-head { padding:.8rem 1.15rem; border-bottom:1px solid var(--g200); display:flex; align-items:center; gap:.75rem; background:#fff; }
.ct-chat-head .info { flex:1; min-width:0; }
.ct-chat-head .title { font-size:.92rem; font-weight:700; color:var(--g900); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ct-chat-head .meta { font-size:.72rem; color:var(--g500); margin-top:.1rem; }
.ct-chat-body { flex:1; overflow-y:auto; padding:1.1rem 1.15rem; background:linear-gradient(180deg,#f8fafc,#eef2f7); display:flex; flex-direction:column; gap:.55rem; }
.ct-chat-day { align-self:center; background:rgba(11,31,68,.08); color:var(--g600); font-size:.66rem; font-weight:700; padding:3px 12px; border-radius:999px; margin:.4rem 0; }

.ct-msg { max-width:74%; display:flex; flex-direction:column; }
.ct-msg.me { align-self:flex-end; align-items:flex-end; }
.ct-msg.them { align-self:flex-start; align-items:flex-start; }
.ct-msg .sender { font-size:.68rem; font-weight:700; color:var(--ct-primary-dark); margin:0 .25rem .15rem; }
.ct-msg .bubble { padding:.5rem .75rem; border-radius:14px; font-size:.83rem; color:var(--g900); box-shadow:var(--shadow); word-wrap:break-word; white-space:pre-wrap; line-height:1.45; }
.ct-msg.them .bubble { background:#fff; border-bottom-left-radius:4px; }
.ct-msg.me .bubble { background:var(--ct-primary); color:#fff; border-bottom-right-radius:4px; }
.ct-msg .bubble a { color:inherit; text-decoration:underline; }
.ct-msg .foot { display:flex; align-items:center; gap:.3rem; font-size:.62rem; color:var(--g400); margin:.18rem .3rem 0; }
.ct-msg.me .foot { color:var(--g500); }
.ct-msg .tick { display:inline-flex; }
.ct-msg .tick svg { width:15px; height:15px; }
.ct-msg .tick.read { color:var(--ct-primary); }
.ct-msg img.att { max-width:260px; border-radius:10px; margin-top:.2rem; cursor:pointer; border:1px solid var(--g200); }
.ct-msg .file-att { display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.15); padding:.45rem .6rem; border-radius:8px; margin-top:.2rem; font-size:.76rem; }
.ct-msg.them .file-att { background:var(--g100); }
.ct-msg .redacted-tag { font-size:.6rem; background:var(--ct-accent); color:#fff; padding:1px 6px; border-radius:999px; margin-left:.3rem; }

.ct-msg-system { align-self:center; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-size:.7rem; padding:4px 12px; border-radius:999px; }
.ct-msg-system.ct-rec { border-radius:12px; padding:.6rem .7rem; max-width:min(340px,90%); display:flex; flex-direction:column; gap:.4rem; }
.ct-rec .ct-rec-label { font-weight:700; line-height:1.35; }
.ct-rec .ct-rec-audio { width:100%; height:34px; }
.ct-rec .ct-rec-dl { font-size:.68rem; font-weight:700; color:#9a3412; text-decoration:underline; align-self:flex-start; }

.ct-typing { align-self:flex-start; display:flex; align-items:center; gap:.4rem; padding:.45rem .7rem; background:#fff; border-radius:14px; box-shadow:var(--shadow); }
.ct-typing span { width:7px; height:7px; border-radius:50%; background:var(--g400); animation:ct-blink 1.2s infinite; }
.ct-typing span:nth-child(2) { animation-delay:.2s; }
.ct-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes ct-blink { 0%,60%,100%{opacity:.3;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }

.ct-chat-foot { border-top:1px solid var(--g200); padding:.7rem .9rem; background:#fff; }
.ct-chat-foot.closed { text-align:center; color:var(--g500); font-size:.8rem; padding:1rem; }
.ct-compose { display:flex; align-items:flex-end; gap:.5rem; }
.ct-compose textarea { flex:1; resize:none; max-height:120px; min-height:42px; padding:.55rem .75rem; border:1px solid var(--g300); border-radius:10px; font-family:inherit; font-size:.84rem; }
.ct-compose textarea:focus { outline:none; border-color:var(--ct-primary); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.ct-compose .ct-icon-btn { width:42px; height:42px; border-radius:10px; border:1px solid var(--g300); background:#fff; color:var(--g600); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.ct-compose .ct-icon-btn:hover { background:var(--g100); }
.ct-compose .send { background:var(--ct-primary); border-color:var(--ct-primary); color:#fff; }
.ct-compose .send:hover { background:var(--ct-primary-dark); }
.ct-compose .ct-icon-btn svg { width:18px; height:18px; }

/* Dropzone overlay */
.ct-dropzone { position:absolute; inset:0; background:rgba(29,78,216,.12); border:3px dashed var(--ct-primary); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--ct-primary-dark); font-weight:700; font-size:1rem; z-index:20; pointer-events:none; }

/* Attachment preview + redaksi */
.ct-att-preview { padding:.7rem .9rem; border-top:1px solid var(--g100); display:none; max-height:55vh; overflow-y:auto; }
.ct-att-preview.show { display:block; }
.ct-redact-wrap { position:relative; display:inline-block; max-width:100%; }
.ct-redact-canvas { max-width:100%; border:1px solid var(--g300); border-radius:8px; cursor:crosshair; touch-action:none; }
.ct-att-tools { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; flex-wrap:wrap; }
.ct-att-tools:last-child { position:sticky; bottom:-.7rem; background:#fff; padding:.35rem 0; margin-bottom:-.35rem; z-index:1; }
.ct-att-tools .hint { font-size:.7rem; color:var(--ct-accent-dark); flex:1; }

/* Lightbox */
.ct-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:100; display:flex; align-items:center; justify-content:center; padding:2rem; }
.ct-lightbox img { max-width:100%; max-height:100%; border-radius:8px; }

/* Thread fit-to-viewport (desktop): kotak tulis selalu terlihat tanpa scroll */
@media (min-width:769px) {
  .ct-thread-page { height:calc(100vh - var(--header-h) - 5.5rem); display:flex; flex-direction:column; }
  .ct-thread-page .ct-page-header { flex:0 0 auto; margin-bottom:.75rem; }
  .ct-thread-page > .ct-alert { flex:0 0 auto; }
  .ct-thread-page .ct-thread-grid { flex:1 1 auto; min-height:0; align-items:stretch !important; }
  .ct-thread-page .ct-chat { height:auto; min-height:0; }              /* isi via stretch grid */
  .ct-thread-page .ct-thread-grid > div:last-child { min-height:0; max-height:100%; overflow-y:auto; }
}

/* SLA bar */
.ct-sla { display:flex; align-items:center; gap:.5rem; font-size:.72rem; }
.ct-sla-bar { width:120px; height:6px; background:var(--g200); border-radius:999px; overflow:hidden; }
.ct-sla-bar > span { display:block; height:100%; border-radius:999px; }

/* ============================================================
   FLOATING CHAT-BOT (notifikasi real-time)
   ============================================================ */
.ct-bot { position:fixed; right:22px; bottom:22px; z-index:95; font-family:inherit; }

.ct-bot-btn { position:relative; width:62px; height:62px; border:none; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--ct-primary),var(--ct-accent)); color:#fff;
  box-shadow:0 10px 28px -6px rgba(11,31,68,.55); display:flex; align-items:center; justify-content:center;
  transition:transform .18s; animation:ct-bot-idle 4s ease-in-out infinite; }
.ct-bot-btn:hover { transform:scale(1.07); }
.ct-bot-btn:active { transform:scale(.96); }
.ct-bot-face { width:32px; height:32px; }
.ct-bot.alert .ct-bot-btn { animation:ct-bot-shake .6s ease-in-out 2; }
@keyframes ct-bot-idle { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
@keyframes ct-bot-shake { 0%,100%{transform:rotate(0);} 20%{transform:rotate(-12deg);} 40%{transform:rotate(10deg);} 60%{transform:rotate(-7deg);} 80%{transform:rotate(5deg);} }

.ct-bot-ring { position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.ct-bot.alert .ct-bot-ring { box-shadow:0 0 0 0 rgba(249,115,22,.55); animation:ct-bot-pulse 1.2s ease-out 3; }
@keyframes ct-bot-pulse { 0%{box-shadow:0 0 0 0 rgba(249,115,22,.55);} 100%{box-shadow:0 0 0 22px rgba(249,115,22,0);} }

.ct-bot-badge { position:absolute; top:-3px; right:-3px; min-width:22px; height:22px; padding:0 5px;
  background:var(--ct-danger); color:#fff; border:2px solid #fff; border-radius:999px; font-size:.66rem;
  font-weight:800; display:flex; align-items:center; justify-content:center; }

.ct-bot-ava { width:38px; height:38px; border-radius:50%; flex-shrink:0; color:#fff;
  background:linear-gradient(135deg,var(--ct-primary),var(--ct-accent)); display:flex; align-items:center; justify-content:center; }
.ct-bot-ava.sm { width:34px; height:34px; }
.ct-bot-ava svg { width:22px; height:22px; }

/* Speech-bubble toast saat pesan masuk */
.ct-bot-toast { position:absolute; right:4px; bottom:74px; width:300px; display:flex; flex-direction:column; gap:.5rem; }
.ct-bot-bubble { background:#fff; border:1px solid var(--g200); border-left:4px solid var(--ct-accent);
  border-radius:14px 14px 4px 14px; box-shadow:var(--shadow-md); padding:.7rem .8rem; cursor:pointer;
  display:flex; gap:.55rem; align-items:flex-start; transform-origin:bottom right;
  animation:ct-bubble-in .28s cubic-bezier(.2,1.3,.5,1); }
.ct-bot-bubble.leaving { animation:ct-bubble-out .25s ease forwards; }
@keyframes ct-bubble-in { from{opacity:0; transform:translateY(10px) scale(.9);} to{opacity:1; transform:none;} }
@keyframes ct-bubble-out { to{opacity:0; transform:translateY(8px) scale(.92);} }
.ct-bot-bubble .ava { width:30px; height:30px; border-radius:50%; flex-shrink:0; color:#fff;
  background:linear-gradient(135deg,var(--ct-primary),var(--ct-accent)); display:flex; align-items:center; justify-content:center; }
.ct-bot-bubble .ava svg { width:18px; height:18px; }
.ct-bot-bubble .t { font-size:.78rem; font-weight:700; color:var(--g900); line-height:1.3; }
.ct-bot-bubble .m { font-size:.73rem; color:var(--g600); line-height:1.4; margin-top:1px; }
.ct-bot-bubble .x { margin-left:auto; color:var(--g400); background:none; border:none; cursor:pointer; padding:0 2px; }
.ct-bot-bubble .x svg { width:14px; height:14px; }

/* Panel daftar */
.ct-bot-panel { position:absolute; right:0; bottom:74px; width:340px; max-height:62vh; background:#fff;
  border:1px solid var(--g200); border-radius:14px; box-shadow:var(--shadow-md); overflow:hidden;
  display:flex; flex-direction:column; transform-origin:bottom right; animation:ct-bubble-in .2s ease; }
.ct-bot-panel-head { display:flex; align-items:center; gap:.55rem; padding:.7rem .8rem;
  background:linear-gradient(135deg,var(--ct-sidebar),var(--ct-primary-dark)); color:#fff; }
.ct-bot-panel-head strong { display:block; font-size:.84rem; }
.ct-bot-panel-head small { display:block; font-size:.66rem; opacity:.8; }
.ct-bot-panel-head a { color:#fff; opacity:.85; display:flex; }
.ct-bot-panel-head a:hover { opacity:1; }
.ct-bot-x { background:none; border:none; color:#fff; opacity:.85; cursor:pointer; display:flex; padding:0; }
.ct-bot-x svg { width:17px; height:17px; }
.ct-bot-list { overflow-y:auto; flex:1; }
.ct-bot-foot { display:block; text-align:center; padding:.6rem; font-size:.74rem; font-weight:600;
  color:var(--ct-primary-dark); text-decoration:none; border-top:1px solid var(--g100); }
.ct-bot-foot:hover { background:var(--g50); }

/* Mini-chat: banyak jendela berdampingan, bertahan sampai di-close */
.ct-bot-chats { position:absolute; right:0; bottom:74px; display:flex; align-items:flex-end; gap:12px; }
.ct-bot-chat { position:relative; width:330px; height:62vh; max-height:520px; flex:0 0 auto;
  background:#fff; border:1px solid var(--g200); border-radius:14px; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column; overflow:hidden; transform-origin:bottom right; animation:ct-bubble-in .24s ease; }
.ct-bot-chat-head .info { flex:1; min-width:0; }
.ct-bot-chat-head { display:flex; align-items:center; gap:.55rem; padding:.6rem .7rem; color:#fff;
  background:linear-gradient(135deg,var(--ct-sidebar),var(--ct-primary-dark)); }
.ct-bot-chat-head strong { display:block; font-size:.82rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-bot-chat-head small { display:block; font-size:.64rem; opacity:.82; }
.ct-bot-chat-head a, .ct-bot-chat-head .ct-bot-x { color:#fff; opacity:.85; display:flex; cursor:pointer; background:none; border:none; padding:0; }
.ct-bot-chat-head a:hover, .ct-bot-chat-head .ct-bot-x:hover { opacity:1; }
.ct-bot-chat-head a svg, .ct-bot-chat-head .ct-bot-x svg { width:16px; height:16px; }
.ct-bot-chat-body { flex:1; overflow-y:auto; padding:.8rem .7rem; display:flex; flex-direction:column; gap:.45rem;
  background:linear-gradient(180deg,#f8fafc,#eef2f7); }
.ct-bot-chat-body .ct-msg { max-width:86%; }
.ct-bot-chat-body .ct-msg .bubble { font-size:.8rem; }
.ct-bot-chat-foot { border-top:1px solid var(--g200); padding:.5rem .55rem; display:flex; align-items:flex-end; gap:.4rem; background:#fff; }
.ct-bot-chat-foot textarea { flex:1; resize:none; max-height:90px; min-height:38px; padding:.45rem .6rem;
  border:1px solid var(--g300); border-radius:9px; font-family:inherit; font-size:.8rem; }
.ct-bot-chat-foot textarea:focus { outline:none; border-color:var(--ct-primary); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.ct-bot-chat-foot .ct-icon-btn { width:38px; height:38px; border-radius:9px; border:1px solid var(--ct-primary);
  background:var(--ct-primary); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.ct-bot-chat-foot .ct-icon-btn:hover { background:var(--ct-primary-dark); }
.ct-bot-chat-foot .ct-icon-btn svg { width:17px; height:17px; }
.ct-bot-chat-foot.closed { justify-content:center; color:var(--g500); font-size:.74rem; padding:.7rem; }

.ct-bot-panel { z-index:5; }
.ct-bot-chats { z-index:1; }

@media (max-width:900px) {
  .ct-bot-chats { flex-direction:column-reverse; align-items:flex-end; }
}
@media (max-width:520px) {
  .ct-bot { right:14px; bottom:14px; }
  .ct-bot-panel, .ct-bot-toast, .ct-bot-chat { width:calc(100vw - 28px); }
  .ct-bot-chat { height:64vh; }
}

/* ============================================================
   Searchable Select (vanilla, tanpa jQuery)
   ============================================================ */
.ct-ss { position:relative; }
.ct-ss > select.ct-ss-native { position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.ct-ss-control { width:100%; padding:.5rem .75rem; border:1px solid var(--g300); border-radius:7px; background:#fff;
  font-size:.84rem; color:var(--g900); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.ct-ss-control:hover { border-color:var(--g400); }
.ct-ss.open .ct-ss-control { border-color:var(--ct-primary); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.ct-ss-control .lbl { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-ss-control .lbl.ph { color:var(--g400); }
.ct-ss-control .car { width:16px; height:16px; flex-shrink:0; color:var(--g500); transition:transform .15s; }
.ct-ss.open .ct-ss-control .car { transform:rotate(180deg); }
.ct-ss-panel { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; background:#fff;
  border:1px solid var(--g200); border-radius:9px; box-shadow:var(--shadow-md); display:none; flex-direction:column; overflow:hidden; }
.ct-ss.open .ct-ss-panel { display:flex; }
.ct-ss-search { padding:.5rem; border-bottom:1px solid var(--g100); }
.ct-ss-search input { width:100%; padding:.4rem .6rem; border:1px solid var(--g300); border-radius:6px; font-size:.82rem; font-family:inherit; }
.ct-ss-search input:focus { outline:none; border-color:var(--ct-primary); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.ct-ss-options { max-height:240px; overflow-y:auto; }
.ct-ss-opt { padding:.5rem .75rem; font-size:.82rem; color:var(--g700); cursor:pointer; }
.ct-ss-opt:hover, .ct-ss-opt.active { background:var(--ct-primary-50); }
.ct-ss-opt.sel { font-weight:700; color:var(--ct-primary-dark); }
.ct-ss-empty { padding:.7rem .75rem; font-size:.78rem; color:var(--g500); text-align:center; }

/* ── Responsif ── */
@media (max-width:980px) { .ct-grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) {
  .ct-grid-2,.ct-grid-3,.ct-grid-4,.ct-form-row,.ct-form-row-3 { grid-template-columns:1fr; }
  .ct-sidebar { transform:translateX(-100%); }
  .ct-sidebar.open { transform:none; box-shadow:var(--shadow-md); }
  .ct-main { margin-left:0; }
  .ct-menu-btn { display:block; }
  .ct-header-user-name { display:none; }
  .ct-msg { max-width:88%; }
  .ct-chat { height:calc(100vh - var(--header-h) - 1.5rem); }
}
@media print {
  .ct-sidebar,.ct-header,.ct-footer,.no-print { display:none !important; }
  .ct-main { margin-left:0; } .ct-content { padding:0; } body { background:#fff; }
}