.composer-tools {
  max-width: 920px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.composer-tools label { font-weight: 700; }

.composer-tools select {
  max-width: 100%;
  padding: 7px 30px 7px 10px;
  border: 1px solid #ccd4ce;
  border-radius: 9px;
  background: white;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.composer-tools select:focus {
  outline: 2px solid rgba(31, 107, 79, .22);
  border-color: var(--green);
}

.composer-tools select:disabled { opacity: .55; cursor: wait; }

.thinking-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.thinking-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--green);
  cursor: pointer;
}

.thinking-toggle input:disabled { cursor: wait; opacity: .55; }

.model-warning {
  max-width: 920px;
  margin: 0 auto 8px;
  padding: 9px 12px;
  border: 1px solid #dfc98e;
  border-radius: 9px;
  background: #fff8e5;
  color: #614d1e;
  font-size: 12px;
  line-height: 1.4;
}

.thinking {
  margin: 3px 0 18px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
  color: var(--muted);
  font-size: 13px;
}

.thinking summary {
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.thinking > div {
  max-height: 320px;
  margin-top: 9px;
  overflow: auto;
}

.thinking > div > :first-child { margin-top: 0; }
.thinking > div > :last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .composer-tools { justify-content: stretch; }
  .composer-tools label { flex: 0 0 auto; }
  .composer-tools select { min-width: 0; flex: 1; }
}