@media (min-width: 900px) {
  :root { --col: 720px; --pad: 32px; }
}
@media (min-width: 1280px) {
  :root {
    --col: 860px;
    




  }
}

 
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled),
  .send-btn:hover:not(:disabled) { filter: brightness(1.08); }

  



  .htt-input:not([aria-disabled="true"]) .talk-btn:hover:not(:disabled):not(.active) {
    background: var(--tint-green);
  }
  .segmented button:hover:not(.active):not(:disabled) { color: var(--text); }
  .input-mode-btn:hover:not(:disabled) { border-color: var(--green); }

   
  .fp-panel:hover { box-shadow: 0 10px 32px var(--shadow-hover); }

   
  .nav-toggle:hover { background: var(--tint); }
  .nav-row:hover { background: var(--tint); }
  

  .nav-section-toggle:hover { background: var(--tint); }
   
  .nav-theme-btn:hover:not([aria-pressed="true"]) {
    border-color: var(--green);
    color: var(--text);
  }
  .fav-detail-close:hover { background: var(--tint); }
  .nav-status button:hover { border-color: var(--green); }
  

  .chat-card { box-shadow: 0 4px 24px var(--shadow-card); }
  

  .chat-mask-icon { width: 64px; height: 64px; }
}








@media (prefers-reduced-motion: reduce) {
  


  



  .chat-mask-icon.is-connecting { animation: none; stroke-dasharray: none; }
  

  .login-spinner { animation: none; }

  





  .nav-drawer, body.nav-open .nav-drawer,
  .nav-scrim, body.nav-open .nav-scrim { transition: none; }

  

  .fav-detail, .fav-detail.is-open { transition: none; }
  .tw { animation: none; opacity: 1; }

  


  :root { --agent-enter: none; }
}




























body[data-layout="wide"]:has(#loginOverlay.hidden) {
  









  --canvas-inset: max(0px, (100vw - var(--canvas-w)) / 2);
  




  padding-left: calc(var(--nav-w) + var(--canvas-inset));
  padding-right: var(--canvas-inset);
  



  background: var(--bg-out);
  background-image: linear-gradient(var(--bg), var(--bg));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: min(100vw, var(--canvas-w)) 100%;
  




}






body[data-layout="wide"]:has(#loginOverlay.hidden) .nav-drawer {
  left: var(--canvas-inset);
  transform: none;
  visibility: visible;
  box-shadow: none;
}



body[data-layout="wide"] .nav-scrim {
  display: none;
}
body[data-layout="wide"]:has(#loginOverlay.hidden) .nav-toggle {
  display: none;
}




body[data-layout="wide"]:has(#loginOverlay.hidden) .nav-head {
  display: flex;
}














body[data-layout="wide"]:not(:has(.dot.connected)) .nav-scroll {
  display: none;
}
body[data-layout="wide"]:not(:has(.dot.connected)) .nav-empty {
  display: grid;
}














body[data-layout="wide"]:has(#loginOverlay.hidden) .nav-reader-slot {
  display: flex;
}



body[data-layout="wide"]:has(#loginOverlay.hidden):not(:has(.dot.connected)) .nav-reader-slot {
  display: none;
}

































































body[data-layout="wide"] .fp-overlay .fp-panel {
  background: var(--tint);
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 12px;
}
body[data-layout="wide"] .fp-overlay .fp-panel .fp-btn {
  

  color: light-dark(var(--muted), var(--text));
}

body[data-layout="wide"] .fp-overlay.agent-overlay {
  position: absolute;
  top: calc(100% + 8px);
  right: 14px;
   
  --agent-pad-scale: calc(1 / 3);
  

  left: auto;
  width: auto;
  transform: none;
   
  animation: var(--agent-enter, none);
}
body[data-layout="wide"] .fp-overlay.agent-overlay .fp-panel {
  


  position: static;
  top: auto;
  right: auto;
  left: auto;
  transform: none;
}












body[data-layout="wide"] {
  --htt-pad: 14px 18px;
  --htt-gap: 12px;
  --pane-gap: 10px;
  --mode-btn-size: 48px;
  --mode-btn-fs: 1.45rem;
  --input-pad: 13px 16px;
  --input-fs: 1.0625rem;
  --input-radius: 14px;
  --send-pad: 13px 24px;
  --send-fs: 1.0625rem;
}



























body[data-layout="wide"] .container {
  --band-gap: calc(var(--pad) / 3);
  padding-top: var(--band-gap);
}
body[data-layout="wide"] .header {
  padding-bottom: var(--band-gap);
}
body[data-layout="wide"] .book-band {
  display: block;
  

  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--muted);
  

  flex: 1 1 auto;
  text-align: center;
   
  min-height: 20px;
  line-height: 20px;
   
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}