#chatbot-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 22, 0.55);
  /* blur mati juga di desktop — overlay ini menumpuk di atas canvas meteor
     yang repaint tiap frame (js/meteors.js), tiap frame browser harus
     sample ulang backdrop-nya. Ini biang ngelag saat mengetik di chat.
     Sama seperti pola mobile-lite di bawah, tapi ini berlaku semua layar. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

body.chatbot-open #chatbot-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#chatbot-container {
  --chatbot-bg: linear-gradient(
    180deg,
    rgba(10, 19, 34, 0.98),
    rgba(4, 10, 22, 0.96)
  );
  --chatbot-panel: rgba(255, 255, 255, 0.08);
  --chatbot-panel-strong: rgba(255, 255, 255, 0.14);
  --chatbot-border: rgba(255, 255, 255, 0.12);
  --chatbot-text: #f5f7fb;
  --chatbot-muted: rgba(230, 236, 244, 0.72);
  --chatbot-accent: #4fd1c5;
  --chatbot-accent-strong: #12b2c6;
  --chatbot-user: linear-gradient(135deg, #1fc8db, #1b7df2);
  --chatbot-shadow: 0 24px 80px rgba(3, 10, 22, 0.42);
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(460px, calc(100vw - 32px));
  /* Tinggi dipatok (bukan cuma max-height) supaya panel selalu memanjang
     hampir setinggi layar walau isinya masih sedikit — enak buat baca dan
     tidak "loncat" tingginya tiap ada pesan baru. Sisa 24px di atas
     menyeimbangkan jarak 24px di bawah. */
  height: min(940px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--chatbot-border);
  border-radius: 28px;
  background: var(--chatbot-bg);
  box-shadow: var(--chatbot-shadow);
  /* blur mati semua layar — panel ini duduk di atas canvas meteor yang
     repaint tiap frame, jadi blur(18px) dulu di-resample tiap frame juga
     selama chat kebuka, termasuk pas user ngetik. Background sudah pekat
     (--chatbot-bg alpha .96-.98) jadi visualnya nyaris tak berubah. */
  backdrop-filter: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    visibility 0.28s ease;
  z-index: 9999;
  font-family: "Poppins", sans-serif;
}

#chatbot-container.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.chatbot-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.chatbot-clear-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 22, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  z-index: 10;
  border-radius: inherit;
}

.chatbot-clear-confirm.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chatbot-clear-confirm-card {
  width: min(280px, 100%);
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--chatbot-border);
  background: var(--chatbot-bg);
  box-shadow: var(--chatbot-shadow);
  text-align: center;
}

.chatbot-clear-confirm-card p {
  margin: 0 0 14px;
  color: var(--chatbot-text);
  font-size: 0.92rem;
  line-height: 1.45;
}

.chatbot-clear-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.chatbot-clear-confirm-actions button {
  flex: 1;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.chatbot-clear-confirm-danger {
  background: #ef4444;
  border-color: #ef4444 !important;
  color: #fff;
}

.chatbot-clear-confirm-danger:hover {
  background: #dc2626;
  border-color: #dc2626 !important;
}

.chatbot-clear-confirm-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--chatbot-text);
}

.chatbot-clear-confirm-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
}

#chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background:
    radial-gradient(
      circle at top left,
      rgba(79, 209, 197, 0.28),
      transparent 48%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02)
    );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chatbot-header-copy {
  min-width: 0;
}

.chatbot-kicker,
.chatbot-hero-kicker,
.chatbot-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chatbot-accent);
}

.chatbot-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.chatbot-title {
  margin: 0;
  color: var(--chatbot-text);
  font-size: 0.98rem;
  font-weight: 600;
}

.chatbot-status {
  margin: 6px 0 0;
  color: var(--chatbot-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.chatbot-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--chatbot-text);
  font-size: 0.65rem;
  font-weight: 600;
}

.chatbot-status-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #70f5ab;
  box-shadow: 0 0 10px rgba(112, 245, 171, 0.75);
}

.chatbot-status-badge[data-state="connecting"]::before {
  background: #ffd166;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.75);
}

.chatbot-status-badge[data-state="streaming"]::before {
  background: var(--chatbot-accent);
  box-shadow: 0 0 10px rgba(79, 209, 197, 0.8);
}

.chatbot-status-badge[data-state="error"]::before {
  background: #ff7b89;
  box-shadow: 0 0 10px rgba(255, 123, 137, 0.75);
}

.chatbot-status-badge[data-state="maintenance"]::before {
  background: #f7b733;
  box-shadow: 0 0 10px rgba(247, 183, 51, 0.75);
}

#close-chatbot {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--chatbot-text);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

#close-chatbot:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.16);
}

#clear-chatbot {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--chatbot-text);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

#clear-chatbot:hover {
  transform: translateY(-1px);
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

.chatbot-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  height: 22px;
  margin-top: 6px;
  margin-left: 12px;
}

.chatbot-mode-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 0 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--chatbot-muted);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.chatbot-mode-option:hover:not(:disabled):not(.is-active) {
  background: rgba(255, 255, 255, 0.08);
}

.chatbot-mode-option.is-active {
  background: linear-gradient(
    135deg,
    var(--chatbot-accent),
    var(--chatbot-accent-strong)
  );
  color: #07101e;
}

.chatbot-mode-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#chatbot-body {
  display: flex;
  flex-direction: column;
  /* Isi sisa tinggi panel di bawah header, biar #chat-window punya ruang
     untuk ikut memanjang. Sebelumnya aturan ini cuma ada di breakpoint
     mobile, jadi panel desktop tidak pernah benar-benar memanfaatkan
     tingginya. */
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at bottom right,
      rgba(18, 178, 198, 0.14),
      transparent 40%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}

.chatbot-maintenance {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(247, 183, 51, 0.28);
  background:
    linear-gradient(145deg, rgba(25, 26, 33, 0.96), rgba(14, 18, 27, 0.95)),
    radial-gradient(
      circle at top right,
      rgba(247, 183, 51, 0.18),
      transparent 40%
    );
  box-shadow:
    0 14px 30px rgba(4, 10, 22, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.chatbot-maintenance[hidden] {
  display: none !important;
}

.chatbot-maintenance-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(247, 183, 51, 0.14);
  border: 1px solid rgba(247, 183, 51, 0.2);
  color: #ffd166;
  font-size: 1rem;
}

.chatbot-maintenance-copy {
  min-width: 0;
}

.chatbot-maintenance-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd166;
}

.chatbot-maintenance-copy h3 {
  margin: 0 0 8px;
  color: var(--chatbot-text);
  font-size: 0.98rem;
  line-height: 1.4;
}

.chatbot-maintenance-copy p {
  margin: 0;
  color: rgba(245, 247, 251, 0.84);
  font-size: 0.84rem;
  line-height: 1.6;
}

.chatbot-maintenance-note {
  margin-top: 10px !important;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff !important;
  font-size: 0.79rem !important;
  line-height: 1.55;
}

.chatbot-hero {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(79, 209, 197, 0.18);
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(79, 209, 197, 0.16),
    rgba(255, 255, 255, 0.04)
  );
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    max-height 0.24s ease,
    margin 0.24s ease,
    padding 0.24s ease;
}

.chatbot-hero.is-hidden {
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  border-width: 0;
}

.chatbot-hero-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(7, 16, 30, 0.36);
  color: var(--chatbot-accent);
  font-size: 1.1rem;
}

.chatbot-hero-copy h3 {
  margin: 6px 0 8px;
  color: var(--chatbot-text);
  font-size: 1rem;
  line-height: 1.35;
}

.chatbot-hero-copy p {
  margin: 0;
  color: var(--chatbot-muted);
  font-size: 0.89rem;
  line-height: 1.65;
}

.chatbot-suggestion-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chatbot-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chatbot-section-note {
  font-size: 0.76rem;
  color: var(--chatbot-muted);
}

.chatbot-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-suggestion-btn {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--chatbot-text);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

.chat-suggestion-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(79, 209, 197, 0.14);
  border-color: rgba(79, 209, 197, 0.32);
}

.chat-suggestion-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#chat-window {
  /* Isi sisa tinggi panel, bukan dipatok angka tetap — pola yang sama sudah
     dipakai di breakpoint mobile. Tanpa ini area pesan mentok pendek walau
     panelnya sudah tinggi. */
  flex: 1 1 auto;
  min-height: 160px;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
}

#chatbot-container.is-maintenance #chat-window {
  min-height: 120px;
}

#chat-window::-webkit-scrollbar {
  width: 6px;
}

#chat-window::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 94%;
  animation: chatbot-message-in 0.28s ease forwards;
}

.chat-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-message--assistant {
  align-self: flex-start;
}

.message-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--chatbot-text);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.chat-message--assistant .message-avatar {
  color: var(--chatbot-accent);
  /* Glyph robot butuh lebih besar dari 0.65rem yang dikalibrasi untuk teks "AI". */
  font-size: 0.95rem;
}

.chat-message--user .message-avatar {
  background: rgba(31, 200, 219, 0.16);
  color: #bff9ff;
}

.message-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: var(--chatbot-text);
  box-shadow: 0 12px 30px rgba(4, 10, 22, 0.18);
}

.chat-message--user .message-card {
  background: var(--chatbot-user);
  border-color: transparent;
  color: #ffffff;
}

.chat-message.is-error .message-card {
  border-color: rgba(255, 123, 137, 0.38);
  background: linear-gradient(
    180deg,
    rgba(255, 123, 137, 0.16),
    rgba(255, 255, 255, 0.06)
  );
}

.chat-message.is-streaming .message-card {
  border-color: rgba(79, 209, 197, 0.3);
  box-shadow:
    0 12px 30px rgba(4, 10, 22, 0.18),
    0 0 0 1px rgba(79, 209, 197, 0.08);
}

.chat-message.is-pending .message-card {
  opacity: 0.82;
}

.message-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245, 247, 251, 0.68);
}

.chat-message--user .message-heading {
  color: rgba(255, 255, 255, 0.78);
}

.message-thinking {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.message-thinking-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: rgba(245, 247, 251, 0.68);
  font-size: 0.74rem;
  font-style: italic;
  cursor: default;
  text-align: left;
}

.message-thinking.is-finished .message-thinking-header {
  cursor: pointer;
}

.message-thinking-icon {
  color: var(--chatbot-accent);
  animation: chatbot-thinking-pulse 1.6s ease-in-out infinite;
}

.message-thinking.is-finished .message-thinking-icon {
  animation: none;
}

.message-thinking-label {
  flex: 1 1 auto;
  min-width: 0;
}

.message-thinking-chevron {
  font-size: 0.68rem;
  color: rgba(245, 247, 251, 0.5);
  transition: transform 0.2s ease;
}

.message-thinking.is-collapsed .message-thinking-chevron {
  transform: rotate(-90deg);
}

.message-thinking-body {
  max-height: 160px;
  overflow-y: auto;
  padding: 0 10px 10px;
  color: rgba(245, 247, 251, 0.68);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0.9;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    padding 0.28s ease;
}

.message-thinking.is-collapsed .message-thinking-body {
  max-height: 0;
  padding: 0 10px;
  opacity: 0;
}

.message-text {
  color: inherit;
  font-size: 0.85rem;
  line-height: 1.55;
  word-break: break-word;
}

.message-text[data-streaming="true"] {
  white-space: pre-wrap;
}

.message-text[data-streaming="true"]::after {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 1rem;
  margin-left: 0.12rem;
  vertical-align: text-bottom;
  border-radius: 999px;
  background: currentColor;
  animation: chatbot-caret 1s steps(1) infinite;
}

.message-text p,
.message-text ul,
.message-text ol,
.message-text pre {
  margin: 0;
}

/* Jarak antar-blok pakai universal sibling, bukan enumerasi pasangan tag —
   kombinasi apa pun yang dikeluarkan model (p/ul/ol/pre/strong) tetap dapat
   spasi, jadi jawaban gak pernah kelihatan nempel/campur aduk. */
.message-text > * + * {
  margin-top: 10px;
}

.message-text ul,
.message-text ol {
  padding-left: 20px;
}

.message-text ul {
  list-style: disc;
}

.message-text ol {
  list-style: decimal;
}

.message-text li + li {
  margin-top: 4px;
}

.message-text li > ul,
.message-text li > ol {
  margin-top: 4px;
}

.message-text code {
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(7, 16, 30, 0.42);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.message-text pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.message-text pre {
  padding: 10px 12px;
  border-radius: 12px;
  overflow-x: auto;
  background: rgba(7, 16, 30, 0.34);
}

.message-text a.chatbot-rich-link {
  color: #a0f4ef;
  font-weight: 600;
  text-decoration: underline;
}

.message-meta {
  font-size: 0.74rem;
  color: rgba(245, 247, 251, 0.56);
}

.chat-message--user .message-meta {
  color: rgba(255, 255, 255, 0.72);
}

#chat-input-container {
  display: flex;
  justify-content: flex-start;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#chat-input-container.is-disabled {
  opacity: 0.78;
}

.chat-input-shell {
  display: flex;
  flex-direction: column;
  gap: 0px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
}

#chat-input-container.is-disabled .chat-input-shell {
  opacity: 0.7;
}

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.chat-input-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  background: rgba(70, 75, 85, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
  padding: 6px 10px 6px 14px;
  z-index: 1;
}

.chat-input-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--border-angle),
    rgba(150, 160, 170, 0.25) 0%,
    rgba(150, 160, 170, 0.25) 60%,
    rgba(79, 209, 197, 0.6) 85%,
    rgba(255, 255, 255, 0.95) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: border-spin 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes border-spin {
  to {
    --border-angle: 360deg;
  }
}

#chat-input {
  flex: 1;
  min-width: 0;
  height: 22px;
  min-height: 22px;
  max-height: 90px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--chatbot-text);
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.3;
  padding: 0;
  overflow-y: auto;
}

#chat-input::placeholder {
  color: rgba(245, 247, 251, 0.38);
}

#chat-input:disabled {
  color: rgba(245, 247, 251, 0.62);
  cursor: not-allowed;
}

#send-chat-btn {
  min-width: 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    var(--chatbot-accent),
    var(--chatbot-accent-strong)
  );
  color: #07101e;
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(18, 178, 198, 0.24);
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease,
    box-shadow 0.18s ease;
}

#send-chat-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 10px 22px rgba(18, 178, 198, 0.32);
}

#send-chat-btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.chatbot-footer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.chat-input-hint,
.chat-connection-note {
  margin: 0;
  color: var(--chatbot-muted);
  font-size: 0.73rem;
  line-height: 1.5;
}

#open-chatbot-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8c8, #155eef);
  color: #ffffff;
  box-shadow: 0 8px 28px rgba(21, 94, 239, 0.42);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease,
    box-shadow 0.22s ease,
    visibility 0.22s ease;
  z-index: 9990;
}

body.chatbot-ready #open-chatbot-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#open-chatbot-btn.is-maintenance {
  background: linear-gradient(135deg, #f7b733, #ef476f);
  box-shadow: 0 10px 30px rgba(239, 71, 111, 0.32);
}

#open-chatbot-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(21, 94, 239, 0.44);
}

#open-chatbot-btn.is-maintenance:hover {
  box-shadow: 0 18px 40px rgba(239, 71, 111, 0.42);
}

body.chatbot-ready #open-chatbot-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
}

/* Peta halaman peta.html saat mode layar penuh fallback CSS: tombol chatbot
   melayang di atas peta, jadi ikut disembunyikan. */
body.peta-fullscreen #open-chatbot-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chatbot-launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.chatbot-launcher-copy {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes chatbot-message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chatbot-caret {
  0%,
  50% {
    opacity: 1;
  }

  50.01%,
  100% {
    opacity: 0;
  }
}

@keyframes chatbot-thinking-pulse {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  #chatbot-container {
    right: 6px;
    left: 6px;
    top: calc(var(--safe-top) + 6px);
    bottom: calc(var(--safe-bottom) + 6px);
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 18px;
  }

  #chatbot-header,
  #chatbot-body {
    padding-left: 12px;
    padding-right: 12px;
  }

  #chatbot-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  #chat-window {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  #open-chatbot-btn {
    right: 16px;
    bottom: 96px;
  }

  .chatbot-maintenance {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 13px;
  }

  .chatbot-maintenance-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .chatbot-footer-row {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  #chatbot-header {
    gap: 12px;
  }

  .chatbot-title {
    font-size: 0.94rem;
  }

  .chatbot-maintenance {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .chatbot-maintenance-icon {
    width: 36px;
    height: 36px;
  }

  .chatbot-maintenance-copy h3 {
    font-size: 0.93rem;
  }

  .chatbot-maintenance-copy p {
    font-size: 0.8rem;
  }

  .chat-message {
    max-width: 100%;
  }

  .message-card {
    padding: 13px 14px;
  }

  .chat-input-shell {
    width: 100%;
    padding: 4px 10px;
    gap: 2px;
  }

  #chat-input {
    height: 18px;
    min-height: 18px;
    font-size: 0.76rem;
  }

  #send-chat-btn {
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #chatbot-container,
  #open-chatbot-btn,
  .chat-suggestion-btn,
  #close-chatbot,
  #send-chat-btn,
  .chat-message,
  .chatbot-hero,
  .chatbot-mode-option,
  .message-thinking,
  .message-thinking-body,
  .message-thinking-chevron,
  .message-thinking-icon,
  .chatbot-verify-card,
  .chatbot-verify-action {
    transition: none;
    animation: none;
  }

  #chat-window {
    scroll-behavior: auto;
  }

  /* Kartu gate langsung di ukuran akhir, tanpa efek "pop". */
  .chatbot-verify-card,
  .chatbot-verify-gate.is-visible .chatbot-verify-card {
    transform: none;
  }
}

/* =========================================================================
   GATE VERIFIKASI MANUSIA
   Overlay absolute di DALAM .chatbot-panel, meniru .chatbot-clear-confirm
   (lihat baris 82-163) supaya tidak menambah lapisan z-index global baru —
   #identity-modal (z-index 10001) tetap muncul di atasnya.

   Gate ini memakai palet chatbot (biru-gelap + aksen teal). Modal identitas
   yang muncul SETELAHNYA dibuat mengikuti palet ini lewat varian
   #identity-modal.is-chatbot-theme di bawah — bukan sebaliknya — supaya
   satu alur terasa satu sistem tanpa mengubah tampilan modal identitas
   untuk form komentar & aspirasi.
   ========================================================================= */
.chatbot-verify-gate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 22, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  /* Di atas .chatbot-clear-confirm (10). */
  z-index: 11;
  border-radius: inherit;
}

.chatbot-verify-gate.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chatbot-verify-card {
  width: min(320px, 100%);
  padding: 26px 24px;
  border-radius: 18px;
  border: 1px solid var(--chatbot-border);
  background: var(--chatbot-bg);
  box-shadow: var(--chatbot-shadow);
  text-align: center;
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Kartu ikut "pop" saat muncul, sama seperti .identity-modal-content. */
.chatbot-verify-gate.is-visible .chatbot-verify-card {
  transform: scale(1);
}

.chatbot-verify-icon {
  display: block;
  margin-bottom: 14px;
  font-size: 2.2rem;
  color: var(--chatbot-accent);
}

#chatbot-verify-title {
  margin: 0 0 10px;
  color: var(--chatbot-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
}

.chatbot-verify-desc {
  margin: 0 0 22px;
  color: var(--chatbot-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.chatbot-verify-error {
  margin: 0 0 16px;
  color: #ff6b7a;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}

.chatbot-verify-error[hidden] {
  display: none;
}

.chatbot-verify-action {
  width: 100%;
  padding: 11px 24px;
  border-radius: 12px;
  border: 1px solid var(--chatbot-accent-strong);
  background: var(--chatbot-accent-strong);
  color: #04202a;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.chatbot-verify-action:hover {
  background: var(--chatbot-accent);
  border-color: var(--chatbot-accent);
  transform: translateY(-1px);
}

.chatbot-verify-action[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* =========================================================================
   MODAL IDENTITAS — VARIAN TEMA CHATBOT
   Dipakai HANYA saat modal dibuka dari gate AI Assistant (kelas dipasang di
   showIdentityModal lewat opsi theme:"chatbot"). Form komentar & aspirasi
   memakai modal yang sama tanpa kelas ini, jadi tampilannya tidak berubah.

   Warnanya ditulis mentah, bukan var(--chatbot-*), karena variabel itu
   di-scope ke #chatbot-container (lihat baris 22) sedangkan #identity-modal
   di-inject langsung ke <body> — di luar jangkauan pewarisan.
   ========================================================================= */
#identity-modal.is-chatbot-theme {
  background-color: rgba(4, 10, 22, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#identity-modal.is-chatbot-theme .identity-modal-content {
  background: linear-gradient(
    180deg,
    rgba(10, 19, 34, 0.98),
    rgba(4, 10, 22, 0.96)
  );
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(3, 10, 22, 0.42);
}

#identity-modal.is-chatbot-theme .modal-icon {
  color: #4fd1c5;
}

#identity-modal.is-chatbot-theme h2 {
  color: #f5f7fb;
}

#identity-modal.is-chatbot-theme #identity-modal-desc {
  color: rgba(230, 236, 244, 0.72);
}

#identity-modal.is-chatbot-theme #identity-custom-name {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #f5f7fb;
}

#identity-modal.is-chatbot-theme #identity-custom-name:focus {
  border-color: #4fd1c5;
}

#identity-modal.is-chatbot-theme #identity-custom-name::placeholder {
  color: rgba(230, 236, 244, 0.45);
}

#identity-modal.is-chatbot-theme .identity-human-label {
  color: rgba(230, 236, 244, 0.72);
}

#identity-modal.is-chatbot-theme .identity-human-label input[type="checkbox"] {
  accent-color: #4fd1c5;
}

#identity-modal.is-chatbot-theme .identity-option {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

#identity-modal.is-chatbot-theme .identity-option:has(:checked) {
  border-color: #4fd1c5;
}

#identity-modal.is-chatbot-theme .modal-close-btn {
  color: rgba(230, 236, 244, 0.72);
}

#identity-modal.is-chatbot-theme #identity-confirm-btn {
  border-radius: 12px;
  background-color: #12b2c6;
  color: #04202a;
}

#identity-modal.is-chatbot-theme #identity-confirm-btn:hover {
  background-color: #4fd1c5;
  box-shadow: 0 5px 15px rgba(79, 209, 197, 0.2);
}

/* =========================================================================
   === JALUR MOBILE-LITE — HARUS TETAP DI PALING BAWAH FILE ===
   =========================================================================
   Di HP panel chatbot hampir fullscreen (inset 6px), jadi blur(18px)-nya
   adalah blur seluruh layar di atas konten yang sedang di-scroll — dan itu
   aktif justru saat user mengetik. Background panel sendiri sudah nyaris
   pekat (rgba .96-.98), jadi blur-nya praktis tak terlihat: dimatikan di
   mobile tanpa perubahan visual berarti. Desktop tidak disentuh.
   ========================================================================= */
@media (max-width: 768px) {
  #chatbot-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Bayangan 80px selebar panel fullscreen juga mahal; dipendekkan. */
    --chatbot-shadow: 0 8px 24px rgba(3, 10, 22, 0.5);
  }

  #chatbot-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(4, 10, 22, 0.82);
  }

  .chatbot-clear-confirm {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(4, 10, 22, 0.92);
  }

  .chatbot-verify-gate {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(4, 10, 22, 0.92);
  }

  /* Varian bertema menang spesifisitas atas aturan mobile-lite #identity-modal
     di css/style.css, jadi blur-nya harus dimatikan lagi di sini. */
  #identity-modal.is-chatbot-theme {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(4, 10, 22, 0.92);
  }
}