/* Safira AI chatbot (moved out of index.html for the Orisa redesign) */
    /* Chatbot Container */
    .chatbot-container {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 9999;
      font-family: 'Jost', sans-serif;
    }

    /* Chat Button */
    .chatbot-button {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      z-index: 1000;
    }

    /* Dropdown Menu */


    .chatbot-button:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    }

    .chatbot-button::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, #ff6b6b, #6e8efb, #a777e3, #6e8efb);
      z-index: -1;
      border-radius: 50%;
      background-size: 400%;
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .chatbot-button:hover::before {
      opacity: 1;
    }

    @keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
    }

    .chatbot-button i {
      font-size: 28px;
      color: white;
      transition: transform 0.3s ease;
    }

    .chatbot-button.active i {
      transform: rotate(360deg);
    }

    .chatbot-notification {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 22px;
      height: 22px;
      background: #ff6b6b;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
      font-weight: bold;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
      70% { box-shadow: 0 0 0 10px rgba(255, 107, 107, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    }

    /* Chat Window */
    .chatbot-window {
      position: absolute;
      bottom: 90px;
      right: 0;
      width: 380px;
      max-width: 90vw;
      height: 500px;
      max-height: 70vh;
      background: white;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      display: none;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(20px) scale(0.9);
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 999;
    }

    .chatbot-window.active {
      display: flex;
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* Chat Header */
    .chatbot-header {
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      padding: 15px 20px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .chatbot-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(255, 255, 255, 0.2);
    }

    .chatbot-header-info {
      display: flex;
      align-items: center;
    }

    .chatbot-avatar {
      width: 40px;
      height: 40px;
      background: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    .chatbot-avatar::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: conic-gradient(
              #6e8efb,
              #a777e3,
              #ff6b6b,
              #6e8efb
      );
      border-radius: 50%;
      animation: rotate 3s linear infinite;
      z-index: 0;
    }

    .chatbot-avatar img {
      width: 75%;
      height: 75%;
      object-fit: contain;
      z-index: 1;
      position: relative;
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .chatbot-title {
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
    }

    .online-indicator {
      width: 7px;
      height: 7px;
      background: #4cd964;
      border-radius: 50%;
      margin-left: 6px;
      position: relative;
    }

    .online-indicator::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #4cd964;
      border-radius: 50%;
      animation: pulse-online 2s infinite;
      opacity: 0.6;
    }

    @keyframes pulse-online {
      0% { transform: scale(1); opacity: 0.6; }
      70% { transform: scale(2.5); opacity: 0; }
      100% { transform: scale(2.5); opacity: 0; }
    }

    .chatbot-subtitle {
      font-size: 11px;
      opacity: 0.8;
      margin-top: 2px;
    }

    .chatbot-close {
      background: transparent;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .chatbot-close:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Chat Body */
    .chatbot-body {
      flex: 1;
      padding: 15px;
      overflow-y: auto;
      background: #f8f9fa;
      display: flex;
      flex-direction: column;
      gap: 12px;
      scroll-behavior: smooth;
    }

    /* Custom scrollbar for chat body */
    .chatbot-body::-webkit-scrollbar {
      width: 5px;
    }

    .chatbot-body::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8px;
    }

    .chatbot-body::-webkit-scrollbar-thumb {
      background: rgba(110, 142, 251, 0.5);
      border-radius: 8px;
    }

    .chatbot-body::-webkit-scrollbar-thumb:hover {
      background: rgba(110, 142, 251, 0.7);
    }

    .message {
      max-width: 85%;
      padding: 10px 14px;
      border-radius: 16px;
      animation: fadeIn 0.3s ease;
      position: relative;
      line-height: 1.4;
      word-wrap: break-word;
      font-size: 14px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .bot-message {
      background: white;
      border-top-left-radius: 5px;
      align-self: flex-start;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .user-message {
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      color: white;
      border-top-right-radius: 5px;
      align-self: flex-end;
    }

    .message-time {
      font-size: 9px;
      opacity: 0.7;
      margin-top: 4px;
      text-align: right;
    }

    .typing-indicator {
      display: flex;
      align-items: center;
      background: white;
      padding: 10px 14px;
      border-radius: 16px;
      border-top-left-radius: 5px;
      align-self: flex-start;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      width: fit-content;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .typing-dot {
      width: 6px;
      height: 6px;
      background: #a777e3;
      border-radius: 50%;
      margin: 0 2px;
      animation: typingAnimation 1.4s infinite ease-in-out;
    }

    .typing-dot:nth-child(1) { animation-delay: 0s; }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typingAnimation {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-4px); }
    }

    /* Options */
    .options-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .option-button {
      background: rgba(110, 142, 251, 0.1);
      border: 1px solid rgba(110, 142, 251, 0.3);
      border-radius: 14px;
      padding: 6px 12px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: #6e8efb;
    }

    .option-button:hover {
      background: rgba(110, 142, 251, 0.2);
      transform: translateY(-2px);
      box-shadow: 0 3px 6px rgba(110, 142, 251, 0.2);
    }

    /* Input Area */
    .chatbot-input-area {
      padding: 12px;
      background: white;
      border-top: 1px solid #eee;
      display: flex;
      align-items: center;
      position: relative;
    }

    .chatbot-input {
      flex: 1;
      border: 1px solid #eee;
      border-radius: 18px;
      padding: 10px 40px 10px 15px;
      outline: none;
      transition: all 0.3s ease;
      font-family: 'Jost', sans-serif;
      font-size: 14px;
    }

    .chatbot-input:focus {
      border-color: #6e8efb;
      box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2);
    }

    .voice-input {
      position: absolute;
      right: 65px;
      background: transparent;
      border: none;
      color: #6e8efb;
      cursor: pointer;
      font-size: 16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .voice-input:hover {
      background: rgba(110, 142, 251, 0.1);
    }

    .voice-input.listening {
      color: #ff6b6b;
      animation: pulse-voice 1.5s infinite;
    }

    @keyframes pulse-voice {
      0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4); }
      70% { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
    }

    .chatbot-send {
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-left: 8px;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      font-size: 14px;
    }

    .chatbot-send:hover {
      transform: rotate(15deg) scale(1.05);
      box-shadow: 0 4px 12px rgba(110, 142, 251, 0.4);
    }

    /* Form Elements */
    .form-input {
      width: 100%;
      border: 1px solid #eee;
      border-radius: 8px;
      padding: 10px 12px;
      margin-top: 8px;
      outline: none;
      transition: all 0.3s ease;
      font-family: 'Jost', sans-serif;
      font-size: 14px;
    }

    .form-input:focus {
      border-color: #6e8efb;
      box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2);
    }

    .form-submit {
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      border: none;
      border-radius: 8px;
      padding: 10px 16px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      margin-top: 12px;
      transition: all 0.3s ease;
      font-size: 14px;
    }

    .form-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(110, 142, 251, 0.4);
    }

    /* Voice feedback element */
    .voice-feedback {
      position: absolute;
      bottom: 60px;
      left: 0;
      right: 0;
      padding: 8px 12px;
      background: rgba(110, 142, 251, 0.9);
      color: white;
      text-align: center;
      display: none;
      font-size: 13px;
    }

    /* Responsive */
    @media (max-width: 576px) {
      .chatbot-container {
        bottom: 15px;
        right: 15px;
      }

      .chatbot-button {
        width: 55px;
        height: 55px;
      }

      .chatbot-button i {
        font-size: 22px;
      }

      .chatbot-window {
        width: calc(100vw - 30px);
        right: 0;
        bottom: 70px;
        height: 60vh;
        border-radius: 14px;
      }

      .chatbot-header {
        padding: 12px 15px;
      }

      .chatbot-avatar {
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }

      .chatbot-title {
        font-size: 15px;
      }

      .chatbot-subtitle {
        font-size: 10px;
      }

      .message {
        max-width: 90%;
        padding: 8px 12px;
        font-size: 13px;
      }

      .chatbot-body {
        padding: 12px;
        gap: 10px;
      }

      .chatbot-input-area {
        padding: 10px;
      }

      .voice-input {
        right: 55px;
        width: 32px;
        height: 32px;
        font-size: 14px;
      }

      .chatbot-send {
        width: 36px;
        height: 36px;
        font-size: 13px;
      }
    }

    /* Animation for new messages */
    @keyframes messageSlideIn {
      from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .message {
      animation: messageSlideIn 0.3s ease forwards;
    }

    /* Readable in both site themes: the Orisa theme sets light text in dark mode,
       so the chat sets its own colours instead of inheriting them. */
    .chatbot-window { color: #1d1d1f; }
    .bot-message, .typing-indicator { color: #1d1d1f; }
    .chatbot-input { background: #fff; color: #1d1d1f; }
    .chatbot-input::placeholder { color: #8a8a93; }

    [data-bs-theme=dark] .chatbot-window { background: #151518; color: #ececf1; border: 1px solid rgba(255,255,255,.08); }
    [data-bs-theme=dark] .chatbot-body { background: #0f0f12; }
    [data-bs-theme=dark] .bot-message,
    [data-bs-theme=dark] .typing-indicator { background: #222228; color: #ececf1; border-color: rgba(255,255,255,.08); box-shadow: none; }
    [data-bs-theme=dark] .message-time { color: inherit; }
    [data-bs-theme=dark] .option-button { background: rgba(110,142,251,.16); border-color: rgba(110,142,251,.45); color: #b9c6ff; }
    [data-bs-theme=dark] .chatbot-input-area { background: #151518; border-top-color: rgba(255,255,255,.08); }
    [data-bs-theme=dark] .chatbot-input { background: #222228; color: #ececf1; border-color: rgba(255,255,255,.12); }
    [data-bs-theme=dark] .chatbot-input::placeholder { color: #9a9aa5; }