/* Made Man Barbershop demo chatbot */
.chatbot { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 200; font-family: var(--font-body, "Inter", system-ui, sans-serif); }
.chatbot__fab { width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: var(--color-brass, #c9a227); color: var(--color-brass-ink, #141210); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px oklch(10% 0.02 60 / 0.45); transition: transform 0.2s ease; position: relative; }
.chatbot__fab:hover { transform: scale(1.06); }
.chatbot__fab svg { width: 28px; height: 28px; }
.chatbot__fab .chatbot__badge { position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; background: #d9534f; border: 2px solid var(--color-void, #121110); }
.chatbot__panel { position: fixed; right: 1.25rem; bottom: 6rem; width: min(380px, calc(100vw - 2.5rem)); height: min(560px, calc(100vh - 8.5rem)); background: var(--color-void-2, #1a1817); border: 1px solid var(--color-rule, #2e2a27); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 70px oklch(8% 0.02 55 / 0.6); opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.chatbot__panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.chatbot__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; background: linear-gradient(135deg, var(--color-void, #121110), #221f1c); border-bottom: 1px solid var(--color-rule, #2e2a27); }
.chatbot__head .grow { flex: 1; }
.chatbot__close { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,0.08); color: var(--color-ink, #eae5db); display: flex; align-items: center; justify-content: center; flex: none; transition: background 0.15s ease; }
.chatbot__close:hover { background: rgba(255,255,255,0.16); }
.chatbot__close svg { width: 16px; height: 16px; }
.chatbot__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--color-brass, #c9a227); display: flex; align-items: center; justify-content: center; flex: none; }
.chatbot__avatar svg { width: 20px; height: 20px; color: var(--color-brass-ink, #141210); }
.chatbot__head h3 { font-size: 0.98rem; margin: 0; color: var(--color-marble, #f2e9dc); }
.chatbot__head p { font-size: 0.75rem; margin: 0; color: var(--color-muted, #8a8478); display: flex; align-items: center; gap: 0.35rem; }
.chatbot__head .dot { width: 7px; height: 7px; border-radius: 50%; background: #4caf50; }
.chatbot__body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem; scroll-behavior: smooth; }
.chatbot__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.6rem 1rem 0.2rem; }
.chatbot__chips button { font-size: 0.76rem; padding: 0.42rem 0.75rem; border-radius: 999px; border: 1px solid var(--color-brass-dim, rgba(201, 162, 39, 0.4)); background: transparent; color: var(--color-brass, #c9a227); cursor: pointer; transition: background 0.15s ease; font-family: inherit; }
.chatbot__chips button:hover { background: var(--color-brass-glow, rgba(201, 162, 39, 0.12)); }
.chatbot__msg { max-width: 84%; padding: 0.6rem 0.85rem; border-radius: 14px; font-size: 0.86rem; line-height: 1.45; white-space: pre-line; }
.chatbot__msg--bot { align-self: flex-start; background: #24211e; border: 1px solid var(--color-rule, #2e2a27); color: var(--color-ink, #eae5db); border-bottom-left-radius: 4px; }
.chatbot__msg--user { align-self: flex-end; background: var(--color-brass, #c9a227); color: var(--color-brass-ink, #141210); border-bottom-right-radius: 4px; font-weight: 500; }
.chatbot__msg--bot a { color: var(--color-brass, #c9a227); }
.chatbot__msg--typing { color: var(--color-muted, #8a8478); font-style: italic; }
.chatbot__foot { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--color-rule, #2e2a27); background: #161412; }
.chatbot__foot input { flex: 1; background: #201d1a; border: 1px solid var(--color-rule, #2e2a27); border-radius: 999px; padding: 0.55rem 0.9rem; color: var(--color-ink, #eae5db); font-size: 0.86rem; outline: none; font-family: inherit; }
.chatbot__foot input::placeholder { color: var(--color-muted, #8a8478); }
.chatbot__foot button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--color-brass, #c9a227); color: var(--color-brass-ink, #141210); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.chatbot__foot button svg { width: 17px; height: 17px; }
@media (max-width: 480px) {
  .chatbot__panel { right: 0.75rem; bottom: 5.5rem; width: calc(100vw - 1.5rem); }
}