/* Quiet, shared controls for the agent header and the main navigation. */
.agent-topbar__account {
  gap:3px;
  padding:3px;
  border:0;
  border-radius:15px;
  background:transparent;
  box-shadow:none;
}
.agent-topbar__account :is(.guide-toggle,.agent-voice-toggle,.gesture-toggle,.agent-state,.agent-profile) {
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  min-height:38px;
  margin:0;
  padding:0;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#b9c6d6;
  box-shadow:none;
  font:inherit;
  cursor:pointer;
  transform:none;
  transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.agent-topbar__account :is(.guide-toggle,.agent-voice-toggle,.gesture-toggle,.agent-state,.agent-profile):hover {
  border-color:rgba(214,225,241,.13);
  background:rgba(232,239,250,.075);
  color:#f4f7fc;
  box-shadow:none;
  transform:none;
}
.agent-topbar__account :is(.guide-toggle,.agent-voice-toggle,.gesture-toggle,.agent-state,.agent-profile):focus-visible {
  outline:2px solid #c3d6ec;
  outline-offset:2px;
}
.agent-topbar__account :is(.guide-toggle,.agent-voice-toggle,.gesture-toggle,.agent-profile):active {background:rgba(232,239,250,.12)}
.agent-topbar__account :is(.guide-toggle__icon,.agent-voice-toggle__icon,.gesture-toggle__icon) {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  background:none;
  box-shadow:none;
  color:inherit;
  opacity:1;
  transform:none;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
}
.agent-topbar__account :is(.guide-toggle__icon,.agent-voice-toggle__icon,.gesture-toggle__icon) svg {
  display:block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.agent-topbar__account :is(.guide-toggle,.agent-voice-toggle,.gesture-toggle):hover :is(.guide-toggle__icon,.agent-voice-toggle__icon,.gesture-toggle__icon) {transform:translateY(-2px) rotate(-6deg)}
.agent-topbar__account .agent-profile:hover .avatar{transform:translateY(-2px) rotate(5deg)}
.agent-topbar__account .agent-state:hover .agent-mode-switch{transform:translateY(-1px)}
body.guide-hidden .agent-topbar__account .guide-toggle {
  border-color:transparent;
  background:transparent;
  color:#788494;
}
body.guide-hidden .agent-topbar__account .guide-toggle__icon {opacity:.6;transform:none}
.agent-topbar__account .agent-voice-toggle.is-active,
.agent-topbar__account .gesture-toggle.is-active {
  border-color:rgba(143,188,181,.24);
  background:rgba(112,167,155,.11);
  color:#b8e0d8;
  box-shadow:none;
}
#agentVoiceToggle{position:relative}
#agentVoiceToggle[data-voice-state]::after{content:none}
#agentVoiceToggle[data-voice-state="listening"]::after{
  content:"";
  position:absolute;
  inset:auto 0 2px;
  display:block;
  width:18px;
  height:8px;
  margin:auto;
  background:linear-gradient(90deg,transparent 0 1px,currentColor 1px 3px,transparent 3px 5px,currentColor 5px 7px,transparent 7px 10px,currentColor 10px 12px,transparent 12px 15px,currentColor 15px 17px,transparent 17px);
  opacity:.9;
  transform-origin:center bottom;
  animation:life-voice-wave .52s ease-in-out infinite;
}
.agent-topbar__account .agent-voice-toggle.is-recording {
  border-color:rgba(218,164,164,.3);
  background:rgba(168,91,91,.12);
  color:#e7b8b8;
  box-shadow:none;
}
.agent-topbar__account .agent-voice-toggle.is-executing,
.agent-topbar__account .gesture-toggle.is-loading {
  border-color:rgba(174,179,215,.3);
  background:rgba(124,132,180,.12);
  color:#d0d4ef;
  box-shadow:none;
}
.agent-topbar__account .gesture-toggle.is-error {border-color:rgba(218,164,164,.3);color:#e7b8b8}
.agent-topbar__account .agent-state {
  flex-basis:54px;
  width:54px;
  text-decoration:none;
}
.agent-topbar__account .agent-state .agent-mode-switch {
  width:35px;
  height:21px;
  background:#6f9286;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
  transition:background .22s ease,transform .24s cubic-bezier(.2,.8,.2,1);
}
.agent-topbar__account .agent-state .agent-mode-switch::after {
  top:3px;
  left:17px;
  width:15px;
  height:15px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.agent-topbar__account .agent-state:hover .agent-mode-switch {background:#80a397;box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
.agent-topbar__account #agentModeText {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.agent-topbar__account .agent-profile .avatar {
  display:grid;
  place-items:center;
  flex:none;
  width:31px;
  height:31px;
  border:1px solid rgba(225,235,249,.22);
  border-radius:50%;
  background:linear-gradient(145deg,#343e4f,#202936);
  color:#f1f4f8;
  font-size:12px;
  font-weight:650;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}

/* Main-page controls reuse the agent's visual language without changing their handlers. */
.topbar>.agent-topbar__account .topbar__actions{gap:3px}
.topbar-agent-state .agent-mobile-icon{display:none}
.agent-topbar__account .topbar-agent-state.agent-state .agent-mode-switch{background:#747d88}
.agent-topbar__account .topbar-agent-state.agent-state .agent-mode-switch::after{left:3px}
.agent-topbar__account .topbar-agent-state.agent-state:hover .agent-mode-switch{background:#848e99}

@media (max-width:768px){
  html.life-gestures-allowed .topbar .agent-topbar__account #lifeGestureToggle{display:inline-grid}
  .topbar>div:not(.topbar__actions){display:none}
  .topbar>.topbar__controls{order:1;margin:0!important}
  .topbar>.menu-btn{order:2;margin-left:auto}
  .topbar .agent-topbar__account{gap:2px}
  .topbar .agent-topbar__account :is(#lifeVoiceToggle,.topbar-agent-state,#profileButton){flex:0 0 38px;width:38px;min-width:38px;height:38px}
  .topbar .agent-topbar__account .topbar-agent-state .agent-mode-switch{display:none}
  .topbar .agent-topbar__account .topbar-agent-state .agent-mobile-icon{display:grid;place-items:center;width:20px;height:20px}
  .topbar .agent-topbar__account .topbar-agent-state .agent-mobile-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
  .topbar .agent-topbar__account .topbar-agent-state[aria-checked="true"]{color:#b8e0d8}
  .topbar>div:has(#currentTime){display:grid!important;position:static!important;transform:none!important;order:1;flex:1;justify-items:center;min-width:0;max-width:none;margin-inline:0}
  .topbar:has(#currentTime)>.menu-btn{margin-left:0}
  .topbar>div:has(#currentTime) #pageTitle{display:none}
  .topbar #currentDate{margin:0;font-size:9px;line-height:1.3;white-space:nowrap;color:#b7bec9}
  .topbar #currentTime{margin:0;display:block;font-size:13px;line-height:1.4;color:#e4e7ed;font-variant-numeric:tabular-nums}
  .topbar>.topbar__controls{order:0!important}
}

/* Preserve the original sidebar rows: only their SVG glyphs move. */
.sidebar #mainNav .nav__item .nav-icon svg {
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.sidebar #mainNav .nav__item:hover .nav-icon svg,
.sidebar #mainNav .nav__item:focus-visible .nav-icon svg {transform:translateY(-1px) scale(1.07)}
.sidebar #mainNav .nav__item.active .nav-icon svg {
  animation:premiumNavIconSelect .42s cubic-bezier(.2,.8,.2,1) both;
}
.sidebar #mainNav .nav__item[data-page="finance"]:hover .nav-icon svg,
.sidebar #mainNav .nav__item[data-page="sport"]:hover .nav-icon svg {transform:translateY(-1px) rotate(-7deg)}
.sidebar #mainNav .nav__item[data-page="health"]:hover .nav-icon svg,
.sidebar #mainNav .nav__item[data-page="talents"]:hover .nav-icon svg {transform:scale(1.13)}
@keyframes premiumNavIconSelect {from{opacity:.55;transform:translateY(3px) scale(.92)}to{opacity:1;transform:none}}

@media(max-width:480px) {
  .agent-topbar__account {gap:2px;padding:2px;border-radius:13px}
  .agent-topbar__account :is(.guide-toggle,.agent-voice-toggle,.gesture-toggle,.agent-state,.agent-profile) {flex-basis:36px;width:36px;height:36px;min-height:36px!important;border-radius:10px}
  .agent-topbar__account .agent-state {flex-basis:50px;width:50px}
  .agent-topbar__account .agent-profile .avatar {width:29px;height:29px}
}
@media(prefers-reduced-motion:reduce) {
  .agent-topbar__account :is(.guide-toggle,.agent-voice-toggle,.gesture-toggle,.agent-state,.agent-profile),
  .agent-topbar__account :is(.guide-toggle__icon,.agent-voice-toggle__icon,.gesture-toggle__icon),
  .sidebar #mainNav .nav__item .nav-icon svg {animation:none!important;transition:none!important}
}
.agent-display-clock{display:grid;justify-items:center;gap:2px;margin-inline:auto;font-variant-numeric:tabular-nums;color:#e4e7ed;font-size:13px;white-space:nowrap}.agent-display-clock span{font-size:10px;color:#b7bec9}@media(max-width:700px){.agent-display-clock{font-size:11px;gap:0}.agent-display-clock span{font-size:8px}.agent-topbar .studio-trigger{flex:0 1 80px}}