/* KATRUPA chat widget — floating FAQ bot + live agent handoff.
   Relies on the CSS variables defined in base.css (--ink, --paper, --leaf,
   --leaf-dark, --gold, --gold-soft, --line, --error, --shadow-card, --radius,
   --font-body). Those variables are already loaded on every page this
   widget appears on (landing.css / dashboard.css both @import base.css). */

.kc { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: var(--font-body, "Work Sans", sans-serif); }

.kc-bubble {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--leaf-dark, #1D3D34);
  color: var(--paper, #F6F1E4);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(16,35,28,0.28);
  position: relative;
  transition: transform 0.15s ease, background 0.15s ease;
}
.kc-bubble:hover { transform: scale(1.05); background: var(--leaf, #2F5D50); }
.kc-bubble-icon--close { display: none; }
.kc[data-open="1"] .kc-bubble-icon--chat { display: none; }
.kc[data-open="1"] .kc-bubble-icon--close { display: block; }

.kc-unread-dot {
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--error, #9E3B33);
  border: 2px solid var(--paper, #F6F1E4);
}

.kc-panel {
  display: none;
  position: absolute; right: 0; bottom: 74px;
  width: 340px; max-width: calc(100vw - 32px);
  height: 480px; max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-card, 0 8px 24px rgba(16,35,28,0.18));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line, #D8CDB0);
}
/* [hidden] alone can be overridden by our own "display" rule above since
   author CSS beats the browser's built-in [hidden]{display:none} default
   at equal specificity — so we make "not hidden" the explicit trigger
   instead of relying on the attribute's native behavior. */
.kc-panel:not([hidden]) {
  display: flex;
}

.kc-header {
  background: var(--leaf-dark, #1D3D34);
  color: var(--paper, #F6F1E4);
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.kc-header-title { font-weight: 700; font-size: 0.95rem; }
.kc-header-status { font-size: 0.75rem; opacity: 0.75; margin-top: 2px; }
.kc-header-status.kc-status-agent { color: var(--gold-soft, #E7D4A6); opacity: 1; }
.kc-header-close {
  background: none; border: none; color: inherit; font-size: 1.4rem;
  line-height: 1; cursor: pointer; padding: 0 4px; opacity: 0.8;
}
.kc-header-close:hover { opacity: 1; }

.kc-messages {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper, #F6F1E4);
}

.kc-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 0.86rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(16,35,28,0.06); animation: kc-msg-in 0.22s ease both; }
@keyframes kc-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.kc-msg-bot, .kc-msg-agent { align-self: flex-start; background: #fff; color: var(--ink, #10231C); border-bottom-left-radius: 4px; }
.kc-msg-agent { background: #E1EEE7; }
.kc-msg-visitor { align-self: flex-end; background: var(--gold-soft, #E7D4A6); color: var(--ink, #10231C); border-bottom-right-radius: 4px; }
.kc-msg-label { font-size: 0.68rem; color: #7A7461; margin-bottom: 3px; font-weight: 600; }
.kc-msg-system { align-self: center; font-size: 0.74rem; color: #7A7461; background: none; box-shadow: none; text-align: center; }

.kc-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; }
.kc-typing span { width: 6px; height: 6px; border-radius: 50%; background: #A79E86; animation: kc-bounce 1.2s infinite ease-in-out; }
.kc-typing span:nth-child(2) { animation-delay: 0.15s; }
.kc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes kc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.kc-guest-form, .kc-input-row {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line, #D8CDB0); flex-shrink: 0; background: #fff;
}
.kc-guest-form { flex-direction: column; }

.kc-input {
  flex: 1; border: 1px solid var(--line, #D8CDB0); border-radius: 10px;
  padding: 9px 12px; font-size: 0.85rem; font-family: inherit; color: var(--ink, #10231C);
  background: var(--paper, #F6F1E4);
}
.kc-input:focus { outline: none; border-color: var(--leaf, #2F5D50); }

.kc-send-btn {
  background: var(--leaf-dark, #1D3D34); color: #fff; border: none; border-radius: 10px;
  width: 40px; height: 40px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.kc-guest-form .kc-send-btn { width: auto; padding: 0 14px; font-size: 0.82rem; font-weight: 600; }
.kc-send-btn:hover { background: var(--leaf, #2F5D50); }

.kc-footer-hint { font-size: 0.68rem; color: #7A7461; text-align: center; padding: 0 12px 10px; background: #fff; }

.kc-gate {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center; background: var(--paper, #F6F1E4);
}
.kc-gate-icon { color: var(--leaf-dark, #1D3D34); opacity: 0.6; }
.kc-gate p { margin: 0; font-size: 0.86rem; color: var(--ink, #10231C); max-width: 220px; }
.kc-gate-btn { width: auto; height: auto; padding: 10px 18px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; text-decoration: none; display: inline-block; }

@media (max-width: 420px) {
  .kc { right: 12px; bottom: 12px; }
  .kc-panel { width: calc(100vw - 24px); height: calc(100vh - 100px); }
}