/* Scooly Chat Theme - Estilo mejorado según capturas de referencia */

/* Variables CSS */
:root {
  --scooly-primary: #FF543E;
  --scooly-primary-hover: #e03e1a;
  --scooly-background: #ffffff;
  --scooly-text-primary: #202124;
  --scooly-text-secondary: #5f6368;
  --scooly-text-light: #80868b;
  --scooly-border: #dcdfe3;
  --scooly-border-light: #f0f0f0;
  --scooly-surface: #f8f9fa;
  --scooly-shadow-light: 0 2px 8px rgba(60, 64, 67, 0.08);
  --scooly-shadow-medium: 0 4px 16px rgba(60, 64, 67, 0.12);
  --scooly-shadow-strong: 0 8px 24px rgba(60, 64, 67, 0.16);
  --scooly-radius-small: 8px;
  --scooly-radius-medium: 12px;
  --scooly-radius-large: 24px;
  --scooly-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset y configuración base */
.mwai-scooly-theme {
  --mwai-spacing: 16px;
  --mwai-fontSize: 14px;
  --mwai-lineHeight: 1.5;
  --mwai-borderRadius: var(--scooly-radius-medium);
  --mwai-width: 380px;
  --mwai-fontColor: var(--scooly-text-primary);
  --mwai-backgroundPrimaryColor: var(--scooly-background);
  --mwai-backgroundHeaderColor: var(--scooly-background);
  --mwai-bubbleColor: var(--scooly-primary);
  --mwai-conversationsBackgroundColor: var(--scooly-background);
  --mwai-backgroundUserColor: var(--scooly-primary);
  --mwai-backgroundAiColor: var(--scooly-surface);
  --mwai-headerHeight: 78px;
  font-size: var(--mwai-fontSize);
  line-height: var(--mwai-lineHeight);
}

.mwai-scooly-theme * {
  box-sizing: border-box;
}

/* Layout del cuerpo para el chat lateral */
body.mwai-open {
  transition: margin-right var(--scooly-transition);
}

html:has(.mwai-fullscreen):has(.mwai-open) body {
  overflow: hidden;
}

.mwai-header:empty {
  display: none !important;
}

@media (min-width: 800px) {

  /* Header Sticky */
  .site-header.site-header--bb.sticky-header~* .mwai-scooly-theme.mwai-window,
  body:has(.site-header.site-header--bb.sticky-header) .mwai-scooly-theme.mwai-window {
    top: var(--mwai-headerHeight);
    height: calc(100vh - var(--mwai-headerHeight));
    transition: top 0.2s ease-in-out;
  }

  body:has(.nojq.fixed):has(.site-header.site-header--bb.sticky-header) .mwai-scooly-theme.mwai-window{
    top: 108px;
    height: calc(100vh - 108px);
    transition: top 0.2s ease-in-out;
  }


  /* Header Top */
  body:has(.site-header.site-header--bb) .mwai-scooly-theme.mwai-window {
    top: var(--mwai-headerHeight);
    height: calc(100vh - var(--mwai-headerHeight));
  }

  /* Header with topbar */
  body:has(.top-bar-visible):has(.scoolinary-top-bar):has(.site-header.site-header--bb) .mwai-scooly-theme.mwai-window {
    top: 119px;
    height: calc(100vh - 120px);
  }

  body:has(.top-bar-visible):has(.scoolinary-top-bar):has(.site-header.site-header--bb.sticky-header) .mwai-scooly-theme.mwai-window {
    top: var(--mwai-headerHeight);
    height: calc(100vh - var(--mwai-headerHeight));
  }

  /* Header Scroll  */
  body:has(.site-header.site-header--bb.has-scrolled) .mwai-scooly-theme.mwai-window,
  body:has(.top-bar-visible):has(.scoolinary-top-bar):has(.site-header.site-header--bb.has-scrolled) .mwai-scooly-theme.mwai-window {
    transition: top .2s ease-in-out;
    top: 0;
    height: 100%;
  }
}

/* Full screen */
.mwai-scooly-theme.mwai-window.mwai-fullscreen .mwai-input-submit {
  margin-right: inherit;
}
.mwai-scooly-theme.mwai-window.mwai-fullscreen .mwai-header .mwai-buttons {
  margin-bottom: 0px;
}
.mwai-scooly-theme.mwai-window.mwai-fullscreen .mwai-header .mwai-buttons .mwai-resize-button:before {
  width: 16px;
  height: 28px;
  font-size: 20px;
  content: "❐";
  border: none;
}
.mwai-scooly-theme.mwai-window.mwai-fullscreen .mwai-header .mwai-buttons .mwai-resize-button:hover:before {
  width: 12px;
  height: 30px;
}
.mwai-scooly-theme.mwai-fullscreen:not(.mwai-window), .mwai-scooly-theme.mwai-fullscreen.mwai-window {
  position: fixed;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  width: 100%;
  height: 100% !important;
  max-height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  z-index: 999999;
  background-color: var(--mwai-backgroundSecondaryColor);
}

@media (min-width: 850px) {
  .mwai-scooly-theme.mwai-fullscreen .scooly-quick-actions {
    grid-template-columns: repeat(7, 1fr);
  }
}

.mwai-scooly-theme.mwai-fullscreen:not(.mwai-window) .mwai-body, .mwai-scooly-theme.mwai-fullscreen.mwai-window .mwai-body {
  height: 100%;
  max-height: inherit;
  border-radius: 0;
}
.mwai-scooly-theme.mwai-fullscreen:not(.mwai-window) .mwai-body .mwai-conversation, .mwai-scooly-theme.mwai-fullscreen.mwai-window .mwai-body .mwai-conversation {
  flex: auto;
  max-height: none;
}
.mwai-scooly-theme .admin-bar .mwai-fullscreen:not(.mwai-window),
.mwai-scooly-theme .admin-bar .mwai-fullscreen.mwai-window {
  top: 32px;
}

/* Contenedor principal del chat */
.mwai-scooly-theme.mwai-window {
  position: fixed;
  top: 0;
  right: 0;
  width: 550px;
  max-width: 90vw;
  height: 100%;
  background: var(--scooly-background);
  box-shadow: var(--scooly-shadow-strong);
  display: flex;
  flex-direction: column;
  z-index: 500;
  border-radius: 0;
  transition: transform var(--scooly-transition);
  overflow: hidden;
}

body:not(.mwai-open) .mwai-scooly-theme.mwai-window {
  display: none !important;
}

body.mwai-open .mwai-scooly-theme.mwai-window {
  display: flex !important;
}

/* HEADER del chat */
.mwai-scooly-theme .mwai-header {
  background: var(--scooly-background);
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--scooly-border);
  flex-shrink: 0;
  /* box-shadow: 0 2px 8px rgba(60,64,67,0.04); */
}

.mwai-scooly-theme .mwai-header .mwai-avatar {
  width: 36px;
  height: 36px;
  margin-right: 12px;
  flex-shrink: 0;
}

.mwai-scooly-theme .mwai-header .mwai-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.mwai-scooly-theme .mwai-header .mwai-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--scooly-text-primary);
}

.mwai-scooly-theme .mwai-header .mwai-name>div:first-child {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}

.mwai-scooly-theme .mwai-header .mwai-subtitle {
  font-size: 12px;
  color: var(--scooly-text-light);
  font-weight: 400;
  line-height: 1.2;
}

.mwai-scooly-theme .mwai-header .mwai-buttons {
  display: flex;
  gap: 8px;
}

.mwai-scooly-theme .mwai-header .mwai-close-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--scooly-transition);
  position: relative;
  background: transparent;
  border: none;
}

.mwai-scooly-theme .mwai-header .mwai-close-button:hover {
  background: var(--scooly-surface);
}

.mwai-scooly-theme .mwai-close-button:before,
.mwai-scooly-theme .mwai-close-button:after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background: var(--scooly-text-primary);
  border-radius: 1px;
  transition: background var(--scooly-transition);
}

.mwai-scooly-theme .mwai-close-button:before {
  transform: rotate(45deg);
}

.mwai-scooly-theme .mwai-close-button:after {
  transform: rotate(-45deg);
}

.mwai-scooly-theme .mwai-close-button:hover:before,
.mwai-scooly-theme .mwai-close-button:hover:after {
  background: var(--scooly-text-primary);
}

.mwai-scooly-theme.mwai-window .mwai-header .mwai-buttons .mwai-resize-button {
  justify-content: center;
  height: 32px;
  width: 32px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: background var(--scooly-transition);
  position: relative;
  background: transparent;
  border: none;
}

.mwai-scooly-theme.mwai-window .mwai-header .mwai-buttons .mwai-resize-button:before {
  transition: all 0.2s ease-out;
  content: " ";
  cursor: pointer;
  position: absolute;
  height: 14px;
  width: 14px;
  border: 2px solid var(--scooly-text-primary);
}

.mwai-scooly-theme.mwai-window .mwai-header .mwai-buttons .mwai-resize-button:hover:before {
  width: 16px;
  height: 16px;
  background: var(--scooly-surface);
}

/* .mwai-scooly-theme.mwai-window.mwai-open .mwai-resize-button {
  display: none !important;
} */

.mwai-icon-container {
  display: none !important;
}

.mwai-scooly-theme .mwai-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--scooly-background);
  overflow: hidden;
  min-height: 0;
}

.mwai-scooly-theme .mwai-conversation {
  flex: 1;
  overflow-y: auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scooly-border) transparent;
}

.mwai-scooly-theme .mwai-conversation::-webkit-scrollbar {
  width: 6px;
}

.mwai-scooly-theme .mwai-conversation::-webkit-scrollbar-thumb {
  background: var(--scooly-border);
  border-radius: 3px;
}

.mwai-scooly-theme .mwai-conversation::-webkit-scrollbar-thumb:hover {
  background: var(--scooly-text-light);
}

.mwai-scooly-theme .mwai-conversation::-webkit-scrollbar-track {
  background: transparent;
}

.mwai-scooly-theme .mwai-reply {
  padding: 0;
  border-radius: 0;
  max-width: 100%;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
  color: var(--scooly-text-primary);
  border: none;
  margin-bottom: 0;
  box-shadow: none;
}

.mwai-scooly-theme .mwai-reply.mwai-user {
  align-self: flex-end;
  color: black;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 90%;
  width: 90%;
  margin-left: auto;
}

.mwai-scooly-theme .mwai-reply.mwai-ai {
  align-self: flex-start;
  max-width: 100%;
  width: 100%;
}

.scooly-quick-actions-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
  text-align: left !important;
  color: var(--scooly-text-primary) !important;
  line-height: 1.3 !important;
}

.scooly-quick-actions-description {
  font-size: 14px !important;
  color: var(--scooly-text-secondary) !important;
  font-weight: 400 !important;
  text-align: left !important;
  line-height: 1.4 !important;
  margin: 0 0 32px 0 !important;
}

.scooly-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
}

.scooly-quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  padding: 0 0.5em !important;
  background-color: transparent !important;
  background: var(--scooly-background);
  border: 1px solid var(--scooly-border);
  border-radius: var(--scooly-radius-medium);
  box-shadow: var(--scooly-shadow-light);
  cursor: pointer;
  transition: var(--scooly-transition);
  font-size: 14px;
  color: var(--scooly-text-primary);
  font-family: inherit;
  padding: 16px 12px;
  margin: 0;
  position: relative;
  overflow: hidden;
}

.scooly-quick-action-btn:hover {
  border-color: var(--scooly-primary);
  box-shadow: var(--scooly-shadow-medium);
  transform: translateY(-2px);
  background: var(--scooly-surface);
}

.scooly-quick-action-btn:active {
  transform: translateY(0);
  box-shadow: var(--scooly-shadow-light);
}

.scooly-quick-action-icon {
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--scooly-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.scooly-quick-action-btn:hover .scooly-quick-action-icon {
  transform: scale(1.1);
}

.scooly-quick-action-btn .label {
  font-size: 1em;
  color: var(--scooly-text-primary);
  text-align: center;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  transition: color 0.2s ease;
}

.scooly-quick-action-btn:hover .label {
  color: var(--scooly-primary);
}

.scooly-suboptions-container {
  margin: 0;
  padding: 0;
  text-align: left;
}

.scooly-suboptions-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 24px 0;
}

.scooly-suboption-item {
  font-size: 1.2em;
  margin-bottom: 8px;
  cursor: pointer;
  color: var(--scooly-text-primary);
  font-weight: 400;
  transition: var(--scooly-transition);
  padding: 0.5em 1em;
  border-radius: var(--scooly-radius-small);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.scooly-suboption-item .sc-icon-forward {
  margin-right: 12px;
  margin-top: 6px;
  font-weight: 600;
  font-size: 1em;
  transition: transform 0.2s ease;
  opacity: 0.7;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.scooly-suboption-item:hover {
  color: var(--scooly-primary);
  background: var(--scooly-surface);
  transform: translateX(4px);
}

.scooly-suboption-item:active {
  transform: translateX(2px);
}

.scooly-suboption-item:hover .sc-icon-forward {
  transform: translateX(4px);
  opacity: 1;
}

.scooly-back-btn {
  background-color: transparent !important;
  border: none !important;
  color: var(--scooly-text-secondary) !important;
  font-size: 1.1em;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2.5px;
  cursor: pointer;
  font-weight: 500;
  padding: 0.25em 1em 0.25em 0 !important;
  transition: var(--scooly-transition);
  display: inline-flex;
  align-items: center;
  font-family: inherit;

  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.scooly-back-btn:hover {
  background: var(--scooly-surface);
  color: var(--scooly-text-primary);
  border-color: var(--scooly-text-secondary);
}

.scooly-back-btn:focus {
  outline: none !important;
  box-shadow: none !important;
  background: var(--scooly-surface);
}

.scooly-back-btn:active {
  outline: none !important;
  box-shadow: none !important;
  transform: translateY(1px);
}

.mwai-scooly-theme .mwai-input {
  display: flex;
  padding: 12px 10px;
  gap: 12px;
  background: var(--scooly-background);
  align-items: flex-end;
  border-top: 1px solid var(--scooly-border-light);
  box-shadow: 0 -2px 8px rgba(60, 64, 67, 0.04);
}

.mwai-scooly-theme .mwai-input-text {
  flex: 1;
  position: relative;
}

.mwai-scooly-theme .mwai-input-text textarea {
  width: 100%;
  min-height: 44px;
  max-height: 98px;
  padding: 12px 16px;
  border: 1px solid var(--scooly-border);
  border-radius: 22px;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: var(--scooly-transition);
  background: var(--scooly-surface);
  line-height: 1.6;
  color: var(--scooly-text-primary);
  overflow-y: hidden;
  box-sizing: border-box;
  scrollbar-width: none;
  scrollbar-color: var(--scooly-border) transparent;
}

.mwai-scooly-theme .mwai-input-text textarea:focus {
  background: var(--scooly-background);
  border-color: var(--scooly-primary);
  box-shadow: 0 0 0 3px rgba(255, 84, 62, 0.1);
  overflow-y: auto;
}

.mwai-scooly-theme .mwai-input-text textarea::placeholder {
  color: var(--scooly-text-light);
}

.mwai-scooly-theme .mwai-input-submit {
  border-radius: 100%;
  padding: 1em;
  background: transparent;
  border-color: var(--scooly-primary, #FF543E);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--scooly-transition);
  flex-shrink: 0;
  position: relative;
  box-shadow: var(--scooly-shadow-light);
}

.mwai-scooly-theme .mwai-input-submit:hover {
  box-shadow: var(--scooly-shadow-medium);
  background: var(--scooly-primary, #FF543E);
  transform: translateY(-1px);
}

.mwai-scooly-theme .mwai-input-submit:hover svg {
  stroke: #fff
}

.mwai-scooly-theme .mwai-input-submit:active {
  transform: translateY(0);
  box-shadow: var(--scooly-shadow-light);
}

.mwai-scooly-theme .mwai-input-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.mwai-scooly-theme .mwai-input-submit svg {
  width: 20px;
  height: 20px;
  fill: transparent;
  stroke: var(--scooly-primary, #FF543E);
  stroke-width: 2;
  transition: stroke 0.2s ease;
  margin: 0 !important;
}

/* Si no hay imagen, usar una flecha */
.mwai-scooly-theme .mwai-input-submit:empty::before {
  content: '→';
  color: white;
  font-size: 18px;
  font-weight: bold;
}

/* FOOTER del chat */
.mwai-scooly-theme .mwai-footer {
  padding: 10px 5px;
  background: var(--scooly-background);
  border-top: 1px solid var(--scooly-border-light);
}

.mwai-scooly-theme .mwai-compliance {
  font-size: 11px;
  color: var(--scooly-text-light);
  text-align: center;
  line-height: 16px;
}

.mwai-scooly-theme .mwai-compliance a {
  color: var(--scooly-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mwai-scooly-theme .mwai-compliance a:hover {
  text-decoration: underline;
  color: var(--scooly-primary-hover);
}

/* ANIMACIONES */
.fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-out {
  animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* RESPONSIVE */
@media (max-width: 799px) {

  .mwai-scooly-theme.mwai-window {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    z-index: 999999;
    background-color: var(--scooly-background);
  }

  .mwai-scooly-theme.mwai-window .mwai-header .mwai-buttons .mwai-resize-button {
    display: none;
  }

  .scooly-quick-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .scooly-quick-action-btn {
    height: 90px;
    padding: 12px 8px;
  }

  .scooly-quick-action-icon {
    font-size: 22px;
    margin-bottom: 6px;
  }
}

@keyframes mwai-dot-flashing {
  0% {
    background-color: var(--scooly-text-light);
  }

  50%,
  100% {
    background-color: rgba(128, 134, 139, 0.3);
  }
}

.mwai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.mwai-typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--scooly-text-light);
  animation: mwai-dot-flashing 1.4s infinite;
}

.mwai-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.mwai-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

.mwai-scooly-theme.mwai-window,
.mwai-scooly-theme .mwai-trigger {
  display: flex !important;
}

.mwai-copy-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.mwai-copy-button:hover {
  background: var(--scooly-surface);
}

.mwai-copy-button svg {
  width: 18px;
  height: 18px;
  fill: var(--scooly-text-secondary);
}

.mwai-chatbot-container.mwai-chat-closed {
  pointer-events: none;
}

.mwai-chatbot-container.mwai-chat-closed .mwai-trigger {
  pointer-events: auto;
}

.mwai-reply {
  margin-bottom: 1rem;
  animation: fadeIn 0.3s ease-in;
}

.mwai-reply.mwai-user {
  text-align: right;
}

.mwai-reply.mwai-user .mwai-text {
  background-color: #F7D4D0;
  padding: 0.75rem 1rem;
  border-radius: 18px 18px 5px 18px;
  display: inline-block;
  max-width: 90%;
  margin-left: auto;
}

.mwai-conversation .mwai-reply.mwai-ai.mwai-rendered.mwai-init-shortcuts .mwai-text {
  background-color: transparent;
  max-width: 100%;
  width: 100%;
}

span.mwai-text:empty {
  display: none;
}


.mwai-conversation .mwai-reply.mwai-ai .mwai-text {
  background-color: #f5f5f5;
  padding: 0.75rem 1rem;
  border-radius: 18px 18px 18px 5px;
  display: inline-block;
  max-width: 90%;
}

.mwai-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.mwai-reply.mwai-ai .mwai-name {
  text-align: left;
  color: #333;
}

.mwai-name small {
  font-weight: normal;
  color: #666;
  margin-left: 0.5rem;
}

.mwai-name .mwai-name-text {
  margin-bottom: 0.35rem;
}

.mwai-reply:empty,
.mwai-text:empty {
  display: none !important;
}

.scooly-typing-indicator {
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.scooly-typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.scooly-typing-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #666;
  animation: typing-bounce 1.4s infinite ease-in-out;
  opacity: 0.4;
}

.scooly-typing-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.scooly-typing-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}

.scooly-typing-dots .dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typing-bounce {

  0%,
  80%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  40% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.fade-out {
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.15s ease-in;
}

.mwai-input-submit.new-chat-mode {
  background-color: var(--scooly-primary);
  border-color: var(--scooly-primary);
}

.mwai-input-submit.new-chat-mode:hover {
  background-color: #e55a2e;
  border-color: #e55a2e;
}

.mwai-text.thinking {
  background-color: #f8f9fa;
  border-radius: 12px;
  margin: 4px 0;
}

.mwai-text h1,
.mwai-text h2,
.mwai-text h3 {
  margin: 16px 0 8px 0;
  color: #333;
}

.mwai-text h1 {
  font-size: 1.5em;
  font-weight: bold;
}

.mwai-text h2 {
  font-size: 1.3em;
  font-weight: bold;
}

.mwai-text h3 {
  font-size: 1.1em;
  font-weight: bold;
}

.mwai-text ul,
.mwai-text ol {
  margin: 1em 0;
  padding-left: 1em;
}
a.scooly-theme-popup:hover span{
  background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSItMS42IC0xLjYgMTkuMjAgMTkuMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIiPjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMS42LCAtMS42KSwgc2NhbGUoMC42KSIgZD0iTTE2LDMxLjMxMTc2MzU3MDc3NzAwN0MxOC4yNDY5NzQ2MDY1MTc4MjgsMzEuNTMxNTc2OTYzMDU2MDcsMjAuMjY5ODEzMjgxNzQ2MjI3LDMwLjA2OTA2MjM4MDQwODgxMywyMi4zMjA0MzY0NjMxNDUxNSwyOS4xMjQ1MjE1NTEzOTY4ODVDMjQuMzk3OTU3MjMxNzIxNjU1LDI4LjE2NzU5MTM4MTY2MDgzNCwyNi43NjEyOTkyNjg0NDU4NTMsMjcuNTA3MzA3OTEwMzc2MjYsMjguMTcwNjkwOTE0OTkzMjEsMjUuNzA1ODAyMTI5MDE5OTJDMjkuNTc4MTc2NDI0MDY3NDcsMjMuOTA2NzMyODAxNDk1NDU1LDI5LjcwNzUyMTg5MTM3Mzk0NywyMS40NjY5OTQ1ODk0OTc0NzUsMzAuMDc0OTk1OTU2OTczMDYyLDE5LjIxMjUyNTk3OTI0Njg0NUMzMC40MjY2ODkxMDM5NDEzMDMsMTcuMDU0ODczOTU4MzE0NDc3LDMwLjYwNzUwMTQxMzIyMjE2NywxNC45MDE4MTgxOTUxMDk2OTQsMzAuMjg0MTM0Mjc5OTUxOTIsMTIuNzM5NzM5NTYzMjg4MzMyQzI5Ljk0NTk4NjkzNTc3MjU1NiwxMC40Nzg4MzgzMzk3NjY4MTMsMjkuOTI5MTM2OTY2MzczMjMyLDcuNzQ0MzYwOTU1MDMxNTk5LDI4LjE0NTg1MzQ3ODE2MjU1LDYuMzE0MDA1MDY1OTAwNTc5QzI2LjI3NzcwMTAwODYwNDM1Myw0LjgxNTU3NjUxODYyMDk4MywyMy4zMTY2MTIyOTczNTE3MTgsNi4zMjA0MDkyODg0NDY4NTEsMjEuMTEyNjg0NjA1NjM1NzgsNS4zODM0MDEwMjI0NzEzMDZDMTkuMDUwNjMyOTkwMjg1NjkyLDQuNTA2NzExOTExNjEwODE0NSwxOC4yMzgzNDI4MjgxNzExNiwxLjI1MjQzMzI2Mjc3OTcyNDYsMTYuMDAwMDAwMDAwMDAwMDA0LDEuMTUwMTQ5MTI0MDA5MjY3NkMxMy43OTc3OTQ0NTU3OTM2MDksMS4wNDk1MTYzMjc4ODQ1MDMsMTIuNjAwNzg5Njk1OTEyNDU3LDMuODY1MjMzNTk3OTY0MjU1NCwxMC42NTcyMzA0NjE3MDMxMTUsNC45MDU2MjQ3MzY3NzE2MUM4LjgxMDM2MjAzNTgzOTQxOCw1Ljg5NDI1NzA5MjgwNzQ5NCw2LjUzNzMyNjcwMTMyNzc0LDUuODYyMzA5NjA1ODU3Mzg0NSw0Ljg1Nzk0OTMzMTU1NDEzNSw3LjExNDUxMTA5NDMzNTAxOEMyLjk5MzIyMTg1MDM1ODgzNTUsOC41MDQ5MTU5OTY1MjM2NjgsMC43NTUyOTg2MjY4MjI3MTU5LDEwLjE1MjM2NTUyNTkzMTY3MywwLjUxNzQzNDE1MjAwNDczMDMsMTIuNDY2MjA1Mzc4Mzc5Mjc5QzAuMjcyODg5OTI0NDk1NTQ4MTYsMTQuODQ1MDIyODk1MDc1NDQ5LDIuNDg3OTg5MjkxMjU5ODI0LDE2LjczMDM1NTQ3MDMwMDQ1NiwzLjY1NDg1Mjc5NDQ2MDExMiwxOC44MTc2OTkyOTAwNTAyN0M0LjU2NDE4NjIxMjA0ODc1LDIwLjQ0NDM2MDQwNjg3MzEzNyw1LjU2NjMyMjk5MDE3NTIyNSwyMS45Mzk2NjkxMTQzMTQ4Nyw2LjY1NzcwNTk4NDk4ODE5OCwyMy40NTAyMzA4NjgwODcyNkM3Ljc5NDc2OTc0MTkxNTEyNywyNS4wMjQwMTg0NjY5MjA4OTMsOC43NjI3MTMyMzc3OTk0MywyNi42OTM0MzQ5NTMyMDYyMTQsMTAuMjQ4MjkwNzkxNDQyODIsMjcuOTQzNTQ3MjM4NDMxMTJDMTEuOTY5ODQ5Njg2MjkwMjE2LDI5LjM5MjIzNzYyNzUwNDkxLDEzLjc2MDY5NjQ3MTY1Njg3OCwzMS4wOTI3MDA2MTIzMDg0MjMsMTYsMzEuMzExNzYzNTcwNzc3MDA3IiBmaWxsPSIjRkJFQkU5IiBzdHJva2V3aWR0aD0iMCI+PC9wYXRoPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+PHBhdGggZmlsbD0iI0ZGNTQzRSIgZD0iTTkuMTY2LjMzYTIuMjUgMi4yNSAwIDAwLTIuMzMyIDBsLTUuMjUgMy4xODJBMi4yNSAyLjI1IDAgMDAuNSA1LjQzNnY1LjEyOGEyLjI1IDIuMjUgMCAwMDEuMDg0IDEuOTI0bDUuMjUgMy4xODJhMi4yNSAyLjI1IDAgMDAyLjMzMiAwbDUuMjUtMy4xODJhMi4yNSAyLjI1IDAgMDAxLjA4NC0xLjkyNFY1LjQzNmEyLjI1IDIuMjUgMCAwMC0xLjA4NC0xLjkyNEw5LjE2Ni4zM3oiPjwvcGF0aD48L2c+PC9zdmc+"), no-repeat center center;
  animation: spin 5s linear infinite;
  background-size: 3em;
  position: absolute;
  top: -12px;
  left: -2px;
  transform-origin: center;
  width: 3em;
  height: 3em;
  z-index: 1;
  opacity: 0.9;
  background-repeat: no-repeat;
}

a.scooly-theme-popup:hover i {
  color: #fff;
  z-index: 10;
  position: relative;
}


a.scooly-theme-popup:hover {
  color: #fff;
  position: relative;
}

@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
}

.mwai-text li {
  margin: 0.5em 0;
  list-style-type: disc;
}

.mwai-text strong {
  font-weight: bold;
  color: #333;
}

.mwai-text em {
  font-style: italic;
}

.mwai-text p {
  margin: 0;
  line-height: 1.5;
}

.mwai-text a {
  color: var(--scooly-primary, #FF543E) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}

.mwai-text a:hover {
  opacity: 0.8;
}

@keyframes cursorBlink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

.scooly-cursor {
  color: var(--scooly-primary, #FF543E);
  font-weight: 300;
  font-size: 1.1em;
  animation: cursorBlink 1.2s ease-in-out infinite;
  display: inline-block;
  width: 4px;
  height: 1em;
  background-color: var(--scooly-primary, #FF543E);
  margin-left: 1px;
  vertical-align: text-top;
  border-radius: 1px;
}

.mwai-trigger.mwai-open-button {
  display: none;
}

.mwai-scooly-theme .mwai-header {
  display: flex;
  align-items: center;
  padding: 4px 15px;
}

.mwai-scooly-theme .mwai-header .scooly-icon-container {
  width: 40px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.mwai-scooly-theme .mwai-header .scooly-icon-container .sc-icon-ai {
  color: var(--bb-header-links);
  ;
  font-size: 2em;
}

.scooly-title-container {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

.scooly-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.scooly-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  line-height: 1.2;
  margin: 0;
}

.mwai-scooly-theme .mwai-buttons {
  margin-left: auto;
}

.scooly-text-content-paragraph {
  margin: 8px 0 !important;
}

.mwai-input-submit.mwai-busy {
  padding: 1em 0.6em;
}

.mwai-reply.mwai-user .mwai-name {
  display: none;
}

.mwai-input-submit span {
  line-height: 1;
  font-size: 1.2em;
}

.mwai-input-submit img.emoji {
  margin: 0;
  width: 16px;
  height: 16px;
}

.mwai-input-submit img.emoji:hover {
  background: transparent;
}

.mwai-timer {
  color: #333;
}

.mwai-reply.mwai-ai.mwai-init-shortcuts .mwai-name,
.mwai-reply.mwai-ai .mwai-name {
  display: none;
}

.mwai-icon-scooly-mobile {
  margin: 2px 5px 0 0;
}

.mwai-error {
  background-color: #ff5252;
  padding: 10px;
  color: #fff;
  border-radius: 10px;
  margin: 0 10px;
}

.mwai-error a,
.mwai-error a:hover {
  color: #fff;
  text-decoration: underline;
}