/** * AI Assistant by Shaheryar Codes - Frontend Chat Widget Stylesheet * Brand redesign matched to shaheryarcodes.dev — near-black (#0A0A0A) + signature * cyan (#07E6ED) accent, Inter type, pill-shaped trigger with label. * Window is intentionally compact (a focused 360x520 panel, not a full app window). */ /* * ISOLATION LAYER * --------------- * `all: initial` on the mount point wipes out any inherited value the active * theme has set on body/html/wrappers (color, font-family, line-height, * letter-spacing, text-align, direction, visibility, etc.) before any of the * plugin's own rules are applied below. Custom properties (--saha-* CSS * variables) are explicitly excluded from `all` by spec, so theming still * flows through normally. Every property the widget actually needs * (position, font, display...) is re-declared immediately after, in the same * rule, so it always wins regardless of source order. */ #saha-chat-widget { all: initial; position: fixed; bottom: var(--saha-offset-bottom, 24px); z-index: 999999; font-family: var(--saha-font-family, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-size: var(--saha-font-size, 14px); line-height: 1.5; letter-spacing: normal; text-align: left; direction: ltr; text-transform: none; color-scheme: normal; display: block; } #saha-chat-widget * { box-sizing: border-box; } /* Reset common theme/UA defaults on every element the plugin renders so a theme's global `button{}`, `a{}`, `ul{}`, `input{}` type-selector rules (border, margin, background, box-shadow, font, etc.) never leak in. Every value the widget actually wants is set explicitly by the rules below, which all carry the extra `#saha-chat-widget` ID specificity to win the cascade without needing a wall of `!important`. */ #saha-chat-widget button, #saha-chat-widget input, #saha-chat-widget textarea, #saha-chat-widget select { margin: 0; border-radius: 0; box-shadow: none; background: none; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; appearance: none; -webkit-appearance: none; } #saha-chat-widget ul, #saha-chat-widget ol { list-style: revert; } #saha-chat-widget a { text-decoration: none; background: none; } #saha-chat-widget svg { display: block; max-width: none; } #saha-chat-widget img { max-width: 100%; } /* --- Trigger: pill (idle, shows label) <-> circle (chat open, close icon) --- */ #saha-chat-widget .saha-chat-trigger-bubble { position: relative; height: var(--saha-launcher-size, 56px) !important; min-width: var(--saha-launcher-size, 56px); width: auto !important; border-radius: 999px !important; background: var(--saha-launcher-bg, #0A0A0A) !important; color: var(--saha-launcher-icon-color, #ffffff) !important; border: 1.5px solid var(--saha-launcher-border-color, rgba(7, 230, 237, 0.45)) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; outline: none !important; padding: 0 18px 0 0 !important; font-family: inherit; } #saha-chat-widget .saha-chat-trigger-bubble:hover { transform: translateY(-2px); border-color: var(--saha-launcher-hover-border-color, rgba(7, 230, 237, 0.9)) !important; } /* Open state: collapses to a solid green circle showing only the close icon */ #saha-chat-widget .saha-chat-trigger-bubble.is-open { width: var(--saha-launcher-size, 56px) !important; padding: 0 !important; justify-content: center !important; background: var(--saha-primary-color, #07E6ED) !important; border-color: var(--saha-primary-color, #07E6ED) !important; } #saha-chat-widget .saha-chat-trigger-bubble.is-open:hover { transform: translateY(-2px) rotate(90deg); } #saha-chat-widget .saha-chat-trigger-bubble.is-open .saha-trigger-icon-badge { background: transparent; color: #0A0A0A; } #saha-chat-widget .saha-chat-trigger-bubble.is-open .saha-trigger-pulse-dot { display: none; } /* Icon badge circle (green) sitting inside the black pill */ #saha-chat-widget .saha-trigger-icon-badge { position: relative; flex-shrink: 0; width: var(--saha-launcher-size, 56px); height: var(--saha-launcher-size, 56px); border-radius: 999px; background: var(--saha-primary-color, #07E6ED); color: #0A0A0A; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, color 0.3s ease; } #saha-chat-widget .saha-chat-trigger-bubble svg { width: 24px; height: 24px; transition: transform 0.25s ease; } #saha-chat-widget .saha-chat-trigger-bubble.is-open svg { width: 22px; height: 22px; } /* Small pulsing "live" dot on the idle trigger */ #saha-chat-widget .saha-trigger-pulse-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--saha-primary-color, #07E6ED); border: 2px solid var(--saha-launcher-bg, #0A0A0A); } #saha-chat-widget .saha-trigger-pulse-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: var(--saha-primary-color, #07E6ED); opacity: 0.6; animation: saha-pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes saha-pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } } #saha-chat-widget .saha-trigger-label { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; color: var(--saha-launcher-icon-color, #ffffff); } #saha-chat-widget .saha-chat-trigger-bubble.is-open .saha-trigger-label { display: none; } /* Task 4 — Mobile Chat Launcher: dedicated label element, independent from the desktop `.saha-trigger-label` above. Hidden by default/on desktop; the `@media (max-width: 450px)` block below is the only place that reveals it, so none of this affects desktop layout or styling. */ #saha-chat-widget .saha-trigger-label-mobile { display: none; } /* Unread message badge shown on the trigger while the chat is closed */ #saha-chat-widget .saha-trigger-unread-badge { position: absolute; top: -4px; left: 42px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #ffffff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; animation: saha-badge-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes saha-badge-pop { from { transform: scale(0); } to { transform: scale(1); } } #saha-chat-widget .saha-chat-trigger-bubble.is-open .saha-trigger-unread-badge { display: none !important; } /* Chat Window Panel — kept compact and focused rather than a full-height app pane */ #saha-chat-widget .saha-chat-window { position: absolute; bottom: 72px; width: var(--saha-window-width, 360px); height: var(--saha-window-height, 520px); max-height: calc(100vh - 120px); border-radius: var(--saha-border-radius, 18px); background: var(--saha-bg-window); border: var(--saha-window-border-width, 1px) solid var(--saha-border-color); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: scale(0.94) translateY(10px); transition: opacity var(--saha-animation-speed, 0.28s) cubic-bezier(0.4, 0, 0.2, 1), transform var(--saha-animation-speed, 0.28s) cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; font-size: var(--saha-font-size, 14px); } #saha-chat-widget .saha-chat-window.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } /* Header */ #saha-chat-widget .saha-chat-header { background: var(--saha-bg-header); padding: var(--saha-header-padding, 16px 18px); display: flex; align-items: center; justify-content: space-between; color: var(--saha-text-header); border-bottom: var(--saha-header-border-width, 1px) solid rgba(7, 230, 237, 0.18); position: relative; flex-shrink: 0; } #saha-chat-widget .saha-chat-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--saha-primary-color, #07E6ED) 50%, transparent); opacity: 0.5; } #saha-chat-widget .saha-chat-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; } #saha-chat-widget .saha-chat-header-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; /* Always the exact same color as the chat header behind it — driven by the very same --saha-bg-header variable the header itself uses, so the avatar circle blends perfectly with any Header Background Color picked in the Widget Customizer (no separate shade, no transparency mismatch). A transparent-PNG logo therefore also sits on the header color, same as before. */ background: var(--saha-bg-header, transparent); display: flex; align-items: center; justify-content: center; overflow: hidden; } #saha-chat-widget .saha-chat-header-avatar img { width: 100%; height: 100%; /* `contain` (not `cover`) so a custom logo is shown in full rather than cropped to fill the circle — important for non-square/logo-mark uploads, unlike a photographic avatar. */ object-fit: contain; display: block; } #saha-chat-widget .saha-chat-title { margin: 0; font-size: var(--saha-header-font-size, 13.5px); font-weight: 600; letter-spacing: -0.01em; color: var(--saha-text-header); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #saha-chat-widget .saha-chat-status { font-size: 11.5px; font-weight: 500; color: var(--saha-online-status-color, #07E6ED); display: flex; align-items: center; gap: 5px; } #saha-chat-widget .saha-chat-status::before { content: ''; width: var(--saha-status-dot-size, 6px); height: var(--saha-status-dot-size, 6px); background: var(--saha-online-status-color, #07E6ED); border-radius: 50%; display: inline-block; } #saha-chat-widget .saha-chat-reset-btn { width: 26px; height: 26px; background: transparent; border: none; color: var(--saha-reset-icon-color, rgba(255, 255, 255, 0.65)); cursor: pointer; padding: 0; border-radius: 50%; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; } #saha-chat-widget .saha-chat-reset-btn:hover { color: var(--saha-primary-color, #07E6ED); background: rgba(7, 230, 237, 0.14); transform: rotate(30deg); } #saha-chat-widget .saha-chat-reset-btn svg { width: 14px; height: 14px; } /* Chat Logs Display */ #saha-chat-widget .saha-chat-messages-container { flex: 1; /* Lets this flex child shrink below its content height so it actually scrolls instead of being clipped by the window's overflow: hidden. */ min-height: 0; padding: 16px; overflow-y: auto; /* Scrolling the chat to its top/bottom doesn't scroll the page behind it. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; background: var(--saha-bg-chat); display: flex; flex-direction: column; gap: var(--saha-message-gap, 12px); /* Instant (not smooth) scrolling: smooth scrolling fought with the visitor's own scrolling while a reply was streaming in. */ scroll-behavior: auto; } /* Custom Scrollbars */ #saha-chat-widget .saha-chat-messages-container::-webkit-scrollbar { width: var(--saha-scrollbar-width, 6px); } #saha-chat-widget .saha-chat-messages-container::-webkit-scrollbar-track { background: var(--saha-scrollbar-track-color, transparent); } #saha-chat-widget .saha-chat-messages-container::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--saha-scrollbar-color, #07E6ED) 25%, transparent); border-radius: 10px; } #saha-chat-widget .saha-chat-messages-container::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--saha-scrollbar-color, #07E6ED) 45%, transparent); } /* Message Bubbles */ #saha-chat-widget .saha-message { max-width: var(--saha-message-max-width, 84%); padding: var(--saha-message-padding, 10px 14px); border-radius: var(--saha-bubble-border-radius, 14px); font-size: var(--saha-message-font-size, 13.5px); line-height: 1.5; word-wrap: break-word; animation: saha-slide-up var(--saha-animation-speed, 0.25s) cubic-bezier(0.16, 1, 0.3, 1); } /* Message entrance animation style overrides (default is the slide-up animation declared above). Gated by a class on #saha-chat-widget so the admin's "Message Entrance Animation" choice swaps the effect without touching the base rule. */ #saha-chat-widget.saha-anim-fade .saha-message { animation-name: saha-fade-in; } #saha-chat-widget.saha-anim-scale .saha-message { animation-name: saha-scale-in; } #saha-chat-widget.saha-anim-none .saha-message { animation: none; } @keyframes saha-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes saha-scale-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes saha-slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #saha-chat-widget .saha-message.bot { align-self: flex-start; background: var(--saha-bg-message-bot); color: var(--saha-text-message-bot); border-bottom-left-radius: 3px; border: 1px solid var(--saha-border-color); } #saha-chat-widget .saha-message.user { align-self: flex-end; background: var(--saha-bg-message-user); color: var(--saha-text-message-user); font-weight: 500; border-bottom-right-radius: 3px; } /* Formatting inside chatbot messages */ #saha-chat-widget .saha-message p { margin: 0 0 10px 0; } #saha-chat-widget .saha-message p:last-child { margin-bottom: 0; } #saha-chat-widget .saha-message strong { font-weight: 700; } #saha-chat-widget .saha-message ul, #saha-chat-widget .saha-message ol { margin: 5px 0 10px 0; padding-left: 20px; } #saha-chat-widget .saha-message li { margin-bottom: 4px; } #saha-chat-widget .saha-message a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; font-weight: 600; } #saha-chat-widget .saha-message.bot a { color: var(--saha-accent-color, #07E6ED); text-decoration: none; } #saha-chat-widget .saha-message.bot a:hover { text-decoration: underline; } /* Code Highlight Block inside widget */ #saha-chat-widget .saha-message pre { background: var(--saha-code-block-color, #0A0A0A); color: #e8e8e8; padding: 12px; border-radius: 8px; font-family: Consolas, Monaco, "Courier New", Courier, monospace; font-size: 13px; overflow-x: auto; margin: 10px 0; position: relative; border: 1px solid #232323; } #saha-chat-widget .saha-message code { background: color-mix(in srgb, var(--saha-accent-color, #07E6ED) 14%, transparent); color: inherit; padding: 2px 5px; border-radius: 4px; font-family: Consolas, Monaco, "Courier New", Courier, monospace; font-size: 0.9em; } #saha-chat-widget .saha-message pre code { background: none !important; padding: 0 !important; font-size: 13px; color: #e8e8e8; } #saha-chat-widget .saha-code-header { display: flex; justify-content: space-between; align-items: center; background: #161616; margin: -12px -12px 10px -12px; padding: 6px 12px; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom: 1px solid #232323; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--saha-accent-color, #07E6ED); } #saha-chat-widget .saha-copy-code-btn { background: transparent; border: none; color: #9a9a9a; cursor: pointer; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; transition: all 0.2s ease; } #saha-chat-widget .saha-copy-code-btn:hover { color: var(--saha-accent-color, #07E6ED); background: color-mix(in srgb, var(--saha-accent-color, #07E6ED) 12%, transparent); } /* Human Escalation Card UI (Phase 5) */ #saha-chat-widget .saha-escalation-card { background: var(--saha-bg-message-bot); border: 1px solid var(--saha-primary-color, #07E6ED); border-radius: var(--saha-border-radius); padding: 16px; margin: 10px 0; text-align: center; color: var(--saha-text-message-bot); animation: saha-slide-up 0.3s ease; } #saha-chat-widget .saha-escalation-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; background: var(--saha-button-color, var(--saha-primary-color, #07E6ED)); color: #0A0A0A; margin-bottom: 10px; } #saha-chat-widget .saha-escalation-card p { font-size: 13px; margin-bottom: 14px; color: var(--saha-text-message-bot); } #saha-chat-widget .saha-escalation-card p.saha-escalation-subtitle { opacity: 0.85; } #saha-chat-widget .saha-fallback-channels-wrapper { display: flex; flex-direction: column; gap: 10px; } #saha-chat-widget .saha-fallback-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none !important; color: #ffffff !important; transition: filter 0.2s ease, transform 0.1s ease; } #saha-chat-widget .saha-fallback-btn:hover { filter: brightness(0.92); transform: translateY(-1px); } #saha-chat-widget .saha-fallback-btn:active { transform: translateY(0); } #saha-chat-widget .saha-fallback-btn.whatsapp { background: #25d366; } #saha-chat-widget .saha-fallback-btn.email { background: #0A0A0A; border: 1px solid rgba(7, 230, 237, 0.35); } #saha-chat-widget .saha-fallback-btn.contact-form { background: var(--saha-button-color, var(--saha-primary-color, #07E6ED)); color: #0A0A0A !important; } #saha-chat-widget .saha-fallback-btn svg { width: 16px; height: 16px; fill: currentColor; } /* Inline Contact Form (part of the escalation card) */ /* Spam trap: hidden from people (and screen readers), visible to bots that fill in every field. */ #saha-chat-widget .saha-hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } #saha-chat-widget .saha-escalation-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(128, 128, 128, 0.3); text-align: left; } #saha-chat-widget .saha-escalation-form input, #saha-chat-widget .saha-escalation-form textarea { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(128, 128, 128, 0.3); background: var(--saha-bg-widget, #ffffff); color: var(--saha-text-message-bot); resize: vertical; } #saha-chat-widget .saha-escalation-form input:focus, #saha-chat-widget .saha-escalation-form textarea:focus { outline: none; border-color: var(--saha-primary-color, #07E6ED); } #saha-chat-widget .saha-escalation-form button[type="submit"] { align-self: flex-start; padding: 9px 18px; border: none; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--saha-button-color, var(--saha-primary-color, #07E6ED)); color: #0A0A0A; transition: filter 0.2s ease; } #saha-chat-widget .saha-escalation-form button[type="submit"]:hover { filter: brightness(0.92); } #saha-chat-widget .saha-escalation-form button[type="submit"]:disabled { opacity: 0.6; cursor: default; } #saha-chat-widget .saha-escalation-form-success { font-size: 13px; font-weight: 600; color: #16a34a !important; margin: 0 !important; } /* Typing indicator */ #saha-chat-widget .saha-typing-indicator { display: flex; align-items: center; gap: var(--saha-typing-dot-gap, 4px); padding: 4px 6px; } #saha-chat-widget .saha-typing-dot { width: var(--saha-typing-dot-size, 6px); height: var(--saha-typing-dot-size, 6px); background: var(--saha-accent-color, #07E6ED); border-radius: 50%; opacity: 0.4; animation: saha-bounce 1.4s infinite ease-in-out both; } #saha-chat-widget .saha-typing-dot:nth-child(1) { animation-delay: -0.32s; } #saha-chat-widget .saha-typing-dot:nth-child(2) { animation-delay: -0.16s; } /* UX messaging during generation — rotating "thinking / analyzing / generating" label beside the existing dots, so a slow-but-working reply never reads as a frozen interface. */ #saha-chat-widget .saha-typing-status { margin-left: 4px; font-size: 11.5px; color: var(--saha-text-message-bot, #f2f2f2); opacity: 0.65; white-space: nowrap; } @keyframes saha-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); opacity: 1; } } /* Footer Input Area */ #saha-chat-widget .saha-chat-input-area { background: var(--saha-bg-input); border-top: 1px solid var(--saha-border-color); padding: var(--saha-input-area-padding, 12px 14px); display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; } #saha-chat-widget .saha-chat-input-area textarea { flex: 1; border: var(--saha-input-border-width, 1.5px) solid var(--saha-input-border-color, var(--saha-border-color)); border-radius: var(--saha-input-border-radius, 12px); padding: var(--saha-input-field-padding, 10px 14px); font-size: var(--saha-font-size, 14px); font-family: inherit; background: transparent; color: var(--saha-text-input); outline: none; resize: none; max-height: 100px; box-sizing: border-box; line-height: 1.4; transition: border-color 0.2s ease; } #saha-chat-widget .saha-chat-input-area textarea::placeholder { color: #9a9a9a; } /* Hide the scrollbar on the message input while keeping it scrollable via mouse wheel / touch / keyboard, matching the admin textareas. */ #saha-chat-widget .saha-chat-input-area textarea { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / legacy Edge */ } #saha-chat-widget .saha-chat-input-area textarea::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge (Chromium) */ } #saha-chat-widget .saha-chat-input-area textarea:focus { border-color: var(--saha-primary-color, #07E6ED); } #saha-chat-widget .saha-chat-input-area button { width: 38px; height: 38px; border-radius: var(--saha-button-radius, 50%); background: var(--saha-button-color, var(--saha-primary-color, #07E6ED)); color: #0A0A0A; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; outline: none; padding: 0; flex-shrink: 0; box-sizing: border-box; } #saha-chat-widget .saha-chat-input-area button:hover:not(:disabled) { background: var(--saha-button-hover-color, #05b9c0); transform: translateY(-1px); } #saha-chat-widget .saha-chat-input-area button:disabled { opacity: 0.45; cursor: not-allowed; } #saha-chat-widget .saha-chat-input-area button svg { width: 16px; height: 16px; margin-left: -1px; } /* Floating "scroll to latest" button */ #saha-chat-widget .saha-scroll-bottom-btn { position: absolute; right: 14px; bottom: 76px; width: 34px; height: 34px; border-radius: 50%; background: var(--saha-bg-window, #0A0A0A); border: 1.5px solid var(--saha-accent-color, #07E6ED); color: var(--saha-accent-color, #07E6ED); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 5; overflow: hidden; padding: 0; box-sizing: border-box; animation: saha-slide-up 0.2s ease; } #saha-chat-widget .saha-scroll-bottom-btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--saha-accent-color, #07E6ED) 12%, transparent); } #saha-chat-widget .saha-scroll-bottom-btn svg { width: 15px; height: 15px; display: block; flex-shrink: 0; } /* Hover effects toggle: when the admin turns off "Enable hover effects", neutralize the transform/filter lift-and-glow interactions across every interactive element, without needing to touch each :hover rule above. */ #saha-chat-widget.saha-hover-disabled .saha-chat-trigger-bubble:hover, #saha-chat-widget.saha-hover-disabled .saha-chat-trigger-bubble.is-open:hover, #saha-chat-widget.saha-hover-disabled .saha-chat-reset-btn:hover, #saha-chat-widget.saha-hover-disabled .saha-chat-input-area button:hover:not(:disabled), #saha-chat-widget.saha-hover-disabled .saha-scroll-bottom-btn:hover, #saha-chat-widget.saha-hover-disabled .saha-fallback-btn:hover, #saha-chat-widget.saha-hover-disabled .saha-copy-code-btn:hover, #saha-chat-widget.saha-hover-disabled .saha-message.bot a:hover { transform: none !important; filter: none !important; } /* Keyboard accessibility: visible focus ring for keyboard users only */ #saha-chat-widget .saha-chat-trigger-bubble:focus-visible, #saha-chat-widget .saha-chat-reset-btn:focus-visible, #saha-chat-widget .saha-chat-input-area button:focus-visible, #saha-chat-widget .saha-scroll-bottom-btn:focus-visible, #saha-chat-widget .saha-fallback-btn:focus-visible { outline: 2px solid var(--saha-primary-color, #07E6ED) !important; outline-offset: 2px; } /* Responsive Widget Adjustments — Mobile Chat Launcher (Task 4) * --------------------------------------------------------------- * On small screens the launcher now shows a compact icon + label (instead * of collapsing to icon-only), fully driven by its own --saha-mobile-* * custom properties so it can be themed independently from the desktop * launcher above. Nothing outside this @media block is touched, so desktop * markup/behavior is unaffected. */ @media (max-width: 450px) { #saha-chat-widget { bottom: 12px; right: 12px !important; left: 12px !important; } #saha-chat-widget .saha-chat-window { width: calc(100vw - 24px) !important; /* Reduced ~12% (within the requested 10-15% range) from the full `100vh - 100px` height. On mobile browsers the address bar / top chrome overlaps the top portion of the viewport, which was pushing the window's header out of view. Shrinking the height (while keeping the same `bottom` anchor) moves the top edge down, clear of that browser UI. */ height: calc((100vh - 100px) * 0.88) !important; max-height: none; bottom: 70px; } #saha-chat-widget .saha-chat-trigger-bubble { position: absolute; bottom: 0; width: auto !important; height: var(--saha-mobile-launcher-icon-size, 44px) !important; min-width: var(--saha-mobile-launcher-icon-size, 44px); background: var(--saha-mobile-launcher-bg, var(--saha-launcher-bg, #0A0A0A)) !important; border-radius: var(--saha-mobile-launcher-radius, 999px) !important; padding: var(--saha-mobile-launcher-padding, 0 12px 0 0) !important; gap: var(--saha-mobile-launcher-spacing, 8px); justify-content: flex-start !important; max-width: calc(100vw - 24px); } /* The desktop label is always hidden on mobile — the dedicated mobile label below (with its own settings) takes over instead. */ #saha-chat-widget .saha-trigger-label { display: none; } #saha-chat-widget .saha-trigger-icon-badge { width: var(--saha-mobile-launcher-icon-size, 44px); height: var(--saha-mobile-launcher-icon-size, 44px); flex-shrink: 0; } /* Keep the pulsing "live" dot's ring color matched to the mobile pill background instead of the (possibly different) desktop background. */ #saha-chat-widget .saha-trigger-pulse-dot { border-color: var(--saha-mobile-launcher-bg, var(--saha-launcher-bg, #0A0A0A)); } /* Compact, responsive label: shrinks to fit small screens and never grows past a safe width so it can't cover page content. */ #saha-chat-widget .saha-trigger-label-mobile { display: inline-block; font-size: var(--saha-mobile-launcher-font-size, 11px); font-weight: 600; letter-spacing: 0.01em; color: var(--saha-mobile-launcher-font-color, #ffffff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38vw; line-height: 1.2; } /* Admin "Show/Hide label" toggle — collapses back to an icon-only circle, matching the previous mobile behavior when disabled. */ #saha-chat-widget.saha-mobile-label-hidden .saha-chat-trigger-bubble { width: var(--saha-mobile-launcher-icon-size, 44px) !important; min-width: var(--saha-mobile-launcher-icon-size, 44px) !important; padding: 0 !important; justify-content: center !important; } #saha-chat-widget.saha-mobile-label-hidden .saha-trigger-label-mobile { display: none; } /* Open state: always collapse to an icon-only circle (showing the close icon), regardless of the label show/hide setting. */ #saha-chat-widget .saha-chat-trigger-bubble.is-open { width: var(--saha-mobile-launcher-icon-size, 44px) !important; min-width: var(--saha-mobile-launcher-icon-size, 44px) !important; padding: 0 !important; justify-content: center !important; } #saha-chat-widget .saha-chat-trigger-bubble.is-open .saha-trigger-label-mobile { display: none; } } /* Human Escalation removal / Instant AI Quotation: the in-chat quotation card (see renderQuotationCard() in widget-script.js) — same visual language as .saha-escalation-card (bot-message background, primary- color border, same slide-up entrance) so it reads as part of the same widget rather than a bolted-on component. */ #saha-chat-widget .saha-quotation-card { background: var(--saha-bg-message-bot); border: 1px solid var(--saha-primary-color, #07E6ED); border-radius: var(--saha-border-radius); padding: 16px; margin: 10px 0; color: var(--saha-text-message-bot); animation: saha-slide-up 0.3s ease; } #saha-chat-widget .saha-quotation-header { font-size: 13px; font-weight: 700; margin-bottom: 12px; } #saha-chat-widget .saha-quotation-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } #saha-chat-widget .saha-quotation-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 13px; padding-bottom: 8px; border-bottom: 1px dashed rgba(127, 127, 127, 0.25); } #saha-chat-widget .saha-quotation-row:last-child { border-bottom: none; padding-bottom: 0; } #saha-chat-widget .saha-quotation-row-label { display: flex; flex-direction: column; gap: 2px; } #saha-chat-widget .saha-quotation-row-desc { font-size: 11.5px; opacity: 0.7; } #saha-chat-widget .saha-quotation-row-amount { white-space: nowrap; font-variant-numeric: tabular-nums; } #saha-chat-widget .saha-quotation-total { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-top: 10px; border-top: 1px solid var(--saha-primary-color, #07E6ED); margin-bottom: 8px; } #saha-chat-widget .saha-quotation-notes { font-size: 12px; opacity: 0.85; margin-bottom: 8px; white-space: pre-wrap; } #saha-chat-widget .saha-quotation-footnote { font-size: 11.5px; opacity: 0.7; margin-bottom: 0; font-style: italic; } /* AI Appointment Scheduling System: the in-chat appointment confirmation card (see renderAppointmentCard() in widget-script.js) — reuses the quotation card's classes/visual language (.saha-quotation-card etc.) directly since the layout is identical (a header + rows + footnote); only the row content differs, so no new base card styles are needed here, just the appointment-specific bits. */ #saha-chat-widget .saha-appointment-card .saha-appointment-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } /* Quality-audit fix — this modifier class was applied by widget-script.js whenever a request has no confirmed date/time yet (the AI couldn't offer a real slot), but had no CSS rule of its own, so it rendered visually identical to a confirmed appointment card. Dashed, muted-amber border instead of the solid primary-color one distinguishes "we'll follow up" from an actually-confirmed booking at a glance. */ #saha-chat-widget .saha-appointment-card-pending { border-style: dashed; border-color: rgba(245, 158, 11, 0.55); } /* ============================================================ Batch B — GDPR consent gate + Proactive engagement teaser Uses the widget's own CSS variables so it inherits the admin's configured colours; falls back to sensible defaults otherwise. ============================================================ */ #saha-chat-widget .saha-consent-gate { padding: 12px 14px; border-top: 1px solid var(--saha-input-border-color, #262626); background: var(--saha-bg-input, #111111); color: var(--saha-text-message-bot, #f2f2f2); font-size: 12.5px; line-height: 1.5; } #saha-chat-widget .saha-consent-text { margin: 0 0 10px 0; } #saha-chat-widget .saha-consent-link { color: var(--saha-accent-color, #07E6ED); text-decoration: underline; } #saha-chat-widget .saha-consent-actions { display: flex; justify-content: flex-end; } #saha-chat-widget .saha-consent-agree { background: var(--saha-button-color, #07E6ED); color: var(--saha-text-message-user, #0A0A0A); border: none; border-radius: 8px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; } #saha-chat-widget .saha-consent-agree:hover { background: var(--saha-button-hover-color, #05B9C0); } /* Proactive teaser — a speech bubble that "pops" up from the launcher */ #saha-chat-widget .saha-proactive-teaser { position: absolute; /* The widget container is ALREADY inset by --saha-offset-bottom/side from the viewport; the teaser is positioned inside it, so those offsets must NOT be added again (double-offset bug: bubble sat ~24px further left + ~24px higher than the launcher). `right: 0` makes the pill's right edge line up exactly with the launcher's. */ bottom: calc(var(--saha-launcher-size, 56px) + 8px); right: 0; /* Single-line teaser: size to the message itself (max-content) instead of a fixed 230px wrap width; the viewport clamp keeps very long admin messages from spilling off-screen on small devices. */ width: max-content; max-width: calc(100vw - 48px); z-index: 2147483000; animation: saha-proactive-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); } #saha-chat-widget .saha-proactive-bubble { position: relative; display: block; width: 100%; /* Theme-bleed hardening: some themes force `min-width`/`min-height`/ `padding` on all