/* CSS for justified text as default */
/* Apply justified text to all Flutter text elements */
flt-paragraph,
flt-span,
p,
div,
span {
  text-align: justify !important;
  text-justify: inter-word;
  line-height: 1.6;
  letter-spacing: 0.5px;
  word-spacing: 1px;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  /* Add emoji font support for colored emojis */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", system-ui, -apple-system, sans-serif;
}

/* Exclude headers from justification */
h1, h2, h3, h4, h5, h6,
flt-paragraph[aria-label*="heading"],
[role="heading"] {
  text-align: left !important;
}

/* Code blocks styling - clean default style */
pre, code,
flt-paragraph[style*="monospace"],
[style*="fontFamily: monospace"] {
  text-align: left !important;
  background-color: #f6f8fa !important;
  color: #24292e !important;
  padding: 12px !important;
  border-radius: 6px !important;
  border: 1px solid #e1e4e8 !important;
  margin: 16px 0 !important;
  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  overflow-x: auto !important;
  white-space: pre !important;
}

/* Inline code styling */
code:not(pre code),
span[style*="monospace"]:not(pre *) {
  background-color: #f6f8fa !important;
  color: #24292e !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace !important;
  font-size: 13px !important;
  display: inline !important;
}

/* Special styling for blockquotes */
blockquote,
flt-paragraph[style*="italic"] {
  text-align: justify !important;
  padding: 16px;
  border-left: 4px solid #2196f3;
  background-color: #f5f5f5;
  margin: 16px 0;
}

/* Custom highlight styling */
mark,
.highlight,
flt-paragraph mark,
flt-span mark,
p mark,
div mark,
span mark,
/* Also target any HTML mark elements that might be created */
[style*="background-color: #edf3f7"] {
  background-color: #edf3f7 !important;
  color: #000000 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-weight: 500 !important;
  border: none !important;
  display: inline !important;
  /* Add subtle transition for better UX */
  transition: all 0.2s ease !important;
}

/* Hover effect for highlights */
mark:hover,
.highlight:hover,
flt-paragraph mark:hover,
flt-span mark:hover,
p mark:hover,
div mark:hover,
span mark:hover {
  background-color: #d8e5f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure highlights work in code blocks */
code mark,
pre mark {
  background-color: #edf3f7 !important;
  color: #000000 !important;
  font-family: inherit !important;
}

/* Responsive text sizing */
@media (max-width: 768px) {
  flt-paragraph,
  flt-span,
  p, div, span {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  flt-paragraph,
  flt-span,
  p, div, span {
    font-size: 16px;
    line-height: 1.6;
  }
}

@media (min-width: 1201px) {
  flt-paragraph,
  flt-span,
  p, div, span {
    font-size: 16px;
    line-height: 1.6;
  }
}

/* Table centering and cell alignment - like images */
table {
  margin: 16px auto !important; /* Center horizontally with vertical spacing */
  border-collapse: collapse;
  max-width: 90%; /* Limit width for better readability */
  display: table; /* Ensure block-level centering */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow like images */
  border-radius: 8px; /* Rounded corners like images */
  overflow: hidden; /* Keep rounded corners clean */
}

table th, table td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 8px 12px !important;
  border: 1px solid #e5e7eb !important;
}

/* Header styling for better visual hierarchy */
table th {
  background-color: #ffffff !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

/* Alternate row colors for better readability */
table tr:nth-child(even) {
  background-color: #f9fafb !important;
}

table tr:hover {
  background-color: #f3f4f6 !important;
}

/* Make tables scroll horizontally on small screens */
.flutter_table_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Emoji Color Support - Enhanced */
/* Force emoji fonts at the highest specificity */
flt-glass-pane *,
flutter-view *,
body *,
html *,
* {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", "Quicksand", system-ui, -apple-system, sans-serif !important;
}

/* Override Flutter's default font rendering */
canvas + flt-glass-pane,
canvas + flt-glass-pane *,
flt-platform-view,
flt-platform-view *,
flt-semantics,
flt-semantics * {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important;
  font-variant-emoji: emoji !important;
  text-rendering: optimizeQuality !important;
}

/* Ensure emojis display in color with maximum specificity */
*,
*::before,
*::after {
  font-variant-emoji: emoji !important;
  font-feature-settings: "liga" on, "clig" on, "calt" on !important;
  -webkit-font-feature-settings: "liga" on, "clig" on, "calt" on !important;
  -moz-font-feature-settings: "liga" on, "clig" on, "calt" on !important;
}

/* Specific emoji styling for Flutter web elements */
flt-paragraph,
flt-span,
p,
div,
span,
flt-paragraph *,
flt-span *,
p *,
div *,
span * {
  font-family: "Quicksand", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", system-ui, -apple-system, sans-serif !important;
}

/* Force color emoji rendering for specific emoji characters */
.emoji,
[data-emoji],
span[style*="emoji"],
/* Unicode emoji ranges */
*:contains("😀"), *:contains("😁"), *:contains("😂"), *:contains("🤣"), *:contains("😃"), *:contains("😄"), *:contains("😅"), *:contains("😆"), *:contains("😉"), *:contains("😊"), *:contains("😋"), *:contains("😎"), *:contains("😍"), *:contains("😘"), *:contains("🥰"), *:contains("😗"), *:contains("😙"), *:contains("😚"), *:contains("🙂"), *:contains("🤗"), *:contains("🤩"), *:contains("🤔"), *:contains("🤨"), *:contains("😐"), *:contains("😑"), *:contains("😶"), *:contains("🙄"), *:contains("😏"), *:contains("😣"), *:contains("😥"), *:contains("😮"), *:contains("🤐"), *:contains("😯"), *:contains("😪"), *:contains("😫"), *:contains("🥱"), *:contains("😴"), *:contains("😌"), *:contains("😛"), *:contains("😜"), *:contains("😝"), *:contains("🤤"), *:contains("😒"), *:contains("😓"), *:contains("😔"), *:contains("😕"), *:contains("🙃"), *:contains("🤑"), *:contains("😲"), *:contains("☹️"), *:contains("🙁"), *:contains("😖"), *:contains("😞"), *:contains("😟"), *:contains("😤"), *:contains("😢"), *:contains("😭"), *:contains("😦"), *:contains("😧"), *:contains("😨"), *:contains("😩"), *:contains("🤯"), *:contains("😬"), *:contains("😰"), *:contains("😱"), *:contains("🥵"), *:contains("🥶"), *:contains("😳"), *:contains("🤪"), *:contains("😵"), *:contains("🥴"), *:contains("😠"), *:contains("😡"), *:contains("🤬"), *:contains("😷"), *:contains("🤒"), *:contains("🤕"), *:contains("🤢"), *:contains("🤮"), *:contains("🤧"), *:contains("😇"), *:contains("🥳"), *:contains("🥺"), *:contains("🤠"), *:contains("🤡"), *:contains("🤥"), *:contains("🤫"), *:contains("🤭"), *:contains("🧐"), *:contains("🤓"), *:contains("😈"), *:contains("👿"), *:contains("👹"), *:contains("👺"), *:contains("💀"), *:contains("☠️"), *:contains("👻"), *:contains("👽"), *:contains("🤖"), *:contains("💩"), *:contains("😺"), *:contains("😸"), *:contains("😹"), *:contains("😻"), *:contains("😼"), *:contains("😽"), *:contains("🙀"), *:contains("😿"), *:contains("😾") {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important;
  font-feature-settings: "liga", "clig", "calt";
  font-variant-emoji: emoji !important;
  text-rendering: optimizeQuality !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Clean text selection for code blocks */
pre::selection,
code::selection,
flt-paragraph[style*="monospace"]::selection,
[style*="fontFamily: monospace"]::selection {
  background-color: #3390ff !important;
  color: #ffffff !important;
}

pre::-moz-selection,
code::-moz-selection,
flt-paragraph[style*="monospace"]::-moz-selection,
[style*="fontFamily: monospace"]::-moz-selection {
  background-color: #3390ff !important;
  color: #ffffff !important;
}

/* Simple monospace font with emoji support */
code, pre {
  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace !important;
}

code .emoji,
pre .emoji,
code span,
pre span {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important;
}

/* Special handling for markdown content emojis */
.markdown-content *,
.justified-markdown * {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", "Quicksand", system-ui, -apple-system, sans-serif !important;
}

/* Aggressive Flutter-specific emoji fix */
flt-paragraph,
flt-span,
flt-dom-canvas,
flutter-view,
#flutterTarget,
[flt-renderer] {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols" !important;
}

/* Force color rendering for all text content */
[role="textbox"],
[contenteditable],
input[type="text"],
textarea,
.flt-text-editing {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", "Quicksand" !important;
  font-variant-emoji: emoji !important;
}

/* Override any Flutter font definitions with proper font-face declarations */
@font-face {
  font-family: 'EmojiFont';
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Noto Color Emoji'), local('Segoe UI Symbol'), local('Android Emoji');
  unicode-range: U+1F000-1F9FF, U+2600-26FF, U+2700-27BF, U+1F300-1F5FF, U+1F680-1F6FF, U+1F1E0-1F1FF;
  font-display: swap;
}

/* Apply emoji font to all elements with maximum priority */
body, html, *, *::before, *::after, 
flt-glass-pane, flt-glass-pane *, 
flutter-view, flutter-view *,
flt-paragraph, flt-span, flt-dom-canvas {
  font-family: 'EmojiFont', "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols", "Quicksand", system-ui !important;
  font-variant-emoji: emoji !important;
  text-rendering: optimizeQuality !important;
}

/* Force browsers to use color emoji variants */
.emoji-text, [contains-emoji] {
  font-variation-settings: 'COLR' 1;
  font-variant-emoji: emoji;
  font-feature-settings: 'liga' 1, 'clig' 1, 'calt' 1;
}