rayo-editor 0.0.1

package/dist/styles.css

@@ -0,0 +1,1150 @@
+/* ============================================================================
+   RAYO EDITOR - BUNDLED CSS STYLES
+   Extracted from BlogEditor component and related files
+   ============================================================================ */
+
+/* ============================================================================
+   CSS CUSTOM PROPERTIES (Variables)
+   ============================================================================ */
+
+:root {
+  /* ================== Basics ================== */
+  overflow-wrap: break-word;
+  text-size-adjust: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* ================== Colors - Gray Light (Light Mode) ================== */
+  --tt-gray-light-a-50: rgba(56, 56, 56, 0.04);
+  --tt-gray-light-a-100: rgba(15, 22, 36, 0.05);
+  --tt-gray-light-a-200: rgba(37, 39, 45, 0.1);
+  --tt-gray-light-a-300: rgba(47, 50, 55, 0.2);
+  --tt-gray-light-a-400: rgba(40, 44, 51, 0.42);
+  --tt-gray-light-a-500: rgba(52, 55, 60, 0.64);
+  --tt-gray-light-a-600: rgba(36, 39, 46, 0.78);
+  --tt-gray-light-a-700: rgba(35, 37, 42, 0.87);
+  --tt-gray-light-a-800: rgba(30, 32, 36, 0.95);
+  --tt-gray-light-a-900: rgba(29, 30, 32, 0.98);
+
+  --tt-gray-light-50: rgba(250, 250, 250, 1);
+  --tt-gray-light-100: rgba(244, 244, 245, 1);
+  --tt-gray-light-200: rgba(234, 234, 235, 1);
+  --tt-gray-light-300: rgba(213, 214, 215, 1);
+  --tt-gray-light-400: rgba(166, 167, 171, 1);
+  --tt-gray-light-500: rgba(125, 127, 130, 1);
+  --tt-gray-light-600: rgba(83, 86, 90, 1);
+  --tt-gray-light-700: rgba(64, 65, 69, 1);
+  --tt-gray-light-800: rgba(44, 45, 48, 1);
+  --tt-gray-light-900: rgba(34, 35, 37, 1);
+
+  /* ================== Colors - Gray Dark (Dark Mode) ================== */
+  --tt-gray-dark-a-50: rgba(232, 232, 253, 0.05);
+  --tt-gray-dark-a-100: rgba(231, 231, 243, 0.07);
+  --tt-gray-dark-a-200: rgba(238, 238, 246, 0.11);
+  --tt-gray-dark-a-300: rgba(239, 239, 245, 0.22);
+  --tt-gray-dark-a-400: rgba(244, 244, 255, 0.37);
+  --tt-gray-dark-a-500: rgba(236, 238, 253, 0.5);
+  --tt-gray-dark-a-600: rgba(247, 247, 253, 0.64);
+  --tt-gray-dark-a-700: rgba(251, 251, 254, 0.75);
+  --tt-gray-dark-a-800: rgba(253, 253, 253, 0.88);
+  --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);
+
+  --tt-gray-dark-50: rgba(25, 25, 26, 1);
+  --tt-gray-dark-100: rgba(32, 32, 34, 1);
+  --tt-gray-dark-200: rgba(45, 45, 47, 1);
+  --tt-gray-dark-300: rgba(70, 70, 73, 1);
+  --tt-gray-dark-400: rgba(99, 99, 105, 1);
+  --tt-gray-dark-500: rgba(124, 124, 131, 1);
+  --tt-gray-dark-600: rgba(163, 163, 168, 1);
+  --tt-gray-dark-700: rgba(192, 192, 195, 1);
+  --tt-gray-dark-800: rgba(224, 224, 225, 1);
+  --tt-gray-dark-900: rgba(245, 245, 245, 1);
+
+  /* ================== Brand Colors ================== */
+  --tt-brand-color-50: rgba(239, 238, 255, 1);
+  --tt-brand-color-100: rgba(222, 219, 255, 1);
+  --tt-brand-color-200: rgba(195, 189, 255, 1);
+  --tt-brand-color-300: rgba(157, 138, 255, 1);
+  --tt-brand-color-400: rgba(122, 82, 255, 1);
+  --tt-brand-color-500: rgba(98, 41, 255, 1);
+  --tt-brand-color-600: rgba(84, 0, 229, 1);
+  --tt-brand-color-700: rgba(75, 0, 204, 1);
+  --tt-brand-color-800: rgba(56, 0, 153, 1);
+  --tt-brand-color-900: rgba(43, 25, 102, 1);
+  --tt-brand-color-950: hsla(257, 100%, 9%, 1);
+
+  /* ================== Colors - Scale Variants ================== */
+  --tt-color-gray-inc-5: hsla(129, 100%, 97%, 1);
+  --tt-color-gray-inc-4: hsla(129, 100%, 92%, 1);
+  --tt-color-gray-inc-3: hsla(131, 100%, 86%, 1);
+  --tt-color-gray-inc-2: hsla(133, 98%, 78%, 1);
+  --tt-color-gray-inc-1: hsla(137, 99%, 70%, 1);
+  --tt-color-gray-base: hsla(147, 99%, 50%, 1);
+  --tt-color-gray-dec-1: hsla(147, 97%, 41%, 1);
+  --tt-color-gray-dec-2: hsla(146, 98%, 32%, 1);
+  --tt-color-gray-dec-3: hsla(146, 100%, 24%, 1);
+  --tt-color-gray-dec-4: hsla(144, 100%, 16%, 1);
+  --tt-color-gray-dec-5: hsla(140, 100%, 9%, 1);
+
+  --tt-color-yellow-inc-5: hsla(50, 100%, 97%, 1);
+  --tt-color-yellow-inc-4: hsla(50, 100%, 91%, 1);
+  --tt-color-yellow-inc-3: hsla(50, 100%, 84%, 1);
+  --tt-color-yellow-inc-2: hsla(50, 100%, 77%, 1);
+  --tt-color-yellow-inc-1: hsla(50, 100%, 68%, 1);
+  --tt-color-yellow-base: hsla(52, 100%, 50%, 1);
+  --tt-color-yellow-dec-1: hsla(52, 100%, 41%, 1);
+  --tt-color-yellow-dec-2: hsla(52, 100%, 32%, 1);
+  --tt-color-yellow-dec-3: hsla(52, 100%, 24%, 1);
+  --tt-color-yellow-dec-4: hsla(51, 100%, 16%, 1);
+  --tt-color-yellow-dec-5: hsla(50, 100%, 9%, 1);
+
+  --tt-color-red-inc-5: hsla(11, 100%, 96%, 1);
+  --tt-color-red-inc-4: hsla(11, 100%, 88%, 1);
+  --tt-color-red-inc-3: hsla(10, 100%, 80%, 1);
+  --tt-color-red-inc-2: hsla(9, 100%, 73%, 1);
+  --tt-color-red-inc-1: hsla(7, 100%, 64%, 1);
+  --tt-color-red-base: hsla(7, 100%, 54%, 1);
+  --tt-color-red-dec-1: hsla(7, 100%, 41%, 1);
+  --tt-color-red-dec-2: hsla(5, 100%, 32%, 1);
+  --tt-color-red-dec-3: hsla(4, 100%, 24%, 1);
+  --tt-color-red-dec-4: hsla(3, 100%, 16%, 1);
+  --tt-color-red-dec-5: hsla(1, 100%, 9%, 1);
+
+  /* ================== Basic Colors ================== */
+  --white: rgba(255, 255, 255, 1);
+  --black: rgba(14, 14, 17, 1);
+  --transparent: rgba(255, 255, 255, 0);
+
+  /* ================== Shadow Variables ================== */
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(17, 24, 39, 0.04),
+    0px 12px 24px 0px rgba(17, 24, 39, 0.04),
+    0px 6px 8px 0px rgba(17, 24, 39, 0.02),
+    0px 2px 3px 0px rgba(17, 24, 39, 0.02);
+
+  /* ================== Radius Variables ================== */
+  --tt-radius-xxs: 0.125rem;
+  --tt-radius-xs: 0.25rem;
+  --tt-radius-sm: 0.375rem;
+  --tt-radius-md: 0.5rem;
+  --tt-radius-lg: 0.75rem;
+  --tt-radius-xl: 1rem;
+
+  /* ================== Transition Variables ================== */
+  --tt-transition-duration-short: 0.1s;
+  --tt-transition-duration-default: 0.2s;
+  --tt-transition-duration-long: 0.64s;
+  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
+  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
+  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+  /* ================== Contrast Variables ================== */
+  --tt-accent-contrast: 8%;
+  --tt-destructive-contrast: 8%;
+  --tt-foreground-contrast: 8%;
+
+  /* ================== Global Colors - Light Mode ================== */
+  --tt-bg-color: var(--white);
+  --tt-border-color: var(--tt-gray-light-a-200);
+  --tt-border-color-tint: var(--tt-gray-light-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-light-100);
+  --tt-scrollbar-color: var(--tt-gray-light-a-200);
+  --tt-cursor-color: var(--tt-brand-color-500);
+  --tt-selection-color: rgba(157, 138, 255, 0.2);
+  --tt-card-bg-color: var(--white);
+  --tt-card-border-color: var(--tt-gray-light-a-100);
+
+  /* ================== Toolbar and UI Colors - Light Mode ================== */
+  --tt-toolbar-bg-color: var(--white, #ffffff);
+  --tt-toolbar-border-color: var(--tt-gray-light-a-100, #e5e7eb);
+  --tt-hover-bg-color: var(--tt-gray-light-100);
+  --tt-theme-text: var(--tt-gray-light-900);
+
+  /* ================== Text Colors ================== */
+  --tt-color-text-gray: hsl(45, 2%, 46%);
+  --tt-color-text-brown: hsl(19, 31%, 47%);
+  --tt-color-text-orange: hsl(30, 89%, 45%);
+  --tt-color-text-yellow: hsl(38, 62%, 49%);
+  --tt-color-text-purple: hsl(274, 32%, 54%);
+  --tt-color-text-pink: hsl(328, 49%, 53%);
+  --tt-color-text-red: hsl(2, 62%, 55%);
+
+  --tt-color-text-gray-contrast: hsla(39, 26%, 26%, 0.15);
+  --tt-color-text-brown-contrast: hsla(18, 43%, 69%, 0.35);
+  --tt-color-text-orange-contrast: hsla(24, 73%, 55%, 0.27);
+  --tt-color-text-yellow-contrast: hsla(44, 82%, 59%, 0.39);
+  --tt-color-text-purple-contrast: hsla(274, 37%, 64%, 0.27);
+  --tt-color-text-pink-contrast: hsla(331, 60%, 71%, 0.27);
+  --tt-color-text-red-contrast: hsla(8, 79%, 79%, 0.4);
+
+  /* ================== Highlight Colors ================== */
+  --tt-color-highlight-yellow: #fef9c3;
+  --tt-color-highlight-gray: #dcfce7;
+  --tt-color-highlight-gray-alt: #e0f2fe;
+  --tt-color-highlight-purple: #f3e8ff;
+  --tt-color-highlight-red: #ffe4e6;
+  --tt-color-highlight-brown: rgb(244, 238, 238);
+  --tt-color-highlight-orange: rgb(251, 236, 221);
+  --tt-color-highlight-pink: rgb(252, 241, 246);
+
+  --tt-color-highlight-yellow-contrast: #fbe604;
+  --tt-color-highlight-gray-contrast: #c7fad8;
+  --tt-color-highlight-gray-contrast-alt: #ceeafd;
+  --tt-color-highlight-purple-contrast: #e4ccff;
+  --tt-color-highlight-red-contrast: #ffccd0;
+  --tt-color-highlight-brown-contrast: rgba(210, 162, 141, 0.35);
+  --tt-color-highlight-orange-contrast: rgba(224, 124, 57, 0.27);
+  --tt-color-highlight-pink-contrast: rgba(225, 136, 179, 0.27);
+}
+
+/* ================== Dark Mode Variables ================== */
+.dark {
+  --tt-bg-color: var(--black);
+  --tt-border-color: var(--tt-gray-dark-a-200);
+  --tt-border-color-tint: var(--tt-gray-dark-a-100);
+  --tt-sidebar-bg-color: var(--tt-gray-dark-100);
+  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
+  --tt-cursor-color: var(--tt-brand-color-400);
+  --tt-selection-color: rgba(122, 82, 255, 0.2);
+  --tt-card-bg-color: var(--tt-gray-dark-50);
+  --tt-card-border-color: var(--tt-gray-dark-a-50);
+
+  --tt-toolbar-bg-color: var(--black);
+  --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
+  --tt-hover-bg-color: var(--tt-gray-dark-200);
+  --tt-theme-text: var(--tt-gray-dark-900);
+
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(0, 0, 0, 0.5),
+    0px 12px 24px 0px rgba(0, 0, 0, 0.24),
+    0px 6px 8px 0px rgba(0, 0, 0, 0.22),
+    0px 2px 3px 0px rgba(0, 0, 0, 0.12);
+
+  --tt-color-text-gray: hsl(0, 0%, 61%);
+  --tt-color-text-brown: hsl(18, 35%, 58%);
+  --tt-color-text-orange: hsl(25, 53%, 53%);
+  --tt-color-text-yellow: hsl(36, 54%, 55%);
+  --tt-color-text-purple: hsl(270, 55%, 62%);
+  --tt-color-text-pink: hsl(329, 57%, 58%);
+  --tt-color-text-red: hsl(1, 69%, 60%);
+
+  --tt-color-text-gray-contrast: hsla(0, 0%, 100%, 0.09);
+  --tt-color-text-brown-contrast: hsla(17, 45%, 50%, 0.25);
+  --tt-color-text-orange-contrast: hsla(27, 82%, 53%, 0.2);
+  --tt-color-text-yellow-contrast: hsla(35, 49%, 47%, 0.2);
+  --tt-color-text-purple-contrast: hsla(271, 56%, 60%, 0.18);
+  --tt-color-text-pink-contrast: hsla(331, 67%, 58%, 0.22);
+  --tt-color-text-red-contrast: hsla(0, 67%, 60%, 0.25);
+
+  --tt-color-highlight-yellow: #6b6524;
+  --tt-color-highlight-gray: #509568;
+  --tt-color-highlight-gray-alt: #6e92aa;
+  --tt-color-highlight-purple: #583e74;
+  --tt-color-highlight-red: #743e42;
+  --tt-color-highlight-brown: rgb(74, 50, 40);
+  --tt-color-highlight-orange: rgb(92, 59, 35);
+  --tt-color-highlight-pink: rgb(78, 44, 60);
+
+  --tt-color-highlight-yellow-contrast: #58531e;
+  --tt-color-highlight-gray-contrast: #47855d;
+  --tt-color-highlight-gray-contrast-alt: #5e86a1;
+  --tt-color-highlight-purple-contrast: #4c3564;
+  --tt-color-highlight-red-contrast: #643539;
+  --tt-color-highlight-brown-contrast: rgba(184, 101, 69, 0.25);
+  --tt-color-highlight-orange-contrast: rgba(233, 126, 37, 0.2);
+  --tt-color-highlight-pink-contrast: rgba(220, 76, 145, 0.22);
+}
+
+:root,
+:root *,
+:root ::before,
+:root ::after {
+  box-sizing: border-box;
+  transition: none var(--tt-transition-duration-default)
+    var(--tt-transition-easing-default);
+}
+
+/* ============================================================================
+   KEYFRAME ANIMATIONS
+   ============================================================================ */
+
+@keyframes flowingGradient {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes shimmer {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes gradient-move-ltr {
+  0% { background-position: 200% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes zoom {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromBottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================================
+   GRADIENT BORDER STYLES
+   ============================================================================ */
+
+.gradient-border-container {
+  position: relative;
+  border-radius: 16px;
+  padding: 3px;
+  overflow: hidden;
+  z-index: 0;
+  box-sizing: border-box;
+}
+
+.gradient-border-container::before {
+  content: '';
+  position: absolute;
+  top: -300%;
+  left: -300%;
+  width: 700%;
+  height: 700%;
+  background: conic-gradient(
+    from 0deg,
+    #F1E395,
+    #8500FF,
+    #5E33FF,
+    #FF5900,
+    #F1E395
+  );
+  animation: flowingGradient 6s linear infinite;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  will-change: transform;
+  z-index: -1;
+  transform-origin: center center;
+}
+
+.gradient-border-container-inner {
+  background: white;
+  border-radius: 14px;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.gradient-border-container.services-gradient {
+  border-radius: 12px;
+  margin-top: 5px;
+}
+
+.gradient-border-container.services-gradient::before {
+  content: '';
+  position: absolute;
+  top: -350%;
+  left: -400%;
+  width: 900%;
+  height: 900%;
+  background: conic-gradient(
+    from 0deg,
+    #F1E395,
+    #8500FF,
+    #5E33FF,
+    #FF5900,
+    #F1E395
+  );
+  animation: flowingGradient 6s linear infinite;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  will-change: transform;
+  z-index: -1;
+  transform-origin: center center;
+}
+
+.gradient-border-container.services-gradient .gradient-border-container-inner {
+  border-radius: 10px;
+  background: white;
+}
+
+/* Slim variant for compact gradient borders */
+.gradient-border-container-slim {
+  position: relative;
+  border-radius: 12px;
+  padding: 2px;
+  overflow: hidden;
+  z-index: 0;
+  box-sizing: border-box;
+}
+
+.gradient-border-container-slim::before {
+  content: '';
+  position: absolute;
+  top: -300%;
+  left: -300%;
+  width: 700%;
+  height: 700%;
+  background: conic-gradient(
+    from 0deg,
+    #F1E395,
+    #8500FF,
+    #5E33FF,
+    #FF5900,
+    #F1E395
+  );
+  animation: flowingGradient 6s linear infinite;
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  will-change: transform;
+  z-index: -1;
+  transform-origin: center center;
+}
+
+.gradient-border-container-slim-inner {
+  background: white;
+  border-radius: 11px;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.continuous-rotate {
+  animation: flowingGradient 3s linear infinite;
+  will-change: transform;
+}
+
+.animate-shimmer-pink {
+  animation: shimmer 1.5s ease-in-out infinite;
+  background-color: #F9D3DF;
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* ============================================================================
+   GRADIENT TEXT STYLES
+   ============================================================================ */
+
+.gradient-text-ltr {
+  background: linear-gradient(
+    90deg,
+    #DF5B45 0%,
+    #8451F3 50%,
+    #A597FF 75%,
+    #DF5B45 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: gradient-move-ltr 3s linear infinite;
+}
+
+/* ============================================================================
+   DIFF HIGHLIGHTING STYLES
+   ============================================================================ */
+
+/* Insertions - Content Added (Green) */
+ins,
+ins.diffins {
+  background-color: #D5F6E7 !important;
+  text-decoration: none !important;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-weight: 500;
+}
+
+ins:hover {
+  background-color: #D5F6E7 !important;
+  cursor: text;
+}
+
+/* Deletions - Content Removed (Red) */
+del,
+del.diffdel {
+  background-color: #FCE7E4 !important;
+  text-decoration: line-through !important;
+  color: #FCE7E4 !important;
+  text-decoration-color: #FCE7E4 !important;
+  text-decoration-thickness: 2px !important;
+  padding: 2px 4px;
+  border-radius: 3px;
+  font-weight: 600;
+  opacity: 1 !important;
+}
+
+del:hover {
+  background-color: #f99fae !important;
+  opacity: 1;
+  cursor: text;
+}
+
+/* Modifications - Changed content (Yellow) */
+ins.diffmod,
+del.diffmod {
+  background-color: #ffffcc !important;
+  color: black;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+/* Ensure visibility in TipTap/ProseMirror editor */
+.ProseMirror ins,
+.ProseMirror ins.diffins,
+.tiptap ins,
+.tiptap ins.diffins,
+.editor-content ins,
+div[contenteditable] ins {
+  background-color: #d4fcbc !important;
+  text-decoration: none !important;
+  color: black !important;
+  display: inline !important;
+  padding: 2px 4px !important;
+  border-radius: 3px !important;
+}
+
+.ProseMirror del,
+.ProseMirror del.diffdel,
+.tiptap del,
+.tiptap del.diffdel,
+.editor-content del,
+div[contenteditable] del {
+  background-color: #ff9999 !important;
+  text-decoration: line-through !important;
+  color: #ff9999 !important;
+  display: inline !important;
+  text-decoration-color: #ff9999 !important;
+  text-decoration-thickness: 2px !important;
+  padding: 2px 4px !important;
+  border-radius: 3px !important;
+  font-weight: 600 !important;
+}
+
+/* Special handling for headings with diffs */
+h1 ins, h2 ins, h3 ins, h4 ins, h5 ins, h6 ins,
+h1 del, h2 del, h3 del, h4 del, h5 del, h6 del {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+/* Nested elements handling */
+ins *:not(del):not(ins), del *:not(ins):not(del) {
+  background-color: inherit !important;
+  color: inherit !important;
+  text-decoration: inherit !important;
+}
+
+/* When del is nested inside ins (or vice versa) */
+ins del,
+ins del.diffdel,
+ins del[data-diff="deletion"] {
+  background-color: #FEE2E2 !important;
+  color: #991B1B !important;
+  text-decoration: line-through !important;
+  text-decoration-color: #991B1B !important;
+  text-decoration-thickness: 2px !important;
+  cursor: text !important;
+}
+
+del ins,
+del ins.diffins,
+del ins[data-diff="insertion"] {
+  background-color: #DCFCE7 !important;
+  color: #14532D !important;
+  text-decoration: none !important;
+  cursor: text !important;
+}
+
+/* Ultra specific selectors for all containers */
+* del,
+* del.diffdel,
+body del,
+div del,
+p del,
+span del,
+[class*="editor"] del,
+[class*="Editor"] del,
+[class*="tiptap"] del,
+[class*="TipTap"] del,
+[class*="prose"] del,
+[contenteditable="true"] del,
+[contenteditable="false"] del {
+  background-color: #ff9999 !important;
+  color: #ffffff !important;
+  text-decoration: line-through !important;
+  text-decoration-color: #ffffff !important;
+  text-decoration-thickness: 2px !important;
+  padding: 3px 6px !important;
+  border-radius: 4px !important;
+  font-weight: bold !important;
+  display: inline !important;
+  opacity: 1 !important;
+}
+
+* ins,
+* ins.diffins,
+body ins,
+div ins,
+p ins,
+span ins,
+[class*="editor"] ins,
+[class*="Editor"] ins,
+[class*="tiptap"] ins,
+[class*="TipTap"] ins,
+[class*="prose"] ins,
+[contenteditable="true"] ins,
+[contenteditable="false"] ins {
+  background-color: #66ff66 !important;
+  color: black !important;
+  text-decoration: none !important;
+  padding: 3px 6px !important;
+  border-radius: 4px !important;
+  font-weight: bold !important;
+  display: inline !important;
+  opacity: 1 !important;
+}
+
+/* ============================================================================
+   HIDE DIFFS - When version control / review panel is NOT open
+   ins (additions) → render as normal text (no highlight)
+   del (deletions) → hidden completely
+   ============================================================================ */
+
+.hide-diffs ins,
+.hide-diffs ins.diffins,
+.hide-diffs ins.diffmod,
+.hide-diffs ins[data-diff],
+.hide-diffs ins[data-diff="insertion"],
+.hide-diffs .ProseMirror ins,
+.hide-diffs .ProseMirror ins[data-diff="insertion"],
+.hide-diffs .tiptap ins,
+.hide-diffs .editor-content ins,
+.hide-diffs [contenteditable] ins,
+.hide-diffs p ins,
+.hide-diffs div ins,
+.hide-diffs span ins,
+.hide-diffs h1 ins,
+.hide-diffs h2 ins,
+.hide-diffs h3 ins,
+.hide-diffs h4 ins,
+.hide-diffs h5 ins,
+.hide-diffs h6 ins {
+  background-color: transparent !important;
+  color: inherit !important;
+  text-decoration: none !important;
+  padding: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  font-weight: inherit !important;
+  display: inline !important;
+  opacity: 1 !important;
+  cursor: text !important;
+}
+
+.hide-diffs ins *,
+.hide-diffs ins.diffins *,
+.hide-diffs ins[data-diff] * {
+  background-color: transparent !important;
+  color: inherit !important;
+  text-decoration: none !important;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.hide-diffs del,
+.hide-diffs del.diffdel,
+.hide-diffs del.diffmod,
+.hide-diffs del[data-diff],
+.hide-diffs del[data-diff="deletion"],
+.hide-diffs .ProseMirror del,
+.hide-diffs .ProseMirror del[data-diff="deletion"],
+.hide-diffs .tiptap del,
+.hide-diffs .editor-content del,
+.hide-diffs [contenteditable] del,
+.hide-diffs p del,
+.hide-diffs div del,
+.hide-diffs span del,
+.hide-diffs h1 del,
+.hide-diffs h2 del,
+.hide-diffs h3 del,
+.hide-diffs h4 del,
+.hide-diffs h5 del,
+.hide-diffs h6 del {
+  display: none !important;
+}
+
+.hide-diffs del *,
+.hide-diffs del.diffdel *,
+.hide-diffs del[data-diff] * {
+  display: none !important;
+}
+
+/* Parent-level comparison background */
+.ProseMirror :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
+  background-color: #D5F6E7 !important;
+  border-radius: 4px !important;
+  padding: 3px 6px !important;
+  display: inline !important;
+  box-decoration-break: clone !important;
+  -webkit-box-decoration-break: clone !important;
+}
+
+.ProseMirror :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :empty + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
+  background-color: #D5F6E7 !important;
+  border-radius: 4px !important;
+  padding: 3px 6px !important;
+  display: inline !important;
+  box-decoration-break: clone !important;
+  -webkit-box-decoration-break: clone !important;
+}
+
+.hide-diffs :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)),
+.hide-diffs :is(h1, h2, h3, h4, h5, h6):has(mark[data-color="#fecaca"]) + :empty + :is(h1, h2, h3, h4, h5, h6, p):has(a):not(:has(mark)) {
+  background-color: transparent !important;
+  display: block !important;
+}
+
+/* ============================================================================
+   BLOG EDITOR CUSTOM STYLES
+   ============================================================================ */
+
+.blog-editor-styled {
+  /* Base styling for blog editor */
+}
+
+.blog-editor-review-mode {
+  /* Styling when in review mode */
+}
+
+.blog-editor-streaming {
+  /* Styling when content is streaming */
+}
+
+.blog-editor-toolbar-slide-in {
+  /* Animation class for toolbar slide-in effect */
+}
+
+.blog-editor-focus-mode {
+  /* Styling for focus mode (hides toolbar and UI) */
+}
+
+/* ============================================================================
+   SIMPLE EDITOR CONTENT STYLES
+   ============================================================================ */
+
+/* Diff Mark Styling - Green background for insertions, Red strikethrough for deletions */
+.show-diffs .simple-editor-content ins,
+.show-diffs .simple-editor-content [data-diff-insertion],
+.show-diffs .simple-editor-content mark[data-color="#c7f0d6ff"],
+.show-diffs .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
+.show-diffs .simple-editor-content [style*="background-color:#c7f0d6ff"] {
+  background-color: #D5F6E7 !important;
+  border-radius: 4px !important;
+  text-decoration: none !important;
+  padding: 2px 0 !important;
+  color: #182234 !important;
+  font-weight: 400 !important;
+  display: inline !important;
+  box-decoration-break: clone !important;
+  -webkit-box-decoration-break: clone !important;
+  box-shadow: 4px 0 0 #D5F6E7, -4px 0 0 #D5F6E7 !important;
+}
+
+/* Green highlight inside links - remove box-shadow to prevent clipping */
+.show-diffs .simple-editor-content a mark[data-color="#c7f0d6ff"],
+.simple-editor-content a mark[data-color="#c7f0d6ff"],
+.review-active-hover .simple-editor-content a mark[data-color="#c7f0d6ff"] {
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  padding: 2px 0 !important;
+  position: relative !important;
+  z-index: 1 !important;
+}
+
+/* Green mark adjacent to links */
+.show-diffs .simple-editor-content a + mark[data-color="#c7f0d6ff"],
+.simple-editor-content a + mark[data-color="#c7f0d6ff"],
+.review-active-hover .simple-editor-content a + mark[data-color="#c7f0d6ff"] {
+  box-shadow: none !important;
+}
+
+/* Links containing red diff marks */
+.show-diffs .simple-editor-content a:has(> mark[data-color="#fecaca"]) {
+  text-decoration: none !important;
+  color: #EE877B !important;
+}
+
+.show-diffs .simple-editor-content a mark[data-color="#fecaca"] {
+  margin: 0 !important;
+}
+
+/* Red mark adjacent to links */
+.show-diffs .simple-editor-content a + mark[data-color="#fecaca"] {
+  margin: 0 !important;
+}
+
+.show-diffs .simple-editor-content del,
+.show-diffs .simple-editor-content [data-diff-deletion],
+.show-diffs .simple-editor-content mark[data-color="#fecaca"],
+.show-diffs .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
+.show-diffs .simple-editor-content [style*="background-color:#fecaca"] {
+  background-color: transparent !important;
+  text-decoration: line-through !important;
+  text-decoration-color: #EE877B !important;
+  color: #EE877B !important;
+  font-family: Inter !important;
+  font-weight: 400 !important;
+  font-size: inherit !important;
+  line-height: 140% !important;
+  letter-spacing: -0.02em !important;
+  display: inline !important;
+  margin: 0 4px !important;
+}
+
+/* HIDE DIFFS Styling - Show accepted state */
+.hide-diffs .simple-editor-content ins,
+.hide-diffs .simple-editor-content [data-diff-insertion],
+.hide-diffs .simple-editor-content mark[data-color="#c7f0d6ff"] {
+  background-color: transparent !important;
+  text-decoration: none !important;
+  color: inherit !important;
+  padding: 0 !important;
+}
+
+.hide-diffs .simple-editor-content del,
+.hide-diffs .simple-editor-content [data-diff-deletion],
+.hide-diffs .simple-editor-content mark[data-color="#fecaca"] {
+  display: none !important;
+}
+
+/* Override any conflicting highlight styles */
+.review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
+.simple-editor-content mark[data-color="#c7f0d6ff"],
+.simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
+.simple-editor-content [style*="background-color:#c7f0d6ff"] {
+  background-color: #D5F6E7 !important;
+  border-radius: 4px !important;
+  text-decoration: none !important;
+  padding: 2px 0 !important;
+  color: #182234 !important;
+  font-weight: 400 !important;
+  display: inline !important;
+  box-decoration-break: clone !important;
+  -webkit-box-decoration-break: clone !important;
+  box-shadow: 4px 0 0 #D5F6E7, -4px 0 0 #D5F6E7 !important;
+}
+
+.simple-editor-content del,
+.simple-editor-content [data-diff-deletion],
+.simple-editor-content mark[data-color="#fecaca"],
+.simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
+.simple-editor-content [style*="background-color:#fecaca"] {
+  background-color: transparent !important;
+  text-decoration: line-through !important;
+  text-decoration-color: #EE877B !important;
+  color: #EE877B !important;
+  font-family: Inter !important;
+  font-weight: 400 !important;
+  font-size: inherit !important;
+  line-height: 140% !important;
+  letter-spacing: -0.02em !important;
+  display: inline !important;
+  margin: 0 4px !important;
+}
+
+.review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
+.review-active-hover .simple-editor-content [style*="background-color: rgb(199, 240, 214)"] {
+  background-color: #D5F6E7 !important;
+  color: #182234 !important;
+  font-weight: 400 !important;
+}
+
+.review-active-hover .simple-editor-content mark[data-color="#fecaca"],
+.review-active-hover .simple-editor-content [style*="background-color: rgb(254, 202, 202)"] {
+  background-color: transparent !important;
+  color: #EE877B !important;
+  text-decoration: line-through !important;
+  text-decoration-color: #EE877B !important;
+}
+
+.simple-editor-content [style*="background-color: rgb(238, 135, 123)"] {
+  background-color: transparent !important;
+  text-decoration: line-through !important;
+  text-decoration-color: #EE877B !important;
+  color: #EE877B !important;
+  font-weight: 400 !important;
+  display: inline !important;
+}
+
+/* Elevate active/hovered diff marks above the dimming overlay */
+.review-pair-hover [data-active-review="true"]:not(table[data-pending-insert="true"]):not(table[data-pending-delete="true"]):not(table.pending-insert-table):not(table.pending-delete-table) {
+  position: relative;
+  z-index: 2 !important;
+  background-color: #FFFFFF !important;
+}
+
+/* Exclude cells inside pending tables from white background */
+.review-pair-hover table[data-pending-insert="true"] [data-active-review="true"],
+.review-pair-hover table[data-pending-delete="true"] [data-active-review="true"],
+.review-pair-hover table.pending-insert-table [data-active-review="true"],
+.review-pair-hover table.pending-delete-table [data-active-review="true"] {
+  background-color: inherit !important;
+}
+
+.review-pair-hover [data-active-review="true"] mark,
+.review-pair-hover [data-active-review="true"] p,
+.review-pair-hover [data-active-review="true"] span {
+  position: relative;
+  z-index: 2 !important;
+}
+
+/* Ensure green highlights stay green above overlay */
+.review-pair-hover [data-active-review="true"] mark[data-color="#c7f0d6ff"] {
+  background-color: #D5F6E7 !important;
+}
+
+/* Keep green table cells green even with data-active-review */
+.review-pair-hover table[data-pending-insert="true"] td,
+.review-pair-hover table[data-pending-insert="true"] th,
+.review-pair-hover table.pending-insert-table td,
+.review-pair-hover table.pending-insert-table th {
+  background-color: #D5F6E7 !important;
+}
+
+.review-pair-hover table[data-pending-insert="true"] th,
+.review-pair-hover table.pending-insert-table th {
+  background-color: #c2f0db !important;
+}
+
+/* Keep red table cells red even with data-active-review */
+.review-pair-hover table[data-pending-delete="true"] td,
+.review-pair-hover table[data-pending-delete="true"] th,
+.review-pair-hover table.pending-delete-table td,
+.review-pair-hover table.pending-delete-table th {
+  background-color: rgba(238, 135, 123, 0.2) !important;
+}
+
+.review-pair-hover table[data-pending-delete="true"] th,
+.review-pair-hover table.pending-delete-table th {
+  background-color: rgba(238, 135, 123, 0.35) !important;
+}
+
+/* Force visibility for highlight marks */
+.review-active-hover .simple-editor-content mark[data-color="#c7f0d6ff"],
+.review-active-hover .simple-editor-content [style*="background-color: rgb(199, 240, 214)"],
+.review-active-hover .simple-editor-content [style*="background-color:#c7f0d6ff"] {
+  color: #182234 !important;
+  font-weight: 400 !important;
+  opacity: 1 !important;
+  filter: none !important;
+  visibility: visible !important;
+}
+
+.review-active-hover .simple-editor-content mark[data-color="#fecaca"],
+.review-active-hover .simple-editor-content [style*="background-color: rgb(254, 202, 202)"],
+.review-active-hover .simple-editor-content [style*="background-color:#fecaca"] {
+  color: #EE877B !important;
+  opacity: 1 !important;
+  filter: none !important;
+  visibility: visible !important;
+}
+
+/* ============================================================================
+   BLOG SIMPLE EDITOR CONTAINER STYLES
+   ============================================================================ */
+
+.blog-simple-editor-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--tt-bg-color, #ffffff);
+  overflow: visible;
+}
+
+.blog-simple-editor-container .tiptap-toolbar {
+  overflow: visible !important;
+  position: relative;
+}
+
+.blog-simple-editor-container .tiptap-toolbar::-webkit-scrollbar {
+  display: none;
+}
+
+.blog-simple-editor-container .tiptap-toolbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+.blog-simple-editor-container .tiptap-toolbar.is-dragging {
+  scroll-behavior: auto;
+  cursor: grabbing !important;
+  user-select: none !important;
+}
+
+.blog-simple-editor-container .tiptap-toolbar.is-dragging button,
+.blog-simple-editor-container .tiptap-toolbar.is-dragging [role="button"],
+.blog-simple-editor-container .tiptap-toolbar.is-dragging .tiptap-button {
+  pointer-events: none !important;
+}
+
+.blog-simple-editor-container .tiptap-toolbar.is-dragging .tiptap-spacer {
+  pointer-events: auto !important;
+  cursor: grabbing !important;
+}
+
+.blog-simple-editor-container .tiptap-spacer {
+  min-width: 20px;
+}
+
+/* ============================================================================
+   RESPONSIVE UTILITIES
+   ============================================================================ */
+
+/* Root element sizing adjustments */
+:root {
+  font-size: 16px;
+}
+
+@media (max-width: 1400px) {
+  :root {
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 1200px) {
+  :root {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 992px) {
+  :root {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 768px) {
+  :root {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  :root {
+    font-size: 11px;
+  }
+}