/*
 * 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.
 */

/* Markdown rendering in chat messages */
.chat-markdown > *:first-child { margin-top: 0; }
.chat-markdown > *:last-child { margin-bottom: 0; }

.chat-markdown p { margin: 0.5em 0; }

.chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 {
  font-weight: 600;
  margin: 0.75em 0 0.25em;
  line-height: 1.3;
}
.chat-markdown h1 { font-size: 1.25em; }
.chat-markdown h2 { font-size: 1.15em; }
.chat-markdown h3 { font-size: 1.05em; }

.chat-markdown ul, .chat-markdown ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.chat-markdown ul { list-style-type: disc; }
.chat-markdown ol { list-style-type: decimal; }
.chat-markdown li { margin: 0.15em 0; }

.chat-markdown code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.15em 0.35em;
  border-radius: 0.25em;
  font-size: 0.875em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.chat-markdown pre {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.75em 1em;
  border-radius: 0.5em;
  overflow-x: auto;
  margin: 0.5em 0;
}
.chat-markdown pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
}

.chat-markdown blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 0.75em;
  margin: 0.5em 0;
  color: #6b7280;
}

.chat-markdown table {
  border-collapse: collapse;
  margin: 0.5em 0;
  width: 100%;
  font-size: 0.9em;
}
.chat-markdown th, .chat-markdown td {
  border: 1px solid #d1d5db;
  padding: 0.35em 0.6em;
  text-align: left;
}
.chat-markdown th {
  background: rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

.chat-markdown hr {
  border: none;
  border-top: 1px solid #d1d5db;
  margin: 0.75em 0;
}

.chat-markdown a {
  color: #059669;
  text-decoration: underline;
}

.chat-markdown strong { font-weight: 600; }
.chat-markdown em { font-style: italic; }

/* Warm app surface polish for existing Rails partials. */
main .bg-white.rounded-2xl.shadow-sm,
main .bg-white.rounded-xl.shadow-sm,
main .bg-white.rounded-2xl.border,
main .bg-white.rounded-xl.border {
  border-color: rgba(231, 229, 228, 0.58);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.42), rgba(255, 255, 255, 0.9) 8rem),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 54px rgba(120, 113, 108, 0.085);
}

main .bg-white.rounded-2xl,
main .bg-white.rounded-xl {
  border-radius: 1.75rem;
}

main .bg-gray-50,
main .bg-stone-50 {
  background-color: rgba(250, 250, 249, 0.82);
}

main input,
main textarea,
main select {
  border-radius: 1rem;
}

main .text-gray-900 { color: #1c1917; }
main .text-gray-700 { color: #44403c; }
main .text-gray-600 { color: #57534e; }
main .text-gray-500 { color: #78716c; }
main .text-gray-400 { color: #a8a29e; }

main .border-gray-100 { border-color: #f5f5f4; }
main .border-gray-200 { border-color: #e7e5e4; }
main .border-gray-300 { border-color: #d6d3d1; }

main .font-mono:not(.tabular-nums) {
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.dark main .bg-white.rounded-2xl.shadow-sm,
.dark main .bg-white.rounded-xl.shadow-sm,
.dark main .bg-white.rounded-2xl.border,
.dark main .bg-white.rounded-xl.border {
  background:
    linear-gradient(180deg, rgba(6, 78, 59, 0.18), rgba(41, 37, 36, 0.88) 8rem),
    rgba(41, 37, 36, 0.86);
}

/* Dark mode form inputs — applies globally so we don't need to edit every template */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark textarea,
.dark select {
  background-color: #292524; /* stone-800 */
  border-color: #44403c; /* stone-700 */
  color: #fafaf9; /* stone-50 */
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: #78716c; /* stone-500 */
}
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* Dark mode for labels and form cards that use gray/white */
.dark .bg-white { background-color: #292524; }
.dark label { color: #d6d3d1; /* stone-300 */ }
.dark .text-gray-900 { color: #fafaf9; }
.dark .text-gray-700 { color: #d6d3d1; }
.dark .text-gray-500 { color: #a8a29e; }
.dark .text-gray-400 { color: #78716c; }
.dark .border-gray-300 { border-color: #44403c; }
.dark .border-gray-200 { border-color: #44403c; }
.dark .bg-gray-50 { background-color: #1c1917; }