/* Enya chat widget — vanilla, no framework, scoped under .tf-enya-* so it
   can't collide with theme classes. Colours reuse the site's existing
   palette custom properties where they exist; hardcoded fallbacks match
   the values already used elsewhere in functions.php (see tf-sold-badge,
   the pull-quote blocks) so this reads as part of the same site, not a
   bolted-on widget. */

.tf-enya-trigger {
  /* Was "margin: 32px 0" -- zero horizontal margin meant the border sat
     right against the screen edge on narrow/mobile viewports, where the
     surrounding content container has little side padding of its own
     (Tina, 13 Aug: "too tight to the screen"). Border also thickened
     1px -> 2px per her explicit choice (no background fill) -- weight is
     what actually reads as "stands out" against a dark background, a
     thin line barely registers regardless of solid vs dashed. */
  margin: 32px 16px;
  padding: 20px;
  border: 2px dashed #bb7319;
  border-radius: 4px;
  text-align: center;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tf-enya-trigger-face {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tf-enya-trigger button {
  background: none;
  border: none;
  color: #89016a;
  font: inherit;
  font-style: italic;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tf-enya-trigger button:hover,
.tf-enya-trigger button:focus-visible {
  opacity: 0.8;
}

.tf-enya-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #1a1a1a;
  vertical-align: middle;
}
.tf-enya-nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tf-enya-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tf-enya-overlay.tf-enya-open {
  opacity: 1;
  pointer-events: auto;
}

.tf-enya-panel {
  position: fixed;
  z-index: 99999;
  background: #f7f3ee;
  color: #333;
  /* Second pass on this: plain `color-scheme: light` turned out not to be
     enough -- reports came back of Enya's own reply text (not just the
     input box) rendering white on the light panel, which means the
     browser is heuristically auto-darkening the whole subtree's content,
     not just native form controls. `only light` is the stronger, spec-
     defined opt-out built for exactly this (plain `light` is treated by
     some browsers as a preference/hint that a forced-dark heuristic can
     still override; `only` tells it not to adapt this content at all).
     forced-color-adjust covers the separate Windows-High-Contrast-mode
     case for the same reason. Between the two, nothing in this panel
     should be eligible for automatic recolouring regardless of the
     visitor's OS/browser dark-mode setting. */
  color-scheme: only light;
  forced-color-adjust: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}
.tf-enya-panel * {
  color-scheme: only light;
  forced-color-adjust: none;
}
/* Desktop: side panel from the right */
@media (min-width: 769px) {
  .tf-enya-panel {
    top: 16px;
    right: 16px;
    bottom: 16px;
    height: auto;
    width: 380px;
    border-radius: 16px;
    transform: translateX(calc(100% + 16px));
  }
  .tf-enya-panel.tf-enya-open {
    transform: translateX(0);
  }
}
/* Mobile: bottom sheet, 75% height, page stays visible/scrollable above it */
@media (max-width: 768px) {
  .tf-enya-panel {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 75vh;
    width: auto;
    border-radius: 16px;
    transform: translateY(calc(100% + 12px));
  }
  .tf-enya-panel.tf-enya-open {
    transform: translateY(0);
  }
}

.tf-enya-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #bb7319;
  flex-shrink: 0;
}
.tf-enya-header img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tf-enya-header-text {
  flex: 1;
  min-width: 0;
}
.tf-enya-header-name {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}
.tf-enya-header-badge {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  display: block;
  margin-top: 2px;
}
.tf-enya-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  color: inherit;
  opacity: 0.6;
}
.tf-enya-close:hover,
.tf-enya-close:focus-visible {
  opacity: 1;
}

.tf-enya-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tf-enya-msg {
  max-width: 90%;
  line-height: 1.5;
  font-size: 0.95rem;
  white-space: pre-wrap;
}
.tf-enya-msg-user {
  align-self: flex-end;
  background: #1a1a1a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px 12px 2px 12px;
}
.tf-enya-msg-enya {
  align-self: flex-start;
  color: #333;
}
.tf-enya-msg-enya a {
  color: #89016a;
}

.tf-enya-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  align-self: flex-start;
  width: 100%;
  max-width: 90%;
}
.tf-enya-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.tf-enya-card:hover,
.tf-enya-card:focus-visible {
  border-color: #89016a;
}
.tf-enya-card img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.tf-enya-card-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.tf-enya-card-arrow {
  margin-left: auto;
  opacity: 0.5;
  font-size: 1.1rem;
}

.tf-enya-typing {
  display: inline-block;
  opacity: 0.6;
  font-style: italic;
  font-size: 0.9rem;
  /* Was static (no animation at all) -- during any real wait (a slow
     provider, a fallback cascade) it just sat there unchanging, which read
     as frozen/broken rather than "working" (Tina, 13 Aug: "as there was no
     animation I thought she was stuck"). Simple opacity pulse, no JS
     changes needed, communicates "in progress" regardless of how long the
     actual wait turns out to be. */
  animation: tf-enya-typing-pulse 1.2s ease-in-out infinite;
}

@keyframes tf-enya-typing-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.9; }
}

.tf-enya-inputrow {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.tf-enya-input {
  flex: 1;
  /* Explicit color-scheme plus appearance:none on the element itself, not
     just an ancestor: confirmed via live devtools testing that no site CSS
     rule was overriding this, so the "white text I typed" bug was almost
     certainly the browser's own native dark-mode theming of the textarea
     widget's internals, which explicit background/color alone doesn't
     always defeat, only opting out of native appearance reliably does. */
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: #222;
  caret-color: #222;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: none;
  max-height: 100px;
}
.tf-enya-input::placeholder {
  color: rgba(0, 0, 0, 0.45);
}
.tf-enya-input:focus {
  outline: 2px solid #89016a;
  outline-offset: 1px;
}
.tf-enya-send {
  background: #89016a;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1.1rem;
}
.tf-enya-send:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .tf-enya-panel,
  .tf-enya-overlay {
    transition: none;
  }
}

/* ---- Dark mode variant -------------------------------------------------
   Deliberate choice, not the same bug as before: everything above is fixed
   literal colours specifically so the panel is immune to the site's
   [data-theme="dark"] variable swap. This block is the one place that's
   allowed to respond to it, matching the site's own dark palette (#181824 /
   #ffeffb, the same values functions.php uses for the rest of the site) so
   Enya's panel looks like part of the same dark theme rather than either
   ignoring it or fighting it. Her sent-message bubble and the send button
   use the site's magenta accent (color-1) instead of plain dark, per Tina's
   own request. */
[data-theme="dark"] .tf-enya-panel {
  background: #181824;
  color: #ffeffb;
}
[data-theme="dark"] .tf-enya-header {
  border-bottom-color: #bb7319;
}
[data-theme="dark"] .tf-enya-header-name {
  color: #ffeffb;
}
[data-theme="dark"] .tf-enya-close {
  color: #ffeffb;
}
[data-theme="dark"] .tf-enya-msg-enya {
  color: #ffeffb;
}
[data-theme="dark"] .tf-enya-msg-enya a {
  color: #ffd9f6;
}
[data-theme="dark"] .tf-enya-msg-user {
  background: #89016a;
  color: #fff;
}
[data-theme="dark"] .tf-enya-card {
  background: #23233d;
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffeffb;
}
[data-theme="dark"] .tf-enya-card:hover,
[data-theme="dark"] .tf-enya-card:focus-visible {
  border-color: #ffd9f6;
}
[data-theme="dark"] .tf-enya-inputrow {
  border-top-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .tf-enya-input {
  background: #23233d;
  color: #ffeffb;
  caret-color: #ffeffb;
  border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .tf-enya-input::placeholder {
  color: rgba(255, 239, 251, 0.5);
}