* { margin: 0; padding: 0; box-sizing: border-box; } /* ========================================================================== FIT TOKENS -------------------------------------------------------------------------- This page is almost always rendered inside a host page's iframe, and an iframe's viewport is the size of the *iframe element*, not of the phone. A 400x700 frame reports 400x700 on every device, so a width media query can never tell us how much of the widget the visitor can actually see -- if the host positions that frame partly off-screen, the overflow is simply clipped away by the device and nothing we serve can move it back. web.js measures the genuinely visible rectangle (IntersectionObserver reports it clipped by the top-level viewport, even cross-origin) and publishes it here as --fit-* insets plus a tier class on . The rules below size themselves from these tokens, so one set of declarations serves every breakpoint and every crop. ========================================================================== */ :root { /* Insets of the visible area. Zero unless the host page crops us. */ --fit-top: 0px; --fit-right: 0px; --fit-bottom: 0px; --fit-left: 0px; --fit-logo: 70px; --fit-logo-mb: 15px; --fit-title: 24px; --fit-subtitle: 12px; --fit-desc: 12px; --fit-desc-mb: 22px; --fit-header-mt: 0px; --fit-card-pad: 14px; --fit-card-pad-b: 14px; --fit-card-title: 14px; --fit-gap: 8px; /* Chat transcript, and the Send label. Both step down on narrow viewports; see the 380px split below. */ --fit-msg: 14px; --fit-send-font: 14px; --fit-time: 11px; /* Controls stay >= 44px (WCAG 2.5.5 / Apple HIG). --fit-control-font is 16px here, 16px again from 401-480px, and 12px at 400px and below -- which is where the host's panel sits. Below 16px iOS Safari zooms the whole HOST page when the field is focused; this was checked on a real device and accepted for the narrow case. If a zoom is ever reported, widening the 16px band is the fix. */ --fit-control-h: 64px; --fit-control-max-h: 120px; --fit-control-font: 16px; /* Breathing room around the landing input row. Horizontal padding is free -- it costs no vertical space -- so it stays roomier than the vertical. */ --fit-footer-pad: 12px 16px; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: white; /* Seamless white background for iframe embedding */ height: 100vh; height: 100dvh; /* The chat flexes, the footer never overlaps it. Replaces a 93vh container plus a sibling footer, which only added up to 100% at one frame height. */ display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; margin: 0; overflow: hidden; /* Pull the UI inside whatever part of the frame is actually on-screen. */ padding: var(--fit-top) var(--fit-right) var(--fit-bottom) var(--fit-left); } .chat-container { background: white; border-radius: 0; box-shadow: none; width: 100%; max-width: 100%; flex: 1 1 auto; /* Without this a flex item refuses to shrink below its content, and the inner scroll areas never get a chance to scroll. */ min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* Landing Page Styles */ .landing-page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: white; display: flex; flex-direction: column; z-index: 10; transition: opacity 0.3s ease, transform 0.3s ease; overflow: hidden; } .landing-page.hidden { opacity: 0; pointer-events: none; transform: translateY(-20px); } .landing-wrapper { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } /* Centring via `justify-content: center` pushes overflow *above* the scroll origin, where it can never be scrolled to -- on a short frame the logo and title simply became unreachable. Auto-margin spacers centre the content the same way when there is room, and collapse to zero when there is not, so the overflow stays scrollable. Works everywhere, unlike `safe center`. */ .landing-wrapper::before, .landing-content::before { content: ''; margin-top: auto; } .landing-wrapper::after, .landing-content::after { content: ''; margin-bottom: auto; } .landing-header { padding: 0 20px 15px; margin-top: var(--fit-header-mt); text-align: center; } .landing-logo { width: var(--fit-logo); /* height: 70px; */ border-radius: 20%; margin-bottom: var(--fit-logo-mb); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } .landing-title { font-size: var(--fit-title); color: #333; margin-bottom: 8px; } .landing-subtitle { font-size: var(--fit-subtitle); color: #666; } .landing-content { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 20px 20px; overflow-y: auto; } .landing-description { text-align: center; margin-bottom: var(--fit-desc-mb); margin-top: 10px; } .landing-description h2 { font-size: 15px; color: #333; margin-bottom: 8px; font-weight: 600; } .landing-description p { font-size: var(--fit-desc); color: #666; line-height: 1.5; } .question-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fit-gap); max-width: 500px; margin: 0 auto; width: 100%; } .question-card { background: #f7f7f8; border: 1px solid #e5e5e5; border-radius: 12px; padding: var(--fit-card-pad); padding-bottom: var(--fit-card-pad-b); cursor: pointer; transition: all 0.2s ease; text-align: left; } .question-card:hover { background: #ececf1; border-color: #667eea; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15); } .question-card-title { font-size: var(--fit-card-title); font-weight: 600; color: #333; margin-bottom: 4px; } .question-card-desc { font-size: 11px; color: #666; } .landing-footer { padding: var(--fit-footer-pad); background: white; border-top: 1px solid #eee; flex-shrink: 0; } .landing-input-wrapper { display: flex; gap: 10px; align-items: stretch; } .landing-input { flex: 1; padding: 12px 16px; border: 2px solid #eee; border-radius: 25px; font-size: var(--fit-control-font); outline: none; transition: border-color 0.3s; resize: none; overflow-y: auto; min-height: var(--fit-control-h); max-height: var(--fit-control-max-h); font-family: inherit; line-height: 1.4; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .landing-input::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .landing-input:focus { /* border-color: #667eea; */ border-color: #38bdf8; } .landing-send-button { background: linear-gradient(135deg, #000080 0%, #000080 100%); color: white; border: none; border-radius: 25px; padding: 12px 30px; font-size: var(--fit-send-font); font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; align-self: stretch; min-height: var(--fit-control-h); } .landing-send-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } /* Chat Interface Styles */ .chat-interface { display: flex; flex-direction: column; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; overflow: hidden; } .chat-interface.active { opacity: 1; pointer-events: auto; } .chat-header { background: #000080; color: white; padding: 6px 15px; display: flex; align-items: center; gap: 6px; } .header-logo { width: 40px; /* height: 40px; */ border-radius: 20%; border: 2px solid rgba(255, 255, 255, 0.3); } .header-info { flex: 1; } .header-info h1 { font-size: 14px; margin-bottom: 2px; } .header-info p { font-size: 12px; opacity: 0.9; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; background: white; -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .chat-messages::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .message { margin-bottom: 15px; display: flex; flex-direction: column; } .message.user { align-items: flex-end; } .message.bot { align-items: flex-start; } .bot-message-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .bot-avatar { width: 36px; /* height: 28px; */ border-radius: 20%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .bot-name { font-size: 13px; font-weight: 600; color: #333; } .message-bubble { max-width: 80%; padding: 12px 16px; border-radius: 18px; word-wrap: break-word; line-height: 1.4; font-size: var(--fit-msg); } .message.user .message-bubble { background: #000080; color: white; } .message.bot .message-bubble { background: #f8f9fa; color: #333; box-shadow: none; border: 1px solid #e9ecef; margin-left: 36px; } .message-time { font-size: var(--fit-time); color: #999; margin-top: 5px; padding: 0 5px; } .message.bot .message-time { margin-left: 36px; } .typing-indicator { display: none; padding: 12px 16px; background: #f8f9fa; border-radius: 18px; width: 74px; border: 1px solid #e9ecef; margin-left: 36px; } .typing-indicator.active { display: block; } .typing-indicator span { height: 8px; width: 8px; background: #999; border-radius: 50%; display: inline-block; margin-right: 4px; animation: typing 1.4s infinite; } .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } .processing-typewriter { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; font-style: italic; width: 0; animation: processing-type 3.4s steps(18, end) infinite; } @keyframes processing-type { 0% { width: 0; } 45% { width: 14em; } 85% { width: 14em; } 100% { width: 0; } } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } } .chat-input-container { padding: 5px; background: white; border-top: 1px solid #eee; } .chat-input-wrapper { display: flex; gap: 10px; align-items: stretch; } .chat-input { flex: 1; padding: 12px 16px; border: 2px solid #eee; border-radius: 25px; font-size: var(--fit-control-font); outline: none; transition: border-color 0.3s; resize: none; overflow-y: auto; min-height: var(--fit-control-h); max-height: var(--fit-control-max-h); font-family: inherit; line-height: 1.4; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .chat-input::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .chat-input:focus { border-color: #38bdf8; } .send-button { background: linear-gradient(135deg, #000080 0%, #000080 100%); color: white; border: none; border-radius: 25px; padding: 12px 30px; font-size: var(--fit-send-font); font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; align-self: stretch; min-height: var(--fit-control-h); } .send-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } .send-button:active { transform: translateY(0); } .send-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .camera-button { background: #f3f4f6; color: #333; border: 2px solid #eee; border-radius: 25px; padding: 0 18px; font-size: 22px; line-height: 1; cursor: pointer; transition: background 0.2s, transform 0.2s; flex-shrink: 0; align-self: stretch; min-height: var(--fit-control-h); } .camera-button:hover { background: #e5e7eb; transform: translateY(-2px); } .camera-button:active { transform: translateY(0); } .camera-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .message-images { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .message-images:last-child { margin-bottom: 0; } .message-image { display: block; width: 160px; max-width: 100%; height: auto; border-radius: 12px; object-fit: cover; } .message-text { word-break: break-word; } .staged-images { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; } .staged-images:empty { display: none; } .staged-image { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f3f4f6; border: 1px solid #e5e7eb; } .staged-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .staged-image .remove-staged { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: white; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .staged-image .remove-staged:hover { background: rgba(0, 0, 0, 0.85); } .submit-complaint-button { display: block; margin-top: 14px; padding: 10px 22px; background: linear-gradient(135deg, #000080 0%, #000080 100%); color: white; border: none; border-radius: 25px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .submit-complaint-button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); } .submit-complaint-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .error-message { background: #ff4444; color: white; padding: 10px; border-radius: 10px; margin: 10px 20px; font-size: 14px; display: none; } .error-message.active { display: block; } .quick-questions { padding: 5px; background: white; border-top: 1px solid #eee; display: flex; gap: 2px; overflow-x: auto; flex-shrink: 0; min-height: 46px; } .quick-question { background: #f0f0f0; border: none; padding: 0px 8px; border-radius: 20px; font-size: 12px; cursor: pointer; white-space: nowrap; transition: background 0.2s; flex-shrink: 0; min-height: 32px; } .quick-question:hover { background: #e0e0e0; } .quick-question:disabled { opacity: 0.5; cursor: not-allowed; background: #f0f0f0; } .company-footer { flex: 0 0 auto; /* margin-top: 1.2rem; */ padding-top: 1rem; padding-bottom: 1.1rem; border-top: 1px solid #333; background: #333; text-align: center; } .company-footer p { font-size: 0.7rem; /* line-height: 1.4; */ color: white; } .company-footer a { font-weight: bold; color: #38bdf8; } .message-bubble table { border: 1px solid #e5e5e5; background: white; } .message-bubble th { padding: 5px; background: #e5e5e5; } .message-bubble td { padding: 5px; } .message-bubble h3 { margin-top: 10px; margin-bottom: 5px; } /* ========================================= */ /* Responsive Design for Mobile and Tablets */ /* ========================================= */ @media (max-width: 900px) { :root { --fit-logo: 70px; --fit-logo-mb: 12px; --fit-title: 20px; --fit-desc: 11px; --fit-desc-mb: 20px; --fit-header-mt: 20px; --fit-card-pad: 12px; --fit-card-pad-b: 12px; --fit-send-font: 12px; } .chat-container { border-radius: 0; /* height: 95vh; */ /* height: 95dvh; */ /* Dynamic viewport height for mobile */ /* min-height: 95vh; */ /* min-height: 95dvh; */ /* max-height: none; */ } /* Landing Page Mobile */ .landing-header { padding: 0 20px 12px; } .landing-content { padding: 0 20px 15px; } .landing-description h2 { font-size: 12px; } .landing-description p { padding: 0 5px; } .question-cards { grid-template-columns: 1fr 1fr; max-width: 100%; } .question-card-desc { font-size: 11px; } .landing-input { padding: 11px 15px; } .landing-send-button { padding: 11px 26px; } /* Chat Interface Mobile */ .chat-header { padding: 6px 12px; } .header-logo { width: 35px; /* height: 35px; */ } .header-info h1 { font-size: 14px; } .header-info p { font-size: 11px; } .chat-messages { padding: 15px; padding-top: 30px; } .message-bubble { max-width: 85%; } .bot-avatar { width: 36px; /* height: 24px; */ } .bot-name { font-size: 12px; } .message.bot .message-bubble { margin-left: 32px; } .message.bot .message-time { margin-left: 32px; } .typing-indicator { margin-left: 32px; } .quick-questions { gap: 2px; } .quick-question { padding: 6px 12px; font-size: 11px; } .chat-input { padding: 10px 14px; } .send-button { padding: 10px 24px; } } /* ========================================= */ /* Super small devices (phones, 400px and down) */ /* ========================================= */ /* ========================================= */ /* Extra small devices (phones, 480px and down) */ /* ========================================= */ @media (max-width: 480px) { :root { --fit-logo: 90px; --fit-logo-mb: 12px; --fit-title: 19px; --fit-subtitle: 11px; --fit-desc: 11px; --fit-desc-mb: 20px; --fit-header-mt: 24px; --fit-card-pad: 13px; --fit-card-pad-b: 11px; --fit-card-title: 12px; --fit-msg: 12px; --fit-send-font: 12px; --fit-time: 12px; --fit-control-font: 12px; --fit-control-h: 54px; --fit-footer-pad: 10px 14px; } .chat-container { border-radius: 0; } /* Landing Page - Extra Small Mobile */ .landing-header { padding: 0 15px 6px; margin-bottom: 0; } .landing-content { padding: 0 15px 15px; } .landing-description h2 { font-size: 14px; } .landing-description p { padding: 0 4px; } .question-card-desc { font-size: 9px; } .landing-input { font-size: var(--fit-control-font) !important; min-height: var(--fit-control-h) !important; max-height: var(--fit-control-max-h) !important; padding: 8px 16px !important; white-space: normal !important; overflow-x: auto !important; overflow-y: auto !important; } .landing-input-wrapper { gap: 12px; } .landing-send-button { padding: 12px 24px; } /* Chat Interface - Extra Small Mobile */ .message-bubble { max-width: 90%; padding: 14px 18px; } .bot-message-header { margin-bottom: 8px; } .bot-avatar { width: 36px; } .bot-name { font-size: 12px; } .message.bot .message-bubble { margin-left: 40px; } .message.bot .message-time { margin-left: 40px; } .typing-indicator { margin-left: 40px; width: 77px; padding: 14px 18px; } .typing-indicator span { height: 9px; width: 9px; } .quick-questions { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ gap: 2px; } .quick-questions::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .quick-question { font-size: 12px; padding: 12px 18px; min-height: 44px; margin: 0; } .chat-input { font-size: var(--fit-control-font) !important; min-height: var(--fit-control-h) !important; max-height: var(--fit-control-max-h) !important; padding: 8px 16px !important; white-space: normal !important; overflow-x: auto !important; overflow-y: auto !important; } .send-button { padding: 12px 24px; } .error-message { font-size: 14px; padding: 14px; margin: 14px 16px; } } /* ========================================================================== THE 400px SPLIT -------------------------------------------------------------------------- Below is the compact scale, above it the roomier one. Note this is a proportionality rule -- narrower gets smaller type -- and NOT a test for being in an iframe, which a width query cannot do: the host's panel is 400px wide while the phones it would need to be told apart from are narrower still (iPhone SE 375, iPhone 14 Pro 393). The bound is inclusive precisely so the host's 400px panel lands on the compact side; `max-width: 399px` would miss it by one pixel, which is the whole case this split exists for. ========================================================================== */ @media (max-width: 400px) { :root { --fit-time: 10px; } } /* Wider than the host's panel: real estate enough for a full-size control. */ @media (min-width: 401px) and (max-width: 480px) { :root { --fit-msg: 15px; --fit-control-font: 16px; --fit-send-font: 16px; } } /* ========================================================================== VISIBLE-HEIGHT TIERS -------------------------------------------------------------------------- Applied by web.js from how much of the widget is actually on screen, which is why these are classes and not media queries: our viewport height is a constant 700px on a phone and on a desktop alike when the host frame says so. They also fire when the host simply gives us a short frame. Floors held at every tier: controls >= 44px tall, inputs >= 16px, secondary text >= 11px. Nothing below shrinks past those. ========================================================================== */ /* Under 640px visible. */ body.fit-h-md { --fit-logo: 64px; --fit-logo-mb: 8px; --fit-title: 15px; --fit-header-mt: 12px; --fit-desc-mb: 14px; --fit-card-pad: 11px; --fit-card-pad-b: 10px; --fit-card-title: 11px; --fit-control-h: 54px; --fit-control-max-h: 96px; --fit-footer-pad: 10px 12px; } /* Under 560px visible. */ body.fit-h-sm { --fit-logo: 48px; --fit-logo-mb: 6px; --fit-title: 14px; --fit-header-mt: 6px; --fit-desc-mb: 10px; --fit-card-pad: 9px; --fit-card-pad-b: 8px; --fit-card-title: 11px; --fit-gap: 6px; --fit-control-h: 54px; --fit-control-max-h: 84px; --fit-footer-pad: 8px 10px; } /* Under 340px visible. */ body.fit-w-sm { --fit-card-pad: 8px; --fit-card-pad-b: 7px; --fit-card-title: 11px; } /* =========================== CLIENT-SPECIFIC OVERRIDES =========================== */