/* TipTap Notion-like editor styles */
:root {
  /****************** 
  Basics
  ******************/
  overflow-wrap: break-word;
  text-size-adjust: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /******************
  Colors variables - Mapped to Mantine CSS variables
  ******************/
  /* Basic colors - mapped to Mantine */
  --white: var(--mantine-color-white, #fff);
  --black: var(--mantine-color-black, #000);
  --transparent: rgba(255, 255, 255, 0);
  /* Gray (light mode) - mapped to Mantine gray scale */
  --tt-gray-light-50: var(--mantine-color-gray-0, #f8f9fa);
  --tt-gray-light-100: var(--mantine-color-gray-1, #f1f3f5);
  --tt-gray-light-200: var(--mantine-color-gray-2, #e9ecef);
  --tt-gray-light-300: var(--mantine-color-gray-3, #dee2e6);
  --tt-gray-light-400: var(--mantine-color-gray-4, #ced4da);
  --tt-gray-light-500: var(--mantine-color-gray-5, #adb5bd);
  --tt-gray-light-600: var(--mantine-color-gray-6, #868e96);
  --tt-gray-light-700: var(--mantine-color-gray-7, #495057);
  --tt-gray-light-800: var(--mantine-color-gray-8, #343a40);
  --tt-gray-light-900: var(--mantine-color-gray-9, #212529);
  /* Gray alpha (light mode) - using Mantine gray with alpha */
  --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);
  /* Gray (dark mode) - mapped to Mantine dark scale */
  --tt-gray-dark-50: var(--mantine-color-dark-9, #141414);
  --tt-gray-dark-100: var(--mantine-color-dark-8, #1f1f1f);
  --tt-gray-dark-200: var(--mantine-color-dark-7, #242424);
  --tt-gray-dark-300: var(--mantine-color-dark-6, #2e2e2e);
  --tt-gray-dark-400: var(--mantine-color-dark-5, #3b3b3b);
  --tt-gray-dark-500: var(--mantine-color-dark-4, #424242);
  --tt-gray-dark-600: var(--mantine-color-dark-3, #696969);
  --tt-gray-dark-700: var(--mantine-color-dark-2, #828282);
  --tt-gray-dark-800: var(--mantine-color-dark-1, #b8b8b8);
  --tt-gray-dark-900: var(--mantine-color-dark-0, #C9C9C9);
  /* Gray alpha (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);
  /* Brand colors - mapped to Mantine primary color scale */
  --tt-brand-color-50: var(--mantine-primary-color-0, #e7f5ff);
  --tt-brand-color-100: var(--mantine-primary-color-1, #d0ebff);
  --tt-brand-color-200: var(--mantine-primary-color-2, #a5d8ff);
  --tt-brand-color-300: var(--mantine-primary-color-3, #74c0fc);
  --tt-brand-color-400: var(--mantine-primary-color-4, #4dabf7);
  --tt-brand-color-500: var(--mantine-primary-color-5, #339af0);
  --tt-brand-color-600: var(--mantine-primary-color-6, #228be6);
  --tt-brand-color-700: var(--mantine-primary-color-7, #1c7ed6);
  --tt-brand-color-800: var(--mantine-primary-color-8, #1971c2);
  --tt-brand-color-900: var(--mantine-primary-color-9, #1864ab);
  --tt-brand-color-950: var(--mantine-primary-color-9, #1864ab);
  /* Green - mapped to Mantine green scale */
  --tt-color-green-inc-5: var(--mantine-color-green-0, #ebfbee);
  --tt-color-green-inc-4: var(--mantine-color-green-1, #d3f9d8);
  --tt-color-green-inc-3: var(--mantine-color-green-2, #b2f2bb);
  --tt-color-green-inc-2: var(--mantine-color-green-3, #8ce99a);
  --tt-color-green-inc-1: var(--mantine-color-green-4, #69db7c);
  --tt-color-green-base: var(--mantine-color-green-5, #51cf66);
  --tt-color-green-dec-1: var(--mantine-color-green-6, #40c057);
  --tt-color-green-dec-2: var(--mantine-color-green-7, #37b24d);
  --tt-color-green-dec-3: var(--mantine-color-green-8, #2f9e44);
  --tt-color-green-dec-4: var(--mantine-color-green-9, #2b8a3e);
  --tt-color-green-dec-5: var(--mantine-color-green-9, #2b8a3e);
  /* Yellow - mapped to Mantine yellow scale */
  --tt-color-yellow-inc-5: var(--mantine-color-yellow-0, #fff9db);
  --tt-color-yellow-inc-4: var(--mantine-color-yellow-1, #fff3bf);
  --tt-color-yellow-inc-3: var(--mantine-color-yellow-2, #ffec99);
  --tt-color-yellow-inc-2: var(--mantine-color-yellow-3, #ffe066);
  --tt-color-yellow-inc-1: var(--mantine-color-yellow-4, #ffd43b);
  --tt-color-yellow-base: var(--mantine-color-yellow-5, #fcc419);
  --tt-color-yellow-dec-1: var(--mantine-color-yellow-6, #fab005);
  --tt-color-yellow-dec-2: var(--mantine-color-yellow-7, #f59f00);
  --tt-color-yellow-dec-3: var(--mantine-color-yellow-8, #f08c00);
  --tt-color-yellow-dec-4: var(--mantine-color-yellow-9, #e67700);
  --tt-color-yellow-dec-5: var(--mantine-color-yellow-9, #e67700);
  /* Red - mapped to Mantine red scale */
  --tt-color-red-inc-5: var(--mantine-color-red-0, #fff5f5);
  --tt-color-red-inc-4: var(--mantine-color-red-1, #ffe3e3);
  --tt-color-red-inc-3: var(--mantine-color-red-2, #ffc9c9);
  --tt-color-red-inc-2: var(--mantine-color-red-3, #ffa8a8);
  --tt-color-red-inc-1: var(--mantine-color-red-4, #ff8787);
  --tt-color-red-base: var(--mantine-color-red-5, #ff6b6b);
  --tt-color-red-dec-1: var(--mantine-color-red-6, #fa5252);
  --tt-color-red-dec-2: var(--mantine-color-red-7, #f03e3e);
  --tt-color-red-dec-3: var(--mantine-color-red-8, #e03131);
  --tt-color-red-dec-4: var(--mantine-color-red-9, #c92a2a);
  --tt-color-red-dec-5: var(--mantine-color-red-9, #c92a2a);
  /******************
  Shadow variables - mapped to Mantine
  ******************/
  --tt-shadow-elevated-xs: var(--mantine-shadow-xs);
  --tt-shadow-elevated-sm: var(--mantine-shadow-sm);
  --tt-shadow-elevated-md: var(--mantine-shadow-md);
  --tt-shadow-elevated-lg: var(--mantine-shadow-lg);
  --tt-shadow-elevated-xl: var(--mantine-shadow-xl);
  /**************************************************
  Radius variables - mapped to Mantine
  **************************************************/
  --tt-radius-xxs: var(--mantine-radius-xs, 0.125rem);
  --tt-radius-xs: var(--mantine-radius-xs, 0.125rem);
  --tt-radius-sm: var(--mantine-radius-sm, 0.25rem);
  --tt-radius-md: var(--mantine-radius-md, 0.5rem);
  --tt-radius-lg: var(--mantine-radius-lg, 1rem);
  --tt-radius-xl: var(--mantine-radius-xl, 2rem);
  /************************************************** 
       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%;
}
:root,
:root *,
:root ::before,
:root ::after {
  box-sizing: border-box;
}
/* Scope TipTap transitions to ProseMirror editors only */
.tiptap.ProseMirror,
.tiptap.ProseMirror *,
.tiptap.ProseMirror ::before,
.tiptap.ProseMirror ::after {
  transition: none var(--tt-transition-duration-default) var(--tt-transition-easing-default);
}
:root {
  /**************************************************
      Global colors
  **************************************************/
  /* Global colors - Light mode */
  /* Mantine integration: use Mantine vars with Tiptap fallbacks */
  --tt-bg-color: var(--mantine-color-body, var(--white));
  --tt-border-color: var(--mantine-color-gray-3, var(--tt-gray-light-a-200));
  --tt-border-color-tint: var(--mantine-color-gray-2, var(--tt-gray-light-a-100));
  --tt-sidebar-bg-color: var(--mantine-color-gray-1, var(--tt-gray-light-100));
  --tt-scrollbar-color: var(--tt-gray-light-a-200);
  --tt-cursor-color: var(--mantine-color-primary-filled, var(--tt-brand-color-500));
  --tt-selection-color: var(--mantine-color-primary-light, rgba(157, 138, 255, 0.2));
  --tt-card-bg-color: var(--mantine-color-body, var(--white));
  --tt-card-border-color: var(--mantine-color-gray-2, var(--tt-gray-light-a-100));
}
/* Global colors - Dark mode */
/* Dual selector for both Mantine and legacy .dark class */
[data-mantine-color-scheme=dark],
.dark {
  --tt-bg-color: var(--mantine-color-body, var(--black));
  --tt-border-color: var(--mantine-color-dark-4, var(--tt-gray-dark-a-200));
  --tt-border-color-tint: var(--mantine-color-dark-5, var(--tt-gray-dark-a-100));
  --tt-sidebar-bg-color: var(--mantine-color-dark-6, var(--tt-gray-dark-100));
  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
  --tt-cursor-color: var(--mantine-color-primary-filled, var(--tt-brand-color-400));
  --tt-selection-color: var(--mantine-color-primary-light, rgba(122, 82, 255, 0.2));
  --tt-card-bg-color: var(--mantine-color-dark-7, var(--tt-gray-dark-50));
  --tt-card-border-color: var(--mantine-color-dark-5, var(--tt-gray-dark-a-50));
}
/* Text colors */
:root {
  --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-green: hsl(148, 32%, 39%);
  --tt-color-text-blue: hsl(202, 54%, 43%);
  --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-green-contrast: hsla(126, 29%, 60%, 0.27);
  --tt-color-text-blue-contrast: hsla(202, 54%, 59%, 0.27);
  --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);
}
[data-mantine-color-scheme=dark],
.dark {
  --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-green: hsl(145, 32%, 47%);
  --tt-color-text-blue: hsl(202, 64%, 52%);
  --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-green-contrast: hsla(151, 55%, 39%, 0.2);
  --tt-color-text-blue-contrast: hsla(202, 54%, 43%, 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);
}
/* Highlight colors */
:root {
  --tt-color-highlight-yellow: #fef9c3;
  --tt-color-highlight-green: #dcfce7;
  --tt-color-highlight-blue: #e0f2fe;
  --tt-color-highlight-purple: #f3e8ff;
  --tt-color-highlight-red: #ffe4e6;
  --tt-color-highlight-gray: rgb(248, 248, 247);
  --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-green-contrast: #c7fad8;
  --tt-color-highlight-blue-contrast: #ceeafd;
  --tt-color-highlight-purple-contrast: #e4ccff;
  --tt-color-highlight-red-contrast: #ffccd0;
  --tt-color-highlight-gray-contrast: rgba(84, 72, 49, 0.15);
  --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);
}
[data-mantine-color-scheme=dark],
.dark {
  --tt-color-highlight-yellow: #6b6524;
  --tt-color-highlight-green: #509568;
  --tt-color-highlight-blue: #6e92aa;
  --tt-color-highlight-purple: #583e74;
  --tt-color-highlight-red: #743e42;
  --tt-color-highlight-gray: rgb(47, 47, 47);
  --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-green-contrast: #47855d;
  --tt-color-highlight-blue-contrast: #5e86a1;
  --tt-color-highlight-purple-contrast: #4c3564;
  --tt-color-highlight-red-contrast: #643539;
  --tt-color-highlight-gray-contrast: rgba(255, 255, 255, 0.094);
  --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);
}
@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);
  }
}
/* Streamdown styles - commented out as Tailwind is not configured/detected */
/* @source "../node_modules/streamdown/dist/*.js"; */
body {
	margin: 0;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--mantine-color-body);
	color: var(--mantine-color-text);
}
code {
	font-family:
		source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
html,
body {
	height: 100%;
}
/*
 * Bridge TipTap CSS variables to Mantine theme for dark mode compatibility.
 * TipTap uses `.dark` class, Mantine uses `data-mantine-color-scheme="dark"`.
 */
[data-mantine-color-scheme="dark"] {
	--tt-bg-color: var(--mantine-color-dark-7, var(--black));
	--tt-border-color: var(--mantine-color-dark-4, var(--tt-gray-dark-a-200));
	--tt-border-color-tint: var(--mantine-color-dark-5, var(--tt-gray-dark-a-100));
	--tt-sidebar-bg-color: var(--mantine-color-dark-6, var(--tt-gray-dark-100));
	--tt-card-bg-color: var(--mantine-color-dark-6, var(--tt-gray-dark-50));
	--tt-card-border-color: var(--mantine-color-dark-5, var(--tt-gray-dark-a-50));

	/* Also set the TipTap dark mode variables */
	--tt-gray-light-a-50: var(--tt-gray-dark-a-50);
	--tt-gray-light-a-100: var(--tt-gray-dark-a-100);
	--tt-gray-light-a-200: var(--tt-gray-dark-a-200);
	--tt-gray-light-a-300: var(--tt-gray-dark-a-300);
	--tt-gray-light-a-400: var(--tt-gray-dark-a-400);
	--tt-gray-light-a-500: var(--tt-gray-dark-a-500);
	--tt-gray-light-a-600: var(--tt-gray-dark-a-600);
	--tt-gray-light-a-700: var(--tt-gray-dark-a-700);
	--tt-gray-light-a-800: var(--tt-gray-dark-a-800);
	--tt-gray-light-a-900: var(--tt-gray-dark-a-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);
}
/* Fix Mantine ActionIcon disabled state in dark mode — removes opaque black background */
[data-mantine-color-scheme="dark"] .flo-toolbar-icon[data-disabled] {
	background-color: transparent;
}