/* ===========================
   LAMA Chat — Recommendations
   Работи с HTML-а от rest.php
   =========================== */

/* Блокът с карти вътре в балона */
.lama-msg.assistant .bubble .lama-cards {
  margin-top: 12px;
}

/* Карта — базов вид (не пипаме flex посоките от PHP) */
.lama-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  overflow: hidden;
}

/* Медия (снимка) */
.lama-card .lama-card-media {
  flex: 0 0 auto;
}
.lama-card .lama-card-media img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Съдържание */
.lama-card .lama-card-content {
  flex: 1 1 auto;
}

/* Заглавие */
.lama-card-title,
.lama-card-title a {
  display: block;
  margin: 0 0 6px 0;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  /* да не бута балона по ширина */
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.lama-card-title a:hover { text-decoration: underline; }

/* Описание (Excerpt) */
.lama-card-excerpt {
  color: #444;
  font-size: 14px;
  line-height: 1.45;
  margin: 6px 0 10px 0;
}

/* Бутон */
a.lama-card-btn {
  display: inline-block;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid #111;
  border-radius: 8px;
  background: #111;
  color: #fff;
  text-decoration: none;
}
a.lama-card-btn:hover { background: #000; }

/* „Minimal“ режим от админа — скрива само откъса */
.lama-display-minimal .lama-card-excerpt { display: none; }

/* ===========================
   Mobile поведение в чата
   — стекваме вертикално, за да не дърпа панела
   =========================== */
@media (max-width: 640px) {
  .lama-chat-body .lama-card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .lama-chat-body .lama-card .lama-card-media {
    margin: 0 0 8px 0;
  }
  .lama-chat-body .lama-card .lama-card-content {
    width: 100%;
  }
}

/* ===========================
   (По избор) Старият JSON рендер (.lama-recos / .lama-reco-card)
   Остави, само ако още ползваш chat-reco.js с JSON.
   Ако не — можеш да го пропуснеш.
   =========================== */
.lama-msg.assistant .bubble .lama-recos {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.lama-reco-card {
  display: flex;
  gap: 10px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}
.lama-reco-card .reco-img { flex: 0 0 72px; overflow: hidden; }
.lama-reco-card .reco-img img { display:block; width:72px; height:72px; object-fit:cover; }
.lama-reco-card .reco-body {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lama-reco-card h5 { margin: 0 0 4px 0; font-size: 14px; line-height: 1.3; }
.lama-reco-card h5 a { color: #111; text-decoration: none; }
.lama-reco-card h5 a:hover { text-decoration: underline; }
.lama-reco-card .reco-excerpt { font-size: 13px; color: #555; margin-bottom: 6px; }
.lama-reco-card .reco-btn a {
  display: inline-block;
  font-size: 13px;
  padding: 4px 8px;
  background: #0b7;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
.lama-reco-card .reco-btn a:hover { background: #0a6; }





/* В чата: карти една под друга (и на десктоп) */
.lama-msg.assistant .bubble .lama-cards {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.lama-msg.assistant .bubble .lama-card {
  display: flex;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Снимката винаги над заглавието в чата */
.lama-msg.assistant .bubble .lama-card .lama-card-media {
  margin: 0 0 8px 0 !important;
}

/* Текстовият блок да не раздува балона */
.lama-msg.assistant .bubble .lama-card .lama-card-content {
  width: 100%;
  min-width: 0;
  word-break: break-word;
}

/* Center вариантът да е ляво изравнен в чата */
.lama-msg.assistant .bubble .lama-card.lama-pos-center {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Дълги заглавия – да пренасят */
.lama-msg.assistant .bubble .lama-card .lama-card-title,
.lama-msg.assistant .bubble .lama-card .lama-card-title a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* По избор: ако имаш глобално правило, което центрира .lama-pos-center,
   го „обезвреди“ само вътре в чата */
.lama-msg.assistant .bubble .lama-pos-center {
  text-align: left !important;
  justify-content: flex-start !important;
}
@media (min-width: 1024px) {
  .lama-chat-body {
    height: 450px !important;
    max-height: 70vh !important; /* примерно */
  }
}