/* Buttons */
.btn {
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.btn.primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.btn.primary:hover:not(:disabled) {
  background: var(--text-primary);
}

.btn.danger {
  background: var(--error-color);
  color: var(--text-inverse);
}

.btn.danger:hover:not(:disabled) {
  background: var(--error-color);
}

.btn.ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

.btn.ghost:hover:not(:disabled) {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn.icon {
  padding: var(--space-sm);
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon assets via CSS backgrounds */
.icon {
  width: 20px;
  height: 20px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

.icon-send {
  background-image: url('../../assets/icons/send.svg');
}

/* Ensure visibility on primary (dark) buttons */
.btn.primary .icon-send {
  background-image: url('../../assets/icons/send-white.svg');
}

.icon-stop {
  background-image: url('../../assets/icons/stop.svg');
}

/* Stop mode styling for composer buttons */
.btn.stop-mode {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}