/* =========================================================================
   MYTHICA THEMING for the AI Engine Calliope chatbot.
   -------------------------------------------------------------------------
   Enqueued SITE-WIDE so Calliope wears one face everywhere: the floating
   bubble on every page AND the instance docked in the Akashi panel are the
   same thing, styled the same way. Overrides AI Engine's default 'chatgpt'
   theme (blue bubbles, light frame) with the Mythica palette — deep
   midnight glass, gold accents, luminous ink.

   AI Engine class surface is broad + versioned; these rules target the
   stable public classes and lean on !important to win over the theme.
   ========================================================================= */

.mwai-chatbot-container {
  --myth-ink:     #e6ecff;
  --myth-ink-dim: #9fb3e6;
  --myth-gold:    #f2d79a;
  --myth-glass:   rgba(16,22,44,0.86);
  --myth-glass-2: rgba(30,40,74,0.72);
  --myth-line:    rgba(140,170,235,0.16);
  color: var(--myth-ink) !important;
}

/* the popup window frame (bubble mode) */
.mwai-chatbot-container .mwai-window .mwai-window-box,
.mwai-chatbot-container .mwai-window {
  background: linear-gradient(180deg, rgba(10,15,34,0.96), rgba(8,12,28,0.97)) !important;
  border: 1px solid var(--myth-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 40px rgba(90,115,185,.10) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05);
  color: var(--myth-ink) !important;
}

/* header */
.mwai-chatbot-container .mwai-header {
  background: transparent !important;
  border-bottom: 1px solid var(--myth-line) !important;
  color: var(--myth-ink) !important;
}
.mwai-chatbot-container .mwai-name,
.mwai-chatbot-container .mwai-header * { color: var(--myth-ink) !important; }

/* conversation body — transparent so the panel/sky reads through the glass */
.mwai-chatbot-container .mwai-body,
.mwai-chatbot-container .mwai-conversation,
.mwai-chatbot-container .mwai-content { background: transparent !important; color: var(--myth-ink) !important; }

/* assistant replies — dark glass */
.mwai-chatbot-container .mwai-reply,
.mwai-chatbot-container .mwai-reply.mwai-ai,
.mwai-chatbot-container .mwai-ai .mwai-text {
  background: var(--myth-glass-2) !important;
  border: 1px solid var(--myth-line) !important;
  color: var(--myth-ink) !important;
  border-radius: 14px !important;
}
/* the visitor's own messages — amber, never the default blue */
.mwai-chatbot-container .mwai-reply.mwai-user,
.mwai-chatbot-container .mwai-user,
.mwai-chatbot-container .mwai-user .mwai-text {
  background: linear-gradient(180deg, rgba(238,199,122,.92), rgba(206,158,86,.86)) !important;
  color: #22160a !important;
  border: none !important;
  border-radius: 14px !important;
}
/* links + inline accents */
.mwai-chatbot-container a { color: var(--myth-gold) !important; text-decoration-color: rgba(242,215,154,.5) !important; }

/* the input row */
.mwai-chatbot-container .mwai-input,
.mwai-chatbot-container .mwai-form,
.mwai-chatbot-container form {
  background: rgba(6,10,24,.7) !important;
  border: 1px solid var(--myth-line) !important;
  border-radius: 12px !important;
}
.mwai-chatbot-container textarea,
.mwai-chatbot-container input[type="text"] {
  background: transparent !important;
  color: var(--myth-ink) !important;
}
.mwai-chatbot-container textarea::placeholder,
.mwai-chatbot-container input[type="text"]::placeholder { color: var(--myth-ink-dim) !important; }
.mwai-chatbot-container .mwai-submit,
.mwai-chatbot-container button[type="submit"],
.mwai-chatbot-container .mwai-input-submit { color: var(--myth-gold) !important; fill: var(--myth-gold) !important; }

/* the floating trigger bubble — a midnight orb with a gold rim */
.mwai-open-button,
.mwai-trigger,
.mwai-chatbot-container .mwai-open-button {
  background: radial-gradient(circle at 40% 35%, rgba(60,80,150,.98), rgba(14,20,44,.98)) !important;
  border: 1px solid rgba(238,199,122,.35) !important;
  box-shadow: 0 6px 26px rgba(0,0,0,.45), 0 0 24px rgba(238,199,122,.18) !important;
}