:root {
      --color-bg: #ffffff;
      --color-text: #333333;
      --color-primary: #EE3B35;       /* Sandra’s rood */
      --color-header-bg: #EE3B35;
      --color-header-text: #ffffff;
      --color-user-bubble-bg: #FFBCBC;
      --color-user-bubble-text: #333333;
      --color-quick-bg: #FFBCBC;
      --color-quick-text: #333333;
      --color-input-border: #cccccc;
      --color-widget-bg: #fff;
      --font-size-base: 13px;
    }

    /* Toggle-button */
    #chat-toggle-button {
      position: fixed; bottom: 100px; right: 20px;
      width: 60px; height: 60px; border-radius: 50%;
      background-color: var(--color-primary);
      color: var(--color-header-text);
      border: none; font-size: 28px; cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index:1000;
    }

    /* Widget */
    #chat-widget {
      position: fixed; bottom: 170px; right: 20px;
      width: 350px; height: 650px;
      background: var(--color-widget-bg);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      display: none; flex-direction: column; overflow: hidden; z-index:999;
    }
    #chat-widget.open { display: flex; }

    /* Header */
    #chat-header {
      height: 40px; background: var(--color-header-bg);
      color: var(--color-header-text);
      display: flex; align-items: center;
      justify-content: space-between; padding: 0 10px;
      font-size: var(--font-size-base);
    }
    #header-title { font-weight: bold; }
    #chat-header button {
      background: transparent; border: none;
      color: var(--color-header-text);
      font-size: 20px; cursor: pointer; line-height:1;
    }

    /* App container */
    #widget-app {
      display: flex; flex-direction: column;
      height: calc(100% - 40px);
    }

    /* Welcome block */
    #welcome-message {
      text-align: center; padding:16px;
      background: var(--color-widget-bg);
    }
    #welcome-message img {
      width:80px; height:80px; border-radius:50%;
      margin-bottom:8px;
    }
    #welcome-message h1 {
      margin:0; font-size:1.2em; color:var(--color-primary);
    }
    #welcome-message p {
      margin:4px 0 0; font-size:var(--font-size-base);
      color:var(--color-text);
    }

    /* Chat messages */
    #chat-container {
      flex:1; overflow-y:auto; padding:12px;
      display:flex; flex-direction:column; gap:6px;
      background: var(--color-widget-bg);
    }
    .wrapper { display:flex; }
    .wrapper.user { justify-content:flex-end; }
    .wrapper.user .message {
      background: var(--color-user-bubble-bg);
      color: var(--color-user-bubble-text);
      padding:8px 12px; border-radius:16px;
      max-width:75%; font-size:var(--font-size-base);
    }
    .wrapper.bot { justify-content:flex-start; }
    .wrapper.bot .message {
      background: transparent; color: var(--color-text);
      padding:0; margin:0; max-width:80%;
      font-size:var(--font-size-base);
    }

    /* Typing indicator */
    .typing-indicator {
      display:flex; gap:4px; align-items:center; margin-top:8px;
    }
    .typing-indicator span {
      width:6px; height:6px; background:var(--color-primary);
      border-radius:50%; animation:bounce 1.2s infinite ease-in-out;
    }
    .typing-indicator span:nth-child(2){animation-delay:0.2s;}
    .typing-indicator span:nth-child(3){animation-delay:0.4s;}
    @keyframes bounce {
      0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}
    }

    /* Quick questions */
    #quick-questions {
      padding:8px 12px; display:flex; flex-wrap:wrap;
      gap:6px; justify-content:center;
      background: var(--color-widget-bg);
    }
    .quick-question {
      background:var(--color-quick-bg);
      color:var(--color-quick-text);
      border:none; border-radius:16px;
      padding:6px 10px; font-size:var(--font-size-base);
      cursor:pointer;
    }

    /* Input row */
    #input-row {
      display:flex; align-items:center;
      padding:8px 12px; background:var(--color-widget-bg);
      gap:6px;
    }
    #user-input {
      flex:1; padding:8px 10px; font-size:var(--font-size-base);
      border:1px solid var(--color-input-border);
      border-radius:16px; resize:none; overflow:hidden;
    }
    #send-button {
      background:var(--color-primary);
      color:var(--color-header-text); border:none;
      width:36px; height:36px; border-radius:50%;
      font-size:18px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }

    /* Responsive */
    @media (max-width:600px) {
      #chat-widget { width:90%; right:5%; bottom:80px; height:60vh; }
    }
    @media (min-width:601px) and (max-width:1024px) {
      #chat-widget { width:300px; }
    }