/* Подключение стилей и шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Gilroy:wght@400;500;700&display=swap');

:root {
  --chat--color--primary: #6EC1E4;
  --chat--color--primary-shade-50: #5ab8dc;
  --chat--color--primary--shade-100: #46aed5;
  --chat--color--secondary: #61CE70;
  --chat--color-secondary-shade-50: #4ec55f;
  --chat--color-white: #ffffff;
  --chat--color-light: #f8f9fa;
  --chat--color-dark: #161616;
  --chat--color-text: #7A7A7A;
  --chat--color-disabled: #54595F;

  --chat--header--background: rgb(28, 48, 68);
  --chat--toggle--background: rgb(28, 48, 68);
  --chat--toggle--hover--background: rgb(20, 38, 58);
  --chat--toggle--active--background: rgb(15, 30, 48);
  --chat--toggle--color: white;

  --chat--font-family: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --chat--window--width: 380px;
  --chat--window--height: 600px;
  --chat--message--font-size: 15px;
  --chat--heading--font-size: 20px;
}

#n8n-chat, #n8n-chat * {
  font-family: var(--chat--font-family) !important;
}

/* Пульсация иконки */
.chat-toggle {
    animation: chatPulse 2s infinite !important;
    box-shadow: 0 4px 12px rgba(110, 193, 228, 0.4) !important;
}

@keyframes chatPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Облачко уведомления */
#chat-notification {
    position: fixed;
    bottom: 95px;
    right: 20px;
    background: rgb(28, 48, 68);
    color: #6EC1E4;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 9999;
    cursor: pointer;
    display: none;
    animation: chatSlideIn 0.3s ease-out;
}

#chat-notification::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 25px;
    border-width: 8px 8px 0;
    border-style: solid;
    border-color: rgb(28, 48, 68) transparent transparent;
}

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

/* Оформление шапки */
.chat-header {
    background: var(--chat--header--background) !important;
    padding: 12px !important;
    display: flex !important;
    gap: 12px !important;
}

.chat-header h1 {
    color: white !important;
    font-weight: 700 !important;
    font-size: var(--chat--heading--font-size) !important;
    margin: 0 !important;
    align-self: flex-end;
}

.chat-logo {
    height: 22px !important;
    width: auto !important;
    margin-right: 4px !important;
}

/* Мобильная адаптация */
@media (max-width: 480px) {
    .chat-input {
        display: flex !important;
        align-items: flex-end !important;
        padding: 8px !important;
    }
    .chat-input textarea {
        font-size: 15px !important;
        padding: 8px 12px !important;
    }
}