/* 2026-09-16 mobile-preview geometry, on the live website controllers. */
:root { --phone-width: min(100vw, 600px, calc(100dvh * 2 / 3)); --phone-height: min(150vw, 900px, 100dvh); }
html, body { min-width: 0; width: 100%; height: 100%; overflow: hidden; background: #151719; }
body { display: grid; place-items: center; }
.mobile-site { width: var(--phone-width); height: var(--phone-height); min-height: 0; overflow: auto; scrollbar-width: none; overscroll-behavior: contain; scroll-snap-type: y proximity; }
.mobile-site::-webkit-scrollbar { display: none; }
.mobile-showcase { scroll-snap-align: start; scroll-snap-stop: always; }
.mobile-header { padding: 4px 8px; min-height: 44px; grid-template-columns: minmax(0,1fr) 72px 44px; }
.brand-lockup { gap: 4px; min-width: 0; }
.next-brand-copy { min-width: 0; gap: 2px; }
.next-brand-copy strong,.next-brand-copy b { font-size: clamp(9px,2.7vw,13px); }
.next-brand-copy b { overflow: hidden; text-overflow: ellipsis; }
.mobile-agent-entry,.mobile-settings summary { border: 1px solid #407b87; border-radius: 9px; background: #000b; color: #d2f7fb; min-height: 38px; font-size: 12px; font-weight: 700; cursor: pointer; }
.mobile-agent-entry { height: 44px; padding: 0 6px; }
.mobile-settings summary { border: 0; background: transparent; }
.mobile-settings-content { width: 176px; max-width: calc(100vw - 16px); padding: 0; gap: 6px; border: 0; border-radius: 10px; background: #000b; box-shadow: none; max-height: calc(var(--phone-height) - 66px); overflow-x: hidden; }
.mobile-settings-content .get-app-button { max-width: none; width: 100%; min-height: 38px; font-size: 11px; background: #000b; }
.mobile-settings-content .website-quality,.mobile-settings-content .homepage-carousel-setting,.mobile-contact-link { padding: 0 8px; font-size: 12px; border: 1px solid #376672; border-radius: 9px; background: #000b; }
.mobile-settings-content select { min-height: 38px; min-width: 0; max-width: 92px; font-size: 12px; background: transparent; border: 0; }
.mobile-settings-content .header-tools { grid-column: 1 / -1; width: 100%; min-width: 0; }
.mobile-settings-content .language-switch { width: 100%; }
.mobile-settings-content .language-switch button { flex: 1; min-width: 0; padding: 0 10px; white-space: nowrap; font-size: 12px; min-height: 38px; }
.mobile-contact-link { min-height: 38px; }
.mobile-sidebar-menu { max-width: calc(var(--phone-width) - 16px); }
body[data-bean-mobile] #bean-chat-overlay.is-mobile,
body[data-bean-mobile] #bean-chat-overlay.is-mobile.is-expanded { inset: var(--phone-top) auto auto var(--phone-left) !important; width: var(--phone-live-width) !important; height: var(--phone-live-height) !important; border: 0 !important; border-radius: 0 !important; transform: none !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-panel { display: block !important; width: 100%; height: 100%; padding: 0; border-radius: 0; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-toolbar { position: absolute !important; inset: 8px 8px auto !important; display: flex !important; justify-content: space-between; width: auto !important; padding: 0 !important; gap: 4px; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-toolbar-group { gap: 4px !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-tool { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; padding: 4px !important; border-radius: 7px !important; background: #000b !important; border: 1px solid #78c1cb !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-expand,
body[data-bean-mobile] #bean-chat-overlay .bean-chat-close { display: none !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-header,
body[data-bean-mobile] #bean-chat-overlay .bean-chat-agent-card { display: none !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-log { position: absolute !important; inset: 44px 0 64px !important; padding: 0 !important; overflow: hidden !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-agent-layout { position: absolute !important; inset: 0 !important; display: block !important; height: 100% !important; min-height: 0 !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-agent-stage { position: absolute !important; inset: auto auto 0 0 !important; width: 24% !important; height: 40% !important; min-height: 0 !important; max-height: 300px; overflow: visible; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-agent-art { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; object-position: center bottom; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-agent-art[data-character-fit="visible-bounds"] { inset: auto !important; width: var(--fit-width) !important; height: var(--fit-height) !important; left: var(--fit-left) !important; top: var(--fit-top) !important; object-fit: fill !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-agent-main { position: absolute !important; inset: 0 0 0 24% !important; width: auto !important; height: 100% !important; min-height: 0 !important; padding: 8px 12px 20px 8px !important; overflow: auto !important; overscroll-behavior: contain; gap: 12px !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-intro-message { padding: 10px !important; border-radius: 10px; background: #000b !important; flex-shrink: 0; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-intro-message p,
body[data-bean-mobile] #bean-chat-overlay .bean-chat-bubble { font-size: 14px !important; line-height: 1.6 !important; overflow-wrap: anywhere; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-actions { position: absolute !important; inset: auto 0 0 !important; padding: 8px 10px !important; background: transparent !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-form { display: grid !important; grid-template-columns: minmax(0,1fr) 58px !important; gap: 8px !important; height: 46px !important; min-height: 0 !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-input,
body[data-bean-mobile] #bean-chat-overlay .bean-chat-send { height: 46px !important; min-height: 46px !important; min-width: 0 !important; border-radius: 12px !important; font-size: 16px !important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-input { padding: 0 10px; background: #000b; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-send { background: #77edff !important; color: #041117 !important; }
.mobile-centers { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; width: 100%; flex-shrink: 0; }
.mobile-center-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; padding: 8px 2px; gap: 4px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(#091b20e8,#091b20e8) padding-box,linear-gradient(135deg,#7eeeff,#ff8bcf,#d0a2ff,#ffe89d) border-box; cursor: pointer; }
.mobile-center-button img { width: 40px; height: 40px; object-fit: contain; }
.mobile-center-button span { font-size: clamp(9px,2.3vw,12px); font-weight: 700; white-space: nowrap; }
.mobile-center-button::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg,#7eeeff,#ff8bcf,#d0a2ff,#ffe89d); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.mobile-center-content { min-width: 0; flex-shrink: 0; }
.mobile-center-content:empty { display: none; }
.mobile-center-content iframe { color-scheme:dark!important; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-conversion { grid-template-columns: minmax(0,1fr) 66px; padding: 8px; min-height: 110px; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-conversion-link strong { font-size: 11px; white-space: normal; }
body[data-bean-mobile] #bean-chat-overlay .bean-chat-conversion-link small { font-size: 9px; }
@media (max-height:480px) { body[data-bean-mobile] #bean-chat-overlay .bean-chat-intro-message p { font-size: 12px !important; } }
@layer dialog-surfaces {
  body[data-bean-mobile] #bean-chat-overlay .bean-chat-send { background:#77edff!important; color:#041117!important; }
}
/* The website remains mounted for its controllers; its scene must not bleed through the agent view. */
body[data-bean-mobile]:not([data-mobile-view="website"]) .mobile-site{visibility:hidden}