/* ALLONE chat widget — angular, monochrome, #2776EA. All selectors namespaced with .alo- so the host site's resets don't fight the widget. */ .alo-root { position: fixed; right: 20px; bottom: 20px; z-index: 2147483000; font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color: #0c1016; } /* The host site hides the native cursor globally (html.allone-cursor-on * { cursor: none !important }) and draws its own cursor element, which sits behind the widget's z-index — so there's no cursor at all over the chat. Restore real cursors inside the widget. The doubled .alo-root class lifts specificity above the site's universal rule. */ .alo-root.alo-root, .alo-root.alo-root * { cursor: default !important; } .alo-root.alo-root .alo-launcher, .alo-root.alo-root .alo-launcher *, .alo-root.alo-root .alo-close, .alo-root.alo-root .alo-send, .alo-root.alo-root a { cursor: pointer !important; } .alo-root.alo-root .alo-input { cursor: text !important; } .alo-launcher { width: 56px; height: 56px; background: #2776ea; color: #fff; border: 0; border-radius: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, filter 0.2s; } .alo-launcher svg { width: 26px; height: 26px; display: block; } .alo-launcher:hover { filter: brightness(1.06); transform: translateY(-2px); } .alo-panel { position: absolute; right: 0; bottom: 70px; width: min(380px, 92vw); height: min(560px, 76vh); background: #fff; border: 1.5px solid #0c1016; display: none; flex-direction: column; overflow: hidden; overscroll-behavior: contain; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /* Lock the page behind the open sheet (set on while the chat is open). */ html.alo-lock, html.alo-lock body { overflow: hidden !important; overscroll-behavior: none; } .alo-root.alo-open .alo-panel { display: flex; } .alo-head { background: #0c1016; color: #f0f6f8; padding: 14px 16px; font-family: "Space Grotesk", "Geist", sans-serif; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .alo-close { background: transparent; border: 0; color: #f0f6f8; font-size: 20px; cursor: pointer; line-height: 1; } .alo-msgs { flex: 1; /* min-height:0 is required for a flex child to scroll instead of growing to fit its content (the "chat won't scroll inside" bug). */ min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Keep scroll momentum inside the list — don't chain to the page behind. */ overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .alo-msg { max-width: 85%; padding: 9px 12px; font-size: 14px; line-height: 1.5; border: 1.5px solid #0c1016; white-space: pre-wrap; } .alo-msg.bot { align-self: flex-start; background: #fff; color: #0c1016; } .alo-msg.user { align-self: flex-end; background: #2776ea; color: #fff; border-color: #2776ea; } .alo-msg.offer { align-self: stretch; background: #0c1016; color: #f0f6f8; border-color: #0c1016; } .alo-msg.offer a { color: #97cce8; font-weight: 700; } .alo-typing { align-self: flex-start; font-size: 13px; color: #6b7785; } .alo-form { display: flex; gap: 8px; border-top: 1.5px solid #0c1016; padding: 10px; } .alo-input { flex: 1; border: 1.5px solid #0c1016; border-radius: 0; padding: 9px 10px; /* 16px so iOS Safari doesn't auto-zoom the page on focus. */ font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; background: #fff; /* Force visible text + caret — host-site resets often blank these out. */ color: #0c1016 !important; -webkit-text-fill-color: #0c1016; caret-color: #2776ea !important; min-width: 0; } .alo-input:focus { border-color: #2776ea; } .alo-send { background: #2776ea; color: #fff; border: 0; border-radius: 0; padding: 0 16px; font-weight: 600; cursor: pointer; } .alo-send:disabled { opacity: 0.5; cursor: default; } /* Mobile: full-width bottom sheet, keyboard-aware height, safe-area padding. */ @media (max-width: 480px) { .alo-root { right: 14px; bottom: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); } .alo-launcher { width: 52px; height: 52px; } .alo-panel { position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100vw; /* Fallbacks for browsers without VisualViewport; JS pins the real height to the visible area so the input rides above the keyboard. */ height: 100vh; height: 100dvh; border: 0; transform-origin: top center; } .alo-head { padding: 16px; font-size: 17px; } .alo-close { font-size: 26px; padding: 4px 8px; margin: -4px -8px; } .alo-msg { max-width: 88%; font-size: 15px; } .alo-form { padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } .alo-send { padding: 0 18px; } }