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

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

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

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

.dev-codex-composer > div {
  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(--lx-radius-sm);
  padding: 0.25rem 0.5rem;
  color: rgb(var(--lx-fg-muted));
  font-size: 0.875rem;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}

.dev-codex-action:hover {
  background-color: rgb(var(--lx-bg-muted));
  color: rgb(var(--lx-fg));
}

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

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

.dev-codex-composer-menu-root {
  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(--lx-border));
  border-radius: var(--lx-radius);
  background: rgb(var(--lx-surface));
  color: rgb(var(--lx-fg-muted));
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

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

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

.dev-codex-composer-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  width: 14rem;
  overflow: hidden;
  border: 1px solid rgb(var(--lx-border));
  border-radius: var(--lx-radius-lg);
  background: rgb(var(--lx-surface));
  padding: 0.25rem;
  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-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(--lx-radius-sm);
  padding: 0.375rem 0.5rem;
  color: rgb(var(--lx-fg));
  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(--lx-bg-muted));
}

.dev-codex-composer-menu-row.is-active {
  background: rgb(var(--lx-bg-muted));
}

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

.dev-codex-plugin-flyout {
  position: absolute;
  bottom: 0;
  left: calc(100% + 0.5rem);
  z-index: 45;
  width: 13rem;
  max-height: 19rem;
  overflow: hidden;
  border: 1px solid rgb(var(--lx-border));
  border-radius: var(--lx-radius-lg);
  background: rgb(var(--lx-surface));
  padding: 0.375rem;
  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-plugin-flyout-title {
  padding: 0.375rem 0.5rem 0.5rem;
  color: rgb(var(--lx-fg-subtle));
  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(--lx-radius-sm);
  padding: 0.25rem 0.375rem;
  color: rgb(var(--lx-fg));
  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(--lx-bg-muted));
}

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

.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(--lx-accent));
  font-size: 0.6875rem;
  font-weight: 600;
}

.dev-codex-plugin-flyout-empty {
  padding: 0.75rem 0.5rem;
  color: rgb(var(--lx-fg-muted));
  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(--lx-border));
  border-radius: 999px;
  background: rgb(var(--lx-surface));
  padding: 0.25rem 0.375rem 0.25rem 0.5rem;
  color: rgb(var(--lx-fg));
  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(--lx-fg-subtle));
}

.dev-codex-selected-plugin-chip button:hover {
  background: rgb(var(--lx-bg-muted));
  color: rgb(var(--lx-fg));
}

.dev-codex-mini-switch {
  position: relative;
  display: inline-flex;
  height: 1.125rem;
  width: 2rem;
  align-items: center;
  border-radius: 999px;
  background: rgb(var(--lx-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(--lx-surface));
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.18);
  transition: transform 0.15s;
}

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

.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(--lx-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(--lx-warn) / 0.3);
  background: rgb(var(--lx-warn) / 0.08);
}

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

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

@media (min-width: 1280px) {
  .dev-codex-shell {
    height: calc(100vh - 4rem);
    min-height: 34rem;
    overflow: hidden;
  }

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

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