/* Yallo Consolidated Theme & Layout Styles */
/* 1. Yallo Polish */
.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}}

/* Document scrolling */
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}}

/* Stranger Country Badge */
.chatHead { position: relative !important; }
#yallo-countries {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  border-radius: 999px;
  background: #f0f5fc;
  color: #17385f;
  border: 1px solid #cde0f5;
  font: 600 13px / 1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 2px 8px rgba(18, 96, 245, 0.08);
  pointer-events: auto;
  user-select: none;
  white-space: nowrap;
  letter-spacing: -0.1px;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  animation: yalloBadgePop 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#yallo-countries[hidden] { display: none !important; }
#yallo-countries:hover {
  background: #e6effa;
  border-color: #b9d3f5;
  transform: translate(-50%, -50%) scale(1.03);
}
#yallo-countries .countryFlag {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
#yallo-countries .countryName {
  font-weight: 600;
  color: #183a60;
  font-size: 13px;
  display: inline-block;
  vertical-align: middle;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body > #yallo-countries {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 36px);
  left: 50%;
  transform: translate(-50%, -50%);
}
.app.sessionActive.mode-video #yallo-countries,
.app.sessionActive.mode-voice #yallo-countries {
  background: rgba(22, 33, 49, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #edf3ff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.app.sessionActive.mode-video #yallo-countries:hover,
.app.sessionActive.mode-voice #yallo-countries:hover {
  background: rgba(30, 44, 65, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
}
.app.sessionActive.mode-video #yallo-countries .countryName,
.app.sessionActive.mode-voice #yallo-countries .countryName {
  color: #edf3ff;
}
@keyframes yalloBadgePop {
  0% { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (max-width: 600px) {
  .app.sessionActive .chatHead > div:first-child { max-width: calc(50% - 36px); }
}
@media (max-width: 480px) {
  #yallo-countries { padding: 3px 10px 3px 8px; font-size: 12px; gap: 5px; }
  #yallo-countries .countryFlag { font-size: 14px; }
  #yallo-countries .countryName { font-size: 12px; max-width: 100px; }
}
@media (max-width: 360px) {
  #yallo-countries .countryName { max-width: 70px; }
}

/* 2. Mobile Layout v2 */
@media(max-width:760px){
.app.state-idle>header{height:56px;min-height:56px;padding-block:0}
.app.state-idle main{padding:4px 16px 8px;min-height:0}
.app.state-idle .setup{display:flex;flex-direction:column;min-height:0;height:100%;max-height:100%;overflow:hidden}
.app.state-idle .setupContent{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 4px 12px;scroll-padding-block:12px}
.app.state-idle .setup .connectionIntro{padding-bottom:12px}
.app.state-idle .setup .connectionIntro .helloOrbits{height:40px;margin:0 0 10px;transform:scale(.8);transform-origin:left top}
.app.state-idle .setup .connectionIntro h1{font-size:28px;line-height:1.12;letter-spacing:-1px;margin:0 0 10px}
.app.state-idle .setup .connectionIntro p{font-size:13px;line-height:1.5;margin:0}
.app.state-idle .setup .matchOptions{margin:0 0 10px}
.app.state-idle .setup .matchOptions button{min-height:44px;padding:8px 5px;font-size:13px}
.app.state-idle .setup .numberEntry{padding:10px 12px;margin:0 0 10px}
.app.state-idle .setup .numberEntry label{font-size:13px;line-height:1.4}
.app.state-idle .setup .numberEntry input{min-height:44px;font-size:18px;padding:8px;margin-top:6px;letter-spacing:1px}
.app.state-idle .setup .numberEntry p{font-size:12px;line-height:1.4;margin:6px 0 0}
.app.state-idle .setup .label{font-size:11px;line-height:1.4;margin:10px 0 7px}
.app.state-idle .setup .modes,.app.state-idle .setup .modes.threeModes{gap:8px;margin-top:0}
.app.state-idle .setup .modes button,.app.state-idle .setup .modes.threeModes button{min-height:76px;padding:10px 4px;font-size:14px;gap:8px;border-radius:16px}
.app.state-idle .setup .modes button>span svg{width:25px;height:25px}
.app.state-idle .setup .modeHint{font-size:12px;line-height:1.4;margin-top:8px}
.app.state-idle .setupActions{flex:0 0 auto;padding:10px 4px max(10px,env(safe-area-inset-bottom));background:#eaf0f7}
.app.state-idle .setupActions .consent{font-size:13px;line-height:1.5;margin:0 0 10px}
.app.state-idle .setupActions .start{min-height:48px;font-size:15px;padding:12px 20px}
}
@media(max-width:760px) and (max-height:650px){
.app.state-idle .setup .connectionIntro .helloOrbits{height:28px;margin-bottom:6px;transform:scale(.65)}
.app.state-idle .setup .connectionIntro h1{font-size:24px;margin-bottom:6px}
.app.state-idle .setup .connectionIntro{padding-bottom:8px}
.app.state-idle .setup .modes button,.app.state-idle .setup .modes.threeModes button{min-height:66px;gap:5px}
}

/* 3. Circular Menu Button */
.infoMenu:not([open]) > summary,
.app .infoMenu:not([open]) > summary {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 1px solid #dce5f0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #243a52 !important;
  box-shadow: 0 1px 4px rgba(18, 96, 245, 0.05) !important;
  cursor: pointer !important;
  user-select: none !important;
  list-style: none !important;
  box-sizing: border-box !important;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease !important;
}

.infoMenu > summary::-webkit-details-marker,
.app .infoMenu > summary::-webkit-details-marker {
  display: none !important;
}

.infoMenu > summary::marker,
.app .infoMenu > summary::marker {
  content: "" !important;
  display: none !important;
}

.infoMenu > summary svg,
.app .infoMenu > summary svg {
  display: none !important;
}

.infoMenu > summary:hover,
.app .infoMenu > summary:hover {
  background: #f0f5fc !important;
  color: #1260f5 !important;
  border-color: #c4daf5 !important;
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 3px 10px rgba(18, 96, 245, 0.1) !important;
}

.infoMenu > summary:active,
.app .infoMenu > summary:active {
  transform: translateY(0) scale(0.96) !important;
}

.infoMenu > summary:focus-visible,
.app .infoMenu > summary:focus-visible {
  outline: 2px solid #1260f5 !important;
  outline-offset: 2px !important;
  border-radius: 50% !important;
}

/* 3 Hamburger lines inside the 42px circle */
.infoMenu:not([open]) > summary::before,
.app .infoMenu:not([open]) > summary::before,
.infoMenu:not([open]) > summary::after,
.app .infoMenu:not([open]) > summary::after {
  content: '' !important;
  position: absolute !important;
  right: 12px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

.infoMenu:not([open]) > summary::before,
.app .infoMenu:not([open]) > summary::before {
  top: 14px !important;
  width: 18px !important;
  box-shadow: 0 12px 0 currentColor !important;
}

.infoMenu:not([open]) > summary::after,
.app .infoMenu:not([open]) > summary::after {
  top: 20px !important;
  width: 13px !important;
}
.app.sessionActive.mode-video .infoMenu>summary,.app.sessionActive.mode-voice .infoMenu>summary{color:#edf3ff}

/* 4. Elegant Menu */
.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}

/* 5. Fullscreen Menu */
body:has(.infoMenu[open]){overflow:hidden!important}
.app .infoMenu[open],
.infoMenu[open],
.infoPage .infoMenu[open]{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  z-index:999999!important;
  isolation:isolate!important;
}
.app .infoMenu[open]>summary,
.infoMenu[open]>summary,
.infoPage .infoMenu[open]>summary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  visibility:visible!important;
  opacity:1!important;
  position:fixed!important;
  inset:auto!important;
  top:calc(14px + env(safe-area-inset-top,0px))!important;
  right:calc(18px + env(safe-area-inset-right,0px))!important;
  z-index:1000002!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  border-radius:50%!important;
  border:1px solid #dce5f0!important;
  background:#ffffff!important;
  color:#29475e!important;
  box-shadow:0 4px 16px rgba(0,0,0,0.12)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease!important;
}
.app .infoMenu[open]>summary:hover,
.infoMenu[open]>summary:hover,
.infoPage .infoMenu[open]>summary:hover{
  background:#f0f5fc!important;
  color:#1260f5!important;
  border-color:#c4daf5!important;
  transform:scale(1.05)!important;
}
.app .infoMenu[open]>summary::before,.app .infoMenu[open]>summary::after,
.infoMenu[open]>summary::before,.infoMenu[open]>summary::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  top:20px!important;
  right:11px!important;
  width:22px!important;
  height:2.5px!important;
  background:currentColor!important;
  box-shadow:none!important;
  border-radius:999px!important;
}
.app .infoMenu[open]>summary::before,.infoMenu[open]>summary::before{transform:rotate(45deg)!important}
.app .infoMenu[open]>summary::after,.infoMenu[open]>summary::after{transform:rotate(-45deg)!important}
.app .infoMenu[open] .menuPanel,
.infoMenu[open] .menuPanel,
.infoPage .infoMenu[open] .menuPanel{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:0!important;
  margin:0!important;
  padding:96px max(24px,calc((100vw - 900px)/2)) 40px!important;
  background:radial-gradient(ellipse at 90% 10%,#d6eaff 0,transparent 45%),radial-gradient(ellipse at 0% 100%,#e0f4f5 0,transparent 45%),#f6f9fc!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:safe center!important;
  gap:8px!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  z-index:1000000!important;
  pointer-events:auto!important;
  animation:fullMenu .35s ease both!important;
}
.app .infoMenu[open] .menuPanel::before{content:'Yallo / Explore'!important;color:#2478b8!important;font-size:13px!important;font-weight:700!important;letter-spacing:3px!important;text-transform:uppercase!important;margin-bottom:24px!important;flex-shrink:0!important}
.app .infoMenu[open] .menuPanel::after{content:'One hello. Endless possibilities.'!important;font-size:14px!important;color:#62798d!important;margin-top:28px!important;padding-bottom:env(safe-area-inset-bottom)!important;flex-shrink:0!important}
.app .infoMenu[open] .menuPanel a,
.infoMenu[open] .menuPanel a,
.infoPage .infoMenu[open] .menuPanel a{
  position:relative!important;
  flex:none!important;
  min-height:68px!important;
  padding:16px 20px!important;
  background:rgba(255,255,255,0.85)!important;
  border:1px solid #ffffff!important;
  border-radius:18px!important;
  color:#263a51!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  text-decoration:none!important;
  z-index:1000001!important;
  transition:transform .2s ease,background-color .2s ease!important;
  animation:fullLink .4s both!important;
}
.app .infoMenu[open] .menuPanel a span{font-size:clamp(19px,3vw,30px)!important;line-height:1.25!important;font-weight:600!important}
.app .infoMenu[open] .menuPanel a svg{color:#2478b8!important;width:24px!important;height:24px!important;flex-basis:24px!important}
.app .infoMenu[open] .menuPanel a:nth-child(2){animation-delay:.04s!important}
.app .infoMenu[open] .menuPanel a:nth-child(3){animation-delay:.08s!important}
.app .infoMenu[open] .menuPanel a:nth-child(4){animation-delay:.12s!important}
.app .infoMenu[open] .menuPanel a:nth-child(5){animation-delay:.16s!important}
.app .infoMenu[open] .menuPanel a:hover,
.infoMenu[open] .menuPanel a:hover{background:#fff!important;transform:translateX(6px)!important}
@keyframes fullMenu{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes fullLink{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-height:650px){.app .infoMenu[open] .menuPanel{justify-content:flex-start!important;padding-top:76px!important;gap:6px!important}.app .infoMenu[open] .menuPanel a{min-height:52px!important;padding:10px 14px!important}.app .infoMenu[open] .menuPanel::before{margin-bottom:10px!important}.app .infoMenu[open] .menuPanel::after{margin-top:14px!important}}
@media(max-width:760px){
  .app .infoMenu[open] .menuPanel{padding-left:20px!important;padding-right:20px!important;padding-top:calc(84px + env(safe-area-inset-top,0px))!important;gap:8px!important;justify-content:flex-start!important}
  .app .infoMenu[open] .menuPanel a{min-height:60px!important;padding:14px 16px!important}
  .app .infoMenu[open] .menuPanel a span{font-size:19px!important}
}
@media(prefers-reduced-motion:reduce){.app .infoMenu[open] .menuPanel,.app .infoMenu[open] .menuPanel a{animation:none!important;transition:none!important}}

/* 6. Logo Spacing */
.app>header .brand,.infoPage header .brand{column-gap:2px!important}.app>header .brand .brandDot,.infoPage header .brand .brandDot{margin-left:0!important;letter-spacing:0;flex:none;position:static;transform:none}

/* 8. Accessibility: Skip Navigation Link */
.skip-link{position:absolute;top:-100px;left:16px;background:#1260f5;color:#fff;padding:10px 18px;border-radius:10px;z-index:999999;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 4px 16px #1260f540;transition:top .2s ease-in-out}
.skip-link:focus{top:16px}

/* Heading hierarchy normalization */
.empty h2, .empty h3, .chatWelcomeHeading{font-size:20px;font-weight:600;color:#1d293d;margin:12px 0 6px;line-height:1.3}

/* 9. SEO & E-E-A-T Guide Section */
.homeSeoSection{width:100%;max-width:1040px;margin:32px auto 48px;padding:0 20px;box-sizing:border-box;color:#243449}
.homeSeoCard{background:#ffffff;border:1px solid #dce5f0;border-radius:22px;padding:32px 36px;box-shadow:0 8px 30px #182a430a;margin-bottom:24px}
.homeSeoCard h2{font-size:clamp(22px,3.2vw,30px);line-height:1.25;letter-spacing:-.5px;color:#182a43;margin:0 0 16px}
.homeSeoCard h3{font-size:18px;line-height:1.35;color:#243a56;margin:22px 0 10px}
.homeSeoCard p{font-size:15px;line-height:1.75;color:#46576b;margin:0 0 14px}
.homeSeoCard ul{margin:12px 0 18px 20px;padding:0;color:#46576b;font-size:15px;line-height:1.7}
.homeSeoCard li{margin-bottom:8px}
.homeSeoCard a{color:#1260f5;text-decoration:underline;text-underline-offset:2px}
.homeSeoCard a:hover{color:#0b4cc5}

/* Comparison Table for AI/GEO and human readers */
.seoTableWrap{width:100%;overflow-x:auto;margin:18px 0 24px;border:1px solid #dce5f0;border-radius:14px}
.seoTable{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.5}
.seoTable th{background:#edf4fc;color:#182a43;font-weight:600;padding:12px 16px;border-bottom:1px solid #dce5f0}
.seoTable td{padding:12px 16px;border-bottom:1px solid #eef3f8;color:#46576b}
.seoTable tr:last-child td{border-bottom:none}
.seoTable tr:nth-child(even) td{background:#f9fbfe}

/* Trust Badges Bar */
.trustBadges{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:22px 0 28px}
.trustBadgeItem{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:#f6f9fd;border:1px solid #e2ecf7;border-radius:14px}
.trustBadgeItem svg{width:22px;height:22px;color:#1260f5;flex-shrink:0;margin-top:2px}
.trustBadgeItem strong{display:block;font-size:14px;color:#182a43;margin-bottom:2px}
.trustBadgeItem span{display:block;font-size:12px;line-height:1.45;color:#5c6e82}

/* Social Share & Profile Bar */
.socialShareCard{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:#f6f9fd;border:1px solid #e2ecf7;border-radius:16px;margin-top:24px}
.socialShareText{font-size:14px;font-weight:600;color:#182a43}
.socialShareLinks{display:flex;flex-wrap:wrap;gap:10px}
.shareBtn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px;background:#fff;border:1px solid #cbdbee;border-radius:10px;color:#1f334a;font-size:13px;font-weight:500;text-decoration:none;transition:background-color .15s,border-color .15s}
.shareBtn:hover{background:#edf4fc;border-color:#1260f5;color:#1260f5}

/* Footer Enhanced Navigation */
.enhancedFooterLinks{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:14px 0 8px;font-size:13px;color:#526478}
.enhancedFooterLinks a{color:#485e75;text-decoration:none;transition:color .15s}
.enhancedFooterLinks a:hover{color:#1260f5;text-decoration:underline}

@media(max-width:760px){
.homeSeoSection{margin:24px auto 36px;padding:0 14px}
.homeSeoCard{padding:22px 18px;border-radius:18px}
.socialShareCard{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   Navigation Action Buttons (Dark Mode & Language Translation)
   ========================================================================== */
.yalloNavActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Header alignment: brand stays far left, all 3 nav actions (lang, theme, menu) grouped on far right with identical spacing */
.app > header,
.infoPage header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.app > header .brand,
.infoPage header .brand {
  margin-right: auto !important;
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}

.app > header .yalloNavActions,
.infoPage header .yalloNavActions {
  display: contents !important;
}

/* Chat header actions should never render language/theme navigation controls */
.chatHeaderActions .yalloNavActions {
  display: none !important;
}

/* Idle preview card should never show duplicate header actions */
.app.state-idle .chatHeaderActions {
  display: none !important;
}

.app.sessionActive .chatHeaderActions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* In connected chat, hide the redundant menu inside chat header so only the Stop button appears */
.app.sessionActive .chatHeaderActions .infoMenu,
.chatHeaderActions .infoMenu {
  display: none !important;
}

.infoMenu:not([open]),
.app .infoMenu:not([open]),
.infoPage .infoMenu:not([open]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 42px !important;
  position: relative !important;
  vertical-align: middle !important;
}

.infoPage header .infoBack {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}

.yalloNavBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  flex: 0 0 42px !important;
  padding: 0;
  border: 1px solid #dce5f0;
  border-radius: 50%;
  background: #ffffff;
  color: #243a52;
  cursor: pointer;
  transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
  user-select: none;
  box-shadow: 0 1px 4px rgba(18, 96, 245, 0.05);
}

.yalloNavBtn:hover {
  background: #f0f5fc;
  color: #1260f5;
  border-color: #c4daf5;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 3px 10px rgba(18, 96, 245, 0.1);
}

.yalloNavBtn:active {
  transform: translateY(0) scale(0.96);
}

.yalloNavBtn svg {
  display: block;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* Theme Toggle Icons */
.yalloThemeBtn .icon-sun { display: none; }
.yalloThemeBtn .icon-moon { display: block; }

/* Translated active dot indicator */
.yalloLangBtn.is-translated::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #ffffff;
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}

/* ==========================================================================
   Language Translation Modal & Popover
   ========================================================================== */
.yalloModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: yalloFadeIn 0.2s ease-out both;
}

.yalloModalBackdrop[hidden] {
  display: none !important;
}

body.yalloModalOpen {
  overflow: hidden !important;
}

.yalloModalCard {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: #ffffff;
  border: 1px solid #dce5f0;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: yalloCardZoom 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.yalloModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #edf2f7;
}

.yalloModalTitleWrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.yalloModalIcon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eff6ff;
  color: #1260f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.yalloModalTitleWrap h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #182a43;
}

.yalloModalTitleWrap p {
  margin: 3px 0 0;
  font-size: 13px;
  color: #64748b;
}

.yalloModalClose {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #475569;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.yalloModalClose:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.yalloModalSearch {
  position: relative;
  padding: 12px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.yalloModalSearch svg {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.yalloModalSearch input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px 10px 36px;
  font-size: 14px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #1e293b;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.yalloModalSearch input:focus {
  border-color: #1260f5;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(18, 96, 245, 0.12);
}

.yalloLangList {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px;
  max-height: 380px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
}

.yalloLangItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.14s, border-color 0.14s;
  width: 100%;
  box-sizing: border-box;
}

.yalloLangItem:hover {
  background: #f1f6fd;
  border-color: #dce9f8;
}

.yalloLangItem.active {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.yalloLangFlag {
  font-size: 20px;
  line-height: 1;
}

.yalloLangText {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.yalloLangNative {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yalloLangEnglish {
  font-size: 12px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yalloLangCheck {
  color: #1260f5;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}

.yalloLangItem.active .yalloLangCheck {
  opacity: 1;
  transform: scale(1);
}

/* Animations */
@keyframes yalloFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes yalloCardZoom {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Completely hide Google Translate top/bottom banners, "Translated to: Show original", and tooltips */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe[id=":1.container"],
iframe[id=":2.container"],
iframe[id*="container"],
.goog-te-banner,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.VIpgJd-ZVi9C-OR9QGd,
.VIpgJd-ZVi9C-x3G2wb,
.VIpgJd-yAWNEb-L7lbkb,
.VIpgJd-ZVi9C-aMmBfb-haAclf,
body > .skiptranslate:not(#google_translate_element),
div.skiptranslate[style*="visibility: visible"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

body {
  top: 0px !important;
  position: static !important;
}
html {
  top: 0px !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

#google_translate_element {
  display: none !important;
}

/* ==========================================================================
   Complete Dark Mode Theme Rules
   ========================================================================== */
html.dark-theme,
html[data-theme="dark"] {
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: #23334d;
  --green: #3b82f6;
  --lime: #1e3a5f;
  --chat-paper: #0b111c;
  --chat-incoming: #182337;
  --chat-outgoing: #1d4ed8;
  --chat-ink: #f8fafc;
  color-scheme: dark;
}

html.dark-theme,
html.dark-theme body,
html.dark-theme #root,
html.dark-theme .app,
html.dark-theme .app.state-idle,
html.dark-theme .app.sessionActive,
html.dark-theme main,
html.dark-theme .workspace,
html.dark-theme .infoPage,
html.dark-theme .infoPage main,
html.dark-theme .homeSeoSection {
  background: #141f32 !important;
  color: #f1f5f9 !important;
}

/* Header in Dark Mode */
html.dark-theme header,
html.dark-theme .app > header,
html.dark-theme .infoPage header {
  background: #141f32 !important;
  border-bottom: 1px solid #1f2f4c !important;
}
html.dark-theme .brand {
  color: #f8fafc !important;
}
html.dark-theme .brandDot {
  color: #3b82f6 !important;
}

/* Dark Mode Navigation Buttons */
html.dark-theme .yalloNavBtn {
  background: #1a2842 !important;
  border-color: #273e65 !important;
  color: #edf3ff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}
html.dark-theme .yalloNavBtn:hover {
  background: #22375b !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}
html.dark-theme .yalloThemeBtn .icon-sun { display: block; }
html.dark-theme .yalloThemeBtn .icon-moon { display: none; }
html.dark-theme .yalloLangBtn.is-translated::after {
  border-color: #1a2842 !important;
}

/* Circular Menu in Dark Mode */
html.dark-theme .infoMenu > summary,
html.dark-theme .app .infoMenu > summary {
  background: #1a2842 !important;
  border-color: #273e65 !important;
  color: #edf3ff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

html.dark-theme .infoMenu > summary:hover,
html.dark-theme .app .infoMenu > summary:hover {
  background: #22375b !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

html.dark-theme .app.sessionActive.mode-video .infoMenu > summary,
html.dark-theme .app.sessionActive.mode-voice .infoMenu > summary {
  background: rgba(26, 40, 66, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #edf3ff !important;
}

/* Fullscreen Open Menu in Dark Mode */
html.dark-theme .infoMenu[open] > summary,
html.dark-theme .app .infoMenu[open] > summary,
html.dark-theme .infoPage .infoMenu[open] > summary {
  background: #1a2842 !important;
  border: 1px solid #273e65 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .infoMenu[open] > summary:hover,
html.dark-theme .app .infoMenu[open] > summary:hover,
html.dark-theme .infoPage .infoMenu[open] > summary:hover {
  background: #22375b !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  transform: scale(1.05) !important;
}

html.dark-theme .infoMenu .menuPanel,
html.dark-theme .infoMenu[open] .menuPanel,
html.dark-theme .app .infoMenu[open] .menuPanel,
html.dark-theme .infoPage .infoMenu[open] .menuPanel {
  background: radial-gradient(ellipse at 90% 10%, #1a2944 0, transparent 45%), radial-gradient(ellipse at 0% 100%, #17283c 0, transparent 45%), #141f32 !important;
  border-color: #273b5a !important;
  color: #f1f5f9 !important;
}

html.dark-theme .infoMenu .menuPanel::before,
html.dark-theme .infoMenu[open] .menuPanel::before,
html.dark-theme .app .infoMenu[open] .menuPanel::before,
html.dark-theme .infoPage .infoMenu[open] .menuPanel::before {
  color: #60a5fa !important;
}

html.dark-theme .infoMenu .menuPanel::after,
html.dark-theme .infoMenu[open] .menuPanel::after,
html.dark-theme .app .infoMenu[open] .menuPanel::after,
html.dark-theme .infoPage .infoMenu[open] .menuPanel::after {
  color: #94a3b8 !important;
}

html.dark-theme .infoMenu .menuPanel a,
html.dark-theme .infoMenu[open] .menuPanel a,
html.dark-theme .app .infoMenu[open] .menuPanel a,
html.dark-theme .infoPage .infoMenu[open] .menuPanel a {
  background: #1a2842 !important;
  border: 1px solid #273e65 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html.dark-theme .infoMenu .menuPanel a:hover,
html.dark-theme .infoMenu[open] .menuPanel a:hover,
html.dark-theme .app .infoMenu[open] .menuPanel a:hover,
html.dark-theme .infoPage .infoMenu[open] .menuPanel a:hover {
  background: #22375b !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  transform: translateX(6px) !important;
}

html.dark-theme .infoMenu .menuPanel a svg,
html.dark-theme .infoMenu[open] .menuPanel a svg,
html.dark-theme .app .infoMenu[open] .menuPanel a svg,
html.dark-theme .infoPage .infoMenu[open] .menuPanel a svg {
  color: #60a5fa !important;
}

html.dark-theme .infoMenu .menuPanel a span,
html.dark-theme .infoMenu[open] .menuPanel a span,
html.dark-theme .app .infoMenu[open] .menuPanel a span,
html.dark-theme .infoPage .infoMenu[open] .menuPanel a span {
  color: #f8fafc !important;
}

/* Setup Card in Dark Mode */
html.dark-theme .setup {
  background: #141f32 !important;
  border-color: #24354e !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}
html.dark-theme .setup .connectionIntro h1,
html.dark-theme .setup .connectionIntro h1 span {
  color: #f8fafc !important;
}
html.dark-theme .setup .connectionIntro p,
html.dark-theme .setup .label,
html.dark-theme .setup .modeHint,
html.dark-theme .setup .numberEntry p,
html.dark-theme .setupActions .consent {
  color: #94a3b8 !important;
}
html.dark-theme .setup .helloOrbits .orbitBubble {
  background: #1a2a44 !important;
  border-color: #2c456e !important;
  color: #60a5fa !important;
}

/* Match Options (Random / Connect by number) */
html.dark-theme .setup .matchOptions {
  background: #0f1827 !important;
  border-color: #1f2f4c !important;
}
html.dark-theme .setup .matchOptions button {
  color: #94a3b8 !important;
}
html.dark-theme .setup .matchOptions button.active,
html.dark-theme .setup .matchOptions button[aria-pressed="true"] {
  background: #1c2b44 !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Mode Buttons in Dark Mode */
html.dark-theme .setup .modes button,
html.dark-theme .setup .modes.threeModes button {
  background: #18253b !important;
  border-color: #273b5a !important;
  color: #e2e8f0 !important;
}
html.dark-theme .setup .modes button:hover,
html.dark-theme .setup .modes.threeModes button:hover {
  background: #1f304c !important;
  border-color: #35507b !important;
}
html.dark-theme .setup .modes button.active,
html.dark-theme .setup .modes button[aria-pressed="true"] {
  background: #192e50 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  box-shadow: 0 0 0 1.5px #3b82f6 !important;
}
html.dark-theme .setup .numberEntry {
  background: #18253b !important;
  border-color: #273b5a !important;
}
html.dark-theme .setup .numberEntry label {
  color: #e2e8f0 !important;
}
html.dark-theme .setup .numberEntry input {
  background: #0f1827 !important;
  border-color: #273b5a !important;
  color: #f8fafc !important;
}
html.dark-theme .setupActions,
html.dark-theme .app.state-idle .setupActions {
  background: #141f32 !important;
  border-top: 1px solid #1f2f4c !important;
}

/* Chat Card in Dark Mode */
html.dark-theme .chat,
html.dark-theme .app.state-idle .chat,
html.dark-theme .setup,
html.dark-theme .app.state-idle .setup {
  background: #141f32 !important;
  border-color: #24354e !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
}
html.dark-theme .app.state-idle .chatHead {
  background: transparent !important;
}
html.dark-theme .app.state-idle .chatHead b,
html.dark-theme .app.state-idle .chatHead h2 {
  color: #f8fafc !important;
}
html.dark-theme .app.state-idle .messages {
  background-color: #0f1827 !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.8px, transparent 0.8px) !important;
}
html.dark-theme .chatHead,
html.dark-theme .app.sessionActive .chatHead {
  background: #141f32 !important;
  border-bottom-color: #1f2f4c !important;
}
html.dark-theme .chatHead b,
html.dark-theme .app.sessionActive .chatHead b {
  color: #f8fafc !important;
}
html.dark-theme .chatHead small,
html.dark-theme .app.sessionActive .chatHead small {
  color: #94a3b8 !important;
}
html.dark-theme .anonymousAvatar {
  background: #1e2e46 !important;
  color: #60a5fa !important;
}
html.dark-theme #yallo-countries {
  background: rgba(22, 33, 49, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #edf3ff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}
html.dark-theme #yallo-countries .countryName {
  color: #edf3ff !important;
}

/* Messages in Dark Mode */
html.dark-theme .app.sessionActive {
  background: #141f32 !important;
}
html.dark-theme .messages,
html.dark-theme .app.sessionActive .messages {
  background-color: #0f1827 !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.8px, transparent 0.8px) !important;
}
html.dark-theme .empty h2,
html.dark-theme .empty h3,
html.dark-theme .chatWelcomeHeading {
  color: #f8fafc !important;
}
html.dark-theme .empty p {
  color: #94a3b8 !important;
}
html.dark-theme .bubble.who-Stranger {
  background: #1a273b !important;
  color: #f1f5f9 !important;
  border: 1px solid #283b58 !important;
}
html.dark-theme .bubble.who-You {
  background: #2563eb !important;
  color: #ffffff !important;
}

/* Composer & Actions in Dark Mode */
html.dark-theme .composer,
html.dark-theme .app.sessionActive .composer,
html.dark-theme .app.sessionActive .mobileSessionActions {
  background: #141f32 !important;
  border-top-color: #1f2f4c !important;
}
html.dark-theme .composer input:not([type="file"]) {
  background: #182438 !important;
  border-color: #283a52 !important;
  color: #f8fafc !important;
}
html.dark-theme .composer input:not([type="file"])::placeholder {
  color: #64748b !important;
}
html.dark-theme .composer button,
html.dark-theme .voiceRecorder button,
html.dark-theme .photoOptions button {
  color: #94a3b8 !important;
}
html.dark-theme .composer button:hover {
  color: #f8fafc !important;
}
html.dark-theme .chatFoot {
  background: #141f32 !important;
  color: #64748b !important;
}
html.dark-theme .chatFoot button {
  color: #94a3b8 !important;
}
html.dark-theme .mobileSessionActions .start {
  background: #1a283e !important;
  color: #93c5fd !important;
  border: 1px solid #283d5e !important;
}

/* Modal in Dark Mode */
html.dark-theme .yalloModalCard {
  background: #141f32 !important;
  border-color: #24354e !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7) !important;
}
html.dark-theme .yalloModalHead {
  border-bottom-color: #1f2d42 !important;
}
html.dark-theme .yalloModalTitleWrap h3 {
  color: #f8fafc !important;
}
html.dark-theme .yalloModalTitleWrap p {
  color: #94a3b8 !important;
}
html.dark-theme .yalloModalIcon {
  background: #1e2c42 !important;
  color: #60a5fa !important;
}
html.dark-theme .yalloModalClose {
  background: #1b263a !important;
  color: #94a3b8 !important;
}
html.dark-theme .yalloModalClose:hover {
  background: #253650 !important;
  color: #f8fafc !important;
}
html.dark-theme .yalloModalSearch {
  border-bottom-color: #1f2d42 !important;
}
html.dark-theme .yalloModalSearch input {
  background: #0d1422 !important;
  border-color: #24354e !important;
  color: #f8fafc !important;
}
html.dark-theme .yalloModalSearch input:focus {
  border-color: #3b82f6 !important;
  background: #10192a !important;
}
html.dark-theme .yalloLangItem:hover {
  background: #1a273c !important;
  border-color: #283a54 !important;
}
html.dark-theme .yalloLangItem.active {
  background: #1c2d46 !important;
  border-color: #3b82f6 !important;
}
html.dark-theme .yalloLangNative {
  color: #f8fafc !important;
}
html.dark-theme .yalloLangEnglish {
  color: #94a3b8 !important;
}
html.dark-theme .yalloLangCheck {
  color: #60a5fa !important;
}

/* ==========================================================================
   Info Pages UI/UX Overhaul in Dark Mode
   ========================================================================== */
html.dark-theme .infoPage {
  background: #141f32 !important;
  color: #e2e8f0 !important;
  min-height: 100dvh !important;
}

html.dark-theme .infoPage header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 max(24px, calc((100vw - 860px) / 2)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #141f32 !important;
  border-bottom: 1px solid #1f2f4c !important;
}

html.dark-theme .infoPage header > div.yalloNavActions {
  margin-left: auto !important;
  margin-right: 12px !important;
}

/* Back to chat pill button */
html.dark-theme .infoPage .infoBack {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  background: #1a2842 !important;
  border: 1px solid #273e65 !important;
  color: #edf3ff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.16s ease !important;
}

html.dark-theme .infoPage .infoBack:hover {
  background: #22375b !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

/* Centered content container with optimal reading measure */
.infoPage main {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 32px 20px 48px !important;
  box-sizing: border-box !important;
}

/* Sub-navigation tabs: sleek segmented pill control */
html.dark-theme .infoPage .infoTabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  gap: 6px !important;
  padding: 6px !important;
  background: #18253b !important;
  border: 1px solid #253957 !important;
  border-radius: 16px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html.dark-theme .infoPage .infoTabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.16s ease !important;
}

html.dark-theme .infoPage .infoTabs a:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .infoPage .infoTabs a[aria-current="page"] {
  background: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

/* Hero Section */
.infoPage .infoHero {
  margin-bottom: 28px !important;
  text-align: left !important;
}

html.dark-theme .infoPage .infoHero > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

html.dark-theme .infoPage .infoHero h1 {
  font-size: clamp(30px, 4.5vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -1.2px !important;
  color: #f8fafc !important;
  margin: 0 0 10px 0 !important;
}

html.dark-theme .infoPage .infoHero p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  max-width: 65ch !important;
}

/* Elevated Content Card */
html.dark-theme .infoPage .infoSections {
  background: #18253b !important;
  border: 1px solid #273e65 !important;
  border-radius: 24px !important;
  padding: 32px 36px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}

html.dark-theme .infoPage .infoSections section {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 24px 0 !important;
  border-bottom: 1px solid #223554 !important;
}

html.dark-theme .infoPage .infoSections section:first-child {
  padding-top: 0 !important;
}

html.dark-theme .infoPage .infoSections section:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

html.dark-theme .infoPage .infoIndex {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.28) !important;
  color: #60a5fa !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html.dark-theme .infoPage .infoSections h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.3px !important;
  color: #f8fafc !important;
  margin: 0 0 10px 0 !important;
}

html.dark-theme .infoPage .infoSections p,
html.dark-theme .infoPage .infoSections li {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #cbd5e1 !important;
  margin: 0 0 10px 0 !important;
}

html.dark-theme .infoPage .infoSections li {
  margin-bottom: 6px !important;
}

html.dark-theme .infoPage .infoSections ul {
  padding-left: 20px !important;
  margin: 10px 0 !important;
}

html.dark-theme .infoPage .infoSections strong {
  color: #f8fafc !important;
}

html.dark-theme .infoPage .infoSections a {
  color: #60a5fa !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html.dark-theme .infoPage .infoSections a:hover {
  color: #93c5fd !important;
}

/* Creator TikTok button in Dark Mode */
html.dark-theme .infoPage .creatorTikTok {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  background: #1f304c !important;
  border: 1px solid #2e4873 !important;
  color: #60a5fa !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.18s ease !important;
}

html.dark-theme .infoPage .creatorTikTok:hover {
  background: #253a5c !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

/* Specifications Table in Dark Mode */
html.dark-theme .infoPage .seoTableWrap {
  margin: 18px 0 !important;
  border: 1px solid #273e65 !important;
  border-radius: 14px !important;
  background: #141f32 !important;
  overflow: hidden !important;
}

html.dark-theme .infoPage .seoTable {
  width: 100% !important;
  border-collapse: collapse !important;
}

html.dark-theme .infoPage .seoTable th {
  background: #1c2b44 !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #273e65 !important;
  text-align: left !important;
}

html.dark-theme .infoPage .seoTable td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #1f2f4c !important;
  color: #cbd5e1 !important;
}

html.dark-theme .infoPage .seoTable tr:last-child td {
  border-bottom: none !important;
}

html.dark-theme .infoPage .seoTable tr:nth-child(even) td {
  background: #162236 !important;
}

/* Bottom CTA Card */
html.dark-theme .infoPage .infoEnd {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: 36px !important;
  padding: 24px 32px !important;
  background: #18253b !important;
  border: 1px solid #273e65 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

html.dark-theme .infoPage .infoEnd p {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  margin: 0 !important;
}

html.dark-theme .infoPage .infoEnd a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.18s ease !important;
}

html.dark-theme .infoPage .infoEnd a:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
}

html.dark-theme .infoPage footer {
  text-align: center !important;
  font-size: 13px !important;
  color: #64748b !important;
  padding: 24px 0 max(24px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #1f2f4c !important;
  margin-top: 40px !important;
}

/* Mobile responsive infoPage styles */
@media (max-width: 760px) {
  html.dark-theme .infoPage header,
  .infoPage header {
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 60px !important;
  }
  .infoPage main {
    padding: 16px 16px 36px !important;
  }
  html.dark-theme .infoPage .infoTabs,
  .infoPage .infoTabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  html.dark-theme .infoPage .infoTabs a,
  .infoPage .infoTabs a {
    font-size: 12px !important;
    padding: 8px 4px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  .infoPage .infoHero h1 {
    font-size: 28px !important;
  }
  html.dark-theme .infoPage .infoSections,
  .infoPage .infoSections {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }
  html.dark-theme .infoPage .infoSections section,
  .infoPage .infoSections section {
    gap: 12px !important;
    padding: 18px 0 !important;
  }
  html.dark-theme .infoPage .infoEnd,
  .infoPage .infoEnd {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px !important;
    gap: 14px !important;
  }
  html.dark-theme .infoPage .infoEnd a,
  .infoPage .infoEnd a {
    width: 100% !important;
  }
}
@media (max-width: 360px) {
  html.dark-theme .infoPage .infoTabs,
  .infoPage .infoTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* SEO Cards & Badges in Dark Mode */
html.dark-theme .homeSeoCard {
  background: #141f32 !important;
  border-color: #24354e !important;
  color: #cbd5e1 !important;
}
html.dark-theme .homeSeoCard h2,
html.dark-theme .homeSeoCard h3 {
  color: #f8fafc !important;
}
html.dark-theme .homeSeoCard p,
html.dark-theme .homeSeoCard ul {
  color: #94a3b8 !important;
}
html.dark-theme .trustBadgeItem {
  background: #182438 !important;
  border-color: #27384f !important;
  color: #e2e8f0 !important;
}
html.dark-theme .trustBadgeItem strong {
  color: #f8fafc !important;
}
html.dark-theme .trustBadgeItem span {
  color: #94a3b8 !important;
}
html.dark-theme .seoTableWrap {
  border-color: #24354e !important;
}
html.dark-theme .seoTable th {
  background: #182438 !important;
  color: #f8fafc !important;
  border-bottom-color: #27384f !important;
}
html.dark-theme .seoTable td {
  border-bottom-color: #1f2d42 !important;
  color: #cbd5e1 !important;
}
html.dark-theme .seoTable tr:nth-child(even) td {
  background: #162133 !important;
}
html.dark-theme .socialShareCard {
  background: #182438 !important;
  border-color: #27384f !important;
}
html.dark-theme .socialShareText {
  color: #f8fafc !important;
}
html.dark-theme .shareBtn {
  background: #141f32 !important;
  border-color: #27384f !important;
  color: #cbd5e1 !important;
}
html.dark-theme .shareBtn:hover {
  background: #1e2c42 !important;
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
}
html.dark-theme .enhancedFooterLinks a {
  color: #94a3b8 !important;
}
html.dark-theme .enhancedFooterLinks a:hover {
  color: #60a5fa !important;
}

/* Comprehensive Dark Mode enhancements for all elements */
html.dark-theme * {
  scrollbar-color: #273b5c #141f32;
}
html.dark-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html.dark-theme ::-webkit-scrollbar-track {
  background: #141f32;
}
html.dark-theme ::-webkit-scrollbar-thumb {
  background: #273b5c;
  border-radius: 999px;
}
html.dark-theme ::-webkit-scrollbar-thumb:hover {
  background: #3b537d;
}
html.dark-theme ::selection {
  background: #2563eb;
  color: #ffffff;
}

/* Waiting state in Dark Mode */
html.dark-theme .app.state-waiting .messages.messagesEmpty,
html.dark-theme .app.state-waiting .chat {
  background: #141f32 !important;
}
html.dark-theme .app.state-waiting .waitingChatHint {
  color: #94a3b8 !important;
}
html.dark-theme .app.state-waiting .statusDot {
  background: #3b82f6 !important;
}

/* Stop Button in Dark Mode */
html.dark-theme .chatHeaderActions .stop {
  background: #3b1d20 !important;
  color: #f87171 !important;
}
html.dark-theme .chatHeaderActions .stop:hover:not(:disabled) {
  background: #4c2227 !important;
  color: #fca5a5 !important;
}

/* File Transfers and Audio in Dark Mode */
html.dark-theme .transferStatus,
html.dark-theme .fileAttachment,
html.dark-theme .voicePlayer,
html.dark-theme .audioClip {
  background: #182438 !important;
  border-color: #27384f !important;
  color: #edf3ff !important;
}

/* Video fullscreen in Dark Mode */
html.dark-theme .videos.videoFullscreen {
  background: #070b12 !important;
}

/* Responsive Navigation adjustments */
@media (max-width: 480px) {
  .app > header,
  .infoPage header,
  .chatHeaderActions {
    gap: 8px !important;
  }
  .yalloNavActions {
    gap: 8px;
  }
  .yalloNavBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
  }
  .yalloNavBtn svg {
    width: 17px;
    height: 17px;
  }
  .infoMenu:not([open]),
  .app .infoMenu:not([open]),
  .infoPage .infoMenu:not([open]) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
  }
  .infoMenu:not([open]) > summary,
  .app .infoMenu:not([open]) > summary {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
  }
  .infoMenu:not([open]) > summary::before,
  .app .infoMenu:not([open]) > summary::before {
    top: 12px !important;
    right: 10px !important;
    width: 16px !important;
    box-shadow: 0 10px 0 currentColor !important;
  }
  .infoMenu:not([open]) > summary::after,
  .app .infoMenu:not([open]) > summary::after {
    top: 17px !important;
    right: 10px !important;
    width: 11px !important;
  }
  .app .infoMenu[open] > summary {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  .app .infoMenu[open] > summary::before,
  .app .infoMenu[open] > summary::after {
    top: 18px !important;
    right: 10px !important;
    width: 20px !important;
  }
  .yalloModalCard {
    max-height: 90vh;
    border-radius: 18px;
  }
  .yalloLangList {
    grid-template-columns: 1fr;
  }
}

/* Mobile Seamless Dark Mode */
@media (max-width: 760px) {
  html.dark-theme .app.state-idle .setup {
    background: #141f32 !important;
    border: none !important;
    box-shadow: none !important;
  }
  html.dark-theme .app.state-idle main {
    background: #141f32 !important;
  }
}