.codex-panel__composer {
  position: relative;
  padding: var(--codex-panel-section-gap) var(--codex-panel-edge-padding-x)
    calc(var(--codex-panel-section-gap) + var(--codex-panel-bottom-safe-area));
}

.codex-panel__composer-frame {
  grid-template-columns: minmax(0, 1fr);
}

.codex-panel__composer-input {
  min-height: var(--codex-panel-composer-min-height);
  max-height: min(var(--codex-panel-size-composer-input-max-height), 40vh);
}

.codex-panel__composer-action {
  flex: 0 0 auto;
}

.codex-panel__composer-action.is-interrupt {
  color: var(--icon-color-focused);
}

.codex-panel__composer-action.is-steer {
  color: var(--icon-color-active);
}

.codex-panel__composer-meta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  gap: var(--codex-panel-section-gap);
  align-items: center;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
  user-select: none;
  padding: 0 var(--size-4-2) var(--size-4-1);
}

.codex-panel__composer-meta-status {
  position: relative;
  box-sizing: border-box;
  display: flex;
  min-width: 0;
  gap: var(--size-4-2);
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.codex-panel__composer-meta-summary {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}

.codex-panel__composer-meta-status-visual {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  gap: var(--size-4-2);
  align-items: center;
}

.codex-panel__composer-meta-context {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--codex-panel-control-gap);
  align-items: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.codex-panel__composer-meta-context-dots {
  display: inline-flex;
  flex: 0 0 auto;
}

.codex-panel__composer-meta-context-dot {
  color: currentcolor;
}

.codex-panel__composer-meta-context-dot.is-placeholder {
  color: var(--text-faint);
}

.codex-panel__composer-meta-context-percent {
  flex: 0 0 auto;
  white-space: pre;
}

.codex-panel__composer-meta-separator {
  flex: 0 0 auto;
  color: var(--text-faint);
}

.codex-panel__composer-meta-field {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--size-4-2);
  align-items: center;
}

.codex-panel__composer-meta-field--model {
  flex: 0 0 auto;
}

.codex-panel__composer-meta-modes {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--codex-panel-control-gap);
  align-items: center;
  color: var(--text-faint);
}

.codex-panel__composer-meta-icon {
  display: inline-flex;
  width: var(--codex-panel-size-icon-xs);
  height: var(--codex-panel-size-icon-xs);
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.codex-panel__composer-meta-icon.is-active {
  color: var(--icon-color-active);
}

.codex-panel__composer-meta-icon svg {
  width: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2);
  height: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2);
  stroke-width: 2;
}

.codex-panel__composer-meta-value.codex-panel__composer-meta-value {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  text-align: left;
  white-space: nowrap;
}

.codex-panel__composer-meta-popover {
  position: absolute;
  bottom: calc(100% + var(--codex-panel-panel-gap));
  left: var(--codex-panel-composer-meta-popover-left);
  z-index: var(--layer-popover, 30);
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: calc(100% - var(--codex-panel-composer-meta-popover-left));
  max-height: min(var(--codex-panel-size-toolbar-panel-max-height), 36vh);
  overflow-y: auto;
  border: var(--codex-panel-border);
  border-radius: var(--codex-panel-card-radius);
  background: var(--codex-panel-surface);
  box-shadow: var(--shadow-s);
  padding: var(--codex-panel-panel-gap);
}

.codex-panel__composer-meta-option {
  overflow: hidden;
  min-width: 0;
  padding: var(--size-4-1) var(--size-4-2);
  color: var(--text-muted);
  font: inherit;
  line-height: var(--line-height-tight);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-panel__composer-meta-option:where(:hover, :focus, :focus-visible, :active):not(.is-disabled) {
  color: var(--nav-item-color-hover, var(--text-normal));
  background: var(--background-modifier-hover);
  outline: none;
}

.codex-panel__composer-meta-option.is-disabled {
  opacity: 0.45;
}

.codex-panel__composer-meta--fatal {
  color: var(--text-muted);
}

.codex-panel__composer-meta-fatal {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-panel__composer-meta-status.is-effort-hidden .codex-panel__composer-meta-field--effort {
  display: none;
}

.codex-panel__composer-meta-status.is-model-hidden .codex-panel__composer-meta-field--model {
  display: none;
}

.codex-panel__composer-suggestions {
  position: absolute;
  right: var(--codex-panel-edge-padding-x);
  bottom: calc(100% - var(--codex-panel-control-gap));
  left: var(--codex-panel-edge-padding-x);
  z-index: var(--layer-popover, 30);
  display: flex;
  flex-direction: column;
  width: auto;
  max-height: min(var(--codex-panel-size-composer-suggestions-max-height), 36vh);
  overflow-y: auto;
  margin: 0;
  border: var(--codex-panel-border);
  border-radius: var(--codex-panel-card-radius);
  background: var(--codex-panel-surface);
  box-shadow: var(--shadow-s);
}

.codex-panel__composer-suggestions[hidden] {
  display: none;
}

.codex-panel__composer-suggestion.suggestion-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--codex-panel-panel-gap);
  width: 100%;
  line-height: var(--codex-panel-compact-line-height);
  text-align: left;
}

.codex-panel__composer-suggestion.suggestion-item.is-selected {
  background: var(--background-modifier-hover);
}

.codex-panel__suggestion-label,
.codex-panel__suggestion-detail {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-panel__suggestion-label {
  color: var(--codex-panel-item-title-color);
  font-size: var(--codex-panel-item-title-size);
  font-weight: var(--codex-panel-item-title-weight);
}

.codex-panel__suggestion-detail {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
}

.codex-panel__composer-suggestion.is-selected .codex-panel__suggestion-label {
  color: var(--text-normal);
}
