/* Markdown-specific styles to match Swing's MarkdownComponentData styling */
/* Scoped to .bubble to apply only to chat message content */

/* Shiki CSS variables for dark theme */
.theme-dark {
  --shiki-foreground: #9eacba;
  --shiki-background: #293134;
  --shiki-token-constant: #a2afbe;
  --shiki-token-string: #d66e05;
  --shiki-token-comment: #5d6a71;
  --shiki-token-keyword: #93c763;
  --shiki-token-parameter: #dcdcdc;
  --shiki-token-function: #9eacba;
  --shiki-token-string-expression: #d66e05;
  --shiki-token-punctuation: #9eacba;
  --shiki-token-link: #4ec9b0;
  --code-block-font-weight: initial;
  --ai-reasoning-header-foreground: #ffffff;
  --message-border-ai-reasoning: #8c52c9;
}

/* Shiki CSS variables for light theme */
.theme-light {
  --shiki-foreground: #131313;
  --shiki-background: #ffffff;
  --shiki-token-constant: #3a7d7e;
  --shiki-token-string: #d248ae;
  --shiki-token-comment: #438c2e;
  --shiki-token-keyword: #3200f9;
  --shiki-token-parameter: #24292e;
  --shiki-token-function: #131313;
  --shiki-token-string-expression: #d248ae;
  --shiki-token-punctuation: #131313;
  --shiki-token-link: #3200f9;
  --code-block-font-weight: 700;
  --ai-reasoning-header-foreground: #333333;
  --message-border-ai-reasoning: #8c52c9;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 18px;
  margin-bottom: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--chat-text);
}

h1 {
  font-size: 1.5em;
  border-bottom: 1px solid var(--border-color-hex);
  padding-bottom: 0.2em;
}

h2 {
  font-size: 1.3em;
  border-bottom: 1px solid var(--border-color-hex);
  padding-bottom: 0.2em;
}

h3 {
  font-size: 1.1em;
}

h4 {
  font-size: 1em;
}

a {
  color: var(--link-color-hex);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

p, ul, ol {
  margin-top: 0;
  margin-bottom: 12px;
}

ul, ol {
  padding-left: 2em;
}

li {
  margin: 0.25em 0;
}

li > p {
  margin-top: 0;
}

:not(pre) > code {
  font-family: "Fira Code Retina", monospace;
  padding: 0.2em 0.4em;
  margin: 0;
  color: var(--link-color-hex);
  border: 1px solid var(--border-color-hex);
  border-radius: .3em;
  font-size: 0.8em;
  font-weight: var(--code-block-font-weight);
}

/* Content lookup styling for inline code that exists in project (symbols and file paths) */
:not(pre) > code.content-exists {
  text-decoration: underline;
  cursor: pointer;
}

/* Symbol lookup styling for inline code that exists in project */
:not(pre) > code.symbol-exists {
  text-decoration: underline;
  cursor: pointer;
}

/* File path styling for inline code that represents existing files */
:not(pre) > code.file-path-exists {
  text-decoration: underline;
  cursor: pointer;
}

/* Hover effects for content that exists (file paths and symbols) */
:not(pre) > code.content-exists:hover {
  background-color: color-mix(in srgb, var(--link-color-hex) 10%, transparent);
  color: var(--link-color-hex);
  font-weight: bold;
}

/* Hover effects for file paths */
:not(pre) > code.file-path-exists:hover {
  background-color: color-mix(in srgb, var(--link-color-hex) 10%, transparent);
  color: var(--link-color-hex);
  font-weight: bold;
}

/* Hover effects only for exact matches (exclude partial matches) */
:not(pre) > code.symbol-exists:not(.partial-match):hover {
  background-color: color-mix(in srgb, var(--link-color-hex) 10%, transparent);
  color: var(--link-color-hex);
  font-weight: bold;
}

/* Partial match styling - remove base underline and cursor since we use span-based highlighting */
:not(pre) > code.symbol-exists.partial-match {
  text-decoration: none; /* Remove underline from entire code element */
  cursor: default; /* Remove pointer cursor from entire element */
  contain: style;
  color: var(--link-color-hex); /* Match the base symbol-exists color */
  font-weight: var(--code-block-font-weight);
}

:not(pre) > code.symbol-exists.partial-match::after {
  content: "◦";
  font-size: 0.7em;
  vertical-align: super;
  opacity: 0.6;
  margin-left: 1px;
}

/* Multi-range symbol highlighting - restore original underline style */
.symbol-highlight {
  text-decoration: underline;
  text-decoration-color: var(--link-color-hex);
  cursor: pointer; /* Make highlighted spans clickable */
}

/* File path highlighting - same styling as symbols */
.file-path-highlight {
  text-decoration: underline;
  text-decoration-color: var(--link-color-hex);
  cursor: pointer; /* Make highlighted spans clickable */
  color: var(--link-color-hex);
}

/* Hover effects for file path highlights */
.file-path-highlight:hover {
  background-color: color-mix(in srgb, var(--link-color-hex) 15%, transparent);
  color: var(--link-color-hex);
  font-weight: bold;
}

/* Enhanced partial match styling - use same styling as exact matches */
:not(pre) > code.symbol-exists.partial-match .symbol-highlight {
  text-decoration: underline;
  text-decoration-color: var(--link-color-hex);
  cursor: pointer; /* Ensure partial match highlights are clickable */
  color: var(--link-color-hex); /* Match exact match color */
  font-weight: var(--code-block-font-weight); /* Match exact match base font weight */
}

/* Ensure non-highlighted spans have no interactive hover effects but inherit base styling */
.symbol-non-highlight {
  cursor: default;
  font-weight: var(--code-block-font-weight);
}

.symbol-non-highlight:hover {
  cursor: default;
  /* Prevent any hover effects by maintaining current state */
  color: inherit;
  font-weight: inherit;
  background-color: inherit;
  text-shadow: inherit;
}

/* Hover effect only on highlighted spans within partial matches */
:not(pre) > code.symbol-exists.partial-match .symbol-highlight:hover {
  background-color: color-mix(in srgb, var(--link-color-hex) 15%, transparent);
  color: var(--link-color-hex);
  font-weight: bold;
}

pre > code {
  font-size: 0.9em;
  white-space: inherit;
  font-weight: var(--code-block-font-weight);
}

pre {
  padding: 15px;
  margin: 0;
  background-color: var(--shiki-background);
  white-space: pre;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: thin; /* Firefox */
  font-size: inherit; /* Ensure pre elements inherit font-size from parent */
}

/* WebKit scrollbar styling for horizontal scrollbars */
pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 8px;
}

pre::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

html.code-wrap-mode pre {
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

html.code-wrap-mode pre > code {
  white-space: inherit;
}

/* Edit block specific code block mode handling */
/* Edit blocks have a nested structure that needs more specific selectors */

/* Default scroll mode for edit blocks */
html:not(.code-wrap-mode) .edit-block-body .custom-code-block pre {
  white-space: pre;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
}

/* Wrap mode for edit blocks */
html.code-wrap-mode .edit-block-body .custom-code-block pre {
  white-space: pre-wrap;
  overflow-x: hidden;
  overflow-y: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Ensure edit block containers don't interfere with overflow behavior */
.edit-block-body .custom-code-block {
  overflow: visible;
}

.edit-block-body {
  overflow: visible;
}

/* Fix diff line backgrounds to extend full width in scroll mode */
html:not(.code-wrap-mode) .edit-block-body .custom-code-block pre code {
  /* Make code container expand to full content width */
  display: inline-block;
  min-width: 100%;
}

html:not(.code-wrap-mode) .edit-block-body .custom-code-block pre .diff-line {
  /* Reset diff line styling */
  display: block;
  padding-left: 0.8em;
  padding-right: 0.8em;
  position: relative;
  /* Extend background to full width using negative margins */
  margin-left: -0.8em;
  margin-right: -0.8em;
  padding-left: 1.6em;
  padding-right: 1.6em;
  /* Force all lines to be same width as code container */
  width: 100%;
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
  margin: 15px 0;
  width: 100%;
}

table, th, td {
  border: 1px solid var(--border-color-hex);
}

th {
  background-color: var(--code-block-background);
  padding: 8px;
  text-align: left;
  font-weight: 600;
}

td {
  padding: 8px;
}

tr:nth-child(even) {
  background-color: var(--message-background);
}

tr:hover {
  background-color: var(--chat-background);
}

/* Search highlighting classes to match Swing's search constants */
.search-highlight {
  background-color: #ffff66; /* Matches Colors.SEARCH */
  color: black;
}

.search-current {
  background-color: #ff9933; /* Matches Colors.CURRENT_SEARCH */
  color: black;
}

/* Override conflicting legacy styles from global.scss */
ul li:before {
  content: none;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

blockquote {
  display: block;
  margin-left: -0.5em;
  padding-left: 0.8em;
  border-left: 0.2em solid var(--code-highlight);
  background-color: transparent;
}

hr {
  border: none;
  width: auto;
  height: auto;
  text-align: center;
  margin: 0 auto;
}

hr::before {
  content: "•••";
  letter-spacing: 0.3em;
  color: var(--chat-text);
  font-size: 1.2em;
}
