#composer[data-composer-layout] {
  position: relative;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px;
  border-radius: 23px;
}

#composer[data-composer-layout] textarea {
  flex: none;
  padding: 9px 10px 7px;
}
#composer [hidden], #open-api[hidden] { display: none; }

.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.composer-model-anchor { min-width: 0; }
[data-composer-layout="unified"] .composer-model-anchor { position: relative; }

#composer[data-composer-layout="unified"] {
  --send-idle-surface: #eeedeb;
  --send-idle-ink: #a49f97;
}

:root[data-theme="dark"] #composer[data-composer-layout="unified"] {
  --send-idle-surface: #383633;
  --send-idle-ink: #88847d;
}

#composer[data-composer-layout="unified"] .send {
  background: var(--send-idle-surface);
  color: var(--send-idle-ink);
}

#composer[data-composer-layout="unified"][data-send-ready="true"] .send {
  background: color-mix(in srgb, var(--control-surface) 64%, var(--surface));
  color: var(--focus);
}

#composer[data-composer-layout="unified"][data-send-ready="true"] .send:is(:hover, :focus-visible):not(:disabled) {
  background: var(--control-surface);
}

@media (prefers-reduced-motion: no-preference) {
  #composer[data-composer-layout="unified"] .send {
    transition: background-color 150ms ease, color 150ms ease;
  }
}

.composer-add {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  height: 44px;
  margin-inline-end: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--focus);
}

.composer-add:disabled { opacity: .45; cursor: default; }

.composer-add:not(:disabled):hover,
#composer-model-toggle:hover,
.composer-picker-row:hover,
.composer-picker-back:hover {
  background: var(--control-surface);
}

#composer-model-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
}

#composer-model-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#composer-model-toggle svg { flex: none; color: var(--focus); }
#composer-model-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

#composer-model-picker {
  position: absolute;
  z-index: 1;
  inset-inline-end: 6px;
  inset-block-end: calc(100% + 8px);
  width: min(266px, calc(100% - 12px));
  max-height: min(290px, var(--composer-picker-space, 290px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgb(24 18 10 / .16);
}

#composer[data-picker-side="below"] #composer-model-picker {
  inset-block-start: calc(100% + 8px);
  inset-block-end: auto;
}

#composer[data-composer-layout="unified"] #composer-model-picker {
  --picker-entry-offset: 8px;
  --model-row-height: 44px;
  --model-hover-surface: #f0f0f0;
  inset-inline-end: 0;
  inset-block-end: calc(100% + 4px);
  width: min(266px, calc(100vw - 100px));
  flex-direction: column;
  overflow: hidden;
  transform-origin: right bottom;
}

:root[data-theme="dark"] #composer[data-composer-layout="unified"] #composer-model-picker {
  --model-hover-surface: #383838;
}

#composer[data-composer-layout="unified"] #composer-model-picker:not([hidden]) { display: flex; }

#composer-model-picker .composer-api-title {
  flex: none;
  margin-bottom: 3px;
  padding: 4px 10px 6px;
  color: var(--focus);
  color: color-mix(in srgb, var(--focus) 55%, var(--surface));
  font-size: 10.4px;
  overflow-wrap: anywhere;
}

[data-composer-layout="unified"] #composer-model-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[data-composer-layout="unified"] #composer-model-list > :is(.composer-picker-back, h2) {
  display: none;
}

[data-composer-layout="unified"] .composer-model-options {
  max-block-size: calc(4 * var(--model-row-height));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  padding-inline: 2px;
}

[data-composer-layout="unified"] .composer-model-options .composer-picker-row {
  min-height: var(--model-row-height);
}

#composer-model-picker[data-apis="multiple"] .composer-model-options {
  max-block-size: calc(4 * var(--model-row-height) + 36px);
  scroll-padding-block-start: 36px;
}

#composer-model-picker[data-apis="multiple"] .composer-api-title {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: var(--surface);
}

#composer-model-picker[data-apis="multiple"] .composer-api-group + .composer-api-group {
  margin-block-start: 5.6px;
}

#composer[data-composer-layout="unified"][data-picker-side="below"] #composer-model-picker {
  --picker-entry-offset: -8px;
  inset-block-start: calc(100% + 4px);
  inset-block-end: auto;
  transform-origin: right top;
}

@media (prefers-reduced-motion: no-preference) {
  #composer[data-composer-layout="unified"] #composer-model-picker {
    --picker-duration: 230ms;
    --picker-timing: cubic-bezier(.333333, 0, .666667, .333333);
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
      opacity var(--picker-duration) var(--picker-timing),
      transform var(--picker-duration) var(--picker-timing),
      visibility 0s;
  }

  #composer[data-composer-layout="unified"] #composer-model-picker[hidden] {
    --picker-timing: cubic-bezier(.333333, .666667, .666667, 1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--picker-entry-offset)) scale(.94);
    transition-delay: 0s, 0s, var(--picker-duration);
    pointer-events: none;
  }
}

#composer-model-picker h2 {
  padding: 5px 10px;
  color: var(--muted);
  font-size: 12px;
}

.composer-picker-row, .composer-picker-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  text-align: start;
  overflow-wrap: anywhere;
}

.composer-picker-row { width: 100%; }
.composer-picker-back { color: var(--focus); font-size: 13px; }
.composer-picker-row[aria-pressed="true"], .composer-picker-row[aria-expanded="true"] {
  border-color: var(--line);
  background: var(--composer-surface);
}

.composer-picker-row[aria-pressed="true"]::after {
  content: "";
  flex: 0 0 9px;
  height: 5px;
  margin-inline-end: 2px;
  border-inline-start: 1.5px solid var(--focus);
  border-block-end: 1.5px solid var(--focus);
  transform: rotate(-45deg);
}

[data-composer-layout="unified"] .composer-picker-row[aria-pressed="true"] {
  border-color: var(--line);
  background: transparent;
}

[data-composer-layout="unified"] .composer-picker-row[aria-pressed="false"]:is(:hover, :focus-visible) {
  background: var(--model-hover-surface);
}

[data-composer-layout="unified"] .composer-picker-row[aria-pressed="true"]::after {
  flex-basis: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: var(--focus);
  transform: none;
}

#composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-block-size: 106px;
  overflow-y: auto;
  margin: 0 0 5px;
  padding: 3px;
  list-style: none;
}

#composer-attachments li {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
  padding: 0 2px 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
}

#composer-attachments span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#composer-attachments button {
  flex: none;
  min-width: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--focus);
  font-size: 17px;
}
#composer-attachments button:hover { background: var(--control-surface); }

#composer[data-composer-layout="split"] {
  padding: 0;
  border-radius: 18px;
  background: var(--surface);
}

#composer[data-composer-layout="split"] textarea { padding: 12px 14px 8px; }
[data-composer-layout="split"] #composer-attachments { margin-inline: 8px; }
[data-composer-layout="split"] .composer-toolbar {
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 17px 17px;
  background: var(--composer-surface);
}

[data-composer-layout="split"] .composer-add,
[data-composer-layout="split"] #composer-model-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
}

[data-composer-layout="split"] #composer-model-toggle { border-radius: 24px; padding-inline: 12px; }
[data-composer-layout="split"] .composer-add:hover,
[data-composer-layout="split"] #composer-model-toggle:hover { background: var(--control-surface); }

@media (min-width: 480px) {
  [data-composer-layout="split"] #composer-model-picker:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  [data-composer-layout="split"] #composer-model-picker:has(#composer-model-list:not([hidden])) {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.2fr);
    width: min(408px, calc(100% - 12px));
  }
  [data-composer-layout="split"] #composer-model-list {
    border-inline-start: 1px solid var(--line);
    margin-inline-start: 8px;
    padding-inline-start: 8px;
  }
  [data-composer-layout="split"] .composer-picker-back { display: none; }
}