/* ==========================================================================
   Ask Blip widget — compact question card with inline answer thread.
   Markup: includes/widgets/ask-blip.php   Behaviour: assets/js/components/ask-blip.js
   ========================================================================== */
.pb-ask { padding: 16px 16px 14px; border-radius: var(--pb-r-xl); }
.pb-ask__hd { display: flex; align-items: center; gap: 12px; }
.pb-ask__ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--pb-surface-warm);
  display: flex; align-items: center; justify-content: center; color: var(--pb-primary); font-size: 19px;
}
.pb-ask__txt { flex: 1; min-width: 0; }
.pb-ask__title { font-family: var(--pb-font-head); font-weight: 900; font-size: 20px; line-height: 1.1; }
.pb-ask__sub { margin-top: 2px; font-size: 14px; color: var(--pb-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pb-ask__form {
  display: flex; align-items: center; gap: 12px; height: 52px; margin-top: 14px; padding: 0 6px 0 18px;
  border: 1px solid var(--pb-border-3); border-radius: 26px; background: #fff; box-shadow: 0 2px 8px rgba(60, 40, 0, .04);
}
.pb-ask__form:focus-within { border-color: #d9c27a; box-shadow: 0 0 0 3px rgba(144, 109, 2, .12); }
.pb-ask__form > i { font-size: 16px; color: var(--pb-text-3); }
.pb-ask__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--pb-text); }
.pb-ask__send {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--pb-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background .15s;
}
.pb-ask__send:hover { background: var(--pb-primary-hover); }
.pb-ask__send[disabled] { opacity: .6; cursor: default; }

/* Conversation thread — hidden until the first question is asked */
.pb-ask__chat { display: none; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; margin-top: 14px; }
.pb-ask__chat.has-msgs { display: flex; }
.pb-ask__msg { max-width: 92%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.pb-ask__msg--user { align-self: flex-end; background: var(--pb-primary); color: #fff; border-bottom-right-radius: 4px; }
.pb-ask__msg--blip { align-self: flex-start; background: #fef8ea; color: var(--pb-text-2); border-bottom-left-radius: 4px; }
.pb-ask__msg--error { align-self: flex-start; background: #fff1f1; color: #c0262c; }
.pb-ask__label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-family: var(--pb-font-head); font-weight: 800; font-size: 13px; color: var(--pb-primary); }
.pb-ask__thinking { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 16px; background: #fef8ea; font-size: 14px; color: var(--pb-text-3); }
.pb-ask__dots { display: flex; gap: 4px; }
.pb-ask__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--pb-orange-2); animation: pb-bounce 1s infinite ease-in-out; }
.pb-ask__dots span:nth-child(2) { animation-delay: .15s; } .pb-ask__dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pb-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.pb-ask__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--pb-text-faint); }
.pb-ask__foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-ask__foot a { flex: none; white-space: nowrap; }
.pb-ask__foot a { font-weight: 700; color: var(--pb-link); }

/* ── Highlight treatment: warm gradient card, glowing paw badge, AI pill, suggested questions ── */
.pb-ask {
  position: relative; overflow: hidden; border: 1.5px solid #f3d58a;
  background: linear-gradient(135deg, #fff4d6 0%, #fffaf0 48%, #fff 100%);
  box-shadow: 0 6px 22px rgba(251, 154, 26, .16), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.pb-ask::before { /* big soft paw watermark, top right */
  content: "\f1b0"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; right: -14px; top: -18px; font-size: 118px; line-height: 1; color: #fbb231; opacity: .12; transform: rotate(18deg); pointer-events: none;
}
.pb-ask > * { position: relative; }
.pb-ask__ico {
  background: linear-gradient(145deg, #ffb23f, #f97316); color: #fff;
  box-shadow: 0 4px 12px rgba(249, 115, 22, .38), 0 0 0 4px rgba(251, 178, 49, .22);
}
.pb-ask__title { display: flex; align-items: center; gap: 8px; }
.pb-ask__ai {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 10px;
  background: #141414; color: #ffd37a; font-family: var(--pb-font-head); font-weight: 800; font-size: 10.5px; letter-spacing: .06em;
}
.pb-ask__ai i { font-size: 9px; }
.pb-ask__sub { color: #7a5d18; }
.pb-ask__hd .pb-round-btn { background: #fff; color: var(--pb-primary); box-shadow: 0 2px 8px rgba(144, 109, 2, .18); }
.pb-ask__form { border: 1.5px solid #f0c96a; box-shadow: 0 4px 14px rgba(251, 154, 26, .14); }
.pb-ask__form > i { color: var(--pb-orange); }
.pb-ask__send { background: linear-gradient(145deg, #fb9a1a, #e0780a); box-shadow: 0 3px 10px rgba(224, 120, 10, .4); }
.pb-ask__send:hover { background: linear-gradient(145deg, #f58c0a, #c96a06); }
.pb-ask__try { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pb-ask__try::-webkit-scrollbar { display: none; }
.pb-ask__try button {
  flex: none; height: 32px; padding: 0 14px; border: 1px solid #f0d58f; border-radius: 16px; background: rgba(255, 255, 255, .85);
  font-family: var(--pb-font-body); font-weight: 600; font-size: 13.5px; color: #6d5000; white-space: nowrap; cursor: pointer;
}
.pb-ask__try button:hover { background: #fff; border-color: var(--pb-orange); color: var(--pb-primary); }
.pb-ask__foot { color: #8a7a50; }
.pb-ask__chat.has-msgs ~ .pb-ask__try { display: none; }

/* ── Phones: compact but still the standout card on the page ── */
@media (max-width: 899px) {
  .pb-ask { padding: 12px 12px 10px; border-radius: 16px; }
  .pb-ask::before { font-size: 96px; right: -10px; top: -14px; }
  .pb-ask__hd { gap: 10px; }
  .pb-ask__ico { width: 40px; height: 40px; font-size: 17px; }
  .pb-ask__title { font-size: 18px; gap: 7px; }
  .pb-ask__ai { height: 18px; padding: 0 7px; font-size: 9.5px; }
  .pb-ask__sub { margin-top: 1px; font-size: 12.5px; }
  .pb-ask__form { height: 44px; gap: 8px; margin-top: 10px; padding: 0 4px 0 14px; border-radius: 22px; }
  .pb-ask__form > i { font-size: 14px; }
  .pb-ask__form input { font-size: 15px; }
  .pb-ask__send { width: 36px; height: 36px; font-size: 13px; }
  .pb-ask__try { gap: 6px; margin: 8px -12px 0; padding: 0 12px 2px; }
  .pb-ask__try button { height: 28px; padding: 0 12px; font-size: 12.5px; }
  .pb-ask__chat { margin-top: 8px; gap: 8px; }
  .pb-ask__msg { padding: 8px 12px; font-size: 13.5px; }
  .pb-ask__foot { margin-top: 8px; font-size: 11.5px; }
}