/* ==========================================================================
   Chat widget — reuses the site's design tokens from style.css
   ========================================================================== */

.chat-toggle{
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--ink); color: var(--paper); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  transition: transform .4s var(--ease-lux), box-shadow .4s var(--ease-lux);
}
.chat-toggle:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px rgba(0,0,0,.34); }

.chat-toggle-icon{
  position:absolute; width:22px; height:22px;
  transition: opacity .3s var(--ease-lux), transform .3s var(--ease-lux);
}
.chat-toggle .icon-close{ opacity:0; transform: rotate(-45deg) scale(.6); }
.chat-toggle .icon-chat{ opacity:1; transform:none; }
body.chat-open .chat-toggle .icon-chat{ opacity:0; transform: rotate(45deg) scale(.6); }
body.chat-open .chat-toggle .icon-close{ opacity:1; transform:none; }

.chat-panel{
  position: fixed; right: 1.5rem; bottom: 5.75rem; z-index: 200;
  width: 380px; max-width: calc(100vw - 2rem);
  height: min(560px, 72vh);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink-12);
  box-shadow: 0 30px 60px rgba(0,0,0,.3);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .4s var(--ease-lux), transform .4s var(--ease-lux);
}
body.chat-open .chat-panel{ opacity: 1; transform: none; pointer-events: auto; }

.chat-header{
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; flex-shrink: 0;
}
.chat-header-title{
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-accent); font-style: italic; font-size: 1.05rem;
}
.chat-dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--paper);
  animation: chatPulse 2.2s var(--ease-lux) infinite;
  flex-shrink: 0;
}
@keyframes chatPulse{
  0%{ box-shadow: 0 0 0 0 rgba(251,251,250,.5); }
  70%{ box-shadow: 0 0 0 8px rgba(251,251,250,0); }
  100%{ box-shadow: 0 0 0 0 rgba(251,251,250,0); }
}
.chat-close{
  background: none; border: none; color: var(--paper-80); cursor: pointer;
  padding: .25rem; display: flex; transition: opacity .25s var(--ease-lux);
}
.chat-close:hover{ opacity: .6; }
.chat-close svg{ width: 18px; height: 18px; }

.chat-messages{
  flex: 1; overflow-y: auto; padding: 1.25rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.chat-bubble{
  max-width: 82%; padding: .7rem 1rem;
  font-family: var(--font-sans); font-size: .87rem; line-height: 1.55;
  animation: chatBubbleIn .35s var(--ease-lux);
}
@keyframes chatBubbleIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.chat-bubble--user{
  align-self: flex-end; background: var(--ink); color: var(--paper);
  border-radius: 14px 14px 2px 14px;
}
.chat-bubble--bot{
  align-self: flex-start; background: #fff; color: var(--ink-70);
  border: 1px solid var(--ink-12);
  border-radius: 14px 14px 14px 2px;
}

.chat-typing{ display: inline-flex; gap: 4px; padding: .15rem 0; }
.chat-typing span{
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-35);
  animation: chatBounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay: .15s; }
.chat-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes chatBounce{
  0%, 80%, 100%{ transform: translateY(0); opacity: .4; }
  40%{ transform: translateY(-4px); opacity: 1; }
}

.chat-input-row{
  display: flex; gap: .6rem; padding: .85rem;
  border-top: 1px solid var(--ink-12); background: var(--paper); flex-shrink: 0;
}
.chat-input{
  flex: 1; border: 1px solid var(--ink-12); background: #fff;
  padding: .65rem .9rem; font-family: var(--font-sans); font-size: .87rem; color: var(--ink);
}
.chat-input:focus{ outline: none; border-color: var(--ink); }
.chat-send{
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--ink); color: var(--paper); border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity .3s var(--ease-lux), transform .3s var(--ease-lux);
}
.chat-send:hover{ opacity: .85; transform: translateY(-2px); }
.chat-send:disabled{ opacity: .35; cursor: not-allowed; transform: none; }
.chat-send svg{ width: 16px; height: 16px; }

@media (max-width: 560px){
  .chat-panel{
    right: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: 78vh;
    border-left: none; border-right: none; border-bottom: none;
  }
  .chat-toggle{ right: 1rem; bottom: 1rem; }
}