/* 
 * DRIVEBOX CHATBOT - BOLD & CREATIVE DESIGN
 * Inspired by TripBox Partners page
 * Black & White, Sharp, Daring
 */

/* ============================================
   КНОПКА ЧАТА - ПРОСТОЙ ЧЕРНЫЙ КРУГ
   ============================================ */
#simpleChatbotToggle,
.chatbot-toggle,
.chatbot-toggle-minimal {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    background: #000000 !important;
    border: none !important;
    border-radius: 50% !important; /* КРУГ! */
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 !important;
}

#simpleChatbotToggle:hover,
.chatbot-toggle:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    background: #1a1a1a !important;
}

#simpleChatbotToggle:active,
.chatbot-toggle:active {
    transform: scale(0.95) !important;
}

/* Белая иконка по центру */
#simpleChatbotToggle svg,
.chatbot-toggle svg {
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: #ffffff !important; /* БЕЛАЯ иконка */
    stroke-width: 2px !important;
}

/* Скрытие кнопки когда чат открыт */
#simpleChatbotToggle.chat-hidden,
.chatbot-toggle.chat-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: skewX(-3deg) scale(0.8) !important;
}

/* ============================================
   ОКНО ЧАТА - ДЕРЗКИЙ ДИЗАЙН
   ============================================ */
.chatbot-widget,
#simpleChatbotWidget {
    position: fixed !important;
    bottom: 100px !important;
    right: 24px !important;
    width: 400px !important;
    height: 600px !important;
    background: #ffffff !important;
    border: 4px solid #000000 !important;
    border-radius: 0 !important; /* Острые углы! */
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.15) !important;
    z-index: 99998 !important;
    display: none !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: chatSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.chatbot-widget.active,
#simpleChatbotWidget.active {
    display: flex !important;
}

@keyframes chatSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   ХЕДЕР ЧАТА - ЧЕРНЫЙ С БЕЛЫМ ТЕКСТОМ
   ============================================ */
.chatbot-header {
    background: #000000 !important;
    border-bottom: 4px solid #000000 !important;
    border-radius: 0 !important; /* УБИРАЕМ округление - острые углы! */
    color: #ffffff !important;
    padding: 20px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 70px !important;
    position: relative !important;
}

.chatbot-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 24px !important;
    right: 24px !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #ffffff 50%, transparent) !important;
}

.chatbot-header-info {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
}

.chatbot-avatar {
    width: 40px !important;
    height: 40px !important;
    background: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important; /* Квадрат */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: skewX(-5deg) !important; /* Наклон */
    overflow: hidden !important;
}

.chatbot-avatar svg,
.chatbot-avatar img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

.chatbot-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.chatbot-subtitle {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin: 4px 0 0 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
}

/* Кнопка закрытия - ДЕРЗКАЯ */
.chatbot-close,
#simpleChatbotClose {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
}

.chatbot-close:hover,
#simpleChatbotClose:hover {
    background: #ffffff !important;
    transform: rotate(90deg) !important;
}

.chatbot-close:hover svg path,
#simpleChatbotClose:hover svg path {
    fill: #000000 !important;
}

.chatbot-close svg,
#simpleChatbotClose svg {
    width: 18px !important;
    height: 18px !important;
}

.chatbot-close svg path,
#simpleChatbotClose svg path {
    fill: #ffffff !important;
}

/* ============================================
   ОБЛАСТЬ СООБЩЕНИЙ
   ============================================ */
.chatbot-messages,
#simpleChatbotMessages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Custom Scrollbar - ДЕРЗКИЙ */
.chatbot-messages::-webkit-scrollbar {
    width: 6px !important;
}

.chatbot-messages::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: #000000 !important;
    border-radius: 0 !important;
}

.chatbot-messages::-webkit-scrollbar-thumb:hover {
    background: #333333 !important;
}

/* ============================================
   СООБЩЕНИЯ - ДЕРЗКИЙ СТИЛЬ
   ============================================ */
.chatbot-message {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    animation: messageSlideIn 0.3s ease !important;
}

.chatbot-message--user {
    flex-direction: row-reverse !important;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.chatbot-message--user {
    animation-name: messageSlideInRight;
}

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

/* Аватар сообщения */
.chatbot-message-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 !important; /* Квадрат */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 2px solid #000000 !important;
}

.chatbot-message--bot .chatbot-message-avatar {
    background: #ffffff !important;
    transform: skewX(-5deg) !important;
}

.chatbot-message--user .chatbot-message-avatar {
    background: #000000 !important;
    transform: skewX(5deg) !important;
}

.chatbot-message-avatar img,
.chatbot-message-avatar svg {
    width: 18px !important;
    height: 18px !important;
}

.chatbot-message--user .chatbot-message-avatar svg path {
    stroke: #ffffff !important;
}

/* Контент сообщения - ДЕРЗКИЙ СТИЛЬ */
.chatbot-message-content {
    max-width: 75% !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border-radius: 0 !important; /* Острые углы */
    position: relative !important;
}

/* Сообщения бота - белые с ЧЕРНОЙ ЛЕВОЙ ГРАНИЦЕЙ */
.chatbot-message--bot .chatbot-message-content {
    background: #fafafa !important;
    color: #000000 !important;
    border-left: 4px solid #000000 !important;
    border-top: 1px solid #e5e5e5 !important;
    border-right: 1px solid #e5e5e5 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* Сообщения пользователя - ЧЕРНЫЕ */
.chatbot-message--user .chatbot-message-content {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    font-weight: 500 !important;
}

/* ============================================
   TYPING INDICATOR - ДЕРЗКИЙ
   ============================================ */
.chatbot-typing,
#simpleChatbotTyping {
    display: none !important; /* По умолчанию СКРЫТ */
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 24px !important;
    color: #000000 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

/* Показываем только когда нужно */
.chatbot-typing.active,
#simpleChatbotTyping.active {
    display: flex !important;
}

.chatbot-typing-dots {
    display: flex !important;
    gap: 6px !important;
}

.chatbot-typing-dots span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 0 !important; /* Квадраты вместо кругов */
    background: #000000 !important;
    animation: typingBold 1.2s infinite ease-in-out !important;
}

.chatbot-typing-dots span:nth-child(1) {
    animation-delay: -0.32s !important;
}

.chatbot-typing-dots span:nth-child(2) {
    animation-delay: -0.16s !important;
}

@keyframes typingBold {
    0%, 80%, 100% {
        transform: scale(0.8) skewX(-5deg);
        opacity: 0.4;
    }
    40% {
        transform: scale(1.2) skewX(5deg);
        opacity: 1;
    }
}

/* ============================================
   INPUT AREA - БЕЗ ЗУМА НА МОБИЛЬНЫХ!
   ============================================ */
.chatbot-input-area,
#chatbotInputArea {
    padding: 20px 24px !important;
    background: #fafafa !important;
    border-top: 4px solid #000000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 80px !important;
    position: relative !important;
}

.chatbot-input-wrapper {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important; /* Острые углы */
    padding: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.chatbot-input-wrapper:focus-within {
    transform: translateX(-2px) translateY(-2px) !important;
    box-shadow: 4px 4px 0 #000000 !important;
}

/* INPUT - КРИТИЧНО: 16px для iOS чтобы не зумил! */
.chatbot-input,
#simpleChatbotInput {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 16px !important; /* ⚠️ КРИТИЧНО: 16px = НЕТ ЗУМА на iOS! */
    line-height: 1.5 !important;
    padding: 14px 18px !important;
    resize: none !important;
    max-height: 100px !important;
    color: #000000 !important;
    font-weight: 400 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.chatbot-input::placeholder {
    color: #999999 !important;
    font-weight: 400 !important;
}

/* КНОПКА ОТПРАВКИ - ЧЕРНЫЙ КВАДРАТ */
.chatbot-send,
#simpleChatbotSend {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    background: #000000 !important;
    border: none !important;
    border-left: 3px solid #000000 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

.chatbot-send:hover {
    background: #1a1a1a !important;
    transform: scale(1.05) !important;
}

.chatbot-send:active {
    transform: scale(0.95) !important;
}

.chatbot-send:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #666666 !important;
}

.chatbot-send svg {
    width: 18px !important;
    height: 18px !important;
}

.chatbot-send svg path {
    stroke: #ffffff !important;
    stroke-width: 2.5px !important;
}

/* ============================================
   WELCOME FORM - ДЕРЗКИЙ СТИЛЬ
   ============================================ */
.chatbot-welcome-form {
    padding: 0 !important;
    background: #fafafa !important;
    margin: 0 !important;
    min-height: 400px !important;
    border-top: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
}

.chatbot-welcome-form-content {
    padding: 40px 32px 50px 32px !important; /* Увеличен padding-bottom для кнопки */
    background: #fafafa !important;
}

.chatbot-welcome-title {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #000000 !important;
    margin: 0 0 12px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    text-align: center !important;
}

.chatbot-welcome-subtitle {
    font-size: 14px !important;
    color: #666666 !important;
    margin: 0 0 32px 0 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

.chatbot-client-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.chatbot-form-group {
    position: relative !important;
}

/* FORM INPUTS - 16px БЕЗ ЗУМА! */
.chatbot-client-form input {
    width: 100% !important;
    padding: 16px 18px !important;
    border: 3px solid #000000 !important;
    border-radius: 0 !important; /* Острые углы */
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 16px !important; /* ⚠️ КРИТИЧНО: 16px = НЕТ ЗУМА! */
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.chatbot-client-form input:focus {
    outline: none !important;
    transform: translateX(-3px) translateY(-3px) !important;
    box-shadow: 5px 5px 0 #000000 !important;
    background: #ffffff !important;
}

.chatbot-client-form input::placeholder {
    color: #999999 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

/* КНОПКА SUBMIT - С БЕЛЫМ БЛОКОМ ПО ЦЕНТРУ! */
.chatbot-form-submit {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    padding: 0 !important;
    margin: 10px !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 4px solid #ffffff !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
    position: absolute !important;
    right: 0 !important;
    bottom: -20px !important; /* Опускаем вниз на 20px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    font-size: 0 !important; /* Убираем текст */
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2) !important;
    transform: skewX(-3deg) !important; /* Наклон как у кнопки чата */
    overflow: visible !important;
}

/* БЕЛЫЙ БЛОК ПО ЦЕНТРУ кнопки */
.chatbot-form-submit::before {
    content: '' !important;
    position: absolute !important;
    width: 36px !important;
    height: 36px !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    transform: skewX(3deg) !important; /* Компенсируем наклон */
    z-index: 0 !important;
    transition: all 0.3s ease !important;
}

/* СТРЕЛКА поверх белого блока */
.chatbot-form-submit::after {
    content: '→' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) skewX(3deg) !important; /* Компенсируем наклон */
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #000000 !important; /* ЧЕРНАЯ стрелка на белом блоке */
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

.chatbot-form-submit:hover {
    background: #1a1a1a !important;
    transform: skewX(-3deg) translateY(-3px) !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3) !important;
    border-width: 5px !important;
}

.chatbot-form-submit:hover::after {
    transform: translate(-50%, -50%) skewX(3deg) scale(1.15) !important;
}

.chatbot-form-submit:active {
    transform: skewX(-3deg) translateY(-1px) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Форма с отступом справа для кнопки и центрированием */
.chatbot-client-form {
    position: relative !important;
    padding-right: 80px !important; /* Место для кнопки-стрелки */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Все поля ввода по центру */
.chatbot-form-group {
    width: 100% !important;
    max-width: 100% !important;
}

.chatbot-privacy-text {
    font-size: 11px !important;
    color: #999999 !important;
    margin: 20px 0 0 0 !important;
    text-align: center !important;
    line-height: 1.5 !important;
}

/* ============================================
   МОБИЛЬНЫЕ СТИЛИ - БЕЗ ЗУМА!
   ============================================ */
@media (max-width: 768px) {
    /* Полноэкранный чат на мобильных */
    .chatbot-widget,
    #simpleChatbotWidget {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        top: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Кнопка чата на мобильных - простой круг */
    #simpleChatbotToggle,
    .chatbot-toggle {
        bottom: 16px !important;
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
    }
    
    #simpleChatbotToggle svg,
    .chatbot-toggle svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #ffffff !important;
    }
    
    /* Input area на мобильных */
    .chatbot-input-area,
    #chatbotInputArea {
        padding: 16px !important;
        border-top-width: 3px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    
    /* КРИТИЧНО: Input 16px БЕЗ ЗУМА */
    .chatbot-input,
    #simpleChatbotInput {
        font-size: 16px !important; /* НЕТ ЗУМА */
        padding: 12px 16px !important;
    }
    
    /* Кнопка отправки на мобильных */
    .chatbot-send,
    #simpleChatbotSend {
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Form inputs БЕЗ ЗУМА */
    .chatbot-client-form input {
        font-size: 16px !important; /* НЕТ ЗУМА */
        padding: 14px 16px !important;
    }
    
    /* Кнопка-стрелка submit на мобильных */
    .chatbot-form-submit {
        width: 56px !important;
        height: 56px !important;
        border-width: 3px !important;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
        bottom: -16px !important; /* Чуть ниже на мобильных */
    }
    
    .chatbot-form-submit::before {
        width: 32px !important;
        height: 32px !important;
    }
    
    .chatbot-form-submit::after {
        font-size: 22px !important;
    }
    
    /* Форма с меньшим отступом */
    .chatbot-client-form {
        padding-right: 66px !important;
        padding-bottom: 20px !important; /* Отступ снизу для кнопки */
    }
}

@media (max-width: 480px) {
    #simpleChatbotToggle,
    .chatbot-toggle {
        bottom: 12px !important;
        right: 12px !important;
        width: 52px !important;
        height: 52px !important;
    }
}

/* ============================================
   АНТИ-ЗУМ PROTECTION
   ============================================ */

/* Когда чат открыт, БЛОКИРУЕМ зум на iOS */
body.chatbot-open {
    touch-action: pan-y !important; /* Разрешаем только вертикальный скролл */
}

/* Все input элементы в чатботе - 16px минимум */
.chatbot-widget input,
.chatbot-widget textarea,
.chatbot-input,
#simpleChatbotInput,
.chatbot-client-form input {
    font-size: 16px !important; /* МИНИМУМ 16px чтобы iOS не зумил */
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* ============================================
   QUICK ACTIONS - ДЕРЗКИЕ КНОПКИ
   ============================================ */
.chatbot-quick-actions {
    padding: 0 24px 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.chatbot-quick-btn {
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.chatbot-quick-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

.chatbot-quick-btn:active {
    transform: translateY(0) !important;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ ЭЛЕМЕНТЫ
   ============================================ */

/* Welcome message - если используется */
.chatbot-welcome {
    text-align: center !important;
    padding: 32px 24px !important;
    background: #fafafa !important;
    margin: 0 !important;
    border-top: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
}

.chatbot-welcome-icon {
    width: 60px !important;
    height: 60px !important;
    background: #000000 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px !important;
    transform: skewX(-5deg) !important;
}

.chatbot-welcome-icon svg {
    width: 28px !important;
    height: 28px !important;
}

.chatbot-welcome-icon svg path {
    stroke: #ffffff !important;
}

/* ============================================
   SHAKE ANIMATION для ошибок
   ============================================ */
@keyframes shakeInput {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateX(8px); }
}

.chatbot-input-error {
    animation: shakeInput 0.5s ease !important;
    border-color: #dc2626 !important;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .chatbot-widget,
    .chatbot-toggle,
    #simpleChatbotWidget,
    #simpleChatbotToggle {
        display: none !important;
    }
}