/* Catalogue and mini-apps retain the same service document inside Messenger. */
#view-services.has-open-service > :not(.service-viewer){display:none!important}
.service-viewer[hidden],.service-viewer [hidden],.mini-app-host[hidden],.mini-app-dock[hidden]{display:none!important}
.service-viewer{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;height:100%;background:var(--bg,#f6f8fc)}
.service-viewer__header{display:flex;align-items:center;gap:10px;flex:none;min-height:60px;padding:8px 14px;background:var(--surface,#fff);border-bottom:1px solid var(--border,#e6eaf2)}
.service-viewer__header h2{font-size:17px;font-weight:650;line-height:1.3;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.service-viewer__header h2:focus{outline:none}
.service-viewer__header .btn-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border-radius:15px;color:var(--text-secondary,#53627c);border:1px solid transparent;background:transparent;transition:background-color 140ms ease,color 140ms ease,box-shadow 140ms ease}
.service-viewer__header .btn-icon:hover{background:var(--accent-soft,#edf2ff);color:var(--accent-text,var(--accent,#1d54dc))}
.service-viewer__header .btn-icon:focus-visible,.mini-app-dock:focus-visible,#messages .mini-app-link:focus-visible{outline:2px solid var(--accent,#1d54dc);outline-offset:2px}
.service-viewer__body{position:relative;flex:1;min-height:0;overflow:hidden}
.service-viewer__frames,.service-viewer__frame{width:100%;height:100%;border:0;display:block;background:var(--surface,#fff)}
.service-viewer__status{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;overflow:auto;background:var(--bg,#f6f8fc)}
.service-viewer__status p{max-width:32ch;margin:0;color:var(--text-secondary,#53627c)}
.service-viewer__placeholder{width:min(240px,70%);height:160px;flex-shrink:1;min-height:24px;border:1px solid var(--border,#e6eaf2);border-radius:28px;background:linear-gradient(150deg,var(--surface,#fff),var(--soft,#edf2fc));box-shadow:0 12px 30px #172d5810}
.service-viewer__status.is-error .service-viewer__placeholder{display:none}
.service-viewer__status .btn-primary{min-height:44px;flex:none;padding:11px 22px;border-radius:16px}
/* Shared viewport variables account for the keyboard and CSS zoom once. */
.mini-app-host{--mini-height:min(680px,calc(var(--vy-visible-height,100dvh) - 36px));position:fixed;z-index:220;right:18px;top:calc(var(--vy-visible-top,0px) + var(--vy-visible-height,100dvh) - var(--mini-height) - 18px);width:min(560px,calc(var(--vy-visible-width,100vw) - 36px));height:var(--mini-height);max-height:calc(var(--vy-visible-height,100dvh) - 16px);border:1px solid var(--border,#e3e8f1);border-radius:26px;overflow:hidden;background:var(--surface,#fff);box-shadow:0 16px 70px #14275435;isolation:isolate;animation:vy-mini-app-enter 180ms cubic-bezier(.2,.7,.2,1) both}
.mini-app-host.is-expanded{inset:auto 8px auto 8px;top:calc(var(--vy-visible-top,0px) + 8px);width:calc(var(--vy-visible-width,100vw) - 16px);height:calc(var(--vy-visible-height,100dvh) - 16px);border-radius:20px}
.mini-app-host .service-viewer__header{gap:4px;padding-inline:8px;background:color-mix(in srgb,var(--surface,#fff) 94%,var(--accent-soft,#eef3ff));border-bottom-color:color-mix(in srgb,var(--border,#e3e8f1) 64%,transparent)}
.mini-app-host .service-viewer__header h2{font-size:15px}
.mini-app-dock{position:fixed;z-index:219;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));max-width:calc(var(--vy-visible-width,100vw) - 36px);min-height:46px;padding:10px 18px;border:1px solid var(--border,#e3e8f1);border-radius:18px;background:color-mix(in srgb,var(--surface,#fff) 96%,var(--accent-soft,#eef3ff));box-shadow:0 8px 26px #14275424;color:var(--text);font:inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;transition:background-color 140ms ease,box-shadow 140ms ease}
.mini-app-dock svg{flex:none}.mini-app-dock span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mini-app-dock:hover{background:var(--accent-soft,#edf2ff);box-shadow:0 10px 30px #1427542b}
#messages .mini-app-link{display:block;padding:12px 15px;margin:4px 0;border-radius:18px;background:var(--accent-soft,#edf2ff);text-decoration:none;font-weight:600;color:var(--accent-text,var(--accent));overflow-wrap:anywhere}
#messages .mini-app-link small{display:block;margin-top:4px;font-size:12px;line-height:1.4;font-weight:400;color:var(--text-muted)}
@keyframes vy-mini-app-enter{from{opacity:.72;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){
 .service-viewer__header{min-height:56px;padding:6px 10px}.service-viewer__header h2{font-size:16px}
 .mini-app-host{--mini-height:min(calc(var(--vy-visible-height,100dvh) * .78),680px);left:6px;right:6px;top:calc(var(--vy-visible-top,0px) + var(--vy-visible-height,100dvh) - var(--mini-height) - max(6px,env(safe-area-inset-bottom,0px)));width:calc(var(--vy-visible-width,100vw) - 12px);border-radius:26px 26px 20px 20px}
 .mini-app-host.is-expanded{left:6px;right:6px;top:calc(var(--vy-visible-top,0px) + max(6px,env(safe-area-inset-top,0px)));width:calc(var(--vy-visible-width,100vw) - 12px);height:calc(var(--vy-visible-height,100dvh) - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .mini-app-host .service-viewer__header{padding-inline:6px;gap:2px}
 .mini-app-dock{bottom:calc(82px + env(safe-area-inset-bottom,0px));right:12px}
}
@media(max-height:460px){.mini-app-host{--mini-height:calc(var(--vy-visible-height,100dvh) - 24px)}.service-viewer__placeholder{height:88px}.service-viewer__status{gap:10px;padding:14px}}
html[data-vy-css-narrow] .mini-app-host{left:6px;right:6px;width:calc(var(--vy-visible-width,100vw) - 12px)}
html[data-vy-compact-composer] .mini-app-host .service-viewer__header{flex-wrap:wrap;justify-content:flex-end}
html[data-vy-compact-composer] .mini-app-host .service-viewer__header h2{order:-1;flex-basis:100%;padding:4px 8px}
@media(prefers-reduced-motion:reduce){.mini-app-host{animation:none}.service-viewer__header .btn-icon,.mini-app-dock{transition:none}}
html.motion-off .mini-app-host,html[data-vy-motion="off"] .mini-app-host{animation:none}
html.motion-off .service-viewer__header .btn-icon,html.motion-off .mini-app-dock,html[data-vy-motion="off"] .service-viewer__header .btn-icon,html[data-vy-motion="off"] .mini-app-dock{transition:none}