chatnest/dist/chat-widget.min.css

A lightweight, customizable, and responsive chat widget for modern web applications.

/* Base Variables */
:root {
    --chat-primary-color: #0084ff;
    --chat-secondary-color: #f0f2f5;
    --chat-font-size: 14px;
    --chat-width: 400px;
    --chat-height: 600px;
    --chat-toggle-size: 60px;
    --chat-border-radius: 16px;
    --chat-shadow: 0 5px 40px rgba(0,0,0,0.16);
  }
  
  /* Base Chat Widget */
  .chat-widget {
    position: fixed;
    z-index: 1000;
  }
  
  /* Chat Toggle Button */
  .chat-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: var(--chat-toggle-size);
    height: var(--chat-toggle-size);
    border-radius: 50%;
    background: var(--chat-primary-color);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  
  .chat-widget.left .chat-toggle {
    left: 20px;
    right: auto;
  }
  
  .chat-toggle:hover {
    transform: scale(1.1);
  }
  
  .chat-toggle img {
    width: calc(var(--chat-toggle-size) * 0.5);
    height: calc(var(--chat-toggle-size) * 0.5);
  }

  /* Toggle Button Animations */
  .chat-toggle.animation-1 {
    animation: pulseAnimation 2s infinite;
  }

  .chat-toggle.animation-2 {
    animation: bounceAnimation 2s infinite;
  }

  .chat-toggle.animation-3 {
    animation: shakeAnimation 3s infinite;
  }

  .chat-toggle.animation-4 {
    animation: infinityAnimation 3s infinite;
  }

  .chat-toggle.animation-5 {
    animation: rotateAnimation 4s infinite linear;
  }

  /* Keyframe Animations */
  @keyframes pulseAnimation {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }

  @keyframes bounceAnimation {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
  }

  @keyframes shakeAnimation {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
  }

  @keyframes infinityAnimation {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.2); }
  }

  @keyframes rotateAnimation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  /* Chat Window */
  .chat-window {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: var(--chat-width);
    height: var(--chat-height);
    background: white;
    border-radius: var(--chat-border-radius);
    box-shadow: var(--chat-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(20px);
    opacity: 0;
    z-index: 999;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
  }
  
  .chat-widget.left .chat-window {
    left: 20px;
    right: auto;
  }
  
  .chat-window.active {
    display: flex;
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Dark Theme */
  .chat-widget.dark {
    --chat-bg-color: #1a1a1a;
    --chat-text-color: #ffffff;
    --chat-message-bg: #2d2d2d;
    --chat-bot-message-bg: #383838;
    --chat-input-bg: #2d2d2d;
    --chat-input-border: #404040;
  }
  
  .chat-widget.dark .chat-window {
    background: var(--chat-bg-color);
    color: var(--chat-text-color);
  }
  
  .chat-widget.dark .message {
    background: var(--chat-message-bg);
    color: var(--chat-text-color);
  }
  
  .chat-widget.dark .bot-message {
    background: var(--chat-bot-message-bg);
  }
  
  .chat-widget.dark .chat-input input {
    background: var(--chat-input-bg);
    color: var(--chat-text-color);
    border-color: var(--chat-input-border);
  }
  
  /* Responsive Design */
  /* Mobile Portrait */
  @media screen and (max-width: 480px) {
    :root {
      --chat-toggle-size: 50px;
    }
  
    .chat-window {
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      border-radius: 0;
      max-height: calc(100vh - env(safe-area-inset-bottom));
    }
  
    .chat-toggle {
      bottom: 10px;
      right: 10px;
    }
  
    .chat-header {
      padding: 0.8rem;
    }
  
    .chat-messages {
      padding: 0.8rem;
    }
  
    .chat-input-container {
      padding: 0.8rem;
      padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
    }
  
    .message {
      max-width: 85%;
      padding: 0.7rem;
    }
  
    .suggestion-chips {
      padding: 0.5rem 0;
    }
  
    .chip {
      padding: 0.4rem 0.8rem;
      font-size: 0.9rem;
    }
  }
  
  /* Mobile Landscape */
  @media screen and (max-height: 500px) and (orientation: landscape) {
    .chat-window {
      height: 100vh;
      max-height: calc(100vh - 20px);
    }
  
    .chat-messages {
      flex: 1;
      max-height: calc(100vh - 180px);
    }
  
    .suggestion-chips {
      padding: 0.3rem 0;
    }
  
    .chip {
      padding: 0.3rem 0.6rem;
    }
  
    .chat-input-container {
      padding: 0.5rem;
    }
  }
  
  /* Tablet Portrait */
  @media screen and (min-width: 481px) and (max-width: 768px) {
    .chat-window {
      width: 380px;
      height: 520px;
      bottom: 80px;
      right: 10px;
    }
  
    .chat-toggle {
      bottom: 15px;
      right: 15px;
    }
  }
  
  /* Tablet Landscape */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .chat-window {
      width: 420px;
      height: 580px;
    }
  }
  
  /* Large Desktop */
  @media screen and (min-width: 1025px) {
    .chat-window {
      width: 450px;
      height: 600px;
    }
  }
  
  /* Safe Area Insets */
  @supports (padding: max(0px)) {
    .chat-window {
      padding-bottom: max(0px, env(safe-area-inset-bottom));
      /* padding-right: max(0px, env(safe-area-inset-right));
      padding-left: max(0px, env(safe-area-inset-left)); */
    }
  
    .chat-input-container {
      padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
  }
  
  /* High Contrast Mode */
  @media (prefers-contrast: high) {
    .chat-widget {
      --chat-primary-color: #000000;
      --chat-secondary-color: #ffffff;
    }
  
    .message {
      border: 2px solid #000000;
    }
  }
  
  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .chat-toggle,
    .chat-window {
      transition: none;
    }
  }
  
  /* Print Styles */
  @media print {
    .chat-widget {
      display: none;
    }
  }
  
  .chat-widget-window {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: var(--chat-width);
    height: var(--chat-height);
    background: white;
    border-radius: var(--chat-border-radius);
    box-shadow: var(--chat-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(20px);
    opacity: 0;
    z-index: 999999;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
  }
  
  .chat-widget.left .chat-widget-window {
    left: 20px;
    right: auto;
  }
  
  .chat-widget-window.active {
    display: flex;
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Dark Theme */
  .chat-widget.dark .chat-widget-window {
    background: var(--chat-bg-color);
    color: var(--chat-text-color);
  }
  
  .chat-widget.dark .chat-widget-window .message {
    background: var(--chat-message-bg);
    color: var(--chat-text-color);
  }
  
  .chat-widget.dark .chat-widget-window .bot-message {
    background: var(--chat-bot-message-bg);
  }
  
  .chat-widget.dark .chat-widget-window .chat-input input {
    background: var(--chat-input-bg);
    color: var(--chat-text-color);
    border-color: var(--chat-input-border);
  }
  
  /* Mobile view styles */
  @media screen and (max-width: 768px) {
    .chat-widget-window {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
    }

    .chat-widget-window.active {
        transform: translateY(0);
    }

    .chat-widget-header {
        position: sticky;
        top: 0;
        background: var(--chat-primary-color);
        z-index: 999999;
    }

    .chat-widget-messages {
        height: calc(100vh - 120px);
        max-height: none !important;
    }

    .chat-widget-input-container {
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 999999;
    }
  }
  
  /* Optional: Add safe area insets for modern mobile browsers */
  @supports (padding: max(0px)) {
    @media screen and (max-width: 768px) {
        .chat-widget-window {
            padding-top: max(0px, env(safe-area-inset-top));
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }
        
        .chat-widget-messages {
            height: calc(100vh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        }
    }
  }
  
  /* Base styles for chat messages */
  .chat-widget-message {
    padding: 10px 15px;
    margin: 5px 10px;
    border-radius: 15px;
    max-width: 80%;
    word-wrap: break-word;
  }
  
  /* User message specific styles */
  .chat-widget-message.user-message {
    background-color: var(--chat-primary-color);
    color: white;
    margin-left: auto;
    font-size: var(--chat-font-size, 14px); /* Use CSS variable for font size */
  }
  
  /* AI message specific styles */
  .chat-widget-message.ai-message {
    background-color: #f0f0f0;
    color: #333;
    margin-right: auto;
    font-size: var(--chat-font-size, 14px); /* Use CSS variable for font size */
  }
  
  /* Keep other elements' font sizes constant */
  .chat-widget-header {
    font-size: 16px; /* Fixed size */
  }
  
  .chat-widget-header .close-chat {
    font-size: 20px; /* Fixed size */
  }
  
  .chat-widget-input {
    font-size: 14px; /* Fixed size */
  }
  
  .chat-widget-send-button {
    font-size: 14px; /* Fixed size */
  }
  
  .chat-widget-toggle {
    font-size: 14px; /* Fixed size */
  }
  
  /* Timestamp and other metadata if any */
  .chat-widget-message-timestamp {
    font-size: 12px; /* Fixed size */
  }