@layer mindz.interactions{
/*
 * MindZ Design System — Interactions v1
 * Fonte oficial para modais, diálogos, menus flutuantes, tooltips,
 * toasts, carregamentos, skeletons e estados de feedback.
 */

:root {
    --interaction-backdrop: var(--modal-backdrop);
    --interaction-backdrop-blur: 10px;
    --interaction-panel-width: 720px;
    --interaction-panel-width-sm: 480px;
    --interaction-panel-width-lg: 1120px;
    --interaction-panel-width-xl: 1280px;
    --interaction-panel-width-search: 1240px;
    --interaction-panel-max-height: calc(100dvh - 48px);
    --interaction-panel-padding: var(--space-6);
    --interaction-floating-width: 320px;
    --interaction-toast-width: 400px;
    --interaction-tooltip-width: 280px;
}

body.mindz-scroll-locked,
body.app-dialog-open,
body.modal-open,
body.has-open-modal {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Portais globais
   Cada raiz possui sua própria camada no viewport. O z-index fica no portal,
   não apenas no filho, para que nenhum ancestral do conteúdo limite o modal. */
#mindzOverlayRoot,
#mindzFloatingRoot,
#mindzToastRoot,
#mindzMessageRoot {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: visible;
    pointer-events: none;
    isolation: isolate;
}

#mindzOverlayRoot {
    z-index: var(--z-backdrop);
}

#mindzFloatingRoot {
    /* Menus/comboboxes abertos a partir de modais precisam ficar acima
       do portal de overlays, não apenas acima do conteúdo comum. */
    z-index: calc(var(--z-modal) + 10);
}

#mindzToastRoot {
    z-index: var(--z-toast);
}

#mindzMessageRoot {
    z-index: var(--z-critical);
}

#mindzOverlayRoot:empty,
#mindzFloatingRoot:empty,
#mindzToastRoot:empty,
#mindzMessageRoot:empty {
    display: none;
}

#mindzOverlayRoot > *,
#mindzFloatingRoot > *,
#mindzToastRoot > *,
#mindzMessageRoot > * {
    pointer-events: auto;
}

/* Overlay e modal oficial */
.mindz-overlay,
[data-mindz-overlay="true"] {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    overflow: auto;
    background: var(--interaction-backdrop);
    backdrop-filter: blur(var(--interaction-backdrop-blur)) saturate(1.05);
    animation: mindzOverlayEnter var(--duration-normal) var(--ease-standard) both;
}

.mindz-overlay[hidden],
.mindz-overlay.is-hidden,
.mindz-overlay[aria-hidden="true"],
[data-mindz-overlay="true"][hidden],
[data-mindz-overlay="true"].is-hidden,
[data-mindz-overlay="true"][aria-hidden="true"] {
    display: none;
}

.mindz-modal,
[data-mindz-modal="true"] {
    position: relative;
    z-index: var(--z-modal);
    width: min(var(--interaction-panel-width), calc(100vw - 48px));
    max-height: var(--interaction-panel-max-height);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-elevated);
    color: var(--text);
    box-shadow: var(--shadow-modal);
    animation: mindzModalEnter var(--duration-slow) var(--ease-emphasized) both;
}

.mindz-modal--sm,
[data-mindz-modal-size="sm"] {
    --interaction-panel-width: var(--interaction-panel-width-sm);
}

.mindz-modal--lg,
[data-mindz-modal-size="lg"],
.mindz-modal--wide,
[data-mindz-modal-size="wide"] {
    --interaction-panel-width: var(--interaction-panel-width-lg);
}

.mindz-modal--xl,
[data-mindz-modal-size="xl"] {
    --interaction-panel-width: var(--interaction-panel-width-xl);
}

.mindz-modal--search,
[data-mindz-modal-size="search"] {
    --interaction-panel-width: var(--interaction-panel-width-search);
}

.mindz-modal--fullscreen,
[data-mindz-modal-size="fullscreen"] {
    width: calc(100vw - 32px);
    height: calc(100dvh - 32px);
    max-height: none;
}

.mindz-modal__header,
[data-mindz-modal-header="true"] {
    min-width: 0;
    min-height: 72px;
    padding: var(--space-5) var(--interaction-panel-padding);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-elevated);
}

.mindz-modal__heading {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}

.mindz-modal__eyebrow {
    margin: 0;
    color: var(--primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.mindz-modal__title {
    margin: 0;
    color: var(--title-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

.mindz-modal__description {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
}

.mindz-modal__body,
[data-mindz-modal-body="true"] {
    min-width: 0;
    min-height: 0;
    padding: var(--interaction-panel-padding);
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 30%, var(--border)) transparent;
}

.mindz-modal__body::-webkit-scrollbar,
[data-mindz-modal-body="true"]::-webkit-scrollbar {
    width: 10px;
}

.mindz-modal__body::-webkit-scrollbar-thumb,
[data-mindz-modal-body="true"]::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--primary) 30%, var(--border));
    background-clip: padding-box;
}

.mindz-modal__footer,
[data-mindz-modal-footer="true"] {
    min-height: 68px;
    padding: var(--space-4) var(--interaction-panel-padding);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-top: 1px solid var(--border-soft);
    background: var(--surface-alt);
}

.mindz-modal__close,
.mindz-global-close-button,
button[data-mindz-close-svg="true"] {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    padding: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: var(--transition-interactive);
}

.mindz-modal__close:hover,
.mindz-global-close-button:hover,
button[data-mindz-close-svg="true"]:hover {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
    background: color-mix(in srgb, var(--danger-soft) 72%, var(--surface));
    color: var(--danger);
    transform: translateY(-1px);
}

.mindz-modal__close svg,
.mindz-global-close-button svg,
button[data-mindz-close-svg="true"] svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Todo overlay legado promovido ao portal deve ocupar o viewport completo. */
#mindzOverlayRoot > [data-mindz-overlay="true"] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    overflow: auto;
    isolation: isolate;
}

/* Compatibilidade estrutural com modais existentes */
:is(
    .app-modal-backdrop,
    .modal-backdrop,
    .feedback-modal-backdrop,
    .solicitacoes-modal-backdrop,
    .mindz-modal-backdrop,
    .avaliacoes-modal,
    [data-mindz-popup-backdrop="true"]
) {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
}

:is(
    .app-modal,
    .modal-content,
    .feedback-modal,
    .solicitacoes-modal-content,
    .avaliacoes-modal__dialog,
    [data-mindz-popup="true"]
) {
    position: relative;
    z-index: var(--z-modal);
}

/* Diálogo de confirmação */
.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-backdrop);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background: var(--interaction-backdrop);
    backdrop-filter: blur(var(--interaction-backdrop-blur));
}

.app-dialog-modal {
    position: relative;
    z-index: var(--z-modal);
    width: min(var(--interaction-panel-width-sm), calc(100vw - 48px));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-elevated);
    color: var(--text);
    box-shadow: var(--shadow-modal);
    animation: mindzModalEnter var(--duration-slow) var(--ease-emphasized) both;
}

.app-dialog-header {
    padding: var(--space-6) var(--space-6) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.app-dialog-icon {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
    color: var(--primary);
}

.app-dialog-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-dialog-modal.danger .app-dialog-icon {
    background: var(--danger-soft);
    color: var(--danger);
}

.app-dialog-modal.warning .app-dialog-icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.app-dialog-modal.success .app-dialog-icon {
    background: var(--success-soft);
    color: var(--success);
}

.app-dialog-modal.info .app-dialog-icon {
    background: var(--info-soft);
    color: var(--info);
}

.app-dialog-title-area {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}

.app-dialog-kicker {
    margin: 0;
    color: var(--primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.app-dialog-title {
    margin: 0;
    color: var(--title-color);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.app-dialog-body {
    padding: 0 var(--space-6) var(--space-6);
}

.app-dialog-body p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

.app-dialog-actions {
    padding: var(--space-4) var(--space-6);
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-top: 1px solid var(--border-soft);
    background: var(--surface-alt);
}

.app-dialog-button {
    min-width: 112px;
    min-height: var(--button-height);
    padding-inline: var(--space-4);
    border: 1px solid var(--button-secondary-border);
    border-radius: var(--control-radius);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font: inherit;
    font-weight: var(--button-font-weight);
    cursor: pointer;
    transition: var(--transition-interactive);
}

.app-dialog-button:hover {
    background: var(--button-secondary-bg-hover);
}

.app-dialog-button.primary,
.app-dialog-button.success,
.app-dialog-button.info,
.app-dialog-button.warning {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-contrast);
}

.app-dialog-button.danger {
    border-color: var(--danger);
    background: var(--danger);
    color: var(--color-white);
}

/* Flyout, dropdown e menu */
.mindz-floating,
.mindz-dropdown,
.mindz-flyout,
[data-mindz-floating="true"] {
    position: fixed;
    z-index: var(--z-dropdown);
    width: min(var(--interaction-floating-width), calc(100vw - 24px));
    max-height: min(520px, calc(100dvh - 24px));
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-elevated);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    animation: mindzFloatingEnter var(--duration-fast) var(--ease-emphasized) both;
}

.mindz-flyout {
    z-index: var(--z-flyout);
}

.mindz-floating[hidden],
.mindz-dropdown[hidden],
.mindz-flyout[hidden] {
    display: none;
}

.mindz-menu {
    margin: 0;
    padding: var(--space-2);
    display: grid;
    gap: 2px;
    list-style: none;
}

.mindz-menu__item,
.mindz-menu [role="menuitem"] {
    width: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-interactive);
}

.mindz-menu__item:hover,
.mindz-menu [role="menuitem"]:hover,
.mindz-menu__item:focus-visible,
.mindz-menu [role="menuitem"]:focus-visible {
    background: var(--surface-soft);
    color: var(--title-color);
}

.mindz-menu__item[data-tone="danger"] {
    color: var(--danger);
}

.mindz-menu__separator {
    height: 1px;
    margin: var(--space-2) 0;
    background: var(--border-soft);
}

/* Tooltip global */
.mindz-tooltip {
    position: fixed;
    z-index: var(--z-tooltip);
    max-width: min(var(--interaction-tooltip-width), calc(100vw - 24px));
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    text-align: left;
    pointer-events: none;
    animation: mindzFloatingEnter var(--duration-fast) var(--ease-standard) both;
}

/* Toast global */
.mindz-toast-stack,
.ph-toast-stack {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);
    width: min(var(--interaction-toast-width), calc(100vw - 32px));
    display: grid;
    gap: var(--space-3);
    pointer-events: none;
}

.mindz-toast,
.ph-toast {
    position: relative;
    min-height: 72px;
    padding: var(--space-3) var(--space-3) var(--space-4);
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 32px;
    align-items: flex-start;
    gap: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-elevated) 96%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
    pointer-events: auto;
    animation: mindzToastEnter var(--duration-slow) var(--ease-emphasized) both;
}

.mindz-toast.is-leaving,
.ph-toast.is-hiding {
    animation: mindzToastExit var(--duration-normal) var(--ease-standard) both;
}

.mindz-toast__icon,
.ph-toast__icon {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
    color: var(--primary);
}

.mindz-toast__icon svg,
.ph-toast__icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mindz-toast__content,
.ph-toast__content {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}

.mindz-toast__title,
.ph-toast__content strong {
    margin: 0;
    color: var(--title-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.mindz-toast__message,
.ph-toast__content p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    overflow-wrap: anywhere;
}

.mindz-toast__close,
.ph-toast__close {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-interactive);
}

.mindz-toast__close:hover,
.ph-toast__close:hover {
    background: var(--surface-soft);
    color: var(--title-color);
}

.mindz-toast__progress,
.ph-toast__progress {
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    transform-origin: left center;
    background: currentColor;
    opacity: 0.28;
    animation: mindzToastProgress linear forwards;
}

.mindz-toast[data-tone="success"],
.ph-toast--success {
    border-color: var(--success-border);
}

.mindz-toast[data-tone="success"] .mindz-toast__icon,
.ph-toast--success .ph-toast__icon {
    background: var(--success-soft);
    color: var(--success);
}

.mindz-toast[data-tone="danger"],
.ph-toast--error {
    border-color: var(--danger-border);
}

.mindz-toast[data-tone="danger"] .mindz-toast__icon,
.ph-toast--error .ph-toast__icon {
    background: var(--danger-soft);
    color: var(--danger);
}

.mindz-toast[data-tone="warning"],
.ph-toast--warning {
    border-color: var(--warning-border);
}

.mindz-toast[data-tone="warning"] .mindz-toast__icon,
.ph-toast--warning .ph-toast__icon {
    background: var(--warning-soft);
    color: var(--warning);
}

.mindz-toast[data-tone="info"],
.ph-toast--info {
    border-color: color-mix(in srgb, var(--info) 32%, var(--border));
}

.mindz-toast[data-tone="info"] .mindz-toast__icon,
.ph-toast--info .ph-toast__icon {
    background: var(--info-soft);
    color: var(--info);
}

/* Carregamento, skeleton e feedback de estado */
.mindz-loading {
    min-height: 120px;
    padding: var(--space-6);
    display: grid;
    place-items: center;
    gap: var(--space-3);
    color: var(--text-muted);
    text-align: center;
}

.mindz-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-top-color: var(--primary);
    border-radius: var(--radius-round);
    animation: mindzSpin 760ms linear infinite;
}

.mindz-skeleton {
    position: relative;
    overflow: hidden;
    min-height: 14px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-soft) 82%, var(--border));
}

.mindz-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-highlight) 78%, transparent), transparent);
    transform: translateX(-100%);
    animation: mindzSkeleton 1.3s var(--ease-standard) infinite;
}

.mindz-skeleton--text {
    width: 100%;
    height: 14px;
}

.mindz-skeleton--title {
    width: min(280px, 72%);
    height: 22px;
}

.mindz-skeleton--avatar {
    width: var(--avatar-size-lg);
    height: var(--avatar-size-lg);
    border-radius: var(--radius-round);
}

.mindz-skeleton--card {
    min-height: 148px;
    border-radius: var(--radius-xl);
}

.mindz-state,
.mindz-empty-state,
.mindz-error-state,
.mindz-success-state {
    width: 100%;
    min-height: 160px;
    padding: var(--space-8) var(--space-6);
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-alt);
    color: var(--text-muted);
    text-align: center;
}

.mindz-state__icon {
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--mindz-state-icon-bg, var(--primary-soft));
    color: var(--mindz-state-icon-color, var(--primary));
}

.mindz-state__title {
    margin: 0;
    color: var(--title-color);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.mindz-state__description {
    max-width: 560px;
    margin: 0;
    color: var(--text-muted);
    line-height: var(--line-height-normal);
}

.mindz-error-state {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
    background: color-mix(in srgb, var(--danger-soft) 46%, var(--surface));
}

.mindz-error-state .mindz-state__icon {
    background: var(--danger-soft);
    color: var(--danger);
}

.mindz-success-state {
    border-color: color-mix(in srgb, var(--success) 28%, var(--border));
    background: color-mix(in srgb, var(--success-soft) 46%, var(--surface));
}

.mindz-success-state .mindz-state__icon {
    background: var(--success-soft);
    color: var(--success);
}

.mindz-permission-denied {
    --mindz-state-icon-bg: var(--warning-soft);
    --mindz-state-icon-color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
    background: color-mix(in srgb, var(--warning-soft) 46%, var(--surface));
}

/* Animações */
@keyframes mindzOverlayEnter{
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mindzModalEnter{
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mindzFloatingEnter{
    from { opacity: 0; transform: translateY(-4px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mindzToastEnter{
    from { opacity: 0; transform: translate3d(16px, -6px, 0) scale(0.985); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes mindzToastExit{
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(16px, -6px, 0) scale(0.985); }
}

@keyframes mindzToastProgress{
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes mindzSpin{
    to { transform: rotate(360deg); }
}

@keyframes mindzSkeleton{
    to { transform: translateX(100%); }
}

@media (max-width: 768px){
    :root {
        --interaction-panel-padding: var(--space-4);
    }

    .mindz-overlay,
    [data-mindz-overlay="true"],
    .app-dialog-backdrop {
        padding: var(--space-3);
    }

    .mindz-modal,
    [data-mindz-modal="true"],
    .app-dialog-modal {
        width: min(100%, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        border-radius: var(--radius-lg);
    }

    .mindz-modal__header,
    [data-mindz-modal-header="true"] {
        min-height: 64px;
    }

    .mindz-modal__footer,
    [data-mindz-modal-footer="true"],
    .app-dialog-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .mindz-modal__footer > button,
    [data-mindz-modal-footer="true"] > button,
    .app-dialog-actions > button {
        width: 100%;
    }

    .mindz-toast-stack,
    .ph-toast-stack {
        top: var(--space-3);
        right: var(--space-3);
        left: var(--space-3);
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce){
    .mindz-overlay,
    [data-mindz-overlay="true"],
    .mindz-modal,
    [data-mindz-modal="true"],
    .mindz-floating,
    .mindz-dropdown,
    .mindz-flyout,
    .mindz-tooltip,
    .mindz-toast,
    .ph-toast,
    .mindz-toast__progress,
    .ph-toast__progress,
    .mindz-spinner,
    .mindz-skeleton::after {
        animation-duration: 1ms;
        animation-iteration-count: 1;
    }
}

/* Movimento funcional do fechamento, preservando redução de movimento */
@keyframes mindzCloseNudge{
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-5deg); }
    65% { transform: rotate(4deg); }
}

.mindz-modal__close:hover svg,
.mindz-global-close-button:hover svg,
button[data-mindz-close-svg="true"]:hover svg {
    animation: mindzCloseNudge 360ms var(--ease-emphasized) 1;
}

.mindz-skeleton-stack {
    display: grid;
    gap: var(--space-3);
}

.mindz-toast__close svg,
.ph-toast__close svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce){
    .mindz-modal__close:hover svg,
    .mindz-global-close-button:hover svg,
    button[data-mindz-close-svg="true"]:hover svg {
        animation: none;
    }
}


/* Formulários de diálogo oficiais */
.mindz-dialog-form {
    display: grid;
    gap: var(--space-4);
}

.mindz-dialog-field {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
    color: var(--text);
}

.mindz-dialog-field__label {
    color: var(--text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
}

.mindz-dialog-field__control {
    width: 100%;
    min-height: var(--control-height-md);
}

textarea.mindz-dialog-field__control {
    min-height: 112px;
    resize: vertical;
}

.mindz-dialog-field--check {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    cursor: pointer;
}

.mindz-dialog-field--check .mindz-dialog-field__control {
    width: var(--icon-size-md);
    min-height: var(--icon-size-md);
    margin: 0;
}

.mindz-dialog-field__help {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

.mindz-dialog-form__error {
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: var(--font-size-sm);
}

/* Compatibilidade residual de overlays — consolidada na camada global de interações. */
body :is(.app-modal-backdrop, .modal-backdrop, .feedback-modal-backdrop, .solicitacoes-modal-backdrop, .app-dialog-backdrop, .mindz-modal-backdrop, .overlay, .backdrop, .mindz-popup-backdrop, [data-mindz-popup-backdrop="true"]):is([hidden], .hidden, .is-hidden, [aria-hidden="true"]){
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
}

@layer mindz.interactions{
:root {
    --header-total-height: var(--shell-topbar-height, 72px);
    --modal-form-bg: var(--surface-elevated);
    --modal-form-border: var(--border-subtle, var(--border));
    --modal-form-text: var(--text-primary, var(--text));
    --sidebar-flyout-min-width: 220px;
}

:is(.mindz-modal, [data-mindz-modal="true"], .app-modal, .modal-content, .solicitacoes-modal-content, .feedback-modal) {
    background: var(--modal-form-bg);
    color: var(--modal-form-text);
    border-color: var(--modal-form-border);
}

:is(.mindz-modal, [data-mindz-modal="true"], .app-modal, .modal-content, .solicitacoes-modal-content, .feedback-modal)
:is(input, select, textarea, [contenteditable="true"]) {
    background: var(--input-bg, var(--surface));
    color: var(--text);
    border-color: var(--input-border, var(--border));
}

:is(.avatar, .employee-avatar, .profile-avatar, .mindz-avatar, [data-mindz-avatar], .person-photo) {
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}

:is(img.avatar, img.employee-avatar, img.profile-avatar, .mindz-avatar img, [data-mindz-avatar] img, .person-photo img) {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.mindz-avatar--interactive,
.mindz-avatar-profile-button {
    cursor: pointer;
}

.mindz-avatar--interactive:focus-visible,
.mindz-avatar-profile-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

.mindz-avatar-profile-button {
    min-width: 0;
    padding: 0;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}

.mindz-avatar-profile-button:disabled {
    cursor: default;
    opacity: 1;
}

/* A sidebar ocupa a viewport inteira; somente a navegação interna rola. */
:is(.app-sidebar, .sidebar, [data-mindz-sidebar="true"]) {
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
}

:is(.sidebar-nav, [data-mindz-sidebar-nav="true"]) {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

:is(.sidebar-flyout, .app-sidebar-flyout, .sidebar-submenu-portal, [data-sidebar-flyout="true"]) {
    width: max-content;
    min-width: var(--sidebar-flyout-min-width);
    max-width: min(360px, calc(100vw - 24px));
    height: auto;
    max-height: var(--mindz-sidebar-flyout-max-height, calc(100dvh - 32px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

:is(.sidebar-flyout-item, .app-sidebar-flyout__item, .sidebar-submenu-portal :is(.sidebar-submenu-link, .sidebar-submenu-trigger), [data-sidebar-flyout-item="true"]) {
    min-width: 0;
    white-space: nowrap;
}

:is(.sidebar-flyout-item-label, .app-sidebar-flyout__label, .sidebar-submenu-portal :is(.sidebar-link-label, .sidebar-submenu-label), [data-sidebar-flyout-label="true"]) {
    min-width: 0;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mindz-dropdown,
.mindz-actions-menu {
    width: max-content;
    min-width: 190px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(var(--mindz-floating-available-height, calc(100dvh - 24px)), calc(100dvh - 24px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Componente social global compartilhado por Comunicados e Comemorações. */
.mindz-social-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}

.mindz-social-action-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.mindz-social-action {
    min-height: var(--control-height-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-interactive);
}

.mindz-social-action:hover,
.mindz-social-action:focus-visible {
    background: var(--primary-soft);
    color: var(--primary);
}

.mindz-social-action.is-active,
.mindz-social-action[aria-pressed="true"] {
    color: var(--primary);
}

.mindz-social-action:disabled,
.mindz-social-action[aria-busy="true"] {
    cursor: wait;
    opacity: .65;
}

.mindz-social-action__icon,
.mindz-social-action__icon svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.mindz-social-action__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mindz-social-count {
    min-width: 28px;
    min-height: 28px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.mindz-social-count:hover,
.mindz-social-count:focus-visible {
    background: var(--surface-hover);
    color: var(--text);
}

.mention-link,
.comemoracoes-person-mention {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--link-color, var(--primary));
    font: inherit;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.mention-link:hover,
.comemoracoes-person-mention:hover {
    background: transparent;
    color: var(--link-color-hover, var(--primary-hover, var(--primary)));
    text-decoration: underline;
}

.mention-link:focus-visible,
.comemoracoes-person-mention:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
}
}


/* MindZ 266.0.18 — flyouts de poucas ações sem rolagem interna. */
.mindz-actions-menu.mindz-actions-menu--auto-height {
    width: max-content;
    min-width: 190px;
    max-width: min(280px, calc(100vw - 24px));
    height: auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    scrollbar-width: none;
}

.mindz-actions-menu.mindz-actions-menu--auto-height::-webkit-scrollbar {
    display: none;
}

.mindz-actions-menu.mindz-actions-menu--auto-height .mindz-menu {
    width: max-content;
    min-width: 100%;
    max-width: 100%;
}


/* MindZ 267.0.99 — contrato global de cabeçalho de pop-up e flyout. */
:where(.mindz-modal__header, [data-mindz-modal-header="true"], .mindz-popup-header) {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4, 16px);
    border-bottom: 1px solid var(--border-soft, rgba(15, 23, 42, .08));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary, #2563eb) 6%, transparent), transparent 42%),
        var(--surface-elevated, #fff);
}

:where(.mindz-modal__heading, .mindz-popup-header > div) {
    min-width: 0;
}

:where(.mindz-modal__title, .mindz-popup-header h1, .mindz-popup-header h2, .mindz-popup-header h3) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(.mindz-modal__close, .app-modal-close, .avaliacoes-modal-close, .tn-modal-close) {
    flex: 0 0 auto;
}

.mindz-popup-header-only-close :where(.mindz-modal__eyebrow, .mindz-modal__description) {
    display: none !important;
}

.mindz-actions-menu :where(.mindz-action-menu-icon + .mindz-action-menu-icon, svg + svg) {
    display: none !important;
}


/* =========================================================
   MindZ 26801 — cabeçalho global de pop-ups com efeito do cabeçalho fixo
   ========================================================= */
:where(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal .app-modal-header
) {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4, 16px);
    border-bottom: 1px solid color-mix(in srgb, var(--primary, #7c3aed) 14%, var(--border-soft, rgba(15, 23, 42, .08)));
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary, #7c3aed) 13%, transparent) 0, transparent 34%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary, #7c3aed) 8%, var(--surface-elevated, #fff)) 0%,
            color-mix(in srgb, var(--primary, #7c3aed) 4%, var(--surface-elevated, #fff)) 38%,
            var(--surface-elevated, #fff) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
    overflow: hidden;
}

:where(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal .app-modal-header
)::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--primary, #7c3aed), color-mix(in srgb, var(--primary, #7c3aed) 24%, transparent));
    pointer-events: none;
}

:where(
    .mindz-modal__heading,
    .mindz-popup-header > div,
    .app-modal-header > div,
    .modal-header > div,
    .popup-header > div,
    .feedback-modal-header > div,
    .feedback-colaborador-popup-header > div,
    .solicitacoes-user-detail-header > div
) {
    min-width: 0;
}

:where(
    .mindz-modal__close,
    .app-modal-close,
    .modal-close,
    .avaliacoes-modal-close,
    .tn-modal-close,
    [data-mindz-modal-close],
    [data-action="fechar-modal"]
) {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}

.mindz-popup-header-only-close :is(
    .mindz-modal__eyebrow,
    .mindz-modal__description,
    .app-modal-subtitle,
    .modal-subtitle,
    .popup-subtitle
) {
    display: none !important;
}

/* =========================================================
   MindZ 26803 — pop-ups com o mesmo efeito visual do cabeçalho fixo
   - Header modal herda o degradê premium do topbar global.
   - Mantém somente o X como ação visual do cabeçalho.
   - Remove o cabeçalho “clean” claro que quebrava a identidade do tema.
   ========================================================= */
:where(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header,
    .clima-modal .app-modal-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header
) {
    position: relative !important;
    isolation: isolate;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: var(--mindz-header-content-gap, 18px) !important;
    padding: 18px 24px !important;
    color: var(--mindz-header-text, #ffffff) !important;
    background: var(--mindz-feedback-premium-bg, 
        radial-gradient(circle at 20% 8%, rgba(255,255,255,.13), transparent 30%),
        radial-gradient(circle at 86% 84%, rgba(var(--theme-primary-rgb, 80, 88, 213), .44), transparent 34%),
        linear-gradient(145deg, color-mix(in srgb, var(--theme-primary-dark, #39406f) 78%, #0f172a 22%), #111827 58%, #06080f 100%)
    ) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mindz-feedback-premium-border, rgba(255,255,255,.12)) !important;
    box-shadow:
        0 18px 44px rgba(15, 23, 42, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:where(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header,
    .clima-modal .app-modal-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header
)::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    width: auto !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .16), transparent 34%),
        linear-gradient(90deg, rgba(255, 255, 255, .07), transparent 52%) !important;
    border-radius: inherit !important;
}

:where(
    .mindz-modal__heading,
    .mindz-popup-header > div,
    .app-modal-header > div,
    .app-dialog-header > div,
    .modal-header > div,
    .popup-header > div,
    .feedback-modal-header > div,
    .feedback-colaborador-popup-header > div,
    .solicitacoes-user-detail-header > div,
    .avaliacoes-modal__header > div,
    .dl-modal__header > div,
    .gv-dialog__head > div,
    .pa-modal-header > div,
    .ph-home-modal__header > div,
    .tn-modal-header > div,
    .topbar-action-modal__header > div
) {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    align-content: center !important;
}

:where(
    .mindz-modal__title,
    .app-modal-header h1,
    .app-modal-header h2,
    .app-modal-header h3,
    .app-dialog-header h1,
    .app-dialog-header h2,
    .app-dialog-header h3,
    .modal-header h1,
    .modal-header h2,
    .modal-header h3,
    .popup-header h1,
    .popup-header h2,
    .popup-header h3,
    .feedback-modal-header h1,
    .feedback-modal-header h2,
    .feedback-modal-header h3,
    .feedback-colaborador-popup-header h1,
    .feedback-colaborador-popup-header h2,
    .feedback-colaborador-popup-header h3,
    .clima-modal-header h1,
    .clima-modal-header h2,
    .clima-modal-header h3,
    .avaliacoes-modal__header h1,
    .avaliacoes-modal__header h2,
    .avaliacoes-modal__header h3,
    .dl-modal__header h1,
    .dl-modal__header h2,
    .dl-modal__header h3,
    .gv-dialog__head h1,
    .gv-dialog__head h2,
    .gv-dialog__head h3,
    .pa-modal-header h1,
    .pa-modal-header h2,
    .pa-modal-header h3,
    .ph-home-modal__header h1,
    .ph-home-modal__header h2,
    .ph-home-modal__header h3,
    .tn-modal-header h1,
    .tn-modal-header h2,
    .tn-modal-header h3,
    .topbar-action-modal__header h1,
    .topbar-action-modal__header h2,
    .topbar-action-modal__header h3
) {
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--mindz-header-text, #ffffff) !important;
    font-weight: 760 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

:where(
    .mindz-modal__eyebrow,
    .mindz-modal__description,
    .app-modal-header p,
    .app-modal-header span,
    .app-dialog-header p,
    .app-dialog-header span,
    .modal-header p,
    .modal-header span,
    .popup-header p,
    .popup-header span,
    .feedback-modal-header p,
    .feedback-modal-header span,
    .feedback-colaborador-popup-header p,
    .feedback-colaborador-popup-header span,
    .clima-modal-header p,
    .clima-modal-header span,
    .avaliacoes-modal__header p,
    .avaliacoes-modal__header span,
    .dl-modal__header p,
    .dl-modal__header span,
    .gv-dialog__head p,
    .gv-dialog__head span,
    .pa-modal-header p,
    .pa-modal-header span,
    .ph-home-modal__header p,
    .ph-home-modal__header span,
    .tn-modal-header p,
    .tn-modal-header span,
    .topbar-action-modal__header p,
    .topbar-action-modal__header span
) {
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--mindz-header-text-muted, rgba(255, 255, 255, .78)) !important;
    line-height: 1.28 !important;
}

:where(
    .mindz-modal__close,
    .app-modal-close,
    .app-dialog-close,
    .modal-close,
    .popup-close,
    .feedback-modal-close,
    .feedback-colaborador-popup-close,
    .avaliacoes-modal-close,
    .tn-modal-close,
    [data-mindz-modal-close],
    [data-action="fechar-modal"]
) {
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    color: var(--mindz-header-text, #ffffff) !important;
    background: rgba(255, 255, 255, .09) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: var(--mindz-header-control-radius, 16px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .11),
        0 7px 16px rgba(var(--theme-primary-rgb, 80, 88, 213), .15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

:where(
    .mindz-modal__close,
    .app-modal-close,
    .app-dialog-close,
    .modal-close,
    .popup-close,
    .feedback-modal-close,
    .feedback-colaborador-popup-close,
    .avaliacoes-modal-close,
    .tn-modal-close,
    [data-mindz-modal-close],
    [data-action="fechar-modal"]
):hover {
    color: var(--mindz-header-text, #ffffff) !important;
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .24) !important;
    transform: translateY(-1px) !important;
}

:where(
    .mindz-modal__close,
    .app-modal-close,
    .app-dialog-close,
    .modal-close,
    .popup-close,
    .feedback-modal-close,
    .feedback-colaborador-popup-close,
    .avaliacoes-modal-close,
    .tn-modal-close,
    [data-mindz-modal-close],
    [data-action="fechar-modal"]
) svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
}

:where(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header,
    .clima-modal .app-modal-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header
) :is(
    .mindz-modal__actions,
    .app-modal-header-actions,
    .modal-header-actions,
    .popup-header-actions,
    .avaliacoes-modal-header-actions,
    .tn-modal-header-actions
) :is(button, a):not(.mindz-modal__close):not(.app-modal-close):not(.app-dialog-close):not(.modal-close):not(.popup-close):not(.avaliacoes-modal-close):not(.tn-modal-close):not([data-mindz-modal-close]):not([data-action="fechar-modal"]) {
    display: none !important;
}

@media (max-width: 760px), (max-width: 959px) and (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
    :where(
        .mindz-modal__header,
        [data-mindz-modal-header="true"],
        .mindz-popup-header,
        .app-modal-header,
        .app-dialog-header,
        .modal-header,
        .popup-header,
        .feedback-modal-header,
        .feedback-colaborador-popup-header,
        .solicitacoes-modal .app-modal-header,
        .solicitacoes-mini-modal .app-modal-header,
        .solicitacoes-edit-modal-header,
        .solicitacoes-user-detail-header,
        .comunicado-comments-modal .app-modal-header,
        .clima-modal .app-modal-header,
        .clima-modal-header,
        .avaliacoes-modal__header,
        .dl-modal__header,
        .gv-dialog__head,
        .pa-modal-header,
        .ph-home-modal__header,
        .tn-modal-header,
        .topbar-action-modal__header
    ) {
        padding: 16px 18px !important;
        gap: 12px !important;
    }

    :where(
        .mindz-modal__close,
        .app-modal-close,
        .app-dialog-close,
        .modal-close,
        .popup-close,
        .feedback-modal-close,
        .feedback-colaborador-popup-close,
        .avaliacoes-modal-close,
        .tn-modal-close,
        [data-mindz-modal-close],
        [data-action="fechar-modal"]
    ) {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}



/* =========================================================
   MindZ v26839 — padrão global de cabeçalho fixo para pop-ups
   ========================================================= */

/*
   Aplica o mesmo padrão do cabeçalho fixo em pop-ups gerados via MindzModal,
   incluindo Enviar feedback e demais modais de tela.
*/
.mindz-overlay .mindz-modal.mindz-modal--fixed-header-standard,
.mindz-overlay .mindz-modal.feedback-colaborador-popup-panel,
.mindz-overlay .mindz-modal.feedback-interaction-modal,
.mindz-overlay .mindz-modal.solicitacoes-nova-popup-panel {
    max-height: min(92dvh, 920px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: var(--surface-card, #fff) !important;
}

.mindz-overlay .mindz-modal.feedback-colaborador-popup-panel.mindz-modal--fullscreen {
    width: min(96vw, 1560px) !important;
    height: min(92dvh, 920px) !important;
    max-width: 96vw !important;
    max-height: 92dvh !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) .mindz-modal__header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    min-height: 76px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    align-content: center !important;
    gap: 16px !important;
    border: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: 1px solid color-mix(in srgb, #fff 16%, transparent) !important;
    background:
        radial-gradient(circle at 7% -35%, color-mix(in srgb, var(--primary, #8f45a5) 34%, transparent), transparent 34%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--primary, #8f45a5) 46%, #111827 54%),
            #1d1530 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .16) !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) .mindz-modal__heading {
    min-width: 0 !important;
    display: grid !important;
    align-content: center !important;
    gap: 3px !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) :is(.mindz-modal__eyebrow, .mindz-modal__description) {
    margin: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 12px !important;
    line-height: 1.24 !important;
    font-weight: 500 !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) .mindz-modal__title {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(18px, 1.5vw, 24px) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) .mindz-modal__close {
    grid-column: 2 !important;
    place-self: center end !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) .mindz-modal__close svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    stroke: currentColor !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) .mindz-modal__body {
    min-height: 0 !important;
    overflow: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-card, #fff) 92%, var(--primary, #8f45a5) 8%),
            var(--surface-card, #fff) 30%) !important;
}

.mindz-overlay .mindz-modal:is(.mindz-modal--fixed-header-standard, .feedback-colaborador-popup-panel, .feedback-interaction-modal, .solicitacoes-nova-popup-panel) .mindz-modal__footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 28 !important;
    min-height: 68px !important;
    margin: 0 !important;
    padding: 14px 24px !important;
    border-top: 1px solid var(--border-subtle, #e7d9ef) !important;
    background: color-mix(in srgb, var(--surface-card, #fff) 94%, var(--primary, #8f45a5) 6%) !important;
}


/* =========================================================
   MindZ 26955 — cabeçalho fixo global
   A classe .mindz-fixed-header é o contrato único de cabeçalhos do sistema.
   A malha temática é apenas uma camada visual: não altera altura, largura,
   padding, grid ou posicionamento do conteúdo existente.
   ========================================================= */
.mindz-fixed-header,
[data-mindz-fixed-header="true"] {
    isolation: isolate;
}

.mindz-fixed-header::after,
[data-mindz-fixed-header="true"]::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: inherit;
    opacity: .92;
    background:
        radial-gradient(circle at 72.5% 25%, color-mix(in srgb, var(--primary, #6b74d8) 58%, #ffffff) 0 3px, transparent 3.8px),
        radial-gradient(circle at 83.5% 67%, color-mix(in srgb, var(--primary, #6b74d8) 48%, #ffffff) 0 3.5px, transparent 4.3px),
        radial-gradient(circle at 94% 36%, color-mix(in srgb, var(--primary, #6b74d8) 64%, #ffffff) 0 2.5px, transparent 3.3px),
        radial-gradient(circle at 88.5% 18%, color-mix(in srgb, var(--primary, #6b74d8) 40%, #ffffff) 0 2px, transparent 2.8px),
        radial-gradient(ellipse 190px 70px at 86% -18%, transparent 69%, color-mix(in srgb, var(--primary, #6b74d8) 38%, rgba(255,255,255,.20)) 70% 70.8%, transparent 71.7%),
        radial-gradient(ellipse 265px 100px at 88% -21%, transparent 72%, color-mix(in srgb, var(--primary, #6b74d8) 30%, rgba(255,255,255,.16)) 73% 73.7%, transparent 74.6%),
        radial-gradient(ellipse 345px 132px at 91% -25%, transparent 75%, color-mix(in srgb, var(--primary, #6b74d8) 24%, rgba(255,255,255,.12)) 76% 76.6%, transparent 77.5%);
}

.mindz-fixed-header > *,
[data-mindz-fixed-header="true"] > * {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .mindz-fixed-header::after,
    [data-mindz-fixed-header="true"]::after {
        transition: none !important;
    }
}


/* =========================================================
   MindZ 27008 — cabeçalhos de pop-up no tema Nosso Porto
   Replica o contrato global dos demais temas e evidencia as três cores.
   ========================================================= */
:root[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header,
    .clima-modal .app-modal-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
),
body[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header,
    .clima-modal .app-modal-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
) {
    color: #FFFFFF !important;
    background: var(--mindz-feedback-premium-bg) !important;
    border: 0 !important;
    border-bottom: 5px solid #98BE3F !important;
    box-shadow:
        0 18px 42px rgba(0, 78, 153, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

:root[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
)::after,
body[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
        radial-gradient(circle at 82% 24%, rgba(152, 190, 63, 0.94) 0 3px, transparent 4px),
        radial-gradient(circle at 90% 54%, rgba(75, 185, 188, 0.88) 0 3px, transparent 4px),
        radial-gradient(circle at 95% 22%, rgba(255, 255, 255, 0.60) 0 2px, transparent 3px),
        linear-gradient(90deg, rgba(75, 185, 188, 0.18), transparent 42%, rgba(152, 190, 63, 0.12)) !important;
}

:root[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
) > *,
body[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
) > * {
    position: relative !important;
    z-index: 1 !important;
}

:root[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
) :is(h1, h2, h3, h4, p, span, small, strong),
body[data-theme="nossoporto"] :is(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header,
    .mindz-drawer__header,
    .drawer-header,
    .mindz-flyout__header,
    .flyout-header
) :is(h1, h2, h3, h4, p, span, small, strong) {
    color: inherit !important;
}

:root[data-theme="nossoporto"] :is(
    .mindz-modal__close,
    .app-modal-close,
    .app-dialog-close,
    .modal-close,
    .popup-close,
    .feedback-modal-close,
    .feedback-colaborador-popup-close,
    .avaliacoes-modal-close,
    .tn-modal-close,
    [data-mindz-modal-close],
    [data-action="fechar-modal"]
),
body[data-theme="nossoporto"] :is(
    .mindz-modal__close,
    .app-modal-close,
    .app-dialog-close,
    .modal-close,
    .popup-close,
    .feedback-modal-close,
    .feedback-colaborador-popup-close,
    .avaliacoes-modal-close,
    .tn-modal-close,
    [data-mindz-modal-close],
    [data-action="fechar-modal"]
) {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(75, 185, 188, 0.55) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 18px rgba(0, 78, 153, 0.24) !important;
}


/* =========================================================
   MindZ 27101 — Pop-ups Premium SaaS multicolor
   Mesma identidade do cabeçalho fixo, com linha real inferior.
   ========================================================= */
:where(
    .mindz-modal__header,
    [data-mindz-modal-header="true"],
    .mindz-popup-header,
    .app-modal-header,
    .app-dialog-header,
    .modal-header,
    .popup-header,
    .feedback-modal-header,
    .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header,
    .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header,
    .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header,
    .clima-modal .app-modal-header,
    .clima-modal-header,
    .avaliacoes-modal__header,
    .dl-modal__header,
    .gv-dialog__head,
    .pa-modal-header,
    .ph-home-modal__header,
    .tn-modal-header,
    .topbar-action-modal__header
) {
    background-color: var(--theme-primary) !important;
    background-image:
        radial-gradient(circle at 13% 0%, rgba(255,255,255,.18), transparent 29%),
        radial-gradient(circle at 90% 100%, rgba(var(--theme-line-rgb, var(--theme-primary-rgb)), .20), transparent 28%),
        var(--theme-shell-gradient, linear-gradient(108deg, var(--theme-primary-light) 0%, var(--theme-primary) 52%, var(--theme-primary-dark) 100%)) !important;
    border: 0 !important;
    border-bottom: 4px solid var(--theme-line, var(--theme-primary-light)) !important;
    box-shadow: 0 16px 36px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

:root[data-theme="nossoporto"] :where(
    .mindz-modal__header, [data-mindz-modal-header="true"], .mindz-popup-header,
    .app-modal-header, .app-dialog-header, .modal-header, .popup-header,
    .feedback-modal-header, .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header, .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header, .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header, .clima-modal .app-modal-header,
    .clima-modal-header, .avaliacoes-modal__header, .dl-modal__header,
    .gv-dialog__head, .pa-modal-header, .ph-home-modal__header, .tn-modal-header,
    .topbar-action-modal__header
),
body[data-theme="nossoporto"] :where(
    .mindz-modal__header, [data-mindz-modal-header="true"], .mindz-popup-header,
    .app-modal-header, .app-dialog-header, .modal-header, .popup-header,
    .feedback-modal-header, .feedback-colaborador-popup-header,
    .solicitacoes-modal .app-modal-header, .solicitacoes-mini-modal .app-modal-header,
    .solicitacoes-edit-modal-header, .solicitacoes-user-detail-header,
    .comunicado-comments-modal .app-modal-header, .clima-modal .app-modal-header,
    .clima-modal-header, .avaliacoes-modal__header, .dl-modal__header,
    .gv-dialog__head, .pa-modal-header, .ph-home-modal__header, .tn-modal-header,
    .topbar-action-modal__header
) {
    background-color: #004E99 !important;
    background-image:
        radial-gradient(circle at 14% 0%, rgba(255,255,255,.20), transparent 29%),
        radial-gradient(circle at 92% 100%, rgba(152,190,63,.30), transparent 30%),
        linear-gradient(108deg, #4BB9BC 0%, #33AAB2 20%, #004E99 58%, #004E99 100%) !important;
    border-bottom: 4px solid #98BE3F !important;
}