.anm-olc-theme { --anm-olc-primary: #0a3f83; --anm-olc-secondary: #ffffff; } .anm-olc-widget { max-width: 720px; margin: 16px auto; border: 1px solid #d9dee6; border-radius: 14px; background: #ffffff; overflow: hidden; box-shadow: 0 12px 32px rgba(12, 26, 45, 0.08); font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .anm-olc-widget-floating-mode { width: min(380px, calc(100vw - 24px)); max-width: 380px; position: fixed; right: 12px; bottom: 76px; margin: 0; z-index: 2147483000; } .anm-olc-widget-floating-mode.anm-olc-widget-collapsed { display: none; } .anm-olc-float-toggle { position: fixed; right: 14px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--anm-olc-primary); color: var(--anm-olc-secondary); box-shadow: 0 10px 22px rgba(10, 63, 131, 0.35); cursor: pointer; z-index: 2147483001; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } .anm-olc-float-toggle.has-custom-icon { width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; box-shadow: none; } .anm-olc-float-toggle.has-custom-icon img { display: block; width: 54px; height: 54px; object-fit: contain; } .anm-olc-float-toggle.is-visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .anm-olc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--anm-olc-primary); color: var(--anm-olc-secondary); } .anm-olc-header-text { min-width: 0; } .anm-olc-header h3 { margin: 0; font-size: 20px; } .anm-olc-header p { margin: 6px 0 0; opacity: 0.9; } .anm-olc-close { width: 30px; height: 30px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: var(--anm-olc-secondary); font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; } .anm-olc-close:hover { background: rgba(255, 255, 255, 0.34); transform: scale(1.04); } .anm-olc-close:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; } .anm-olc-intake, .anm-olc-chat { padding: 16px; } .anm-olc-intake label { display: block; margin: 10px 0 6px; font-weight: 600; } .anm-olc-intake input, .anm-olc-compose textarea, .anm-olc-order-mail input, .anm-olc-order-mail textarea { width: 100%; border: 1px solid #c8d1df; border-radius: 10px; padding: 10px 12px; box-sizing: border-box; } .anm-olc-note { margin-top: 8px; color: #5e6c82; font-size: 13px; } .anm-olc-messages { border: 1px solid #e2e8f3; border-radius: 12px; min-height: 240px; max-height: 360px; overflow: auto; padding: 10px; background: #f7f9fc; } .anm-olc-row { display: flex; margin-bottom: 8px; } .anm-olc-bubble { margin: 0; display: inline-block; padding: 8px 10px; border-radius: 12px; max-width: 82%; word-break: break-word; } .anm-olc-message-sender { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; } .anm-olc-message-text { margin: 0; font-size: 14px; line-height: 1.35; } .anm-olc-message-time { display: block; margin-top: 4px; font-size: 11px; font-style: italic; opacity: 0.8; } .anm-olc-history-separator { display: flex; align-items: center; gap: 8px; margin: 12px 4px; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; } .anm-olc-history-separator::before, .anm-olc-history-separator::after { content: ''; flex: 1; height: 1px; background: #e5e7eb; } .anm-olc-sender-customer { justify-content: flex-start; } .anm-olc-sender-agent { justify-content: flex-end; } .anm-olc-sender-system { justify-content: center; } .anm-olc-sender-customer .anm-olc-bubble { background: #dff4ff; } .anm-olc-sender-agent .anm-olc-bubble { background: #e8f8e7; } .anm-olc-sender-system .anm-olc-bubble { background: #f2f4f7; } .anm-olc-system-notice .anm-olc-bubble { border: 1px solid transparent; } .anm-olc-system-notice .anm-olc-message-text { font-size: 12px; font-style: italic; font-weight: 700; } .anm-olc-system-notice .anm-olc-message-sender::before { display: inline-block; min-width: 16px; height: 16px; margin-right: 6px; line-height: 16px; text-align: center; border-radius: 999px; font-size: 11px; font-weight: 700; content: '!'; } .anm-olc-system-notice-reminder .anm-olc-bubble { background: #e8f8e7; border-color: #16a34a; } .anm-olc-system-notice-reminder .anm-olc-message-sender::before { color: #14532d; background: #86efac; content: 'i'; } .anm-olc-system-notice-warning .anm-olc-bubble { background: #fef3c7; border-color: #d97706; } .anm-olc-system-notice-warning .anm-olc-message-sender::before { color: #7c2d12; background: #fcd34d; content: '!'; } .anm-olc-system-notice-critical .anm-olc-bubble { background: #fee2e2; border-color: #dc2626; } .anm-olc-system-notice-critical .anm-olc-message-sender::before { color: #7f1d1d; background: #fca5a5; content: 'X'; } .anm-olc-compose, .anm-olc-order-mail { margin-top: 12px; } .anm-olc-compose button, .anm-olc-intake button, .anm-olc-order-mail button { margin-top: 8px; border: 0; border-radius: 10px; background: var(--anm-olc-primary); color: var(--anm-olc-secondary); padding: 10px 14px; cursor: pointer; } .anm-olc-order-mail h4 { margin: 10px 0 8px; } .hidden { display: none; } .anm-olc-typing-indicator { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; color: #6b7280; font-style: italic; } .anm-olc-typing-indicator-hidden { display: none; } .anm-olc-typing-dots { display: inline-flex; align-items: center; gap: 3px; } .anm-olc-typing-dots span { display: inline-block; width: 5px; height: 5px; border-radius: 999px; background: #9ca3af; animation: anm-olc-typing-bounce 1.2s ease-in-out infinite; } .anm-olc-typing-dots span:nth-child(2) { animation-delay: 0.2s; } .anm-olc-typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes anm-olc-typing-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } @media (max-width: 640px) { .anm-olc-widget { margin: 10px; } .anm-olc-widget-floating-mode { left: 48%; right: auto; bottom: 72px; width: min(350px, calc(100vw - 24px)); max-width: 350px; transform: translateX(-50%); } .anm-olc-float-toggle { right: 10px; bottom: 12px; } .anm-olc-messages { min-height: 200px; max-height: 280px; } }