/* Chat is top-bar only; Switch Mode is a compact floating utility. */
.switchModeFab{
  position:fixed;
  z-index:1450;
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:68px;
  min-width:68px;
  padding:0;
  border:0;
  background:transparent;
  color:#f2d267;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.switchModeFab.withBottomBar{bottom:calc(104px + env(safe-area-inset-bottom))}
.switchModeFabIcon{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#171106;
  background:linear-gradient(145deg,#f7d96f,#d7a72c 58%,#97620b);
  border:1px solid rgba(255,233,163,.66);
  box-shadow:inset 0 1px 0 rgba(255,252,222,.72),0 12px 26px rgba(0,0,0,.38),0 0 0 4px rgba(212,175,55,.08);
  transition:transform .16s ease,box-shadow .16s ease;
}
.switchModeFabIcon svg{width:24px;height:24px}
.switchModeFabLabel{
  color:#e9dfc8;
  font-size:8px;
  line-height:1;
  font-weight:850;
  letter-spacing:.01em;
  text-shadow:0 2px 6px #000;
  white-space:nowrap;
}
.switchModeFab:hover .switchModeFabIcon,
.switchModeFab:focus-visible .switchModeFabIcon{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,252,222,.8),0 16px 30px rgba(0,0,0,.44),0 0 0 5px rgba(212,175,55,.12)}
.switchModeFab:active .switchModeFabIcon{transform:translateY(1px) scale(.96)}
.switchModeFab:focus-visible{outline:none}

/* Top-bar Chat remains visible after login and uses the same premium dark/gold face. */
#btnChat:not(.hidden){display:grid!important}
#btnChat{color:#efd064!important;border-color:rgba(229,185,62,.31)!important;background:linear-gradient(180deg,rgba(34,28,17,.98),rgba(12,11,9,.99))!important}

/* Switch Mode screen */
#viewModule .switchModeHead{
  margin:0 0 14px;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(226,183,62,.22);
  background:radial-gradient(circle at 90% 0,rgba(225,177,46,.16),transparent 42%),linear-gradient(180deg,#1a160e,#0c0b09);
  box-shadow:inset 0 1px 0 rgba(255,236,170,.06),0 16px 34px rgba(0,0,0,.25);
}
#viewModule .switchModeHead span{display:block;color:#d6b652;font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
#viewModule .switchModeHead h2{margin:8px 0 6px;color:#fff5db;font-size:28px;line-height:1.05}
#viewModule .switchModeHead p{margin:0;color:#aaa08d;font-size:13px;line-height:1.45}
#viewModule .switchModeCard{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(226,183,62,.2);
  background:linear-gradient(180deg,rgba(24,20,14,.98),rgba(10,9,8,.99));
  box-shadow:inset 0 1px 0 rgba(255,236,170,.05),0 14px 30px rgba(0,0,0,.24);
}
#viewModule .switchModeCard label{display:grid;gap:8px}
#viewModule .switchModeCard label>span{color:#c6bda9;font-size:11px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
#viewModule .switchModeCard input{
  width:100%;
  min-height:52px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(226,183,62,.24);
  background:#0b0a08;
  color:#fff4d4;
  font-size:16px;
  outline:none;
}
#viewModule .switchModeCard input:focus{border-color:rgba(244,208,100,.64);box-shadow:0 0 0 3px rgba(212,175,55,.09)}
#viewModule .switchModeCard>button,
#viewModule .switchModeCard form>button,
#viewModule form.switchModeCard>button{
  width:100%;
  min-height:50px;
  margin-top:14px;
  border-radius:16px;
  border:1px solid rgba(255,229,151,.36);
  color:#171106;
  background:linear-gradient(180deg,#f5d46d,#d4a227);
  font-weight:900;
}
#viewModule .switchXYChoices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#viewModule .switchXYChoices button{
  min-height:72px;
  border-radius:18px;
  border:1px solid rgba(226,183,62,.22);
  color:#dfd3ba;
  background:#0d0c0a;
  font-size:18px;
  font-weight:900;
}
#viewModule .switchXYChoices button.active{color:#171106;background:linear-gradient(180deg,#f4d36c,#d1a026);border-color:rgba(255,231,158,.52)}
#viewModule .switchModeSavedValue{margin:14px 2px 0;color:#9f9685;font-size:12px}
#viewModule .switchModeSavedValue strong{color:#f0d16b}

@media(max-width:420px){
  .switchModeFab{right:10px;width:62px;min-width:62px}
  .switchModeFabIcon{width:44px;height:44px}
  .switchModeFab.withBottomBar{bottom:calc(98px + env(safe-area-inset-bottom))}
  #viewModule .switchModeHead{padding:17px;border-radius:20px}
  #viewModule .switchModeHead h2{font-size:24px}
  #viewModule .switchModeCard{padding:15px;border-radius:19px}
}