/*
 * Custom styling for Lexxy editor content and agent output.
 *
 * The gem (lexxy-content.css) provides base styling for .lexxy-content using
 * :where() for low specificity. This file provides:
 *   1. Styling for .agent-output (not covered by gem)
 *   2. Optional overrides for smaller/denser heading sizes
 *
 * Note: Headings work via markdown shortcuts (# ## ###) or toolbar button cycling.
 */

/* Agent output uses same styling as lexxy-content */
.agent-output {
  /* Headings - smaller sizes for compact display */
  h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }

  h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }

  h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  h4, h5, h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  /* Paragraphs */
  p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
  }

  li > p {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Strong/Bold */
  strong {
    font-weight: 600;
  }

  /* Lists */
  ul, ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    list-style-position: outside;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    display: list-item;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    line-height: 1.6;
    padding-left: 0.25rem;
  }

  /* Nested lists */
  ul ul, ol ul {
    list-style-type: circle;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  ul ul ul, ol ul ul {
    list-style-type: square;
  }

  /* Links */
  a {
    color: #2563eb;
    text-decoration: underline;
    font-weight: 500;
  }

  a:hover {
    color: #1d4ed8;
  }

  /* Code */
  code {
    background-color: #f3f4f6;
    color: #dc2626;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
  }

  /* Blockquotes */
  blockquote {
    border-left: 4px solid #d1d5db;
    padding-left: 1rem;
    margin-left: 0;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    color: #6b7280;
    font-style: italic;
  }

  /* Horizontal Rule */
  hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* Tables */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  th {
    background-color: #f9fafb;
    font-weight: 600;
    text-align: left;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
  }

  td {
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
  }
}

/*
 * Lexxy editor - ensure proper auto-grow behavior
 * The wrapper with .lexxy-content class has the visible border.
 * lexxy-editor is the web component inside that wrapper.
 */

/* Base: wrapper should grow with content */
.lexxy-content:has(lexxy-editor) {
  display: flex;
  flex-direction: column;
  min-height: 120px;
}

.lexxy-content lexxy-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lexxy-content lexxy-editor .lexxy-editor__content {
  flex: 1;
  min-height: 80px;
}

/*
 * Notes form - constrain max height and add scroll
 * The border is on .lexxy-content, so that's what needs overflow handling
 */
#note-form .lexxy-content {
  max-height: 250px;
  overflow-y: auto;
}

#note-form .lexxy-content lexxy-editor .lexxy-editor__content {
  min-height: 60px;
}

/*
 * Optional: Override lexxy-content heading sizes for denser display.
 * These have higher specificity than the gem's :where() rules.
 * Comment out if you prefer the gem's default sizes.
 */
.lexxy-content {
  h1 {
    font-size: 1.25rem;
    font-weight: 600;
  }

  h2 {
    font-size: 1.125rem;
    font-weight: 600;
  }

  h3 {
    font-size: 1rem;
    font-weight: 600;
  }

  h4, h5, h6 {
    font-size: 0.9rem;
    font-weight: 600;
  }
}

/* Notes display - ensure long text wraps properly */
#notes-list .lexxy-content {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

#notes-list .lexxy-content p,
#notes-list .lexxy-content li {
  max-width: 100%;
  overflow-wrap: anywhere;
}