:root {
    --cw-header-background-color: #3d4d55;
    --cw-header-text-color: #fff;
    --cw-user-message-bg-color: #BBDEFB;
    --cw-ai-reply-bg-color: #f5f5f5;
    --cw-chat-window-height: 605px;
    --cw-chat-window-width: 450px;
    --cw-chat-window-right-offset: 20px;
    --cw-widget-button-text-color: #000;
    --cw-widget-button-bg-color: #b9db11;
    --cw-widget-font-family: Roboto, sans-serif;
    --cw-widget-font-size: 14px;
}

/* --- Chat widget responsive overrides --- */

/* Global safety caps (apply everywhere) */
#current-wave-ai-chat-widget-container #chat-widget {
  max-width: 100vw;
  max-height: 90dvh; /* dynamic viewport unit handles mobile browser UI */
}

/* Phones */
@media (max-width: 480px) {
  :root {
    /* Make the popup fit the phone and leave small margins */
    --cw-chat-window-width: 92vw;
    --cw-chat-window-height: 78dvh;

    /* Reduce right offset so the bubble isn't pushed off-screen */
    --cw-chat-window-right-offset: 12px;

    /* Slightly larger base font for readability on small screens */
    --cw-widget-font-size: 15px;
  }
}

/* Small tablets / large phones in landscape */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --cw-chat-window-width: min(96vw, 520px);
    --cw-chat-window-height: 82dvh;
    --cw-chat-window-right-offset: 16px;
  }
}