ct-rich-text-editor 1.3.8 → 1.3.9

package/dist/assets/style.css

@@ -648,10 +648,6 @@ video {
   left: 0.625rem;
 }
 
-.cteditor-left-4{
-  left: 1rem;
-}
-
 .cteditor-left-\[50\%\]{
   left: 50%;
 }
@@ -664,10 +660,6 @@ video {
   right: 0.25rem;
 }
 
-.cteditor-right-12{
-  right: 3rem;
-}
-
 .cteditor-right-2{
   right: 0.5rem;
 }
@@ -712,6 +704,14 @@ video {
   z-index: 50;
 }
 
+.cteditor-z-\[10001\]{
+  z-index: 10001;
+}
+
+.cteditor-z-\[100\]{
+  z-index: 100;
+}
+
 .cteditor-z-\[9999\]{
   z-index: 9999;
 }
@@ -724,6 +724,11 @@ video {
   margin: 2px;
 }
 
+.\!cteditor-my-1{
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
 .cteditor--mx-1{
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -757,6 +762,10 @@ video {
   margin-top: 0px !important;
 }
 
+.cteditor-mb-0{
+  margin-bottom: 0px;
+}
+
 .cteditor-mb-0\.5{
   margin-bottom: 0.125rem;
 }
@@ -821,10 +830,21 @@ video {
   margin-top: 1rem;
 }
 
+.cteditor-mt-5{
+  margin-top: 1.25rem;
+}
+
 .cteditor-mt-6{
   margin-top: 1.5rem;
 }
 
+.cteditor-line-clamp-2{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
 .\!cteditor-block{
   display: block !important;
 }
@@ -837,10 +857,6 @@ video {
   display: inline-block;
 }
 
-.cteditor-inline{
-  display: inline;
-}
-
 .cteditor-flex{
   display: flex;
 }
@@ -881,6 +897,11 @@ video {
   height: 1.25rem !important;
 }
 
+.\!cteditor-size-6{
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+}
+
 .\!cteditor-size-\[18px\]{
   width: 18px !important;
   height: 18px !important;
@@ -926,6 +947,11 @@ video {
   height: 18px;
 }
 
+.cteditor-size-auto{
+  width: auto;
+  height: auto;
+}
+
 .\!cteditor-h-6{
   height: 1.5rem !important;
 }
@@ -958,10 +984,6 @@ video {
   height: 0.5rem;
 }
 
-.cteditor-h-2\.5{
-  height: 0.625rem;
-}
-
 .cteditor-h-20{
   height: 5rem;
 }
@@ -1058,10 +1080,26 @@ video {
   max-height: 200px;
 }
 
+.cteditor-max-h-\[300px\]{
+  max-height: 300px;
+}
+
+.cteditor-max-h-\[350px\]{
+  max-height: 350px;
+}
+
 .cteditor-max-h-\[400px\]{
   max-height: 400px;
 }
 
+.cteditor-max-h-\[600px\]{
+  max-height: 600px;
+}
+
+.cteditor-max-h-\[650px\]{
+  max-height: 650px;
+}
+
 .cteditor-max-h-\[var\(--radix-dropdown-menu-content-available-height\)\]{
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
@@ -1070,6 +1108,14 @@ video {
   min-height: 2.75rem;
 }
 
+.cteditor-min-h-16{
+  min-height: 4rem;
+}
+
+.cteditor-min-h-8{
+  min-height: 2rem;
+}
+
 .cteditor-min-h-\[1\.25rem\]{
   min-height: 1.25rem;
 }
@@ -1082,6 +1128,10 @@ video {
   min-height: 300px;
 }
 
+.cteditor-min-h-\[40px\]{
+  min-height: 40px;
+}
+
 .cteditor-min-h-\[60px\]{
   min-height: 60px;
 }
@@ -1106,10 +1156,6 @@ video {
   width: 2.5rem;
 }
 
-.cteditor-w-12{
-  width: 3rem;
-}
-
 .cteditor-w-14{
   width: 3.5rem;
 }
@@ -1122,10 +1168,6 @@ video {
   width: 0.5rem;
 }
 
-.cteditor-w-2\.5{
-  width: 0.625rem;
-}
-
 .cteditor-w-24{
   width: 6rem;
 }
@@ -1174,6 +1216,10 @@ video {
   width: 2rem;
 }
 
+.cteditor-w-80{
+  width: 20rem;
+}
+
 .cteditor-w-9{
   width: 2.25rem;
 }
@@ -1194,6 +1240,10 @@ video {
   width: 20rem;
 }
 
+.cteditor-w-\[340px\]{
+  width: 340px;
+}
+
 .cteditor-w-\[400px\]{
   width: 400px;
 }
@@ -1214,8 +1264,12 @@ video {
   min-width: 14rem;
 }
 
-.cteditor-min-w-\[180px\]{
-  min-width: 180px;
+.cteditor-min-w-\[160px\]{
+  min-width: 160px;
+}
+
+.cteditor-min-w-\[200px\]{
+  min-width: 200px;
 }
 
 .cteditor-min-w-\[8rem\]{
@@ -1238,6 +1292,10 @@ video {
   max-width: 42rem;
 }
 
+.cteditor-max-w-96{
+  max-width: 24rem;
+}
+
 .cteditor-max-w-full{
   max-width: 100%;
 }
@@ -1361,12 +1419,6 @@ video {
   resize: vertical;
 }
 
-.cteditor-appearance-none{
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-
 .cteditor-grid-cols-2{
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1379,6 +1431,10 @@ video {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
 
+.cteditor-grid-cols-\[1fr_1fr_80px_40px\]{
+  grid-template-columns: 1fr 1fr 80px 40px;
+}
+
 .cteditor-flex-col{
   flex-direction: column;
 }
@@ -1399,10 +1455,6 @@ video {
   align-items: flex-start;
 }
 
-.cteditor-items-end{
-  align-items: flex-end;
-}
-
 .cteditor-items-center{
   align-items: center;
 }
@@ -1455,10 +1507,6 @@ video {
   gap: 0.5rem;
 }
 
-.cteditor-gap-2\.5{
-  gap: 0.625rem;
-}
-
 .cteditor-gap-3{
   gap: 0.75rem;
 }
@@ -1467,6 +1515,12 @@ video {
   gap: 1rem;
 }
 
+.cteditor-space-x-1 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .cteditor-space-x-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1521,10 +1575,20 @@ video {
   margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
 }
 
+.cteditor-space-y-6 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .cteditor-overflow-hidden{
   overflow: hidden;
 }
 
+.cteditor-overflow-clip{
+  overflow: clip;
+}
+
 .cteditor-overflow-x-auto{
   overflow-x: auto;
 }
@@ -1559,6 +1623,10 @@ video {
   white-space: pre-wrap;
 }
 
+.cteditor-text-wrap{
+  text-wrap: wrap;
+}
+
 .cteditor-break-words{
   overflow-wrap: break-word;
 }
@@ -1600,10 +1668,18 @@ video {
   border-bottom-right-radius: calc(var(--cteditorf47ac10b-radius) - 2px);
 }
 
+.\!cteditor-border{
+  border-width: 1px !important;
+}
+
 .cteditor-border{
   border-width: 1px;
 }
 
+.cteditor-border-0{
+  border-width: 0px;
+}
+
 .cteditor-border-2{
   border-width: 2px;
 }
@@ -1616,10 +1692,6 @@ video {
   border-bottom-width: 1px;
 }
 
-.cteditor-border-b-2{
-  border-bottom-width: 2px;
-}
-
 .cteditor-border-l{
   border-left-width: 1px;
 }
@@ -1648,6 +1720,20 @@ video {
   border-style: none;
 }
 
+.\!cteditor-border-amber-400{
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1)) !important;
+}
+
+.\!cteditor-border-foreground\/15{
+  border-color: hsl(var(--cteditorf47ac10b-foreground) / 0.15) !important;
+}
+
+.\!cteditor-border-rose-400{
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)) !important;
+}
+
 .cteditor-border-\[\#e0e0e0\]{
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity, 1));
@@ -1662,16 +1748,6 @@ video {
   border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
 }
 
-.cteditor-border-amber-300{
-  --tw-border-opacity: 1;
-  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
-}
-
-.cteditor-border-amber-400{
-  --tw-border-opacity: 1;
-  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
-}
-
 .cteditor-border-background\/10{
   border-color: hsl(var(--cteditorf47ac10b-background) / 0.1);
 }
@@ -1710,6 +1786,10 @@ video {
   border-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
 }
 
+.cteditor-border-foreground\/60{
+  border-color: hsl(var(--cteditorf47ac10b-foreground) / 0.6);
+}
+
 .cteditor-border-gray-200{
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
@@ -1744,10 +1824,6 @@ video {
   border-color: hsl(var(--cteditorf47ac10b-input));
 }
 
-.cteditor-border-popover{
-  border-color: hsl(var(--cteditorf47ac10b-popover));
-}
-
 .cteditor-border-primary{
   border-color: hsl(var(--cteditorf47ac10b-primary));
 }
@@ -1770,11 +1846,6 @@ video {
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
 
-.cteditor-border-rose-400{
-  --tw-border-opacity: 1;
-  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
-}
-
 .cteditor-border-transparent{
   border-color: transparent;
 }
@@ -1851,20 +1922,11 @@ video {
   background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
 }
 
-.cteditor-bg-amber-100\/50{
-  background-color: rgb(254 243 199 / 0.5);
-}
-
 .cteditor-bg-amber-50{
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
 }
 
-.cteditor-bg-amber-600{
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
-}
-
 .cteditor-bg-background{
   background-color: hsl(var(--cteditorf47ac10b-background));
 }
@@ -1929,6 +1991,10 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-destructive) / 0.1);
 }
 
+.cteditor-bg-foreground\/15{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.15);
+}
+
 .cteditor-bg-foreground\/20{
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.2);
 }
@@ -1971,10 +2037,6 @@ video {
   background-color: hsl(var(--cteditorf47ac10b-muted));
 }
 
-.cteditor-bg-muted\/30{
-  background-color: hsl(var(--cteditorf47ac10b-muted) / 0.3);
-}
-
 .cteditor-bg-muted\/50{
   background-color: hsl(var(--cteditorf47ac10b-muted) / 0.5);
 }
@@ -2028,11 +2090,6 @@ video {
   background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
 }
 
-.cteditor-bg-rose-600{
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
-}
-
 .cteditor-bg-secondary{
   background-color: hsl(var(--cteditorf47ac10b-secondary));
 }
@@ -2054,15 +2111,15 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.cteditor-bg-white\/80{
-  background-color: rgb(255 255 255 / 0.8);
-}
-
 .cteditor-bg-yellow-50{
   --tw-bg-opacity: 1;
   background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
 }
 
+.\!cteditor-bg-gradient-to-r{
+  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
+}
+
 .cteditor-bg-gradient-to-br{
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -2071,15 +2128,25 @@ video {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.cteditor-bg-none{
+  background-image: none;
+}
+
+.\!cteditor-from-foreground\/0{
+  --tw-gradient-from: hsl(var(--cteditorf47ac10b-foreground) / 0) var(--tw-gradient-from-position) !important;
+  --tw-gradient-to: hsl(var(--cteditorf47ac10b-foreground) / 0) var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
+}
+
 .cteditor-from-background{
   --tw-gradient-from: hsl(var(--cteditorf47ac10b-background)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--cteditorf47ac10b-background) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.cteditor-from-gray-50{
-  --tw-gradient-from: #f9fafb var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);
+.cteditor-from-foreground\/0{
+  --tw-gradient-from: hsl(var(--cteditorf47ac10b-foreground) / 0) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--cteditorf47ac10b-foreground) / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
@@ -2089,22 +2156,31 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.\!cteditor-via-foreground\/10{
+  --tw-gradient-to: hsl(var(--cteditorf47ac10b-foreground) / 0)  var(--tw-gradient-to-position) !important;
+  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--cteditorf47ac10b-foreground) / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
+}
+
+.cteditor-via-foreground\/15{
+  --tw-gradient-to: hsl(var(--cteditorf47ac10b-foreground) / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--cteditorf47ac10b-foreground) / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .cteditor-via-primary\/10{
   --tw-gradient-to: hsl(var(--cteditorf47ac10b-primary) / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), hsl(var(--cteditorf47ac10b-primary) / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.cteditor-via-rose-50\/30{
-  --tw-gradient-to: rgb(255 241 242 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 241 242 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
+.\!cteditor-to-foreground\/0{
+  --tw-gradient-to: hsl(var(--cteditorf47ac10b-foreground) / 0) var(--tw-gradient-to-position) !important;
 }
 
 .cteditor-to-background{
   --tw-gradient-to: hsl(var(--cteditorf47ac10b-background)) var(--tw-gradient-to-position);
 }
 
-.cteditor-to-gray-50{
-  --tw-gradient-to: #f9fafb var(--tw-gradient-to-position);
+.cteditor-to-foreground\/0{
+  --tw-gradient-to: hsl(var(--cteditorf47ac10b-foreground) / 0) var(--tw-gradient-to-position);
 }
 
 .cteditor-to-pink-500\/5{
@@ -2152,18 +2228,26 @@ video {
   padding: 0.75rem;
 }
 
-.cteditor-p-3\.5{
-  padding: 0.875rem;
-}
-
 .cteditor-p-4{
   padding: 1rem;
 }
 
+.cteditor-p-5{
+  padding: 1.25rem;
+}
+
 .cteditor-p-6{
   padding: 1.5rem;
 }
 
+.cteditor-p-\[2px\]{
+  padding: 2px;
+}
+
+.cteditor-p-\[6px\]{
+  padding: 6px;
+}
+
 .\!cteditor-px-1{
   padding-left: 0.25rem !important;
   padding-right: 0.25rem !important;
@@ -2204,11 +2288,6 @@ video {
   padding-right: 0.75rem;
 }
 
-.cteditor-px-3\.5{
-  padding-left: 0.875rem;
-  padding-right: 0.875rem;
-}
-
 .cteditor-px-4{
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2274,6 +2353,10 @@ video {
   padding-bottom: 7px;
 }
 
+.cteditor-pb-1{
+  padding-bottom: 0.25rem;
+}
+
 .cteditor-pb-1\.5{
   padding-bottom: 0.375rem;
 }
@@ -2294,6 +2377,10 @@ video {
   padding-left: 2rem;
 }
 
+.cteditor-pr-11{
+  padding-right: 2.75rem;
+}
+
 .cteditor-pr-12{
   padding-right: 3rem;
 }
@@ -2302,10 +2389,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.cteditor-pr-24{
-  padding-right: 6rem;
-}
-
 .cteditor-pr-8{
   padding-right: 2rem;
 }
@@ -2322,10 +2405,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.cteditor-pt-3{
-  padding-top: 0.75rem;
-}
-
 .cteditor-text-left{
   text-align: left;
 }
@@ -2338,6 +2417,10 @@ video {
   text-align: center;
 }
 
+.cteditor-align-middle{
+  vertical-align: middle;
+}
+
 .cteditor-font-mono{
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -2429,15 +2512,14 @@ video {
   font-style: italic;
 }
 
-.cteditor-tabular-nums{
-  --tw-numeric-spacing: tabular-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
 .cteditor-leading-\[1\.4\]{
   line-height: 1.4;
 }
 
+.cteditor-leading-\[normal\]{
+  line-height: normal;
+}
+
 .cteditor-leading-none{
   line-height: 1;
 }
@@ -2542,6 +2624,10 @@ video {
   color: hsl(var(--cteditorf47ac10b-foreground) / 0.5);
 }
 
+.cteditor-text-foreground\/60{
+  color: hsl(var(--cteditorf47ac10b-foreground) / 0.6);
+}
+
 .cteditor-text-gray-200{
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity, 1));
@@ -2572,11 +2658,6 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));
 }
 
-.cteditor-text-gray-900{
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
-}
-
 .cteditor-text-green-500{
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -2587,6 +2668,11 @@ video {
   color: rgb(22 163 74 / var(--tw-text-opacity, 1));
 }
 
+.cteditor-text-green-700{
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+}
+
 .cteditor-text-green-800{
   --tw-text-opacity: 1;
   color: rgb(22 101 52 / var(--tw-text-opacity, 1));
@@ -2791,38 +2877,14 @@ video {
   outline-width: 0px;
 }
 
-.cteditor-ring-1{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .cteditor-ring-2{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.cteditor-ring-amber-200{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity, 1));
-}
-
-.cteditor-ring-amber-400\/30{
-  --tw-ring-color: rgb(251 191 36 / 0.3);
-}
-
-.cteditor-ring-rose-200{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity, 1));
-}
-
-.cteditor-ring-rose-400\/30{
-  --tw-ring-color: rgb(251 113 133 / 0.3);
-}
-
-.cteditor-ring-offset-1{
-  --tw-ring-offset-width: 1px;
+.cteditor-ring-primary\/20{
+  --tw-ring-color: hsl(var(--cteditorf47ac10b-primary) / 0.2);
 }
 
 .cteditor-ring-offset-background{
@@ -2988,11 +3050,12 @@ body {
 
 ::-webkit-scrollbar-track {
     background: #f0f0f0;
+     border-radius: 20px;
   }
 
 ::-webkit-scrollbar-thumb {
     background: #aaa;
-    border-radius: 4px;
+ border-radius: 20px;
   }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -3050,10 +3113,6 @@ body.dark ::-webkit-scrollbar-thumb:hover {
 
 /* Playground Editor Theme Style */
 
-.PlaygroundEditorTheme__table .PlaygroundEditorTheme__tableCell {
-    border-color: hsla(var(--cteditorf47ac10b-foreground), 0.2);
-  }
-
 .PlaygroundEditorTheme__tableCellHeader,
   .PlaygroundEditorTheme__table th,
   .PlaygroundEditorTheme__table td.PlaygroundEditorTheme__tableCellHeader {
@@ -3218,6 +3277,11 @@ body .ai-chat-popup .ai-chat-input {
     scrollbar-width: none;  /* Firefox */
 }
 
+.\*\:cteditor-size-5 > *{
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .file\:cteditor-border-0::file-selector-button{
   border-width: 0px;
 }
@@ -3239,16 +3303,6 @@ body .ai-chat-popup .ai-chat-input {
   color: hsl(var(--cteditorf47ac10b-foreground));
 }
 
-.placeholder\:cteditor-text-gray-500::-moz-placeholder{
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
-}
-
-.placeholder\:cteditor-text-gray-500::placeholder{
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
-}
-
 .placeholder\:cteditor-text-muted-foreground::-moz-placeholder{
   color: hsl(var(--cteditorf47ac10b-muted-foreground));
 }
@@ -3285,23 +3339,17 @@ body .ai-chat-popup .ai-chat-input {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:cteditor-border-amber-500:hover{
+.hover\:cteditor-border-gray-300:hover{
   --tw-border-opacity: 1;
-  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
-}
-
-.hover\:cteditor-border-gray-500:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
 .hover\:cteditor-border-primary:hover{
   border-color: hsl(var(--cteditorf47ac10b-primary));
 }
 
-.hover\:cteditor-border-rose-500:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
+.hover\:cteditor-border-primary\/50:hover{
+  border-color: hsl(var(--cteditorf47ac10b-primary) / 0.5);
 }
 
 .hover\:cteditor-border-white:hover{
@@ -3348,6 +3396,14 @@ body .ai-chat-popup .ai-chat-input {
   background-color: hsl(var(--cteditorf47ac10b-destructive) / 0.9);
 }
 
+.hover\:cteditor-bg-foreground:hover{
+  background-color: hsl(var(--cteditorf47ac10b-foreground));
+}
+
+.hover\:cteditor-bg-foreground\/10:hover{
+  background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.1);
+}
+
 .hover\:cteditor-bg-foreground\/5:hover{
   background-color: hsl(var(--cteditorf47ac10b-foreground) / 0.05);
 }
@@ -3382,10 +3438,6 @@ body .ai-chat-popup .ai-chat-input {
   background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:cteditor-bg-muted\/50:hover{
-  background-color: hsl(var(--cteditorf47ac10b-muted) / 0.5);
-}
-
 .hover\:cteditor-bg-primary:hover{
   background-color: hsl(var(--cteditorf47ac10b-primary));
 }
@@ -3436,6 +3488,10 @@ body .ai-chat-popup .ai-chat-input {
   color: hsl(var(--cteditorf47ac10b-accent-foreground));
 }
 
+.hover\:cteditor-text-background:hover{
+  color: hsl(var(--cteditorf47ac10b-background));
+}
+
 .hover\:cteditor-text-blue-800:hover{
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity, 1));
@@ -3449,8 +3505,9 @@ body .ai-chat-popup .ai-chat-input {
   color: hsl(var(--cteditorf47ac10b-foreground));
 }
 
-.hover\:cteditor-text-foreground\/75:hover{
-  color: hsl(var(--cteditorf47ac10b-foreground) / 0.75);
+.hover\:cteditor-text-gray-600:hover{
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
 .hover\:cteditor-text-green-700:hover{
@@ -3466,6 +3523,11 @@ body .ai-chat-popup .ai-chat-input {
   color: hsl(var(--cteditorf47ac10b-primary-foreground));
 }
 
+.hover\:cteditor-text-red-800:hover{
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
+}
+
 .hover\:cteditor-text-white:hover{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -3604,6 +3666,10 @@ body .ai-chat-popup .ai-chat-input {
   cursor: not-allowed;
 }
 
+.disabled\:cteditor-opacity-30:disabled{
+  opacity: 0.3;
+}
+
 .disabled\:cteditor-opacity-50:disabled{
   opacity: 0.5;
 }
@@ -3820,30 +3886,16 @@ body .ai-chat-popup .ai-chat-input {
   animation-duration: 500ms;
 }
 
-.dark\:cteditor-border-amber-600:is(.cteditor-dark *){
-  --tw-border-opacity: 1;
-  border-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
-}
-
 .dark\:cteditor-border-amber-800:is(.cteditor-dark *){
   --tw-border-opacity: 1;
   border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
 }
 
-.dark\:cteditor-border-amber-800\/50:is(.cteditor-dark *){
-  border-color: rgb(146 64 14 / 0.5);
-}
-
 .dark\:cteditor-border-blue-800:is(.cteditor-dark *){
   --tw-border-opacity: 1;
   border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));
 }
 
-.dark\:cteditor-border-gray-600:is(.cteditor-dark *){
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
-}
-
 .dark\:cteditor-border-gray-700:is(.cteditor-dark *){
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
@@ -3859,49 +3911,44 @@ body .ai-chat-popup .ai-chat-input {
   border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
 }
 
-.dark\:cteditor-border-rose-600:is(.cteditor-dark *){
-  --tw-border-opacity: 1;
-  border-color: rgb(225 29 72 / var(--tw-border-opacity, 1));
-}
-
 .dark\:cteditor-border-yellow-800:is(.cteditor-dark *){
   --tw-border-opacity: 1;
   border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
 }
 
-.dark\:cteditor-bg-amber-400:is(.cteditor-dark *){
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
-}
-
-.dark\:cteditor-bg-amber-900\/20:is(.cteditor-dark *){
-  background-color: rgb(120 53 15 / 0.2);
-}
-
 .dark\:cteditor-bg-amber-900\/30:is(.cteditor-dark *){
   background-color: rgb(120 53 15 / 0.3);
 }
 
-.dark\:cteditor-bg-amber-950\/10:is(.cteditor-dark *){
-  background-color: rgb(69 26 3 / 0.1);
-}
-
 .dark\:cteditor-bg-amber-950\/50:is(.cteditor-dark *){
   background-color: rgb(69 26 3 / 0.5);
 }
 
+.dark\:cteditor-bg-blue-900\/30:is(.cteditor-dark *){
+  background-color: rgb(30 58 138 / 0.3);
+}
+
+.dark\:cteditor-bg-blue-950\/20:is(.cteditor-dark *){
+  background-color: rgb(23 37 84 / 0.2);
+}
+
 .dark\:cteditor-bg-blue-950\/50:is(.cteditor-dark *){
   background-color: rgb(23 37 84 / 0.5);
 }
 
-.dark\:cteditor-bg-gray-800\/50:is(.cteditor-dark *){
-  background-color: rgb(31 41 55 / 0.5);
+.dark\:cteditor-bg-gray-900:is(.cteditor-dark *){
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
 
 .dark\:cteditor-bg-gray-900\/50:is(.cteditor-dark *){
   background-color: rgb(17 24 39 / 0.5);
 }
 
+.dark\:cteditor-bg-green-900\/10:is(.cteditor-dark *){
+  background-color: rgb(20 83 45 / 0.1);
+}
+
 .dark\:cteditor-bg-green-950\/50:is(.cteditor-dark *){
   background-color: rgb(5 46 22 / 0.5);
 }
@@ -3910,6 +3957,14 @@ body .ai-chat-popup .ai-chat-input {
   background-color: hsl(var(--cteditorf47ac10b-input) / 0.05);
 }
 
+.dark\:cteditor-bg-red-900\/10:is(.cteditor-dark *){
+  background-color: rgb(127 29 29 / 0.1);
+}
+
+.dark\:cteditor-bg-red-900\/30:is(.cteditor-dark *){
+  background-color: rgb(127 29 29 / 0.3);
+}
+
 .dark\:cteditor-bg-red-950\/20:is(.cteditor-dark *){
   background-color: rgb(69 10 10 / 0.2);
 }
@@ -3918,11 +3973,6 @@ body .ai-chat-popup .ai-chat-input {
   background-color: rgb(69 10 10 / 0.5);
 }
 
-.dark\:cteditor-bg-rose-400:is(.cteditor-dark *){
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 113 133 / var(--tw-bg-opacity, 1));
-}
-
 .dark\:cteditor-bg-rose-900\/30:is(.cteditor-dark *){
   background-color: rgb(136 19 55 / 0.3);
 }
@@ -3931,21 +3981,6 @@ body .ai-chat-popup .ai-chat-input {
   background-color: rgb(66 32 6 / 0.5);
 }
 
-.dark\:cteditor-from-gray-900\/40:is(.cteditor-dark *){
-  --tw-gradient-from: rgb(17 24 39 / 0.4) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.dark\:cteditor-via-red-950\/20:is(.cteditor-dark *){
-  --tw-gradient-to: rgb(69 10 10 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), rgb(69 10 10 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.dark\:cteditor-to-gray-900\/40:is(.cteditor-dark *){
-  --tw-gradient-to: rgb(17 24 39 / 0.4) var(--tw-gradient-to-position);
-}
-
 .dark\:cteditor-text-amber-100:is(.cteditor-dark *){
   --tw-text-opacity: 1;
   color: rgb(254 243 199 / var(--tw-text-opacity, 1));
@@ -3956,11 +3991,6 @@ body .ai-chat-popup .ai-chat-input {
   color: rgb(253 230 138 / var(--tw-text-opacity, 1));
 }
 
-.dark\:cteditor-text-amber-300:is(.cteditor-dark *){
-  --tw-text-opacity: 1;
-  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
-}
-
 .dark\:cteditor-text-amber-400:is(.cteditor-dark *){
   --tw-text-opacity: 1;
   color: rgb(251 191 36 / var(--tw-text-opacity, 1));
@@ -3976,14 +4006,14 @@ body .ai-chat-popup .ai-chat-input {
   color: rgb(191 219 254 / var(--tw-text-opacity, 1));
 }
 
-.dark\:cteditor-text-blue-400:is(.cteditor-dark *){
+.dark\:cteditor-text-blue-300:is(.cteditor-dark *){
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
+  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
 }
 
-.dark\:cteditor-text-gray-100:is(.cteditor-dark *){
+.dark\:cteditor-text-blue-400:is(.cteditor-dark *){
   --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
+  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
 }
 
 .dark\:cteditor-text-gray-300:is(.cteditor-dark *){
@@ -4031,55 +4061,19 @@ body .ai-chat-popup .ai-chat-input {
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
 }
 
-.dark\:cteditor-text-rose-300:is(.cteditor-dark *){
-  --tw-text-opacity: 1;
-  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
-}
-
 .dark\:cteditor-text-rose-400:is(.cteditor-dark *){
   --tw-text-opacity: 1;
   color: rgb(251 113 133 / var(--tw-text-opacity, 1));
 }
 
-.dark\:cteditor-text-white:is(.cteditor-dark *){
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-
 .dark\:cteditor-text-yellow-400:is(.cteditor-dark *){
   --tw-text-opacity: 1;
   color: rgb(250 204 21 / var(--tw-text-opacity, 1));
 }
 
-.dark\:cteditor-ring-amber-600\/30:is(.cteditor-dark *){
-  --tw-ring-color: rgb(217 119 6 / 0.3);
-}
-
-.dark\:cteditor-ring-amber-900\/30:is(.cteditor-dark *){
-  --tw-ring-color: rgb(120 53 15 / 0.3);
-}
-
-.dark\:cteditor-ring-rose-600\/30:is(.cteditor-dark *){
-  --tw-ring-color: rgb(225 29 72 / 0.3);
-}
-
-.dark\:cteditor-ring-rose-900\/30:is(.cteditor-dark *){
-  --tw-ring-color: rgb(136 19 55 / 0.3);
-}
-
-.dark\:hover\:cteditor-border-amber-500:hover:is(.cteditor-dark *){
-  --tw-border-opacity: 1;
-  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
-}
-
-.dark\:hover\:cteditor-border-gray-500:hover:is(.cteditor-dark *){
+.dark\:hover\:cteditor-border-gray-600:hover:is(.cteditor-dark *){
   --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
-}
-
-.dark\:hover\:cteditor-border-rose-500:hover:is(.cteditor-dark *){
-  --tw-border-opacity: 1;
-  border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
+  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
 }
 
 .dark\:hover\:cteditor-bg-amber-900\/30:hover:is(.cteditor-dark *){
@@ -4116,10 +4110,6 @@ body .ai-chat-popup .ai-chat-input {
     width: 400px;
   }
 
-  .sm\:cteditor-max-w-lg{
-    max-width: 32rem;
-  }
-
   .sm\:cteditor-max-w-md{
     max-width: 28rem;
   }
@@ -4128,6 +4118,10 @@ body .ai-chat-popup .ai-chat-input {
     max-width: 24rem;
   }
 
+  .sm\:cteditor-max-w-xl{
+    max-width: 36rem;
+  }
+
   .sm\:cteditor-flex-row{
     flex-direction: row;
   }
@@ -4164,6 +4158,19 @@ body .ai-chat-popup .ai-chat-input {
   .md\:\!cteditor-bg-secondary{
     background-color: hsl(var(--cteditorf47ac10b-secondary)) !important;
   }
+
+  .md\:cteditor-text-sm{
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+.\[\&\>\.closeDialog\]\:cteditor-right-1\.5>.closeDialog{
+  right: 0.375rem;
+}
+
+.\[\&\>\.closeDialog\]\:cteditor-top-1\.5>.closeDialog{
+  top: 0.375rem;
 }
 
 .\[\&\>button\:hover\>span\]\:cteditor-bottom-full>button:hover>span{
@@ -4310,16 +4317,6 @@ body .ai-chat-popup .ai-chat-input {
   height: 1.5rem !important;
 }
 
-.\[\&\>svg\]\:\!cteditor-size-\[14px\]>svg{
-  width: 14px !important;
-  height: 14px !important;
-}
-
-.\[\&\>svg\]\:\!cteditor-size-\[18px\]>svg{
-  width: 18px !important;
-  height: 18px !important;
-}
-
 .\[\&\>svg\]\:cteditor-size-4>svg{
   width: 1rem;
   height: 1rem;
@@ -4363,7 +4360,10 @@ body .ai-chat-popup .ai-chat-input {
 
 .\[\&_svg\]\:cteditor-shrink-0 svg{
   flex-shrink: 0;
-}#ct-editor-f47ac10b {
+}
+
+
+#ct-editor-f47ac10b {
   /* Responsive container styles for constrained spaces */
   .editor-container {
     max-width: 100%;
@@ -5134,8 +5134,8 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .PlaygroundEditorTheme__code {
-    background-color: hsla(var(--cteditorf47ac10b-background) / 0.05);
-    color: hsla(var(--cteditorf47ac10b-background));
+    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.05);
+    color: hsla(var(--cteditorf47ac10b-foreground));
     font-family: Menlo, Consolas, Monaco, monospace;
     display: block;
     padding: 8px 8px 8px 52px;
@@ -5150,15 +5150,15 @@ body .ai-chat-popup .ai-chat-input {
       -o-tab-size: 2;
          tab-size: 2;
     border-radius: 6px;
-    border: 1px solid hsla(var(--cteditorf47ac10b-background) / 0.1);
+    border: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.1);
     transition: all 0.2s ease;
     cursor: pointer;
   }
 
   .PlaygroundEditorTheme__code:hover {
-    background-color: hsla(var(--cteditorf47ac10b-background) / 0.08);
-    border-color: hsla(var(--cteditorf47ac10b-background) / 0.2);
-    box-shadow: 0 2px 8px hsla(var(--cteditorf47ac10b-background) / 0.1);
+    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.08);
+    border-color: hsla(var(--cteditorf47ac10b-foreground) / 0.2);
+    box-shadow: 0 2px 8px hsla(var(--cteditorf47ac10b-foreground) / 0.1);
   }
 
   .PlaygroundEditorTheme__code:focus-within {
@@ -5167,7 +5167,7 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .PlaygroundEditorTheme__code.selected {
-    background-color: hsla(var(--cteditorf47ac10b-background) / 0.1);
+    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.1);
     border-color: hsla(var(--cteditorf47ac10b-primary));
     box-shadow: 0 0 0 2px hsla(var(--cteditorf47ac10b-primary) / 0.2);
   }
@@ -5175,14 +5175,14 @@ body .ai-chat-popup .ai-chat-input {
   .PlaygroundEditorTheme__code:before {
     content: attr(data-gutter);
     position: absolute;
-    background-color: hsla(var(--cteditorf47ac10b-background) / 0.08);
+    background-color: hsla(var(--cteditorf47ac10b-foreground) / 0.08);
     left: 0;
     top: 0;
-    border-right: 1px solid hsla(var(--cteditorf47ac10b-background) / 0.15);
+    border-right: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.15);
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
     padding: 8px;
-    color: hsla(var(--cteditorf47ac10b-background) / 0.6);
+    color: hsla(var(--cteditorf47ac10b-foreground) / 0.6);
     white-space: pre-wrap;
     text-align: right;
     min-width: 25px;
@@ -6265,118 +6265,78 @@ body .ai-chat-popup .ai-chat-input {
         border-radius: 2px !important;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
     }
-}/* Grammar Check Plugin Tooltip Styles */
+}/* ============================================
+   Grammar & Spell Check Plugin Styles
+   ============================================ */
 
-.grammar-tooltip {
-  animation: fadeIn 0.2s ease-in-out;
-  pointer-events: auto;
+/* CSS Custom Properties */
+:root {
+  --grammar-primary-color: #3b82f6;
+  --grammar-hover-opacity: 0.05;
+  --grammar-underline-height: 2px;
+  --grammar-underline-width: 8px;
+  --grammar-punctuation-width: 4px;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+/* ============================================
+   Error Elements Base Styles
+   ============================================ */
 
-/* Error highlighting styles - can be applied to text nodes */
-.spelling-error {
-  -webkit-text-decoration: underline wavy red;
-          text-decoration: underline wavy red;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 2px;
+/* Error word container */
+[data-grammar-error-type] {
+  position: relative;
   cursor: pointer;
 }
 
-.grammar-error {
-  -webkit-text-decoration: underline wavy blue;
-          text-decoration: underline wavy blue;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 2px;
-  cursor: pointer;
+/* Subtle hover highlight for error words */
+[data-grammar-error-type]:hover {
+  background-color: rgba(59, 130, 246, var(--grammar-hover-opacity));
 }
 
-/* Tooltip card enhancements */
-.grammar-tooltip .cteditor-shadow-xl {
-  box-shadow:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
-}
+/* ============================================
+   Underline Overlays
+   ============================================ */
 
-/* Suggestion button hover effects */
-.grammar-tooltip button:active {
-  transform: scale(0.98);
+/* Dynamically positioned underlines (created by JavaScript) */
+.grammar-error-underline {
+  position: absolute;
+  height: var(--grammar-underline-height);
+  background-repeat: repeat-x;
+  background-size: var(--grammar-underline-width) var(--grammar-underline-height);
+  pointer-events: none;
+  z-index: 1;
 }
 
-/* Error Panel - Compact notification bar */
-.grammar-error-panel {
-  position: relative;
-  max-width: -moz-fit-content;
-  max-width: fit-content;
-  margin-bottom: 8px;
-  z-index: 100;
-  animation: slideDown 0.3s ease-out;
+/* ============================================
+   Punctuation Error Indicator
+   ============================================ */
+
+/* Visual indicator for missing punctuation */
+[data-is-punctuation="true"]::after {
+  content: '';
+  display: inline-block;
+  width: var(--grammar-punctuation-width);
+  height: var(--grammar-underline-height);
+  margin-left: 1px;
+  vertical-align: baseline;
+  background: var(--grammar-primary-color);
 }
 
-@keyframes slideDown {
+/* ============================================
+   Animations
+   ============================================ */
+
+/* Fade-in animation for tooltips and menus */
+@keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateY(-10px);
-    max-height: 0;
+    transform: translateY(-8px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
-    max-height: 300px;
-  }
-}
-
-/* Error toggle button - when panel is hidden (inline version) */
-.grammar-error-toggle {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  margin-bottom: 8px;
-  background: #ef4444;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s;
-  font-size: 13px;
-}
-
-.grammar-error-toggle:hover {
-  background: #dc2626;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
-}
-
-.grammar-error-toggle span {
-  font-weight: 600;
-  font-size: 13px;
-}
-
-/* Compact panel styling */
-.grammar-error-panel .cteditor-max-h-48 {
-  max-height: 200px;
-}
-
-/* Responsive tooltip positioning */
-@media (max-width: 768px) {
-  .grammar-tooltip {
-    max-width: 90vw;
   }
-}
-#ct-editor-f47ac10b {
+}#ct-editor-f47ac10b {
   .floating-embed-menu {
     display: flex !important;
     /* flex-direction: column; */
@@ -6600,7 +6560,6 @@ body .ai-chat-popup .ai-chat-input {
 
 .floating-text-format-popup {
   display: flex;
-
   padding: 4px;
   vertical-align: middle;
   position: absolute;
@@ -6608,59 +6567,17 @@ body .ai-chat-popup .ai-chat-input {
   left: 0;
   z-index: 10;
   opacity: 0;
-
   border-radius: 8px;
   transition: opacity 0.5s;
 
   will-change: transform;
 }
 
-.floating-text-format-popup button.popup-item {
-  border: 0;
-  display: flex;
-  background: none;
-  border-radius: 10px;
-  padding: 2px;
-  cursor: pointer;
-  vertical-align: middle;
-}
 
-.floating-text-format-popup button.popup-item:disabled {
-  cursor: not-allowed;
-}
 
-.floating-text-format-popup button.popup-item.spaced {
-  margin-right: 2px;
-}
 
-.floating-text-format-popup button.popup-item i.format {
-  background-size: contain;
-  height: 18px;
-  width: 18px;
-  margin-top: 2px;
-  vertical-align: -0.25em;
-  display: flex;
-  opacity: 0.6;
-}
 
-.floating-text-format-popup button.popup-item:disabled i.format {
-  opacity: 0.2;
-}
-
-.floating-text-format-popup button.popup-item.active {
-}
 
-.floating-text-format-popup button.popup-item.active i {
-  opacity: 1;
-}
-
-.floating-text-format-popup .popup-item:hover:not([disabled]) {
-}
-
-/* AI Chat icon */
-.floating-text-format-popup button.popup-item i.format.ai-chat {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'%3E%3C/path%3E%3C/svg%3E");
-}
 
 .floating-text-format-popup select.popup-item {
   border: 0;
@@ -6682,30 +6599,7 @@ body .ai-chat-popup .ai-chat-input {
   width: 130px;
 }
 
-.floating-text-format-popup .popup-item .text {
-  display: flex;
-  line-height: 20px;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #777;
-  text-overflow: ellipsis;
-  width: 70px;
-  overflow: hidden;
-  height: 20px;
-  text-align: left;
-}
 
-.floating-text-format-popup .popup-item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
 
 .floating-text-format-popup i.chevron-down {
   margin-top: 3px;
@@ -6981,7 +6875,7 @@ body .ai-chat-popup .ai-chat-input {
 }
 
 /* Dropdown Menu Styles for Table Actions - Liquid Glass Design */
-.dropdown.table-drop {
+.dropdown.table-drop-old {
   z-index: 100;
   display: block;
   position: fixed;
@@ -7032,7 +6926,7 @@ body .ai-chat-popup .ai-chat-input {
 }
 
 /* Firefox scrollbar */
-.dropdown.table-drop {
+.dropdown.table-drop-old {
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
 }
@@ -7048,70 +6942,8 @@ body .ai-chat-popup .ai-chat-input {
   }
 }
 
-.dropdown.table-drop .item {
-  padding: 10px 12px;
-  cursor: pointer;
-  line-height: 18px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: flex-start;
-  border-radius: 8px;
-  border: 0;
-  width: 100%;
-  background-color: transparent;
-  color: hsl(var(--cteditorf47ac10b-popover-foreground));
-  transition: all 0.15s ease;
-  font-weight: 400;
-  white-space: nowrap;
-}
-
-.dropdown.table-drop .item:hover {
-  background-color: hsl(var(--cteditorf47ac10b-accent) / 0.8);
-  color: hsl(var(--cteditorf47ac10b-accent-foreground));
-  transform: translateX(2px);
-}
 
-.dropdown.table-drop .item:active {
-  transform: translateX(2px) scale(0.98);
-}
-
-.dropdown.table-drop .item .text {
-  display: flex;
-  line-height: 20px;
-  flex-grow: 1;
-  font-size: 14px;
-}
-
-.dropdown.table-drop .item .icon {
-  display: flex;
-  width: 18px;
-  height: 18px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  margin-right: 10px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-/* Divider styling */
-.dropdown.table-drop .cteditor-border-b {
-  border-color: hsl(var(--cteditorf47ac10b-border) / 0.2);
-  margin: 4px 0;
-}
-
-/* Custom row striping with CSS variable */
-.table-custom-striping tr:nth-child(even) {
-  background-color: var(--table-striping-color) !important;
-}
-
-.PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
-    background-color: var(--cteditorf47ac10b-muted-foreground);
-}/**
+/**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -7119,25 +6951,22 @@ body .ai-chat-popup .ai-chat-input {
  *
  */
 
-.color-picker-wrapper {
-  padding: 20px;
-}
 
 .color-picker-basic-color {
   display: flex;
-  flex-wrap: wrap;
   gap: 10px;
   margin: 0;
   padding: 0;
 }
 
 .color-picker-basic-color button {
-  border: 1px solid #ccc;
+  border: 1px solid rgba(204, 204, 204, 0.203);
   border-radius: 4px;
-  height: 16px;
-  width: 16px;
+height: auto;
+    width: 100%;
   cursor: pointer;
   list-style-type: none;
+  aspect-ratio:1;
 }
 
 .color-picker-basic-color button.active {
@@ -7198,10 +7027,10 @@ body .ai-chat-popup .ai-chat-input {
 }
 
 .color-picker-color {
-  border: 1px solid #ccc;
-  margin-top: 15px;
-  width: 100%;
-  height: 20px;
+  border: 1px solid rgba(204, 204, 204, 0.292); 
+  width:36px;
+  height: 36px;
+  border-radius:10px;
 }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -7216,7 +7045,7 @@ body .ai-chat-popup .ai-chat-input {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-bottom: 10px;
+ 
 }
 .Input__label {
   display: flex;
@@ -7236,6 +7065,8 @@ body .ai-chat-popup .ai-chat-input {
   font-size: 16px;
   border-radius: 5px;
   min-width: 0;
+  max-width:120px;
+  outline:none;
 }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -7337,8 +7168,8 @@ body .ai-chat-popup .ai-chat-input {
   .ImageNode__contentEditable {
     position: relative;
     width: 100%;
-    background: hsla(var(--cteditorf47ac10b-secondary) / 0.5);
-    border: 1px solid hsla(var(--cteditorf47ac10b-border) / 0.2);
+    background: hsla(var(--cteditorf47ac10b-foreground) / 0.1);
+    border: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.1);
     color: 1px solid hsla(var(--cteditorf47ac10b-foreground));
     border-radius: 6px;
     padding:4px 8px;
@@ -7352,8 +7183,8 @@ body .ai-chat-popup .ai-chat-input {
 
   .ImageNode__contentEditable:focus {
     background: hsla(var(--cteditorf47ac10b-secondary));
-    border-color: hsla(var(--cteditorf47ac10b-border) / 0.4);
-    box-shadow: 0 0 0 3px hsla(var(--cteditorf47ac10b-primary) / 0.1);
+    border-color: hsla(var(--cteditorf47ac10b-secondary) / 0.4);
+    box-shadow: 0 0 0 2px hsla(var(--cteditorf47ac10b-primary) / 0.1);
   }
 
   .ImageNode__contentEditable::-moz-placeholder {
@@ -7377,12 +7208,12 @@ body .ai-chat-popup .ai-chat-input {
     margin-top: 12px;
     margin-bottom: 16px;
     padding-top: 8px;
-    border-top: 1px solid hsla(var(--cteditorf47ac10b-border) / 0.2);
+    border-top: 1px solid hsla(var(--cteditorf47ac10b-foreground) / 0.2);
   }
 
   /* Signature caption editable area */
   .signature-caption-editable {
-    background: hsla(var(--cteditorf47ac10b-secondary) / 0.15);
+    background: hsla(var(--cteditorf47ac10b-foreground) / 0.15);
     border: none;
     border-radius: 4px;
     padding: 6px 12px;
@@ -7399,7 +7230,7 @@ body .ai-chat-popup .ai-chat-input {
   }
 
   .signature-caption-editable:focus {
-    background: hsla(var(--cteditorf47ac10b-secondary) / 0.3);
+    background: hsla(var(--cteditorf47ac10b-foreground) / 0.3);
     border-radius: 4px;
     color: hsl(var(--cteditorf47ac10b-foreground)) !important;
   }