#lp-chat-container { width: 100%; max-width: 900px; margin: 20px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid #eee; background: #fff; height: 75vh; min-height: 500px; position: relative; }
.lp-chat-main { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fef6ff; }
.lp-chat-header { padding: 20px; background: #fff; border-bottom: 1px solid #eee; display: flex; justify-content: center; align-items: center; }
#lp-chat-messages { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.lp-chat-welcome { text-align: center; color: #888; font-size: 0.85rem; margin-top: 10px; }

/* Burbujas */
.lp-msg-row { display: flex; gap: 10px; width: 100%; align-items: flex-end; }
.lp-msg-mine { flex-direction: row-reverse; }
.lp-msg-avatar { width: 35px; height: 35px; border-radius: 50%; background: #2c2a5f; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; font-size: 0.9rem; text-decoration: none; overflow: hidden; }
.lp-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lp-msg-bubble { max-width: 80%; padding: 12px 15px; font-size: 0.95rem; border-radius: 18px; position: relative; word-wrap: break-word; display: flex; flex-direction: column; }
.lp-msg-mine .lp-msg-bubble { background: #d9125e; color: #fff; border-bottom-right-radius: 0; }
.lp-msg-theirs .lp-msg-bubble { background: #fff; color: #2c2a5f; border-bottom-left-radius: 0; border: 1px solid #eee; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }

/* Nombres, Footer y Tiempo */
.lp-msg-author { font-size: 0.75rem; font-weight: 900; color: #d9125e; margin-bottom: 4px; }
.lp-msg-mine .lp-msg-author { display: none; }
.lp-msg-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; width: 100%; gap: 10px; }
.lp-msg-time { font-size: 0.65rem; opacity: 0.7; }
.lp-btn-reply { background: none; border: none; color: inherit; opacity: 0.5; cursor: pointer; font-size: 0.65rem; font-weight: bold; padding: 0; text-transform: uppercase; transition: 0.2s; }
.lp-btn-reply:hover { opacity: 1; text-decoration: underline; }

/* Respuestas y Borrado Admin */
.lp-in-msg-reply { background: rgba(0,0,0,0.05); padding: 8px 10px; border-left: 3px solid currentColor; border-radius: 6px; margin-bottom: 8px; font-size: 0.8rem; opacity: 0.9; }
.lp-in-msg-reply strong { display: block; margin-bottom: 2px; }
.lp-in-msg-reply p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.lp-msg-del-admin { position: absolute; top: 5px; right: 10px; background: none; border: none; color: rgba(0,0,0,0.2); cursor: pointer; font-size: 0.8rem; transition: 0.2s;}
.lp-msg-mine .lp-msg-del-admin { color: rgba(255,255,255,0.4); }
.lp-msg-del-admin:hover { color: #dc3545; transform: scale(1.2); }

/* Cuadros de previsualización arriba del input */
#lp-reply-preview { background: #eee; color: #333; padding: 10px 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; border-bottom: 1px solid #ddd; }
#lp-cancel-reply { background: none; border: none; font-weight: bold; cursor: pointer; color: #888; }
#lp-cancel-reply:hover { color: #dc3545; }

#lp-attachment-preview { background: #fef6ff; color: #d9125e; padding: 8px 15px; font-size: 0.85rem; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
#lp-cancel-attachment { background: none; border: none; font-weight: bold; cursor: pointer; color: #d9125e; }
#lp-cancel-attachment:hover { transform: scale(1.2); }

/* Enlaces y Multimedia Dinámica en el chat */
.chat-link-btn { display: inline-block; background: rgba(0,0,0,0.1); padding: 4px 10px; border-radius: 12px; color: inherit; text-decoration: none; font-weight: bold; margin-top: 4px; }
.chat-media-img { max-width: 100%; border-radius: 12px; margin-top: 8px; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.chat-media-vid { max-width: 100%; border-radius: 12px; margin-top: 8px; outline: none; }

/* Input Area y Animación Loader */
.lp-chat-input-wrapper { display: flex; flex-direction: column; background: #fff; border-top: 1px solid #eee; }
.lp-chat-input-area { padding: 15px 20px; display: flex; gap: 10px; align-items: center; }
#lp-message-input { flex-grow: 1; border: 1px solid #ddd; border-radius: 30px; padding: 12px 20px; font-size: 1rem; outline: none; }
#lp-message-input:focus { border-color: #d9125e; }
#lp-message-input:disabled { background: #f9f9f9; cursor: not-allowed; }

#lp-attach-btn { background: none; border: none; cursor: pointer; color: #888; display: flex; align-items: center; justify-content: center; padding: 5px; transition: 0.2s; }
#lp-attach-btn:hover { color: #d9125e; transform: scale(1.1); }
#lp-attach-btn svg { width: 24px; fill: currentColor; }

.lp-spinner { width: 20px; height: 20px; border: 3px solid rgba(217, 18, 94, 0.3); border-top-color: #d9125e; border-radius: 50%; animation: lp-spin 1s linear infinite; margin: 0 5px; }
@keyframes lp-spin { 100% { transform: rotate(360deg); } }

#lp-send-btn { background: #d9125e; color: #fff; border: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
#lp-send-btn:hover { transform: scale(1.05); }
#lp-send-btn svg { width: 22px; fill: currentColor; }

/* Modales */
.lp-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44, 42, 95, 0.95); z-index: 100; display: none; align-items: center; justify-content: center; }
.lp-modal-box { background: #fff; padding: 30px; border-radius: 20px; text-align: center; max-width: 320px; width: 90%; }
.lp-modal-box input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 10px; margin-bottom: 15px; text-align: center; font-size: 1rem; box-sizing: border-box; outline:none;}
.lp-modal-box button { width: 100%; background: #d9125e; color: #fff; border: none; padding: 12px; border-radius: 30px; font-weight: bold; cursor: pointer; }

@media (max-width: 768px) { #lp-chat-container { border-radius: 0; border: none; height: calc(100vh - 80px); margin: 0; max-width: 100%; } }