/* ai-chat-orb.css — orbe animado de "Empiria" portado de Empire-CMS
   (assistance-web-redesign.css + assistance-web-voice.css), reducido a lo
   que necesita el modal del chatbot (sin el hero de página completa ni el
   guion de entrevista de marca). Las reglas de ambos ficheros se concatenan
   en su mismo orden de carga original (redesign primero, voice después) para
   reproducir el mismo resultado en cascada que ya se ve en /assistance-web.
   Variables :root renombradas con el prefijo --aic- para no chocar con las
   variables globales que ya define web.tmpl.htm. */

:root {
  --aic-aw-navy: #00194b;
  --aic-aw-navy-deep: #020d2a;
  --aic-aw-navy-soft: #08255f;
  --aic-aw-blue: #4f8cff;
  --aic-aw-blue-bright: #38bdf8;
  --aic-aw-violet: #7c5cff;
  --aic-aw-ink: #101828;
  --aic-aw-muted: #667085;
  --aic-aw-line: #e6e9f0;
  --aic-aw-bg: #f5f7fb;
  --aic-aw-white: #ffffff;
  --aic-aw-success: #12b76a;
  --aic-aw-danger: #f04438;
  --aic-aw-shadow: 0 34px 80px -34px rgba(16, 24, 40, 0.42);

  --aic-awv-navy: #061b44;
  --aic-awv-navy-deep: #03122f;
  --aic-awv-blue: #2563eb;
  --aic-awv-blue-light: #63a5ff;
  --aic-awv-violet: #7657ed;
  --aic-awv-cyan: #74d9ff;
  --aic-awv-ink: #0d2145;
  --aic-awv-muted: #6f7d96;
  --aic-awv-line: rgba(112, 132, 169, 0.18);
  --aic-awv-paper: #fbfaf8;
  --aic-awv-white: #fff;
  --aic-awv-success: #16a46a;
  --aic-awv-shadow: 0 34px 100px -38px rgba(9, 31, 76, 0.42);
}

/* Red de seguridad: el humo/orbit del orbe usan un poco de "sangrado" fuera
   de su caja a propósito (ver .aw-orb-smoke-canvas), pensado para una página
   completa. Dentro del modal (más estrecho, .modal-dialog-right) ese
   sangrado debe quedar recortado aquí, no forzar scroll horizontal en toda
   la página. */
.ai-chat-orb {
  overflow-x: hidden;
  box-sizing: border-box;
  /* Fijo a propósito: Empiria es una herramienta del panel de admin, no
     parte del sitio del cliente — no debe cambiar de tipografía según el
     primary_font que cada proyecto elija para SU web (antes heredaba
     var(--primary_font), portado sin querer de assistance-web al copiar su
     CSS). Misma fuente que el resto de cajones .usr-drawer (imageadmin.css). */
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.ai-chat-orb input,
.ai-chat-orb button,
.ai-chat-orb textarea {
  font-family: inherit;
}
.ai-chat-orb * {
  box-sizing: border-box;
}

/* =========================================================
   1) assistance-web-redesign.css (carga primero)
   ========================================================= */

.ai-chat-orb .aw-orb-zone {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}

.ai-chat-orb .aw-orb-scene {
  position: relative;
  width: clamp(210px, 21vw, 292px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.ai-chat-orb .aw-orbit,
.ai-chat-orb .aw-orbit::before,
.ai-chat-orb .aw-orbit::after {
  position: absolute;
  border-radius: 50%;
}

.ai-chat-orb .aw-orbit {
  inset: 7%;
  border: 1px solid rgba(115, 179, 255, 0.2);
  animation: aw-spin 18s linear infinite;
}

.ai-chat-orb .aw-orbit--two {
  inset: 15%;
  border-style: dashed;
  border-color: rgba(117, 211, 255, 0.22);
  animation-duration: 13s;
  animation-direction: reverse;
}

.ai-chat-orb .aw-orbit::before,
.ai-chat-orb .aw-orbit::after {
  content: "";
  width: 7px;
  height: 7px;
  background: #bcecff;
  box-shadow: 0 0 14px #4fbcff;
}

.ai-chat-orb .aw-orbit::before {
  left: 9%;
  top: 20%;
}

.ai-chat-orb .aw-orbit::after {
  right: 6%;
  bottom: 28%;
}

@keyframes aw-spin {
  to { transform: rotate(360deg); }
}

.ai-chat-orb .aw-halo {
  position: absolute;
  inset: 19%;
  border-radius: 50%;
  opacity: 0.82;
  background: radial-gradient(circle, rgba(52, 153, 255, 0.34), rgba(41, 109, 255, 0.12) 44%, transparent 70%);
  filter: blur(4px);
  animation: aw-halo-breathe 3.6s ease-in-out infinite;
}

@keyframes aw-halo-breathe {
  50% { opacity: 1; transform: scale(1.14); }
}

.ai-chat-orb .aw-smoke {
  position: absolute;
  inset: 1%;
  overflow: visible;
  pointer-events: none;
  border-radius: 50%;
  transform-origin: center;
}

.ai-chat-orb .aw-smoke::before,
.ai-chat-orb .aw-smoke::after {
  content: "";
  position: absolute;
  inset: 23%;
  border-radius: 48% 52% 61% 39% / 43% 39% 61% 57%;
  opacity: 0;
  border: 18px solid rgba(103, 196, 255, 0.2);
  filter: blur(15px);
  transform: scale(0.65) rotate(0deg);
  pointer-events: none;
}

.ai-chat-orb .aw-smoke::after {
  inset: 18%;
  border-width: 12px;
  border-color: rgba(133, 112, 255, 0.18);
  animation-delay: -1.05s !important;
}

.ai-chat-orb .aw-smoke span {
  --aw-smoke-x: 0px;
  --aw-smoke-y: -80px;
  position: absolute;
  left: calc(50% - 23px);
  top: calc(50% - 23px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  opacity: 0.08;
  transform: translate(0, 0) scale(0.4);
  background: radial-gradient(circle at 32% 30%, rgba(190, 236, 255, 0.8), rgba(79, 140, 255, 0.26) 52%, transparent 72%);
  filter: blur(7px);
  animation: aw-smoke-idle 7s ease-in-out infinite;
}

.ai-chat-orb .aw-smoke span:nth-child(1) { --aw-smoke-x: -91px; --aw-smoke-y: -66px; animation-delay: -0.4s; }
.ai-chat-orb .aw-smoke span:nth-child(2) { --aw-smoke-x: -30px; --aw-smoke-y: -118px; animation-delay: -1.1s; }
.ai-chat-orb .aw-smoke span:nth-child(3) { --aw-smoke-x: 56px; --aw-smoke-y: -101px; animation-delay: -2.2s; }
.ai-chat-orb .aw-smoke span:nth-child(4) { --aw-smoke-x: 108px; --aw-smoke-y: -27px; animation-delay: -3.1s; }
.ai-chat-orb .aw-smoke span:nth-child(5) { --aw-smoke-x: 85px; --aw-smoke-y: 68px; animation-delay: -4.1s; }
.ai-chat-orb .aw-smoke span:nth-child(6) { --aw-smoke-x: 12px; --aw-smoke-y: 116px; animation-delay: -5.2s; }
.ai-chat-orb .aw-smoke span:nth-child(7) { --aw-smoke-x: -73px; --aw-smoke-y: 92px; animation-delay: -6.1s; }
.ai-chat-orb .aw-smoke span:nth-child(8) { --aw-smoke-x: -116px; --aw-smoke-y: 13px; animation-delay: -2.8s; }
.ai-chat-orb .aw-smoke span:nth-child(9) { --aw-smoke-x: 3px; --aw-smoke-y: -135px; animation-delay: -4.8s; }
.ai-chat-orb .aw-smoke span:nth-child(10) { --aw-smoke-x: 126px; --aw-smoke-y: 44px; animation-delay: -0.9s; }

@keyframes aw-smoke-idle {
  0%, 100% { opacity: 0.04; transform: translate(0, 0) scale(0.35); }
  50% { opacity: 0.12; transform: translate(calc(var(--aw-smoke-x) * 0.42), calc(var(--aw-smoke-y) * 0.42)) scale(0.9); }
}

.ai-chat-orb .aw-orb-zone.is-speaking .aw-smoke span {
  animation-name: aw-smoke-speaking;
  animation-duration: 2.8s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ai-chat-orb .aw-orb-zone.is-speaking .aw-smoke {
  background:
    conic-gradient(
      from 30deg,
      transparent 0 9%,
      rgba(86, 187, 255, 0.4) 15%,
      transparent 25% 39%,
      rgba(137, 105, 255, 0.34) 48%,
      transparent 59% 76%,
      rgba(83, 211, 255, 0.3) 84%,
      transparent 94%
    );
  filter: blur(18px);
  mask-image: radial-gradient(circle, transparent 24%, #000 38%, rgba(0, 0, 0, 0.88) 55%, transparent 74%);
  animation: aw-smoke-cloud 3.1s ease-in-out infinite;
}

@keyframes aw-smoke-cloud {
  0%, 100% { opacity: 0.46; transform: rotate(0deg) scale(0.9); }
  50% { opacity: 0.9; transform: rotate(105deg) scale(1.14); }
}

.ai-chat-orb .aw-orb-zone.is-speaking .aw-smoke::before,
.ai-chat-orb .aw-orb-zone.is-speaking .aw-smoke::after {
  animation: aw-smoke-ring 2.2s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}

@keyframes aw-smoke-ring {
  0% { opacity: 0; transform: scale(0.58) rotate(0deg); }
  28% { opacity: 0.72; }
  100% { opacity: 0; transform: scale(1.42) rotate(105deg); }
}

@keyframes aw-smoke-speaking {
  0% { opacity: 0; transform: translate(0, 0) scale(0.38) rotate(0deg); }
  28% { opacity: 0.62; }
  100% { opacity: 0; transform: translate(var(--aw-smoke-x), var(--aw-smoke-y)) scale(1.55) rotate(38deg); }
}

.ai-chat-orb .aw-orb {
  position: relative;
  z-index: 5;
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(172, 222, 255, 0.42);
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(159, 222, 255, 0.92), rgba(52, 145, 255, 0.8) 24%, rgba(18, 75, 190, 0.96) 58%, #05194b 100%);
  box-shadow:
    inset -12px -16px 28px rgba(1, 12, 47, 0.58),
    inset 8px 8px 22px rgba(205, 241, 255, 0.2),
    0 0 0 10px rgba(79, 140, 255, 0.08),
    0 0 48px rgba(50, 153, 255, 0.58);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.ai-chat-orb .aw-orb:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
}

.ai-chat-orb .aw-orb:disabled {
  cursor: default;
}

.ai-chat-orb .aw-orb::before,
.ai-chat-orb .aw-orb::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.ai-chat-orb .aw-orb::before {
  inset: 8px;
  border: 1px solid rgba(224, 246, 255, 0.22);
}

.ai-chat-orb .aw-orb::after {
  width: 34px;
  height: 17px;
  left: 24px;
  top: 17px;
  opacity: 0.65;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.65), transparent 70%);
  filter: blur(4px);
  transform: rotate(-28deg);
}

.ai-chat-orb .aw-voice-bars span {
  width: 3px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.62);
  transition: height 0.2s ease;
}

.ai-chat-orb .aw-orb.speaking {
  animation: aw-orb-speaking 1.5s ease-in-out infinite;
}

@keyframes aw-orb-speaking {
  50% {
    transform: scale(1.045);
    box-shadow:
      inset -12px -16px 28px rgba(1, 12, 47, 0.58),
      inset 8px 8px 22px rgba(205, 241, 255, 0.28),
      0 0 0 16px rgba(79, 140, 255, 0.08),
      0 0 76px rgba(50, 153, 255, 0.86);
  }
}

@keyframes aw-bar-talk {
  from { height: 6px; }
  to { height: 25px; }
}

.ai-chat-orb .aw-orb.listening {
  animation: aw-listening 1.2s ease-in-out infinite;
  box-shadow:
    inset -12px -16px 28px rgba(1, 12, 47, 0.58),
    inset 8px 8px 22px rgba(205, 241, 255, 0.22),
    0 0 0 12px rgba(56, 189, 248, 0.12),
    0 0 0 25px rgba(56, 189, 248, 0.06),
    0 0 58px rgba(56, 189, 248, 0.75);
}

@keyframes aw-listening {
  50% { transform: scale(0.96); }
}

.ai-chat-orb .aw-status {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(173, 216, 255, 0.18);
  border-radius: 999px;
  color: #e7f3ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(2, 13, 42, 0.48);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ai-chat-orb .aw-status.is-hidden {
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
}

.ai-chat-orb .aw-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5fceff;
  box-shadow: 0 0 10px #5fceff;
  animation: aw-status-pulse 1.15s ease-in-out infinite;
}

@keyframes aw-status-pulse {
  50% { opacity: 0.38; }
}

.ai-chat-orb .typing-cursor,
.ai-chat-orb .message-cursor {
  display: inline-block;
  width: 2px;
  height: 0.92em;
  margin-left: 4px;
  vertical-align: -0.08em;
  background: #6ed5ff;
  box-shadow: 0 0 10px rgba(110, 213, 255, 0.85);
  animation: aw-cursor 0.8s steps(1) infinite;
}

@keyframes aw-cursor {
  50% { opacity: 0; }
}

.ai-chat-orb .aw-message {
  position: relative;
  min-height: 108px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(157, 202, 255, 0.16);
  border-radius: 18px;
  color: rgba(239, 246, 255, 0.82);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.72;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
}

.ai-chat-orb .aw-message::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(var(--aic-aw-blue-bright), var(--aic-aw-violet));
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}

.ai-chat-orb .aw-compose {
  padding: 0 22px 20px;
}

.ai-chat-orb .aw-transcript {
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 13px 12px 16px;
  border: 1px solid var(--aic-aw-line);
  border-radius: 16px;
  background: #f9fbfe;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ai-chat-orb .aw-transcript:focus-within {
  border-color: rgba(79, 140, 255, 0.58);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.1);
}

.ai-chat-orb .aw-transcript__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--aic-aw-blue);
  background: #edf3ff;
  font-size: 16px;
}

.ai-chat-orb .aw-transcript__copy {
  min-width: 0;
}

.ai-chat-orb .aw-transcript__label {
  margin: 0 0 4px;
  color: var(--aic-aw-navy);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-chat-orb .aw-transcript__text {
  min-width: 0;
  overflow: hidden;
  color: var(--aic-aw-ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-orb .aw-transcript__text.placeholder {
  color: #98a2b3;
  font-weight: 500;
}

.ai-chat-orb .aw-mic {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(145deg, var(--aic-aw-blue), #3876dc);
  box-shadow: 0 10px 20px -10px rgba(79, 140, 255, 0.8);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-chat-orb .aw-mic:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -10px rgba(79, 140, 255, 0.9);
}

.ai-chat-orb .aw-mic.active {
  background: linear-gradient(145deg, #0ba5ec, #7c5cff);
  animation: aw-mic-pulse 1.15s ease-in-out infinite;
}

@keyframes aw-mic-pulse {
  50% { box-shadow: 0 0 0 8px rgba(79, 140, 255, 0.12); }
}

.ai-chat-orb .aw-mic:disabled,
.ai-chat-orb .aw-send:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.ai-chat-orb .aw-text-panel {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.ai-chat-orb .aw-input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--aic-aw-line);
  border-radius: 13px;
  outline: 0;
  color: var(--aic-aw-ink);
  font-size: 13px;
  background: #fbfcfe;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ai-chat-orb .aw-input::placeholder {
  color: #98a2b3;
}

.ai-chat-orb .aw-input:focus {
  border-color: var(--aic-aw-blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.13);
}

.ai-chat-orb .aw-send {
  width: 54px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--aic-aw-blue), var(--aic-aw-violet));
  box-shadow: 0 13px 25px -13px rgba(79, 140, 255, 0.85);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-chat-orb .aw-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px rgba(79, 140, 255, 0.95);
}

.ai-chat-orb .aw-helper {
  margin: 9px 2px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #98a2b3;
  font-size: 10px;
  font-weight: 600;
}

.ai-chat-orb .aw-helper__controls {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ai-chat-orb .aw-helper__disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ai-chat-orb .aw-helper__disclosure::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #98a2b3;
  content: "";
}

.ai-chat-orb .aw-helper kbd {
  padding: 2px 6px;
  border: 1px solid #dce2ed;
  border-bottom-width: 2px;
  border-radius: 5px;
  color: #667085;
  font: inherit;
  background: #fff;
}

/* =========================================================
   2) assistance-web-voice.css (carga después: gana los empates
      de especificidad frente al bloque anterior, igual que en
      la página real — ver <link> en assistance_web.tmpl.htm)
   ========================================================= */

.ai-chat-orb .aw-orb-zone {
  --cloud-hot: 224 241 255;
  --cloud-main: 85 145 255;
  --cloud-accent: 118 86 242;
  position: relative;
  z-index: 6;
  grid-row: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  min-height: 292px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-chat-orb .aw-orb-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 560px;
  height: 260px;
  display: grid;
  place-items: center;
  contain: layout style;
  overflow: visible;
  perspective: 900px;
}

.ai-chat-orb .aw-orb-smoke-canvas {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  /* El canvas pertenece visualmente al drawer completo, no solo al círculo
     de .aw-orb-scene. Así el campo de ondas llega a ambos laterales de la
     modal aunque el orbe se reduzca para adaptarse a la altura disponible. */
  width: min(100vw, 550px);
  height: clamp(270px, 29vw, 370px);
  pointer-events: none;
  opacity: 0.46;
  mix-blend-mode: multiply;
  filter: blur(0.7px) saturate(1.28) contrast(1.06);
  -webkit-mask-image: radial-gradient(ellipse 100% 68% at center, #000 0 44%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 68% at center, #000 0 44%, transparent 100%);
  transform: translate(-50%, -50%) translateZ(0);
  transition: opacity 0.55s ease, filter 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.ai-chat-orb .aw-orbit {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: 292px;
  height: 292px;
  border: 1px solid rgba(68, 128, 242, 0.22);
  border-radius: 50%;
  opacity: 0.58;
  background: repeating-conic-gradient(from 30deg, rgba(74, 131, 241, 0.42) 0 0.48deg, transparent 0.48deg 3.4deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px), #000 calc(100% - 1px), transparent 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px), #000 calc(100% - 1px), transparent 100%);
  translate: -50% -50%;
  animation: awv-orbit 28s linear infinite;
}

.ai-chat-orb .aw-orbit::before,
.ai-chat-orb .aw-orbit::after {
  position: absolute;
  border: 1px solid rgba(98, 145, 235, 0.16);
  border-radius: inherit;
  content: "";
}

.ai-chat-orb .aw-orbit::before { inset: 18px; }

.ai-chat-orb .aw-orbit::after {
  inset: -16px;
  border-style: dotted;
  border-color: rgba(111, 92, 235, 0.14);
}

.ai-chat-orb .aw-orbit--two {
  width: 346px;
  height: 346px;
  border-color: rgba(117, 87, 237, 0.1);
  opacity: 0.28;
  background: repeating-conic-gradient(from 8deg, rgba(115, 92, 234, 0.32) 0 0.32deg, transparent 0.32deg 5deg);
  animation-direction: reverse;
  animation-duration: 48s;
}

.ai-chat-orb .aw-orbit--two::before {
  inset: 33px;
  border-color: rgba(72, 139, 242, 0.13);
}

.ai-chat-orb .aw-orbit--two::after {
  inset: -12px;
  border-color: rgba(89, 143, 241, 0.1);
}

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

.ai-chat-orb .aw-halo {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  width: 296px;
  height: 296px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121, 218, 255, 0.28) 0 24%, rgba(76, 136, 248, 0.24) 38%, rgba(119, 84, 238, 0.11) 55%, transparent 73%);
  filter: blur(18px);
  translate: -50% -50%;
  animation: awv-halo 4.2s ease-in-out infinite;
}

@keyframes awv-halo {
  50% { opacity: 0.72; transform: scale(1.09); }
}

.ai-chat-orb .aw-orb-shell {
  position: relative;
  z-index: 6;
  display: grid;
  place-items: center;
  perspective: 700px;
  animation: awv-orb-float 5.2s ease-in-out infinite;
}

.ai-chat-orb .aw-orb-equator {
  position: absolute;
  z-index: 0;
  width: 286px;
  height: 88px;
  border: 1px solid rgba(94, 189, 255, 0.36);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(81, 159, 255, 0.2), inset 0 0 12px rgba(119, 92, 236, 0.08);
  transform: rotate(-10deg);
  animation: awv-equator 9s linear infinite;
}

.ai-chat-orb .aw-orb-equator::after {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 48%;
  right: -2px;
  border-radius: 50%;
  background: #d9f8ff;
  box-shadow: 0 0 11px 3px rgba(87, 178, 255, 0.72);
  content: "";
}

@keyframes awv-orb-float {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-7px); }
}

@keyframes awv-equator {
  0% { transform: rotate(-10deg) rotateY(0deg); }
  100% { transform: rotate(-10deg) rotateY(360deg); }
}

.ai-chat-orb .aw-particles {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.ai-chat-orb .aw-particles span {
  --particle-x: 50%;
  --particle-y: 50%;
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 9px 2px rgba(86, 145, 255, 0.58);
  opacity: 0.36;
  animation: awv-particle 4.8s ease-in-out infinite;
}

.ai-chat-orb .aw-particles span:nth-child(1) { --particle-x: 30%; --particle-y: 27%; animation-delay: -0.4s; }
.ai-chat-orb .aw-particles span:nth-child(2) { --particle-x: 38%; --particle-y: 72%; animation-delay: -1.8s; }
.ai-chat-orb .aw-particles span:nth-child(3) { --particle-x: 45%; --particle-y: 12%; animation-delay: -2.7s; }
.ai-chat-orb .aw-particles span:nth-child(4) { --particle-x: 61%; --particle-y: 18%; animation-delay: -3.4s; }
.ai-chat-orb .aw-particles span:nth-child(5) { --particle-x: 70%; --particle-y: 38%; animation-delay: -0.9s; }
.ai-chat-orb .aw-particles span:nth-child(6) { --particle-x: 65%; --particle-y: 78%; animation-delay: -2.1s; }
.ai-chat-orb .aw-particles span:nth-child(7) { --particle-x: 24%; --particle-y: 57%; animation-delay: -3.8s; }
.ai-chat-orb .aw-particles span:nth-child(8) { --particle-x: 77%; --particle-y: 63%; animation-delay: -1.4s; }

@keyframes awv-particle {
  0%, 100% { opacity: 0.12; transform: translateY(4px) scale(0.7); }
  50% { opacity: 0.68; transform: translateY(-5px) scale(1.2); }
}

.ai-chat-orb .aw-smoke {
  position: absolute;
  z-index: 3;
  inset: 50% auto auto 50%;
  width: 440px;
  height: 245px;
  overflow: visible;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.4;
  background: none;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  translate: -50% -50%;
  transform: none;
  transform-origin: center;
  animation: none;
  transition: opacity 0.45s ease;
}

.ai-chat-orb .aw-smoke::before,
.ai-chat-orb .aw-smoke::after {
  display: none;
  content: none;
}

.ai-chat-orb .aw-smoke--rear {
  z-index: 4;
  width: 620px;
  height: 270px;
  opacity: 0.34;
}

.ai-chat-orb .aw-smoke--front {
  z-index: 7;
  top: 63%;
  width: 360px;
  height: 150px;
  opacity: 0.15;
}

.ai-chat-orb .aw-smoke span {
  --x: 50%;
  --y: 50%;
  --size: 110px;
  --dx: 0px;
  --dy: -18px;
  --rotation: 0deg;
  --delay: 0s;
  --duration: 3s;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: auto;
  aspect-ratio: 1.2;
  border-radius: 48% 52% 61% 39% / 42% 38% 62% 58%;
  opacity: 0.18;
  background:
    radial-gradient(circle at 31% 27%, rgb(var(--cloud-hot) / 0.88) 0 5%, rgb(var(--cloud-main) / 0.44) 29%, transparent 68%),
    radial-gradient(circle at 68% 72%, rgb(var(--cloud-accent) / 0.36), transparent 69%);
  filter: blur(10px);
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(var(--rotation)) scale(0.82);
  animation: awv-orb-smoke-idle 7s ease-in-out infinite var(--delay);
}

.ai-chat-orb .aw-orb-zone.is-speaking .aw-smoke {
  background: none;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
  animation: none;
}

.ai-chat-orb .aw-smoke--rear span:nth-child(1) { --x: 17%; --y: 48%; --size: 135px; --dx: -42px; --dy: -5px; --rotation: -18deg; --delay: -0.4s; --duration: 2.7s; }
.ai-chat-orb .aw-smoke--rear span:nth-child(2) { --x: 30%; --y: 22%; --size: 118px; --dx: -30px; --dy: -34px; --rotation: 12deg; --delay: -1.2s; --duration: 3.2s; }
.ai-chat-orb .aw-smoke--rear span:nth-child(3) { --x: 45%; --y: 68%; --size: 150px; --dx: -12px; --dy: 32px; --rotation: -7deg; --delay: -2.1s; --duration: 2.9s; }
.ai-chat-orb .aw-smoke--rear span:nth-child(4) { --x: 60%; --y: 23%; --size: 130px; --dx: 17px; --dy: -34px; --rotation: 16deg; --delay: -0.8s; --duration: 3.4s; }
.ai-chat-orb .aw-smoke--rear span:nth-child(5) { --x: 74%; --y: 64%; --size: 142px; --dx: 38px; --dy: 26px; --rotation: -12deg; --delay: -1.8s; --duration: 2.8s; }
.ai-chat-orb .aw-smoke--rear span:nth-child(6) { --x: 86%; --y: 42%; --size: 112px; --dx: 45px; --dy: -8px; --rotation: 22deg; --delay: -2.5s; --duration: 3.1s; }

.ai-chat-orb .aw-smoke--front span:nth-child(1) { --x: 28%; --y: 63%; --size: 95px; --dx: -20px; --dy: 22px; --rotation: 14deg; --delay: -0.9s; --duration: 2.8s; }
.ai-chat-orb .aw-smoke--front span:nth-child(2) { --x: 43%; --y: 74%; --size: 90px; --dx: -7px; --dy: 28px; --rotation: -10deg; --delay: -1.8s; --duration: 3.2s; }
.ai-chat-orb .aw-smoke--front span:nth-child(3) { --x: 61%; --y: 72%; --size: 102px; --dx: 10px; --dy: 29px; --rotation: 9deg; --delay: -2.4s; --duration: 2.7s; }
.ai-chat-orb .aw-smoke--front span:nth-child(4) { --x: 74%; --y: 57%; --size: 84px; --dx: 21px; --dy: 16px; --rotation: -17deg; --delay: -1.2s; --duration: 3s; }
.ai-chat-orb .aw-smoke--front span:nth-child(5) { --x: 37%; --y: 34%; --size: 78px; --dx: -13px; --dy: -18px; --rotation: 19deg; --delay: -2.1s; --duration: 2.9s; }
.ai-chat-orb .aw-smoke--front span:nth-child(6) { --x: 65%; --y: 32%; --size: 82px; --dx: 15px; --dy: -19px; --rotation: -11deg; --delay: -0.5s; --duration: 3.3s; }

@keyframes awv-orb-smoke-idle {
  0%, 100% { opacity: 0.09; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(0.72); }
  50% { opacity: 0.26; transform: translate(calc(-50% + 5px), calc(-50% - 5px)) rotate(calc(var(--rotation) + 7deg)) scale(0.96); }
}

.ai-chat-orb .aw-orb-zone[data-state="listening"] {
  --cloud-hot: 230 255 255;
  --cloud-main: 46 209 255;
  --cloud-accent: 39 126 255;
}

.ai-chat-orb .aw-orb-zone[data-state="listening"] .aw-smoke {
  opacity: 0.46;
  animation: awv-smoke-breathe 1.55s ease-in-out infinite;
}

.ai-chat-orb .aw-orb-zone[data-state="listening"] .aw-orb-smoke-canvas {
  opacity: 0.63;
  filter: blur(0.55px) saturate(1.4) contrast(1.06);
}

.ai-chat-orb .aw-orb-zone[data-state="thinking"] {
  --cloud-hot: 235 225 255;
  --cloud-main: 141 104 255;
  --cloud-accent: 62 126 255;
}

.ai-chat-orb .aw-orb-zone[data-state="thinking"] .aw-smoke--rear {
  opacity: 0.48;
  animation: awv-smoke-vortex 7s linear infinite;
}

.ai-chat-orb .aw-orb-zone[data-state="thinking"] .aw-smoke--front {
  opacity: 0.2;
  animation: awv-smoke-vortex 9s linear infinite reverse;
}

.ai-chat-orb .aw-orb-zone[data-state="thinking"] .aw-orb-smoke-canvas {
  opacity: 0.69;
  filter: blur(0.65px) saturate(1.5) contrast(1.07) hue-rotate(4deg);
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-smoke--rear {
  opacity: 0.42;
  filter: url("#aw-smoke-warp");
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-smoke--front {
  opacity: 0.3;
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-orb-smoke-canvas {
  opacity: 0.94;
  filter: blur(0.45px) saturate(1.56) contrast(1.08);
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-smoke span {
  animation: awv-puff-speaking var(--duration) cubic-bezier(0.2, 0.64, 0.24, 1) infinite var(--delay);
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-particles span {
  animation-duration: 1.4s;
}

.ai-chat-orb .aw-orb-scene.is-canvas-ready .aw-smoke--rear {
  opacity: 0.12;
}

.ai-chat-orb .aw-orb-scene.is-canvas-ready .aw-smoke--rear span {
  animation: none;
  opacity: 0.08;
  will-change: auto;
}

.ai-chat-orb .aw-orb-zone[data-state="listening"] .aw-orb-scene.is-canvas-ready .aw-smoke--rear {
  opacity: 0.16;
}

.ai-chat-orb .aw-orb-zone[data-state="thinking"] .aw-orb-scene.is-canvas-ready .aw-smoke--rear {
  opacity: 0.18;
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-orb-scene.is-canvas-ready .aw-smoke--rear {
  opacity: 0.23;
  filter: none;
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-orbit {
  animation-duration: 10s;
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-orbit--two {
  animation-duration: 16s;
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-halo {
  opacity: 0.94;
  filter: blur(17px) saturate(1.3);
}

.ai-chat-orb .aw-orb-zone[data-state="speaking"] .aw-orb-shell {
  animation-duration: 2.6s;
}

@keyframes awv-smoke-breathe {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
}

@keyframes awv-smoke-vortex {
  to { transform: rotate(360deg); }
}

@keyframes awv-puff-speaking {
  0% { opacity: 0.05; transform: translate(-50%, -50%) rotate(var(--rotation)) scale(0.62); }
  34% { opacity: 0.67; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      rotate(calc(var(--rotation) + 18deg))
      scale(1.42);
  }
}

.ai-chat-orb .aw-orb {
  position: relative;
  isolation: isolate;
  z-index: 2;
  width: clamp(148px, 14vw, 172px);
  height: clamp(148px, 14vw, 172px);
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
  border: 1px solid rgba(211, 237, 255, 0.94);
  border-radius: 50%;
  outline: 0;
  color: #fff;
  cursor: pointer;
  background:
    radial-gradient(circle at 34% 24%, rgba(237, 253, 255, 0.94) 0, rgba(99, 202, 255, 0.72) 6%, rgba(32, 115, 232, 0.25) 21%, transparent 35%),
    radial-gradient(circle at 69% 75%, rgba(103, 83, 232, 0.42), transparent 43%),
    radial-gradient(circle at 48% 46%, #0a4b9f 0, #062d6a 43%, #03183e 68%, #01091e 100%);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.94),
    0 0 0 8px rgba(102, 164, 255, 0.23),
    0 0 30px 9px rgba(91, 162, 255, 0.48),
    0 0 84px 27px rgba(67, 112, 243, 0.29),
    0 28px 58px -24px rgba(16, 51, 139, 0.88),
    inset -26px -32px 48px rgba(0, 4, 20, 0.68),
    inset 17px 17px 36px rgba(177, 235, 255, 0.25);
  transform: translateZ(0);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease, box-shadow 0.45s ease;
}

.ai-chat-orb .aw-orb:focus-visible {
  box-shadow:
    0 0 0 6px #fff,
    0 0 0 12px rgba(37, 99, 235, 0.44),
    0 0 42px 14px rgba(80, 148, 255, 0.48),
    inset -26px -32px 48px rgba(0, 4, 20, 0.68);
}

.ai-chat-orb .aw-orb:disabled { cursor: default; }

.ai-chat-orb .aw-orb::before,
.ai-chat-orb .aw-orb::after {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  content: "";
}

.ai-chat-orb .aw-orb::before {
  z-index: 2;
  inset: 10px;
  border: 1px solid rgba(198, 230, 255, 0.2);
  background: repeating-conic-gradient(from 0deg, rgba(213, 245, 255, 0.22) 0 0.55deg, transparent 0.55deg 3.8deg);
  -webkit-mask: radial-gradient(circle, transparent 0 72%, #000 73% 76%, transparent 77%);
  mask: radial-gradient(circle, transparent 0 72%, #000 73% 76%, transparent 77%);
  animation: awv-orbit 16s linear infinite;
}

.ai-chat-orb .aw-orb::after {
  z-index: 3;
  inset: 0;
  border: 1px solid rgba(218, 242, 255, 0.34);
  background:
    radial-gradient(circle at 30% 19%, rgba(255, 255, 255, 0.4), transparent 23%),
    radial-gradient(circle at 50% 112%, rgba(91, 86, 233, 0.2), transparent 47%);
  box-shadow: inset 0 0 28px rgba(111, 179, 255, 0.17), inset 0 0 0 2px rgba(173, 219, 255, 0.06);
}

.ai-chat-orb .aw-orb__energy {
  position: absolute;
  z-index: 1;
  inset: -32%;
  border-radius: 44% 56% 62% 38% / 43% 38% 62% 57%;
  pointer-events: none;
  opacity: 0.68;
  background:
    conic-gradient(
      from 35deg,
      transparent 0 6%,
      rgba(73, 215, 255, 0.76) 13%,
      transparent 25%,
      rgba(70, 91, 255, 0.6) 37%,
      transparent 52%,
      rgba(179, 128, 255, 0.55) 67%,
      transparent 82%,
      rgba(84, 202, 255, 0.5) 92%,
      transparent
    );
  filter: blur(15px);
  mix-blend-mode: screen;
  animation: awv-energy 9.5s linear infinite;
}

.ai-chat-orb .aw-orb__shine {
  position: absolute;
  z-index: 3;
  width: 70%;
  height: 40%;
  top: 8%;
  left: 15%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.23), transparent 68%);
  filter: blur(5px);
  transform: rotate(-12deg);
}

.ai-chat-orb .aw-voice-bars {
  position: relative;
  z-index: 4;
  width: 96px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2px;
  filter: drop-shadow(0 0 8px rgba(110, 196, 255, 0.36));
}

.ai-chat-orb .aw-voice-bars span {
  --bar-height: 16px;
  width: 1.5px;
  height: var(--bar-height);
  flex: 0 0 1.5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #82d7ff 48%, #aaa1ff);
  box-shadow: 0 0 6px rgba(179, 240, 255, 0.94), 0 0 13px rgba(81, 157, 255, 0.66);
  opacity: 0.86;
  transform-origin: center;
}

.ai-chat-orb .aw-voice-bars span:nth-child(1),
.ai-chat-orb .aw-voice-bars span:nth-child(25) { --bar-height: 6px; }
.ai-chat-orb .aw-voice-bars span:nth-child(2),
.ai-chat-orb .aw-voice-bars span:nth-child(24) { --bar-height: 9px; }
.ai-chat-orb .aw-voice-bars span:nth-child(3),
.ai-chat-orb .aw-voice-bars span:nth-child(23) { --bar-height: 11px; }
.ai-chat-orb .aw-voice-bars span:nth-child(4),
.ai-chat-orb .aw-voice-bars span:nth-child(22) { --bar-height: 14px; }
.ai-chat-orb .aw-voice-bars span:nth-child(5),
.ai-chat-orb .aw-voice-bars span:nth-child(21) { --bar-height: 19px; }
.ai-chat-orb .aw-voice-bars span:nth-child(6),
.ai-chat-orb .aw-voice-bars span:nth-child(20) { --bar-height: 24px; }
.ai-chat-orb .aw-voice-bars span:nth-child(7),
.ai-chat-orb .aw-voice-bars span:nth-child(19) { --bar-height: 31px; }
.ai-chat-orb .aw-voice-bars span:nth-child(8),
.ai-chat-orb .aw-voice-bars span:nth-child(18) { --bar-height: 40px; }
.ai-chat-orb .aw-voice-bars span:nth-child(9),
.ai-chat-orb .aw-voice-bars span:nth-child(17) { --bar-height: 49px; }
.ai-chat-orb .aw-voice-bars span:nth-child(10),
.ai-chat-orb .aw-voice-bars span:nth-child(16) { --bar-height: 58px; }
.ai-chat-orb .aw-voice-bars span:nth-child(11),
.ai-chat-orb .aw-voice-bars span:nth-child(15) { --bar-height: 67px; }
.ai-chat-orb .aw-voice-bars span:nth-child(12),
.ai-chat-orb .aw-voice-bars span:nth-child(14) { --bar-height: 74px; }
.ai-chat-orb .aw-voice-bars span:nth-child(13) { --bar-height: 80px; }

.ai-chat-orb .aw-orb.speaking {
  animation: awv-orb-speaking 1.2s ease-in-out infinite;
  filter: saturate(1.18) brightness(1.06);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.96),
    0 0 0 8px rgba(102, 164, 255, 0.28),
    0 0 38px 13px rgba(86, 177, 255, 0.58),
    0 0 96px 33px rgba(84, 92, 235, 0.36),
    inset -26px -32px 48px rgba(0, 4, 20, 0.64),
    inset 17px 17px 36px rgba(177, 235, 255, 0.28);
}

.ai-chat-orb .aw-orb.speaking .aw-orb__energy {
  opacity: 0.86;
  animation-duration: 3.8s;
}

.ai-chat-orb .aw-orb.speaking .aw-voice-bars span {
  animation: awv-bar 0.68s ease-in-out infinite alternate;
}

.ai-chat-orb .aw-orb.speaking .aw-voice-bars span:nth-child(4n + 1) { animation-delay: -0.13s; }
.ai-chat-orb .aw-orb.speaking .aw-voice-bars span:nth-child(4n + 2) { animation-delay: -0.41s; }
.ai-chat-orb .aw-orb.speaking .aw-voice-bars span:nth-child(4n + 3) { animation-delay: -0.57s; }
.ai-chat-orb .aw-orb.speaking .aw-voice-bars span:nth-child(4n) { animation-delay: -0.26s; }

.ai-chat-orb .aw-orb.listening {
  filter: hue-rotate(10deg) saturate(1.25) brightness(1.04);
  animation: awv-orb-listening 1.6s ease-in-out infinite;
}

.ai-chat-orb .aw-orb.listening .aw-voice-bars span {
  animation: awv-bar-listening 1.2s ease-in-out infinite alternate;
}

.ai-chat-orb .aw-orb.thinking .aw-orb__energy {
  opacity: 0.82;
  animation-direction: reverse;
  animation-duration: 4.8s;
}

.ai-chat-orb .aw-orb.thinking .aw-voice-bars {
  animation: awv-bars-thinking 1.8s ease-in-out infinite;
}

@keyframes awv-energy {
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes awv-orb-speaking {
  0%, 100% { transform: translateZ(0) scale(0.988); }
  42% { transform: translateZ(0) scale(1.04); }
  66% { transform: translateZ(0) scale(1.018); }
}

@keyframes awv-orb-listening {
  50% { transform: scale(1.028); }
}

@keyframes awv-bar {
  from { transform: scaleY(0.35); opacity: 0.58; }
  to { transform: scaleY(1.08); opacity: 1; }
}

@keyframes awv-bar-listening {
  from { transform: scaleY(0.72); opacity: 0.68; }
  to { transform: scaleY(1); opacity: 0.96; }
}

@keyframes awv-bars-thinking {
  50% { opacity: 0.55; transform: scaleX(0.84); filter: hue-rotate(18deg); }
}

.ai-chat-orb .aw-status {
  position: relative;
  z-index: 8;
  inset: auto;
  min-height: 23px;
  margin-top: -10px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  color: #1e62d9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  background: rgba(250, 251, 255, 0.72);
  box-shadow: 0 9px 26px -19px rgba(21, 57, 119, 0.72);
  backdrop-filter: blur(10px);
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ai-chat-orb .aw-status.is-hidden {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

.ai-chat-orb .aw-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2071ed;
  box-shadow: 0 0 0 4px rgba(32, 113, 237, 0.09);
  animation: awv-status-dot 1.25s ease-in-out infinite;
}

@keyframes awv-status-dot {
  50% { opacity: 0.45; transform: scale(0.75); }
}

.ai-chat-orb .aw-start-hint {
  position: relative;
  z-index: 12;
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  color: #2054c9;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.14), rgba(124, 92, 255, 0.14));
  box-shadow: 0 10px 26px -16px rgba(37, 99, 235, 0.55);
  transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  animation: awv-start-hint-pulse 2.2s ease-in-out infinite;
}

.ai-chat-orb .aw-start-hint i { font-size: 14px; }

.ai-chat-orb .aw-start-hint:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.68);
}

.ai-chat-orb .aw-start-hint[hidden] { display: none; }

@keyframes awv-start-hint-pulse {
  0%, 100% { box-shadow: 0 10px 26px -16px rgba(37, 99, 235, 0.55); }
  50% { box-shadow: 0 10px 30px -12px rgba(124, 92, 255, 0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-orb .aw-start-hint { animation: none; }
}

.ai-chat-orb .typing-cursor { display: none; }

.ai-chat-orb .aw-message {
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #10254a;
  /* Fijo, mismo motivo que en .ai-chat-orb más arriba — no var(--primary_font). */
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.28;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

.ai-chat-orb .aw-message::before { display: none; content: none; }

.ai-chat-orb .message-cursor {
  width: 1px;
  height: 0.95em;
  margin-left: 4px;
  display: inline-block;
  vertical-align: -0.08em;
  background: #2563eb;
  animation: awv-cursor 0.9s steps(1) infinite;
}

@keyframes awv-cursor {
  50% { opacity: 0; }
}

.ai-chat-orb .aw-compose {
  position: relative;
  z-index: 12;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  max-height: 640px;
  margin: 0 auto;
  padding: 0;
}

.ai-chat-orb .aw-transcript {
  min-height: 40px;
  padding: 3px 24px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: initial;
  justify-items: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ai-chat-orb .aw-transcript__label {
  color: #9aa5b8;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ai-chat-orb .aw-transcript__text {
  max-width: 100%;
  overflow: hidden;
  color: #2467e7;
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.4;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-orb .aw-transcript__text.placeholder {
  color: #9ca8ba;
  font-size: 12px;
}

.ai-chat-orb .aw-transcript__text.unsupported {
  color: #8b5a2b;
}

.ai-chat-orb .aw-text-panel {
  position: relative;
  min-height: 54px;
  margin: 0;
  padding: 5px 6px 5px 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 42px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(113, 133, 168, 0.19);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 17px 44px -31px rgba(18, 46, 99, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.ai-chat-orb .aw-text-panel:focus-within {
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 20px 48px -31px rgba(18, 68, 165, 0.72), 0 0 0 4px rgba(37, 99, 235, 0.055);
  transform: translateY(-1px);
}

.ai-chat-orb .aw-text-panel__icon {
  position: absolute;
  left: 17px;
  color: #95a3b8;
  font-size: 15px;
}

.ai-chat-orb .aw-input {
  width: 100%;
  height: 42px;
  padding: 0 8px;
  border: 0;
  outline: 0;
  color: #15294c;
  font-size: 12px;
  font-weight: 550;
  background: transparent;
}

.ai-chat-orb .aw-input::placeholder { color: #a5afbf; }

.ai-chat-orb .aw-input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ai-chat-orb .aw-mic,
.ai-chat-orb .aw-send {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.22s ease, color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.ai-chat-orb .aw-mic {
  border: 1px solid #e1e6ef;
  color: #536682;
  background: #fff;
}

.ai-chat-orb .aw-mic:hover:not(:disabled),
.ai-chat-orb .aw-mic.active {
  border-color: #cbdaf7;
  color: #2165e5;
  background: #f1f6ff;
  transform: translateY(-1px);
}

.ai-chat-orb .aw-mic.active {
  box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.08);
}

.ai-chat-orb .aw-send {
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, #2a6deb, #3757d9);
  box-shadow: 0 10px 19px -10px rgba(37, 99, 235, 0.78);
}

.ai-chat-orb .aw-send:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 15px 24px -11px rgba(37, 99, 235, 0.88);
}

.ai-chat-orb .aw-mic:disabled,
.ai-chat-orb .aw-send:disabled,
.ai-chat-orb .aw-input:disabled {
  cursor: default;
  opacity: 0.55;
}

.ai-chat-orb .aw-helper {
  min-height: 22px;
  margin: 7px 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #9ba6b8;
  font-size: 8px;
  font-weight: 650;
}

.ai-chat-orb .aw-helper__controls,
.ai-chat-orb .aw-helper__disclosure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ai-chat-orb .aw-helper__disclosure::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7e92af;
  content: "";
}

.ai-chat-orb .aw-helper kbd {
  padding: 2px 6px;
  border: 1px solid #dbe1ea;
  border-bottom-width: 2px;
  border-radius: 5px;
  color: #718099;
  font: inherit;
  background: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   3) Botón flotante + panel de vista previa (piezas nuevas,
      sin equivalente en assistance-web)
   ========================================================= */

/* Igual que el resto de acciones de administración (ver isEditModeOn() en
   imageadmin.js): solo debe verse con el "modo edición" activado desde la
   topbar, no con cualquier sesión de admin. html.x-edit-mode se
   activa/desactiva ahí mismo (admin_topbar.tmpl.htm), así que basta con
   reaccionar a esa clase por CSS, sin JS adicional. */
.empiria-fab {
  /* Visible SIEMPRE para un admin, no solo con el modo edición activado.
     El gating real ya lo hace el servidor: general_helper::get_layout()
     solo imprime este botón si hay sesión de admin Y licencia de IA, así
     que esconderlo además por CSS solo servía para que Empiria
     desapareciera sin motivo aparente. */
  display: grid;
  place-items: center;
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1990;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  background: linear-gradient(135deg, #7c5cff, #4f8cff);
  box-shadow: 0 14px 28px -12px rgba(76, 60, 255, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.empiria-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -12px rgba(76, 60, 255, 0.72);
}

/* Modo de confirmación compacta (ver enterCompactConfirmMode() en
   ai-chat-conversation.js): al confirmar qué widget/elemento editar o
   eliminar, el cajón grande (hasta 70% del ancho) puede tapar justo lo que
   se ha resaltado en violeta sobre la página. En vez de tocar el ciclo de
   vida del modal de Bootstrap (disparar hidden.bs.modal cerraría la
   conversación entera), solo se oculta visualmente con esta clase — el
   modal sigue "abierto" para Bootstrap, solo invisible — y aparece esta
   burbuja junto al propio orbe con la misma pregunta de sí/no. */
#empireAiChatModal.is-compact .modal-dialog-right {
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* z-index por encima de TODO lo demás del modo edición: el propio cajón de
   chat va a 1000010 (imageadmin.css), la barra de admin a 1000001, y
   root.css llega a forzar z-index:9999 al topbar del propio sitio del
   cliente — con el 1991 de antes, esta burbuja podía quedar debajo de
   cualquiera de ellos y los botones de Sí/No se volvían imposibles de
   pulsar (se veía la burbuja, pero el clic se lo comía la capa de encima).
   pointer-events explícito porque #empireAiChatModal los desactiva en
   cascada para dejar clicar la página de detrás. */
.ai-chat-confirm-bubble {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 1000020;
  pointer-events: auto;
  width: min(320px, calc(100vw - 44px));
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px -16px rgba(16, 24, 40, 0.4);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Te toca contestar: el MISMO borde azul que respira que el cajón y que la
   modal de assistance-web. Aquí hace más falta todavía — en modo compacto el
   cajón está oculto, así que esta burbuja es lo único en pantalla y sin esto
   no había ninguna pista de que se puede contestar hablando. */
.ai-chat-confirm-bubble.is-listening {
  animation: aic-listening-breath 1.6s ease-in-out infinite;
}

/* Y dicho con palabras, no solo con el borde: que se pueda contestar de viva
   voz no se adivina mirando dos botones. */
.ai-chat-confirm-bubble__hint {
  display: none;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #2563eb;
}
.ai-chat-confirm-bubble.is-listening .ai-chat-confirm-bubble__hint { display: flex; }

/* Puntito que late al lado del aviso, con el mismo pulso que el borde. */
.ai-chat-confirm-bubble__hint::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  animation: aic-listening-dot 1.6s ease-in-out infinite;
}
@keyframes aic-listening-dot {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-chat-confirm-bubble.is-listening { animation: none !important;
    box-shadow: 0 20px 44px -16px rgba(16, 24, 40, .4), 0 0 0 2px rgba(37, 99, 235, .7); }
  .ai-chat-confirm-bubble__hint::before { animation: none !important; opacity: 1; }
}
.ai-chat-confirm-bubble button {
  pointer-events: auto;
}
.ai-chat-confirm-bubble__text {
  margin: 0 0 12px;
  color: #101828;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}
.ai-chat-confirm-bubble__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Burbuja para pedir una imagen (ver empiria_chat.tmpl.htm y
   pickImageViaBubble() en ai-chat-conversation.js). Mismo cuerpo que
   .ai-chat-confirm-bubble — misma posición, sombra y tipografía — para que
   se lea como parte de la misma familia de "algo necesita tu atención". */
.ai-chat-file-bubble {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 1000020;
  pointer-events: auto;
  width: min(320px, calc(100vw - 44px));
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 44px -16px rgba(16, 24, 40, 0.4);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.ai-chat-file-bubble button {
  pointer-events: auto;
}
.ai-chat-file-bubble__text {
  margin: 0 0 12px;
  color: #101828;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}
.ai-chat-file-bubble__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* Mismo borde que respira que la burbuja de sí/no: antes este momento no
   tenía NINGUNA pista visual de que hacía falta actuar — de ahí la
   sensación de que el chat se quedaba colgado. */
.ai-chat-file-bubble.is-active {
  animation: aic-listening-breath 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat-file-bubble.is-active { animation: none !important;
    box-shadow: 0 20px 44px -16px rgba(16, 24, 40, .4), 0 0 0 2px rgba(37, 99, 235, .7); }
}

/* Sin overlay oscuro (data-bs-backdrop="false" en empiria_chat.tmpl.htm) el
   usuario puede ver la página detrás del chat mientras Empiria marca un
   widget/elemento — pero el propio wrapper .modal de Bootstrap sigue
   cubriendo el viewport entero y, aunque invisible, seguiría interceptando
   los clics de esa zona resaltada (ver enableHoverPicking() en
   ai-chat-target.js) si no se le quitan los eventos de puntero fuera del
   panel real del chat. */
#empireAiChatModal {
  pointer-events: none;
}
#empireAiChatModal .modal-dialog-right {
  pointer-events: auto;
}

/* TE TOCA HABLAR: mismo borde azul "que respira" que la modal de
   assistance-web (.aw-review__dialog.is-listening, en Empire-CMS:
   public_html/resources/css/assistance-web-voice.css). Mismos colores, mismo
   ritmo de 1,6 s y el mismo salto de azul a violeta en el pico, para que las
   dos pantallas den la misma señal.

   La clase la pone setInputEnabled() en ai-chat-orb.js, que es el punto EXACTO
   en que Empiria cede el turno: así no hay forma de que el borde se quede
   encendido mientras ella sigue trabajando.

   El cajón va pegado al borde derecho de la pantalla, así que el halo se ve
   sobre todo en el canto izquierdo, que es justo el que mira el usuario. */
#empireAiChatModal.is-listening .modal-content {
  animation: aic-listening-breath 1.6s ease-in-out infinite;
}

@keyframes aic-listening-breath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(37, 99, 235, 0.55),
      0 0 20px 2px rgba(37, 99, 235, 0.25);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(124, 92, 255, 0.7),
      0 0 42px 8px rgba(37, 99, 235, 0.5);
  }
}

/* Quien pide menos movimiento se queda con el borde azul fijo (la pista
   sigue estando) pero sin el latido. Mismo criterio que assistance-web. */
@media (prefers-reduced-motion: reduce) {
  #empireAiChatModal.is-listening .modal-content {
    animation: none !important;
    box-shadow:
      0 0 0 2px rgba(37, 99, 235, 0.7),
      0 0 24px 4px rgba(37, 99, 235, 0.3);
  }
}
/* Ancho FIJO del cajón del chat.

   .modal-dialog-right trae width:auto entre min-width:500px (imageadmin.css)
   y max-width:550px (utils.css), así que el cajón se encogía o se estiraba
   según lo largo que fuera el mensaje que Empiria estuviera escribiendo — y
   como el texto se teclea letra a letra, el ancho cambiaba EN MITAD de la
   frase. Aquí se clava a 550px (el máximo que ya tenía) para que no se mueva
   nunca. Solo a partir de 768px: por debajo sigue ocupando el 100%. */
@media (min-width: 768px) {
  #empireAiChatModal .modal-dialog-right {
    width: 550px;
    min-width: 550px;
    max-width: 550px;
  }
}

/* El chatbot ocupa exactamente el alto visible y reparte ese espacio entre
   cabecera, orbe, respuesta y controles. El tamaño del orbe depende también
   de la altura (no solo del ancho), evitando que el drawer completo necesite
   scroll en móviles apaisados, portátiles bajos o ventanas reducidas. */
#empireAiChatModal .modal-dialog-right,
#empireAiChatModal .modal-content,
#empireAiChatModal .ai-chat-orb {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

#empireAiChatModal .usr-drawer__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.6dvh, 14px);
  min-height: 0;
  padding: clamp(10px, 2.4dvh, 22px) clamp(14px, 4vw, 26px);
  overflow: hidden;
}

#empireAiChatModal .aw-orb-zone {
  flex: 0 1 auto;
  min-height: 0;
  padding: clamp(6px, 2dvh, 20px) 12px;
  transform: translateY(-8px);
}

#empireAiChatModal .aw-orb-scene {
  width: clamp(135px, min(52vw, 31dvh), 292px);
}

#empireAiChatModal .aw-message {
  flex: 0 1 auto;
  max-height: clamp(64px, 22dvh, 150px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-inline: 4px;
  scrollbar-width: thin;
}

#empireAiChatModal .usr-drawer__foot {
  flex: 0 0 auto;
  padding: clamp(9px, 1.8dvh, 16px) clamp(12px, 4vw, 26px);
}

#empireAiChatModal .aw-compose {
  max-height: none;
}

@media (max-width: 575.98px) {
  #empireAiChatModal .usr-drawer__head {
    gap: 8px;
    padding: 14px 12px;
    align-items: center;
  }

  #empireAiChatModal .usr-drawer__head > div:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
  }

  #empireAiChatModal .usr-drawer__ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 17px;
  }

  #empireAiChatModal .usr-drawer__ttl { font-size: 16px; }
  #empireAiChatModal .usr-drawer__sub {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #empireAiChatModal .usr-drawer__close {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }

  #empireAiChatModal .aw-transcript { padding-inline: 8px; }
  #empireAiChatModal .aw-text-panel { min-height: 48px; }
}

@media (max-height: 650px) {
  #empireAiChatModal .usr-drawer__head {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  #empireAiChatModal .usr-drawer__body {
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  #empireAiChatModal .aw-orb-zone {
    padding-block: 2px;
    transform: translateY(-5px);
  }
  #empireAiChatModal .aw-orb-scene {
    width: clamp(105px, min(44vw, 25dvh), 175px);
  }

  #empireAiChatModal .aw-message {
    max-height: 20dvh;
    font-size: 14px;
    line-height: 1.35;
  }

  #empireAiChatModal .usr-drawer__foot {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #empireAiChatModal .aw-transcript {
    min-height: 30px;
    padding-top: 0;
    padding-bottom: 4px;
  }
}

.ai-chat-preview {
  margin: 0 22px 18px;
}

.ai-chat-preview__caption {
  margin: 0 0 8px;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Enlace "ver vista previa" (abre en pestaña nueva, blob: URL) en vez del
   iframe de antes: el modal del chat es demasiado estrecho para que un
   widget se vea con su tamaño real, y el usuario prefiere verlo a tamaño
   completo — ver showPreview()/hidePreview() en ai-chat-conversation.js. */
.ai-chat-preview__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--aic-aw-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 17px 44px -31px rgba(18, 46, 99, 0.5);
  color: #2467e7;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-chat-preview__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px -28px rgba(18, 46, 99, 0.6);
  color: #2467e7;
}

.ai-chat-preview__link i {
  font-size: 16px;
}

/* =========================================================
   4) Marcado de resaltado de destino (crear/editar/eliminar),
      pieza nueva sin equivalente en assistance-web — ver
      ai-chat-target.js
   ========================================================= */

@keyframes ai-chat-target-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.35), 0 0 22px 4px rgba(124, 92, 255, 0.3); }
  50% { box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.6), 0 0 32px 8px rgba(124, 92, 255, 0.5); }
}

.ai-chat-target-widget {
  outline: 3px solid transparent !important;
  border-radius: 14px !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.35), 0 0 22px 4px rgba(124, 92, 255, 0.3) !important;
  animation: ai-chat-target-pulse 1.6s ease-in-out infinite;
  transition: box-shadow 0.25s ease;
  scroll-margin: 90px;
}

.ai-chat-target-element {
  outline: 3px solid rgba(124, 92, 255, 0.85) !important;
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 22px 4px rgba(124, 92, 255, 0.4) !important;
  animation: ai-chat-target-pulse 1.6s ease-in-out infinite;
  scroll-margin: 90px;
}

/* Corrección manual del objetivo (ver enableHoverPicking() en
   ai-chat-target.js): mientras Empiria espera confirmación, cualquier zona
   candidata se marca en amarillo al pasar el ratón por encima, para que se
   pueda hacer clic en la correcta si el violeta no era la que se quería. */
.ai-chat-hover-pick {
  outline: 3px dashed #ffcc00 !important;
  outline-offset: 3px;
  cursor: pointer !important;
  background-color: rgba(255, 204, 0, 0.1) !important;
}

/* En pantallas táctiles no hay "pasar el ratón": las zonas elegibles se
   marcan todas a la vez, más suaves que la que se toque. */
.ai-chat-pick-candidate {
  outline: 2px dashed rgba(255, 204, 0, 0.9) !important;
  outline-offset: 2px;
  cursor: pointer !important;
}

/* El objetivo también es candidato: sin esto el amarillo (va después)
   tapaba el violeta y en el móvil no se veía cuál era. */
.ai-chat-target-element.ai-chat-pick-candidate,
.ai-chat-target-element.ai-chat-hover-pick,
.ai-chat-target-widget.ai-chat-pick-candidate,
.ai-chat-target-widget.ai-chat-hover-pick {
  outline: 3px solid rgba(124, 92, 255, 0.85) !important;
  background-color: rgba(124, 92, 255, 0.08) !important;
}

/* Vista previa de un borrador de widget en la propia página (ver
   showWidgetPreview() en ai-chat-conversation.js): ocupa el sitio del
   widget que cambia, o va al final si es nuevo, marcada en violeta. */
.ai-chat-preview-host {
  position: relative;
  margin: 18px 8px;
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.35), 0 0 22px 4px rgba(124, 92, 255, 0.3);
  animation: ai-chat-target-pulse 1.6s ease-in-out infinite;
  scroll-margin: 90px;
}
.ai-chat-preview-host__frame {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 14px;
  background: #fff;
}
.ai-chat-preview-host__tag {
  position: absolute;
  top: -12px;
  left: 16px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: #7c5cff;
  color: #fff;
  font: 600 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.ai-chat-preview-host.is-applied {
  animation: none;
  box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.55);
}
.ai-chat-preview-host.is-applied .ai-chat-preview-host__tag {
  background: #2ea043;
}

/* Texto nuevo puesto a prueba antes de guardarlo. */
.ai-chat-preview-text {
  outline: 3px solid rgba(124, 92, 255, 0.85) !important;
  outline-offset: 2px;
  border-radius: 6px;
  background-color: rgba(124, 92, 255, 0.08) !important;
  animation: ai-chat-target-pulse 1.6s ease-in-out infinite;
  scroll-margin: 90px;
}

/* Los tres botones de la cabecera del chat (reiniciar, voz, cerrar) usan
   .usr-drawer__close, que lleva margin-left:auto. En el PRIMERO eso empuja
   el grupo a la derecha, que es lo que se quiere; en los siguientes volvía a
   empujar, así que se anula y la separación la da SOLO el gap del header.
   Antes el segundo sumaba 6px al gap y el tercero lo anulaba con un style
   en línea, así que los tres no estaban igual de separados. */
.ai-chat-orb .usr-drawer__head .usr-drawer__close + .usr-drawer__close {
  margin-left: 0;
}

/* Voz desactivada: se marca en el propio botón para que se vea de un
   vistazo que Empiria está en silencio, no solo por el icono. */
.ai-chat-orb .usr-drawer__head #empiriaVoiceToggle[aria-pressed="false"] {
  background: #fdeaea;
  color: #c0392b;
}

/* =========================================================================
   "Lo he encontrado aquí" (ver findAndHighlight() en ai-chat-target.js):
   el elemento que contiene lo buscado, marcado 5 segundos al abrir la
   página. Contorno y halo en vez de borde para no mover nada de sitio.
   ========================================================================= */
.empiria-find-hl {
  outline: 3px solid #7c5cff !important;
  outline-offset: 6px;
  border-radius: 10px;
  box-shadow: 0 0 0 10px rgba(124, 92, 255, .14), 0 18px 40px -12px rgba(79, 140, 255, .55) !important;
  animation: empiriaFindPulse 1.25s ease-in-out 4;
  scroll-margin: 120px;
}
@keyframes empiriaFindPulse {
  0%, 100% { outline-color: #7c5cff; box-shadow: 0 0 0 10px rgba(124, 92, 255, .14), 0 18px 40px -12px rgba(79, 140, 255, .55); }
  50% { outline-color: #4f8cff; box-shadow: 0 0 0 16px rgba(79, 140, 255, .08), 0 18px 40px -12px rgba(124, 92, 255, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .empiria-find-hl { animation: none; }
}