/* Oceanus Research Portal — iOS-calibrated motion + materials
 * Travel, bounce and press must be large enough to read as physical.
 * Reduced-motion users get the last-loaded reduced_motion.css kill switch.
 */

@media (prefers-reduced-motion: no-preference) {

/* ---------- Materials (iOS thick vibrancy on overlays only) ---------- */

html body .oc-cmdp {
  background: rgba(8, 8, 10, 0.42) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  transition:
    opacity var(--dur-pop) var(--ease-ios),
    visibility 0s linear var(--dur-pop) !important;
}
html body .oc-cmdp.is-open {
  transition:
    opacity var(--dur-pop) var(--ease-ios),
    visibility 0s linear 0s !important;
}

html body .oc-cmdp__panel,
html body .oc-sheet__panel,
html body .oc-pop,
html body .user-menu,
html body .lang-pop-menu,
html body .oc-ss-popup,
html body .oc-dd__menu,
html body .persona-popover,
html body .chat-pop,
html body .chat-sessions-pop,
html body .chat-model-pop,
html body .chat-tier-pop,
html body .chat-header-menu,
html body .mkt-search-results,
html body .ck-dd__menu,
html body .ticker-ac-dropdown,
html body .rn-link-hits {
  background: var(--overlay-fill) !important;
  border: 0.5px solid color-mix(in srgb, var(--text-primary) 18%, transparent) !important;
  border-radius: 14px !important;
  box-shadow: var(--overlay-shadow) !important;
  backdrop-filter: var(--overlay-filter) !important;
  -webkit-backdrop-filter: var(--overlay-filter) !important;
}

html body .oc-cmdp__panel {
  border-radius: 18px !important;
  transform: translateY(22px) scale(0.9);
  transform-origin: top center;
  transition: transform var(--dur-pop) var(--ease-ios-bounce) !important;
}
html body .oc-cmdp.is-open .oc-cmdp__panel {
  transform: none;
}

.lang-pop-menu,
.user-menu,
.oc-pop,
.oc-ss-popup,
.oc-dd__menu,
.chat-model-pop,
.chat-tier-pop,
.chat-header-menu,
.chat-sessions-pop,
.ticker-ac-dropdown,
.rn-link-hits {
  transition:
    opacity var(--dur-pop) var(--ease-ios-bounce),
    transform var(--dur-pop) var(--ease-ios-bounce),
    visibility 0s linear var(--dur-pop) !important;
}
.lang-pop-menu:not(.is-open):not(.open),
.oc-pop:not(.is-open):not(.open),
.oc-dd__menu:not(.is-open):not(.open),
.chat-model-pop:not(.open),
.chat-tier-pop:not(.open),
.chat-header-menu:not(.open),
.chat-sessions-pop:not(.open),
.ticker-ac-dropdown:not(.is-open):not(.open),
.rn-link-hits:not(.is-open):not(.open) {
  transform: translateY(-16px) scale(0.92);
}
.lang-pop-menu.is-open,
.user-menu.show,
.user-menu.oc-ov-open,
.oc-pop.is-open,
.oc-pop.open,
.oc-dd__menu.is-open,
.oc-dd__menu.open,
.chat-model-pop.open,
.chat-tier-pop.open,
.chat-header-menu.open,
.chat-sessions-pop.open,
.ticker-ac-dropdown.is-open,
.rn-link-hits.is-open {
  transform: none;
  transition:
    opacity var(--dur-pop) var(--ease-ios-bounce),
    transform var(--dur-pop) var(--ease-ios-bounce),
    visibility 0s linear 0s !important;
}

[data-oc-overlay] {
  --oc-ov-enter: var(--dur-pop) var(--ease-ios-bounce);
  --oc-ov-exit: var(--dur-pop) var(--ease-ios);
  --oc-ov-rise: 18px;
  --oc-ov-scale: 0.92;
}
[data-oc-overlay="sheet"] {
  --oc-ov-enter: var(--dur-sheet) var(--ease-ios-bounce);
  --oc-ov-exit: var(--dur-sheet) var(--ease-ios);
}
[data-oc-overlay="drawer"] {
  --oc-ov-enter: var(--dur-sheet) var(--ease-ios-bounce);
  --oc-ov-exit: var(--dur-sheet) var(--ease-ios);
}

.user-menu.oc-ov-bound:not(.oc-ov-open):not(.oc-ov-leaving) {
  opacity: 0;
  visibility: hidden;
}
.user-menu.oc-ov-bound.oc-ov-leaving {
  opacity: 0;
  visibility: visible;
}

/* ---------- Chrome frame ---------- */

html body .top-bar,
html body[data-theme="light"] .top-bar,
html body[data-theme="steel"] .top-bar {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1300;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
  view-transition-name: none;
}
html body .top-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-base) 28%, transparent);
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
}
html body[data-theme="light"] .top-bar::before {
  background: color-mix(in srgb, var(--bg-base) 42%, transparent);
}
html body .top-bar > * {
  position: relative;
  z-index: 1;
}

/* Phone tools tray: oceanus.css loads after responsive.css, so its
   z-index:1300 was beating body.topbar-tools-open .top-bar {1400} and
   the page dimmer (also 1300) painted on top — tray looked gray and
   lang/theme never received taps. */
@media (max-width: 820px) {
  html body .top-bar {
    height: calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px))) !important;
    min-height: calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px))) !important;
    max-height: calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px))) !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  html body .top-bar-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html body .top-bar-brand .sidebar-logo {
    max-height: 18px !important;
    max-width: 96px !important;
  }
  html body .top-bar-title-wrap {
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html body .top-bar-title {
    font-size: var(--fs-sm) !important;
    line-height: 1 !important;
    font-weight: var(--fw-medium, 500) !important;
  }
  html body .topbar-search {
    display: none !important;
  }
}
@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html body.topbar-tools-open .top-bar {
    z-index: 1450 !important;
  }
  html body.topbar-tools-open::after {
    z-index: 1400 !important;
  }
}

html body .status-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1300;
  height: calc(var(--statusbar-height, 32px) + env(safe-area-inset-bottom, 0px));
  min-height: var(--statusbar-height, 32px);
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  isolation: isolate;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body .status-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-base) 28%, transparent);
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
}
html body[data-theme="light"] .status-bar::before {
  background: color-mix(in srgb, var(--bg-base) 42%, transparent);
}
html body .status-bar > * {
  position: relative;
  z-index: 1;
}
html body .status-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
html body .status-bar-clocks {
  height: 14px;
  overflow: hidden;
  width: 14em;
  flex-shrink: 0;
  position: relative;
}
html body .sb-clk-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
html body .status-hint {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html body .status-hint:hover { color: var(--text-secondary); }
html body .status-hint kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color: var(--text-secondary);
}
html body .sb-clk {
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  height: 14px;
  line-height: 14px;
  flex: 0 0 14px;
}
html body .sb-clk-lab {
  color: var(--text-dim);
  letter-spacing: 0.04em;
  font-size: 9px;
  font-weight: var(--fw-semibold);
}
html body .status-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin-left: auto;
}
html body .status-bar-work,
html body .sidebar-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
}
html body .sidebar-status {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px var(--sp-3) 2px;
  font-size: calc(10px * var(--ui-font-scale, 1));
  line-height: 1.45;
}
html body .js-status-work[hidden],
html body .sb-work[hidden],
html body .sb-when[hidden] {
  display: none !important;
}
html body .sb-state {
  flex: 0 0 auto;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
html body .sb-state[data-state="working"] { color: var(--text-secondary); }
html body .sb-state[data-state="held"] { color: var(--warning); }
html body a.sb-work {
  color: inherit;
  text-decoration: none;
  min-width: 0;
  max-width: 22em;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .sidebar-status a.sb-work { max-width: 100%; }
html body a.sb-work:hover { color: var(--text-secondary); }
html body a.sb-work:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
html body .sb-when {
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  margin-left: 6px;
}
html body .sidebar.collapsed .sidebar-status { display: none; }
@media (min-width: 1025px) {
  html body .sidebar .sidebar-status { display: none !important; }
}
html[data-route="tablet"] .sidebar:not(.is-peek) .sidebar-status { display: none; }
html[data-route="tablet"] body.sidebar-open .sidebar .sidebar-status { display: flex; }
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .sidebar-status {
  display: none;
}
@media (max-width: 1024px) {
  html body .status-bar { display: none !important; }
}
/* Menus: frost on the plate itself (not ::before). Overlay `will-change:
   transform` otherwise makes backdrop-filter sample an empty layer, so the
   list is a see-through sheet and the labels fail. Denser fill than the
   top bar so type stays readable. */
html body .lang-pop-menu,
html body .theme-pop-menu,
html body .lang-pop-menu.oc-ov-bound,
html body .theme-pop-menu.oc-ov-bound {
  isolation: auto;
  will-change: auto !important;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: blur(28px) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.55) !important;
}
html body[data-theme="light"] .lang-pop-menu,
html body[data-theme="light"] .theme-pop-menu {
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent) !important;
}
@media (prefers-reduced-transparency: reduce) {
  html body .top-bar,
  html body[data-theme="light"] .top-bar,
  html body[data-theme="steel"] .top-bar,
  html body .lang-pop-menu,
  html body .theme-pop-menu,
  html body .status-bar {
    background: var(--bg-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body .top-bar::before,
  html body .status-bar::before {
    content: none;
  }
  html body .status-bar {
    background: var(--bg-elevated) !important;
  }
}
html body a:hover,
html body a:active {
  text-decoration: none !important;
}

html body .sidebar,
html body .sidebar-header,
html body .sidebar-footer,
html body .sidebar-search,
html body .world-clock,
html body .sidebar-status {
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

/* Desktop: floating plate — inset so all four corners round, light shadow. */
@media (min-width: 1025px) {
  html body .sidebar {
    --sidebar-gutter: 10px;
    top: calc(var(--oc-topbar-stack, calc(var(--topbar-height) + var(--sat-fix, env(safe-area-inset-top, 0px)))) + var(--sidebar-gutter));
    bottom: calc(var(--statusbar-height, 32px) + env(safe-area-inset-bottom, 0px) + var(--sidebar-gutter)) !important;
    left: var(--sidebar-gutter);
    border: none !important;
    border-radius: var(--r-xl, 12px);
    box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--text-primary) 28%, transparent);
  }
}

/* Peek: frost the sibling .sidebar-frost plate, not the sidebar itself.
   Nested backdrop-filter on the profile row fails when the parent is already
   a filter root (empty sample). desk.css zeros filter on .sidebar. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  html body .sidebar.collapsed.is-peek {
    isolation: auto !important;
    will-change: auto !important;
    view-transition-name: none !important;
    filter: none !important;
    contain: none !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--r-xl, 12px);
    box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--text-primary) 28%, transparent);
  }
  html body .sidebar.collapsed.is-peek > .sidebar-frost {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background: color-mix(in srgb, var(--bg-elevated) 16%, transparent);
    backdrop-filter: blur(40px) saturate(1.8);
    -webkit-backdrop-filter: blur(40px) saturate(1.8);
    will-change: auto;
  }
  html body[data-theme="light"] .sidebar.collapsed.is-peek > .sidebar-frost,
  html[data-theme="light"] body .sidebar.collapsed.is-peek > .sidebar-frost {
    background: color-mix(in srgb, var(--bg-elevated) 22%, transparent);
  }
  html body .sidebar.collapsed.is-peek .sidebar-nav {
    position: relative;
    z-index: 1;
  }
  html body .sidebar.collapsed.is-peek .sidebar-footer {
    isolation: auto !important;
    will-change: auto !important;
    background: color-mix(in srgb, var(--bg-elevated) 22%, transparent) !important;
    backdrop-filter: blur(40px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
    border-radius: 0 0 var(--r-xl, 12px) var(--r-xl, 12px);
  }
  html body[data-theme="light"] .sidebar.collapsed.is-peek .sidebar-footer {
    background: color-mix(in srgb, var(--bg-elevated) 38%, transparent) !important;
  }
  html body .sidebar.collapsed.is-peek .sidebar-footer::before {
    content: none !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  html body .sidebar.collapsed.is-peek {
    background: var(--bg-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 12px 32px -14px color-mix(in srgb, var(--text-primary) 28%, transparent);
  }
  html body .sidebar.collapsed.is-peek > .sidebar-frost,
  html body .sidebar.collapsed.is-peek .sidebar-footer {
    background: var(--bg-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ---------- iOS segmented tab ink (Paper only) ---------- */

.oc-tabs {
  position: relative;
  isolation: isolate;
}
html:not(.page-pmos) .oc-tab-ink {
  display: none !important;
}
.oc-tab-ink {
  position: absolute;
  top: 2px;
  left: 0;
  height: calc(100% - 4px);
  width: 0;
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 0 0 0.5px color-mix(in srgb, var(--text-primary) 10%, transparent);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateX(0);
  transition:
    transform var(--dur-pop) var(--ease-ios-bounce),
    width var(--dur-pop) var(--ease-ios-bounce),
    opacity var(--dur-ui) var(--ease-ios);
}
html.page-pmos body .oc-tabs .tab-btn,
html.page-pmos body .oc-tabs .mv-tab,
html.page-pmos body .oc-tabs .dash-tl-tab,
html.page-pmos body .oc-tabs .wl-sort-btn,
html.page-pmos body .oc-tabs .modal-tab,
html.page-pmos body .oc-tabs .research-tab,
html.page-pmos body .oc-tabs .cal-view-btn {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
html.page-pmos body .oc-tabs .tab-btn.active,
html.page-pmos body .oc-tabs .mv-tab.active,
html.page-pmos body .oc-tabs .dash-tl-tab.is-active,
html.page-pmos body .oc-tabs .wl-sort-btn.is-on,
html.page-pmos body .oc-tabs .modal-tab.is-active,
html.page-pmos body .oc-tabs .research-tab.is-active,
html.page-pmos body .oc-tabs .cal-view-btn.is-active {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-bottom-color: transparent !important;
}

/* ---------- Press: buttons/nav compress; rows highlight ---------- */

html body .btn,
html body .btn-primary,
html body .btn-secondary,
html body .btn-ghost,
html body .nav-item,
html body .chip,
html body .tab-btn,
html body .mv-tab,
html body .wl-sort-btn,
html body .oc-cmdp__item,
html body .user-menu-item,
html body .chat-fab,
html body #chat-fab,
html body .qp-watch,
html body .ask-oceanus-btn,
html body .oc-cmdp-trigger {
  transition:
    transform var(--dur-press) var(--ease-ios),
    background-color var(--dur-ui) var(--ease-ios),
    color var(--dur-ui) var(--ease-ios),
    border-color var(--dur-ui) var(--ease-ios) !important;
}
html body .btn:active,
html body .btn-primary:active,
html body .btn-secondary:active,
html body .nav-item:active,
html body .chip:active,
html body .tab-btn:active,
html body .mv-tab:active,
html body .oc-cmdp__item:active,
html body .user-menu-item:active,
html body .chat-fab:active,
html body #chat-fab:active,
html body .qp-watch:active,
html body .ask-oceanus-btn:active,
html body .oc-cmdp-trigger:active {
  transform: scale(0.96) !important;
}

/* Chat FAB: restore the quiet lift + pen tilt (desk had flattened hover). */
html body .chat-toggle-fab:hover,
html body .chat-fab:hover,
html body #chat-fab:hover,
html body .chat-toggle-fab:focus-visible,
html body .chat-fab:focus-visible,
html body #chat-fab:focus-visible {
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 0 10px 22px -14px color-mix(in srgb, #000 55%, transparent) !important;
}
html body .chat-toggle-fab:hover .chat-fab-ico,
html body .chat-fab:hover .chat-fab-ico,
html body #chat-fab:hover .chat-fab-ico,
html body .chat-toggle-fab:focus-visible .chat-fab-ico,
html body #chat-fab:focus-visible .chat-fab-ico {
  transform: translate(0.5px, -1.5px) rotate(-14deg) !important;
}
html body .chat-toggle-fab:active,
html body .chat-fab:active,
html body #chat-fab:active {
  transform: translateY(-1px) scale(0.97) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body .chat-toggle-fab:hover,
  html body .chat-fab:hover,
  html body #chat-fab:hover,
  html body .chat-toggle-fab:focus-visible,
  html body .chat-fab:focus-visible,
  html body #chat-fab:focus-visible,
  html body .chat-toggle-fab:active,
  html body .chat-fab:active,
  html body #chat-fab:active,
  html body .chat-toggle-fab:hover .chat-fab-ico,
  html body .chat-fab:hover .chat-fab-ico,
  html body #chat-fab:hover .chat-fab-ico {
    transform: none !important;
    box-shadow: none !important;
  }
}

html body .wl-row,
html body .dash-tl-entry,
html body .mkt-table tbody tr {
  transition: background-color 180ms var(--ease-ios) !important;
}
html body .wl-row:hover,
html body .wl-table tbody tr:hover td,
html body .mkt-table tbody tr:hover td,
html body .dash-tl-entry:hover {
  background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
}
html body .wl-row:active,
html body .dash-tl-entry:active {
  background: color-mix(in srgb, var(--text-primary) 14%, transparent) !important;
}
html body .mkt-table tbody tr:active td {
  background: color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
}
html body .wl-row.active,
html body .wl-table tbody tr.is-selected td,
html body .mkt-table tbody tr.is-selected td {
  background: var(--accent-muted) !important;
}

/* ---------- Arrival: enough travel to read as a list landing ---------- */

.is-first-paint > .wl-row,
.is-first-paint > tr,
.mkt-watchlist .is-first-paint .wl-row {
  animation: oc-arrive var(--dur-pop) var(--ease-ios-bounce) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes oc-arrive {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.qp-symbol { color: inherit; text-decoration: none; }
a.qp-symbol:hover { color: var(--accent); text-decoration: none; }

/* ---------- Chat: full-travel spring (JS still drives the pixel slide) ---------- */

.content-wrapper.chat-sliding {
  overflow: visible !important;
}
.content-wrapper.chat-sliding .content-right.mode-dock {
  z-index: 30;
  box-shadow: -24px 0 48px -16px rgba(0, 0, 0, 0.5);
}

@keyframes oc-chat-float-in {
  from { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes oc-chat-float-out {
  to { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.88); }
}
html body .content-right.mode-float.closing,
html body .content-right.mode-mini.closing {
  transform-origin: 100% 100%;
  animation: oc-chat-float-out var(--dur-pop) var(--ease-ios) forwards !important;
  filter: none !important;
}

/* ---------- Page flip: only main content moves. Sidebar is not a
   view-transition participant — naming it still swapped two snapshots
   and the rail flickered even when collapsed. Root does not slide. ---------- */

::view-transition-image-pair(root) {
  isolation: none;
}
/* Never hide the root snapshot — display:none left a black viewport
   while the transition layer was up (chat open, popovers, page flip). */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
}
@keyframes oc-ios-out {
  to { opacity: 1; }
}
@keyframes oc-ios-in {
  from { transform: translateX(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.sidebar { view-transition-name: none !important; }
/* Do not name the chat. Chrome cross-document view transitions put a
   named fixed window in the top layer, and animation:none on that
   group never drops the previous snapshot. The closed chat then sits
   over Dashboard and Watchlist, and the painted close button is not
   the live one. Float mode is position:fixed, outside the page
   snapshot, so it does not need a name. */
#chat-drawer,
#chat-drawer.collapsed,
#chat-drawer.closing {
  view-transition-name: none !important;
}
.main-content { view-transition-name: oc-main; }
/* uiarc.dev: exits faster than entrances; content rises a few px, no slide.
   The old page fades out in 120ms while the new one fades in and rises 6px. */
::view-transition-old(oc-main) {
  animation: 120ms cubic-bezier(.7, 0, .84, 0) both oc-page-out;
}
::view-transition-new(oc-main) {
  animation: 240ms cubic-bezier(.16, 1, .3, 1) both oc-page-in;
}
@keyframes oc-page-out { to { opacity: 0; } }
@keyframes oc-page-in { from { opacity: 0; transform: translateY(6px); } }

.top-bar { view-transition-name: oc-topbar; }
.app-command-tray,
body > .app-command-tray,
body > .app-command-tray-shell { view-transition-name: oc-tray; }

::view-transition-group(oc-topbar),
::view-transition-old(oc-topbar),
::view-transition-new(oc-topbar),
::view-transition-group(oc-tray),
::view-transition-old(oc-tray),
::view-transition-new(oc-tray) {
  animation: none;
}
::view-transition-group(oc-vt-symbol) {
  animation-duration: var(--dur-sheet);
  animation-timing-function: var(--ease-ios);
}

} /* prefers-reduced-motion: no-preference */

/* Chat is a panel, not a lightbox. Kill leftover page dimmers. */
html body.chat-open::after,
html body.chat-sheet-open::before,
html body:has(.content-right.mode-float:not(.collapsed))::before,
html body:has(.content-right.mode-mini:not(.collapsed))::before,
html body:has(#chat-drawer.mode-float:not(.collapsed))::before,
html body:has(#chat-drawer.mode-mini:not(.collapsed))::before {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
}

@media (prefers-reduced-transparency: reduce) {
  html body .oc-cmdp__panel,
  html body .oc-sheet__panel,
  html body .oc-pop,
  html body .user-menu,
  html body .lang-pop-menu,
  html body .chat-model-pop,
  html body .chat-tier-pop,
  html body .chat-sessions-pop {
    background: var(--bg-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

html body[data-oc-shell] .btn,
html body[data-oc-shell] .btn-primary,
html body[data-oc-shell] .btn-secondary,
html body[data-oc-shell] .btn-ghost,
html body[data-oc-shell] .btn-danger,
html body[data-oc-shell] .pf-btn,
html body[data-oc-shell] .cal-btn,
html body[data-oc-shell] .dd-btn,
html body[data-oc-shell] .wl-row-btn,
html body[data-oc-shell] .an-btn {
  border-radius: var(--r-control, 8px) !important;
}
html body[data-oc-shell] .chip,
html body[data-oc-shell] .badge,
html body[data-oc-shell] .nav-item,
html body[data-oc-shell] .chat-fab,
html body[data-oc-shell] #chat-fab,
html body[data-oc-shell] .wl-pill,
html body[data-oc-shell] .cew-chip {
  border-radius: var(--r-full) !important;
}

/* Profile row: pin inside the rail and stack the rail above the status bar
   so the footer cannot sit in a lower stacking context under the frost. */
@media (min-width: 1025px) {
  html body.has-status-bar #sidebar.sidebar {
    z-index: 1310 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    bottom: calc(var(--statusbar-height, 32px) + env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
  html body.has-status-bar #sidebar .sidebar-footer {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 6 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body.has-status-bar #sidebar .user-profile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Profile row: frost plate over the nav (same family as the top/status bars).
   Frost lives on ::before so overflow:visible can still park the user menu. */
html body .sidebar .sidebar-footer {
  isolation: auto;
  background: transparent !important;
  will-change: auto;
}
html body .sidebar .sidebar-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg-elevated) 22%, transparent);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
}
@media (min-width: 1025px) {
  html body .sidebar .sidebar-footer::before {
    border-radius: 0 0 var(--r-xl, 12px) var(--r-xl, 12px);
  }
}
html body[data-theme="light"] .sidebar .sidebar-footer::before {
  background: color-mix(in srgb, var(--bg-elevated) 38%, transparent);
}
html body .sidebar .sidebar-footer > * {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-transparency: reduce) {
  html body .sidebar .sidebar-footer {
    background: var(--bg-elevated) !important;
  }
  html body .sidebar .sidebar-footer::before {
    content: none;
  }
}