/* =====================================================
   TRAVELSY — chat de cotización
   ===================================================== */

.quote-widget{ position:fixed; right:24px; bottom:24px; z-index:200; font-family:var(--sans); }

/* ---------- floating button (circular — hace eco del isotipo) ---------- */
.quote-fab{
  display:flex; align-items:center; gap:10px;
  background:var(--brass); color:var(--ink); border:none; border-radius:30px;
  padding:15px 22px; font-family:var(--sans); font-weight:500; font-size:0.82rem;
  letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; box-shadow:0 10px 28px rgba(16,24,32,0.28);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.quote-fab:hover{ background:var(--ice); transform:translateY(-2px); }
.quote-fab[aria-expanded="true"]{ display:none; }

@keyframes fabPulse{
  0%,100%{ box-shadow:0 10px 28px rgba(16,24,32,0.28), 0 0 0 0 rgba(169,146,106,0.45); }
  50%{ box-shadow:0 10px 28px rgba(16,24,32,0.28), 0 0 0 10px rgba(169,146,106,0); }
}
.q-fab-pulse{ animation:fabPulse 1.8s var(--ease) 2; }

/* ---------- panel ---------- */
.quote-panel{
  position:absolute; right:0; bottom:calc(100% + 14px);
  width:min(380px, calc(100vw - 32px)); height:min(600px, 75vh);
  background:var(--ink); color:var(--bone); border-radius:0;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
  display:flex; flex-direction:column; overflow:hidden;
  animation:panelIn .3s var(--ease);
}
/* El atributo hidden debe ganar siempre — por eso esta regla tiene más
   especificidad que .quote-panel { display:flex } de arriba. */
.quote-panel[hidden]{ display:none; }

@keyframes panelIn{ from{ opacity:0; transform:translateY(12px) scale(0.98); } to{ opacity:1; transform:none; } }

.quote-panel-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:22px 20px 16px; border-bottom:1px solid var(--ink-line); flex-shrink:0;
}
.quote-panel-eyebrow{ display:block; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ice); margin-bottom:6px; }
.quote-panel-head h3{ font-family:var(--serif-title); font-size:1.1rem; font-weight:400; letter-spacing:0.02em; color:var(--bone); }
.quote-close{
  background:none; border:none; color:rgba(247,244,238,0.7); cursor:pointer; padding:4px;
  transition:color .2s var(--ease);
}
.quote-close:hover{ color:var(--bone); }

.quote-progress{ height:2px; background:var(--ink-line); flex-shrink:0; }
.quote-progress span{ display:block; height:100%; width:0%; background:var(--brass); transition:width .4s var(--ease); }

.quote-body{
  flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:var(--ink-line) transparent;
}

.q-bubble{
  max-width:86%; padding:11px 14px; font-family:var(--sans); font-size:0.92rem; line-height:1.5;
  white-space:pre-line; border-radius:0;
}
.q-bubble--bot{ align-self:flex-start; background:var(--ink-soft); color:rgba(247,244,238,0.85); }
.q-bubble--user{ align-self:flex-end; background:var(--brass); color:var(--ink); }

.q-typing{ display:flex; gap:5px; padding:14px; align-items:center; }
.q-typing span{
  width:6px; height:6px; border-radius:50%; background:rgba(247,244,238,0.6);
  animation:qTyping 1.1s ease-in-out infinite;
}
.q-typing span:nth-child(2){ animation-delay:.15s; }
.q-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes qTyping{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.quote-chip-row{ display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 16px; flex-shrink:0; }
.quote-chip-row[hidden]{ display:none; }

.q-chip{
  font-family:var(--sans); font-size:0.8rem; letter-spacing:0.03em; color:var(--bone);
  background:transparent; border:1px solid rgba(247,244,238,0.3); border-radius:0;
  padding:10px 16px; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);
  text-decoration:none; display:inline-flex;
}
.q-chip:hover{ border-color:var(--brass); background:rgba(169,146,106,0.12); }
.q-chip--ghost{ opacity:0.7; }

.quote-input-row{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-top:1px solid var(--ink-line); flex-shrink:0;
}
.quote-input-row[hidden]{ display:none; }

.quote-input-row input{
  flex:1; background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:0;
  padding:11px 14px; color:var(--bone); font-family:var(--sans); font-size:0.9rem;
}
.quote-input-row input::placeholder{ color:var(--mist); }
.quote-input-row input:focus{ outline:none; border-color:var(--brass); }
.quote-input-row button{
  width:38px; height:38px; flex-shrink:0; border-radius:0; border:none;
  background:var(--brass); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .2s var(--ease);
}
.quote-input-row button:hover{ background:var(--ice); }

@media (prefers-reduced-motion: reduce){
  .q-fab-pulse{ animation:none; }
  .quote-panel{ animation:none; }
}

@media (max-width:640px){
  .quote-widget{ right:16px; bottom:16px; }
  .quote-fab span{ display:none; }
  .quote-fab{ padding:15px; border-radius:50%; }
  .quote-panel{ position:fixed; inset:0; right:0; bottom:0; width:100%; height:100%; border-radius:0; }
}