/* WMS Chatbot frontend v1.10.4 — SDO Custom Softwares (side launcher + drawer) */ #wms-chatbot-root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wms-brand: #6d28d9; --wms-brand-dark: #4c1d95; --wms-bg-dark: #0b0f1a; --wms-bg-panel: #111827; --wms-text: #f8fafc; --wms-text-muted: #94a3b8; --wms-border: #1f2937; } #wms-chatbot-root *, #wms-chatbot-root *::before, #wms-chatbot-root *::after { box-sizing: border-box; } /* Lock page scroll when drawer open (added on ) */ html.wms-chat-locked, html.wms-chat-locked body { overflow: hidden !important; } /* Side launcher — right middle, vertical pill "Ask SDO" */ .wms-chat-launcher { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 2147483600; border: none; cursor: pointer; padding: 12px 10px; background: linear-gradient(135deg, var(--wms-brand), var(--wms-brand-dark)); color: #fff; border-radius: 12px 0 0 12px; box-shadow: -6px 8px 24px rgba(0,0,0,.35); display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; max-height: 80vh; } .wms-chat-launcher:hover { transform: translateY(-50%) translateX(-3px); box-shadow: -10px 10px 28px rgba(0,0,0,.45); } .wms-chat-launcher .wms-chat-launcher-logo { width: 26px; height: 26px; object-fit: contain; display: block; margin-bottom: 2px; background: transparent; } .wms-chat-launcher .wms-chat-launcher-logo[src=""], .wms-chat-launcher .wms-chat-launcher-logo:not([src]) { display: none; } .wms-chat-launcher .wms-chat-launcher-label { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; line-height: 1; font-size: 13px; letter-spacing: .02em; } .wms-chat-launcher .wms-chat-launcher-label .wms-chat-letter { display: block; height: 1em; margin: 1px 0; } .wms-chat-launcher .wms-chat-launcher-label .wms-chat-letter-space { display: block; height: .5em; } /* Backdrop — dim + blur the page so chat is the focus */ .wms-chat-backdrop { position: fixed; inset: 0; background: rgba(5, 8, 16, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2147483645; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .wms-chat-backdrop.wms-chat-open { opacity: 1; pointer-events: auto; } /* Drawer — slides in from the right, full height */ .wms-chat-window { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; height: 100vh; height: 100dvh; background: var(--wms-bg-dark); color: var(--wms-text); border-left: 1px solid var(--wms-border); box-shadow: -25px 0 60px rgba(0,0,0,.55); display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.61,.36,1); z-index: 2147483646; visibility: hidden; } .wms-chat-window.wms-chat-open { transform: translateX(0); visibility: visible; } /* Header */ .wms-chat-header { background: linear-gradient(135deg, var(--wms-brand), var(--wms-brand-dark)); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .wms-chat-header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #fff; } .wms-chat-titles { flex: 1; min-width: 0; } .wms-chat-title { font-weight: 600; font-size: 16px; line-height: 1.2; color: #fff; } .wms-chat-sub { font-size: 12px; opacity: .85; margin-top: 3px; color: #fff; } .wms-chat-close { background: rgba(255,255,255,.18); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: background .2s; flex-shrink: 0; } .wms-chat-close:hover { background: rgba(255,255,255,.32); } .wms-chat-close svg { width: 16px; height: 16px; } /* Body */ .wms-chat-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; background: var(--wms-bg-dark); display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; } .wms-chat-body::-webkit-scrollbar { width: 6px; } .wms-chat-body::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 3px; } .wms-chat-msg { display: flex; max-width: 100%; } .wms-chat-msg.user { justify-content: flex-end; } .wms-chat-msg.bot { justify-content: flex-start; } .wms-chat-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; animation: wms-fade .18s ease; } @keyframes wms-fade { from {opacity:0;transform:translateY(4px);} to {opacity:1;transform:none;} } .wms-chat-msg.user .wms-chat-bubble { background: linear-gradient(135deg, var(--wms-brand), var(--wms-brand-dark)); color: #fff; border-bottom-right-radius: 4px; } .wms-chat-msg.bot .wms-chat-bubble { background: var(--wms-bg-panel); color: var(--wms-text); border: 1px solid var(--wms-border); border-bottom-left-radius: 4px; } .wms-chat-link { color: #c4b5fd; text-decoration: underline; word-break: break-all; } .wms-chat-msg.user .wms-chat-link { color: #fff; } .wms-chat-cta { display: inline-block; margin-top: 6px; padding: 10px 14px; background: linear-gradient(135deg, var(--wms-brand), var(--wms-brand-dark)); color: #fff !important; text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 13px; box-shadow: 0 8px 20px rgba(109,40,217,.35); transition: transform .15s; } .wms-chat-cta:hover { transform: translateY(-1px); } .wms-chat-typing { display: inline-flex; gap: 4px; align-items: center; } .wms-chat-typing span { width: 6px; height: 6px; background: var(--wms-text-muted); border-radius: 50%; display: inline-block; animation: wms-blink 1.2s infinite; } .wms-chat-typing span:nth-child(2) { animation-delay: .15s; } .wms-chat-typing span:nth-child(3) { animation-delay: .3s; } @keyframes wms-blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} } /* Form */ .wms-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--wms-border); background: var(--wms-bg-panel); flex-shrink: 0; } .wms-chat-input { flex: 1; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--wms-border); font-size: 14px; font-family: inherit; resize: none; outline: none; background: #0b0f1a; color: var(--wms-text); line-height: 1.4; min-height: 40px; max-height: 140px; transition: border-color .15s, box-shadow .15s; } .wms-chat-input::placeholder { color: var(--wms-text-muted); } .wms-chat-input:focus { border-color: var(--wms-brand); box-shadow: 0 0 0 3px rgba(109,40,217,.25); } .wms-chat-hint { font-size: 11px; color: var(--wms-text-muted); padding: 0 14px 8px; background: var(--wms-bg-panel); text-align: right; } .wms-chat-send { background: linear-gradient(135deg, var(--wms-brand), var(--wms-brand-dark)); color: #fff; border: none; padding: 0; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .15s; } .wms-chat-send:hover:not(:disabled) { transform: scale(1.06); } .wms-chat-send:disabled { opacity: .6; cursor: not-allowed; } .wms-chat-send svg { width: 18px; height: 18px; } /* Hide launcher when drawer is open */ .wms-chat-launcher.wms-chat-launcher-hidden { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(40px); } /* Mobile — full screen drawer, safe-area aware */ @media (max-width: 768px) { .wms-chat-window { width: 100vw; max-width: 100vw; left: 0; right: 0; top: 0; bottom: 0; height: 100vh; height: 100dvh; border-left: none; border-radius: 0; box-shadow: none; } .wms-chat-launcher { padding: 10px 8px; font-size: 12px; border-radius: 10px 0 0 10px; max-height: 70vh; } .wms-chat-launcher .wms-chat-launcher-logo { width: 22px; height: 22px; } .wms-chat-launcher .wms-chat-launcher-label { font-size: 12px; } .wms-chat-header { padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); } .wms-chat-body { padding: 12px; -webkit-overflow-scrolling: touch; } .wms-chat-form { padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .wms-chat-input { font-size: 16px; /* prevents iOS zoom on focus */ min-height: 44px; } .wms-chat-hint { display: none; } .wms-chat-bubble { max-width: 88%; font-size: 15px; } }