/* Chat con Javier */
.chat-launcher {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: .5rem;
  height: 3rem; padding: 0 1.25rem; border: none; border-radius: 999px;
  background: var(--accent); color: var(--accent-foreground);
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 20px rgba(20,28,38,.25); transition: background .15s;
}
.chat-launcher:hover { background: rgba(242,68,5,.9); }
.chat-launcher .icon { width: 1.25rem; height: 1.25rem; color: currentColor; }
.chat-launcher[hidden] { display: none; }

.chat-panel {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; background: var(--background);
}
.chat-panel[hidden] { display: none; }
@media (min-width: 640px) {
  .chat-panel {
    inset: auto; right: 1rem; bottom: 1rem; width: 24rem;
    height: min(36rem, calc(100vh - 2rem)); height: min(36rem, calc(100dvh - 2rem));
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 12px 40px rgba(20,28,38,.2);
  }
}
html.chat-open { overflow: hidden; }
@media (min-width: 640px) { html.chat-open { overflow: auto; } }

.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem .5rem .75rem 1rem; padding-top: calc(.75rem + env(safe-area-inset-top));
  background: var(--primary); color: var(--primary-foreground);
}
@media (min-width: 640px) { .chat-head { padding-top: .75rem; } }
.chat-title { font-size: 1rem; font-weight: 700; }
.chat-subtitle { font-size: .8125rem; color: rgba(255,255,255,.7); }
.chat-close {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: .375rem; color: #fff; cursor: pointer;
}
.chat-close:hover { background: rgba(255,255,255,.1); }
.chat-close .icon { width: 1.25rem; height: 1.25rem; color: currentColor; }

.chat-messages {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .625rem;
  padding: 1rem; background: var(--surface);
}
.chat-msg {
  max-width: 85%; padding: .625rem .875rem; border-radius: .75rem;
  font-size: .9375rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-msg.bot { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: .25rem; }
.chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--accent-foreground); border-bottom-right-radius: .25rem; }
.chat-msg.typing { color: var(--muted-foreground); font-style: italic; }

.chat-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.chat-suggestion {
  min-height: 2.75rem; padding: .5rem 1rem; text-align: left;
  background: var(--card); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; transition: background .15s;
}
.chat-suggestion:hover { background: rgba(242,68,5,.08); }

.chat-form {
  display: flex; gap: .5rem; padding: .75rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
  background: var(--background); border-top: 1px solid var(--border);
}
@media (min-width: 640px) { .chat-form { padding-bottom: .75rem; } }
.chat-form input {
  flex: 1; min-width: 0; height: 2.75rem; padding: 0 .875rem;
  font: inherit; font-size: 1rem; color: var(--foreground);
  background: var(--background); border: 1px solid var(--border); border-radius: .375rem;
}
.chat-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242,68,5,.15); }
.chat-send {
  width: 2.75rem; height: 2.75rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-foreground); border: none; border-radius: .375rem; cursor: pointer;
}
.chat-send:hover { background: rgba(242,68,5,.9); }
.chat-send:disabled { opacity: .6; cursor: wait; }
.chat-send .icon { width: 1.25rem; height: 1.25rem; color: currentColor; }