/* ═══════════════════════════════════════════════════════
   SATT Chatbot — Professional UI v2.0
   Mohammed VI Tanger Tech City — Official Institution
   ═══════════════════════════════════════════════════════ */

:root {
  --satt-primary: #25408f;
  --satt-primary-dk: #1e3577;
  --satt-primary-lt: #3356b4;
  --satt-primary-xlt: #4a75d4;
  --satt-green: #96c93d;
  --satt-green-dk: #7db541;
  --satt-white: #ffffff;
  --satt-light: #f5f7fb;
  --satt-gray: #8a90a0;
  --satt-gray-lt: #dde3ee;
  --satt-text: #2c2f3a;
  --satt-radius: 16px;
  --satt-shadow:
    0 16px 48px rgba(37, 64, 143, 0.16), 0 4px 16px rgba(37, 64, 143, 0.1);
}

/* ════════════════════════════════════════
   TOGGLE BUTTON
   ════════════════════════════════════════ */

#satt-chatbot-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  padding: 0;
}

/* Main orb */
.satt-toggle-orb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    var(--satt-primary-xlt) 0%,
    var(--satt-primary-lt) 45%,
    var(--satt-primary) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 64, 143, 0.38);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease;
  position: relative;
  flex-shrink: 0;
}

/* Green online indicator dot */
.satt-toggle-orb::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  background: var(--satt-green);
  border-radius: 50%;
  border: 2px solid var(--satt-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: opacity 0.2s;
}

/* Hover label (appears to the left) */
.satt-toggle-label {
  position: absolute;
  right: 68px;
  background: var(--satt-primary-dk);
  color: var(--satt-white);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(25, 48, 94, 0.28);
}

/* Arrow on the right side of the label */
.satt-toggle-label::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid var(--satt-primary-dk);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* Hover state */
#satt-chatbot-toggle:hover .satt-toggle-orb {
  transform: scale(1.08);
  box-shadow:
    0 6px 28px rgba(25, 48, 94, 0.5),
    0 0 0 7px rgba(37, 64, 143, 0.18);
}

#satt-chatbot-toggle:hover .satt-toggle-label {
  opacity: 1;
  transform: translateX(0);
}

/* Active (chat is open) */
#satt-chatbot-toggle.satt-chatbot-active .satt-toggle-orb {
  background: linear-gradient(
    145deg,
    var(--satt-primary-lt) 0%,
    var(--satt-primary) 100%
  );
  box-shadow: 0 4px 20px rgba(37, 64, 143, 0.4);
}

#satt-chatbot-toggle.satt-chatbot-active .satt-toggle-orb::after {
  opacity: 0;
  pointer-events: none;
}

/* Pulse animation (idle, not open) — subtle navy ring */
@keyframes satt-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 20px rgba(25, 48, 94, 0.4),
      0 0 0 0 rgba(37, 64, 143, 0.3);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(25, 48, 94, 0.4),
      0 0 0 12px rgba(37, 64, 143, 0);
  }
}

#satt-chatbot-toggle:not(.satt-chatbot-active) .satt-toggle-orb {
  animation: satt-pulse 2.8s infinite;
}

#satt-chatbot-toggle:hover:not(.satt-chatbot-active) .satt-toggle-orb {
  animation: none;
}

/* ════════════════════════════════════════
   CHAT WINDOW
   ════════════════════════════════════════ */

#satt-chatbot-window {
  position: fixed;
  bottom: 96px;
  right: 24px;
  z-index: 999998;
  width: 390px;
  max-width: calc(100vw - 32px);
  height: 545px;
  max-height: calc(100vh - 140px);
  border-radius: var(--satt-radius);
  background: var(--satt-white);
  box-shadow: var(--satt-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: bottom right;
  border: 1px solid rgba(37, 64, 143, 0.1);
}

#satt-chatbot-window.satt-chatbot-hidden {
  opacity: 0;
  transform: scale(0.88) translateY(24px);
  pointer-events: none;
}

/* ════════════════════════════════════════
   HEADER
   ════════════════════════════════════════ */

#satt-chatbot-header {
  background: linear-gradient(
    150deg,
    var(--satt-primary-xlt) 0%,
    var(--satt-primary-lt) 40%,
    var(--satt-primary) 100%
  );
  color: var(--satt-white);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* Decorative circles for depth */
#satt-chatbot-header::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}

#satt-chatbot-header::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50px;
  width: 70px;
  height: 70px;
  background: rgba(150, 201, 61, 0.07);
  border-radius: 50%;
}

/* Top green accent stripe */
.satt-header-accent {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--satt-green) 0%,
    var(--satt-green-dk) 60%,
    rgba(150, 201, 61, 0.3) 100%
  );
  width: 100%;
}

/* Header inner row */
.satt-header-main {
  padding: 13px 16px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* Avatar + text block */
.satt-chatbot-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* "SA" initials avatar */
.satt-chatbot-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--satt-white);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Text stack */
.satt-chatbot-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.satt-chatbot-header-text strong {
  display: block;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.satt-chatbot-subtitle {
  font-size: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  color: var(--satt-green);
  letter-spacing: 0.4px;
  line-height: 1.3;
  opacity: 0.95;
}

.satt-chatbot-status {
  font-size: 10.5px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}

.satt-chatbot-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--satt-green);
  display: inline-block;
  animation: satt-status-pulse 2.2s infinite;
}

@keyframes satt-status-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(150, 201, 61, 0.6);
  }
  60% {
    box-shadow: 0 0 0 4px rgba(150, 201, 61, 0);
  }
}

/* Close button */
#satt-chatbot-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--satt-white);
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#satt-chatbot-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.32);
  transform: rotate(90deg);
}

/* ════════════════════════════════════════
   MESSAGES AREA
   ════════════════════════════════════════ */

#satt-chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--satt-light);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#satt-chatbot-messages::-webkit-scrollbar {
  width: 4px;
}
#satt-chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}
#satt-chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--satt-gray-lt);
  border-radius: 4px;
}

/* ── Message Bubbles ── */
.satt-msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  font-family: "Montserrat", sans-serif;
  word-wrap: break-word;
  animation: satt-fade-in 0.3s ease;
}

@keyframes satt-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.satt-msg-bot {
  align-self: flex-start;
  background: var(--satt-white);
  color: var(--satt-text) !important;
  border: 1px solid var(--satt-gray-lt);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 5px rgba(37, 64, 143, 0.07);
}

/* Override any Elementor / theme color injected into bot message text */
#satt-chatbot-messages .satt-msg-bot,
#satt-chatbot-messages .satt-msg-bot p,
#satt-chatbot-messages .satt-msg-bot span,
#satt-chatbot-messages .satt-msg-bot strong,
#satt-chatbot-messages .satt-msg-bot em,
#satt-chatbot-messages .satt-msg-bot a {
  color: var(--satt-text) !important;
  font-family: "Montserrat", sans-serif !important;
}

.satt-msg-user {
  align-self: flex-end;
  background: linear-gradient(
    135deg,
    var(--satt-primary-xlt) 0%,
    var(--satt-primary-lt) 55%,
    var(--satt-primary) 100%
  );
  color: var(--satt-white);
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 10px rgba(37, 64, 143, 0.24);
}

/* ── Suggestion chips ── */
.satt-suggestions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 8px;
}

/* High specificity to override theme/Elementor button styles */
#satt-chatbot-window .satt-suggestion-btn {
  background: var(--satt-white) !important;
  border: 1.5px solid rgba(37, 64, 143, 0.18) !important;
  border-radius: 22px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-family: "Montserrat", sans-serif !important;
  color: var(--satt-primary) !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.22s ease !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  width: 100% !important;
  outline: none !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#satt-chatbot-window .satt-suggestion-btn:hover {
  background: var(--satt-primary) !important;
  color: var(--satt-white) !important;
  border-color: var(--satt-primary) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 10px rgba(37, 64, 143, 0.22) !important;
}

/* ── Answer card ── */
.satt-answer-card {
  background: var(--satt-white);
  border-left: 3px solid var(--satt-green);
  border-radius: 8px;
  padding: 13px 15px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--satt-text);
  box-shadow: 0 1px 6px rgba(25, 48, 94, 0.07);
  white-space: pre-line;
}

.satt-answer-category {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--satt-green-dk);
  margin-bottom: 5px;
  font-weight: 700;
}

/* ── Contact fallback ──
   Same visual language as a normal database answer.
   High-specificity rules prevent Elementor/theme styles from making
   fallback text unreadable. */
#satt-chatbot-messages .satt-msg-bot .satt-contact-card {
  background: var(--satt-white) !important;
  color: var(--satt-text) !important;
  border: 1px solid var(--satt-gray-lt) !important;
  border-left: 3px solid var(--satt-green) !important;
  border-radius: 8px !important;
  padding: 13px 15px !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  box-shadow: 0 1px 6px rgba(25, 48, 94, 0.07) !important;
}

#satt-chatbot-messages .satt-msg-bot .satt-contact-card p {
  color: var(--satt-text) !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  line-height: 1.65 !important;
}

#satt-chatbot-messages .satt-msg-bot .satt-contact-card p:last-child {
  margin-bottom: 0 !important;
}

#satt-chatbot-messages .satt-msg-bot .satt-contact-card a {
  color: var(--satt-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

#satt-chatbot-messages .satt-msg-bot .satt-contact-card a:hover,
#satt-chatbot-messages .satt-msg-bot .satt-contact-card a:focus {
  color: var(--satt-primary-dk) !important;
  text-decoration: underline !important;
}

/* ── Typing indicator ── */
.satt-typing {
  display: flex;
  gap: 5px;
  padding: 12px 16px;
  align-self: flex-start;
  background: var(--satt-white);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--satt-gray-lt);
  box-shadow: 0 1px 5px rgba(25, 48, 94, 0.07);
}

.satt-typing span {
  width: 7px;
  height: 7px;
  background: var(--satt-gray);
  border-radius: 50%;
  animation: satt-bounce 1.4s infinite;
}

.satt-typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.satt-typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes satt-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}
/* ════════════════════════════════════════
   INPUT AREA
   ════════════════════════════════════════ */

#satt-chatbot-input-area {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--satt-gray-lt);
  background: var(--satt-white);
  gap: 8px;
  flex-shrink: 0;
}

#satt-chatbot-input {
  flex: 1;
  border: 1.5px solid var(--satt-gray-lt);
  border-radius: 22px;
  padding: 10px 18px;
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  outline: none;
  background: var(--satt-light);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  color: var(--satt-text);
}

#satt-chatbot-input::placeholder {
  color: var(--satt-gray);
}

#satt-chatbot-input:focus {
  border-color: var(--satt-primary);
  background: var(--satt-white);
  box-shadow: 0 0 0 3px rgba(37, 64, 143, 0.09);
}

#satt-chatbot-send {
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  background: var(--satt-primary) !important;
  color: var(--satt-white) !important;
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(25, 48, 94, 0.3) !important;
  outline: none !important;
  text-decoration: none !important;
}

#satt-chatbot-send:hover {
  background: var(--satt-primary-dk) !important;
  transform: scale(1.08);
  box-shadow: 0 3px 16px rgba(25, 48, 94, 0.42) !important;
}

#satt-chatbot-send:active {
  transform: scale(0.95);
}

/* ── Branded footer ── */
.satt-chatbot-footer {
  padding: 5px 16px 7px;
  text-align: center;
  background: var(--satt-white);
  border-top: 1px solid rgba(221, 227, 238, 0.8);
}

.satt-chatbot-footer span {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  color: var(--satt-gray);
  letter-spacing: 0.3px;
}

.satt-chatbot-footer span strong {
  color: var(--satt-primary);
  font-weight: 600;
}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE
   ════════════════════════════════════════ */

@media (max-width: 768px) {
  #satt-chatbot-window {
    right: 10px;
    bottom: 84px;
    width: min(100vw - 20px, 420px);
    max-width: min(100vw - 20px, 420px);
    height: min(76vh, 600px);
    max-height: min(76vh, 600px);
  }

  #satt-chatbot-toggle {
    right: 14px;
    bottom: 14px;
  }

  #satt-chatbot-messages {
    padding: 14px 12px;
  }

  #satt-chatbot-input {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  #satt-chatbot-window {
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  #satt-chatbot-toggle {
    bottom: 16px;
    right: 16px;
  }

  .satt-toggle-orb {
    width: 54px;
    height: 54px;
  }

  .satt-toggle-label {
    display: none;
  }
}

/* =========================================================
   SATT BRAND REFRESH 2.6.1 — SAFE CSS-ONLY VISUAL OVERRIDES
   Keeps the proven 2.5.2 PHP/widget markup unchanged.
   ========================================================= */
#satt-chatbot-header {
  background: linear-gradient(150deg, #62b291 0%, #62b191 40%, #25a1bb 100%);
}
.satt-header-accent {
  height: 4px;
  background: linear-gradient(90deg, #0198b7 0%, #0299b8 60%, rgb(0 153 184) 100%);
}
.satt-chatbot-subtitle { color: #000 !important; }
#satt-chatbot-window .satt-suggestion-btn:hover {
  background: #0098b7 !important;
  border-color: #0198b8 !important;
}
#satt-chatbot-send { background: #0099b8 !important; }
#satt-chatbot-send:hover { background: #62b191 !important; }
#satt-chatbot-toggle.satt-chatbot-active .satt-toggle-orb {
  background: linear-gradient(145deg, #0297b8 0%, #0a9bb8 100%);
}
.satt-toggle-orb {
  background: linear-gradient(145deg, #0699b7 0%, #059ab7 45%, #3babc1 100%);
  overflow: hidden;
}
svg#satt-chatbot-icon-open { color: white; opacity: 0; }
#satt-chatbot-toggle .satt-toggle-orb::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 2;
  background: url("../img/robot-assistant.png") center / contain no-repeat;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#satt-chatbot-toggle:not(.satt-chatbot-active):hover .satt-toggle-orb::before { transform: scale(1.06); }
#satt-chatbot-toggle.satt-chatbot-active .satt-toggle-orb::before { opacity: 0; }
#satt-chatbot-icon-close { position: relative; z-index: 3; color: #fff; }
.satt-chatbot-avatar {
  font-size: 0 !important;
  color: transparent !important;
  background-color: rgba(255,255,255,0.94) !important;
  background-image: url("../img/robot-assistant.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 34px 34px !important;
  border-color: rgba(255,255,255,0.72) !important;
}

/* =========================================================
   SATT BRAND REFRESH 2.6.2 — HOVER LABEL COLOR FIX
   Replaces the legacy navy "SATT Support" tooltip with the
   approved SATT green/turquoise identity.
   ========================================================= */
#satt-chatbot-toggle .satt-toggle-label {
  background: linear-gradient(135deg, #62b291 0%, #25a1bb 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 5px 16px rgba(0, 153, 184, 0.24) !important;
}

#satt-chatbot-toggle .satt-toggle-label::after {
  border-left-color: #25a1bb !important;
}

#satt-chatbot-toggle:hover .satt-toggle-orb {
  box-shadow:
    0 6px 24px rgba(0, 153, 184, 0.34),
    0 0 0 7px rgba(98, 177, 145, 0.16) !important;
}

/* =========================================================
   SATT BRAND REFRESH 2.6.3 — USER MESSAGE BUBBLE
   Replaces the legacy navy user-question bubble with the
   approved SATT green/turquoise visual identity.
   ========================================================= */
#satt-chatbot-messages .satt-msg.satt-msg-user {
  background: linear-gradient(135deg, #62b291 0%, #4eb39f 52%, #25a1bb 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 4px 14px rgba(37, 161, 187, 0.20) !important;
}

#satt-chatbot-messages .satt-msg.satt-msg-user,
#satt-chatbot-messages .satt-msg.satt-msg-user p,
#satt-chatbot-messages .satt-msg.satt-msg-user span,
#satt-chatbot-messages .satt-msg.satt-msg-user strong,
#satt-chatbot-messages .satt-msg.satt-msg-user em {
  color: #ffffff !important;
}

/* =========================================================
   SATT 2.6.4 — LEROUX / QODE BACK-TO-TOP COMPATIBILITY
   The Leroux theme uses #qodef-back-to-top in the lower-right
   corner. On desktop, reserve that slot and stack the chatbot
   directly above it instead of covering it.
   ========================================================= */
@media (min-width: 769px) {
  body.qodef-back-to-top--enabled #satt-chatbot-toggle {
    bottom: 88px !important;
  }

  body.qodef-back-to-top--enabled #satt-chatbot-window {
    bottom: 160px !important;
    max-height: calc(100vh - 190px) !important;
  }
}

/* =========================================================
   SATT 4.2.0 — PROFESSIONAL RESPONSE PRESENTATION LAYER
   Pure presentation upgrade: no facts are rewritten and the
   deterministic retrieval/NLP engine remains unchanged.
   ========================================================= */
#satt-chatbot-messages .satt-msg-bot.satt-msg-answer-wrap {
  width: 92%;
  max-width: 92%;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#satt-chatbot-messages .satt-answer-card-pro {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(37, 161, 187, 0.16) !important;
  border-left: 0 !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgba(28, 73, 92, 0.08) !important;
  white-space: normal !important;
}

#satt-chatbot-messages .satt-answer-head {
  min-height: 38px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg, rgba(98, 178, 145, 0.10), rgba(37, 161, 187, 0.08));
  border-bottom: 1px solid rgba(37, 161, 187, 0.10);
}

#satt-chatbot-messages .satt-answer-head-left {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

#satt-chatbot-messages .satt-answer-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #62b291;
  box-shadow: 0 0 0 3px rgba(98, 178, 145, 0.12);
}

#satt-chatbot-messages .satt-answer-topic {
  color: #18495a !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.15px !important;
}

#satt-chatbot-messages .satt-answer-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(37, 161, 187, 0.09);
  color: #078ca8 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.55px !important;
}

#satt-chatbot-messages .satt-answer-content {
  padding: 12px 13px 10px;
}

#satt-chatbot-messages .satt-answer-paragraph {
  margin: 0 0 9px !important;
  padding: 0 !important;
  color: #283746 !important;
  font-size: 12.7px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

#satt-chatbot-messages .satt-answer-content > .satt-answer-paragraph:last-child,
#satt-chatbot-messages .satt-answer-section-body > .satt-answer-paragraph:last-child {
  margin-bottom: 0 !important;
}

#satt-chatbot-messages .satt-answer-steps {
  list-style: none !important;
  margin: 10px 0 8px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 7px;
  counter-reset: none;
}

#satt-chatbot-messages .satt-answer-steps li {
  margin: 0 !important;
  padding: 8px 9px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  background: #f7fbfb !important;
  border: 1px solid rgba(98, 178, 145, 0.16) !important;
  border-radius: 9px !important;
}

#satt-chatbot-messages .satt-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #62b291, #25a1bb);
  color: #ffffff !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 7px rgba(37, 161, 187, 0.16);
}

#satt-chatbot-messages .satt-step-text {
  color: #283746 !important;
  font-size: 12.3px !important;
  line-height: 1.55 !important;
  padding-top: 2px;
}

#satt-chatbot-messages .satt-answer-note {
  margin: 10px 0 1px;
  padding: 9px 10px;
  border-radius: 8px;
  border-left: 3px solid #62b291;
  background: rgba(98, 178, 145, 0.07);
  color: #334b52 !important;
  font-size: 12.2px !important;
  line-height: 1.55 !important;
}

#satt-chatbot-messages .satt-answer-list {
  margin: 8px 0 2px !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#satt-chatbot-messages .satt-answer-list li {
  position: relative;
  margin: 0 !important;
  padding: 7px 9px 7px 22px !important;
  border-radius: 8px;
  background: #f8fafc;
  color: #283746 !important;
  font-size: 12.2px !important;
  line-height: 1.5 !important;
}

#satt-chatbot-messages .satt-answer-list li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #25a1bb;
}

#satt-chatbot-messages .satt-answer-section {
  margin: 9px 0 !important;
  padding: 10px 10px 9px !important;
  border: 1px solid rgba(37, 161, 187, 0.12) !important;
  border-radius: 9px !important;
  background: #fbfdfd !important;
}

#satt-chatbot-messages .satt-answer-section-title {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #078ca8 !important;
  font-size: 11.2px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: 0.05px !important;
  text-transform: none !important;
}

#satt-chatbot-messages .satt-answer-source {
  padding: 7px 12px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-top: 1px solid rgba(221, 227, 238, 0.7);
  background: #fcfdfd;
  color: #7c8792 !important;
  font-size: 9.4px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0.15px !important;
}

#satt-chatbot-messages .satt-answer-source span {
  color: #62b291 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

#satt-chatbot-messages .satt-answer-link {
  color: #078ca8 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#satt-chatbot-messages .satt-answer-link:hover,
#satt-chatbot-messages .satt-answer-link:focus {
  text-decoration: underline !important;
}

#satt-chatbot-messages .satt-msg-bot.satt-msg-conversation-wrap {
  max-width: 88%;
}

#satt-chatbot-messages .satt-conversation-answer .satt-answer-paragraph {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

@media (max-width: 480px) {
  #satt-chatbot-messages .satt-msg-bot.satt-msg-answer-wrap {
    width: 96%;
    max-width: 96%;
  }

  #satt-chatbot-messages .satt-answer-content {
    padding: 11px 11px 9px;
  }
}

/* v4.2.0 theme-specificity guards (Elementor/Leroux safe) */
#satt-chatbot-messages .satt-msg-bot .satt-answer-topic {
  color: #18495a !important;
}
#satt-chatbot-messages .satt-msg-bot .satt-answer-badge {
  color: #078ca8 !important;
}
#satt-chatbot-messages .satt-msg-bot .satt-step-number {
  color: #ffffff !important;
}
#satt-chatbot-messages .satt-msg-bot .satt-step-text,
#satt-chatbot-messages .satt-msg-bot .satt-answer-note,
#satt-chatbot-messages .satt-msg-bot .satt-answer-list li,
#satt-chatbot-messages .satt-msg-bot .satt-answer-paragraph {
  color: #283746 !important;
}
#satt-chatbot-messages .satt-msg-bot .satt-answer-section-title {
  color: #078ca8 !important;
}
#satt-chatbot-messages .satt-msg-bot .satt-answer-source {
  color: #7c8792 !important;
}
#satt-chatbot-messages .satt-msg-bot .satt-answer-source span {
  color: #62b291 !important;
}
#satt-chatbot-messages .satt-msg-bot a.satt-answer-link {
  color: #078ca8 !important;
}


/* =========================================================
   SATT 4.3.0 — CLEAN RESPONSE HIERARCHY
   Removes decorative answer header/footer while preserving
   structured reading hierarchy inside the response body.
   ========================================================= */
#satt-chatbot-messages .satt-answer-card-pro.satt-answer-card-clean {
  border: 1px solid rgba(37, 161, 187, 0.14) !important;
  border-left: 3px solid #62b291 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 18px rgba(28, 73, 92, 0.07) !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-content {
  padding: 13px 14px 13px !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-paragraph {
  margin: 0 0 10px !important;
  color: #283746 !important;
  font-size: 12.8px !important;
  line-height: 1.68 !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-paragraph:last-child {
  margin-bottom: 0 !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-section {
  margin: 10px 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(37, 161, 187, 0.11) !important;
  border-radius: 9px !important;
  background: #fbfdfd !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-section:first-child {
  margin-top: 0 !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-section:last-child {
  margin-bottom: 0 !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-section-title {
  margin: 0 0 7px !important;
  color: #087f96 !important;
  font-size: 11.6px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-steps {
  margin: 10px 0 2px !important;
  gap: 7px !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-steps li {
  padding: 8px 9px !important;
  background: #f8fbfb !important;
  border-color: rgba(98, 178, 145, 0.15) !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-list li {
  background: #f8fafb !important;
}

#satt-chatbot-messages .satt-answer-card-clean .satt-answer-note {
  margin-top: 10px !important;
  background: rgba(98, 178, 145, 0.065) !important;
}

/* Defensive: old header/source elements must never appear if cached markup is mixed. */
#satt-chatbot-messages .satt-answer-card-clean > .satt-answer-head,
#satt-chatbot-messages .satt-answer-card-clean > .satt-answer-source {
  display: none !important;
}


/* =========================================================
   SATT 4.3.2 — TANGER TECH ASSISTANT IDENTITY + ENGAGEMENT
   Scope: visible chatbot identity, modern click-attract animation,
   and accessibility-safe motion. No answer/retrieval styling changed.
   ========================================================= */
#satt-chatbot-toggle {
  isolation: isolate;
}

#satt-chatbot-toggle .satt-toggle-label {
  z-index: 2;
  right: 72px;
  min-width: 178px;
  padding: 9px 13px 9px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  opacity: 1;
  transform: translateX(0);
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    0 10px 28px rgba(15, 117, 139, 0.20),
    0 2px 8px rgba(37, 161, 187, 0.14) !important;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    opacity 0.2s ease;
}

#satt-chatbot-toggle .satt-toggle-label-title {
  display: block;
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1px;
}

#satt-chatbot-toggle .satt-toggle-label-subtitle {
  display: block;
  color: rgba(255, 255, 255, 0.86) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.15px;
}

#satt-chatbot-toggle:not(.satt-chatbot-active):hover .satt-toggle-label,
#satt-chatbot-toggle:not(.satt-chatbot-active):focus-visible .satt-toggle-label {
  transform: translateX(-3px) translateY(-1px);
  box-shadow:
    0 14px 34px rgba(15, 117, 139, 0.26),
    0 3px 10px rgba(37, 161, 187, 0.18) !important;
}

/* Slow orbital ring conveys an active digital assistant without looking playful. */
#satt-chatbot-toggle .satt-toggle-orb {
  z-index: 1;
  overflow: hidden;
}

#satt-chatbot-toggle .satt-toggle-orb::before {
  inset: 7px;
}

#satt-chatbot-toggle .satt-toggle-orb::after {
  z-index: 5;
}

#satt-chatbot-toggle:not(.satt-chatbot-active) .satt-toggle-orb {
  animation:
    satt-digital-pulse 3.4s ease-in-out infinite,
    satt-professional-pivot 7.2s ease-in-out infinite;
  transform-origin: 50% 58%;
}

@keyframes satt-digital-pulse {
  0%, 100% {
    box-shadow:
      0 5px 22px rgba(0, 153, 184, 0.34),
      0 0 0 0 rgba(98, 178, 145, 0.23);
  }
  50% {
    box-shadow:
      0 7px 26px rgba(0, 153, 184, 0.38),
      0 0 0 10px rgba(98, 178, 145, 0);
  }
}

/* Most of the cycle stays still; the short pivot is the attention cue. */
@keyframes satt-professional-pivot {
  0%, 68%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  72% { transform: translateY(-1px) rotate(-5deg) scale(1.025); }
  76% { transform: translateY(-2px) rotate(5deg) scale(1.035); }
  80% { transform: translateY(-1px) rotate(-2.5deg) scale(1.02); }
  84% { transform: translateY(0) rotate(1.5deg) scale(1.01); }
  88% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Add a discreet rotating signal ring around the assistant launcher. */
#satt-chatbot-toggle .satt-toggle-signal {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(37, 161, 187, 0.24);
  border-top-color: rgba(98, 178, 145, 0.86);
  border-right-color: rgba(37, 161, 187, 0.55);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  animation: satt-digital-orbit 8s linear infinite;
  transition: opacity 0.2s ease;
}

#satt-chatbot-toggle.satt-chatbot-active .satt-toggle-signal {
  opacity: 0;
}

@keyframes satt-digital-orbit {
  to { transform: rotate(360deg); }
}

#satt-chatbot-toggle.satt-chatbot-active .satt-toggle-label {
  opacity: 0;
  transform: translateX(8px) scale(0.96);
}

#satt-chatbot-toggle:focus-visible {
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(37, 161, 187, 0.22);
}

@media (max-width: 480px) {
  #satt-chatbot-toggle .satt-toggle-label {
    display: flex;
    right: 62px;
    min-width: 152px;
    padding: 8px 10px 8px 11px;
    border-radius: 11px;
  }

  #satt-chatbot-toggle .satt-toggle-label-title {
    font-size: 11.5px;
  }

  #satt-chatbot-toggle .satt-toggle-label-subtitle {
    font-size: 8.8px;
  }

  #satt-chatbot-toggle .satt-toggle-signal {
    right: -5px;
    width: 62px;
    height: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #satt-chatbot-toggle:not(.satt-chatbot-active) .satt-toggle-orb,
  #satt-chatbot-toggle .satt-toggle-signal,
  .satt-chatbot-status::before {
    animation: none !important;
  }

  #satt-chatbot-toggle .satt-toggle-label,
  #satt-chatbot-toggle .satt-toggle-orb {
    transition-duration: 0.01ms !important;
  }
}