/* AI chat widget — Yellow Stone Traders & General Supplies
   The panel itself is a light "paper" surface (for readability of long
   replies) sitting on the site's dark charcoal/gold theme, so colors are
   set explicitly here rather than inherited from <body>. */
.yst-chat-launcher{
  position: fixed; left: 24px; bottom: 24px; z-index: 95;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gold); color: var(--true-dark);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; box-shadow: var(--shadow-soft);
  transition: transform .2s ease, background .2s ease;
}
.yst-chat-launcher:hover{ transform: translateY(-3px); background: var(--gold-pale); }
.yst-chat-launcher svg{ width:26px; height:26px; }
.yst-chat-launcher .dot{
  position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%;
  background: var(--rust); border:2px solid var(--true-dark);
}

.yst-chat-panel{
  position: fixed; left: 24px; bottom: 92px; z-index: 96;
  width: min(360px, calc(100vw - 48px));
  height: min(520px, calc(100vh - 150px));
  background: var(--cream);
  color: var(--true-dark);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(16px) scale(.98);
  opacity: 0; pointer-events:none;
  transition: all .22s ease;
  border: 1px solid var(--line);
}
.yst-chat-panel.open{ transform:none; opacity:1; pointer-events:auto; }

.yst-chat-head{
  background: var(--true-dark); color:#fff;
  padding: 16px 18px; display:flex; align-items:center; gap:10px;
}
.yst-chat-head img{ width:30px; height:30px; border-radius:50%; background:#fff; padding:3px; }
.yst-chat-head div{ flex:1; }
.yst-chat-head strong{ display:block; font-size:.94rem; font-family: var(--font-display); text-transform:uppercase; letter-spacing:.02em; }
.yst-chat-head span{ font-size:.74rem; color: rgba(255,255,255,.65); }
.yst-chat-close{ background:none; border:none; color: rgba(255,255,255,.8); cursor:pointer; padding:4px; }
.yst-chat-close svg{ width:18px; height:18px; }

.yst-chat-body{
  flex:1; overflow-y:auto; padding: 16px; display:flex; flex-direction:column; gap:10px;
  background: var(--cream);
}
.yst-msg{ max-width: 85%; padding: 10px 14px; border-radius: 10px; font-size:.88rem; line-height:1.45; color: var(--true-dark); }
.yst-msg.bot{ background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:3px; }
.yst-msg.user{ background: var(--gold); color: var(--true-dark); align-self:flex-end; border-bottom-right-radius:3px; font-weight:600; }
.yst-msg.typing{ display:flex; gap:4px; align-items:center; padding:12px 14px; }
.yst-msg.typing span{ width:6px; height:6px; border-radius:50%; background: var(--true-dark); opacity:.4; animation: ystTyping 1s infinite; }
.yst-msg.typing span:nth-child(2){ animation-delay:.15s; }
.yst-msg.typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ystTyping{ 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-2px);} }

.yst-chat-suggestions{ display:flex; flex-wrap:wrap; gap:6px; padding: 0 16px 12px; background: var(--cream); }
.yst-chip{
  border:1.5px solid var(--line); background:#fff; color: var(--rust);
  border-radius:999px; padding:6px 12px; font-size:.76rem; cursor:pointer; font-weight:600;
}
.yst-chip:hover{ border-color: var(--gold); color: var(--gold-ink); }

.yst-chat-form{
  display:flex; gap:8px; padding: 12px; border-top:1px solid var(--line); background:#fff;
}
.yst-chat-form input{
  flex:1; border:1.5px solid var(--line); border-radius: 999px; padding: 10px 16px;
  font-family: var(--font-body); font-size:.88rem; background: var(--cream); color: var(--true-dark);
}
.yst-chat-form input:focus{ outline:none; border-color: var(--gold); }
.yst-chat-form button{
  width:40px; height:40px; border-radius:50%; border:none; background: var(--gold); color: var(--true-dark);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.yst-chat-form button:hover{ background: var(--gold-deep); }
.yst-chat-form button svg{ width:18px; height:18px; }

@media (max-width: 480px){
  .yst-chat-launcher{ left:16px; bottom:16px; }
  .yst-chat-panel{ left:16px; bottom: 84px; }
}
