/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* style code blocks inside your message bubbles */
.message-content pre {
  background-color: #18181b; /* or your preferred dark bg */
  color: #f3f4f6;            /* very light, for contrast */
  overflow-x: auto;          /* allow horizontal scrolling */
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* Optionally, make sure <code> doesn't add another background */
.message-content code {
  background: none;
  color: inherit;
  padding: 0;
}

/* Minimal typography reset to counter Tailwind Preflight inside message bubbles */
.message-typography {
  /* # line height */
  line-height: 1.35;
  color: inherit;
  word-wrap: break-word;
}
/* Tighten leading and trim outer spacing in bubbles */
.message-typography > :first-child { margin-top: 0; }
.message-typography > :last-child { margin-bottom: 0; }

/* Headings */
.message-typography h1 { font-size: 1.875rem; line-height: 2.25rem; margin: 1.2em 0 0.6em; font-weight: 700; }
.message-typography h2 { font-size: 1.5rem; line-height: 2rem;   margin: 1.1em 0 0.55em; font-weight: 700; }
.message-typography h3 { font-size: 1.25rem; line-height: 1.75rem;margin: 1em 0 0.5em;  font-weight: 600; }
.message-typography h4 { font-size: 1.125rem; line-height: 1.75rem;margin: 0.9em 0 0.45em; font-weight: 600; }
.message-typography h5 { font-size: 1rem; line-height: 1.5rem;   margin: 0.8em 0 0.4em;  font-weight: 600; }
.message-typography h6 { font-size: 0.875rem; line-height: 1.25rem;margin: 0.8em 0 0.4em; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }

/* Paragraphs and spacing */
.message-typography p { margin: 0.6em 0; }

/* Lists: restore markers and spacing */
.message-typography ul,
.message-typography ol {
  margin: 0.8em 0 0.8em 1.25em;
  padding: 0;
}
.message-typography ul { list-style: disc outside; }
.message-typography ol { list-style: decimal outside; }
.message-typography li { margin: 0.25em 0; }
.message-typography li > ul,
.message-typography li > ol { margin-top: 0.25em; margin-bottom: 0.25em; }

/* Blockquotes */
.message-typography blockquote {
  border-left: 4px solid rgba(0,0,0,0.15);
  padding-left: 1em;
  margin: 1em 0;
  color: inherit;
  opacity: 0.9;
}

/* Horizontal rule */
.message-typography hr {
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 1.5em 0;
}

/* Tables */
.message-typography table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.message-typography th,
.message-typography td {
  border: 1px solid rgba(0,0,0,0.1);
  padding: 0.5em 0.75em;
}
.message-typography th { background: rgba(0,0,0,0.04); text-align: left; }

/* Links */
.message-typography a {
  color: #2563eb; /* blue-600 */
  text-decoration: underline;
}
.message-typography a:hover {
  color: #1d4ed8; /* blue-700 */
}

/* Images */
.message-typography img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin: 0.5em 0;
}

/* Code copy button styles */
.code-copy-btn {
  position: absolute;
  top: .5em;
  right: .5em;
  background: rgba(30,30,30,0.7);
  color: #fff;
  border: none;
  border-radius: 0.3em;
  padding: 0.3em 0.5em;
  cursor: pointer;
  z-index: 10;
  font-size: 1em;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.code-copy-btn:hover {
  background: #343d4a;
}
.code-copy-btn.copied {
  color: #7ee787;
  background: #232e16;
}
.message-content pre { position: relative; }

.code-block-wrapper {
  position: relative;
  display: block;
}

.code-block-wrapper pre {
  overflow-x: auto;
  margin: 0;
}


/* Mobile adjustments: slightly smaller text and tighter line-height */
@media (max-width: 640px) {
  .message-typography {
    font-size: 0.95rem;
    /* # line height */
    line-height: 1.25;
  }
  /* Scale headings down a touch to keep hierarchy readable on small screens */
  .message-typography h1 { font-size: 1.625rem; line-height: 2rem; }
  .message-typography h2 { font-size: 1.375rem; line-height: 1.875rem; }
  .message-typography h3 { font-size: 1.125rem; line-height: 1.625rem; }
}

/* Conversations index: hide metadata only when sidebar is open on small screens */
@media (max-width: 639px) {
  /* When the sidebar (#sidebar) is expanded (data-collapsed="false"),
     hide the conversations list metadata so the title gets space. */
  #category-sidebar[data-collapsed="false"] ~ .main-content .conv-meta, #sidebar[data-collapsed="false"] ~ .main-content .conv-meta {
    display: none !important;
  }
}

/* Chat scroll sentinel (CSP-safe; used to anchor auto-scroll without inline styles) */
.scroll-sentinel {
  display: block;
  height: 1px;
  width: 100%;
  pointer-events: none;
}

/* Subtle highlight for scrolled-to messages (non-flashy, a11y-friendly) */
@keyframes messageAttentionPulse {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  20%  { box-shadow: inset 0 0 0 3px rgba(59,130,246,0.35); }
  40%  { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  60%  { box-shadow: inset 0 0 0 3px rgba(59,130,246,0.35); }
  80%  { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}

/* Applies to the message bubble element; uses a pseudo-element so we don't disturb existing shadows/colors */
.message-highlight::after {
  content: "";
  position: absolute;
  inset: 0;                 /* draw the effect inside the bubble to avoid clipping with overflow */
  border-radius: inherit;
  pointer-events: none;     /* never block interactions */
  will-change: box-shadow;
  animation: messageAttentionPulse 7s ease-out 1; /* pulse duration */
}

@media (prefers-reduced-motion: reduce) {
  .message-highlight::after {
    animation-duration: 3s; /* animation duration */
  }
}

/* CSP-safe Marksmith color class mappings (used by marksmithed_without_inline_styles) */
.message-content .ms-bg-2b303b { background-color: #2b303b; }

/* Base text and palette */
.message-content .ms-color-24292e { color: #24292e; }
.message-content .ms-color-d73a49 { color: #d73a49; }
.message-content .ms-color-005cc5 { color: #005cc5; }
.message-content .ms-color-22863a { color: #22863a; }
.message-content .ms-color-6f42c1 { color: #6f42c1; }
.message-content .ms-color-e36209 { color: #e36209; }
.message-content .ms-color-b31d28 { color: #b31d28; }
.message-content .ms-color-96b5b4 { color: #96b5b4; }
.message-content .ms-color-a3be8c { color: #a3be8c; }
.message-content .ms-color-c0c5ce { color: #c0c5ce; }
.message-content .ms-color-65737e { color: #65737e; }

/* Additional Nord/Ocean-like palette seen in samples */
.message-content .ms-color-8fa1b3 { color: #8fa1b3; }
.message-content .ms-color-b48ead { color: #b48ead; }
.message-content .ms-color-ebcb8b { color: #ebcb8b; }
.message-content .ms-color-eff1f5 { color: #eff1f5; }
.message-content .ms-color-bf616a { color: #bf616a; }
.message-content .ms-color-d08770 { color: #d08770; }

/* Missing from palette: */
.message-content .ms-color-ab7967 { color: #ab7967; }