[data-component="markdown"] {
  /* Reset & Base Typography */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  color: var(--text-strong);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base); /* 14px */
  line-height: 160%;

  /* Spacing for flow */
  > *:first-child {
    margin-top: 0;
  }
  > *:last-child {
    margin-bottom: 0;
  }
  > [data-markdown-block]:first-child > *:first-child {
    margin-top: 0;
  }
  > [data-markdown-block]:last-child > *:last-child {
    margin-bottom: 0;
  }

  /* Headings: Same size, distinguished by color and spacing */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 14px;
    color: var(--text-strong);
    font-weight: var(--font-weight-medium);
    margin-top: 0px;
    margin-bottom: 24px;
    line-height: var(--line-height-large);
  }

  /* Emphasis & Strong: Neutral strong color */
  strong,
  b {
    color: var(--text-strong);
    font-weight: var(--font-weight-medium);
  }

  /* Paragraphs */
  p {
    margin-bottom: 12px;
  }

  /* Links */
  a {
    color: var(--text-interactive-base);
    text-decoration: none;
    font-weight: inherit;
  }

  a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* kilocode_change start — file-path links from markdown [text](path) */
  a.file-path-link {
    color: var(--syntax-string);
    font-family: var(--font-family-mono);
    font-feature-settings: var(--font-family-mono--font-feature-settings);
    font-weight: var(--font-weight-medium);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
  }

  a.file-path-link:hover {
    color: var(--text-interactive-base);
    text-decoration-style: solid;
  }
  /* kilocode_change end */

  /* Lists */
  ul,
  ol {
    margin-top: 8px;
    margin-bottom: 12px;
    margin-inline-start: 0; /* kilocode_change */
    padding-inline-start: 32px; /* kilocode_change */
    list-style-position: outside;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
    padding-inline-start: 2.25rem; /* kilocode_change */
  }

  li {
    margin-bottom: 8px;
  }

  li > p:first-child {
    display: inline;
    margin: 0;
  }

  li > p + p {
    display: block;
    margin-top: 0.5rem;
  }

  li::marker {
    color: var(--text-weak);
  }

  /* Nested lists spacing */
  li > ul,
  li > ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-inline-start: 1rem; /* Minimal indent for nesting only */  /* kilocode_change */
  }

  li > ol {
    padding-inline-start: 1.75rem; /* kilocode_change */
  }

  /* Blockquotes */
  blockquote {
    border-inline-start: 2px solid var(--border-weak-base); /* kilocode_change */
    margin: 1.5rem 0;
    padding-inline-start: 0.5rem; /* kilocode_change */
    color: var(--text-weak);
    font-style: normal;
  }

  /* Horizontal Rule - Invisible spacing only */
  hr {
    border: none;
    height: 0;
    margin: 40px 0;
  }

  .shiki {
    background: var(--color-background-stronger);
    color: var(--text-base);
    font-size: 13px;
    padding: 12px;
    border-radius: 6px;
    border: 0.5px solid var(--border-weak-base);
  }

  [data-component="markdown-code"] {
    position: relative;
  }

  [data-slot="markdown-copy-button"] {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1;

    &::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 4px);
      transform: translateX(-50%);
      z-index: 1000;

      max-width: 320px;
      border-radius: var(--radius-sm);
      background: var(--surface-float-base);
      color: var(--text-invert-strong);
      padding: 2px 8px;
      border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
      box-shadow: var(--shadow-md);

      pointer-events: none;
      white-space: nowrap;

      font-family: var(--font-family-sans);
      font-size: var(--font-size-small);
      font-style: normal;
      font-weight: var(--font-weight-medium);
      line-height: var(--line-height-large);
      letter-spacing: var(--letter-spacing-normal);

      opacity: 0;
      transition: opacity 0.15s ease;
    }
  }

  [data-slot="markdown-copy-button"]:hover::after,
  [data-slot="markdown-copy-button"]:focus-visible::after {
    opacity: 1;
  }

  [data-slot="markdown-copy-button"][data-variant="secondary"] {
    box-shadow: none;
    border: 1px solid var(--border-weak-base);
  }

  [data-slot="markdown-copy-button"][data-variant="secondary"] [data-slot="icon-svg"] {
    color: var(--icon-base);
  }

  [data-component="markdown-code"]:hover [data-slot="markdown-copy-button"] {
    opacity: 1;
  }

  [data-slot="markdown-copy-button"] [data-slot="check-icon"] {
    display: none;
  }

  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="copy-icon"] {
    display: none;
  }

  [data-slot="markdown-copy-button"][data-copied="true"] [data-slot="check-icon"] {
    display: inline-flex;
  }

  pre {
    margin-top: 12px;
    margin-bottom: 32px;
    overflow: auto;

    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  :not(pre) > code {
    font-family: var(--font-family-mono);
    font-feature-settings: var(--font-family-mono--font-feature-settings);
    color: var(--syntax-string);
    font-weight: var(--font-weight-medium);
    /* font-size: 13px; */

    /* padding: 2px 2px; */
    /* margin: 0 1.5px; */
    /* border-radius: 2px; */
    /* background: var(--surface-base); */
    /* box-shadow: 0 0 0 0.5px var(--border-weak-base); */

    /* kilocode_change start */
    &.file-link {
      cursor: pointer;
      text-decoration-line: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
      transition: color 0.15s ease;

      &:hover {
        color: var(--text-interactive-base);
        text-decoration-style: solid;
      }
    }

    /* A plan reference reads as a document, not a boxed chip: a small glyph in
       front of the path, keeping the same dotted-underline affordance every
       other validated file link already uses. No border, no badge, no fill. */
    &.plan-document-link::before {
      content: "";
      display: inline-block;
      width: 0.95em;
      height: 0.95em;
      margin-inline-end: 0.3em;
      vertical-align: -0.15em;
      background-color: currentColor;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-size: contain;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
    }
    /* kilocode_change end */
  }

  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: var(--font-size-base);
    display: block;
    overflow-x: auto;
  }

  th,
  td {
    /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
    border-bottom: 1px solid var(--border-weaker-base);
    padding: 12px;
    text-align: start; /* kilocode_change */
    vertical-align: top;
  }

  th {
    color: var(--text-strong);
    font-weight: var(--font-weight-medium);
    border-bottom: 1px solid var(--border-weak-base);
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1.5rem 0;
    display: block;
  }
}

[data-component="markdown"] a.external-link:hover > code {
  text-decoration: underline;
  text-underline-offset: 2px;
}
