/* Owner of drawer geometry, icon alignment, labels, Math visibility and main-content offsets.
   Theme colours remain in the existing theme sheets.
   !important bridges older important declarations until those features are migrated. */
html body #appRoot.app {
  --nav-rail-width: 72px;
  --nav-panel-width: 334px;
  --nav-icon-size: 25px;
  --nav-row-height: 44px;
  --nav-inline-padding: 12px;
  --nav-icon-inset: 11.5px;
  --drawer-width: var(--nav-rail-width);
}
html body #appRoot.app:has(> #sideDrawer:not(.is-collapsed):not(.hidden)) {
  --drawer-width: var(--nav-panel-width);
}
html body #appRoot.app > #sideDrawer.side-drawer {
  display: flex;
  flex-direction: column;
  width: var(--drawer-width) !important;
  min-width: var(--drawer-width) !important;
  max-width: var(--drawer-width) !important;
  padding: 16px var(--nav-inline-padding) 8px !important;
  gap: 0 !important;
  overflow-x: hidden !important;
}
html body #appRoot.app > #sideDrawer .drawer-brand {
  height: 42px !important;
  min-height: 42px !important;
  justify-content: flex-start !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
}
html body #appRoot.app > #sideDrawer .drawer-brand-lockup {
  --drawer-brand-icon-slot: 58px;
  position: relative !important;
  width: var(--drawer-brand-icon-slot) !important;
  min-width: var(--drawer-brand-icon-slot) !important;
  flex: 0 0 var(--drawer-brand-icon-slot) !important;
  justify-content: flex-start !important;
  margin: 0 0 0 -4px !important;
}
html body #appRoot.app > #sideDrawer .drawer-brand-fish {
  width: 58px !important;
  height: auto !important;
  flex: 0 0 58px !important;
}
html body #appRoot.app > #sideDrawer.math-drawer-mode .drawer-brand-fish { display: none !important; }
html body #appRoot.app > #sideDrawer.math-drawer-mode .drawer-brand-math-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 42px !important;
  flex: 0 0 36px !important;
  margin: 0 8px 0 0 !important;
  color: #168bd0 !important;
  font: 400 38px/1 Georgia, "Times New Roman", serif !important;
  transform: translateY(-1px);
}
html body #appRoot.app > #sideDrawer.math-drawer-mode .drawer-brand-wordmark {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-left: 0 !important;
}
html body #appRoot.app > #sideDrawer:not(.is-collapsed).math-drawer-mode .drawer-brand-lockup {
  --drawer-brand-icon-slot: 44px;
}
html body #appRoot.app > #sideDrawer.math-drawer-mode .drawer-brand-math { margin-left: 3px !important; }
/* Keep the Math sigma centered on the same 72px rail axis in both drawer states. */
html body #appRoot.app > #sideDrawer:not(.is-collapsed).math-drawer-mode .drawer-brand-lockup {
  margin-left: 6px !important;
}
html body #appRoot.app > #sideDrawer .drawer-primary-nav {
  gap: 7px !important;
  margin-top: 0 !important;
}
html body #appRoot.app > #sideDrawer .drawer-primary-nav > .drawer-nav-btn,
html body #appRoot.app > #sideDrawer .math-drawer-nav-row > .drawer-nav-btn {
  width: 100% !important;
  min-width: 0 !important;
  height: var(--nav-row-height) !important;
  min-height: var(--nav-row-height) !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 var(--nav-icon-inset) !important;
}
html body #appRoot.app > #sideDrawer .drawer-nav-icon {
  width: var(--nav-icon-size) !important;
  height: var(--nav-icon-size) !important;
  flex: 0 0 var(--nav-icon-size) !important;
}
html body #appRoot.app > #sideDrawer .drawer-account {
  height: 52px !important;
  min-height: 52px !important;
  margin: auto 0 0 !important;
  padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
  justify-content: flex-start !important;
  border: 0 !important;
}
html body #appRoot.app > #sideDrawer .drawer-account::before,
html body #appRoot.app > #sideDrawer .drawer-account::after {
  content: none !important;
  display: none !important;
}
html body #appRoot.app > #sideDrawer .drawer-account-main {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  padding: 0 0 0 3px !important;
}
html body #appRoot.app > #sideDrawer .drawer-account-main > img {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  margin-right: 0 !important;
}
html body #appRoot.app > #sideDrawer:not(.is-collapsed) .drawer-brand-wordmark { display: flex !important; }
html body #appRoot.app > #sideDrawer:not(.is-collapsed) .drawer-nav-btn > span { display: inline !important; }
html body #appRoot.app > #sideDrawer:not(.is-collapsed) .drawer-chat-section { display: block !important; }
html body #appRoot.app > #sideDrawer:not(.is-collapsed).math-drawer-mode .drawer-chat-section { display: none !important; }
html body #appRoot.app > #sideDrawer:not(.is-collapsed) .drawer-account-copy { display: grid !important; }
html body #appRoot.app > #sideDrawer:not(.is-collapsed) .drawer-account-more-wrap {
  position: absolute !important;
  top: 50% !important;
  right: 44px !important;
  z-index: 4 !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}
html body #appRoot.app > #sideDrawer:not(.is-collapsed) .drawer-account-more {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html body #appRoot.app > #sideDrawer:not(.is-collapsed) .drawer-account-main { padding-right: 58px !important; }
html body #appRoot.app > #sideDrawer:not(.is-collapsed).math-drawer-mode .math-drawer-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-brand-wordmark,
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-nav-btn > span,
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-chat-section,
html body #appRoot.app > #sideDrawer.is-collapsed .math-drawer-content,
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-account-copy,
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-account-more { display: none !important; }
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-brand-fish { display: block !important; }
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-account-main > img { margin-right: 0 !important; }
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-primary-nav > .drawer-nav-btn,
html body #appRoot.app > #sideDrawer.is-collapsed .math-drawer-nav-row > .drawer-nav-btn {
  justify-content: flex-start !important;
}
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-brand-lockup { margin-left: -4px !important; }
html body #appRoot.app > #sideDrawer.is-collapsed .drawer-account { justify-content: flex-start !important; }
html body #appRoot.app > #sideDrawer.is-collapsed.math-drawer-mode .drawer-brand-lockup {
  --drawer-brand-icon-slot: 48px;
  justify-content: center !important;
  margin: 0 auto !important;
}
html body #appRoot.app > #sideDrawer.is-collapsed.math-drawer-mode .drawer-brand-wordmark { display: none !important; }
html body #appRoot.app > #sideDrawer.is-collapsed.math-drawer-mode .drawer-brand-fish { display: none !important; }
html body #appRoot.app > #sideDrawer.is-collapsed.math-drawer-mode .drawer-brand-math-mark {
  width: 48px !important;
  height: 42px !important;
  flex-basis: 48px !important;
  margin: 0 !important;
  font-size: 38px !important;
}
html body #appRoot.app > #sideDrawer.is-collapsed.math-drawer-mode #mathDrawerSearchToggle {
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
html body #appRoot.app > #sideDrawer.is-collapsed.math-drawer-mode #mathDrawerSearchToggle > .drawer-nav-icon {
  display: block !important;
  flex: 0 0 var(--nav-icon-size) !important;
  margin: 0 !important;
}
html body.ui-dark-mode #appRoot.app > #sideDrawer.math-drawer-mode .drawer-brand-math-mark { color: #60a5fa !important; }
html body #appRoot.app > #sideDrawer .drawer-brand-lockup {
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: inherit !important;
  background: transparent !important;
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html body #appRoot.app > #sideDrawer .drawer-brand-fish,
html body #appRoot.app > #sideDrawer .drawer-brand-math-mark { transition: opacity .14s ease; }
html body #appRoot.app > #sideDrawer .drawer-brand-wordmark {
  position: absolute !important;
  z-index: 1;
  top: 50%;
  left: calc(var(--drawer-brand-icon-slot) + 7px);
  transform: translateY(-50%);
  pointer-events: none !important;
}
html body #appRoot.app > #sideDrawer .drawer-brand-action {
  position: absolute !important;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: none;
  width: 23px;
  height: 23px;
  transform: translate(-50%, -50%);
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
html body #appRoot.app > #sideDrawer .drawer-brand-lockup:hover .drawer-brand-fish,
html body #appRoot.app > #sideDrawer .drawer-brand-lockup:focus-visible .drawer-brand-fish,
html body #appRoot.app > #sideDrawer.math-drawer-mode .drawer-brand-lockup:hover .drawer-brand-math-mark,
html body #appRoot.app > #sideDrawer.math-drawer-mode .drawer-brand-lockup:focus-visible .drawer-brand-math-mark { opacity: 0; }
html body #appRoot.app > #sideDrawer .drawer-brand-lockup:hover .drawer-brand-menu-icon,
html body #appRoot.app > #sideDrawer .drawer-brand-lockup:focus-visible .drawer-brand-menu-icon { display: block; }

html body #appRoot.app > .topbar #accountToggle.temporary-chat-toggle .temporary-chat-toggle-icon { display: block; width: 23px; height: 23px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html body #appRoot.app > .topbar #accountToggle.temporary-chat-toggle .temporary-chat-toggle-outline { stroke-dasharray: 2 2.5; }
html body #appRoot.app > .topbar #accountToggle.temporary-chat-toggle .temporary-chat-toggle-check { opacity: 0; transform: scale(.65); transform-origin: center; transition: opacity .16s ease, transform .16s ease; }
html body #appRoot.app > .topbar #accountToggle.temporary-chat-toggle.is-temporary-active .temporary-chat-toggle-check { opacity: 1; transform: scale(1); }
html body #appRoot.app.guest-session > .topbar #accountToggle.temporary-chat-toggle { display: grid !important; }
html body #appRoot.app.math-mode > .topbar #accountToggle.temporary-chat-toggle { display: none !important; }
html body #appRoot.app.temporary-chat-mode #memoryToggle { display: none !important; }

html body #appRoot.app.temporary-chat-mode #splashFishButton,
html body #appRoot.app.temporary-chat-mode #splashFishButton .fish-logo.big,
html body #appRoot.app.temporary-chat-mode #splashFishButton .splash-fish-bubbles i { pointer-events: none !important; animation: none !important; transform: none !important; filter: none !important; }
html body #appRoot.app.temporary-chat-mode #splashFishButton use { stroke-dasharray: 5 5 !important; stroke-linecap: round !important; }
html body #appRoot.app.temporary-chat-mode #splashFishButton .splash-fish-bubbles,
html body #appRoot.app.temporary-chat-mode #splashPrompt { display: none !important; }
html body #appRoot.app.temporary-chat-mode #splashTempDescription { display: block !important; max-width: min(360px, 86vw); margin: 9px auto 0; color: #7b8491; font-size: 12px; line-height: 1.55; font-weight: 500; }
html body #appRoot.app.temporary-chat-mode #splash > h1 { font-size: clamp(22px, 3vw, 30px); letter-spacing: .015em; }

@media (max-width: 700px) {
  html body #appRoot.app > #sideDrawer .drawer-brand-lockup { cursor: default; pointer-events: none !important; }
  html body #appRoot.app > #sideDrawer .drawer-brand-action { display: none !important; }
}
html body #appRoot.app:has(> #sideDrawer:not(.hidden)) > .topbar,
html body #appRoot.app:has(> #sideDrawer:not(.hidden)) > .chat-area {
  width: calc(100% - var(--drawer-width)) !important;
  margin-left: var(--drawer-width) !important;
}
html body #appRoot.app:has(> #sideDrawer:not(.hidden)) > form#chatForm.reference-composer {
  width: min(890px, calc(100% - var(--drawer-width) - 28px)) !important;
  left: calc(50% + var(--drawer-width) / 2) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}
@media (min-width: 701px) {
  html body #appRoot.app:has(> #sideDrawer:not(.hidden)):has(> #mathStudioPanel:not(.hidden)) > .chat-area {
    width: calc(100% - var(--drawer-width) - var(--math-studio-width)) !important;
    margin-right: var(--math-studio-width) !important;
  }
  html body #appRoot.app:has(> #sideDrawer:not(.hidden)):has(> #mathStudioPanel:not(.hidden)) > form#chatForm.reference-composer {
    width: min(890px, calc(100% - var(--drawer-width) - var(--math-studio-width) - 28px)) !important;
    left: calc(50% + (var(--drawer-width) - var(--math-studio-width)) / 2) !important;
  }
}
@media (max-width: 700px) {
  html body #appRoot.app { --nav-rail-width: 0px; --nav-panel-width: min(334px, 88vw); --drawer-width: 0px; }
  html body #appRoot.app > #sideDrawer.is-collapsed { display: none !important; }
  html body #appRoot.app > #sideDrawer:not(.is-collapsed):not(.hidden) { --drawer-width: min(334px, 88vw); }
  html body #appRoot.app:has(> #sideDrawer:not(.is-collapsed):not(.hidden)) > .topbar,
  html body #appRoot.app:has(> #sideDrawer:not(.is-collapsed):not(.hidden)) > .chat-area {
    width: 100% !important;
    margin-left: 0 !important;
  }
  html body #appRoot.app:has(> #sideDrawer:not(.is-collapsed):not(.hidden)) > form#chatForm.reference-composer {
    width: calc(100% - 28px) !important;
    left: 50% !important;
  }
}