/* Blue animated gradient border (inspired by the CodePen) + subtle halo */
    .chat-animated-border {
      position: relative;
      border-radius: 1rem;
      padding: 3px;
      /* thinner border thickness */
      overflow: visible !important;
      /* animated gradient background used as border */
      background: linear-gradient(90deg, #3b82f6 0%, #0ea5e9 33%, #60a5fa 66%, #3b82f6 100%);
      background-size: 300% 300%;
      animation: gradientShift 6s linear infinite;
      /* subtle outer glow to reinforce halo */
      box-shadow: 0 12px 36px rgba(14, 165, 233, 0.14);
    }

    /* inner wrapper keeps original card visuals (background, border, shadow) */
    .chat-animated-border .chat-inner {
      border-radius: calc(1rem - 3px);
      height: 100%;
      width: 100%;
      overflow: visible;
      /* allow status indicator to overflow avatar */
    }

    /* Mobile full-screen chat helpers - Handled in main CSS section above */

    /* When chat is in mobile-full mode, occupy real viewport and stack above everything */
    #chat-container.mobile-full {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100dvh !important;
      z-index: 100000 !important;
      display: flex !important;
      align-items: stretch !important;
      pointer-events: auto !important;
    }

    /* Messages area behavior */
    #chat-messages {
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }

    #chat-input {
      font-size: 16px; /* prevent iOS auto-zoom */
      touch-action: manipulation;
    }

    /* Interactive elements should use manipulation to avoid double-tap zoom and delays */
    button, a, input, textarea {
      touch-action: manipulation;
    }

    /* stronger ambient halo behind everything (radial) */
    .chat-animated-border::before {
      content: '';
      position: absolute;
      inset: -18px;
      /* extend a bit to let the glow breathe */
      border-radius: calc(1rem + 18px);
      background: radial-gradient(circle at center, rgba(14, 165, 233, 0.42) 0%, rgba(14, 165, 233, 0.18) 30%, rgba(14, 165, 233, 0) 70%);
      filter: blur(22px);
      z-index: -2;
      pointer-events: none;
      opacity: 0.95;
    }

    /* inner subtle edge to separate border from content (still behind content) */
    .chat-animated-border::after {
      content: '';
      position: absolute;
      inset: 3px;
      /* matches padding */
      border-radius: calc(1rem - 3px);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
      z-index: -1;
      pointer-events: none;
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    /* Slide-left entrance (used for #about section) */
    @keyframes slideLeft {
      0% {
        opacity: 0;
        transform: translateX(-250px);
      }

      70% {
        opacity: 1;
        transform: translateX(8px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* stronger, smoother entrance: larger offset + slower duration with a soft ease-out */
    .animate-slide-left {
      animation: slideLeft 5000ms cubic-bezier(0.16, 1, 0.3, 1) both;
      will-change: transform, opacity;
    }

    @media (prefers-reduced-motion: reduce) {
      .chat-animated-border {
        animation: none;
      }
    }

    /* mobile: thinner border */
    /* Override animated border for chat widget on mobile */
    @media (max-width: 768px) {
      #chat-container .chat-animated-border {
        border-radius: 0 !important;
        padding: 0;
        background: none;
        box-shadow: none;
        animation: none;
      }

      #chat-container .chat-animated-border::before,
      #chat-container .chat-animated-border::after {
        display: none;
      }

      #chat-container .chat-inner {
        border-radius: 0 !important;
      }
      /* Speed up chat open/close transitions on mobile to avoid slow movement when keyboard opens */
      #chat-container, #chat-container .chat-inner, #chat-container .chat-animated-border {
        transition-duration: 90ms !important;
        transition-timing-function: ease-out !important;
      }
    }

    /* Small helpers for typing dots spacing */
    .dot {
      display: inline-block;
      margin-right: 6px;
    }

    .dot.delay-150 {
      animation-delay: 120ms;
    }

    .dot.delay-300 {
      animation-delay: 240ms;
    }

    /* #services>.section-zoom transform:scale(0.9) legacy eliminado: rompía
       position:sticky del título/cards de #services (crea containing block).
       Ver src/styles/home.css y DESIGN.md 9.1.1 — misma regla ya removida ahí. */

    /* Chat blur when lead overlay is active */
    /* Chat Widget Styles */

    /* Floating animation for FAB */
    @keyframes float-bounce {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    .animate-bounce-slow {
      animation: float-bounce 3s ease-in-out infinite;
    }

    #chat-container.chat-open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
      display: block !important;
      visibility: visible;
    }

    #chat-fab.chat-open {
      opacity: 0;
      transform: scale(0.5);
      pointer-events: none;
      visibility: hidden;
    }

    #chat-overlay.chat-open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Smooth scrollbar */
    #chat-messages::-webkit-scrollbar {
      width: 6px;
    }

    #chat-messages::-webkit-scrollbar-track {
      background: transparent;
    }

    #chat-messages::-webkit-scrollbar-thumb {
      background: #cbd5e0;
      border-radius: 3px;
    }

    #chat-messages::-webkit-scrollbar-thumb:hover {
      background: #a0aec0;
    }

    /* Typing indicator animation */
    @keyframes bounce {

      0%,
      60%,
      100% {
        transform: translateY(0);
      }

      30% {
        transform: translateY(-4px);
      }
    }

    .animate-bounce-dot {
      animation: bounce 1.4s infinite;
    }

    .delay-75 {
      animation-delay: 0.2s;
    }

    .delay-150 {
      animation-delay: 0.4s;
    }