/* ============================================================ ShuyaTextil Chat Widget — Right Drawer ============================================================ */ /* Root: нулевой размер, фиксируется к viewport (прямой дочерний ) */ #chat-widget-root { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 10000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; } /* ---- FAB-кнопка ---- */ .chat-bubble { position: fixed; bottom: 100px; right: 30px; z-index: 10003; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary, #0472a1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(4, 114, 161, 0.45); transition: transform .2s ease, box-shadow .2s ease; user-select: none; animation: chatFabPulse 3s ease-in-out infinite; } .chat-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(4, 114, 161, 0.6); } .chat-bubble svg { width: 28px; height: 28px; fill: #fff; pointer-events: none; } @keyframes chatFabPulse { 0%, 100% { box-shadow: 0 4px 16px rgba(4,114,161,.45); } 50% { box-shadow: 0 4px 28px rgba(4,114,161,.7); } } .chat-bubble-badge { position: absolute; top: -4px; right: -4px; background: #e74c3c; color: #fff; border-radius: 50%; min-width: 20px; height: 20px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; } /* ---- Шкторка (drawer) ---- */ .chat-window { position: fixed; top: 0; right: 0; width: 400px; height: 100vh; height: 100dvh; z-index: 10002; background: #fff; box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; /* Начальное состояние: скрыта за правым краем */ transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; /* Блокируем взаимодействие пока шкторка закрыта */ pointer-events: none; } .chat-window.visible { transform: translateX(0); pointer-events: auto; } /* ---- Шапка ---- */ .chat-header { background: var(--color-primary, #0472a1); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .chat-header-title { flex: 1; font-weight: 600; font-size: 15px; } .chat-header-status { font-size: 12px; opacity: .85; } .chat-close-btn { background: none; border: none; color: #fff; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .8; font-size: 18px; transition: background .2s, opacity .2s; flex-shrink: 0; } .chat-close-btn:hover { opacity: 1; background: rgba(255,255,255,.15); } /* Индикатор загрузки */ .chat-loading-indicator { text-align: center; color: #aaa; padding: 32px 0; font-size: 14px; } /* ---- Лента сообщений ---- */ .chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overscroll-behavior: contain; } .chat-msg { display: flex; flex-direction: column; max-width: 78%; } .chat-msg.from-me { align-self: flex-end; align-items: flex-end; } .chat-msg.from-other { align-self: flex-start; align-items: flex-start; } .chat-msg.system-msg { align-self: center; max-width: 90%; font-size: 12px; color: #999; font-style: italic; } .chat-bubble-msg { padding: 9px 13px; border-radius: 16px; line-height: 1.5; word-break: break-word; white-space: pre-line; } .from-me .chat-bubble-msg { background: var(--color-primary, #0472a1); color: #fff; border-bottom-right-radius: 4px; } .from-other .chat-bubble-msg { background: #f0f2f5; color: #222; border-bottom-left-radius: 4px; } .chat-msg-time { font-size: 11px; color: #aaa; margin-top: 3px; padding: 0 4px; } /* Вложения */ .chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .chat-attach-img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid #e5e7eb; } .chat-attach-file { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6; font-size: 12px; color: var(--color-primary, #0472a1); text-decoration: none; } .chat-attach-file:hover { background: #e9f0fc; } /* Typing indicator */ .chat-typing { font-size: 12px; color: #888; padding: 0 16px 8px; font-style: italic; flex-shrink: 0; } .chat-typing-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #aaa; margin: 0 1px; animation: typingBounce .8s infinite ease; } .chat-typing-dot:nth-child(2) { animation-delay: .15s; } .chat-typing-dot:nth-child(3) { animation-delay: .3s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } } /* ---- Поле ввода ---- */ .chat-input-area { border-top: 1px solid #e9ecef; padding: 12px; flex-shrink: 0; background: #fff; } .chat-upload-previews { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .chat-upload-preview-item { position: relative; display: inline-flex; } .chat-upload-preview-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid #dee2e6; } .chat-upload-preview-item .remove-btn { position: absolute; top: -6px; right: -6px; background: #e74c3c; color: #fff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .chat-file-preview-item { display: flex; align-items: center; gap: 4px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 4px 8px; font-size: 12px; } .chat-file-preview-item .remove-btn { background: none; border: none; color: #dc3545; cursor: pointer; font-size: 14px; padding: 0 2px; } .chat-input-row { display: flex; align-items: flex-end; gap: 8px; } .chat-textarea { flex: 1; border: 1px solid #dee2e6; border-radius: 12px; padding: 10px 14px; font-size: 15px; line-height: 1.5; resize: none; min-height: 48px; max-height: 140px; overflow-y: auto; outline: none; font-family: inherit; background: #f8f9fa; transition: border-color .2s, background .2s; } .chat-textarea:focus { border-color: var(--color-primary, #0472a1); background: #fff; } .chat-attach-btn, .chat-send-btn { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; } .chat-attach-btn { background: #f0f2f5; color: #555; } .chat-attach-btn:hover { background: #e4e6ea; } .chat-send-btn { background: var(--color-primary, #0472a1); color: #fff; } .chat-send-btn:hover { background: var(--color-primary-dark, #035e85); } .chat-send-btn:disabled { background: #b0c4de; cursor: not-allowed; } .chat-send-btn svg, .chat-attach-btn svg { width: 20px; height: 20px; } /* ---- Оценка ---- */ .chat-rating-form { padding: 16px; text-align: center; border-top: 1px solid #e9ecef; flex-shrink: 0; } .chat-rating-form p { color: #555; margin-bottom: 10px; } .chat-stars { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; } .chat-star { font-size: 28px; cursor: pointer; color: #ddd; transition: color .1s; } .chat-star.active, .chat-star:hover { color: #f59e0b; } .chat-rating-comment { width: 100%; border: 1px solid #dee2e6; border-radius: 8px; padding: 8px; font-size: 13px; resize: none; margin-bottom: 8px; font-family: inherit; } .chat-submit-rating { background: var(--color-primary, #0472a1); color: #fff; border: none; border-radius: 8px; padding: 8px 20px; cursor: pointer; font-size: 14px; } .chat-submit-rating:hover { background: var(--color-primary-dark, #035e85); } /* ---- Офлайн-баннер ---- */ .chat-offline-banner { background: #fff8e1; border-bottom: 1px solid #ffe082; padding: 8px 14px; font-size: 12px; color: #795548; text-align: center; flex-shrink: 0; } /* ============================================================ Мобильная адаптация ============================================================ */ @media (max-width: 768px) { /* Над кнопкой обратного звонка (feedback-fab: bottom 100px, height 48px) + зазор 16px */ .chat-bubble { bottom: 164px; right: 16px; } /* Шкторка на полный экран */ .chat-window { width: 100vw; /* 100dvh учитывает мобильный браузерный хром */ height: 100dvh; height: 100vh; /* fallback */ } /* На мобильном поле ввода — отступ снизу для safe area (iOS) */ .chat-input-area { padding-bottom: max(12px, env(safe-area-inset-bottom)); } }