/* Chat en la web — panel flotante (usa los tokens de site.css) */
.tp-chat {
  position: fixed; right: 20px; bottom: 164px; z-index: 1045; width: min(380px, calc(100vw - 28px)); height: min(540px, calc(100vh - 190px));
  background: var(--tp-paper, #fff); border-radius: 20px; box-shadow: 0 24px 60px rgba(23, 33, 28, .25);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.98); transform-origin: bottom right; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.tp-chat.is-open { opacity: 1; transform: none; visibility: visible; }
@media (max-width: 575.98px) {
  .tp-chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .tp-chat.is-open ~ .tp-fab-stack, body:has(.tp-chat.is-open) .tp-fab-stack { display: none; }
}

.tp-chat-head { display: flex; align-items: center; gap: .65rem; padding: .85rem .9rem; background: var(--tp-forest, #1f4a39); color: #fff; }
.tp-chat-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tp-gold, #c8963a); color: #1d1406; flex: none; }
.tp-chat-head-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.tp-chat-head-text strong { font-size: .98rem; }
.tp-chat-head-text span { font-size: .8rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-chat-icon { background: none; border: 0; color: #fff; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
.tp-chat-icon:hover { background: rgba(255,255,255,.14); }

.tp-chat-alert { background: #fff4e5; color: #7a4b00; font-size: .85rem; padding: .55rem .9rem; border-bottom: 1px solid #f3dfbf; }
.tp-chat-alert button { background: none; border: 0; padding: 0; color: inherit; font-weight: 700; text-decoration: underline; }

.tp-chat-body { flex: 1; overflow-y: auto; padding: 1rem .9rem; background: var(--tp-sand, #f6f2ea); display: flex; flex-direction: column; gap: .35rem; }
.tp-chat-empty { margin: auto; text-align: center; color: var(--tp-muted, #5d6b64); font-size: .92rem; }
.tp-chat-empty .bi { font-size: 1.8rem; display: block; margin-bottom: .4rem; }
.tp-chat-welcome { background: #fff; border: 1px solid var(--tp-line, #e6dfd1); border-radius: 14px; padding: .7rem .85rem; font-size: .86rem; color: var(--tp-muted, #5d6b64); margin-bottom: .5rem; }
.tp-chat-welcome .bi { color: var(--tp-gold, #c8963a); margin-right: .25rem; }
.tp-chat-day { align-self: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tp-muted, #5d6b64); background: rgba(255,255,255,.7); padding: .15rem .6rem; border-radius: 999px; margin: .5rem 0; }

.tp-msg { display: flex; flex-direction: column; max-width: 82%; }
.tp-msg--out { align-self: flex-end; align-items: flex-end; }
.tp-msg--in { align-self: flex-start; align-items: flex-start; }
.tp-msg-bubble { padding: .55rem .85rem; border-radius: 16px; font-size: .93rem; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
.tp-msg--out .tp-msg-bubble { background: var(--tp-forest, #1f4a39); color: #fff; border-bottom-right-radius: 5px; }
.tp-msg--in .tp-msg-bubble { background: #fff; color: var(--tp-ink, #17211c); border: 1px solid var(--tp-line, #e6dfd1); border-bottom-left-radius: 5px; }
.tp-msg.is-failed .tp-msg-bubble { opacity: .6; }
.tp-msg-meta { font-size: .7rem; color: var(--tp-muted, #5d6b64); margin-top: .15rem; display: flex; gap: .25rem; align-items: center; }
.tp-msg-meta .bi-check2-all { color: #2f8fd6; }

.tp-chat-form { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem; border-top: 1px solid var(--tp-line, #e6dfd1); background: #fff; }
.tp-chat-form textarea {
  flex: 1; resize: none; border: 1.5px solid var(--tp-line, #e6dfd1); border-radius: 18px; padding: .55rem .9rem; font-size: .95rem;
  max-height: 120px; outline: none; font-family: inherit; line-height: 1.4;
}
.tp-chat-form textarea:focus { border-color: var(--tp-forest-600, #2a6049); }
.tp-chat-send { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--tp-gold, #c8963a); color: #1d1406; display: grid; place-items: center; }
.tp-chat-send:hover { background: var(--tp-gold-600, #a97a25); color: #fff; }