/* DESKTOP CSS for the ai chat feature */
    .ai-button {
      position: fixed;
      bottom: 2.5em;
      right: 2.5em;
      width: 80px;
      height: 80px;
      border-radius: 16px;
      background: var(--gold-gradient);
      border: 2px solid black;
      padding: 0;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .ai-button img {
      width: 80%;
      height: 80%;
      object-fit: contain;
      z-index: 2;
    }

    .ai-button::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(135deg, rgba(255,255,255,0.0) 30%, rgba(255, 255, 255, 0.623) 50%, rgba(255,255,255,0.0) 70%);
      transform: translateX(-100%) rotate(25deg);
      transition: none;
      z-index: 1;
      pointer-events: none;
    }

    .ai-button:hover::before {
      animation: shine 1s forwards;
    }

    @keyframes shine {
      from { transform: translateX(-100%) rotate(25deg); }
      to   { transform: translateX(100%) rotate(25deg); }
    }

    .ai-button:active {
      transform: translateY(2px);
      box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    #chatOverlay {
      display: none;
      position: fixed;
      inset: 0;
      background: transparent;
      z-index: 998;
    }

    #chatOverlay.visible {
      display: block;
    }

    #chatWindow {
      position: fixed;
      bottom: 7.3em;
      right: 2em;
      width: 23em;
      height: 30em;
      background-color: #2b2b2b;
      color: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
      display: none;
      flex-direction: column;
      overflow: hidden;
      z-index: 999;
    }

    #chatWindow.visible {
      display: flex;
    }

    #chatHeader {
      background-color: #202020;
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      font-size: 1rem;
    }

    #chatMessages {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
      font-size: 0.9rem;
    }

    #chatInput {
      display: none;
      border-top: 1px solid #444;
      background-color: #1a1a1a;
      padding: 8px;
    }

    #chatInput input {
      width: -webkit-fill-available;
      padding: 8px;
      background: #2b2b2b;
      color: white;
      border: none;
      border-radius: 6px;
    }

    .chat-closeBtn {
      background: none;
      border: none;
      color: #ccc;
      font-size: 1.2rem;
      cursor: pointer;
    }

    .chat-closeBtn:hover {
      color: #fff;
    }

    @media (max-width: 600px) {
      #chatWindow {
        width: 90%;
        right: 5%;
      }
    }

    .message {
      margin-bottom: 10px;
    }

    .user {
      text-align: right;
      color: white;
    }

    .assistant {
      text-align: left;
      color: #fbb63f;
    }