/* Deliberately scoped: original WPBot assets and the Màgic theme stay intact. */
#wp-chatbot-chat-container {
  --mc-brand: oklch(61.7% .164 34);
  --mc-action: oklch(48% .15 34);
  --mc-ink: oklch(26% .013 34);
  --mc-muted: oklch(46% .018 34);
  --mc-surface: oklch(99% .004 34);
  --mc-soft: oklch(96% .009 34);
  --mc-line: oklch(88% .018 34);
  font-family: 'Titillium Web', sans-serif !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  width: auto !important;
  z-index: 99990 !important;
}
#wp-chatbot-chat-container *, #wp-chatbot-chat-container *::before, #wp-chatbot-chat-container *::after { box-sizing: border-box; }
#wp-chatbot-notification-container, #wp-chatbot-chat-container .wp-chatbot-ball-animator,
#wp-chatbot-chat-container .wp-chatbot-avatar, #wp-chatbot-chat-container .wp-chatbot-widget-avatar,
#wp-chatbot-chat-container .wp-chatbot-tab-nav, #wp-chatbot-chat-container .qcld-bot-powered-by,
#wp-chatbot-chat-container #wp-chatbot-desktop-reload, #wp-chatbot-chat-container #wp-chatbot-email-transcript {
  display: none !important;
}
#wp-chatbot-ball .wp-chatbot-ball {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  width: auto !important; min-width: 144px; height: 54px !important;
  padding: 0 20px !important; border: 1px solid oklch(43% .12 34) !important;
  border-radius: 28px !important; background: var(--mc-action) !important;
  color: var(--mc-surface) !important; box-shadow: 0 4px 16px oklch(26% .013 34 / .16) !important;
  animation: none !important; font: 600 17px/1 'Titillium Web',sans-serif !important;
  transform: none !important; scale: none !important;
  transition: background-color 180ms cubic-bezier(.2,.7,.3,1) !important;
  isolation: isolate;
}
#wp-chatbot-chat-container #wp-chatbot-ball {
  display: block !important;
  transform: none !important; scale: none !important;
  animation: magic-launch-float 5s cubic-bezier(.45,0,.55,1) infinite !important;
}
#wp-chatbot-ball .wp-chatbot-ball::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: -1;
  box-shadow: 0 6px 20px oklch(48% .15 34 / .18);
  animation: magic-launch-shadow 5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes magic-launch-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}
@keyframes magic-launch-shadow {
  0%, 100% { opacity: .3; }
  50% { opacity: .75; }
}
#wp-chatbot-chat-container #wp-chatbot-ball:is(:hover,:focus-within),
#wp-chatbot-ball:is(:hover,:focus-within) .wp-chatbot-ball::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  #wp-chatbot-chat-container #wp-chatbot-ball,
  #wp-chatbot-ball .wp-chatbot-ball::after { animation: none !important; translate: none; }
  #wp-chatbot-ball .wp-chatbot-ball { transition: none !important; }
}
#wp-chatbot-ball .wp-chatbot-ball img { display: none !important; }
#wp-chatbot-ball .magic-launch-icon { width: 24px; height: 24px; flex: none; }
#wp-chatbot-ball .wp-chatbot-ball:hover { background: oklch(46% .145 34) !important; transform: none !important; scale: none !important; }
#wp-chatbot-chat-container.magic-chat-is-open #wp-chatbot-ball { display: none !important; }
#wp-chatbot-chat-container #wp-chatbot-ball-container {
  position: static !important; width: auto !important; height: auto !important;
  inset: auto !important; margin: 0 !important; padding: 0 !important;
}
#wp-chatbot-chat-container #wp-chatbot-board-container {
  position: fixed !important; right: 24px !important; bottom: 24px !important;
  left: auto !important; top: auto !important; width: 390px !important;
  height: min(610px, calc(100dvh - 48px)) !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 0 !important; padding: 0 !important; border: 1px solid var(--mc-line) !important;
  border-radius: 20px !important; background: var(--mc-surface) !important;
  color: var(--mc-ink) !important; box-shadow: 0 16px 48px oklch(26% .013 34 / .18) !important;
  overflow: hidden !important; animation: none !important;
}
#wp-chatbot-chat-container #wp-chatbot-board-container.active-chat-board { display: flex !important; flex-direction: column; }
#wp-chatbot-board-container::after { display: none !important; }
#wp-chatbot-board-container .wp-chatbot-header {
  flex: 0 0 88px; height: 88px !important; min-height: 88px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 16px 22px !important; border-radius: 0 !important;
  background: var(--mc-surface) !important; border-bottom: 1px solid var(--mc-line);
  text-align: left !important;
}
.magic-chat-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.magic-chat-brand img { display: block; height: 28px; width: 112px; object-fit: contain; object-position: left; }
.magic-chat-brand span { color: var(--mc-muted); font: 400 14px/1.2 'Titillium Web',sans-serif; }
#wp-chatbot-board-container #wp-chatbot-desktop-close {
  position: static !important; display: grid !important; place-items: center;
  width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
  background: var(--mc-soft) !important; color: var(--mc-ink) !important;
  border: 1px solid var(--mc-line) !important; border-radius: 50% !important; cursor: pointer;
  transform: none !important;
}
#wp-chatbot-desktop-close svg { width: 20px; height: 20px; }
#wp-chatbot-board-container .wp-chatbot-content {
  flex: 1 1 auto !important; height: auto !important; min-height: 0 !important;
  padding: 24px 20px !important; overflow-y: auto !important; overscroll-behavior: contain;
  background: var(--mc-surface) !important;
}
#wp-chatbot-board-container > .slimScrollDiv {
  display: flex !important; flex-direction: column; flex: 1 1 0 !important;
  min-height: 0 !important; height: auto !important; width: 100% !important;
  overflow: hidden !important;
}
#wp-chatbot-board-container .slimScrollBar, #wp-chatbot-board-container .slimScrollRail { display: none !important; }
#wp-chatbot-board-container .wp-chatbot-messages-wrapper { height: auto !important; overflow: visible !important; }
#wp-chatbot-messages-container { margin: 0 !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
#wp-chatbot-messages-container > li {
  padding: 0 !important; margin: 0 0 16px !important; list-style: none;
  font: 400 16px/1.5 'Titillium Web',sans-serif !important; color: var(--mc-ink) !important;
}
#wp-chatbot-messages-container > li .wp-chatbot-paragraph {
  width: auto !important; max-width: 100% !important; margin: 0 !important;
  padding: 12px 16px !important; box-shadow: none !important; border: 0 !important;
  border-radius: 12px !important; color: var(--mc-ink) !important;
  background: var(--mc-soft) !important; overflow-wrap: anywhere;
  font: inherit !important; text-align: left !important;
}
#wp-chatbot-messages-container > li.wp-chat-user-msg { display: flow-root; }
#wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
  margin-left: 36px !important; background: oklch(94% .035 34) !important;
}
#wp-chatbot-messages-container a { color: var(--mc-action) !important; text-decoration: underline; text-underline-offset: 3px; }
#wp-chatbot-messages-container :is(.qcld-chatbot-site-search,.qcld-chatbot-wildcard,.qcld-chatbot-support-items,.qcld-chatbot-back-to-start,.qcld-chatbot-reset-btn),
#wp-chatbot-messages-container button.wp-chatbot-loadmore2,
#wp-chatbot-board-container button.magic-chat-prompt {
  display: flex !important; align-items: center; width: 100%; min-height: 46px;
  padding: 11px 14px !important; margin: 8px 0 !important; border: 1px solid var(--mc-line) !important;
  border-radius: 10px !important; background: var(--mc-surface) !important;
  color: var(--mc-action) !important; font: 600 16px/1.4 'Titillium Web',sans-serif !important;
  text-align: left !important; box-shadow: none !important; cursor: pointer;
}
#wp-chatbot-messages-container :is(.qcld-chatbot-site-search,.qcld-chatbot-wildcard,.qcld-chatbot-support-items):hover { background: var(--mc-soft) !important; }
#wp-chatbot-messages-container :is(.qcld-chatbot-site-search,.qcld-chatbot-wildcard)::before {
  content: ''; display: block; width: 20px; height: 20px; margin-right: 10px; flex: 0 0 20px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4M12 16v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
#wp-chatbot-messages-container .qcld-chatbot-site-search::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
}
#wp-chatbot-board-container .wp-chatbot-footer {
  flex: none !important; height: auto !important; padding: 14px 16px 16px !important;
  background: var(--mc-surface) !important; border-top: 1px solid var(--mc-line);
}
#wp-chatbot-board-container #wp-chatbot-editor-container {
  display: flex !important; align-items: center; gap: 8px; padding: 0 !important;
  width: 100% !important; height: auto !important; min-height: 48px;
  background: transparent !important; border: 0 !important; position: relative !important;
}
#wp-chatbot-editor-container label { position: absolute !important; width: 1px !important; height: 1px !important; clip-path: inset(50%); overflow: hidden; }
#wp-chatbot-board-container #wp-chatbot-editor {
  flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; height: 48px !important;
  margin: 0 !important; padding: 10px 12px !important; background: var(--mc-soft) !important;
  color: var(--mc-ink) !important; border: 1px solid var(--mc-line) !important; border-radius: 10px !important;
  box-shadow: none !important; font: 400 16px/1.5 'Titillium Web',sans-serif !important;
}
#wp-chatbot-board-container #wp-chatbot-send-message {
  position: static !important; flex: 0 0 48px; display: grid !important; place-items: center;
  width: 48px !important; height: 48px !important; margin: 0 !important; padding: 0 !important;
  background: var(--mc-action) !important; color: var(--mc-surface) !important;
  border: 0 !important; border-radius: 10px !important; font-size: 0 !important; box-shadow: none !important;
}
#wp-chatbot-board-container #wp-chatbot-editor::placeholder { color: var(--mc-muted) !important; opacity: 1 !important; }
#wp-chatbot-send-message svg { width: 22px; height: 22px; }
#wp-chatbot-board-container button:disabled { opacity: .55; cursor: wait; }
#wp-chatbot-chat-container :is(button,a,[role="button"],input):focus-visible {
  outline: 2px solid var(--mc-action) !important; outline-offset: 3px !important;
}
.magic-chat-footnote { margin: 10px 0 0; font: 400 13px/1.3 'Titillium Web',sans-serif; color: var(--mc-muted); text-align: center; }
.magic-chat-footnote a { display: inline-block; padding: 6px 0; color: var(--mc-action); text-decoration: underline; text-underline-offset: 3px; }

/* Rich replies: readable text, then real source previews outside the bubble. */
#wp-chatbot-messages-container .wp-chatbot-paragraph:has(.magic-rich-answer) {
  background: transparent !important; padding: 0 !important; border-radius: 0 !important;
}
#wp-chatbot-messages-container .magic-answer-body {
  background: var(--mc-soft); padding: 14px 16px; border-radius: 12px;
  font: 400 1rem/1.6 'Titillium Web',sans-serif; color: var(--mc-ink);
}
#wp-chatbot-messages-container .magic-answer-body p {
  margin: 0 0 .75em !important; font: inherit !important; white-space: pre-line;
}
#wp-chatbot-messages-container .magic-answer-body p:last-child { margin-bottom: 0 !important; }
#wp-chatbot-messages-container .magic-answer-body strong { font-weight: 700; color: var(--mc-ink); }
#wp-chatbot-messages-container .magic-answer-body :is(ul,ol) {
  margin: .65em 0 !important; padding: 0 0 0 1.2em !important; list-style-position: outside !important;
}
#wp-chatbot-messages-container .magic-answer-body ul { list-style-type: disc !important; }
#wp-chatbot-messages-container .magic-answer-body ol { list-style-type: decimal !important; }
#wp-chatbot-messages-container .magic-answer-body li {
  display: list-item !important; margin: .4em 0 !important; padding: 0 !important;
  font: inherit !important; color: inherit !important;
}
#wp-chatbot-messages-container .magic-answer-body li::marker { color: var(--mc-muted); }
#wp-chatbot-messages-container .magic-sources { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 10px; }
#wp-chatbot-messages-container a.magic-source-card {
  display: grid !important; grid-template-columns: 58px minmax(0,1fr) 16px; align-items: center; gap: 10px;
  width: 100% !important; height: auto !important; min-height: 86px; padding: 10px !important; margin: 0 !important;
  border: 1px solid var(--mc-line); border-radius: 12px; background: var(--mc-surface);
  color: var(--mc-ink) !important; text-decoration: none !important; box-shadow: none !important;
  transform: none !important; text-align: left !important;
  transition: border-color 160ms cubic-bezier(.2,.7,.3,1), background-color 160ms cubic-bezier(.2,.7,.3,1);
}
#wp-chatbot-messages-container a.magic-source-card:hover { border-color: var(--mc-action); background: var(--mc-soft); }
.magic-source-thumb {
  display: grid; place-items: center; position: relative; width: 58px; height: 64px;
  overflow: hidden; border-radius: 7px; background: var(--mc-soft); color: var(--mc-muted);
}
.magic-source-thumb > svg { width: 24px; height: 24px; }
#wp-chatbot-messages-container .magic-source-thumb > img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  object-fit: cover; margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
}
#wp-chatbot-messages-container .magic-source-logo > img { object-fit: contain; background: var(--mc-surface); }
.magic-source-copy { display: grid; gap: 3px; min-width: 0; }
.magic-source-meta { font: 400 .75rem/1.3 'Titillium Web',sans-serif; color: var(--mc-muted); }
.magic-source-title { font: 600 1rem/1.25 'Titillium Web',sans-serif; color: var(--mc-ink); overflow-wrap: anywhere; }
.magic-source-excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 400 .8125rem/1.4 'Titillium Web',sans-serif; color: var(--mc-muted);
}
.magic-source-arrow { width: 16px; height: 16px; color: var(--mc-action); }

/* Keep the plugin marker, replace its animated GIF with a small accessible status. */
#wp-chatbot-messages-container img.wp-chatbot-comment-loader { visibility: hidden !important; width: 0 !important; height: 0 !important; }
#wp-chatbot-messages-container .wp-chatbot-paragraph:has(.magic-typing) { padding: 10px 14px !important; }
#wp-chatbot-messages-container .magic-typing {
  display: inline-flex !important; align-items: center; gap: 10px; width: auto !important; height: auto !important;
  margin: 0 !important; padding: 0 !important; background: none !important;
  font: 400 .875rem/1.5 'Titillium Web',sans-serif; color: var(--mc-muted);
}
.magic-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.magic-typing-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3;
  animation: magic-typing-dot 1.4s cubic-bezier(.45,0,.55,1) infinite;
}
.magic-typing-dots i:nth-child(2) { animation-delay: 160ms; }
.magic-typing-dots i:nth-child(3) { animation-delay: 320ms; }
@keyframes magic-typing-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .magic-typing-dots i { animation: none; opacity: .6; }
  #wp-chatbot-messages-container a.magic-source-card { transition: none; }
}
@media(max-width: 600px) {
  #wp-chatbot-chat-container { right: 16px !important; bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  #wp-chatbot-chat-container #wp-chatbot-board-container {
    right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 24px) !important; height: min(600px, calc(100dvh - 24px - env(safe-area-inset-bottom))) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom)) !important;
  }
  #wp-chatbot-board-container .wp-chatbot-content { padding: 20px 16px !important; }
}