/* MUUP Brand Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
    /* MUUP Brand Colors */
    --chat--color-primary: #ffc600;
    --chat--color-primary-shade-50: #e6b300;
    --chat--color-primary-shade-100: #cc9f00;
    --chat--color-secondary: #424146;
    --chat--color-secondary-shade-50: #3a3a3e;
    --chat--color-white: #ffffff;
    --chat--color-light: #f8f8f9;
    --chat--color-light-shade-50: #eeeeef;
    --chat--color-light-shade-100: #d4d4d6;
    --chat--color-medium: #bbbbc0;
    --chat--color-dark: #424146;
    --chat--color-disabled: #8b8b90;
    --chat--color-typing: #424146;
  
    /* Base Layout */
    --chat--spacing: 1rem;
    --chat--border-radius: 0.25rem;
    --chat--transition-duration: 0.15s;
    --chat--font-family: (
      'Poppins',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      sans-serif
    );
  
    /* Window Dimensions */
    --chat--window--width: 400px;
    --chat--window--height: 600px;
    --chat--window--bottom: var(--chat--spacing);
    --chat--window--right: var(--chat--spacing);
    --chat--window--z-index: 9999;
    --chat--window--border: 1px solid var(--chat--color-light-shade-50);
    --chat--window--border-radius: var(--chat--border-radius);
    --chat--window--margin-bottom: var(--chat--spacing);
  
    /* Header Styles */
    --chat--header-height: auto;
    --chat--header--padding: var(--chat--spacing);
    --chat--header--background: var(--chat--color-dark);
    --chat--header--color: var(--chat--color-white);
    --chat--header--border-top: none;
    --chat--header--border-bottom: 2px solid var(--chat--color-primary);
    --chat--header--border-left: none;
    --chat--header--border-right: none;
    --chat--heading--font-size: 1.8em;
    --chat--subtitle--font-size: inherit;
    --chat--subtitle--line-height: 1.8;
  
    /* Message Styles */
    --chat--message--font-size: 1rem;
    --chat--message--padding: var(--chat--spacing);
    --chat--message--border-radius: 12px;
    --chat--message-line-height: 1.5;
    --chat--message--margin-bottom: calc(var(--chat--spacing) * 1);
    --chat--message--bot--background: var(--chat--color-white);
    --chat--message--bot--color: var(--chat--color-dark);
    --chat--message--bot--border: 1px solid var(--chat--color-light-shade-100);
    --chat--message--user--background: var(--chat--color-primary);
    --chat--message--user--color: var(--chat--color-dark);
    --chat--message--user--border: none;
    --chat--message--pre--background: rgba(66, 65, 70, 0.05);
    --chat--messages-list--padding: var(--chat--spacing);
  
    /* Toggle Button */
    --chat--toggle--size: 64px;
    --chat--toggle--width: var(--chat--toggle--size);
    --chat--toggle--height: var(--chat--toggle--size);
    --chat--toggle--border-radius: 50%;
    --chat--toggle--background: var(--chat--color-primary);
    --chat--toggle--hover--background: var(--chat--color-primary-shade-50);
    --chat--toggle--active--background: var(--chat--color-primary-shade-100);
    --chat--toggle--color: var(--chat--color-dark);
  
    /* Input Area */
    --chat--textarea--height: 50px;
    --chat--textarea--max-height: 30rem;
    --chat--input--font-size: inherit;
    --chat--input--border: 0;
    --chat--input--border-radius: 0;
    --chat--input--padding: 0.8rem;
    --chat--input--background: var(--chat--color-white);
    --chat--input--text-color: initial;
    --chat--input--line-height: 1.5;
    --chat--input--placeholder--font-size: var(--chat--input--font-size);
    --chat--input--border-active: 0;
    --chat--input--left--panel--width: 2rem;
  
    /* Button Styles */
    --chat--button--color: var(--chat--color-dark);
    --chat--button--background: var(--chat--color-primary);
    --chat--button--padding: calc(var(--chat--spacing) * 1 / 2) var(--chat--spacing);
    --chat--button--border-radius: 8px;
    --chat--button--hover--color: var(--chat--color-dark);
    --chat--button--hover--background: var(--chat--color-primary-shade-50);
    --chat--close--button--color-hover: var(--chat--color-primary);
  
    /* Send and File Buttons */
    --chat--input--send--button--background: var(--chat--color-primary);
    --chat--input--send--button--color: var(--chat--color-dark);
    --chat--input--send--button--background-hover: var(--chat--color-primary-shade-50);
    --chat--input--send--button--color-hover: var(--chat--color-dark);
    --chat--input--file--button--background: var(--chat--color-white);
    --chat--input--file--button--color: var(--chat--color-secondary);
    --chat--input--file--button--background-hover: var(--chat--color-light-shade-50);
    --chat--input--file--button--color-hover: var(--chat--color-secondary-shade-50);
    --chat--files-spacing: 0.25rem;
  
    /* Body and Footer */
    --chat--body--background: var(--chat--color-light);
    --chat--footer--background: var(--chat--color-light);
    --chat--footer--color: var(--chat--color-dark);
  }
  
  
  /* MUUP Brand Custom Styling */

/* Apply Poppins font globally */
* {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Enhanced message styling with MUUP brand elements */
.chat-message {
    max-width: 70%;
    font-weight: 400;
    box-shadow: 0 2px 8px rgba(66, 65, 70, 0.1);
}

/* User messages with MUUP yellow */
.chat-message--user {
    background: linear-gradient(135deg, #ffc600 0%, #e6b300 100%) !important;
    color: #424146 !important;
    font-weight: 500;
    box-shadow: 0 2px 12px rgba(255, 198, 0, 0.3);
}

/* Bot messages with clean white background */
.chat-message--bot {
    background: #ffffff !important;
    border: 1px solid #eeeeef !important;
    color: #424146 !important;
}

/* Header with MUUP branding */
.chat-header {
    background: linear-gradient(135deg, #424146 0%, #3a3a3e 100%) !important;
    border-bottom: 3px solid #ffc600 !important;
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem !important;
}

.chat-header h1, .chat-header h2, .chat-header h3 {
    color: #ffffff !important;
    font-weight: 600;
    margin: 0 !important;
    flex: 1;
}

/* MUUP Logo in Header */
.chat-header::before {
    content: '';
    display: block;
    width: 120px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='477.3' height='119.59' viewBox='0 0 477.3 119.59'%3E%3Cg%3E%3Cpath d='M126.05,28.01v89.78h-19.39V34.83l5.15.36-38.31,82.6h-20.95L14.24,35.43l5.03-.48v82.84H0V28.01h31.24l36.15,79.97h-8.74L94.81,28.01h31.24Z' fill='%23fff'/%3E%3Cpath d='M160.89,78.41c0,4.79.92,8.9,2.75,12.33,1.84,3.43,4.53,6.09,8.08,7.96,3.55,1.88,7.84,2.81,12.87,2.81s9.42-.94,12.93-2.81c3.51-1.87,6.19-4.53,8.02-7.96,1.83-3.43,2.75-7.54,2.75-12.33V28.01h20.35v51.36c0,8.06-1.84,15.1-5.51,21.13-3.67,6.03-8.82,10.71-15.44,14.07-6.63,3.35-14.33,5.03-23.11,5.03s-16.46-1.68-23.04-5.03c-6.58-3.35-11.73-8.04-15.44-14.07-3.71-6.02-5.57-13.07-5.57-21.13V28.01h20.35v50.4Z' fill='%23fff'/%3E%3Cpath d='M262.4,78.41c0,4.79.92,8.9,2.75,12.33,1.84,3.43,4.53,6.09,8.08,7.96,3.55,1.88,7.84,2.81,12.87,2.81s9.41-.94,12.93-2.81c3.51-1.87,6.18-4.53,8.02-7.96,1.84-3.43,2.75-7.54,2.75-12.33V28.01h20.35v51.36c0,8.06-1.84,15.1-5.51,21.13-3.67,6.03-8.82,10.71-15.44,14.07-6.62,3.35-14.32,5.03-23.1,5.03s-16.46-1.68-23.04-5.03c-6.58-3.35-11.73-8.04-15.44-14.07-3.71-6.02-5.57-13.07-5.57-21.13V28.01h20.35v50.4Z' fill='%23fff'/%3E%3Cpath d='M424.07,42.14c-2.75-4.47-6.73-7.94-11.91-10.41-5.19-2.47-11.33-3.71-18.44-3.71h-48.96v89.78h20.35v-30.41h28.61c7.1,0,13.25-1.26,18.44-3.77,5.19-2.51,9.16-5.99,11.91-10.41,2.75-4.43,4.13-9.6,4.13-15.5s-1.38-11.09-4.13-15.56ZM403.72,67.16c-2.67,2.32-6.37,3.47-11.07,3.47h-27.53v-25.86h27.53c4.71,0,8.4,1.14,11.07,3.41,2.67,2.27,4.01,5.45,4.01,9.52s-1.34,7.14-4.01,9.46Z' fill='%23fff'/%3E%3Cpath d='M471.26,0v26.7c-.43-.34-.92-.67-1.45-.94-1.3-.71-2.73-1.05-4.25-1.05-2.19,0-4.12.47-5.77,1.43-1.66.96-2.97,2.26-3.91,3.96-.94,1.68-1.39,3.62-1.39,5.81,0,2.01.49,3.85,1.48,5.53.99,1.68,2.35,3.02,4.07,4.02,1.72,1.01,3.67,1.52,5.84,1.52s4.14-.49,5.86-1.45c1.72-.96,3.07-2.28,4.07-3.94.99-1.65,1.48-3.54,1.48-5.68V0h-6.04ZM470.56,38.58c-.47.83-1.1,1.48-1.92,1.97-.81.47-1.72.72-2.75.72s-1.97-.25-2.79-.72c-.81-.49-1.43-1.14-1.9-1.97-.45-.81-.67-1.72-.67-2.71s.22-1.9.67-2.73c.47-.81,1.09-1.48,1.9-1.97.81-.51,1.74-.76,2.79-.76s1.94.25,2.75.76c.81.49,1.45,1.16,1.92,1.97.47.83.71,1.74.71,2.73s-.23,1.9-.71,2.71Z' fill='%23ffc600'/%3E%3Cpath d='M439.79,0v26.7c-.43-.34-.92-.67-1.45-.94-1.3-.71-2.71-1.05-4.25-1.05-2.19,0-4.11.47-5.77,1.43-1.12.65-2.08,1.47-2.88,2.44,1.59,1.37,3.04,2.86,4.34,4.49.45-.78,1.07-1.43,1.84-1.9.81-.51,1.75-.76,2.8-.76s1.93.25,2.73.76c.81.49,1.45,1.16,1.92,1.97.47.83.71,1.74.71,2.73s-.24,1.9-.71,2.71c-.47.83-1.1,1.48-1.92,1.97-.69.42-1.48.65-2.35.69.8,1.77,1.45,3.64,1.95,5.53,1.27-.24,2.42-.65,3.51-1.25,1.72-.96,3.07-2.28,4.07-3.94.99-1.65,1.48-3.54,1.48-5.68V0h-6.04Z' fill='%23ffc600'/%3E%3Crect x='445.84' width='31.47' height='5.69' fill='%23ffc600'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

/* Alternative logo positioning for different n8n header structures */
.chat-header .chat-title::before,
.chat-window-header::before {
    content: '';
    display: inline-block;
    width: 100px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='477.3' height='119.59' viewBox='0 0 477.3 119.59'%3E%3Cg%3E%3Cpath d='M126.05,28.01v89.78h-19.39V34.83l5.15.36-38.31,82.6h-20.95L14.24,35.43l5.03-.48v82.84H0V28.01h31.24l36.15,79.97h-8.74L94.81,28.01h31.24Z' fill='%23fff'/%3E%3Cpath d='M160.89,78.41c0,4.79.92,8.9,2.75,12.33,1.84,3.43,4.53,6.09,8.08,7.96,3.55,1.88,7.84,2.81,12.87,2.81s9.42-.94,12.93-2.81c3.51-1.87,6.19-4.53,8.02-7.96,1.83-3.43,2.75-7.54,2.75-12.33V28.01h20.35v51.36c0,8.06-1.84,15.1-5.51,21.13-3.67,6.03-8.82,10.71-15.44,14.07-6.63,3.35-14.33,5.03-23.11,5.03s-16.46-1.68-23.04-5.03c-6.58-3.35-11.73-8.04-15.44-14.07-3.71-6.02-5.57-13.07-5.57-21.13V28.01h20.35v50.4Z' fill='%23fff'/%3E%3Cpath d='M262.4,78.41c0,4.79.92,8.9,2.75,12.33,1.84,3.43,4.53,6.09,8.08,7.96,3.55,1.88,7.84,2.81,12.87,2.81s9.41-.94,12.93-2.81c3.51-1.87,6.18-4.53,8.02-7.96,1.84-3.43,2.75-7.54,2.75-12.33V28.01h20.35v51.36c0,8.06-1.84,15.1-5.51,21.13-3.67,6.03-8.82,10.71-15.44,14.07-6.62,3.35-14.32,5.03-23.1,5.03s-16.46-1.68-23.04-5.03c-6.58-3.35-11.73-8.04-15.44-14.07-3.71-6.02-5.57-13.07-5.57-21.13V28.01h20.35v50.4Z' fill='%23fff'/%3E%3Cpath d='M424.07,42.14c-2.75-4.47-6.73-7.94-11.91-10.41-5.19-2.47-11.33-3.71-18.44-3.71h-48.96v89.78h20.35v-30.41h28.61c7.1,0,13.25-1.26,18.44-3.77,5.19-2.51,9.16-5.99,11.91-10.41,2.75-4.43,4.13-9.6,4.13-15.5s-1.38-11.09-4.13-15.56ZM403.72,67.16c-2.67,2.32-6.37,3.47-11.07,3.47h-27.53v-25.86h27.53c4.71,0,8.4,1.14,11.07,3.41,2.67,2.27,4.01,5.45,4.01,9.52s-1.34,7.14-4.01,9.46Z' fill='%23fff'/%3E%3Cpath d='M471.26,0v26.7c-.43-.34-.92-.67-1.45-.94-1.3-.71-2.73-1.05-4.25-1.05-2.19,0-4.12.47-5.77,1.43-1.66.96-2.97,2.26-3.91,3.96-.94,1.68-1.39,3.62-1.39,5.81,0,2.01.49,3.85,1.48,5.53.99,1.68,2.35,3.02,4.07,4.02,1.72,1.01,3.67,1.52,5.84,1.52s4.14-.49,5.86-1.45c1.72-.96,3.07-2.28,4.07-3.94.99-1.65,1.48-3.54,1.48-5.68V0h-6.04ZM470.56,38.58c-.47.83-1.1,1.48-1.92,1.97-.81.47-1.72.72-2.75.72s-1.97-.25-2.79-.72c-.81-.49-1.43-1.14-1.9-1.97-.45-.81-.67-1.72-.67-2.71s.22-1.9.67-2.73c.47-.81,1.09-1.48,1.9-1.97.81-.51,1.74-.76,2.79-.76s1.94.25,2.75.76c.81.49,1.45,1.16,1.92,1.97.47.83.71,1.74.71,2.73s-.23,1.9-.71,2.71Z' fill='%23ffc600'/%3E%3Cpath d='M439.79,0v26.7c-.43-.34-.92-.67-1.45-.94-1.3-.71-2.71-1.05-4.25-1.05-2.19,0-4.11.47-5.77,1.43-1.12.65-2.08,1.47-2.88,2.44,1.59,1.37,3.04,2.86,4.34,4.49.45-.78,1.07-1.43,1.84-1.9.81-.51,1.75-.76,2.8-.76s1.93.25,2.73.76c.81.49,1.45,1.16,1.92,1.97.47.83.71,1.74.71,2.73s-.24,1.9-.71,2.71c-.47.83-1.1,1.48-1.92,1.97-.69.42-1.48.65-2.35.69.8,1.77,1.45,3.64,1.95,5.53,1.27-.24,2.42-.65,3.51-1.25,1.72-.96,3.07-2.28,4.07-3.94.99-1.65,1.48-3.54,1.48-5.68V0h-6.04Z' fill='%23ffc600'/%3E%3Crect x='445.84' width='31.47' height='5.69' fill='%23ffc600'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Toggle button with MUUP styling */
.chat-toggle {
    background: linear-gradient(135deg, #ffc600 0%, #e6b300 100%) !important;
    color: #424146 !important;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(255, 198, 0, 0.4);
    border: none !important;
}

.chat-toggle:hover {
    background: linear-gradient(135deg, #e6b300 0%, #cc9f00 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 198, 0, 0.5);
}

/* Send button with MUUP yellow */
.chat-input-send-button {
    background: #ffc600 !important;
    color: #424146 !important;
    font-weight: 500;
    border-radius: 8px !important;
}

.chat-input-send-button:hover {
    background: #e6b300 !important;
}

/* Input field styling */
.chat-input {
    border: 2px solid #eeeeef !important;
    border-radius: 12px !important;
    font-weight: 400;
}

.chat-input:focus {
    border-color: #ffc600 !important;
    box-shadow: 0 0 0 3px rgba(255, 198, 0, 0.1) !important;
}

/* Scrollbar styling to match MUUP brand */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f8f8f9;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #ffc600;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #e6b300;
}

/* Responsive logo sizing */
@media (max-width: 480px) {
    .chat-header::before {
        width: 80px !important;
        height: 20px !important;
    }
    
    .chat-header .chat-title::before,
    .chat-window-header::before {
        width: 70px !important;
        height: 18px !important;
    }
}

/* Additional chat container styling for brand consistency */
.chat-container, .chat-window {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(66, 65, 70, 0.15) !important;
    overflow: hidden !important;
}

/* Subtle animations for a premium feel */
.chat-message {
    animation: slideIn 0.3s ease-out;
}

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

/* Professional typing indicator styling */
.chat-typing-indicator {
    color: #424146 !important;
    font-style: italic;
    opacity: 0.8;
}

/* Enhanced focus states for accessibility */
.chat-input:focus,
.chat-button:focus {
    outline: 2px solid #ffc600 !important;
    outline-offset: 2px !important;
}