/**
 * Lore Contact — Chat + Mon Compte CSS  v1.3.2
 * Valores extraídos de ConversationChat.tsx, MonCompte.tsx, ProposedCartCard.tsx
 * y index.css del proyecto React (Lovable).
 * Sin aproximaciones — conversiones exactas.
 * @package LoreContact
 */

/* ── Design tokens ──────────────────────────────────────────────────────── */
.lc-mc-wrap, .lc-chat, #lc-mc-modal {
  --lc-bg:           hsl(40, 30%, 97%);
  --lc-card:         hsl(40, 25%, 95%);
  --lc-fg:           hsl(150, 20%, 15%);
  --lc-muted:        hsl(40, 15%, 92%);
  --lc-muted-fg:     hsl(150, 10%, 45%);
  --lc-border:       hsl(40, 20%, 88%);
  --lc-primary:      hsl(179, 35%, 67%);
  --lc-primary-fg:   hsl(0, 0%, 100%);
  --lc-conseil:      hsl(345, 95%, 44%);
  --lc-conseil-hv:   hsl(345, 95%, 38%);
  --lc-conseil-fg:   hsl(0, 0%, 100%);
  --lc-destructive:  hsl(0, 84%, 60%);
  --lc-radius:       0.5rem;
  --lc-font-sans:    "DM Sans", sans-serif;
  --lc-font-display: "Playfair Display", serif;
}

/* ── Animaciones ────────────────────────────────────────────────────────── */
@keyframes lc-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes lc-spin {
  to { transform: rotate(360deg); }
}
@keyframes lc-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MON COMPTE — SECTION "MES CONSEILS"
   React: MyConsultationsSection en MonCompte.tsx
   ══════════════════════════════════════════════════════════════════════════ */

/* CollapsibleSection header — React: !bg-conseil border-conseil */
.lc-mc-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: var(--lc-conseil) !important;
  color: var(--lc-conseil-fg) !important;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--lc-conseil) !important;
  margin-bottom: 0 !important;
}
.lc-mc-header-title,
.lc-mc-header-bar h2,
.lc-mc-header-bar .lc-mc-header-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  font-family: var(--lc-font-sans) !important; /* FIX [QA-06]: DM Sans en lugar de Playfair */
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}
/* Force white on ALL children of the header bar */
.lc-mc-header-bar, .lc-mc-header-bar * {
  color: #fff !important;
}
/* Exception: the unread pill needs conseil color text */
.lc-mc-header-bar .lc-mc-unread-pill {
  color: var(--lc-conseil) !important;
}
/* Constrain icon size */
.lc-mc-header-title svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  flex-shrink: 0 !important;
}

/* Pulsing green dot — React: animate-ping + green-400 */
.lc-mc-live-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}
.lc-mc-live-dot::before {
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background-color: #4ade80;
  opacity: 0.75;
  animation: lc-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.lc-mc-live-dot::after {
  content: '';
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background-color: #22c55e;
  position: relative;
  z-index: 1;
}

/* Unread badge in header — React: bg-white text-conseil text-[10px] */
.lc-mc-unread-pill {
  background-color: #fff !important;
  color: var(--lc-conseil) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 9999px !important;
  line-height: 1.2 !important;
}

/* Body container */
.lc-mc-body {
  border: 1px solid hsl(40, 20%, 80%) !important;
  border-top: none !important;
  border-radius: 0 0 0.75rem 0.75rem !important;
  padding: 0.75rem !important;
  background-color: hsl(40, 25%, 97%) !important;   /* fondo ligeramente más oscuro */
  margin-bottom: 1.5rem !important;
}

/* ── "Nouvelle conversation" button
   React: variant="outline" size="sm" w-full gap-2 mb-1 ── */
.lc-mc-btn-new {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  padding: 0.375rem 0.75rem !important;
  height: auto !important;
  min-height: 0 !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius) !important;
  background-color: transparent !important;
  color: var(--lc-fg) !important;
  font-family: var(--lc-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.15s, border-color 0.15s !important;
  margin-bottom: 0.5rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.lc-mc-btn-new:hover {
  background-color: var(--lc-muted) !important;
  border-color: var(--lc-muted-fg) !important;
}
.lc-mc-btn-new svg {
  width: 1rem !important; height: 1rem !important; flex-shrink: 0;
}

/* ── New conversation form ── */
.lc-mc-new-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius);
  background-color: var(--lc-muted);
  margin-bottom: 0.75rem;
  animation: lc-fade-in 0.2s ease-out;
}
.lc-mc-new-form label {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--lc-fg) !important;
  display: block !important;
  margin-bottom: 0 !important;
}
.lc-mc-new-form textarea {
  width: 100% !important;
  min-height: 80px !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius) !important;
  background-color: #fff !important;
  padding: 0.5rem 0.75rem !important;
  font-family: var(--lc-font-sans) !important;
  font-size: 0.875rem !important;
  color: var(--lc-fg) !important;
  resize: vertical !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.lc-mc-btn-start {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  align-self: flex-start !important;
  padding: 0.5rem 1.25rem !important;
  height: auto !important; min-height: 0 !important;
  background-color: var(--lc-conseil) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-family: var(--lc-font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
.lc-mc-btn-start:hover { background-color: var(--lc-conseil-hv) !important; }

/* ── Empty state
   React: text-center py-4 space-y-3 ── */
.lc-mc-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
.lc-mc-empty-icon {
  color: var(--lc-muted-fg);
  opacity: 0.4;
}
.lc-mc-empty p {
  font-size: 0.875rem !important;
  color: var(--lc-muted-fg) !important;
  margin: 0 !important;
}

/* ── Conversation list
   React: space-y-2 ── */
.lc-mc-conversations {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Conversation button card
   React: w-full text-left p-3 rounded-xl border border-border
          hover:border-primary/30 hover:bg-muted/30 flex items-center gap-3 ── */
.lc-mc-conv-btn {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem !important;
  border: 1px solid hsl(40, 20%, 80%) !important;   /* más oscuro que antes */
  border-radius: 0.75rem !important;
  background-color: #fff !important;                  /* fondo blanco explícito */
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; /* sombra sutil */
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.15s, background-color 0.15s !important;
  color: var(--lc-fg) !important;
  height: auto !important; min-height: 0 !important;
  font-family: var(--lc-font-sans) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}
.lc-mc-conv-btn:hover {
  border-color: hsla(179, 35%, 67%, 0.3) !important;
  background-color: hsla(40, 15%, 92%, 0.3) !important;
}

/* Animal avatar — React: w-9 h-9 rounded-full bg-muted flex items-center justify-center text-base */
.lc-mc-conv-icon {
  width: 2.75rem; height: 2.75rem;   /* más grande */
  border-radius: 50%;
  background-color: var(--lc-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem;               /* emoji ~22px */
  flex-shrink: 0;
  line-height: 1;
}
.lc-mc-conv-icon img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--lc-muted);
}

/* Body */
.lc-mc-conv-body { flex: 1; min-width: 0; }
.lc-mc-conv-top  {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap;
}

/* Name — React: text-sm font-medium text-foreground truncate */
.lc-mc-conv-name {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--lc-fg) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

/* Unread badge — React: variant="destructive" text-[9px] px-1 py-0 */
.lc-mc-unread-badge {
  background-color: var(--lc-destructive) !important;
  color: #fff !important;
  font-size: 0.5625rem !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.4 !important;
  flex-shrink: 0;
}

/* Meta row — React: flex items-center gap-2 mt-0.5 */
.lc-mc-conv-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
}
.lc-mc-conv-meta span {
  font-size: 0.75rem !important;     /* 12px */
  color: var(--lc-muted-fg) !important;
  text-transform: capitalize;
}

/* ChevronRight — React: h-4 w-4 text-muted-foreground flex-shrink-0 */
.lc-mc-conv-chevron {
  color: var(--lc-muted-fg);
  flex-shrink: 0;
  width: 1rem; height: 1rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL DE CONVERSACIÓN
   React: Dialog max-w-lg
   ══════════════════════════════════════════════════════════════════════════ */

/* Overlay */
.lc-mc-overlay {
  position: fixed !important;
  inset: 0 !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  animation: lc-fade-in 0.15s ease-out;
}

/* Dialog — React: max-w-lg DialogContent */
.lc-mc-dialog {
  background-color: #fff !important;
  border-radius: 0.75rem !important;
  width: 100% !important;
  max-width: 32rem !important; /* 512px ≈ max-w-lg */
  max-height: 90vh !important;
  overflow-y: auto !important;
  padding: 1.5rem !important;
  position: relative !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
  animation: lc-fade-in 0.2s ease-out;
}

/* Header — React: DialogHeader */
.lc-mc-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* Title — React: font-display text-lg DialogTitle */
.lc-mc-dialog-title {
  font-family: var(--lc-font-display) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--lc-fg) !important;
  margin: 0 !important;
}

/* Close button */
.lc-mc-btn-close {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.25rem !important;
  color: var(--lc-muted-fg) !important;
  border-radius: 0.25rem !important;
  min-height: 0 !important; min-width: 0 !important;
  display: flex !important; align-items: center !important;
  transition: color 0.15s, background-color 0.15s !important;
}
.lc-mc-btn-close:hover {
  color: var(--lc-fg) !important;
  background-color: var(--lc-muted) !important;
}

/* Original message block — React: p-3 rounded-lg bg-muted/30 border border-border */
.lc-mc-orig-msg {
  padding: 0.75rem;
  border-radius: var(--lc-radius);
  background-color: hsla(40, 15%, 92%, 0.3);
  border: 1px solid var(--lc-border);
  margin-bottom: 0.75rem;
}
.lc-mc-orig-msg p {
  font-size: 0.875rem !important;
  white-space: pre-wrap !important;
  color: var(--lc-fg) !important;
  margin: 0 !important;
  word-break: break-word;
}
.lc-mc-orig-date {
  font-size: 0.625rem !important;
  color: var(--lc-muted-fg) !important;
  margin-top: 0.5rem !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONVERSATION CHAT
   React: ConversationChat.tsx
   ══════════════════════════════════════════════════════════════════════════ */

.lc-chat { display: flex; flex-direction: column; gap: 0.75rem; }

/* Messages area — React: max-h-[300px] overflow-y-auto space-y-2 p-3 rounded-lg bg-muted/20 border border-border */
.lc-chat-messages {
  max-height: 300px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding: 0.75rem !important;
  border-radius: var(--lc-radius) !important;
  background-color: hsla(40, 15%, 92%, 0.2) !important;
  border: 1px solid var(--lc-border) !important;
}

/* Empty state — React: text-center py-4 space-y-2 */
.lc-chat-empty {
  text-align: center;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lc-chat-empty-title {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--lc-fg) !important;
  margin: 0 !important;
}
.lc-chat-empty-sub {
  font-size: 0.75rem !important;
  color: var(--lc-muted-fg) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

/* Message row — React: flex justify-end / justify-start */
.lc-chat-msg-row {
  display: flex;
  animation: lc-fade-in 0.15s ease-out;
}
.lc-chat-msg-row.is-me    { justify-content: flex-end; }
.lc-chat-msg-row.is-other { justify-content: flex-start; }

/* Bubble — React: max-w-[80%] rounded-2xl px-3.5 py-2 text-sm */
.lc-chat-bubble {
  max-width: 80%;
  border-radius: 1rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  word-break: break-word;
  white-space: pre-wrap;
}
/* Me — React: bg-primary text-primary-foreground rounded-br-md */
.lc-chat-msg-row.is-me .lc-chat-bubble {
  background-color: var(--lc-primary) !important;
  color: var(--lc-primary-fg) !important;
  border-bottom-right-radius: 0.25rem !important;
}
/* Other — React: bg-muted text-foreground rounded-bl-md */
.lc-chat-msg-row.is-other .lc-chat-bubble {
  background-color: var(--lc-muted) !important;
  color: var(--lc-fg) !important;
  border-bottom-left-radius: 0.25rem !important;
}

/* Image inside bubble — FIX [QA-04]: :not(.emoji) excluye emojis WP del constraint */
.lc-chat-bubble img:not(.emoji) {
  border-radius: 0.5rem !important;
  max-width: 200px !important;       /* límite absoluto; era 100% del globo (~220px) */
  max-height: 160px !important;      /* reducido de 220px; thumbnail compacto estilo chat */
  width: auto !important;
  height: auto !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
  cursor: pointer !important;
  object-fit: cover !important;
}
/* El globo no deja salir su contenido */
.lc-chat-bubble {
  overflow: hidden !important;
}
.lc-chat-bubble img:not(.emoji):hover { opacity: 0.9; }
/* Restaurar sizing nativo de WordPress para emojis en burbujas — FIX [QA-04] */
.lc-chat-bubble img.emoji,
#lc-mc-chat .lc-chat-bubble img.emoji,
#lc-mc-modal .lc-chat-bubble img.emoji {
  width: 1em !important;
  height: 1em !important;
  max-width: none !important;
  max-height: none !important;
  display: inline !important;
  object-fit: unset !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  cursor: default !important;
}


/* Timestamp — React: text-[10px] mt-1 */
.lc-chat-ts {
  font-size: 0.625rem !important;
  margin-top: 0.25rem !important;
  display: block !important;
}
.lc-chat-msg-row.is-me    .lc-chat-ts { color: rgba(255,255,255,0.6) !important; text-align: right; }
.lc-chat-msg-row.is-other .lc-chat-ts { color: var(--lc-muted-fg) !important; }

/* Loading spinner */
.lc-chat-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
}
.lc-chat-spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--lc-border);
  border-top-color: var(--lc-muted-fg);
  border-radius: 50%;
  animation: lc-spin 0.8s linear infinite;
}

/* Image preview — React: relative inline-block w-fit */
.lc-chat-img-preview {
  position: relative;
  display: inline-block;
  width: fit-content;
}
.lc-chat-img-preview img {
  height: 4rem !important;
  width: auto !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--lc-border) !important;
  display: block !important;
}
.lc-chat-img-remove {
  position: absolute !important;
  top: -0.375rem !important; right: -0.375rem !important;
  background-color: var(--lc-destructive) !important;
  color: #fff !important;
  border: none !important; border-radius: 50% !important;
  padding: 0.125rem !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 0 !important; min-width: 0 !important;
  width: 1.125rem !important; height: 1.125rem !important;
}

/* Input area — React: flex gap-2 items-end */
.lc-chat-input-area {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: flex-end !important;
}

/* Image button — React: variant="outline" size="sm" h-10 gap-1.5 px-3 text-xs border-dashed */
.lc-chat-image-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  flex-shrink: 0 !important;
  height: 2.5rem !important;
  padding: 0 0.75rem !important;
  min-height: 0 !important; min-width: 0 !important;
  border: 1px dashed var(--lc-border) !important;
  border-radius: var(--lc-radius) !important;
  background-color: transparent !important;
  color: var(--lc-muted-fg) !important;
  font-family: var(--lc-font-sans) !important;
  font-size: 0.75rem !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.15s !important;
  text-transform: none !important;
}
.lc-chat-image-btn:hover { color: var(--lc-fg) !important; }
.lc-chat-image-btn svg { width: 1rem !important; height: 1rem !important; }
.lc-chat-image-btn span { display: none; }
@media (min-width: 640px) { .lc-chat-image-btn span { display: inline; } }

/* Textarea — React: min-h-[40px] max-h-[100px] resize-none text-sm */
.lc-chat-textarea {
  flex: 1 !important;
  min-height: 2.5rem !important;
  max-height: 6.25rem !important;
  resize: none !important;
  font-family: var(--lc-font-sans) !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius) !important;
  background-color: transparent !important;
  color: var(--lc-fg) !important;
  padding: 0.5rem 0.75rem !important;
  line-height: 1.5 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}
.lc-chat-textarea:focus { border-color: var(--lc-primary) !important; }

/* Send button — React: size="icon" rounded-full h-10 w-10 bg-primary */
.lc-chat-send-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 2.5rem !important; height: 2.5rem !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  background-color: var(--lc-primary) !important;
  color: var(--lc-primary-fg) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background-color 0.15s !important;
  text-transform: none !important;
}
.lc-chat-send-btn:hover:not(:disabled) {
  background-color: hsl(179, 35%, 57%) !important;
}
.lc-chat-send-btn:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
.lc-chat-send-btn svg { width: 1rem !important; height: 1rem !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PROPOSED CART CARD
   React: ProposedCartCard.tsx — dentro del área de mensajes
   ══════════════════════════════════════════════════════════════════════════ */

/* React: p-4 rounded-xl bg-gradient-to-br from-primary/5 to-primary/10 border-2 border-primary/20 */
.lc-proposed-cart {
  padding: 1rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, hsla(179,35%,67%,0.05), hsla(179,35%,67%,0.1));
  border: 2px solid hsla(179, 35%, 67%, 0.2);
  margin-top: 0.5rem;
  animation: lc-fade-in 0.2s ease-out;
}

/* Header row */
.lc-proposed-cart-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.lc-proposed-cart-header svg { width: 1.25rem; height: 1.25rem; color: var(--lc-primary); flex-shrink: 0; }
.lc-proposed-cart-title {
  font-family: var(--lc-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--lc-fg) !important;
  margin: 0 !important;
  flex: 1;
}
.lc-proposed-cart-badge {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Items list */
.lc-proposed-cart-items { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.lc-proposed-cart-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: rgba(255,255,255,0.8);
}
.lc-proposed-cart-item img {
  width: 2.5rem !important; height: 2.5rem !important;
  border-radius: 0.375rem !important;
  object-fit: cover !important;
  flex-shrink: 0;
}
.lc-proposed-cart-item-info { flex: 1; min-width: 0; }
.lc-proposed-cart-item-name {
  font-size: 0.75rem !important; font-weight: 500 !important;
  color: var(--lc-fg) !important; margin: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-proposed-cart-item-variant {
  font-size: 0.625rem !important; color: var(--lc-muted-fg) !important; margin: 0 !important;
}
.lc-proposed-cart-item-price {
  text-align: right;
}
.lc-proposed-cart-item-price .price {
  font-size: 0.75rem !important; font-weight: 600 !important; color: var(--lc-fg) !important;
  display: block !important; margin: 0 !important;
}
.lc-proposed-cart-item-price .qty {
  font-size: 0.625rem !important; color: var(--lc-muted-fg) !important;
  display: block !important; margin: 0 !important;
}

/* Totals */
.lc-proposed-cart-totals { margin-bottom: 0.5rem; }
.lc-proposed-cart-row {
  display: flex; justify-content: space-between;
  font-size: 0.75rem !important; padding: 0 0.25rem;
  color: var(--lc-muted-fg);
}
.lc-proposed-cart-row.subtotal span:last-child { text-decoration: line-through; }
.lc-proposed-cart-row.discount { color: #16a34a !important; font-weight: 600 !important; }
.lc-proposed-cart-row.total {
  font-weight: 700 !important; font-size: 0.875rem !important;
  color: var(--lc-fg) !important;
  border-top: 1px solid hsla(179,35%,67%,0.2);
  padding-top: 0.5rem !important; margin-top: 0.375rem;
}
.lc-proposed-cart-row.total .amount { color: var(--lc-primary) !important; font-size: 1.125rem !important; }

/* Note */
.lc-proposed-cart-note {
  font-size: 0.75rem !important;
  color: var(--lc-muted-fg) !important;
  font-style: italic !important;
  background-color: hsla(40,15%,92%,0.4) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Action buttons */
.lc-proposed-cart-actions { display: flex; gap: 0.5rem; }
.lc-proposed-cart-accept {
  flex: 1 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.625rem !important;
  background-color: var(--lc-primary) !important;
  color: var(--lc-primary-fg) !important;
  border: none !important; border-radius: var(--lc-radius) !important;
  font-family: var(--lc-font-sans) !important;
  font-size: 0.875rem !important; font-weight: 600 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  text-transform: none !important; min-height: 0 !important;
}
.lc-proposed-cart-accept:hover:not(:disabled) { background-color: hsl(179,35%,57%) !important; }
.lc-proposed-cart-decline {
  display: inline-flex !important; align-items: center !important; gap: 0.375rem !important;
  padding: 0.625rem 0.875rem !important;
  background-color: transparent !important;
  border: 1px solid var(--lc-border) !important;
  border-radius: var(--lc-radius) !important;
  font-family: var(--lc-font-sans) !important;
  font-size: 0.875rem !important; color: var(--lc-fg) !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
  text-transform: none !important; min-height: 0 !important;
}
.lc-proposed-cart-decline:hover { background-color: var(--lc-muted) !important; }
.lc-proposed-cart-accept:disabled,
.lc-proposed-cart-decline:disabled { opacity: 0.5 !important; cursor: not-allowed !important; }

/* ── Pending cart badge en conversación ── */
/* Emoji de carrito que indica que hay un panier personnalisé pendiente */
.lc-mc-cart-badge {
  font-size: 0.75rem;               /* 12px */
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  animation: lc-ping-once 0.4s ease-out;
  cursor: default;
}
@keyframes lc-ping-once {
  0%   { transform: scale(0.6); opacity: 0.5; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1);   opacity: 1; }
}

/* Close button — force visibility against WC global button styles */
.lc-mc-btn-close svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: block !important;
  stroke: currentColor !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   FUENTES — DM Sans en todo el plugin (Lovable: font-sans = "DM Sans")
   ══════════════════════════════════════════════════════════════════════════ */
.lc-mc-wrap *,
.lc-mc-body *,
#lc-mc-modal * {
  font-family: var(--lc-font-sans) !important;
}
/* Exception: solo el título del modal usa Playfair Display (FIX [QA-06]) */
.lc-mc-dialog-title {
  font-family: var(--lc-font-display) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTRASTE — separaciones más visibles en el modal
   ══════════════════════════════════════════════════════════════════════════ */

/* Diálogo con sombra visible */
.lc-mc-dialog {
  box-shadow: 0 8px 40px rgba(0,0,0,0.22) !important;
}

/* Mensaje original — fondo y borde más contrastados */
.lc-mc-orig-msg {
  background-color: hsl(40, 20%, 94%) !important;
  border: 1px solid hsl(40, 20%, 80%) !important;
  border-left: 3px solid var(--lc-conseil) !important;
  margin-bottom: 1rem !important;
}
.lc-mc-orig-msg p { font-size: 0.9rem !important; line-height: 1.6 !important; }

/* ProposedCartCard — margen arriba para separarlo del orig-msg */
#lc-mc-proposed-cart {
  margin-bottom: 0.75rem;
}

/* Mensajes scrollable — fondo y borde más definidos */
.lc-chat-messages {
  background-color: hsl(40, 15%, 96%) !important;
  border: 1px solid hsl(40, 20%, 82%) !important;
}

/* Conversación card — border más visible en hover */
.lc-mc-conv-btn:focus-visible {
  outline: 2px solid var(--lc-primary) !important;
  outline-offset: 1px !important;
}

/* Input del chat — borde más visible */
.lc-chat-textarea {
  border: 1.5px solid hsl(40, 20%, 78%) !important;
}
.lc-chat-textarea:focus {
  border-color: var(--lc-primary) !important;
  box-shadow: 0 0 0 3px hsla(179,35%,67%,0.15) !important;
}

/* Image button — borde más definido */
.lc-chat-image-btn {
  border: 1.5px dashed hsl(40, 20%, 72%) !important;
}

/* ── Sender name above bubble ─────────────────────────────────────────────── */
.lc-chat-sender-name {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  margin: 0 0 0.2rem !important;
  color: inherit !important;
  opacity: 0.75 !important;
  line-height: 1 !important;
}
.lc-chat-msg-row.is-me  .lc-chat-sender-name { text-align: right; }
.lc-chat-msg-row.is-other .lc-chat-sender-name { text-align: left; }

/* ── Bubble text paragraph ────────────────────────────────────────────────── */
.lc-chat-bubble-text {
  margin: 0 !important;
  white-space: pre-wrap !important;
}

/* ── Inline image validation error ───────────────────────────────────────── */
.lc-chat-img-error {
  display: none;
  font-size: 0.75rem !important;
  color: hsl(345, 95%, 44%) !important;
  background: hsl(345, 95%, 96%) !important;
  border: 1px solid hsl(345, 95%, 80%) !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.625rem !important;
  margin: 0.25rem 0 0 !important;
  animation: lc-fade-in 0.15s ease-out !important;
}