/* Device-route chrome. Every selector requires html[data-route].
   With the attribute absent the file is inert. Linked after reduced_motion.css. */

html[data-route="tablet"] {
  --command-tray-pad: 0px;
  --topbar-height: 49px;
}
html[data-route="phone"] {
  --command-tray-height: 52px;
  --command-tray-pad: calc(
    var(--command-tray-height) + var(--sab-fix, env(safe-area-inset-bottom, 0px))
  );
}

/* ---- tray ---- */
html[data-route="desktop"] .app-command-tray,
html[data-route="desktop"] .app-command-tray-shell,
html[data-route="tablet"] .app-command-tray,
html[data-route="tablet"] .app-command-tray-shell {
  display: none !important;
}
html[data-route="phone"] .app-command-tray,
html[data-route="phone"] .app-command-tray-shell {
  display: flex !important;
}
html[data-route="phone"].page-pmos #act-chat,
html.page-pmos[data-route="phone"] #act-chat {
  display: none !important;
}

/* ---- rail ---- */
html[data-route="desktop"] .sidebar,
html[data-route="desktop"] .sidebar.collapsed,
html[data-route="tablet"] .sidebar,
html[data-route="tablet"] .sidebar.collapsed {
  transform: none !important;
  transition: none !important;
}
/* In-place rail, same widths as desktop. The narrow-width sheet
   (off-canvas 280px plus a dimmer) does not apply on tablet. */
html[data-route="tablet"] .sidebar {
  width: var(--sidebar-width) !important;
  box-shadow: none !important;
}
html[data-route="tablet"] .sidebar.collapsed:not(.is-peek),
html[data-route="tablet"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) {
  width: var(--sidebar-width-collapsed) !important;
}
html[data-route="tablet"] body.sidebar-open .sidebar {
  transform: none !important;
  box-shadow: none !important;
}
html[data-route="tablet"] .main-content {
  margin-left: calc(var(--sidebar-width) + var(--sidebar-gutter, 10px)) !important;
}
html[data-route="tablet"] body.sidebar-collapsed .main-content,
html[data-route="tablet"][data-sidebar-init="collapsed"] .main-content,
html[data-route="tablet"] body.sidebar-collapsed .main-content {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-gutter, 10px)) !important;
}
html[data-route="tablet"] body.sidebar-open .sidebar-backdrop {
  display: none !important;
}
html[data-route="tablet"] .sidebar.collapsed:not(.is-peek) .sb-pref-bar,
html[data-route="tablet"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .sb-pref-bar {
  display: none !important;
}
html[data-route="tablet"] #sidebar-route-toggle {
  display: none !important;
}
html[data-route="tablet"] .top-bar-brand .sidebar-toggle {
  display: inline-flex !important;
}
html[data-route="desktop"] #sidebar-mobile-trigger,
html[data-route="tablet"] #sidebar-mobile-trigger {
  display: none !important;
}

html[data-route="desktop"] .main-content {
  margin-left: calc(var(--sidebar-width) + var(--sidebar-gutter, 10px)) !important;
}
html[data-route="desktop"] body.sidebar-collapsed .main-content,
html[data-route="desktop"][data-sidebar-init="collapsed"] .main-content {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-gutter, 10px)) !important;
}
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) {
  width: var(--sidebar-width-collapsed) !important;
  transform: none !important;
}
html[data-route="desktop"] .sidebar.collapsed.is-peek {
  width: var(--sidebar-width) !important;
}
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .nav-item .label,
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .nav-item .badge,
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .nav-item .expand-icon {
  opacity: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .user-info,
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .user-menu-toggle,
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .world-clock,
html[data-route="desktop"][data-sidebar-init="collapsed"] .sidebar:not(.is-peek) .sb-pref-bar {
  display: none;
}

html[data-route="phone"] .sidebar,
html[data-route="phone"] .sidebar.collapsed {
  width: 280px !important;
  transform: translateX(-100%) !important;
}
html[data-route="phone"] body.sidebar-open .sidebar,
html[data-route="phone"] body.sidebar-open .sidebar.collapsed {
  transform: translateX(0) !important;
}
html[data-route="phone"] .main-content,
html[data-route="phone"] body.sidebar-collapsed .main-content {
  margin-left: 0 !important;
}
html[data-route="phone"] #sidebar-mobile-trigger {
  display: inline-flex !important;
}

/* ---- chat ---- */
html[data-route="tablet"] .content-right.mode-dock,
html[data-route="desktop"] .content-right.mode-dock {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
}
html[data-route="tablet"] .content-right.mode-dock:not(.collapsed),
html[data-route="tablet"][data-chat-dock="1"] .content-right.mode-dock:not(.collapsed) {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
}
html[data-route="tablet"] .content-right.mode-dock.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  transform: none !important;
}
/* Open tablet chat fills the workspace: below the top bar, to the
   right of the rail, and above the status bar when that bar is
   showing. Edge-to-edge left/top sat under the rail and clipped the
   header. data-chat-max is the first paint; .maximized keeps it. */
html[data-route="tablet"] .content-right.mode-float.maximized,
html[data-route="tablet"][data-chat-max="1"] .content-right:not(.collapsed) {
  position: fixed !important;
  top: calc(var(--oc-topbar-stack, calc(var(--topbar-height, 49px) + var(--sat-fix, env(safe-area-inset-top, 0px)))) + 8px) !important;
  right: calc(8px + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(8px + var(--sab-fix, env(safe-area-inset-bottom, 0px))) !important;
  left: calc(var(--sidebar-width, 260px) + var(--sidebar-gutter, 10px) + 8px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 9000 !important;
}
html[data-route="tablet"] body.sidebar-collapsed .main-content .content-right.mode-float.maximized,
html[data-route="tablet"][data-sidebar-init="collapsed"] .content-right.mode-float.maximized,
html[data-route="tablet"] body.sidebar-collapsed .content-right.mode-float.maximized,
html[data-route="tablet"][data-sidebar-init="collapsed"][data-chat-max="1"] .content-right:not(.collapsed),
html[data-route="tablet"][data-chat-max="1"] body.sidebar-collapsed .content-right:not(.collapsed) {
  left: calc(var(--sidebar-width-collapsed, 64px) + var(--sidebar-gutter, 10px) + 8px) !important;
}
@media (min-width: 1025px) {
  html[data-route="tablet"] .content-right.mode-float.maximized,
  html[data-route="tablet"][data-chat-max="1"] .content-right:not(.collapsed) {
    bottom: calc(var(--statusbar-height, 32px) + var(--sab-fix, env(safe-area-inset-bottom, 0px)) + 8px) !important;
  }
}
/* Keyboard and the dictation bar pan the visual viewport, which shoves
   the fixed page upward. Lock the shell at its pre-keyboard height and
   only shorten the chat from the bottom so the composer clears the bar. */
html[data-route="tablet"].oc-vv-lock,
html[data-route="tablet"].oc-vv-lock body {
  height: var(--oc-vv-lock-h, 100dvh) !important;
  overflow: hidden !important;
}
html[data-route="tablet"].oc-vv-lock body {
  position: fixed !important;
  inset: 0;
  width: 100% !important;
}
html[data-route="tablet"].oc-vv-lock .app-layout,
html[data-route="tablet"].oc-vv-lock .main-content {
  height: var(--oc-vv-lock-h, 100dvh) !important;
  min-height: var(--oc-vv-lock-h, 100dvh) !important;
  padding-bottom: 0 !important;
}
html[data-route="tablet"].oc-vv-pan .top-bar,
html[data-route="tablet"].oc-vv-pan .sidebar,
html[data-route="tablet"].oc-vv-pan .sidebar.collapsed {
  transform: translate3d(0, var(--oc-vv-top, 0px), 0) !important;
}
html[data-route="tablet"].oc-vv-pan .content-right.mode-float.maximized,
html[data-route="tablet"].oc-vv-pan #chat-drawer.mode-float.maximized,
html[data-route="tablet"].oc-vv-pan[data-chat-max="1"] .content-right:not(.collapsed) {
  top: calc(var(--oc-topbar-stack, calc(var(--topbar-height, 49px) + var(--sat-fix, env(safe-area-inset-top, 0px)))) + 8px + var(--oc-vv-top, 0px)) !important;
}
html[data-route="tablet"].oc-kb-overlay .content-right.mode-float.maximized,
html[data-route="tablet"].oc-kb-overlay #chat-drawer.mode-float.maximized,
html[data-route="tablet"].oc-kb-overlay[data-chat-max="1"] .content-right:not(.collapsed) {
  bottom: calc(var(--oc-kb, 0px) + 8px + var(--sab-fix, env(safe-area-inset-bottom, 0px))) !important;
}
html[data-route="tablet"]:has(.content-right.mode-float.maximized:not(.collapsed)) .main-content,
html[data-route="tablet"][data-chat-max="1"]:has(.content-right:not(.collapsed)) .main-content {
  z-index: 1320;
}
html[data-route="tablet"] .chat-resizer {
  display: none !important;
}
html[data-route="desktop"][data-chat-dock="1"] .content-right.mode-dock:not(.collapsed) {
  width: var(--chat-width-user, var(--chat-width)) !important;
  max-width: 100% !important;
}
html[data-route="desktop"] .content-right.mode-dock.collapsed {
  width: 0 !important;
  min-width: 0 !important;
}
html[data-route="desktop"] .chat-resizer {
  display: block !important;
}
html[data-route="phone"] .content-right.mode-dock {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 65dvh !important;
  max-height: 80vh !important;
  transform: none !important;
  z-index: 950;
}
html[data-route="phone"] .content-right.mode-dock.collapsed {
  transform: translate3d(0, 110%, 0) !important;
}
html[data-route="phone"] .chat-resizer,
html[data-route="phone"] .chat-window-controls {
  display: none !important;
}

html[data-route="tablet"] .content-left {
  padding: 16px;
}

/* Tablet top bar is the desktop row. A real env() inset still clears
   the status bar. The iPhone notch fallback does not apply on iPad. */
html[data-route="tablet"] .top-bar {
  box-sizing: border-box !important;
  height: calc(var(--topbar-height, 49px) + var(--sat-fix, env(safe-area-inset-top, 0px))) !important;
  min-height: calc(var(--topbar-height, 49px) + var(--sat-fix, env(safe-area-inset-top, 0px))) !important;
  max-height: calc(var(--topbar-height, 49px) + var(--sat-fix, env(safe-area-inset-top, 0px))) !important;
  padding-top: var(--sat-fix, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* ---- coarse phone chrome, cancelled on desktop and tablet ---- */
html[data-route="desktop"] .top-bar-tools-toggle,
html[data-route="desktop"] .top-bar-tools-close,
html[data-route="tablet"] .top-bar-tools-toggle,
html[data-route="tablet"] .top-bar-tools-close,
html[data-route="desktop"] #chat-actions-toggle,
html[data-route="desktop"] .chat-actions-toggle,
html[data-route="tablet"] #chat-actions-toggle,
html[data-route="tablet"] .chat-actions-toggle {
  display: none !important;
}
html[data-route="desktop"] .top-bar-actions,
html[data-route="tablet"] .top-bar-actions {
  position: static !important;
  right: auto !important;
  top: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
/* The coarse-pointer tools tray parks #chat-panel-actions off-canvas
   and this file hides the ··· button that reveals it. On tablet and
   desktop the sessions / tier / model / layout / more row stays in
   the chat header. Phone keeps the tray. */
html[data-route="desktop"] #chat-panel-actions,
html[data-route="tablet"] #chat-panel-actions {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--sp-1, 4px) !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
html[data-route="desktop"] .chat-panel-header,
html[data-route="tablet"] .chat-panel-header {
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: auto !important;
  min-height: 44px !important;
  max-height: none !important;
  overflow: visible !important;
}
html[data-route="desktop"] .chat-layout-btn .chat-layout-txt,
html[data-route="tablet"] .chat-layout-btn .chat-layout-txt {
  display: none !important;
}
html[data-route="desktop"] #chat-panel-actions .chat-layout-wrap,
html[data-route="tablet"] #chat-panel-actions .chat-layout-wrap,
html[data-route="desktop"] #chat-panel-actions .chat-more-wrap,
html[data-route="tablet"] #chat-panel-actions .chat-more-wrap,
html[data-route="desktop"] #chat-panel-actions .chat-more-btn,
html[data-route="tablet"] #chat-panel-actions .chat-more-btn {
  display: inline-flex !important;
}
html[data-route="desktop"] #chat-panel-actions .chat-actions-close,
html[data-route="tablet"] #chat-panel-actions .chat-actions-close {
  display: none !important;
}
html[data-route="desktop"] #chat-panel-actions .chat-header-menu,
html[data-route="tablet"] #chat-panel-actions .chat-header-menu {
  display: flex !important;
  position: absolute !important;
}
html[data-route="desktop"] .content-right.is-empty-session .chat-empty-welcome,
html[data-route="tablet"] .content-right.is-empty-session .chat-empty-welcome {
  margin-top: auto !important;
  margin-bottom: auto !important;
  flex: initial !important;
}
html[data-route="desktop"] .content-right.is-empty-session .chat-input-row,
html[data-route="tablet"] .content-right.is-empty-session .chat-input-row {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
html[data-route="desktop"] .chat-input-row,
html[data-route="tablet"] .chat-input-row {
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html[data-route="tablet"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-route="tablet"] select,
html[data-route="tablet"] textarea,
html[data-route="phone"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-route="phone"] select,
html[data-route="phone"] textarea {
  font-size: 16px !important;
}
html[data-route="desktop"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-route="desktop"] select,
html[data-route="desktop"] textarea {
  font-size: unset !important;
}

html[data-route="tablet"] .user-menu.user-menu--sheet.user-menu-tablet {
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  top: 50% !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: 420px !important;
  max-height: min(80dvh, 640px) !important;
  border-radius: 16px !important;
  border-bottom: 1px solid var(--border-default) !important;
  transform: translate(-50%, -40%) !important;
}
html[data-route="tablet"] .user-menu.user-menu--sheet.user-menu-tablet.show {
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}
html[data-route="tablet"] .chat-modal-box {
  width: min(560px, calc(100vw - 48px));
  max-width: 560px;
  height: auto;
  max-height: min(80dvh, 720px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
}
html[data-route="phone"] .chat-modal-box,
html[data-route="phone"] .mem-box {
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  max-height: 100dvh;
  border-radius: 0 !important;
}