/* ========================================================================== SkyAirways - Chat Widget (Production-Grade) ========================================================================== */ /* -------------------------------------------------------------------------- FAB (Floating Action Button) -------------------------------------------------------------------------- */ .chat-fab { position: fixed; bottom: 24px; right: 24px; /* Shared scale in theme.css; fallback repeated for pages that skip it. */ z-index: var(--z-widget, 9000); display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--rb-gold) 0%, var(--rb-accent-hover) 100%); color: var(--rb-navy); cursor: pointer; box-shadow: 0 4px 16px rgba(27, 184, 245, 0.35); transition: box-shadow var(--rb-transition), transform var(--rb-transition); } .chat-fab:hover { box-shadow: 0 6px 24px rgba(27, 184, 245, 0.5); transform: scale(1.05); } .chat-fab:active { transform: scale(0.97); } .chat-fab:focus-visible { outline: 2px solid var(--rb-navy); outline-offset: 3px; } .chat-fab svg { width: 24px; height: 24px; } /* Pulse animation for unopened state */ .chat-fab--pulse { animation: chat-fab-pulse 2s ease-in-out infinite; } @keyframes chat-fab-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(27, 184, 245, 0.35); } 50% { box-shadow: 0 4px 16px rgba(27, 184, 245, 0.35), 0 0 0 12px rgba(27, 184, 245, 0.12); } } /* Hide FAB when panel is open on mobile */ @media (max-width: 767px) { .chat-fab.is-hidden { display: none; } } /* -------------------------------------------------------------------------- Chat Panel -------------------------------------------------------------------------- */ .chat-panel { position: fixed; bottom: 96px; right: 24px; z-index: calc(var(--z-widget, 9000) + 1); width: 380px; height: 600px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background-color: var(--rb-card); /* The panel carries its own data-theme (the widget theme is independent of the page theme), so inherited text must resolve against the panel rather than against - otherwise a dark panel on a light page inherits dark body text and any unstyled label goes dark-on-dark. */ color: var(--rb-text); border: 1px solid var(--rb-border); border-radius: var(--rb-radius-lg) var(--rb-radius-lg) var(--rb-radius) var(--rb-radius); box-shadow: var(--rb-shadow-lg); overflow: hidden; /* Open/close animation */ opacity: 0; visibility: hidden; transform: scale(0.9) translateY(20px); transform-origin: bottom right; transition: opacity var(--rb-transition), transform var(--rb-transition), visibility var(--rb-transition); } /* L-2A: shrink panel on short viewports (MacBook 13", small laptops) so the panel never extends past the viewport top/bottom. */ @media (max-height: 820px) { .chat-panel { bottom: 24px; height: calc(100vh - 60px); max-height: calc(100vh - 60px); } } @media (max-height: 680px) { .chat-panel { bottom: 12px; height: calc(100vh - 40px); max-height: calc(100vh - 40px); } } .chat-panel.is-open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); } /* Mobile: full-screen overlay */ @media (max-width: 767px) { .chat-panel { inset: 0; width: 100%; height: 100%; max-height: 100%; border-radius: 0; bottom: 0; right: 0; transform: translateY(100%); transform-origin: bottom center; } .chat-panel.is-open { transform: translateY(0); } } /* -------------------------------------------------------------------------- Chat Header -------------------------------------------------------------------------- */ .chat-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background-color: var(--rb-navy); color: #FFFFFF; flex-shrink: 0; } /* Scoped to .chat-panel[data-theme="dark"] rather than a bare [data-theme="dark"] ancestor. The widget owns its theme independently of the page, so with the SITE dark and the WIDGET set to light an unscoped descendant selector still matched via and kept painting the widget's header dark. Keying on the panel means only the widget's own theme decides how the widget looks. */ .chat-panel[data-theme="dark"] .chat-header { background-color: var(--rb-surface); border-bottom: 1px solid var(--rb-border); } .chat-header__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .chat-header__info { flex: 1; min-width: 0; } .chat-header__name { font-size: 0.9375rem; font-weight: 700; line-height: 1.2; } .chat-header__status { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; gap: 4px; } .chat-panel[data-theme="dark"] .chat-header__status { color: var(--rb-text-secondary); } .chat-header__status-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #34D399; } .chat-header__actions { display: flex; align-items: center; gap: 4px; } .chat-header__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: rgba(255, 255, 255, 0.8); background: none; border: none; border-radius: var(--rb-radius); cursor: pointer; transition: background-color var(--rb-transition), color var(--rb-transition); } .chat-header__btn:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; } .chat-header__btn:focus-visible { outline: 2px solid var(--rb-gold); outline-offset: 2px; } .chat-header__btn svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- Messages Area -------------------------------------------------------------------------- */ .chat-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background-color: var(--rb-bg); scroll-behavior: smooth; } .chat-messages::-webkit-scrollbar { width: 4px; } .chat-messages::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb { background: var(--rb-border); border-radius: 2px; } /* -------------------------------------------------------------------------- Message Bubbles -------------------------------------------------------------------------- */ .chat-message { display: flex; gap: 8px; max-width: 85%; animation: chat-message-in 0.3s ease; } @keyframes chat-message-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Bot messages: left-aligned */ .chat-message--bot { align-self: flex-start; } .chat-message--bot .chat-bubble { background-color: var(--rb-surface); color: var(--rb-text); border-radius: 4px var(--rb-radius-lg) var(--rb-radius-lg) var(--rb-radius-lg); } /* User messages: right-aligned */ .chat-message--user { align-self: flex-end; flex-direction: row-reverse; } .chat-message--user .chat-bubble { background-color: var(--rb-navy); color: #FFFFFF; border-radius: var(--rb-radius-lg) 4px var(--rb-radius-lg) var(--rb-radius-lg); } .chat-panel[data-theme="dark"] .chat-message--user .chat-bubble { background-color: rgba(27, 184, 245, 0.2); color: var(--rb-text); } .chat-bubble { padding: 10px 14px; font-size: 0.875rem; line-height: 1.5; word-break: break-word; /* W-26: the bubble was white-space:normal, so EVERY multi-paragraph reply collapsed into one block - the assistant writes "\n\n" between paragraphs and none of it survived. Safe to set here because the bubble holds only the message text: the timestamp is a SIBLING of the bubble, not a child, so pre-wrap cannot pick up whitespace around it. The text is trimmed at insertion in chat-widget.ts, which is what stops pre-wrap from also rendering leading or trailing blank lines. The two changes belong together - either alone is a defect. */ white-space: pre-wrap; } .chat-bubble p { margin-bottom: 8px; } .chat-bubble p:last-child { margin-bottom: 0; } .chat-message__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; align-self: flex-end; } .chat-message__time { font-size: 0.6875rem; color: var(--rb-text-secondary); margin-top: 4px; padding-inline: 4px; } /* -------------------------------------------------------------------------- Typing Indicator -------------------------------------------------------------------------- */ .chat-typing { display: flex; align-items: center; gap: 4px; padding: 12px 16px; background-color: var(--rb-surface); border-radius: 4px var(--rb-radius-lg) var(--rb-radius-lg) var(--rb-radius-lg); align-self: flex-start; max-width: 70px; } .chat-typing__dot { width: 7px; height: 7px; border-radius: 50%; background-color: var(--rb-text-secondary); animation: typing-bounce 1.4s ease-in-out infinite; } .chat-typing__dot:nth-child(2) { animation-delay: 0.2s; } .chat-typing__dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } } /* -------------------------------------------------------------------------- Quick Reply Buttons -------------------------------------------------------------------------- */ .chat-quick-replies { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .chat-quick-replies::-webkit-scrollbar { display: none; } .chat-quick-reply { flex-shrink: 0; padding: 8px 16px; font-size: 0.8125rem; font-weight: 600; color: var(--rb-accent); background: transparent; border: 1.5px solid var(--rb-accent); border-radius: 20px; cursor: pointer; white-space: nowrap; transition: background-color var(--rb-transition), color var(--rb-transition); } .chat-quick-reply:hover { background-color: var(--rb-accent); color: var(--rb-navy); } .chat-quick-reply:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Rich Card -------------------------------------------------------------------------- */ .chat-rich-card { background-color: var(--rb-card); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); overflow: hidden; max-width: 280px; } .chat-rich-card__image { width: 100%; height: 140px; object-fit: cover; } .chat-rich-card__body { padding: 12px; } .chat-rich-card__title { font-size: 0.875rem; font-weight: 700; color: var(--rb-text); margin-bottom: 4px; } .chat-rich-card__text { font-size: 0.8125rem; color: var(--rb-text-secondary); margin-bottom: 12px; line-height: 1.4; } .chat-rich-card__btn { display: block; width: 100%; padding: 8px; font-size: 0.8125rem; font-weight: 700; text-align: center; color: var(--rb-navy); background-color: var(--rb-gold); border: none; border-radius: var(--rb-radius); cursor: pointer; transition: background-color var(--rb-transition); } .chat-rich-card__btn:hover { background-color: var(--rb-accent-hover); } .chat-rich-card__btn:focus-visible { outline: 2px solid var(--rb-navy); outline-offset: 2px; } /* -------------------------------------------------------------------------- Carousel -------------------------------------------------------------------------- */ .chat-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; scrollbar-width: none; } .chat-carousel::-webkit-scrollbar { display: none; } .chat-carousel .chat-rich-card { flex: 0 0 240px; scroll-snap-align: start; } /* -------------------------------------------------------------------------- Welcome Card -------------------------------------------------------------------------- */ .chat-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 24px 24px; } .chat-welcome__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; border: 3px solid var(--rb-gold); } .chat-welcome__greeting { font-size: 1.125rem; font-weight: 700; color: var(--rb-text); margin-bottom: 8px; } .chat-welcome__subtitle { font-size: 0.875rem; color: var(--rb-text-secondary); margin-bottom: 20px; max-width: 280px; } .chat-welcome__actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; } .chat-welcome__action-btn { padding: 12px 8px; font-size: 0.8125rem; font-weight: 600; color: var(--rb-text); background-color: var(--rb-surface); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); cursor: pointer; transition: border-color var(--rb-transition), background-color var(--rb-transition); text-align: center; } .chat-welcome__action-btn:hover { border-color: var(--rb-accent); background-color: rgba(27, 184, 245, 0.06); } .chat-welcome__action-btn:focus-visible { outline: 2px solid var(--rb-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Input Area -------------------------------------------------------------------------- */ .chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--rb-border); background-color: var(--rb-card); flex-shrink: 0; } .chat-input__field { flex: 1; min-height: 40px; max-height: 120px; padding: 8px 14px; font-size: 0.875rem; color: var(--rb-text); background-color: var(--rb-surface); border: 1px solid var(--rb-border); border-radius: 20px; resize: none; outline: none; transition: border-color var(--rb-transition); line-height: 1.5; } .chat-input__field:focus { border-color: var(--rb-accent); } .chat-input__field::placeholder { color: var(--rb-text-secondary); opacity: 0.7; } .chat-input__send { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; color: #FFFFFF; background-color: var(--rb-gold); border: none; border-radius: 50%; cursor: pointer; transition: background-color var(--rb-transition), transform var(--rb-transition); } .chat-input__send:hover { background-color: var(--rb-accent-hover); transform: scale(1.05); } .chat-input__send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .chat-input__send:focus-visible { outline: 2px solid var(--rb-navy); outline-offset: 2px; } .chat-input__send svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- Reduced Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .chat-fab--pulse { animation: none; } .chat-panel { transition: none; } .chat-panel.is-open { transition: none; } .chat-message { animation: none; } .chat-typing__dot { animation: none; opacity: 0.6; } .chat-fab:hover, .chat-input__send:hover { transform: none; } .chat-quick-reply, .chat-rich-card__btn, .chat-welcome__action-btn, .chat-header__btn, .chat-input__field, .chat-input__send { transition: none; } } /* -------------------------------------------------------------------------- L-2A: Header controls (language select, reset button, theme/sound/minimize) -------------------------------------------------------------------------- */ .chat-header__lang-wrap { position: relative; display: inline-flex; align-items: center; } .chat-header__lang-icon { position: absolute; left: 6px; pointer-events: none; color: rgba(255, 255, 255, 0.85); display: inline-flex; } .chat-header__lang-select { appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, 0.08); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; font-size: 0.75rem; padding: 4px 6px 4px 26px; cursor: pointer; line-height: 1.1; } .chat-header__lang-select:focus-visible { outline: 2px solid var(--rb-gold); outline-offset: 2px; } .chat-header__lang-select option { color: #1B3A4B; background: #FFFFFF; } .chat-header__reset-btn, .chat-header__theme-btn, .chat-header__sound-btn, .chat-header__minimize-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; color: rgba(255, 255, 255, 0.85); border: none; border-radius: 6px; cursor: pointer; transition: background-color var(--rb-transition), color var(--rb-transition); } .chat-header__reset-btn:hover, .chat-header__theme-btn:hover, .chat-header__sound-btn:hover, .chat-header__minimize-btn:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; } .chat-header__reset-btn:focus-visible, .chat-header__theme-btn:focus-visible, .chat-header__sound-btn:focus-visible, .chat-header__minimize-btn:focus-visible { outline: 2px solid var(--rb-gold); outline-offset: 2px; } /* Quick-reply strip that persists after each bot reply */ .chat-quick-reply-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 4px 0; } .chat-quick-reply-strip .chat-quick-reply { background: var(--rb-surface); color: var(--rb-text); border: 1px solid var(--rb-border); border-radius: 999px; padding: 6px 12px; font-size: 0.8125rem; cursor: pointer; transition: background-color var(--rb-transition), color var(--rb-transition), border-color var(--rb-transition); } .chat-quick-reply-strip .chat-quick-reply:hover { background: var(--rb-gold); border-color: var(--rb-gold); color: #1B3A4B; } .chat-quick-reply-strip .chat-quick-reply:focus-visible { outline: 2px solid var(--rb-gold); outline-offset: 2px; } /* -------------------------------------------------------------------------- Screen reader live region (W-15) chat-widget.ts appends a div.sr-only[aria-live=assertive] to the panel and writes " says: ..." into it on every bot message. The rule for .sr-only lived ONLY in global.css, which index.html loads but the six channel pages do not - so wherever the widget was mounted from the channel switcher the region was unstyled and its text painted into the page flow under the widget. The widget is injected into pages it does not control, so it has to carry its own accessibility utility rather than rely on a host stylesheet. Declarations are identical to global.css, so load order between the two does not matter. Deliberately clip-and-offset, NOT display:none or visibility:hidden: either of those removes the node from the accessibility tree and silences the message announcements this element exists to make. -------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- W-20: simulated SMS delivery card. The widget carries its own styling. The .sim-template__* rules that paint this card on the channel pages live in channel-whatsapp.css and channel-base.css and reach nothing inside the widget, so this card brings its own rules and shares no class names with the channel version. Colours are explicit rather than --rb-* tokens. Those tokens resolve against , but the widget owns its theme independently and publishes it on .chat-panel[data-theme]. Using tokens here would paint a light card inside a dark panel whenever the two disagree - the same mistake that gave the Messenger card the blue outgoing-message gradient. It is a --bot message, so it inherits the inbound left alignment. These rules only replace the bubble surface, because an SMS should not look like Hana speaking either. --------------------------------------------------------------------------- */ .chat-message--sms .chat-bubble--sms { background-color: #FFFFFF; color: #111B21; border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 10px; padding: 8px 10px; max-width: 100%; } .chat-panel[data-theme="dark"] .chat-message--sms .chat-bubble--sms { background-color: #1F2C33; color: #E9EDEF; border-color: rgba(255, 255, 255, 0.18); } .chat-sms__header { font-weight: 700; font-size: 0.8125rem; margin-bottom: 2px; } .chat-sms__body { font-size: 0.875rem; line-height: 1.45; /* The body is one long line carrying a code; break it rather than let it push the bubble past the panel edge. */ overflow-wrap: anywhere; } .chat-sms__footer { margin-top: 6px; font-size: 0.6875rem; opacity: 0.7; font-style: italic; } /* Q-7: language-change confirmation. Deliberately not a .chat-message. It is UI feedback about a control, not something the assistant said, and styling it as a bubble is what made it look like conversation worth keeping. One is ever present at a time. */ .chat-language-notice { align-self: center; margin: 4px 0; padding: 4px 10px; font-size: 0.75rem; border-radius: 999px; background-color: rgba(0, 0, 0, 0.06); color: #55606a; text-align: center; } .chat-panel[data-theme="dark"] .chat-language-notice { background-color: rgba(255, 255, 255, 0.10); color: #b9c2ca; } /* -------------------------------------------------------------------------- Language Switch Offer (LO-1) The offer SENTENCE is part of the bot bubble; this is only the tap target. Given its own row rather than joining the quick-reply strip so that a suggestion ("Baggage") and a control that changes the whole conversation are not presented as the same kind of thing. -------------------------------------------------------------------------- */ /* No background and no bubble radius, so it cannot be mistaken for something the assistant said; an accent rule down the left marks it as a control. Colours are literal with a scoped dark override rather than --rb-* tokens: those tokens come from the PAGE theme, and the widget owns its theme independently, so a light page with a dark widget would resolve them to the light palette on a dark panel. Same reason .chat-language-notice does it. */ .chat-language-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 2px 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--rb-accent); max-width: 100%; } /* The offer sentence, on its own line and never fused to the assistant's paragraph: .chat-bubble is white-space:normal, so a sentence appended to the reply text ran straight on from the end of it. */ .chat-language-offer__text { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: #2b3440; overflow-wrap: anywhere; } .chat-panel[data-theme="dark"] .chat-language-offer__text { color: #e6ebf1; } .chat-quick-reply--lang { color: var(--rb-navy); background-color: var(--rb-accent); border-color: var(--rb-accent); } .chat-quick-reply--lang:hover { background-color: transparent; color: var(--rb-accent); } .chat-panel[data-theme="dark"] .chat-quick-reply--lang:hover { color: var(--rb-accent); } /* -------------------------------------------------------------------------- W-27: rendered markdown subset (bold, bullets, numbered lists, paragraphs). Nodes are built in markdown-lite.ts with createElement/textContent only. .md-rendered is set ONLY when structure was produced, so a plain reply keeps the W-26 pre-wrap path untouched. Inside a structured block the browser owns the spacing, so pre-wrap is turned off there to stop the source newlines and the block margins both adding a gap. -------------------------------------------------------------------------- */ .md-rendered { white-space: normal; } .md-rendered .md-p { margin: 0 0 0.6em; white-space: pre-wrap; } .md-rendered .md-p:last-child, .md-rendered .md-list:last-child { margin-bottom: 0; } .md-rendered .md-list { margin: 0 0 0.6em; padding-left: 1.25em; } .md-rendered .md-li { margin: 0 0 0.2em; white-space: pre-wrap; } .md-rendered .md-li:last-child { margin-bottom: 0; } .md-rendered strong { font-weight: 700; }