/*
 * message-markdown-style.css
 *
 * שכבת עיצוב עדינה לתוכן Markdown בתוך הודעות הצ'אט. כרגע מטפלת בעיקר
 * בציטוטים (`>`), כדי שייראו כמו רכיב מעוצב ולא רק כקו ברירת-מחדל של prose.
 *
 * ───────────────────────────────────────────────────────────────────────────
 * קונבנציה: עיצוב אחד שחל גם בצ'אט החי וגם בעמודי שיתוף (/share/:shareId)
 * ───────────────────────────────────────────────────────────────────────────
 * ה-base לכל עיצוב של *תוכן הודעה* הוא `.message-content.markdown` — גוף ה-Markdown
 * עצמו. אותם רכיבי React של LibreChat (Text.tsx / MessageContent.tsx) מרנדרים אותו
 * עם המחלקות `markdown prose message-content` בשני ההקשרים, ולכן כלל אחד מספיק לשניהם.
 *
 * אל תשתמשו ב-`.message-render` כ-base לתוכן: זו עטיפת הודעה של הצ'אט החי בלבד
 * (count=0 בעמוד שיתוף), שמשמשת לוגיקה חיה (ניווט הודעות, הורדת Word, אווטרים).
 * שמרו אותה רק לעיצוב "כרום" חי-בלבד; לתוכן Markdown — תמיד `.message-content.markdown`.
 *
 * למה דווקא תרכובת של שתי מחלקות (0,2,0) ולא `.message-content` לבד (0,1,0)?
 * ל-LibreChat יש `.markdown blockquote` בספציפיות (0,1,1) ו-`.prose :where(blockquote)`
 * בספציפיות (0,1,0). תרכובת `.message-content.markdown` נותנת (0,2,0) שמנצחת את שתיהן
 * בלי `!important`. (ההזרקה ל-`</head>` נעשית פעם אחת לכל הדפים — ראו nginx.conf.)
 */

.message-content.markdown :where(blockquote):not(:where([class~='not-prose'] *)) {
  position: relative;
  margin: 1.15em 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(37, 64, 143, 0.16);
  border-left: 0;
  border-right: 0;
  border-inline-start: 4px solid var(--brand-medium, #25408f);
  border-radius: 0.85rem;
  background:
    linear-gradient(90deg, rgba(125, 210, 239, 0.08), rgba(37, 64, 143, 0.035)),
    rgba(37, 64, 143, 0.035);
  color: rgb(var(--text-primary, 22 33 63));
  font-style: italic;
  font-weight: 500;
  line-height: 1.75;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  quotes: none;
}

.message-content.markdown :where(blockquote p):not(:where([class~='not-prose'] *)) {
  margin: 0.35em 0;
}

.message-content.markdown :where(blockquote > :first-child):not(:where([class~='not-prose'] *)) {
  margin-top: 0;
}

.message-content.markdown :where(blockquote > :last-child):not(:where([class~='not-prose'] *)) {
  margin-bottom: 0;
}

.message-content.markdown :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before,
.message-content.markdown :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
  content: none;
}

.message-content.markdown :where(blockquote strong):not(:where([class~='not-prose'] *)) {
  color: inherit;
  font-weight: 700;
}

html[data-rtl="true"] .message-content.markdown :where(blockquote):not(:where([class~='not-prose'] *)) {
  text-align: right;
}

/* ───────────────────────────────────────────────────────────────────────────
 * מיכל "פשוט" — ציטוט-בתוך-ציטוט (`>>`)
 * ───────────────────────────────────────────────────────────────────────────
 * הסגנון שלמעלה (נטוי, פס-מותג עבה, רקע מדורג) נכון לציטוט קצר, אבל הופך
 * להדבקה ארוכה לקיר של טקסט נטוי. לכן יש מיכל שני: מסגרת דקה, רקע אטום ולבן,
 * וטקסט זקוף בעובי רגיל. בתיבת ההקלדה מפיקים אותו בתוחם `""` (שתי גרשיים)
 * במקום `"""` — ראו `messages/composer-quote-fence.js`.
 *
 * למה `>>` ולא מחלקה או תו-סימון: כך הטקסט הנשמר נשאר מרקדאון תקני לחלוטין,
 * וההבחנה נעשית ב-CSS טהור — בלי JS, בלי observer ובלי מרוץ מול re-render של
 * React. ‏`:only-child` מצמצם התנגשות עם ציטוט מקונן אמיתי: כלל זה תופס רק
 * ציטוט שכל תוכנו הוא ציטוט אחד, וזה בדיוק המבנה שההמרה מייצרת.
 *
 * ספציפיות: הבסיס למעלה הוא `.message-content.markdown :where(blockquote)`,
 * כלומר (0,2,0) — ‏`:where()` מאפס את תרומת הארגומנט. הכללים כאן מוסיפים
 * ‏`:has(...)` ולכן גוברים בלי `!important`.
 */

/* החיצוני משמש רק כתו-היכר, ולכן מנוטרל לחלוטין. */
.message-content.markdown blockquote:has(> blockquote:only-child) {
  margin: 1.15em 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-style: normal;
  font-weight: inherit;
}

/* הפנימי הוא המיכל הנראה. */
.message-content.markdown blockquote:has(> blockquote:only-child) > blockquote {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(37, 64, 143, 0.18);
  border-radius: 0.6rem;
  background: rgb(var(--presentation, 255 255 255));
  color: rgb(var(--text-primary, 22 33 63));
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  box-shadow: none;
}

.dark .message-content.markdown blockquote:has(> blockquote:only-child) > blockquote,
html[data-theme="dark"]
  .message-content.markdown
  blockquote:has(> blockquote:only-child)
  > blockquote {
  border-color: rgba(125, 210, 239, 0.22);
  background: rgb(var(--presentation, 47 47 47));
  color: rgb(var(--text-primary, 243 244 246));
}

.dark .message-content.markdown :where(blockquote):not(:where([class~='not-prose'] *)),
html[data-theme="dark"] .message-content.markdown :where(blockquote):not(:where([class~='not-prose'] *)) {
  border-color: rgba(125, 210, 239, 0.18);
  border-inline-start-color: #7dd2ef;
  background:
    linear-gradient(90deg, rgba(125, 210, 239, 0.10), rgba(37, 64, 143, 0.16)),
    rgba(15, 23, 42, 0.24);
  color: rgb(var(--text-primary, 243 244 246));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}