/*
 * Contrato visual compartilhado de foco do Zizi.
 * O outline e o box-shadow nao participam do box model, evitando layout shift.
 */
:root {
  --zizi-focus-accent: #1d4ed8;
  --zizi-focus-ring: rgba(37, 99, 235, 0.28);
  --zizi-focus-surface: #eff6ff;
  --zizi-focus-error: #b91c1c;
  --zizi-focus-error-ring: rgba(220, 38, 38, 0.25);
  --zizi-focus-readonly: #f1f5f9;
}

html[data-zizi-user-theme="escuro"],
html[data-zizi-theme-mode="escuro"],
html[data-theme="dark"],
html.dark {
  --zizi-focus-accent: #93c5fd;
  --zizi-focus-ring: rgba(147, 197, 253, 0.38);
  --zizi-focus-surface: #172554;
  --zizi-focus-error: #fca5a5;
  --zizi-focus-error-ring: rgba(252, 165, 165, 0.32);
  --zizi-focus-readonly: #1e293b;
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    select,
    textarea,
    [contenteditable="true"]
  ) {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    outline-color 0.15s ease,
    background-color 0.15s ease;
}

:where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    select,
    textarea,
    [contenteditable="true"]
  ):focus-visible {
  outline: 2px solid var(--zizi-focus-accent) !important;
  outline-offset: 2px;
  border-color: var(--zizi-focus-accent) !important;
  box-shadow: 0 0 0 4px var(--zizi-focus-ring) !important;
  background-color: var(--zizi-focus-surface) !important;
}

:where(
    button,
    a[href],
    [role="button"],
    [role="tab"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
  outline: 2px solid var(--zizi-focus-accent) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--zizi-focus-ring);
}

:where(
    [role="combobox"],
    [data-focus-shell],
    .composer .input,
    .master-chat__composer-form,
    .admin-chat-composer
  ):focus-within {
  outline: 2px solid var(--zizi-focus-accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--zizi-focus-ring) !important;
}

:where(.composer, .master-chat__composer-form)
  :where(input, textarea):focus-visible {
  background-color: transparent !important;
}

:root body input[aria-invalid="true"]:focus-visible,
:root body select[aria-invalid="true"]:focus-visible,
:root body textarea[aria-invalid="true"]:focus-visible,
:root body input.is-invalid:focus-visible,
:root body select.is-invalid:focus-visible,
:root body textarea.is-invalid:focus-visible,
:root body .has-error input:focus-visible,
:root body .has-error select:focus-visible,
:root body .has-error textarea:focus-visible {
  outline-color: var(--zizi-focus-error) !important;
  border-color: var(--zizi-focus-error) !important;
  box-shadow: 0 0 0 4px var(--zizi-focus-error-ring) !important;
}

:where(input, select, textarea, button):disabled {
  cursor: not-allowed;
}

:where(input[readonly], textarea[readonly], [contenteditable="false"]) {
  cursor: default;
  background-color: var(--zizi-focus-readonly) !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(input, select, textarea, button, [contenteditable]) {
    transition: none !important;
  }
}