:root {
      --chat-width: 450px;
      --chat-height: 620px;
      --chat-header-height: 36px;
      --chat-border-radius: 16px;
      --chat-transition-speed: 0.3s;
      --chat-header-textColor: white;
      --chat-button-right: 104px;
      --chat-button-bottom: 32px;
      --chat-color: var(--il-blue);
      --chat-color-hover: var(--il-altgeld); 
    }
    #chatbot-popup {
      display: none;
      position: fixed;
      bottom: var(--chat-button-bottom);
      right: var(--chat-button-right);
      width: var(--chat-width);
      height: var(--chat-height);
      background: transparent;
      border-radius: var(--chat-border-radius);
      box-shadow: 0 18px 40px -5px rgba(0, 0, 0, 0.2),
        0 15px 20px -5px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      opacity: 0;
      transform-origin: bottom right;
      transform: scale(0.95);
      transition: all var(--chat-transition-speed) ease-in-out;
      z-index: 2000;
    }
    #chatbot-popup.visible {
      display: block;
      opacity: 1;
      transform: scale(1);
    }
    #chatbot-header {
      background: var(--chat-color);
      padding: 16px 20px;
      height: var(--chat-header-height);
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--chat-header-textColor);
    }
    .header-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font: 600 1rem / 1.25rem var(--il-font-sans);
    }
    .header-buttons {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .icon-button {
      background: none;
      border: none;
      color: white;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--chat-transition-speed) ease;
    }
    .icon-button:hover {
      color: var(--chat-color-hover);
      background: rgba(255, 255, 255, 0.1);
    }
    .icon-button:focus {
      outline: 2px solid rgba(255, 255, 255, 0.5);
      outline-offset: 2px;
      color: var(--chat-color-hover);
    }
    #webchat {
      height: calc(100% - var(--chat-header-height) - 36px);
      background-color: #f9fafb;
      position: relative;
      font: 400 1rem / 1.25rem var(--il-font-sans);
    }
    .webchat-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.85);
      pointer-events: none;
      z-index: 1;
    }
    #webchat > div {
      position: relative;
      z-index: 2;
    }
    #webchat .webchat__basic-transcript__content {
      white-space: pre-wrap !important;
      word-break: break-word !important;
    }
    #webchat .webchat__bubble__content {
      padding: 8px 12px !important;
    }
    #webchat .webchat__bubble {
      max-width: 85% !important;
      margin: 8px !important;
    }
    #webchat .webchat__basic-transcript__content ul,
    #webchat .webchat__basic-transcript__content ol,
    #webchat .webchat__bubble__content ul,
    #webchat .webchat__bubble__content ol {
      padding-left: 24px !important;
      margin: 8px 0 !important;
      list-style-position: outside !important;
    }
    #webchat .webchat__basic-transcript__content li,
    #webchat .webchat__bubble__content li {
      margin: 4px 0 !important;
      padding-left: 4px !important;
    }
    #open-chat {
      position: fixed;
      bottom: var(--chat-button-bottom);
      right: var(--chat-button-right);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--chat-color);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transition: all var(--chat-transition-speed) ease-in-out;
      z-index: 998;
      outline: 2px white solid;
    }
    #open-chat.hidden {
      opacity: 0;
      transform: scale(0.95) translateY(10px);
      pointer-events: none;
    }
    #open-chat:hover {
      background: var(--chat-color-hover);
    }
    #open-chat:focus {
      background: var(--chat-color-hover);
      outline: 3px solid rgba(79, 70, 229, 0.5);
      outline-offset: 2px;
    }
    #open-chat svg {
      width: 28px;
      height: 28px;
      color: white;
      transition: transform 0.2s ease;
    }
    @media (max-width: 768px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
      .content-box.featured {
        grid-column: span 1;
      }
      .main-content {
        padding: 24px 16px;
      }
      .main-content h1 {
        font-size: 28px;
      }
      #chatbot-popup {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
      }
    }
    .webchat__typing-indicator {
    background-position: 0;
    background-size: cover;
    }