diff --git a/public/css/animations.css b/public/css/animations.css
new file mode 100644
index 000000000..ee4934093
--- /dev/null
+++ b/public/css/animations.css
@@ -0,0 +1,109 @@
+/* Fade animations with opacity */
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+/* Pop animations with opacity and vertical scaling */
+@keyframes pop-in {
+    0% {
+        opacity: 0;
+        transform: scaleY(0);
+    }
+
+    /* Make the scaling faster on pop-in, otherwise it looks a bit weird */
+    33% {
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+}
+
+@keyframes pop-out {
+    0% {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scaleY(0);
+    }
+}
+
+/* Flashing for highlighting animation */
+@keyframes flash {
+
+    20%,
+    60%,
+    100% {
+        opacity: 1;
+    }
+
+    0%,
+    40%,
+    80% {
+        opacity: 0.2;
+    }
+}
+
+/* Ellipsis animation */
+@keyframes ellipsis {
+    0% {
+        content: ""
+    }
+
+    25% {
+        content: "."
+    }
+
+    50% {
+        content: ".."
+    }
+
+    75% {
+        content: "..."
+    }
+}
+
+/* HEINOUS */
+@keyframes infinite-spinning {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* STscript animation */
+@keyframes script_progress_pulse {
+
+    0%,
+    100% {
+        border-top-color: var(--progColor);
+    }
+
+    50% {
+        border-top-color: var(--progFlashColor);
+    }
+}
diff --git a/public/css/popup.css b/public/css/popup.css
new file mode 100644
index 000000000..2f1e28136
--- /dev/null
+++ b/public/css/popup.css
@@ -0,0 +1,96 @@
+dialog {
+    color: var(--SmartThemeBodyColor);
+}
+
+/* Closed state of the dialog */
+.dialogue_popup {
+    width: 500px;
+    text-align: center;
+    box-shadow: 0px 0px 14px var(--black70a);
+    border: 1px solid var(--SmartThemeBorderColor);
+    padding: 4px 14px;
+    background-color: var(--SmartThemeBlurTintColor);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+
+    /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup_content' is hiding overflow for the real content. */
+    overflow: visible;
+
+    /* Fix weird animation issue with font-scaling during popup open */
+    backface-visibility: hidden;
+    transform: translateZ(0);
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.dialogue_popup .popup_content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.dialogue_popup .dialogue_popup_text {
+    padding: 0 8px;
+    overflow: hidden;
+}
+
+.dialogue_popup.vertical_scrolling_dialogue_popup .dialogue_popup_text {
+    overflow-y: auto;
+}
+
+.dialogue_popup.horizontal_scrolling_dialogue_popup .dialogue_popup_text {
+    overflow-x: auto;
+}
+
+/* Open state of the dialog */
+.dialogue_popup[open] {
+    animation: pop-in var(--animation-duration-slow) ease-in-out;
+}
+
+.dialogue_popup[closing] {
+    animation: pop-out var(--animation-duration-slow) ease-in-out;
+}
+
+.dialogue_popup[open]::backdrop {
+    animation: fade-in var(--animation-duration-slow) ease-in-out;
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    background-color: var(--black30a);
+}
+
+.dialogue_popup[closing]::backdrop {
+    animation: fade-out var(--animation-duration-slow) ease-in-out;
+}
+
+/* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
+.dialogue_popup #toast-container {
+    height: 100svh;
+    top: calc(50% + var(--topBarBlockSize));
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.dialogue_popup_input {
+    margin-top: 10px;
+}
+
+.dialogue_popup_controls {
+    margin-top: 10px;
+    display: flex;
+    align-self: center;
+    gap: 20px;
+}
+
+.menu_button.menu_button_default {
+    box-shadow: 0 0 5px var(--white20a);
+}
+
+.menu_button.dialogue_popup_ok {
+    background-color: var(--crimson70a);
+    cursor: pointer;
+}
+
+.menu_button.menu_button_custom {
+    /** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
+    width: unset;
+}
diff --git a/public/index.html b/public/index.html
index 80428784d..fe30492dc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,6 +32,8 @@
     <link rel="apple-touch-icon" sizes="144x144" href="img/apple-icon-144x144.png" />
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="stylesheet" type="text/css" href="css/st-tailwind.css">
+    <link rel="stylesheet" type="text/css" href="css/animations.css">
+    <link rel="stylesheet" type="text/css" href="css/popup.css">
     <link rel="stylesheet" type="text/css" href="css/tags.css">
     <link rel="stylesheet" type="text/css" href="css/rm-groups.css">
     <link rel="stylesheet" type="text/css" href="css/group-avatars.css">
diff --git a/public/style.css b/public/style.css
index afe84121f..b4b6882a6 100644
--- a/public/style.css
+++ b/public/style.css
@@ -207,21 +207,6 @@ table.responsiveTable {
     box-shadow: inset 0 0 5px var(--SmartThemeQuoteColor);
 }
 
-@keyframes flash {
-
-    20%,
-    60%,
-    100% {
-        opacity: 1;
-    }
-
-    0%,
-    40%,
-    80% {
-        opacity: 0.2;
-    }
-}
-
 .flash {
     animation-name: flash;
 }
@@ -1167,18 +1152,6 @@ select {
     transition: clip-path 200ms;
 }
 
-@keyframes script_progress_pulse {
-
-    0%,
-    100% {
-        border-top-color: var(--progColor);
-    }
-
-    50% {
-        border-top-color: var(--progFlashColor);
-    }
-}
-
 #form_sheld.isExecutingCommandsFromChatInput.script_paused #send_textarea {
     animation-name: script_progress_pulse;
     animation-duration: 1500ms;
@@ -3049,116 +3022,6 @@ grammarly-extension {
     overflow-x: hidden;
 }
 
-dialog {
-    color: var(--SmartThemeBodyColor);
-}
-
-/* Closed state of the dialog */
-.dialogue_popup {
-    width: 500px;
-    text-align: center;
-    box-shadow: 0px 0px 14px var(--black70a);
-    border: 1px solid var(--SmartThemeBorderColor);
-    padding: 4px 14px;
-    background-color: var(--SmartThemeBlurTintColor);
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-
-    /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup_content' is hiding overflow for the real content. */
-    overflow: visible;
-
-    /* Fix weird animation issue with font-scaling during popup open */
-    backface-visibility: hidden;
-    transform: translateZ(0);
-    -webkit-font-smoothing: subpixel-antialiased;
-}
-
-.dialogue_popup .popup_content {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.dialogue_popup .dialogue_popup_text {
-    padding: 0 8px;
-    overflow: hidden;
-}
-
-.dialogue_popup.vertical_scrolling_dialogue_popup .dialogue_popup_text {
-    overflow-y: auto;
-}
-
-.dialogue_popup.horizontal_scrolling_dialogue_popup .dialogue_popup_text {
-    overflow-x: auto;
-}
-
-/* Open state of the dialog */
-.dialogue_popup[open] {
-    animation: pop-in var(--animation-duration-slow) ease-in-out;
-}
-
-.dialogue_popup[closing] {
-    animation: pop-out var(--animation-duration-slow) ease-in-out;
-}
-
-.dialogue_popup[open]::backdrop {
-    animation: fade-in var(--animation-duration-slow) ease-in-out;
-    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
-    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
-    background-color: var(--black30a);
-}
-
-.dialogue_popup[closing]::backdrop {
-    animation: fade-out var(--animation-duration-slow) ease-in-out;
-}
-
-/* Animation keyframes */
-@keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-@keyframes fade-out {
-    0% { opacity: 1; }
-    100% { opacity: 0; }
-}
-@keyframes pop-in {
-    0% {
-        opacity: 0;
-        transform: scaleY(0);
-    }
-
-    /* Make the scaling faster on pop-in, otherwise it looks a bit weird */
-    33% {
-        transform: scaleY(1);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-}
-
-@keyframes pop-out {
-    0% {
-        opacity: 1;
-        transform: scaleY(1);
-    }
-
-    100% {
-        opacity: 0;
-        transform: scaleY(0);
-    }
-}
-
-/* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
-.dialogue_popup #toast-container {
-    height: 100svh;
-    top: calc(50% + var(--topBarBlockSize));
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
 .rm_stat_block {
     display: flex;
     justify-content: space-between;
@@ -3204,8 +3067,7 @@ dialog {
     height: 100%;
 }
 
-#dialogue_popup_controls,
-.dialogue_popup_controls {
+#dialogue_popup_controls {
     margin-top: 10px;
     display: flex;
     align-self: center;
@@ -3214,18 +3076,14 @@ dialog {
 
 #bulk_tag_popup_reset,
 #bulk_tag_popup_remove_mutual,
-#dialogue_popup_ok,
-.dialogue_popup_ok,
-.menu_button.dialogue_popup_ok {
+#dialogue_popup_ok {
     background-color: var(--crimson70a);
     cursor: pointer;
 }
 
 #bulk_tag_popup_reset:hover,
 #bulk_tag_popup_remove_mutual:hover,
-#dialogue_popup_ok:hover,
-.dialogue_popup_ok:hover,
-.menu_button.dialogue_popup_ok:hover {
+#dialogue_popup_ok:hover {
     background-color: var(--crimson-hover);
 }
 
@@ -3233,15 +3091,13 @@ dialog {
     max-height: 70vh;
 }
 
-#dialogue_popup_input,
-.dialogue_popup_input {
+#dialogue_popup_input {
     margin: 10px 0 0 0;
     width: 100%;
 }
 
 #bulk_tag_popup_cancel,
-#dialogue_popup_cancel,
-.dialogue_popup_cancel {
+#dialogue_popup_cancel {
     cursor: pointer;
 }
 
@@ -3283,15 +3139,6 @@ dialog {
     text-align: center;
 }
 
-.menu_button.menu_button_default {
-    box-shadow: 0 0 5px var(--white20a);
-}
-
-.menu_button.menu_button_custom {
-    /** Custom buttons should not scale to smallest size, otherwise they will always break to multiline */
-    width: unset;
-}
-
 .avatar_div .menu_button,
 .form_create_bottom_buttons_block .menu_button {
     font-weight: bold;
@@ -4188,17 +4035,6 @@ h5 {
     animation: infinite-spinning 1s ease-out 0s infinite normal;
 }
 
-/* HEINOUS */
-@keyframes infinite-spinning {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 #export_character_div {
     display: grid;
     grid-template-columns: 340px auto;
@@ -4352,24 +4188,6 @@ body.big-avatars .missing-avatar {
     margin: 5px 0;
 }
 
-@keyframes ellipsis {
-    0% {
-        content: ""
-    }
-
-    25% {
-        content: "."
-    }
-
-    50% {
-        content: ".."
-    }
-
-    75% {
-        content: "..."
-    }
-}
-
 .warning {
     color: var(--warning);
     font-weight: bolder;