/**
 * VenueKonnex AI — floating chat widget brand restyle (v2).
 *
 * The upstream AI Engine themes use `.mwai-chatgpt-theme`, `.mwai-trigger`,
 * `.mwai-window-box`, `.mwai-input button.mwai-input-submit`, etc. — NOT the
 * `.mwai-chat` prefix v1 of this file assumed. v2 targets the real class
 * names and is much more conservative about which surfaces get the brand
 * gradient (only the icon, never the trigger container which also holds the
 * tooltip text).
 *
 * Brand palette:
 *   --vk-green-1: #0a7f3f
 *   --vk-green-2: #0ea65a
 *   --vk-navy:    #0b1f3a
 *   --vk-mist:    #f5f9f6
 *   --vk-ink:     #1a2530
 *
 * The selectors below use both `.mwai-chatgpt-theme` and `.mwai-foundation-theme`
 * so the rebrand works whether the admin picks the ChatGPT or Foundation theme.
 * If you switch to `timeless` or `messages`, add a third selector with the
 * matching theme class.
 */

:root {
  --vk-green-1: #0a7f3f;
  --vk-green-2: #0ea65a;
  --vk-navy:    #0b1f3a;
  --vk-mist:    #f5f9f6;
  --vk-ink:     #1a2530;
}

/* ============================================================ */
/* CSS variable overrides on the theme root                     */
/* ============================================================ */
.mwai-chatgpt-theme,
.mwai-foundation-theme {
  --mwai-accentColor:                 var(--vk-green-1);
  --mwai-backgroundHeaderColor:       var(--vk-navy);
  --mwai-headerColor:                 #ffffff;
  --mwai-iconTextBackgroundColor:     var(--vk-navy);
  --mwai-iconTextColor:               #ffffff;
}

/* ============================================================ */
/* The floating bubble icon — green ONLY on the actual icon,    */
/* NOT on the entire trigger container (that's what was bleeding) */
/* ============================================================ */
.mwai-chatgpt-theme .mwai-trigger,
.mwai-foundation-theme .mwai-trigger {
  background: transparent !important;
  box-shadow: none !important;
}

.mwai-chatgpt-theme .mwai-trigger .mwai-icon-container .mwai-icon,
.mwai-foundation-theme .mwai-trigger .mwai-icon-container .mwai-icon {
  background: linear-gradient(135deg, var(--vk-green-1) 0%, var(--vk-green-2) 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px rgba(10, 127, 63, 0.32) !important;
}

.mwai-chatgpt-theme .mwai-trigger .mwai-icon-container .mwai-icon:hover,
.mwai-foundation-theme .mwai-trigger .mwai-icon-container .mwai-icon:hover {
  box-shadow: 0 12px 32px rgba(10, 127, 63, 0.42) !important;
}

/* ============================================================ */
/* Header inside the open chat window                           */
/* ============================================================ */
.mwai-chatgpt-theme.mwai-window .mwai-header,
.mwai-foundation-theme.mwai-window .mwai-header {
  background: linear-gradient(135deg, var(--vk-navy) 0%, var(--vk-green-1) 100%) !important;
  color: #ffffff !important;
}

.mwai-chatgpt-theme.mwai-window .mwai-header .mwai-name,
.mwai-foundation-theme.mwai-window .mwai-header .mwai-name {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ============================================================ */
/* Message bubbles — both user AND AI get a brand gradient so    */
/* the AI reply feels as polished as the user message. Navy      */
/* gradient on AI mirrors the green gradient on user; together   */
/* they form a clean two-color brand language inside the chat.   */
/* ============================================================ */
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text,
.mwai-foundation-theme .mwai-reply.mwai-user .mwai-text {
  background: linear-gradient(135deg, var(--vk-green-1) 0%, var(--vk-green-2) 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(10, 127, 63, 0.18) !important;
}

.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text,
.mwai-foundation-theme .mwai-reply.mwai-ai .mwai-text,
.mwai-chatgpt-theme .mwai-reply.mwai-assistant .mwai-text,
.mwai-foundation-theme .mwai-reply.mwai-assistant .mwai-text {
  background: linear-gradient(135deg, #0b1f3a 0%, #163a66 60%, #1f4a82 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(11, 31, 58, 0.22) !important;
}

/* Links inside AI bubbles — bright mint so they read against the navy gradient. */
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text a,
.mwai-foundation-theme .mwai-reply.mwai-ai .mwai-text a,
.mwai-chatgpt-theme .mwai-reply.mwai-assistant .mwai-text a,
.mwai-foundation-theme .mwai-reply.mwai-assistant .mwai-text a {
  color: #6fe5a8 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(111, 229, 168, 0.45) !important;
  text-underline-offset: 2px !important;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text a:hover,
.mwai-foundation-theme .mwai-reply.mwai-ai .mwai-text a:hover {
  color: #a0f3c4 !important;
  text-decoration-color: #a0f3c4 !important;
}

/* Links inside user bubbles — high-contrast white. */
.mwai-chatgpt-theme .mwai-reply.mwai-user .mwai-text a,
.mwai-foundation-theme .mwai-reply.mwai-user .mwai-text a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Inline code / pre inside AI bubbles — subtle frosted look so code stays legible on the dark bubble. */
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text code,
.mwai-foundation-theme .mwai-reply.mwai-ai .mwai-text code,
.mwai-chatgpt-theme .mwai-reply.mwai-assistant .mwai-text code,
.mwai-foundation-theme .mwai-reply.mwai-assistant .mwai-text code {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f0fff5 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  font-size: 0.92em !important;
}
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text pre,
.mwai-foundation-theme .mwai-reply.mwai-ai .mwai-text pre {
  background: rgba(0, 0, 0, 0.28) !important;
  color: #f0fff5 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* AI bubble strong / em — keep them readable on the navy gradient. */
.mwai-chatgpt-theme .mwai-reply.mwai-ai .mwai-text strong,
.mwai-foundation-theme .mwai-reply.mwai-ai .mwai-text strong,
.mwai-chatgpt-theme .mwai-reply.mwai-assistant .mwai-text strong,
.mwai-foundation-theme .mwai-reply.mwai-assistant .mwai-text strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ============================================================ */
/* Send button — desktop                                        */
/* ============================================================ */
.mwai-chatgpt-theme .mwai-input button.mwai-input-submit,
.mwai-foundation-theme .mwai-input button.mwai-input-submit {
  background: linear-gradient(135deg, var(--vk-green-1) 0%, var(--vk-green-2) 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.mwai-chatgpt-theme .mwai-input button.mwai-input-submit:hover,
.mwai-foundation-theme .mwai-input button.mwai-input-submit:hover {
  filter: brightness(1.05);
}

/* ============================================================ */
/* MOBILE: stop the fullscreen takeover                         */
/* Upstream forces `.mwai-window.mwai-open` to be fullscreen at */
/* max-width 760px. We override so it stays a corner popup that */
/* takes ~92% of the viewport width and 80% height, with proper */
/* margins. The send button also reverts to inline width.       */
/* ============================================================ */
@media (max-width: 760px) {
  .mwai-chatgpt-theme.mwai-window.mwai-open,
  .mwai-foundation-theme.mwai-window.mwai-open {
    /* Override the upstream mobile-fullscreen-window mixin */
    position: fixed !important;
    top: auto !important;
    bottom: 20px !important;
    right: 4% !important;
    left: 4% !important;
    width: 92% !important;
    max-width: 92% !important;
    height: 78dvh !important;
    max-height: 78dvh !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(11, 31, 58, 0.32) !important;
  }

  /* Bring the header back on mobile (upstream hides it). */
  .mwai-chatgpt-theme.mwai-window .mwai-header,
  .mwai-foundation-theme.mwai-window .mwai-header {
    display: flex !important;
    padding: 12px 14px !important;
  }

  /* Window-box should fit the new popup container. */
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-window-box,
  .mwai-foundation-theme.mwai-window.mwai-open .mwai-window-box {
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
  }

  /* Hide the mobile-only sticky mini header (upstream injects this when
     fullscreen is in effect — with our override it's redundant). */
  .mwai-chatgpt-theme.mwai-window .mwai-mobile-header,
  .mwai-foundation-theme.mwai-window .mwai-mobile-header {
    display: none !important;
  }

  /* Send button — back to inline, not full-width oval. */
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input,
  .mwai-foundation-theme.mwai-window.mwai-open .mwai-input {
    flex-direction: row !important;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input button.mwai-input-submit,
  .mwai-foundation-theme.mwai-window.mwai-open .mwai-input button.mwai-input-submit {
    width: auto !important;
    min-width: 44px !important;
    max-width: 80px !important;
    margin-left: 8px !important;
    flex: 0 0 auto !important;
    border-radius: 10px !important;
  }
  .mwai-chatgpt-theme.mwai-window.mwai-open .mwai-input .mwai-input-text,
  .mwai-foundation-theme.mwai-window.mwai-open .mwai-input .mwai-input-text {
    flex: 1 1 auto !important;
    width: auto !important;
  }
}

/* ============================================================ */
/* Window shadow + radius (desktop)                             */
/* ============================================================ */
@media (min-width: 761px) {
  .mwai-chatgpt-theme.mwai-window .mwai-window-box,
  .mwai-foundation-theme.mwai-window .mwai-window-box {
    border-radius: 16px !important;
  }
  .mwai-chatgpt-theme.mwai-window,
  .mwai-foundation-theme.mwai-window {
    filter: drop-shadow(0 24px 60px rgba(11, 31, 58, 0.22)) !important;
  }
}