
/* Yallo information navigation: compact, readable and keyboard accessible. */
.app .infoMenu .menuPanel{width:270px;max-width:calc(100vw - 32px);padding:8px;gap:3px;border:1px solid #dce5f0;border-radius:18px;background:#fff;box-shadow:0 14px 40px #182a431a;inset-block-start:calc(100% + 10px);inset-inline-end:0;transform-origin:top right;max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
.app .infoMenu[open] .menuPanel{animation:yalloMenuReveal .16s ease-out both}
.app .infoMenu .menuPanel a,.app .infoMenu .menuPanel button{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;height:auto;min-height:48px;margin:0;padding:12px 14px;border:0;border-radius:11px;background:transparent;color:#263a51;font-size:14px;font-weight:500;line-height:1.45;text-decoration:none;text-align:start;white-space:normal;touch-action:manipulation;transition:background-color .15s,color .15s}
.app .infoMenu .menuPanel a>span,.app .infoMenu .menuPanel button>span{display:block;min-width:0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.app .infoMenu .menuPanel a svg,.app .infoMenu .menuPanel button svg{display:block;width:19px;height:19px;flex:0 0 19px;color:#66809b;stroke-width:1.8}
.app .infoMenu .menuPanel a:hover,.app .infoMenu .menuPanel button:hover{background:#eef4fc;color:#125ce4}
.app .infoMenu .menuPanel a:hover svg{color:#1260f5}
.app .infoMenu .menuPanel a:focus-visible,.app .infoMenu .menuPanel button:focus-visible{outline:2px solid #1260f5;outline-offset:-2px;background:#eef4fc}
.app .infoMenu .menuPanel a:active{background:#e3edfc}
@keyframes yalloMenuReveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.app.sessionActive.mode-video .infoMenu .menuPanel,.app.sessionActive.mode-voice .infoMenu .menuPanel{background:#1b273a;border-color:#354359;box-shadow:0 14px 40px #0004}
.app.sessionActive.mode-video .infoMenu .menuPanel a,.app.sessionActive.mode-voice .infoMenu .menuPanel a{color:#edf3ff}
.app.sessionActive.mode-video .infoMenu .menuPanel a svg,.app.sessionActive.mode-voice .infoMenu .menuPanel a svg{color:#a9bbd5}
.app.sessionActive.mode-video .infoMenu .menuPanel a:hover,.app.sessionActive.mode-voice .infoMenu .menuPanel a:hover{background:#2a3952}
@media(max-width:760px){.app .infoMenu .menuPanel{width:260px;border-radius:16px;inset-block-start:calc(100% + 8px)}.app .infoMenu .menuPanel a,.app .infoMenu .menuPanel button{min-height:48px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.app .infoMenu[open] .menuPanel{animation:none}.app .infoMenu .menuPanel a,.app .infoMenu .menuPanel button{transition:none}}

.infoPage .creatorTikTok{display:flex;width:fit-content;align-items:center;min-height:44px;margin-top:14px;padding:9px 14px;border:1px solid #cfdff1;border-radius:12px;background:#edf4fc;color:#125ce4;font-size:14px;font-weight:600;text-decoration:none;overflow-wrap:anywhere}.infoPage .creatorTikTok:hover{background:#e2edfc}.infoPage .creatorTikTok:focus-visible{outline:3px solid #1260f5;outline-offset:3px}
