clean stylesheets and add more transitions

.config/ags/scss/_bar.scss

@@ -48,24 +48,6 @@ $bar_subgroup_bg: $surfaceVariant;
     padding-left: 0.341rem;
 }
 
-.bar-group-pad-left {
-    padding-left: 1.364rem;
-    padding-right: 0.681rem;
-}
-
-.bar-group-pad-right {
-    padding-left: 0.681rem;
-    padding-right: 1.364rem;
-}
-
-.bar-group-pad-leftonly {
-    padding-left: 0.681rem;
-}
-
-.bar-group-pad-rightonly {
-    padding-right: 0.681rem;
-}
-
 .bar-group-standalone {
     @include bar-group-rounding;
     -gtk-outline-radius: 1.364rem;
@@ -142,6 +124,7 @@ $bar_subgroup_bg: $surfaceVariant;
 
 .bar-batt {
     @include full-rounding;
+    @include element_decel;
     min-height: 1.77rem;
     min-width: 1.77rem;
     border-radius: 10rem;
@@ -173,24 +156,17 @@ $bar_subgroup_bg: $surfaceVariant;
 }
 
 .bar-batt-circprog-low {
-    @include fluent_decel_long;
-    min-width: 0.068rem; // line width
-    min-height: 1.636rem;
-    padding: 0rem;
     background-color: $error;
     color: $errorContainer;
 }
 
 .bar-batt-circprog-full {
-    @include fluent_decel_long;
-    min-width: 0.068rem; // line width
-    min-height: 1.636rem;
-    padding: 0rem;
     background-color: $successContainer;
     color: $onSuccessContainer;
 }
 
 .bar-music-playstate {
+    @include element_decel;
     min-height: 1.77rem;
     min-width: 1.77rem;
     border-radius: 10rem;
@@ -237,24 +213,6 @@ $bar_subgroup_bg: $surfaceVariant;
     background-color: rgba(30, 30, 30, 0.6);
 }
 
-.bar-music-bottom-bg {
-    border-radius: 1.364rem;
-    min-width: 34.091rem;
-}
-
-.bar-music-bottom-ctl-bg {
-    border-radius: 1.364rem;
-    background-color: rgba(30, 30, 30, 0.6);
-}
-
-.bar-music-extended-textbox {
-    margin: 1.023rem;
-}
-
-.bar-music-bottom-cover {
-    border-radius: 10rem;
-}
-
 .bar-music-hide-false {
     @include menu_decel;
     transition-duration: 100ms;
@@ -267,70 +225,6 @@ $bar_subgroup_bg: $surfaceVariant;
     opacity: 0;
 }
 
-.bar-music-btn {
-    font-size: 1.364rem;
-    border-radius: 10rem;
-    min-height: 2.591rem;
-    min-width: 2.591rem;
-}
-
-.bar-music-btn:hover,
-.bar-music-btn:focus {
-    background-color: $hovercolor;
-}
-
-.bar-prog-batt {
-    min-height: 0.955rem;
-    min-width: 0.068rem;
-    padding: 0rem;
-    border-radius: 10rem;
-
-    trough {
-        min-height: 0.954rem;
-        min-width: 0.068rem;
-        border-radius: 10rem;
-    }
-
-    progress {
-        min-height: 0.68rem;
-        min-width: 0.68rem;
-        margin: 0rem 0.137rem;
-        border-radius: 10rem;
-        background-color: $t_onSecondaryContainer;
-    }
-}
-
-.bar-prog-batt-low {
-    progress {
-        background-color: $errorContainer;
-    }
-}
-
-.bar-prog-batt-full {
-    progress {
-        background-color: $onSuccessContainer;
-    }
-}
-
-.bar-batt-chargestate {
-    border-radius: 10rem;
-    background-color: transparent;
-}
-
-.bar-batt-chargestate-charging {
-    border-radius: 10rem;
-    min-width: 0.681rem;
-    min-height: 0.681rem;
-    background-color: $onSurfaceVariant;
-}
-
-.bar-batt-chargestate-charging-smaller {
-    border-radius: 10rem;
-    min-width: 0.409rem;
-    min-height: 0.409rem;
-    background-color: $onSurfaceVariant;
-}
-
 .bar-corner-spacing {
     min-width: $rounding_large;
     min-height: $rounding_large;
@@ -388,13 +282,14 @@ $bar_subgroup_bg: $surfaceVariant;
 
 .bar-systray-item {
     @include full-rounding;
+    @include element_decel;
     min-height: 1.032rem;
     min-width: 1.032rem;
 }
 
 .bar-statusicons {
     @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
     margin: 0.273rem;
     padding: 0rem 0.614rem;
 }
@@ -409,6 +304,7 @@ $bar_subgroup_bg: $surfaceVariant;
 
 .bar-util-btn {
     @include full-rounding;
+    @include element_decel;
     min-height: 1.77rem;
     min-width: 1.77rem;
     background-color: $bar_subgroup_bg;

.config/ags/scss/_cheatsheet.scss

@@ -31,7 +31,7 @@
 // .cheatsheet-action {}
 
 .cheatsheet-closebtn {
-    @include menu_decel;
+    @include element_decel;
     @include full-rounding;
     min-width: 2.386rem;
     min-height: 2.386rem;

.config/ags/scss/_common.scss

@@ -103,7 +103,7 @@ tooltip {
 }
 
 .switch-bg {
-    @include menu_decel;
+    @include element_decel;
     @include full-rounding;
     background-color: mix($surface, $background, 50%);
     border: 0.136rem solid $onSurface;

.config/ags/scss/_overview.scss

@@ -3,7 +3,7 @@
 }
 
 .overview-search-box {
-    @include menu_decel;
+    @include element_decel;
     @include large-rounding;
     @include elevation-border;
     @include elevation2;

.config/ags/scss/_sidebars.scss

@@ -78,7 +78,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-iconbutton {
     @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
     color: $onSurface;
     min-width: 2.727rem;
     min-height: 2.727rem;
@@ -94,18 +94,12 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-button {
-    @include menu_decel;
+    @include element_decel;
     padding: 0rem $rounding_small;
     background-color: $t_secondaryContainer;
     color: $onSecondaryContainer;
 }
 
-.sidebar-button-nopad {
-    @include menu_decel;
-    background-color: $t_secondaryContainer;
-    color: $onSecondaryContainer;
-}
-
 .sidebar-button:hover,
 .sidebar-button:focus {
     background-color: $hovercolor;
@@ -115,33 +109,6 @@ $onChatgpt: $onPrimary;
     background-color: $activecolor;
 }
 
-.sidebar-button-nopad:hover,
-.sidebar-button-nopad:focus {
-    background-color: $hovercolor;
-}
-
-.sidebar-button-nopad:active {
-    background-color: $activecolor;
-}
-
-.sidebar-button-left {
-    border-top-left-radius: $rounding_small;
-    border-bottom-left-radius: $rounding_small;
-}
-
-.sidebar-button-right {
-    border-top-right-radius: $rounding_small;
-    border-bottom-right-radius: $rounding_mediumsmall;
-}
-
-.sidebar-button-alone {
-    @include small-rounding;
-}
-
-.sidebar-button-alone-normal {
-    @include small-rounding;
-}
-
 .sidebar-button-active {
     background-color: $primary;
     color: $onPrimary;
@@ -236,6 +203,7 @@ $onChatgpt: $onPrimary;
 
     slider {
         @include full-rounding;
+        @include element_decel;
         min-width: 0.273rem;
         min-height: 2.045rem;
         background-color: $t_onSurfaceVariant;
@@ -253,7 +221,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-calendar-btn {
     @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
     min-height: 2.523rem;
     min-width: 2.523rem;
     color: $onSurface;
@@ -297,6 +265,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-calendar-monthyear-btn {
     @include full-rounding;
+    @include element_decel;
     padding: 0rem 0.682rem;
     background-color: $t_surfaceVariant;
     color: $onSurfaceVariant;
@@ -315,6 +284,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-calendar-monthshift-btn {
     @include full-rounding;
+    @include element_decel;
     min-width: 2.045rem;
     min-height: 2.045rem;
     background-color: $t_surfaceVariant;
@@ -333,7 +303,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-selector-tab {
     @include small-rounding;
-    @include menu_decel;
+    @include element_decel;
     min-height: 2.5rem;
     color: $onSurface;
 }
@@ -357,7 +327,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-selector-highlight {
-    transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with GtkStack animation of the actual todo widget content
+    transition: 180ms ease-in-out; // Doesn't look that good, but it syncs with the GtkStack
     color: $primary;
     // padding: 0rem 2.045rem;
     min-height: 0.205rem;
@@ -372,6 +342,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-todo-item-action {
+    @include element_decel;
     border-radius: 9999px;
     min-width: 1.705rem;
     min-height: 1.705rem;
@@ -401,13 +372,14 @@ $onChatgpt: $onPrimary;
 
 .sidebar-todo-new {
     @include full-rounding;
+    @include element_decel;
     color: $onSecondaryContainer;
     margin: 0.341rem;
     padding: 0.205rem 0.545rem;
     border: 0.068rem solid $onSurface;
 }
 
-.sidebar-todo-newz,
+.sidebar-todo-new,
 .sidebar-todo-new:focus {
     background-color: mix($t_secondaryContainer, $t_onSecondaryContainer, 97%);
 }
@@ -417,7 +389,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-todo-add {
-    @include menu_decel;
+    @include element_decel;
     @include small-rounding;
     min-width: 1.705rem;
     min-height: 1.705rem;
@@ -435,7 +407,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-todo-add-available {
-    @include menu_decel;
+    @include element_decel;
     @include small-rounding;
     min-width: 1.705rem;
     min-height: 1.705rem;
@@ -454,7 +426,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-todo-entry {
-    @include menu_decel;
+    @include element_decel;
     @include small-rounding;
     background-color: $surfaceVariant;
     color: $onSurfaceVariant;
@@ -491,7 +463,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-chat-apiswitcher-icon {
-    @include menu_decel;
+    @include element_decel;
     @include full-rounding;
     min-width: 2.182rem;
     min-height: 2.182rem;
@@ -504,7 +476,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-chat-viewport {
-    @include menu_decel;
+    @include element_decel;
     // margin: 0.682rem 0rem;
     padding: 0.682rem 0rem;
 }
@@ -532,7 +504,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-chat-send {
-    @include menu_decel;
+    @include element_decel;
     min-width: 1.705rem;
     min-height: 1.705rem;
     border-radius: $rounding_medium - 0.681rem;
@@ -566,7 +538,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-chat-indicator {
-    @include menu_decel;
+    @include element_decel;
     @include full-rounding;
     min-width: 0.136rem;
     background-color: $onBackground;
@@ -630,6 +602,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-chat-codeblock-topbar-btn {
     @include full-rounding;
+    @include element_decel;
     padding: 0.273rem 0.477rem;
 }
 
@@ -668,7 +641,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-chat-welcome-logo {
     @include full-rounding;
-    @include menu_decel;
+    @include element_decel;
     min-height: 4.773rem;
     min-width: 4.773rem;
     @include icon-material;
@@ -678,12 +651,13 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-chat-chip {
-    @include menu_decel;
+    @include element_decel;
     @include small-rounding;
     padding: 0.341rem 0.477rem;
 }
 
 .sidebar-chat-chip-action {
+    @include element_decel;
     background-color: $textboxColor;
     color: $onSurfaceVariant;
 }
@@ -703,7 +677,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-chat-chip-toggle {
-    @include menu_decel;
+    @include element_decel;
     @include small-rounding;
     padding: 0.341rem 0.477rem;
     background-color: $textboxColor;
@@ -721,7 +695,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-pin {
     @include small-rounding;
-    @include menu_decel;
+    @include element_decel;
     min-height: 2.386rem;
     min-width: 2.386rem;
     color: $onSurface;
@@ -778,6 +752,7 @@ $onChatgpt: $onPrimary;
 }
 
 .sidebar-waifu-image-actions {
+    @include element_decel;
     padding: 0.313rem;
 }
 

.config/ags/style.css

@@ -334,6 +334,12 @@
 .margin-bottom-15 {
   margin-bottom: 1.023rem; }
 
+.width-10 {
+  min-width: 0.682rem; }
+
+.height-10 {
+  min-width: 0.682rem; }
+
 .invisible {
   opacity: 0;
   background-color: transparent;
@@ -482,7 +488,7 @@ tooltip {
   border: 0.136rem solid #6f6a6f; }
 
 .switch-bg {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   background-color: #171518;
@@ -597,20 +603,6 @@ tooltip {
   padding-right: 1.023rem;
   padding-left: 0.341rem; }
 
-.bar-group-pad-left {
-  padding-left: 1.364rem;
-  padding-right: 0.681rem; }
-
-.bar-group-pad-right {
-  padding-left: 0.681rem;
-  padding-right: 1.364rem; }
-
-.bar-group-pad-leftonly {
-  padding-left: 0.681rem; }
-
-.bar-group-pad-rightonly {
-  padding-right: 0.681rem; }
-
 .bar-group-standalone {
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
@@ -675,6 +667,7 @@ tooltip {
 .bar-batt {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 1.77rem;
   min-width: 1.77rem;
   border-radius: 10rem;
@@ -701,22 +694,15 @@ tooltip {
   color: #eedcf5; }
 
 .bar-batt-circprog-low {
-  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
-  min-width: 0.068rem;
-  min-height: 1.636rem;
-  padding: 0rem;
   background-color: #ffb4a9;
   color: #930006; }
 
 .bar-batt-circprog-full {
-  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
-  min-width: 0.068rem;
-  min-height: 1.636rem;
-  padding: 0rem;
   background-color: #374b3e;
   color: #d1e9d6; }
 
 .bar-music-playstate {
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 1.77rem;
   min-width: 1.77rem;
   border-radius: 10rem;
@@ -756,20 +742,6 @@ tooltip {
   border-radius: 1.364rem;
   background-color: rgba(30, 30, 30, 0.6); }
 
-.bar-music-bottom-bg {
-  border-radius: 1.364rem;
-  min-width: 34.091rem; }
-
-.bar-music-bottom-ctl-bg {
-  border-radius: 1.364rem;
-  background-color: rgba(30, 30, 30, 0.6); }
-
-.bar-music-extended-textbox {
-  margin: 1.023rem; }
-
-.bar-music-bottom-cover {
-  border-radius: 10rem; }
-
 .bar-music-hide-false {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   transition-duration: 100ms;
@@ -780,54 +752,6 @@ tooltip {
   transition-duration: 100ms;
   opacity: 0; }
 
-.bar-music-btn {
-  font-size: 1.364rem;
-  border-radius: 10rem;
-  min-height: 2.591rem;
-  min-width: 2.591rem; }
-
-.bar-music-btn:hover,
-.bar-music-btn:focus {
-  background-color: rgba(128, 128, 128, 0.3); }
-
-.bar-prog-batt {
-  min-height: 0.955rem;
-  min-width: 0.068rem;
-  padding: 0rem;
-  border-radius: 10rem; }
-  .bar-prog-batt trough {
-    min-height: 0.954rem;
-    min-width: 0.068rem;
-    border-radius: 10rem; }
-  .bar-prog-batt progress {
-    min-height: 0.68rem;
-    min-width: 0.68rem;
-    margin: 0rem 0.137rem;
-    border-radius: 10rem;
-    background-color: #eedcf5; }
-
-.bar-prog-batt-low progress {
-  background-color: #930006; }
-
-.bar-prog-batt-full progress {
-  background-color: #d1e9d6; }
-
-.bar-batt-chargestate {
-  border-radius: 10rem;
-  background-color: transparent; }
-
-.bar-batt-chargestate-charging {
-  border-radius: 10rem;
-  min-width: 0.681rem;
-  min-height: 0.681rem;
-  background-color: #cdc3ce; }
-
-.bar-batt-chargestate-charging-smaller {
-  border-radius: 10rem;
-  min-width: 0.409rem;
-  min-height: 0.409rem;
-  background-color: #cdc3ce; }
-
 .bar-corner-spacing {
   min-width: 1.705rem;
   min-height: 1.705rem; }
@@ -877,13 +801,14 @@ tooltip {
 .bar-systray-item {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 1.032rem;
   min-width: 1.032rem; }
 
 .bar-statusicons {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   margin: 0.273rem;
   padding: 0rem 0.614rem; }
 
@@ -896,6 +821,7 @@ tooltip {
 .bar-util-btn {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 1.77rem;
   min-width: 1.77rem;
   background-color: #38343a; }
@@ -940,7 +866,7 @@ tooltip {
   color: #f4d9ff; }
 
 .cheatsheet-closebtn {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   min-width: 2.386rem;
@@ -1184,7 +1110,7 @@ tooltip {
   margin-top: 2.727rem; }
 
 .overview-search-box {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
   border-top: 1px solid rgba(167, 161, 166, 0.19);
@@ -1466,7 +1392,7 @@ tooltip {
 .sidebar-iconbutton {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   color: #e7e0e5;
   min-width: 2.727rem;
   min-height: 2.727rem; }
@@ -1479,16 +1405,11 @@ tooltip {
   background-color: rgba(128, 128, 128, 0.7); }
 
 .sidebar-button {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   padding: 0rem 0.818rem;
   background-color: #4f4256;
   color: #eedcf5; }
 
-.sidebar-button-nopad {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  background-color: #4f4256;
-  color: #eedcf5; }
-
 .sidebar-button:hover,
 .sidebar-button:focus {
   background-color: rgba(128, 128, 128, 0.3); }
@@ -1496,29 +1417,6 @@ tooltip {
 .sidebar-button:active {
   background-color: rgba(128, 128, 128, 0.7); }
 
-.sidebar-button-nopad:hover,
-.sidebar-button-nopad:focus {
-  background-color: rgba(128, 128, 128, 0.3); }
-
-.sidebar-button-nopad:active {
-  background-color: rgba(128, 128, 128, 0.7); }
-
-.sidebar-button-left {
-  border-top-left-radius: 0.818rem;
-  border-bottom-left-radius: 0.818rem; }
-
-.sidebar-button-right {
-  border-top-right-radius: 0.818rem;
-  border-bottom-right-radius: 0.955rem; }
-
-.sidebar-button-alone {
-  border-radius: 0.818rem;
-  -gtk-outline-radius: 0.818rem; }
-
-.sidebar-button-alone-normal {
-  border-radius: 0.818rem;
-  -gtk-outline-radius: 0.818rem; }
-
 .sidebar-button-active {
   background-color: #eccbff;
   color: #471868; }
@@ -1599,6 +1497,7 @@ tooltip {
 .sidebar-scrollbar slider {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-width: 0.273rem;
   min-height: 2.045rem;
   background-color: rgba(205, 195, 206, 0.31); }
@@ -1613,7 +1512,7 @@ tooltip {
 .sidebar-calendar-btn {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 2.523rem;
   min-width: 2.523rem;
   color: #e7e0e5; }
@@ -1649,6 +1548,7 @@ tooltip {
 .sidebar-calendar-monthyear-btn {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   padding: 0rem 0.682rem;
   background-color: rgba(56, 52, 58, 0.31);
   color: #cdc3ce; }
@@ -1665,6 +1565,7 @@ tooltip {
 .sidebar-calendar-monthshift-btn {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-width: 2.045rem;
   min-height: 2.045rem;
   background-color: rgba(56, 52, 58, 0.31);
@@ -1681,7 +1582,7 @@ tooltip {
 .sidebar-selector-tab {
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 2.5rem;
   color: #e7e0e5; }
 
@@ -1711,6 +1612,7 @@ tooltip {
   background-color: rgba(56, 52, 58, 0.1); }
 
 .sidebar-todo-item-action {
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 9999px;
   min-width: 1.705rem;
   min-height: 1.705rem; }
@@ -1735,12 +1637,13 @@ tooltip {
 .sidebar-todo-new {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   color: #eedcf5;
   margin: 0.341rem;
   padding: 0.205rem 0.545rem;
   border: 0.068rem solid #e7e0e5; }
 
-.sidebar-todo-newz,
+.sidebar-todo-new,
 .sidebar-todo-new:focus {
   background-color: #54475b; }
 
@@ -1748,7 +1651,7 @@ tooltip {
   background-color: #6f6176; }
 
 .sidebar-todo-add {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
   min-width: 1.705rem;
@@ -1764,7 +1667,7 @@ tooltip {
   background-color: #6f6176; }
 
 .sidebar-todo-add-available {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
   min-width: 1.705rem;
@@ -1781,7 +1684,7 @@ tooltip {
   background-color: #cba7e1; }
 
 .sidebar-todo-entry {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
   background-color: #38343a;
@@ -1817,7 +1720,7 @@ tooltip {
   background-color: rgba(31, 28, 32, 0.31); }
 
 .sidebar-chat-apiswitcher-icon {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   min-width: 2.182rem;
@@ -1829,7 +1732,7 @@ tooltip {
   color: #eedcf5; }
 
 .sidebar-chat-viewport {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   padding: 0.682rem 0rem; }
 
 .sidebar-chat-textarea {
@@ -1845,8 +1748,14 @@ tooltip {
   min-height: 1.773rem;
   min-width: 0rem; }
 
+.sidebar-chat-wrapper {
+  transition: 400ms cubic-bezier(0.1, 1, 0, 1); }
+
+.sidebar-chat-wrapper-extended {
+  min-height: 7.500rem; }
+
 .sidebar-chat-send {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-width: 1.705rem;
   min-height: 1.705rem;
   border-radius: 0.478rem; }
@@ -1873,7 +1782,7 @@ tooltip {
   margin: 0.682rem; }
 
 .sidebar-chat-indicator {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   min-width: 0.136rem;
@@ -1930,6 +1839,7 @@ tooltip {
 .sidebar-chat-codeblock-topbar-btn {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   padding: 0.273rem 0.477rem; }
 
 .sidebar-chat-codeblock-topbar-btn:hover,
@@ -1962,7 +1872,7 @@ tooltip {
 .sidebar-chat-welcome-logo {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 4.773rem;
   min-width: 4.773rem;
   font-family: "Material Symbols Rounded", "Material Symbols Outlined", "Material Symbols Sharp";
@@ -1971,12 +1881,13 @@ tooltip {
   color: #0f0e10; }
 
 .sidebar-chat-chip {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
   padding: 0.341rem 0.477rem; }
 
 .sidebar-chat-chip-action {
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   background-color: #242125;
   color: #cdc3ce; }
 
@@ -1992,7 +1903,7 @@ tooltip {
   border: 0.068rem solid #746d75; }
 
 .sidebar-chat-chip-toggle {
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
   padding: 0.341rem 0.477rem;
@@ -2009,7 +1920,7 @@ tooltip {
 .sidebar-pin {
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
-  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   min-height: 2.386rem;
   min-width: 2.386rem;
   color: #e7e0e5; }
@@ -2055,6 +1966,7 @@ tooltip {
   background-position: center; }
 
 .sidebar-waifu-image-actions {
+  transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
   padding: 0.313rem; }
 
 .sidebar-waifu-image-action {