
/* ============================================================
   SCROLLBAR & MISC
   ============================================================ */
::-webkit-scrollbar-thumb { background: var(--ui-border-active) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--ui-accent) !important; }
.tool-separator { background: var(--ui-border-active) !important; }
.layers-resize-handle:hover,
.layers-resize-handle.active {
    background: var(--ui-accent-soft) !important;
}

.anp-cp-popover {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border-active) !important;
}

/* ============================================================
   OVERLAY / MODAL / DIALOG — توحيد كل النوافذ المنبثقة
   ============================================================ */

/* خلفية التعتيم */
.anima-overlay,
.pm-overlay,
#animaProjectManager,
#loadingOverlay,
.__anima_guard_overlay,
[id$="Overlay"],
[id$="overlay"] {
    background: rgba(0, 0, 0, 0.65) !important;
}

/* صناديق الحوار */
.anima-dialog,
.pm-modal,
.exporter-dialog-box,
.shape-morphs-dialog,
.smart-propagate-dialog,
.text-layers-dialog,
.lip-sync-dialog,
.google-drive-dialog,
.save-as-dialog,
.bake-dialog,
.export-exists-dialog,
.camera-recorder-box,
.send-morph-dialog,
[id$="Dialog"],
[id$="dialog"],
[id$="Box"],
[id$="Panel"] {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border-active) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.26) !important;
    color: var(--ui-text) !important;
}

/* modals with id$="Modal" that are overlay containers (not dialog boxes) get only color */
[id$="Modal"] {
    color: var(--ui-text) !important;
}

/* fallback for modals that are dialog boxes (not overlays) */
[id$="Modal"][style*="translate"] {
    background: var(--ui-panel) !important;
    border: 1px solid var(--ui-border-active) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.26) !important;
}

/* ترويسات الحوارات */
.anima-dialog h4,
.pm-modal h3,
.exporter-dialog-box h3,
.smart-propagate-dialog h3,
.shape-morphs-dialog h3,
.text-layers-dialog h3,
.lip-sync-dialog h3,
.bake-dialog h3,
[id$="Modal"] h3,
[id$="Modal"] h4,
[id$="Dialog"] h3,
[id$="Dialog"] h4 {
    color: var(--ui-text) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

/* نصوص ثانوية في الحوارات */
.anima-dialog p,
.pm-modal p,
.exporter-dialog-box p,
.smart-propagate-dialog p,
.bake-dialog p,
[id$="Modal"] p,
[id$="Dialog"] p,
.anima-dialog .subtitle,
.pm-email,
.pm-sub-label,
.pm-expire,
.pm-menu-arrow {
    color: var(--ui-text-dim) !important;
}

/* حقول الإدخال داخل الحوارات */
.anima-dialog input,
.exporter-dialog-box input,
.exporter-dialog-box select,
.smart-propagate-dialog input,
.text-layers-dialog textarea,
.lip-sync-dialog input,
.bake-dialog input,
.save-as-dialog input,
.shape-morphs-dialog input,
[id$="Modal"] input,
[id$="Dialog"] input,
[id$="Dialog"] select,
[id$="Dialog"] textarea {
    background: var(--bg-input) !important;
    border: 1px solid var(--ui-border-active) !important;
    color: var(--ui-text) !important;
}

/* أزرار داخل الحوارات */
.anima-btn-primary,
.exporter-dialog-box .btn-primary,
.save-as-dialog .btn-primary,
.bake-dialog .btn-start {
    background: var(--ui-accent) !important;
    border: 1px solid var(--ui-accent-border) !important;
    color: var(--ui-text) !important;
}
.anima-btn-primary:hover,
.exporter-dialog-box .btn-primary:hover,
.save-as-dialog .btn-primary:hover,
.bake-dialog .btn-start:hover {
    background: var(--ui-accent-hover) !important;
}

.anima-btn-danger,
[id$="Dialog"] .btn-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

.anima-btn-ghost,
.exporter-dialog-box .btn-cancel,
.save-as-dialog .btn-cancel,
.bake-dialog .btn-cancel,
[id$="Dialog"] .btn-cancel,
[id$="Modal"] .btn-cancel {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-active) !important;
    color: var(--ui-text-dim) !important;
}
.anima-btn-ghost:hover,
.exporter-dialog-box .btn-cancel:hover,
.save-as-dialog .btn-cancel:hover,
.bake-dialog .btn-cancel:hover {
    background: var(--ui-surface-hover) !important;
    color: var(--ui-text) !important;
}
