/* Tasteful orange brand accents — sparingly on chrome and primary CTAs. */

/* —— Auth / sign-in —— */

.portal-auth__panel {
  border-top: 3px solid var(--color-orange);
}

.portal-auth__submit.ui-button--primary {
  background: var(--color-orange);
  border-color: var(--color-orange-deep);
  color: #fff8f2;
}

.portal-auth__submit.ui-button--primary:hover:not(:disabled) {
  background: var(--color-orange-deep);
  border-color: var(--color-orange-deep);
  color: #fff8f2;
  box-shadow: 0 0.35rem 0.85rem color-mix(in srgb, var(--color-orange) 28%, transparent);
}

.portal-auth__footer a:hover,
.portal-auth__footer a:focus-visible {
  color: var(--color-orange-deep);
}

/* —— Chat: send is the product CTA —— */

.portal-chat__send.ui-button--primary {
  background: var(--color-orange);
  border-color: var(--color-orange-deep);
  color: #fff8f2;
}

.portal-chat__send.ui-button--primary:hover:not(:disabled) {
  background: var(--color-orange-deep);
  border-color: var(--color-orange-deep);
  color: #fff8f2;
  box-shadow: 0 0.35rem 0.85rem color-mix(in srgb, var(--color-orange) 28%, transparent);
}

.portal-chat__composer:has(.portal-chat__input:focus) {
  border-top-color: color-mix(in srgb, var(--color-orange) 35%, var(--admin-bar-border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-orange) 18%, transparent);
}

.portal-chat__suggestion:hover:not(:disabled),
.portal-chat__suggestion:focus-visible {
  border-color: color-mix(in srgb, var(--color-orange) 40%, var(--admin-bar-border));
  background: color-mix(in srgb, var(--color-orange-soft) 70%, #fff);
}

.portal-chat__suggestion:hover:not(:disabled) i,
.portal-chat__suggestion:focus-visible i {
  color: var(--color-orange-deep);
  opacity: 1;
}

/* —— Filter / ghost chips when selected —— */

.ui-button--ghost.is-active,
.ui-button.ui-button--ghost[aria-pressed="true"],
.portal-docs__visibility .ui-button--ghost.is-active,
.portal-docs__visibility .ui-button--ghost[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--color-orange) 45%, var(--admin-bar-border));
  background: color-mix(in srgb, var(--color-orange-soft) 75%, #fff);
  color: var(--color-orange-deep);
}

/* —— Docs list hover —— */

.portal-docs__item:hover,
.portal-docs__item:focus-visible {
  border-color: color-mix(in srgb, var(--color-orange) 35%, var(--admin-bar-border));
}