/* Sole chatbot widget — earth-tone theme matching Shoes Are Bad */
#sole-widget { position: fixed; right: 18px; bottom: 18px; z-index: 99999; font-family: inherit; line-height: 1.45; }
#sole-widget button { font-family: inherit; }

#sole-fab {
  width: 66px; height: 66px; border-radius: 50%;
  border: 3px solid #2f6b3a; background: #faf6ee;
  cursor: pointer; padding: 0; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: transform .15s ease;
  animation: sole-nudge 2.6s ease-in-out 3;
  display: block;
}
#sole-fab:hover { transform: scale(1.08); }
#sole-fab.sole-open { animation: none; }
#sole-fab img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes sole-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

#sole-panel {
  position: absolute; right: 0; bottom: 78px;
  width: 382px; max-width: calc(100vw - 36px);
  height: 540px; max-height: calc(100vh - 130px);
  background: #faf6ee; border: 2px solid #2f6b3a; border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  display: flex; flex-direction: column; overflow: hidden;
}
#sole-panel[hidden] { display: none; }

#sole-header {
  background: #2f6b3a; color: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; flex: 0 0 auto;
}
#sole-header img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #faf6ee; }
#sole-header .sole-title { flex: 1; display: flex; flex-direction: column; }
#sole-header .sole-title strong { font-size: 17px; }
#sole-header .sole-title span { font-size: 12px; opacity: .85; }
#sole-header button {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px;
}
#sole-header button:hover { background: rgba(255,255,255,.3); }

#sole-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sole-row { display: flex; }
.sole-bot { justify-content: flex-start; }
.sole-user { justify-content: flex-end; }
.sole-bubble {
  max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 14px; color: #4a3728;
  word-wrap: break-word;
}
.sole-bot .sole-bubble { background: #fff; border: 1px solid #e2d5b8; border-bottom-left-radius: 4px; }
.sole-user .sole-bubble { background: #2f6b3a; color: #fff; border-bottom-right-radius: 4px; }
.sole-bubble a { color: #2f6b3a; font-weight: 600; }
.sole-user .sole-bubble a { color: #fff; }

.sole-typing { display: inline-flex; gap: 5px; padding: 12px 14px; }
.sole-typing span { width: 8px; height: 8px; border-radius: 50%; background: #a8926a; animation: sole-blink 1.2s infinite; }
.sole-typing span:nth-child(2) { animation-delay: .2s; }
.sole-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sole-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

#sole-chips { display: none; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; flex: 0 0 auto; }
.sole-chip {
  background: #e8dcc3; color: #4a3728; border: 1px solid #d3c096;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.sole-chip:hover { background: #dccb9f; }

#sole-inputrow { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #e2d5b8; flex: 0 0 auto; align-items: center; }
#sole-input {
  flex: 1; border: 1px solid #d3c096; border-radius: 999px;
  padding: 9px 14px; font-size: 14px; background: #fff; color: #4a3728; outline: none;
}
#sole-input:focus { border-color: #2f6b3a; }
#sole-send, #sole-mic {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 17px;
  background: #2f6b3a; color: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
#sole-send:hover, #sole-mic:hover { background: #245a2f; }
#sole-mic.on { background: #b3402e; animation: sole-blink 1s infinite; }

#sole-foot { font-size: 11px; color: #8a7554; text-align: center; padding: 6px 8px 8px; flex: 0 0 auto; }

@media (max-width: 480px) {
  #sole-widget { right: 12px; bottom: 12px; }
  #sole-panel { bottom: 74px; height: calc(100vh - 160px); }
}