:root {
        /* Colors - Azul océano moderno con acentos cyan */
        --chat--color-primary: #0891b2; /* cyan vibrante */
        --chat--color-primary-shade-50: #06b6d4;
        --chat--color-primary-shade-100: #22d3ee;
        --chat--color-secondary: #0e7490; /* azul océano */
        --chat--color-secondary-shade-50: #155e75;
        --chat--color-white: #ffffff; /* blanco puro */
        --chat--color-light: #f0f9ff; /* azul muy claro */
        --chat--color-light-shade-50: #e0f2fe;
        --chat--color-light-shade-100: #bae6fd;
        --chat--color-medium: #7dd3fc;
        --chat--color-dark: #0c4a6e; /* azul oscuro profundo */
        --chat--color-disabled: #94a3b8;
        --chat--color-typing: #cbd5e1;

        /* Gradientes modernos */
        --chat--gradient-primary: linear-gradient(
          135deg,
          #0891b2 0%,
          #06b6d4 100%
        );
        --chat--gradient-header: linear-gradient(90deg, rgb(7, 155, 173) 0%, rgb(30, 144, 255) 100%);
        --chat--gradient-body: linear-gradient(
          180deg,
          #f8fafc 0%,
          #f1f5f9 100%
        );
        --chat--gradient-button: linear-gradient(
          135deg,
          #06b6d4 0%,
          #0891b2 100%
        );

        /* Base Layout */
        --chat--spacing: 16px;
        --chat--border-radius: 0px;
        --chat--transition-duration: 0.2s;
        --chat--font-family: (
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Oxygen-Sans,
          Ubuntu,
          Cantarell,
          "Helvetica Neue",
          sans-serif
        );

        /* Window Dimensions */
        --chat--window--width: 400px;
        --chat--window--height: 450px;
        --chat--window--bottom: var(--chat--spacing);
        --chat--window--right: var(--chat--spacing);
        --chat--window--z-index: 9999;
        --chat--window--border: 1px solid #e2e8f0;
        --chat--window--border-radius:  12px;
        --chat--window--margin-bottom: var(--chat--spacing);

        /* Header Styles */
        --chat--header-height: 140px;
        --chat--header--padding: var(--chat--spacing);
        --chat--header--background: var(--chat--gradient-header);
        --chat--header--color: var(--chat--color-white);
        --chat--header--border-top: none;
        --chat--header--border-bottom: none;
        --chat--header--border-left: none;
        --chat--header--border-right: none;
        --chat--heading--font-size: 32px;
        --chat--subtitle--font-size: 16px;
        --chat--subtitle--line-height: 0.1;

        /* Message Styles */
        --chat--message--font-size: 1rem;
        --chat--message--padding: var(--chat--spacing);
        --chat--message--border-radius: 1rem;
        --chat--message-line-height: 1;
        --chat--message--margin-bottom: 10px;
        --chat--message--bot--background: linear-gradient(
          135deg,
          #ffffff 0%,
          #f8fafc 100%
        );
        --chat--message--bot--color: #222222;
        --chat--message--bot--border: 1px solid #e2e8f0;
        --chat--message--user--background: var(--chat--color-primary);
        --chat--message--user--color: #fff;
        --chat--message--user--border: none;
        --chat--message--pre--background: #f1f5f9;
        --chat--messages-list--padding: var(--chat--spacing);

        /* Toggle Button */
        --chat--toggle--size: 52px;
        --chat--toggle--width: var(--chat--toggle--size);
        --chat--toggle--height: var(--chat--toggle--size);
        --chat--toggle--border-radius: 50%;
        --chat--toggle--background: var(--chat--gradient-button);
        --chat--toggle--hover--background: linear-gradient(
          135deg,
          #22d3ee 0%,
          #06b6d4 100%
        );
        --chat--toggle--active--background: linear-gradient(
          135deg,
          #0891b2 0%,
          #0e7490 100%
        );
        --chat--toggle--color: var(--chat--color-white);
        --chat--toggle--box-shadow: 0 8px 24px rgba(8, 145, 178, 0.35);

        /* Input Area */
        --chat--textarea--height: 40px;
        --chat--textarea--max-height: 30rem;
        --chat--input--font-size: inherit;
        --chat--input--border: 1px solid #2A7AB9;
        --chat--input--border-radius: var(--chat--border-radius);
        --chat--input--padding: 0.8rem;
        --chat--input--background: #ffffff;
        --chat--input--text-color: #222222;
        --chat--input--line-height: 1;
        --chat--input--placeholder--font-size: var(--chat--input--font-size);
        --chat--input--border-active: 1px solid #2A7AB9;
        --chat--input--left--panel--width: 2rem;

        /* Button Styles */
        --chat--button--color: var(--chat--color-white);
        --chat--button--background: var(--chat--gradient-primary);
        --chat--button--padding: calc(var(--chat--spacing) * 1 / 2)
          var(--chat--spacing);
        --chat--button--border-radius: var(--chat--border-radius);
        --chat--button--hover--color: var(--chat--color-white);
        --chat--button--hover--background: linear-gradient(
          135deg,
          #22d3ee 0%,
          #06b6d4 100%
        );
        --chat--close--button--color-hover: var(--chat--color-primary);

        /* Send and File Buttons */
        --chat--input--send--button--background: transparent;
        --chat--input--send--button--color: var(--chat--color-primary);
        --chat--input--send--button--background-hover: var(
          --chat--color-primary
        );
        --chat--input--send--button--color-hover: var(--chat--color-white);
        --chat--input--file--button--background: transparent;
        --chat--input--file--button--color: var(--chat--color-primary);
        --chat--input--file--button--background-hover: var(
          --chat--gradient-primary
        );
        --chat--input--file--button--color-hover: var(--chat--color-white);
        --chat--files-spacing: 0.25rem;

        /* Body and Footer */
        --chat--body--background: var(--chat--gradient-body);
        --chat--footer--background: #ffffff;
        --chat--footer--color: #222222;
        --chat--footer--border-top: 1px solid #e2e8f0;

      }

      /* Message container */
      .chat-message {
        max-width: 80%;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
      }

      .chat-message:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
      }

      /* Estilos adicionales para mejorar el aspecto */
      .chat-header {
        border-radius: var(--chat--border-radius) var(--chat--border-radius) 0 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .chat-message-bot {
        border-left: 1px solid var(--chat--color-primary) !important;
      }

      .chat-message-user {
        border-right: none !important;
        box-shadow: 0 4px 12px rgba(8, 145, 178, 0.25) !important;
      }

      /* Animación suave para botones */
      button {
        transition: all var(--chat--transition-duration) ease !important;
      }

      button:hover {
        transform: translateY(-1px);
      }

      button:active {
        transform: translateY(0);
      }

      .chat-powered-by {
        display: none;
      }

      .chat-get-started-footer {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .chat-footer {
        padding: 12px;
      }