/* ---- TrickyWombat Chat (Fixed corner widget) ---- */

/* Theme variables (can be overridden via theme/Elementor) */
:root {
  --twc-primary: #4a90a4;      /* TW teal */
  --twc-primary-contrast: #ffffff;
  --twc-bg: #ffffff;
  --twc-text: #111827;
  --twc-muted: #6b7280;
  --twc-border: #e5e7eb;
  --twc-shadow: 0 20px 40px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
}

/* Root container (injected via JS) */
#tw-chat-root {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000; /* Very high so it's not hidden behind theme headers */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* Floating bubble button */
.twc-floating-btn {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--twc-primary);
  color: var(--twc-primary-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--twc-shadow);
  cursor: pointer;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.twc-floating-btn:hover { transform: translateY(-1px); }
.twc-floating-btn:active { transform: translateY(0); }
.twc-floating-btn:focus { outline: 2px solid #4a90a4; outline-offset: 2px; }

/* Chat panel (light fixed window, no overlay) */
.twc-panel {
  position: absolute;
  right: 0;
  bottom: 72px; /* space for the bubble */
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 108px);
  background: var(--twc-bg);
  color: var(--twc-text);
  border: 1px solid var(--twc-border);
  border-radius: 14px;
  box-shadow: var(--twc-shadow);
  display: none;            /* starts closed */
  overflow: hidden;
}

/* Open state (controlled by attribute) */
.twc-panel[data-open="true"] { display: flex; flex-direction: column; }

/* Header */
.twc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--twc-border);
  background: #fff;
}
.twc-title {
  font-weight: 600;
  font-size: 14px;
}
.twc-actions {
  display: flex; gap: 6px;
}
.twc-icon-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--twc-border);
  background: #fff; color: var(--twc-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.twc-icon-btn:hover { background: #f9fafb; }

/* Content (messages area) */
.twc-messages {
  padding: 10px 12px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  background: #fafafa;
}
.twc-msg {
  font-size: 14px; line-height: 1.45;
  padding: 8px 10px; border-radius: 10px;
  margin: 6px 0; max-width: 85%;
  word-wrap: break-word; white-space: pre-wrap;
}
.twc-msg.user    { background: #e0e7ff; color: #1f2937; margin-left: auto; }
.twc-msg.bot     { background: #ffffff; color: #1f2937; border: 1px solid var(--twc-border); }

/* Input area */
.twc-input {
  border-top: 1px solid var(--twc-border);
  background: #fff;
  padding: 10px;
}
.twc-row {
  display: flex; gap: 8px; align-items: flex-end;
}
.twc-textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--twc-border);
  border-radius: 10px;
  font-size: 14px;
}
.twc-send {
  background: var(--twc-primary);
  color: var(--twc-primary-contrast);
  border: none; border-radius: 10px;
  height: 40px; padding: 0 14px; cursor: pointer;
}
.twc-send:disabled {
  opacity: .6; cursor: not-allowed;
}

/* Basic responsiveness */
@media (max-width: 420px) {
  .twc-panel { width: 94vw; bottom: 76px; }
}