/* Little Patty B chat widget — Brooks' Bike Shop
   Palette/type matched to brooksbikeshop.com (staging): pine, gold, cream, Barlow. */
.lpb-root {
  --lpb-bg: #f7f5ee; --lpb-surface: #fffdf7; --lpb-ink: #1d2620;
  --lpb-muted: #59655c; --lpb-line: #ddd8c8; --lpb-pine: #175637;
  --lpb-pine-deep: #0c3520; --lpb-gold: #c96f04; --lpb-gold-bright: #eda11c;
  --lpb-chip: #e9e6d8; --lpb-radius: 14px;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--lpb-ink);
}
.lpb-launch {
  position: fixed; right: 18px; bottom: 18px; z-index: 9998;
  display: flex; align-items: center; gap: 10px;
  background: var(--lpb-pine); border: 2px solid var(--lpb-gold-bright);
  border-radius: 999px; padding: 6px 16px 6px 6px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(20, 40, 25, .25);
}
.lpb-launch img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  background: var(--lpb-bg); display: block;
}
.lpb-launch-tag {
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  font-family: "Barlow Condensed", "Barlow", sans-serif; text-transform: uppercase;
}
.lpb-launch:hover { background: var(--lpb-pine-deep); }
.lpb-hide { display: none !important; }

.lpb-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: 384px; max-width: calc(100vw - 24px);
  height: 580px; max-height: calc(100dvh - 110px);
  display: flex; flex-direction: column;
  background: var(--lpb-surface); border: 1px solid var(--lpb-line);
  border-radius: var(--lpb-radius); overflow: hidden;
  box-shadow: 0 18px 50px rgba(20, 40, 25, .28);
}
.lpb-panel[hidden] { display: none; }
.lpb-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--lpb-pine); color: #fff; padding: 10px 12px;
}
.lpb-head img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  background: var(--lpb-bg); border: 2px solid var(--lpb-gold-bright);
}
.lpb-head-txt { flex: 1; line-height: 1.15; }
.lpb-head-txt strong {
  display: block; font-size: 18px;
  font-family: "Barlow Condensed", "Barlow", sans-serif; letter-spacing: .03em;
}
.lpb-head-txt span { font-size: 12.5px; opacity: .85; }
.lpb-close {
  background: none; border: none; color: #fff; font-size: 26px;
  line-height: 1; cursor: pointer; padding: 2px 6px;
}
.lpb-msgs {
  flex: 1; overflow-y: auto; padding: 14px 12px;
  background: var(--lpb-bg); display: flex; flex-direction: column; gap: 8px;
}
.lpb-msg {
  max-width: 86%; padding: 9px 12px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.45; white-space: normal; word-wrap: break-word;
}
.lpb-bot {
  background: var(--lpb-surface); border: 1px solid var(--lpb-line);
  align-self: flex-start; border-bottom-left-radius: 4px;
}
.lpb-user {
  background: var(--lpb-pine); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.lpb-cards { display: flex; flex-direction: column; gap: 6px; max-width: 86%; }
.lpb-card {
  display: block; text-decoration: none; color: var(--lpb-ink);
  background: var(--lpb-surface); border: 1px solid var(--lpb-line);
  border-left: 4px solid var(--lpb-gold); border-radius: 10px; padding: 8px 10px;
}
.lpb-card strong { display: block; font-size: 14.5px; }
.lpb-card-meta { display: block; font-size: 12px; color: var(--lpb-muted); }
.lpb-card-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.lpb-card-price { font-weight: 700; color: var(--lpb-pine); font-size: 15px; }
.lpb-card-status {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--lpb-chip); border-radius: 999px; padding: 2px 8px;
}
.lpb-more { font-size: 12.5px; color: var(--lpb-muted); margin: 0; }
.lpb-links { display: flex; flex-wrap: wrap; gap: 6px; }
.lpb-links a {
  font-size: 13px; font-weight: 600; color: var(--lpb-pine-deep);
  background: #eaf4ec; border: 1px solid var(--lpb-pine);
  padding: 5px 10px; border-radius: 999px; text-decoration: none;
}
.lpb-chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 2px;
  background: var(--lpb-bg); scrollbar-width: none;
}
.lpb-chips::-webkit-scrollbar { display: none; }
.lpb-chip {
  flex: 0 0 auto; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--lpb-chip); color: var(--lpb-ink);
  border: 1px solid var(--lpb-line); border-radius: 999px; padding: 6px 11px;
}
.lpb-chip:hover { border-color: var(--lpb-gold); }
.lpb-form {
  display: flex; gap: 8px; padding: 10px; background: var(--lpb-surface);
  border-top: 1px solid var(--lpb-line);
}
.lpb-input {
  flex: 1; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--lpb-line); border-radius: 999px; background: #fff;
  color: var(--lpb-ink); min-width: 0;
}
.lpb-input:focus { outline: 2px solid var(--lpb-gold-bright); outline-offset: 0; }
.lpb-send {
  background: var(--lpb-gold); color: #2a1a00; font-weight: 700; font-size: 14px;
  border: none; border-radius: 999px; padding: 10px 16px; cursor: pointer;
}
.lpb-send:hover { background: var(--lpb-gold-bright); }
.lpb-foot {
  margin: 0; padding: 0 12px 9px; font-size: 11.5px; color: var(--lpb-muted);
  background: var(--lpb-surface); text-align: center;
}
@media (max-width: 480px) {
  .lpb-panel { right: 8px; bottom: 8px; height: calc(100dvh - 90px); }
  .lpb-launch { right: 12px; bottom: 12px; }
  .lpb-launch-tag { display: none; }
  .lpb-launch { padding: 5px; }
}