/* 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 . */ .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; } }