diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 2c23761..53bc30f 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -1276,8 +1276,25 @@ body.app-body  {
 
 .app-body .character-counter {
     color: var(--color-content-fg);
-    opacity: .6;
+    opacity: 0;
+    font-size: 15px;
+    font-weight: normal;
+    transition:
+        opacity .3s,
+        margin-right .3s;
+    transform-origin: right center;
+    margin-right: -10px;
 }
+.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter {
+    opacity: 1;
+    margin-right: 0;
+}
+.app-body .character-counter--over {
+    color: #df405a;
+    font-weight: 500;
+    animation: bounce .3s 1;
+}
+
 .compose-form__footer {
     gap: 6px;
 }
@@ -1335,6 +1352,7 @@ body.app-body  {
     border-radius: 8px;
     border: 1px solid var(--color-lines);
     background-color: var(--color-content-bg);
+    color: var(--color-content-fg);
     transition: all .2s;
 }
 .app-body .poll__option input[type=text]:focus {
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index bde11b0..e3efd5e 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -1276,8 +1276,25 @@ body.app-body  {
 
 .app-body .character-counter {
     color: var(--color-content-fg);
-    opacity: .6;
+    opacity: 0;
+    font-size: 15px;
+    font-weight: normal;
+    transition:
+        opacity .3s,
+        margin-right .3s;
+    transform-origin: right center;
+    margin-right: -10px;
 }
+.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter {
+    opacity: 1;
+    margin-right: 0;
+}
+.app-body .character-counter--over {
+    color: #df405a;
+    font-weight: 500;
+    animation: bounce .3s 1;
+}
+
 .compose-form__footer {
     gap: 6px;
 }
@@ -1335,6 +1352,7 @@ body.app-body  {
     border-radius: 8px;
     border: 1px solid var(--color-lines);
     background-color: var(--color-content-bg);
+    color: var(--color-content-fg);
     transition: all .2s;
 }
 .app-body .poll__option input[type=text]:focus {
diff --git a/TangerineUI.css b/TangerineUI.css
index 1017131..72c3e74 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -1276,8 +1276,25 @@ body.app-body  {
 
 .app-body .character-counter {
     color: var(--color-content-fg);
-    opacity: .6;
+    opacity: 0;
+    font-size: 15px;
+    font-weight: normal;
+    transition:
+        opacity .3s,
+        margin-right .3s;
+    transform-origin: right center;
+    margin-right: -10px;
 }
+.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .character-counter {
+    opacity: 1;
+    margin-right: 0;
+}
+.app-body .character-counter--over {
+    color: #df405a;
+    font-weight: 500;
+    animation: bounce .3s 1;
+}
+
 .compose-form__footer {
     gap: 6px;
 }
@@ -1335,6 +1352,7 @@ body.app-body  {
     border-radius: 8px;
     border: 1px solid var(--color-lines);
     background-color: var(--color-content-bg);
+    color: var(--color-content-fg);
     transition: all .2s;
 }
 .app-body .poll__option input[type=text]:focus {