/* Yallo: connection motion and readable, consistent controls. */
.app .setup .connectionIntro .helloOrbits{display:block;position:relative;width:88px;height:62px;margin:0 0 16px;isolation:isolate;pointer-events:none}
.app .setup .helloOrbits .orbitBubble{display:grid;place-items:center;position:absolute;left:8px;top:4px;width:46px;height:40px;border-radius:15px 15px 15px 5px;border:1px solid #bdd9ff;background:#edf5ff;color:#1260f5;box-shadow:0 5px 16px #1260f511;animation:yalloHello 4s ease-in-out infinite}
.app .setup .helloOrbits .orbitBubble svg{width:24px;height:24px}
.app .setup .helloOrbits::after{content:'•••';display:grid;place-items:center;position:absolute;left:43px;top:24px;width:34px;height:28px;border-radius:10px 10px 4px 10px;background:#1260f5;color:#fff;font-size:15px;letter-spacing:2px;animation:yalloReply 4s ease-in-out infinite}
.app .setup .helloOrbits .orbitDot{position:absolute;left:0;top:48px;width:5px;height:5px;background:#29a9ae;animation:yalloSignal 4s ease-in-out infinite}
.app .setup .helloOrbits .orbitSpark{position:absolute;right:3px;top:0;color:#27a9ac;font-size:17px;animation:yalloSignal 4s ease-in-out infinite;animation-delay:.4s}
@keyframes yalloHello{0%,100%{transform:translateY(0) rotate(-3deg)}45%{transform:translateY(-4px) rotate(1deg)}}
@keyframes yalloReply{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-3px);opacity:1}}
@keyframes yalloSignal{0%,100%{opacity:.45}50%{opacity:1}}
.app .setup .label{font-size:12px;line-height:1.5;letter-spacing:.6px;color:#526176}
.app .setup .modeHint,.app .setup .numberEntry p{font-size:13px;line-height:1.6;color:#526176}
.app .setupActions .consent{font-size:14px;line-height:1.6;color:#45546a}
.app .setup .matchOptions button{font-size:14px;line-height:1.4;min-height:44px}
.app .setup .modes button{transition:background-color .18s,border-color .18s,box-shadow .18s}
@media(hover:hover){.app .setup .modes button:enabled:hover{border-color:#779bd0;box-shadow:0 3px 12px #18375a0b}.app .setupActions .start:enabled:hover{background:#0c50d4}}
.app button:focus-visible,.app a:focus-visible,.infoPage a:focus-visible{outline:3px solid #1260f5;outline-offset:3px}
.app .infoMenu .menuPanel a{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;font-size:14px;line-height:1.5;color:#29475e;border-radius:8px;white-space:normal}
.app .infoMenu .menuPanel a>span{display:block;font-size:14px}
.infoPage{color:#243449}
.infoPage .infoSections p{font-size:16px;line-height:1.8;color:#46576b;max-width:72ch;overflow-wrap:anywhere}
.infoPage .infoSections h2{font-size:20px;line-height:1.4;letter-spacing:-.3px}
.infoPage .infoTabs{display:flex;flex-wrap:wrap;gap:6px}
.infoPage .infoTabs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;font-size:14px;line-height:1.4;white-space:normal;text-align:center}
.infoPage .infoBack,.infoPage .infoEnd a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.app .setupActions{flex-shrink:0}
@media(max-width:760px){.app .setup .connectionIntro .helloOrbits{width:88px;height:54px;margin-bottom:12px}.app .setup .connectionIntro h1{font-size:clamp(28px,7.5vw,34px)}.app .setupContent{scroll-padding-block:16px}.infoPage .infoSections p{font-size:15px;line-height:1.75}.infoPage .infoSections h2{font-size:18px}.app .setupActions .start{min-height:50px;font-size:16px}}
@media(max-height:650px){.app .setup .connectionIntro .helloOrbits{height:42px;margin-bottom:8px;transform:scale(.8);transform-origin:left top}.app .setup .connectionIntro{padding-bottom:10px}.app .setup .modes button,.app .setup .modes.threeModes button{min-height:72px}}
@media(prefers-reduced-motion:reduce){.app .setup .helloOrbits *,.app .setup .helloOrbits::after{animation:none!important;transform:none!important}.app .setup .modes button{transition:none}}

/* Information pages are documents, not the fixed chat viewport. */
html:has(.infoPage),body:has(.infoPage){height:auto;min-height:100%;overflow:auto;overscroll-behavior:auto}
.infoPage{height:auto;min-height:100dvh;max-height:none;overflow:visible;width:100%;min-width:0}
.infoPage main{width:100%;min-width:0;height:auto;max-height:none;overflow:visible;box-sizing:border-box}
.infoPage .infoHero,.infoPage .infoSections,.infoPage .infoSections section,.infoPage .infoSections section>div{min-width:0;max-width:100%;height:auto;max-height:none;overflow:visible}
.infoPage .infoHero h1{width:100%;max-width:100%;font-size:clamp(28px,5vw,46px);line-height:1.18;white-space:normal;overflow-wrap:anywhere;word-break:normal;letter-spacing:-1px}
.infoPage .infoSections h2,.infoPage .infoSections p,.infoPage .infoHero p{white-space:normal;overflow-wrap:anywhere;word-break:normal;text-overflow:clip;height:auto;max-height:none;overflow:visible}
.infoPage .infoSections section>div{flex:1}
.infoPage .infoIndex{flex:0 0 22px}
.infoPage .infoTabs a{max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:760px){
.infoPage header{height:auto;min-height:60px;gap:12px;padding:10px 16px;flex-wrap:wrap}
.infoPage main{padding:16px 16px 28px}
.infoPage .infoTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.infoPage .infoTabs a{font-size:12px;padding:9px 5px;min-height:44px;line-height:1.4}
.infoPage .infoHero{padding:26px 0 20px}
.infoPage .infoHero h1{font-size:30px;margin:12px 0;letter-spacing:-.8px}
.infoPage .infoHero>p{font-size:15px;line-height:1.6;margin:8px 0 0}
.infoPage .infoSections{padding:0 16px;border-radius:18px}
.infoPage .infoSections section{padding:22px 0;gap:10px}
.infoPage .infoSections h2{font-size:18px;line-height:1.4}
.infoPage .infoSections p{font-size:15px;line-height:1.7;margin-top:10px}
.infoPage footer{padding:18px 0 max(18px,env(safe-area-inset-bottom));margin-inline:16px;white-space:normal}
}
@media(max-width:340px){.infoPage .infoTabs{grid-template-columns:repeat(2,minmax(0,1fr))}.infoPage .infoHero h1{font-size:28px}.infoPage .infoSections section{gap:8px}.infoPage .infoIndex{flex-basis:18px}}

#yallo-countries { position:fixed; top:calc(env(safe-area-inset-top, 0px) + 72px); left:50%; transform:translateX(-50%); z-index:60; max-width:calc(100vw - 24px); width:max-content; box-sizing:border-box; padding:8px 14px; border:1px solid #ffffff30; border-radius:18px; background:#182421f2; color:#f7faf8; font:500 13px/1.5 system-ui,sans-serif; text-align:center; overflow-wrap:anywhere; pointer-events:none; box-shadow:0 4px 20px #0003; }
#yallo-countries[hidden] { display:none; }
@media(max-width:480px) { #yallo-countries { top:calc(env(safe-area-inset-top, 0px) + 62px); font-size:12px; padding:6px 10px; } }