/* Owner-approved mobile/scroll design. Main supplies data-call-active and data-chat-open from actual state. */
#app{--rosi-mobile-header:72px;--rosi-accent:#b8f326}
#app .brandbar .gpt{background:var(--rosi-accent);position:relative;top:-3px}
#app .brandbar .brand{align-items:baseline;gap:4px}
#app .brandbar .release-tag{font-size:9px;line-height:1}
#app .brandbar .release-tag>span:first-child{text-transform:lowercase}
#app .primary{background:var(--rosi-accent)}
#app .primary:hover{background:#b2eb27}
#app .controls #primary-action,#app .controls #hangup,#app .controls #landing-whatsapp,
#app #call-share-actions .share-action,#app #mobile-social .share-action{
 display:flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;
 width:100%;min-height:48px;height:auto;border-radius:13px;padding:12px 13px;
 font-size:15px;font-weight:600;line-height:1.35;
 border:1px solid transparent;box-shadow:inset 0 1px 0 #ffffff65,0 2px 3px #25262212;
}
#app .controls #primary-action{background:var(--rosi-accent);color:#30352a}
#app .controls.active #primary-action{background:#e3e6df;color:#30352a;border-color:#cfd4c9}
#app .controls #hangup{background:#f4c8c5;border-color:#e8a29d;color:#8f2723}
#app #landing-whatsapp,#app #call-whatsapp,#app #mobile-social-whatsapp{background:#20db68;color:#103b20}
#app #call-instagram,#app #mobile-social-instagram{background:linear-gradient(110deg,#7134bd,#b32d8d,#d53460,#b84a16);color:#fff}
#app .social-neutral{background:#e3e6df;color:#30352a;border-color:#cfd4c9}
#app .controls .primary-icon{display:inline-block;margin-right:0;mask-image:url('phone-start.svg');-webkit-mask-image:url('phone-start.svg')}
#app .controls.active .primary-icon{mask-image:url('microphone-icon.svg');-webkit-mask-image:url('microphone-icon.svg')}
#app .controls.active #primary-action[data-mic-action="mute"] .primary-icon{mask-image:url('microphone-off-icon.svg');-webkit-mask-image:url('microphone-off-icon.svg')}
#app [hidden]{display:none!important}
#app .brandbar #chat-reopen{position:absolute;top:14px;right:13px;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;border-radius:50%;box-shadow:none;display:flex;align-items:center;justify-content:center}
#app .brandbar #chat-reopen>svg{width:27px;height:27px;color:#546d2f}
#app .brandbar .rosi-message-badge{top:-1px;right:0;min-width:19px;height:19px;font-size:10px;padding:0 3px;background:var(--rosi-accent);color:#34451b;border:2px solid #fff;border-radius:12px}
#app .brandbar #chat-reopen[data-message-arrival]>.rosi-message-badge{animation:rosi-final-message-glow .65s ease-out}
#app .brandbar #chat-reopen[data-message-arrival]>svg{animation:none}
#app .mobile-help-open .question{width:29px;height:29px;border:2px solid var(--rosi-accent);color:#252622;font-size:21px;font-weight:750;border-radius:50%;text-shadow:0 1px 1px #0002;box-shadow:0 1px 2px #0001}
#app #call-share-actions{max-width:390px;margin:0 auto;padding:8px 24px 12px;display:grid;gap:8px}
#app #mobile-social{display:grid;max-width:1060px;margin:0 auto;padding:0;grid-template-columns:1fr}
#app #mobile-social .social-feature{padding:22px 24px 16px;text-align:center;min-width:0}
#app #mobile-social h2{font-size:28px;line-height:1.08;letter-spacing:-.8px;margin:0 0 10px}
#app #mobile-social .social-image{margin:0 auto;width:100%;max-width:100%;height:245px}
#app #mobile-social .social-image img,#app #mobile-social .social-image video{height:100%;width:100%;object-fit:contain}
#app #mobile-social .social-share-message{position:relative;text-align:left;border-radius:16px 16px 16px 4px;background:#eff5e6;padding:12px 13px;margin:8px 0 10px;font-size:15px;line-height:1.45}
#app #mobile-social .social-share-message::before{content:"";position:absolute;bottom:0;left:-7px;width:13px;height:12px;background:#eff5e6;clip-path:polygon(100% 0,100% 100%,0 100%)}
#app .social-share-tools{display:grid;gap:8px;margin-top:8px}
#app .social-share-tools svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#app #mobile-social .social-privacy{font-size:11px;font-style:italic;color:#777b70;margin:10px 0 0}
@keyframes rosi-final-message-glow{from{box-shadow:0 0 0 0 #b8f326aa;filter:brightness(1.2)}to{box-shadow:0 0 0 8px #b8f32600;filter:brightness(1)}}
@media(max-width:767px),(max-width:1024px) and (pointer:coarse){
 #app .brandbar{height:72px;min-height:72px;padding:0 64px;justify-content:center;position:relative}
 #app .brandbar .wordmark{font-size:36px}#app .brandbar .claim{font-size:10px;margin-top:2px;line-height:1.2}
 #app .mobile-help-open{left:13px;right:auto;top:14px;background:transparent;width:44px;height:44px}
 #app .conversation,#app .conversation.chat-collapsed{height:calc(100svh - 72px);height:calc(100dvh - 72px);min-height:350px;padding:0;position:relative}
 #app .presence{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:0;border:0}
 #app .scene-body,#app #stage{height:100%;min-height:0;width:100%}
 #app #stage .main-motion-video,#app #stage img{height:100%;width:100%;object-fit:contain}
 #app .controls,#app .controls.active,#app .controls.active:has(#call-whatsapp:not([hidden])){padding:0 24px max(14px,env(safe-area-inset-bottom));row-gap:8px;grid-template-rows:18px minmax(48px,auto) minmax(48px,auto);align-content:end}
 #app .controls #primary-action,#app .controls #hangup,#app .controls #landing-whatsapp{max-width:none;width:100%}
 #app .controls .notice:not([hidden]){grid-column:1;grid-row:auto;padding-bottom:8px}
 #app #desktop-steps{display:none!important}
 #app #conversation-panel{display:none!important}
 #app[data-chat-open="true"] .scene-body{visibility:hidden}
 #app[data-chat-open="true"] #conversation-panel{display:grid!important;position:absolute;inset:0 24px 148px;min-height:0;z-index:3;background:white;grid-template-rows:44px minmax(0,1fr) auto;padding:0}
 #app[data-chat-open="true"] #conversation-panel .chat-header{padding:0;min-height:44px}
 #app[data-chat-open="true"] #conversation-panel .chat-title img,#app[data-chat-open="true"] #conversation-panel #help-open{display:none}
 #app[data-chat-open="true"] #conversation-panel #chat-collapse{position:static;transform:none;min-height:44px;min-width:44px}
 #app[data-chat-open="true"] #conversation-panel .messages{padding:8px 0}
}
@media(min-width:768px) and (pointer:fine){
 #app .brandbar{position:relative}#app .brandbar #chat-reopen{top:24px;right:32px}
 #app .mobile-help-open{right:90px;top:24px}
 #app .controls #primary-action,#app .controls #hangup,#app .controls #landing-whatsapp{width:264px;min-height:44px;font-size:14px;padding:10px 13px}
 #app .controls,#app .controls.active{grid-template-rows:18px minmax(44px,auto) minmax(44px,auto);gap:8px}
 #app #mobile-social{grid-template-columns:1fr 1fr;gap:24px}
 #app #mobile-social .social-image{height:290px}
 #app .social-share-tools{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){#app .brandbar #chat-reopen[data-message-arrival]>.rosi-message-badge{animation:none}}

/* 15 Sep: direct owner refinements after the first port. */
#app[data-call-active="true"] #mobile-social,#app[data-call-active="true"]>footer{display:none!important}
#app .social-share-message .share-site{display:inline;white-space:nowrap;margin:0}
#app .social-share-message .share-mini-logo{display:none}
#app .brandbar #chat-reopen[data-message-arrival]{animation:rosi-phone-arrival .65s ease-out}
@keyframes rosi-phone-arrival{0%{background:#b8f326bb;box-shadow:0 0 0 2px #b8f32699,0 0 20px #b8f326aa;border-radius:15px}100%{background:transparent;box-shadow:0 0 0 8px #b8f32600,0 0 25px #b8f32600;border-radius:15px}}
@media(min-width:768px) and (pointer:fine){
 #app .brandbar{height:72px;min-height:72px;padding-top:0}
 #app .brandbar #chat-reopen,#app .mobile-help-open{top:14px}
 #app .conversation,#app .conversation.chat-collapsed{height:calc(100dvh - 72px);min-height:470px}
 #app .presence{min-height:0;grid-template-rows:minmax(0,1fr) auto auto}
 #app .scene-body{min-height:0}#app #stage{height:100%;max-height:none}
 #app #stage .main-motion-video,#app #stage img{height:100%;width:100%;object-fit:contain;object-position:center top}
 #app .controls,#app .controls.active{padding-top:4px;padding-bottom:24px}
 #app #mobile-social .social-feature{padding:24px;min-width:0}
 #app #mobile-social h2{font-size:clamp(26px,2.6vw,34px)}
 #app #desktop-help .desktop-help-inner{padding:12px 28px 18px}
 #app #desktop-help-title{font-size:38px;line-height:1.05;letter-spacing:-1.2px;margin:4px 0 12px}
 #app #desktop-help .usp-list{gap:14px}
 #app #desktop-help .usp{display:grid;grid-template-columns:102px minmax(0,1fr);gap:15px;min-height:108px;align-items:center;text-align:left}
 #app #desktop-help .usp img,#app #desktop-help .usp video{width:102px;height:108px;object-fit:contain}
 #app #desktop-help .usp strong{font-size:16px;line-height:1.25}
 #app #desktop-help .usp span{font-size:13px;line-height:1.4}
}
@media(prefers-reduced-motion:reduce){#app .brandbar #chat-reopen[data-message-arrival]{animation:none}}

/* Apply only the safe area actually supplied by the browser/standalone display. */
#app{--rosi-safe-top:env(safe-area-inset-top,0px)}
#app .brandbar{height:calc(72px + var(--rosi-safe-top));min-height:calc(72px + var(--rosi-safe-top));padding-top:var(--rosi-safe-top)}
#app .brandbar #chat-reopen,#app .mobile-help-open{top:calc(14px + var(--rosi-safe-top))}
#app .conversation,#app .conversation.chat-collapsed{height:calc(100svh - 72px - var(--rosi-safe-top));height:calc(100dvh - 72px - var(--rosi-safe-top))}
#app #mobile-social h2,#app .social-share-message{white-space:pre-line}

/* Override the old mobile-only chat suppression after actual state unhides it. */
#app .brandbar #chat-reopen:not([hidden]){display:flex!important}

#app .brandbar .rosi-message-badge{position:absolute;display:grid;place-items:center;font-weight:700}
#app .brandbar #chat-reopen>svg{flex:none}

/* Existing local-greeting stop control takes the Help slot only while audible. */
#app #landing-audio-stop{position:absolute;z-index:4;top:calc(14px + var(--rosi-safe-top));right:90px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#fff;color:#546d2f;display:grid;place-items:center}
#app #landing-audio-stop[hidden]{display:none!important}
#app #landing-audio-stop svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
#app #landing-audio-stop-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:767px),(max-width:1024px) and (pointer:coarse){#app #landing-audio-stop{left:13px;right:auto}}