/* ============================================================================
   Eclyzer AI — komponen bersama (ui-kit)
   ----------------------------------------------------------------------------
   Satu sumber untuk: tombol, tombol ikon/close, input, select + popup,
   segmented control, badge/status, dialog (head/body/foot), empty state.
   Dimuat SETELAH style.css/components.css di aplikasi utama dan SETELAH
   style.css/components.css admin. Warna hanya dari token theme.css.

   Skala: spasi 4/8/12/16/24/32 · kontrol 40px (compact 36px) · radius kontrol
   12px, panel 20px · ikon 16–18px · durasi 150ms · fokus = ring aksen.
   ========================================================================== */

:root {
  --ctl-h: 40px;
  --ctl-h-sm: 36px;
  --ctl-r: 12px;
  --panel-r: 20px;
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.28);
  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Tombol ────────────────────────────────────────────────────────────── */

.ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: var(--ctl-h);
  padding: 0 16px;
  border: 1px solid var(--border-hover);
  border-radius: var(--ctl-r);
  background: transparent;
  color: var(--text-main);
  font: 600 13px/1.2 var(--font-ui);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ec-btn:hover {
  background: var(--surface-hover);
}

.ec-btn:active {
  background: var(--surface-press);
}

.ec-btn:focus-visible,
.ec-icon-btn:focus-visible,
.ec-seg__btn:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.ec-btn:disabled,
.ec-btn[aria-disabled="true"],
.ec-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.ec-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ec-btn--sm {
  min-height: var(--ctl-h-sm);
  padding: 0 12px;
}

/* Aksi utama: tint aksen terkendali, bukan bidang putih (dark) / hitam (light). */
.ec-btn--primary {
  border-color: transparent;
  background: var(--button-primary);
  color: var(--button-primary-fg);
}

.ec-btn--primary:hover {
  background: var(--button-primary-hover);
  border-color: transparent;
}

.ec-btn--primary:active {
  background: var(--button-primary-hover);
}

.ec-btn--danger {
  border-color: rgba(var(--danger-rgb), 0.42);
  color: var(--danger);
}

.ec-btn--danger:hover {
  background: rgba(var(--danger-rgb), 0.12);
  border-color: rgba(var(--danger-rgb), 0.6);
}

.ec-btn--danger-solid {
  border-color: rgba(var(--danger-rgb), 0.5);
  background: rgba(var(--danger-rgb), 0.18);
  color: var(--danger);
}

.ec-btn--danger-solid:hover {
  background: rgba(var(--danger-rgb), 0.28);
}

.ec-btn--quiet {
  border-color: transparent;
  color: var(--text-secondary);
}

/* Tombol ikon (termasuk tutup/X): latar transparan, hover surface, ikon 18px. */
.ec-icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--ctl-h-sm);
  height: var(--ctl-h-sm);
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ctl-r);
  background: transparent;
  color: var(--text-muted);
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.ec-icon-btn svg,
.ec-icon-btn i {
  width: 18px;
  height: 18px;
}

.ec-icon-btn:hover {
  background: var(--surface-hover);
  color: var(--text-main);
}

.ec-icon-btn:active {
  background: var(--surface-press);
}

.ec-icon-btn--danger:hover {
  background: rgba(var(--danger-rgb), 0.12);
  color: var(--danger);
}

@media (pointer: coarse), (max-width: 768px) {
  .ec-icon-btn {
    width: 44px;
    height: 44px;
  }

  .ec-btn,
  .ec-seg__btn {
    min-height: 44px;
  }

  .ec-btn--sm {
    min-height: 40px;
  }
}

/* ── Input & field ─────────────────────────────────────────────────────── */

.ec-input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--ctl-h);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--ctl-r);
  background: var(--bg-input);
  color: var(--text-main);
  font: 400 13.5px/1.4 var(--font-ui);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

textarea.ec-input {
  padding: 10px 12px;
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
}

.ec-input:hover {
  border-color: var(--border-hover);
}

.ec-input:focus,
.ec-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.ec-input::placeholder {
  color: var(--text-dim);
}

.ec-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ec-field > label,
.ec-label {
  color: var(--text-secondary);
  font: 600 12px/1.3 var(--font-ui);
}

/* Kolom pencarian: ikon di dalam, tinggi sama dengan kontrol lain. */
.ec-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ec-search > svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.ec-search > .ec-input {
  padding-left: 38px;
}

/* ── Select kustom (lihat select.js) ───────────────────────────────────── */

.ec-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  white-space: nowrap;
}

.ec-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--ctl-h);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--ctl-r);
  background: var(--bg-input);
  color: var(--text-main);
  font: 500 13px/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.ec-select-trigger:hover {
  border-color: var(--border-hover);
}

.ec-select-trigger:focus-visible,
.ec-select-trigger.is-open {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.ec-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ec-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Tetap normal walau berada di dalam kontainer yang memakai `span` kapital
     (mis. label filter admin). */
  text-transform: none;
  letter-spacing: normal;
  font: inherit;
  color: inherit;
}

.ec-select-trigger.is-placeholder .ec-select-value {
  color: var(--text-muted);
}

.filter-field .ec-select-value,
.field .ec-select-value {
  text-transform: none;
  letter-spacing: normal;
  font: inherit;
  color: inherit;
}

.ec-select-chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}

.ec-select-trigger.is-open .ec-select-chevron {
  transform: rotate(180deg);
}

.ec-select-trigger--sm,
.ec-sm .ec-select-trigger {
  min-height: var(--ctl-h-sm);
}

.ec-select-popup {
  position: fixed;
  z-index: 3000;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--border-hover);
  border-radius: 14px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-popover);
  color: var(--text-main);
  font: 500 13px/1.3 var(--font-ui);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

.ec-select-popup[data-placement="top"] {
  transform: translateY(4px);
}

.ec-select-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.ec-select-popup.is-measuring {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.ec-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.ec-select-option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-select-check {
  flex: none;
  color: var(--accent-on-tint);
  opacity: 0;
}

.ec-select-option[aria-selected="true"] {
  background: var(--surface-selected);
  color: var(--text-main);
  font-weight: 600;
}

.ec-select-option[aria-selected="true"] .ec-select-check {
  opacity: 1;
}

.ec-select-option.is-active {
  background: var(--surface-hover);
  color: var(--text-main);
}

.ec-select-option[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.ec-select-empty {
  padding: 10px;
  color: var(--text-muted);
}

@media (pointer: coarse) {
  .ec-select-option {
    min-height: 44px;
  }
}

/* ── Segmented control ─────────────────────────────────────────────────── */

.ec-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  min-height: var(--ctl-h);
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--ctl-r);
  background: var(--bg-input);
}

.ec-seg__btn {
  box-sizing: border-box;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font: 600 12.5px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ec-seg__btn:hover {
  background: var(--surface-hover);
  color: var(--text-main);
}

.ec-seg__btn.active,
.ec-seg__btn[aria-pressed="true"] {
  background: var(--surface-selected);
  color: var(--text-main);
  box-shadow: inset 0 0 0 1px var(--border);
}

.ec-seg--sm {
  min-height: var(--ctl-h-sm);
}

.ec-seg--sm .ec-seg__btn {
  min-height: 28px;
  padding: 0 12px;
}

@media (pointer: coarse), (max-width: 768px) {
  .ec-seg {
    min-height: 44px;
  }

  .ec-seg__btn,
  .ec-seg--sm .ec-seg__btn {
    min-height: 36px;
  }
}

/* ── Badge / status ────────────────────────────────────────────────────── */

.ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: rgba(var(--tint-rgb), 0.07);
  color: var(--text-secondary);
  font: 600 11.5px/1 var(--font-ui);
  white-space: nowrap;
}

.ec-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.ec-badge--ok {
  background: rgba(var(--success-rgb), 0.14);
  color: var(--success);
}

.ec-badge--warn {
  background: rgba(var(--amber-rgb), 0.14);
  color: var(--amber);
}

.ec-badge--bad {
  background: rgba(var(--danger-rgb), 0.14);
  color: var(--danger);
}

.ec-badge--info {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-on-tint);
}

.ec-badge--live::before {
  animation: ec-pulse 1.4s ease-in-out infinite;
}

@keyframes ec-pulse {
  50% {
    opacity: 0.35;
  }
}

/* ── Dialog: header / body / footer ────────────────────────────────────── */

.ec-dialog {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(var(--dialog-w, 720px), 100%);
  max-height: min(88dvh, 760px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--panel-r);
  background: var(--bg-panel);
  color: var(--text-main);
  box-shadow: var(--shadow-popover);
}

.ec-dialog--tall {
  height: min(88dvh, 720px);
}

.ec-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-soft);
}

.ec-dialog__heading {
  min-width: 0;
  flex: 1 1 auto;
}

.ec-dialog__title {
  margin: 0;
  font: 700 18px/1.3 var(--font-brand);
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.ec-dialog__sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font: 400 12.5px/1.5 var(--font-ui);
}

.ec-dialog__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
}

.ec-dialog__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ec-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  padding: 12px 20px;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 768px) {
  .ec-dialog {
    width: 100%;
    max-height: 94dvh;
    border-radius: var(--panel-r) var(--panel-r) 0 0;
    border-bottom: 0;
  }

  .ec-dialog--tall {
    height: 94dvh;
  }

  .ec-dialog__head {
    padding: 16px 12px 12px 16px;
  }

  .ec-dialog__body {
    padding: 12px 16px 16px;
  }

  .ec-dialog__foot {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Keadaan kosong / memuat ───────────────────────────────────────────── */

.ec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  color: var(--text-muted);
  font: 400 13px/1.5 var(--font-ui);
  text-align: center;
}

.ec-empty svg {
  width: 28px;
  height: 28px;
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .ec-btn,
  .ec-icon-btn,
  .ec-input,
  .ec-select-trigger,
  .ec-select-chevron,
  .ec-select-popup,
  .ec-seg__btn {
    transition-duration: 0.01ms;
  }

  .ec-badge--live::before {
    animation: none;
  }
}

/* Shared states for existing page controls. */
:is(.primary-btn, .toolbar-btn.primary, .settings-login-link) {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border: 1px solid transparent;
  box-shadow: none;
}
:is(.primary-btn, .toolbar-btn.primary, .settings-login-link):hover {
  background: var(--button-primary-hover);
  color: var(--button-primary-fg);
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}
.ec-seg__btn.active:hover, .ec-seg__btn[aria-pressed="true"]:hover {
  background: var(--surface-hover);
}

.ec-confirm-overlay { display:none; position:fixed; inset:0; z-index:4000; background:rgba(0,0,0,.5); padding:20px; align-items:center; justify-content:center; }
.ec-confirm-overlay.show { display:flex; }
.ec-confirm-overlay .ec-dialog { width:min(440px,100%); }
.ec-confirm-overlay p { line-height:1.65; color:var(--text-secondary); font-size:14px; }

/* One selection treatment across navigation, tabs, options and settings. */
:is(body, body.theme-light) :is(.history-item.active, .settings-tab-btn.active, .mode-option.active, .projects-item.active, .admin-tab.is-active, .ec-seg__btn.active, .ec-seg__btn[aria-pressed="true"], .ec-select-option[aria-selected="true"], .theme-card.active, .stream-render-option.is-active, .stream-render-option[aria-checked="true"]) {
  background:var(--surface-selected); color:var(--text-main); box-shadow:none;
}
:is(body, body.theme-light) :is(.history-item, .settings-tab-btn, .mode-option, .projects-item, .admin-tab, .ec-seg__btn, .ec-select-option, .theme-card, .stream-render-option, .profile-menu-item):hover {
  background:var(--surface-hover); color:var(--text-main); box-shadow:none;
}
:is(body, body.theme-light) .ec-select-option.is-active { background:var(--surface-hover); color:var(--text-main); }
:is(body, body.theme-light) .settings-tab-btn.active::before { display:none; }
:is(body, body.theme-light) .settings-tab-btn.active :is(svg,i) { color:inherit; transform:none; }
:is(body, body.theme-light) .settings-tab-btn.active { padding-left:14px; }
:is(body, body.theme-light) :is(.theme-card.active, .stream-render-option.is-active, .stream-render-option[aria-checked="true"]) { border-color:var(--border-hover); }
:is(.sidebar-primary-box, .history-item, .settings-tab-btn, .mode-option, .projects-item, .admin-tab, .ec-seg__btn, .profile-menu-item) { border-radius:var(--ctl-r); }
:is(.ec-btn, .toolbar-btn, .primary-btn, .settings-login-link) { border-radius:var(--ctl-r); }
body:has(#docs-modal.show) #sidebar-my-docs-btn,
body:has(#projects-modal.show) #sidebar-projects-btn,
body:has(#jobs-modal.show) #sidebar-jobs-btn { background:var(--surface-selected); }
body:has(#docs-modal.show) #sidebar-my-docs-btn:hover,
body:has(#projects-modal.show) #sidebar-projects-btn:hover,
body:has(#jobs-modal.show) #sidebar-jobs-btn:hover { background:var(--surface-hover); }

/* Compact model menu: direction is determined by chat state in script.js. */
.mode-dropdown-menu { min-width:0; max-width:none; padding:6px; border-radius:var(--ctl-r); gap:2px; }
.mode-dropdown-menu .mode-dropdown-label { padding:5px 8px; font-size:9px; }
.mode-dropdown-menu .mode-option { min-height:34px; padding:7px 10px; gap:8px; border-radius:var(--ctl-r); }
.mode-dropdown-menu .mode-option-header { font-size:12px; line-height:1.4; margin:0; font-weight:500; }
.mode-dropdown-menu .mode-option-desc { display:none; }
.mode-dropdown-menu .mode-option-check svg { width:13px; height:13px; }
.history-group-toggle { cursor:pointer; border-radius:var(--ctl-r); }
:is(body, body.theme-light) .history-group-toggle:hover { background:var(--surface-hover); color:var(--text-main); }
.history-group-toggle:focus-visible { outline:2px solid var(--accent-soft); outline-offset:2px; }
.history-group-toggle :is(svg,i) { opacity:.65; }