.dev-workspace-shell {
  position: relative;
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100dvh - 3.5rem);
  overflow: hidden;
  background: rgb(var(--ink));
}

.dev-agent-surface,
.dev-gitlab-ide-surface {
  width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100dvh - 3.5rem);
  transition: opacity 220ms ease, transform 260ms ease, visibility 0s linear 260ms;
}

.dev-agent-surface.is-active,
.dev-gitlab-ide-surface.is-active {
  position: relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

.dev-agent-surface.is-hidden,
.dev-gitlab-ide-surface.is-hidden {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dev-agent-surface.is-hidden {
  transform: translateX(-1rem);
}

.dev-gitlab-ide-surface.is-hidden {
  transform: translateX(1rem);
}

.dev-gitlab-ide-surface.is-active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 3.5rem);
  height: calc(100dvh - 3.5rem);
  min-height: 34rem;
  background: rgb(var(--ink));
}

.dev-gitlab-ide-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  background: rgb(var(--surface-1));
}

.dev-gitlab-ide-empty {
  display: flex;
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100dvh - 3.5rem);
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: rgb(var(--fg-2));
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .dev-agent-surface,
  .dev-gitlab-ide-surface {
    transition: none !important;
  }
}

.dev-codex-shell,
.dev-codex-panels {
  min-width: 0;
  max-width: 100%;
}

.dev-codex-sidebar-actions,
.dev-codex-toolbar,
.dev-codex-toolbar-controls,
.dev-codex-mobile-toolbar-actions,
.dev-codex-composer-actions,
.dev-codex-composer-options,
.dev-codex-composer-submit {
  min-width: 0;
}

.dev-codex-sidebar-actions,
.dev-codex-mobile-toolbar-actions,
.dev-codex-composer-submit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dev-codex-toolbar {
  flex: 0 0 auto;
}

.dev-codex-toolbar-title {
  flex: 1 1 auto;
}

.dev-codex-toolbar-controls {
  flex: 0 1 auto;
}

.dev-codex-toolbar-controls > select {
  max-width: clamp(6.5rem, 16vw, 12rem);
}

.dev-codex-mobile-panel-backdrop,
.dev-codex-mobile-panel-close,
.dev-codex-mobile-toolbar-actions,
.dev-codex-mobile-panel-header {
  display: none;
}

.vault-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  color: rgb(var(--fg-1));
  text-decoration: none;
}

.vault-brand-mark-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
}

.vault-brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
}

.vault-brand-logo-wrap {
  align-items: center;
}

.vault-brand-logo {
  height: 1.25rem;
  width: auto;
  display: block;
}

.vault-brand-auth {
  height: 2rem;
  width: auto;
  display: block;
  margin-inline: auto;
}

.vault-brand-logo--dark-bg,
.vault-brand-mark--dark-bg {
  display: none;
}

.dark .vault-brand-logo--light-bg,
[data-theme="dark"] .vault-brand-logo--light-bg,
.dark .vault-brand-mark--light-bg,
[data-theme="dark"] .vault-brand-mark--light-bg {
  display: none;
}

.dark .vault-brand-logo--dark-bg,
[data-theme="dark"] .vault-brand-logo--dark-bg,
.dark .vault-brand-mark--dark-bg,
[data-theme="dark"] .vault-brand-mark--dark-bg {
  display: block;
}

.dev-codex-main {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  background: rgb(var(--ink));
}

.dev-codex-transcript {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
}

.dev-codex-composer {
  flex: 0 0 auto;
  border-top: 1px solid rgb(var(--border));
  background: rgb(var(--surface-1));
  padding: 1rem;
}

.dev-codex-composer-card {
  width: min(100%, 58rem);
  margin-inline: auto;
}

.dev-codex-right {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.dev-codex-prompt {
  width: 100%;
  min-height: 5rem;
  max-height: 10rem;
  resize: vertical;
}

.dev-codex-action {
  display: flex;
  min-height: 2rem;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  color: rgb(var(--fg-2));
  font-size: 0.875rem;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}

.dev-codex-action:hover {
  background-color: rgb(var(--surface-3));
  color: rgb(var(--fg-1));
}

.dev-codex-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.dev-codex-add-project {
  display: grid;
  gap: 0.5rem;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--ink));
  padding: 0.5rem;
}

.dev-codex-project-menu-root {
  position: relative;
}

.dev-codex-project-trigger {
  display: grid;
  min-height: 3rem;
  width: 100%;
  grid-template-columns: 1.5rem minmax(0, 1fr) 1rem;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--surface-1));
  padding: 0.375rem 0.5rem;
  color: rgb(var(--fg-1));
  text-align: left;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.dev-codex-project-trigger:hover {
  border-color: rgb(var(--border-strong));
  background: rgb(var(--surface-3) / 0.5);
}

.dev-codex-project-avatar {
  display: inline-flex;
  height: 1.5rem;
  width: 1.5rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--accent-500) / 0.24);
  border-radius: 0.375rem;
  background: rgb(var(--accent-500) / 0.08);
  color: rgb(var(--accent-500));
  font-size: 0.6875rem;
  font-weight: 700;
}

.dev-codex-project-name,
.dev-codex-project-row-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgb(var(--fg-1));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-codex-project-path,
.dev-codex-project-row-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgb(var(--fg-3));
  font-size: 0.6875rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-codex-project-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: transparent;
}

.dev-codex-project-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 45;
  width: min(22rem, 86vw);
  overflow: hidden;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background: rgb(var(--surface-1));
  color: rgb(var(--fg-1));
  box-shadow: var(--shadow-elevated, 0 18px 42px -20px rgb(15 23 42 / 0.42), 0 6px 14px -8px rgb(15 23 42 / 0.24));
}

.dev-codex-project-search {
  border-bottom: 1px solid rgb(var(--border));
  padding: 0.5rem;
}

.dev-codex-project-menu-scroll {
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.375rem;
}

.dev-codex-project-menu-label {
  padding: 0.375rem 0.5rem 0.25rem;
  color: rgb(var(--fg-3));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dev-codex-project-menu-row,
.dev-codex-project-load {
  display: grid;
  min-height: 2.5rem;
  width: 100%;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.5rem;
  color: rgb(var(--fg-1));
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}

.dev-codex-project-menu-row:hover,
.dev-codex-project-menu-row.is-active,
.dev-codex-project-load:hover {
  background: rgb(var(--surface-3));
}

.dev-codex-project-menu-row.is-active .dev-codex-project-avatar {
  border-color: rgb(var(--accent-500) / 0.38);
  background: rgb(var(--accent-500) / 0.14);
}

.dev-codex-project-empty {
  padding: 0.625rem 0.5rem 0.75rem;
  color: rgb(var(--fg-2));
  font-size: 0.8125rem;
}

.dev-codex-project-new {
  display: flex;
  min-height: 2.625rem;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid rgb(var(--border));
  padding: 0.625rem 0.75rem;
  color: rgb(var(--accent-500));
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  transition: background-color 0.15s;
}

.dev-codex-project-new:hover {
  background: rgb(var(--accent-500) / 0.08);
}

.dev-codex-project-drawer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.125rem;
}

.dev-codex-project-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--surface-3) / 0.42);
  padding: 0.25rem;
}

.dev-codex-project-mode-button {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-sm);
  color: rgb(var(--fg-2));
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.dev-codex-project-mode-button:hover {
  color: rgb(var(--fg-1));
}

.dev-codex-project-mode-button.is-active {
  background: rgb(var(--surface-1));
  color: rgb(var(--fg-1));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08);
}

.dev-codex-project-drawer-section {
  display: grid;
  gap: 0.75rem;
}

.dev-codex-project-protocol {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgb(var(--border));
  border-radius: 999px;
  background: rgb(var(--surface-1));
  padding: 0 0.625rem;
  color: rgb(var(--fg-2));
  font-size: 0.8125rem;
  font-weight: 600;
}

.dev-codex-project-protocol:hover {
  border-color: rgb(var(--border-strong));
  color: rgb(var(--fg-1));
}

.dev-codex-project-drawer-list {
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--surface-1));
  padding: 0.375rem;
}

.dev-codex-project-drawer-row {
  display: grid;
  min-height: 2.75rem;
  width: 100%;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.5rem;
  text-align: left;
  transition: background-color 0.15s;
}

.dev-codex-project-drawer-row:hover,
.dev-codex-project-drawer-row.is-active {
  background: rgb(var(--surface-3));
}

.dev-codex-project-last-active {
  color: rgb(var(--fg-3));
  font-size: 0.6875rem;
  white-space: nowrap;
}

.dev-codex-project-drawer-empty {
  border: 1px dashed rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--surface-3) / 0.35);
  padding: 0.875rem;
  color: rgb(var(--fg-2));
  font-size: 0.875rem;
}

.dev-codex-project-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid rgb(var(--border));
  padding-top: 0.875rem;
}

.dev-codex-composer-menu-root {
  --dev-codex-menu-gap: 0.5rem;
  --dev-codex-menu-width: 14rem;
  position: relative;
  display: inline-flex;
}

.dev-codex-composer-icon-button {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--surface-1));
  color: rgb(var(--fg-2));
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.dev-codex-composer-icon-button:hover {
  border-color: rgb(var(--border-strong));
  background: rgb(var(--surface-3));
  color: rgb(var(--fg-1));
}

.dev-codex-composer-mobile-panel-button,
.dev-codex-mobile-model-menu-root {
  display: none;
}

.dev-codex-model-button {
  display: inline-flex;
  min-height: 2rem;
  max-width: 11rem;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgb(var(--lx-border));
  border-radius: 999px;
  background: rgb(var(--lx-surface));
  padding: 0 0.625rem;
  color: rgb(var(--lx-fg-muted));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.dev-codex-model-button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-codex-model-button:hover {
  border-color: rgb(var(--lx-border-strong));
  background: rgb(var(--lx-bg-muted));
  color: rgb(var(--lx-fg));
}

.dev-codex-model-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  display: grid;
  width: min(20rem, calc(100vw - 1.25rem));
  gap: 0.625rem;
  border: 1px solid rgb(var(--lx-border));
  border-radius: var(--lx-radius-lg);
  background: rgb(var(--lx-surface));
  padding: 0.75rem;
  color: rgb(var(--lx-fg));
  box-shadow: var(--lx-shadow-elevated, 0 12px 34px -16px rgb(15 23 42 / 0.38), 0 4px 10px -6px rgb(15 23 42 / 0.22));
}

.dev-codex-model-menu label {
  display: grid;
  gap: 0.25rem;
  color: rgb(var(--lx-fg-subtle));
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.dev-codex-model-menu select {
  width: 100%;
  min-width: 0;
  text-transform: none;
}

.dev-codex-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 35;
  cursor: default;
  background: transparent;
}

.dev-codex-composer-menu {
  position: absolute;
  bottom: calc(100% + var(--dev-codex-menu-gap));
  left: 0;
  z-index: 40;
  width: var(--dev-codex-menu-width);
  overflow: hidden;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background: rgb(var(--surface-1));
  padding: 0.25rem;
  color: rgb(var(--fg-1));
  box-shadow: var(--shadow-elevated, 0 12px 34px -16px rgb(15 23 42 / 0.38), 0 4px 10px -6px rgb(15 23 42 / 0.22));
}

.dev-codex-composer-menu-row {
  display: grid;
  min-height: 2.25rem;
  width: 100%;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-sm);
  padding: 0.375rem 0.5rem;
  color: rgb(var(--fg-1));
  font-size: 0.8125rem;
  line-height: 1.2;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}

.dev-codex-composer-menu-row:hover {
  background: rgb(var(--surface-3));
}

.dev-codex-composer-menu-row.is-active {
  background: rgb(var(--surface-3));
}

.dev-codex-composer-menu-row + .dev-codex-composer-menu-row {
  margin-top: 0.125rem;
}

.dev-codex-plugin-flyout {
  position: absolute;
  bottom: calc(100% + var(--dev-codex-menu-gap));
  left: calc(var(--dev-codex-menu-width) + var(--dev-codex-menu-gap));
  z-index: 45;
  width: 13rem;
  max-height: min(19rem, calc(100dvh - 8rem));
  overflow: hidden;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-lg);
  background: rgb(var(--surface-1));
  padding: 0.375rem;
  color: rgb(var(--fg-1));
  box-shadow: var(--shadow-elevated, 0 12px 34px -16px rgb(15 23 42 / 0.38), 0 4px 10px -6px rgb(15 23 42 / 0.22));
}

.dev-codex-plugin-flyout-title {
  padding: 0.375rem 0.5rem 0.5rem;
  color: rgb(var(--fg-3));
  font-size: 0.75rem;
  font-weight: 500;
}

.dev-codex-plugin-list {
  max-height: 16.25rem;
  overflow-y: auto;
  padding-right: 0.125rem;
}

.dev-codex-plugin-row {
  display: grid;
  min-height: 2rem;
  width: 100%;
  grid-template-columns: 1.125rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.375rem;
  color: rgb(var(--fg-1));
  font-size: 0.8125rem;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}

.dev-codex-plugin-row:hover,
.dev-codex-plugin-row.is-selected {
  background: rgb(var(--surface-3));
}

.dev-codex-plugin-row.needs-auth {
  color: rgb(var(--fg-2));
}

.dev-codex-plugin-icon-img,
.dev-codex-plugin-icon-fallback {
  height: 1.125rem;
  width: 1.125rem;
  flex: 0 0 auto;
  border-radius: 0.25rem;
}

.dev-codex-plugin-icon-img {
  object-fit: cover;
}

.dev-codex-plugin-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
}

.dev-codex-plugin-name {
  min-width: 0;
}

.dev-codex-plugin-auth {
  color: rgb(var(--accent-500));
  font-size: 0.6875rem;
  font-weight: 600;
}

.dev-codex-plugin-flyout-empty {
  padding: 0.75rem 0.5rem;
  color: rgb(var(--fg-2));
  font-size: 0.8125rem;
}

.dev-codex-selected-plugin-chip {
  display: inline-flex;
  max-width: 16rem;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgb(var(--border));
  border-radius: 999px;
  background: rgb(var(--surface-1));
  padding: 0.25rem 0.375rem 0.25rem 0.5rem;
  color: rgb(var(--fg-1));
  font-size: 0.75rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}

.dev-codex-selected-plugin-chip button {
  display: inline-flex;
  height: 1rem;
  width: 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgb(var(--fg-3));
}

.dev-codex-selected-plugin-chip button:hover {
  background: rgb(var(--surface-3));
  color: rgb(var(--fg-1));
}

.dev-codex-mini-switch {
  position: relative;
  display: inline-flex;
  height: 1.125rem;
  width: 2rem;
  align-items: center;
  border-radius: 999px;
  background: rgb(var(--border-strong) / 0.28);
  transition: background-color 0.15s;
}

.dev-codex-mini-switch > span {
  display: block;
  height: 0.875rem;
  width: 0.875rem;
  transform: translateX(0.125rem);
  border-radius: 999px;
  background: rgb(var(--surface-1));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.18);
  transition: transform 0.15s;
}

.dev-codex-mini-switch.is-on {
  background: rgb(var(--accent-500));
}

.dev-codex-mini-switch.is-on > span {
  transform: translateX(1rem);
}

.dev-codex-permission-chip {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 0.625rem;
  color: rgb(var(--warn-fg));
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}

.dev-codex-permission-chip:hover {
  border-color: rgb(var(--warn) / 0.3);
  background: rgb(var(--warn) / 0.08);
}

.dev-codex-tool-heading {
  margin-bottom: 0.375rem;
  color: rgb(var(--fg-2));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dev-codex-tool-row {
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius);
  background: rgb(var(--ink));
  padding: 0.5rem;
}

@media (max-width: 767px) {
  .dev-workspace-shell,
  .dev-agent-surface.is-active {
    height: calc(100vh - 3.5rem);
    height: calc(100dvh - 3.5rem);
    min-height: 0;
  }

  .dev-agent-surface.is-active {
    display: block;
  }

  .dev-codex-shell {
    position: relative;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .dev-codex-panels {
    display: block !important;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .dev-codex-panels > main {
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .dev-codex-panels > aside {
    position: fixed;
    top: 3.5rem;
    bottom: 0;
    z-index: 45;
    width: min(24rem, 92vw);
    max-width: calc(100vw - 1.25rem);
    min-height: 0;
    overflow: hidden;
    background: rgb(var(--surface-1));
    box-shadow: 0 18px 46px rgb(15 23 42 / 0.28);
    pointer-events: none;
    transition: transform 220ms ease, visibility 0s linear 220ms;
    visibility: hidden;
  }

  .dev-codex-panels > aside:first-of-type {
    left: 0;
    border-right: 1px solid rgb(var(--border));
    transform: translateX(-104%);
  }

  .dev-codex-panels > aside:last-of-type {
    right: 0;
    border-left: 1px solid rgb(var(--border));
    transform: translateX(104%);
  }

  .dev-codex-shell.is-mobile-nav-open .dev-codex-panels > aside:first-of-type,
  .dev-codex-shell.is-mobile-tools-open .dev-codex-panels > aside:last-of-type {
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
    visibility: visible;
  }

  .dev-codex-panels > aside > * {
    height: 100%;
    min-height: 0;
  }

  .dev-codex-mobile-panel-backdrop {
    position: fixed;
    top: 3.5rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: block;
    background: rgb(15 23 42 / 0.36);
  }

  .dev-codex-mobile-panel-close,
  .dev-codex-mobile-tool-button {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--border));
    border-radius: var(--radius);
    background: rgb(var(--surface-1));
    color: rgb(var(--fg-2));
  }

  .dev-codex-mobile-panel-close:hover,
  .dev-codex-mobile-tool-button:hover {
    border-color: rgb(var(--border-strong));
    background: rgb(var(--surface-3));
    color: rgb(var(--fg-1));
  }

  .dev-codex-mobile-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .dev-codex-mobile-panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgb(var(--border));
    background: rgb(var(--surface-1));
    padding: 0.75rem;
  }

  .dev-codex-main {
    height: 100%;
  }

  .dev-codex-toolbar {
    display: none;
  }

  .dev-codex-toolbar-title {
    flex: 1 1 calc(100% - 5rem);
    order: 1;
  }

  .dev-codex-toolbar-controls {
    order: 3;
    width: 100%;
    flex: 1 0 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.125rem;
    -webkit-overflow-scrolling: touch;
  }

  .dev-codex-toolbar-controls > select {
    flex: 0 0 auto;
    min-width: 7.25rem;
    max-width: none;
    font-size: 16px;
  }

  .dev-codex-transcript {
    padding: 0.75rem;
    -webkit-overflow-scrolling: touch;
  }

  .dev-codex-composer {
    padding: 0.625rem 0.625rem calc(0.625rem + env(safe-area-inset-bottom));
  }

  .dev-codex-prompt {
    min-height: 4.25rem;
    max-height: 32dvh;
    font-size: 16px;
  }

  .dev-codex-composer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dev-codex-composer-options {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0.125rem;
  }

  .dev-codex-composer-options > label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .dev-codex-composer-mobile-panel-button {
    display: inline-flex;
    height: 2rem;
    width: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--lx-border));
    border-radius: var(--lx-radius);
    background: rgb(var(--lx-surface));
    color: rgb(var(--lx-fg-muted));
  }

  .dev-codex-mobile-model-menu-root {
    position: relative;
    display: inline-flex;
    min-width: 0;
    flex: 0 1 auto;
  }

  .dev-codex-model-menu {
    position: fixed;
    right: max(0.625rem, env(safe-area-inset-right));
    bottom: calc(7.5rem + env(safe-area-inset-bottom));
    left: max(0.625rem, env(safe-area-inset-left));
    width: auto;
    z-index: 55;
  }

  .dev-codex-composer-submit {
    width: 100%;
    justify-content: flex-end;
  }

  .dev-codex-project-menu {
    position: fixed;
    top: calc(3.5rem + 0.625rem);
    right: max(0.625rem, env(safe-area-inset-right));
    left: max(0.625rem, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100dvh - 4.75rem);
    display: flex;
    flex-direction: column;
  }

  .dev-codex-project-menu-scroll {
    max-height: none;
    min-height: 0;
  }

  .dev-codex-composer-menu {
    width: min(18rem, calc(100vw - 1.25rem));
  }

  .dev-codex-plugin-flyout {
    position: fixed;
    right: max(0.625rem, env(safe-area-inset-right));
    bottom: calc(6.5rem + env(safe-area-inset-bottom));
    left: max(0.625rem, env(safe-area-inset-left));
    width: auto;
    max-height: min(22rem, 52dvh);
    z-index: 55;
  }

  .dev-codex-plugin-list {
    max-height: min(18rem, 44dvh);
  }

  .dev-codex-right {
    height: 100%;
    padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  }

  .dev-gitlab-ide-surface.is-active {
    height: calc(100vh - 3.5rem);
    height: calc(100dvh - 3.5rem);
    min-height: 0;
  }

  .dev-gitlab-ide-empty {
    min-height: 100%;
    padding: 1rem;
  }
}

@media (max-width: 420px) {
  .dev-codex-toolbar-title {
    flex-basis: calc(100% - 4.75rem);
  }

  .dev-codex-transcript {
    padding-inline: 0.625rem;
  }

  .dev-codex-composer-card {
    border-radius: var(--radius-sm);
  }

  .dev-codex-selected-plugin-chip {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .vault-shell--dev-agents {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .vault-main--dev-agents,
  .dev-workspace-shell,
  .dev-agent-surface.is-active {
    height: calc(100vh - var(--vault-topbar-h, 3.5rem));
    height: calc(100dvh - var(--vault-topbar-h, 3.5rem));
    min-height: 0;
    overflow: hidden;
  }

  .dev-codex-panels {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(16rem, 22rem);
  }

  .dev-codex-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .dev-codex-panels {
    height: 100%;
    overflow: hidden;
  }

  .dev-codex-panels > aside,
  .dev-codex-panels > main {
    min-height: 0;
    overflow: hidden;
  }
}

/* Layout only: keep local scroll containers bounded without styling LxAgent internals. */
.dev-codex-transcript {
  overflow-x: hidden;
  padding-inline: clamp(0.75rem, 1.6vw, 1.25rem);
}

.dev-codex-composer-card {
  width: 100%;
  max-width: 96rem;
}
.dev-codex-revision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

.dev-codex-revision-grid > div {
  display: grid;
  min-width: 0;
  gap: 0.125rem;
  border: 1px solid rgb(var(--border));
  border-radius: var(--radius-sm);
  background: rgb(var(--surface-3) / 0.35);
  padding: 0.45rem 0.5rem;
}

.dev-codex-revision-grid span {
  color: rgb(var(--fg-3));
  font-size: 0.6875rem;
  font-weight: 650;
  text-transform: uppercase;
}

.dev-codex-revision-grid code {
  min-width: 0;
  overflow: hidden;
  color: rgb(var(--fg-1));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .dev-codex-revision-grid {
    grid-template-columns: 1fr;
  }
}