#jb-chat-root { --jb-bg:#FCF6EF; --jb-caramel:#C2884F; --jb-brown:#7B3E16; --jb-text:#4B4F58;
  font-family: Vazirmatn, Tahoma, sans-serif; position: fixed; bottom: 20px; left: 20px; z-index: 99999; }
#jb-chat-root * { box-sizing: border-box; font-family: inherit; }
#jb-chat-fab { width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--jb-brown); color: #fff; box-shadow: 0 6px 20px rgba(123,62,22,.35);
  display: grid; place-items: center; transition: transform .2s; }
#jb-chat-fab:hover { transform: scale(1.07); }
#jb-chat-panel { position: absolute; bottom: 76px; left: 0; width: 360px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 120px); background: var(--jb-bg); border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
#jb-chat-panel[hidden] { display: none; }
#jb-chat-root .jb-chat-head { background: var(--jb-brown); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
#jb-chat-root .jb-chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--jb-caramel); display: grid; place-items: center; font-size: 20px; }
#jb-chat-root .jb-chat-titles { flex: 1; display: flex; flex-direction: column; line-height: 1.5; }
#jb-chat-root .jb-chat-titles span { font-size: 12px; opacity: .8; }
#jb-chat-root .jb-chat-close { background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
#jb-chat-root .jb-chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#jb-chat-root .jb-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; line-height: 1.8; font-size: 14px; animation: jb-in .25s ease; }
#jb-chat-root .jb-bot { background: #fff; color: var(--jb-text); align-self: flex-start; border-bottom-right-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
#jb-chat-root .jb-user { background: var(--jb-caramel); color: #fff; align-self: flex-end; border-bottom-left-radius: 4px; }
#jb-chat-root .jb-options { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; width: 85%; }
#jb-chat-root .jb-opt { background: transparent; border: 1.5px solid var(--jb-caramel); color: var(--jb-brown);
  padding: 8px 12px; border-radius: 12px; cursor: pointer; text-align: right; font-size: 14px; transition: background .15s; }
#jb-chat-root .jb-opt:hover:not(:disabled) { background: var(--jb-caramel); color: #fff; }
#jb-chat-root .jb-opt:disabled { opacity: .45; cursor: default; }
#jb-chat-root .jb-result { border: 2px solid var(--jb-caramel); }
#jb-chat-root .jb-result h4 { margin: 0 0 4px; color: var(--jb-brown); font-size: 17px; }
#jb-chat-root .jb-tally { font-size: 12px; opacity: .75; margin-top: 6px; }
#jb-chat-root .jb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#jb-chat-root .jb-btn { border: 0; border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 13px; text-decoration: none; }
#jb-chat-root .jb-btn-main { background: var(--jb-brown); color: #fff; }
#jb-chat-root .jb-btn-alt { background: #fff; color: var(--jb-brown); border: 1.5px solid var(--jb-brown); }
#jb-chat-root .jb-typing { display: inline-flex; gap: 4px; }
#jb-chat-root .jb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--jb-caramel); animation: jb-dot 1s infinite; }
#jb-chat-root .jb-typing i:nth-child(2) { animation-delay: .15s; }
#jb-chat-root .jb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes jb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes jb-dot { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* Recommended product cards (result bubble) */
#jb-chat-root .jb-result { max-width: 100%; width: 100%; }
#jb-chat-root .jb-prod-title { margin-top: 10px; font-weight: 600; color: var(--jb-brown); font-size: 13px; }
#jb-chat-root .jb-products { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#jb-chat-root .jb-prod { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px;
  background: var(--jb-bg); border: 1px solid #eadccb; border-radius: 12px; text-decoration: none;
  color: var(--jb-text); font-size: 12px; line-height: 1.6; text-align: center; transition: border-color .15s, transform .15s; }
#jb-chat-root .jb-prod:hover { border-color: var(--jb-caramel); transform: translateY(-2px); }
#jb-chat-root .jb-prod img { width: 100%; height: 90px; object-fit: contain; }