/* Topic and Comment Post Containers */
.markdown-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100%;
}

.markdown-content {
  flex: 1;
  min-width: 0; /* Allow flex item to shrink below content size */
  border: 1px solid #fff;
  padding: 8px;
  background-color: #eef2f7;
  font:
    10px verdana,
    tahoma,
    arial,
    helvetica,
    sans-serif;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  min-height: 150px;
  /* Ensure markdown styles apply to new content containers */
  /* Apply all the content class styles */
  --color-fg-default: #24292f;
  --color-fg-muted: #57606a;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: var(--color-white);
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: #d8dee4;
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
  --base-text-weight-normal: 400;
  --base-text-weight-medium: 500;
  --base-text-weight-semibold: 600;
}

/* Apply markdown heading styles to content containers */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin-bottom: 16px;
  font-weight: var(--base-text-weight-semibold, 600);
  line-height: 1.25;
  position: relative;
  color: var(--color-fg-default);
}

.markdown-content h1 {
  margin-bottom: 0.67em;
  font-size: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border-muted);
}

.markdown-content h2 {
  font-size: 1.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border-muted);
}

.markdown-content h3 {
  font-size: 1.25em;
}

.markdown-content h4 {
  font-size: 1em;
}

.markdown-content h5 {
  font-size: 0.875em;
}

.markdown-content h6 {
  font-size: 0.85em;
  color: var(--color-fg-muted);
}

/* Apply other markdown styles */
.markdown-content pre {
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
  padding: 8px;
  margin: 16px 0;
  overflow: auto;
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
  line-height: 1.45;
  word-wrap: normal;
}

.markdown-content code,
.markdown-content tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  background-color: var(--color-neutral-muted);
  border-radius: 6px;
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
}

.markdown-content pre code,
.markdown-content pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.markdown-content blockquote {
  margin: 0 0 16px 0;
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: 0.25em solid var(--color-border-default);
}

.markdown-content p {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.6;
  color: var(--color-fg-default);
}

.markdown-content ul,
.markdown-content ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 2em;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}

/* Tables for markdown content */
.markdown-content table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: 100%; /* Fill container width */
  max-width: 100%;
  overflow-x: auto; /* Horizontal scroll only */
  margin: 16px 0;
}

.markdown-content table th {
  font-weight: var(--base-text-weight-semibold, 600);
}

.markdown-content table th,
.markdown-content table td {
  padding: 6px 13px;
  border: 1px solid var(--color-border-default);
  font-size: inherit;
}

.markdown-content table tr {
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}

.markdown-content table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}

.markdown-content table img {
  background-color: transparent;
}

/* Links */
.markdown-content a {
  background-color: transparent;
  color: var(--color-accent-fg);
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: break-word;
}

.markdown-content a:hover {
  text-decoration: underline;
}

/* Strong/Bold */
.markdown-content b,
.markdown-content strong {
  font-weight: var(--base-text-weight-semibold, 600);
}

/* Lists */
.markdown-content li {
  word-wrap: break-all;
}

.markdown-content li > p {
  margin-top: 16px;
}

.markdown-content li + li {
  margin-top: 0.25em;
}

/* Horizontal rules - thin style only */
.markdown-content hr {
  border: none;
  border-top: 1px solid var(--color-border-muted);
  margin: 12px 0;
  height: 1px;
}

/* Task Lists */
.markdown-content .task-list-item {
  list-style-type: none;
}

.markdown-content .task-list-item label {
  font-weight: var(--base-text-weight-normal, 400);
}

.markdown-content .task-list-item.enabled label {
  cursor: pointer;
}

.markdown-content .task-list-item + .task-list-item {
  margin-top: 4px;
}

.markdown-content .task-list-item .handle {
  display: none;
}

.markdown-content .task-list-item-checkbox {
  margin: 0 0.2em 0.25em -1.4em;
  vertical-align: middle;
}

.markdown-content .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
}

.markdown-content .contains-task-list {
  position: relative;
}

.markdown-content ul li input[type="checkbox"] {
  margin-right: 6px;
  transform: scale(1.1);
}

.markdown-content ul li input[type="checkbox"]:checked {
  accent-color: var(--color-accent-emphasis);
}

/* -------- Markdown Content Styling -------- */

/* CSS Custom Properties for Theming */
.content {
  --color-fg-default: #24292f;
  --color-fg-muted: #57606a;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: var(--color-white);
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: #d8dee4;
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
  --base-text-weight-normal: 400;
  --base-text-weight-medium: 500;
  --base-text-weight-semibold: 600;

  /* Merged from application.tailwind.css to avoid duplicate selector */
  border: 1px solid var(--color-white);
  padding: 8px;
  background-color: var(--content-bg-2);
  font:
    10px verdana,
    tahoma,
    arial,
    helvetica,
    sans-serif;
  max-width: 100%;
  overflow: auto;
}

/* Dark theme variables */
.content[data-theme="dark"] {
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #6e7681;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
}

/* Tables */
.content table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: 100%; /* Fill container width */
  max-width: 100%;
  overflow-x: auto; /* Horizontal scroll only */
  margin: 16px 0;
}

.content table th {
  font-weight: var(--base-text-weight-semibold, 600);
}

.content table th,
.content table td {
  padding: 6px 13px;
  border: 1px solid var(--color-border-default);
  font-size: inherit;
}

.content table tr {
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}

.content table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}

.content table img {
  background-color: transparent;
}

/* Headers with anchors */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  margin-bottom: 16px;
  font-weight: var(--base-text-weight-semibold, 600);
  line-height: 1.25;
  position: relative;
  color: var(--color-fg-default);
}

.content h1 {
  margin: 0.67em 0;
  font-size: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border-muted);
}
.content h2 {
  font-size: 1.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border-muted);
}
.content h3 {
  font-size: 1.25em;
}
.content h4 {
  font-size: 1em;
}
.content h5 {
  font-size: 0.875em;
}
.content h6 {
  font-size: 0.85em;
  color: var(--color-fg-muted);
}

.content h1 a.anchor,
.content h2 a.anchor,
.content h3 a.anchor,
.content h4 a.anchor,
.content h5 a.anchor,
.content h6 a.anchor {
  text-decoration: none;
  color: #ddd;
  margin-left: 0;
  padding-right: 4px;
  visibility: hidden;
}

.content h1:hover a.anchor,
.content h2:hover a.anchor,
.content h3:hover a.anchor,
.content h4:hover a.anchor,
.content h5:hover a.anchor,
.content h6:hover a.anchor {
  visibility: visible;
}

/* Code blocks */
.content pre {
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
  padding: 8px;
  margin: 16px 0;
  overflow: auto;
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
  line-height: 1.45;
  word-wrap: normal;
}

.content code,
.content tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  background-color: var(--color-neutral-muted);
  border-radius: 6px;
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
}

.content pre code,
.content pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

/* Math */
.content span[data-math-style="inline"] {
  font-family: "Times New Roman", "STIX Two Math", serif;
  font-style: italic;
  background-color: #f8f9fa;
  padding: 1px 3px;
  border-radius: 2px;
  border: 1px solid #e9ecef;
}

.content span[data-math-style="display"] {
  display: block;
  font-family: "Times New Roman", "STIX Two Math", serif;
  font-style: italic;
  text-align: center;
  background-color: #f8f9fa;
  padding: 8px;
  margin: 8px 0;
  border-radius: 4px;
  border: 1px solid #e9ecef;
}

/* Blockquotes */
.content blockquote {
  margin: 0 0 16px 0;
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: 0.25em solid var(--color-border-default);
}

.content blockquote > :first-child {
  margin-top: 0;
}

.content blockquote > :last-child {
  margin-bottom: 0;
}

/* Lists */
.content ul,
.content ol {
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 2em;
}

.content ol ol,
.content ul ol {
  list-style-type: lower-roman;
}

.content ul ul ol,
.content ul ol ol,
.content ol ul ol,
.content ol ol ol {
  list-style-type: lower-alpha;
}

.content ul ul,
.content ul ol,
.content ol ol,
.content ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.content li {
  word-wrap: break-all;
}

.content li > p {
  margin-top: 16px;
}

.content li + li {
  margin-top: 0.25em;
}

/* Links */
.content a {
  background-color: transparent;
  color: var(--color-accent-fg);
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: break-word;
}

.content a:hover {
  text-decoration: underline;
}

.content a:focus,
.content a:focus-visible {
  outline: 2px solid var(--color-accent-fg);
  outline-offset: -2px;
  box-shadow: none;
}

.content a:not([class]):focus,
.content a:not([class]):focus-visible {
  outline-offset: 0;
}

/* Paragraphs */
.content p {
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.6;
  color: var(--color-fg-default);
}

.content > *:first-child {
  margin-top: 0 !important;
}

.content > *:last-child {
  margin-bottom: 0 !important;
}

/* Horizontal rules */
.content hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border-bottom: 1px solid var(--color-border-muted);
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: var(--color-border-default);
  border: 0;
}

.content hr::before {
  display: table;
  content: "";
}

.content hr::after {
  display: table;
  clear: both;
  content: "";
}

/* Kbd elements */
.content kbd {
  display: inline-block;
  padding: 3px 5px;
  font:
    11px ui-monospace,
    SFMono-Regular,
    "SF Mono",
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}

/* Task Lists */
.content .task-list-item {
  list-style-type: none;
}

.content .task-list-item label {
  font-weight: var(--base-text-weight-normal, 400);
}

.content .task-list-item.enabled label {
  cursor: pointer;
}

.content .task-list-item + .task-list-item {
  margin-top: 4px;
}

.content .task-list-item .handle {
  display: none;
}

.content .task-list-item-checkbox {
  margin: 0 0.2em 0.25em -1.4em;
  vertical-align: middle;
}

.content .contains-task-list:dir(rtl) .task-list-item-checkbox {
  margin: 0 -1.6em 0.25em 0.2em;
}

.content .contains-task-list {
  position: relative;
}

.content ul li input[type="checkbox"] {
  margin-right: 6px;
  transform: scale(1.1);
}

.content ul li input[type="checkbox"]:checked {
  accent-color: var(--color-accent-emphasis);
}

/* Mark/Highlight */
.content mark {
  background-color: var(--color-attention-subtle);
  color: var(--color-fg-default);
}

/* Strong/Bold */
.content b,
.content strong {
  font-weight: var(--base-text-weight-semibold, 600);
}

/* -------- Responsive Images -------- */

/* Responsive Images in Content Areas */
.content img {
  max-width: 100%;
  height: auto;
  margin: 8px 0;
}

/* Responsive Images in Forum Thread Content */
.content-section-2 img {
  max-width: 100%;
  height: auto;
  margin: 4px 0;
}

/* -------- Markdown Styling for Comments and Quoted Content -------- */

/* Apply markdown styling to comment content areas */
.content-section-2 h1,
.content-section-2 h2,
.content-section-2 h3,
.content-section-2 h4,
.content-section-2 h5,
.content-section-2 h6 {
  margin: 8px 0 4px 0;
  position: relative;
}
.content-section-2 h1 {
  font-size: 12px;
  font-weight: semibold;
}
.content-section-2 h2 {
  font-size: 10px;
  font-weight: semibold;
}
.content-section-2 h3 {
  font-size: 10px;
  font-weight: semibold;
}
.content-section-2 h4 {
  font-size: 10px;
  font-weight: semibold;
}
.content-section-2 h5 {
  font-size: 8px;
  font-weight: semibold;
}
.content-section-2 h6 {
  font-size: 8px;
  font-weight: normal;
}

.content-section-2 pre {
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 3px;
  padding: 4px;
  margin: 4px 0;
  overflow-x: auto;
  font-family:
    "SFMono-Regular", "Monaco", "Inconsolata", "Liberation Mono", "Courier New",
    monospace;
  font-size: 8px;
  line-height: 1.2;
}

.content-section-2 code {
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 2px;
  padding: 1px 2px;
  font-family:
    "SFMono-Regular", "Monaco", "Inconsolata", "Liberation Mono", "Courier New",
    monospace;
  font-size: 8px;
}

.content-section-2 pre code {
  background: none;
  border: none;
  padding: 0;
}

.content-section-2 blockquote {
  border-left: 3px solid #dfe2e5;
  padding: 0 8px;
  margin: 4px 0;
  color: #6a737d;
  background-color: #f6f8fa;
  border-radius: 2px;
}

.content-section-2 ul,
.content-section-2 ol {
  margin: 4px 0;
  padding-left: 16px;
}

.content-section-2 li {
  margin: 1px 0;
  line-height: 1.2;
}

.content-section-2 a {
  color: #0366d6;
  text-decoration: underline;
  word-break: break-word;
  overflow-wrap: break-word;
}

.content-section-2 a:hover {
  color: #0366d6;
  text-decoration: none;
}

.content-section-2 p {
  margin: 4px 0;
  line-height: 1.2;
}

.content-section-2 hr {
  border: none;
  border-top: 1px solid #e1e4e8;
  margin: 8px 0;
}

/* Apply markdown styling to quoted content areas */
.indent h1,
.indent h2,
.indent h3,
.indent h4,
.indent h5,
.indent h6 {
  margin: 6px 0 2px 0;
  position: relative;
}
.indent h1 {
  font-size: 10px;
  font-weight: semibold;
}
.indent h2 {
  font-size: 10px;
  font-weight: semibold;
}
.indent h3 {
  font-size: 8px;
  font-weight: semibold;
}
.indent h4 {
  font-size: 8px;
  font-weight: semibold;
}
.indent h5 {
  font-size: 8px;
  font-weight: semibold;
}
.indent h6 {
  font-size: 8px;
  font-weight: normal;
}

.indent pre {
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 2px;
  padding: 3px;
  margin: 3px 0;
  overflow-x: auto;
  font-family:
    "SFMono-Regular", "Monaco", "Inconsolata", "Liberation Mono", "Courier New",
    monospace;
  font-size: 8px;
  line-height: 1.1;
}

.indent code {
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 1px;
  padding: 1px;
  font-family:
    "SFMono-Regular", "Monaco", "Inconsolata", "Liberation Mono", "Courier New",
    monospace;
  font-size: 8px;
}

.indent pre code {
  background: none;
  border: none;
  padding: 0;
}

.indent blockquote {
  border-left: 2px solid #dfe2e5;
  padding: 0 4px;
  margin: 3px 0;
  color: #6a737d;
  background-color: #f6f8fa;
  border-radius: 1px;
}

.indent ul,
.indent ol {
  margin: 3px 0;
  padding-left: 12px;
}

.indent li {
  margin: 1px 0;
  line-height: 1.1;
}

.indent a {
  color: #0366d6;
  text-decoration: underline;
  word-break: break-word;
  overflow-wrap: break-word;
}

.indent a:hover {
  color: #0366d6;
  text-decoration: none;
}

.indent p {
  margin: 3px 0;
  line-height: 1.1;
}

.indent hr {
  border: none;
  border-top: 1px solid #e1e4e8;
  margin: 4px 0;
}

/* -------- YouTube Video Embeds -------- */

/* Responsive video wrapper - maintains 16:9 aspect ratio */
.video-embed-wrapper {
  position: relative;
  max-width: 800px;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 16px 0; /* Spacing above and below */
  background-color: var(--color-black);
  border-radius: 4px;
}

.video-embed-wrapper iframe.video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 4px;
}

/* Smaller video embeds in quoted/nested content */
.indent .video-embed-wrapper {
  max-width: 100%;
  margin: 8px 0;
}

/* Mobile responsive video embeds */
@media (max-width: 768px) {
  .video-embed-wrapper {
    max-width: 100%;
    margin: 12px 0;
  }
}

/* -------- Improved Image Sizing -------- */

/* Main content images - limited to 512px max */
.content img,
.markdown-content img {
  max-width: 512px;
  width: 100%;
  height: auto;
  margin: 12px 0;
  display: block;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Images in tables */
.content table img,
.markdown-content table img {
  margin: 4px 0;
  box-shadow: none;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .markdown-container {
    flex-direction: column;
  }

  .markdown-content {
    width: 100%;
  }
}