/* Yogaverse Guides floating chatbot. */
#yv-chatbot-container {
position: fixed;
right: clamp(1.2rem, 3vw, 2.35rem);
bottom: clamp(1.25rem, 3vw, 2.2rem);
z-index: 125;
font-family: var(--font-body), -apple-system, "Segoe UI", sans-serif;
color: var(--text, #1c3a28);
}

.yv-chat-toggle {
display: inline-flex;
align-items: center;
gap: 0.7rem;
min-width: 218px;
max-width: calc(100vw - 2rem);
min-height: 58px;
padding: 0.62rem 0.9rem 0.62rem 0.68rem;
border: 1px solid rgba(47, 128, 85, 0.2);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(237, 247, 241, 0.92)),
linear-gradient(120deg, rgba(212, 160, 23, 0.12), rgba(125, 212, 174, 0.2));
color: var(--ink-900, #1e4d32);
box-shadow: 0 18px 42px -26px rgba(30, 77, 50, 0.5);
backdrop-filter: blur(14px);
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
animation: yvChatPulse 3.2s ease-in-out infinite;
}

.yv-chat-toggle:hover,
.yv-chat-toggle:focus-visible {
transform: translateY(-2px);
border-color: rgba(47, 128, 85, 0.36);
box-shadow: 0 22px 50px -28px rgba(30, 77, 50, 0.65);
outline: none;
}

.yv-chat-toggle.hidden {
display: none;
}

.yv-chat-toggle__icon {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--grad-accent, linear-gradient(120deg, #3aab74, #7dd4ae 55%, #4eb87a));
color: #fff;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
box-shadow: 0 12px 24px -15px rgba(47, 128, 85, 0.8);
}

.yv-chat-toggle__icon svg {
display: block;
width: 24px;
height: 24px;
}

.yv-chat-toggle__copy {
display: grid;
gap: 0.05rem;
text-align: left;
line-height: 1.15;
}

.yv-chat-toggle__copy strong {
font-size: 0.92rem;
font-weight: 700;
}

.yv-chat-toggle__copy small {
font-size: 0.74rem;
font-weight: 700;
color: var(--text-soft, #507060);
}

.yv-chat-window {
position: fixed;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(392px, calc(100vw - 2rem));
height: min(620px, calc(100vh - 7.5rem));
min-width: 320px;
min-height: 430px;
max-width: calc(100vw - 2rem);
max-height: calc(100vh - 7.5rem);
border: 1px solid rgba(47, 128, 85, 0.16);
border-radius: 22px 0 0 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(249, 253, 251, 0.98)),
var(--paper, #fff);
box-shadow: 0 28px 70px -38px rgba(30, 77, 50, 0.58);
overflow: hidden;
resize: none;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.98);
transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s;
}

.yv-chat-window.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}

.yv-chat-window.minimized {
height: auto !important;
min-height: 0;
resize: none;
border-radius: 22px 0 0 0;
}

.yv-chat-resize {
position: absolute;
top: 0.55rem;
left: 0.55rem;
z-index: 4;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 1px solid rgba(47, 128, 85, 0.18);
border-radius: 8px;
background: rgba(255, 255, 255, 0.76);
color: var(--sage-dk, #2f8055);
cursor: nwse-resize;
opacity: 0.86;
}

.yv-chat-resize::before {
content: "";
width: 10px;
height: 10px;
border-top: 2px solid currentColor;
border-left: 2px solid currentColor;
border-radius: 2px 0 0 0;
}

.yv-chat-resize:hover,
.yv-chat-resize:focus-visible {
outline: none;
opacity: 1;
box-shadow: var(--ring, 0 0 0 3px rgba(58, 171, 116, 0.35));
}

.yv-chat-window.minimized .yv-chat-resize {
display: none;
}

body.yv-chat-resizing {
user-select: none;
cursor: nwse-resize;
}

.yv-chat-window.minimized .yv-chat-messages,
.yv-chat-window.minimized .yv-chat-input-area {
display: none;
}

.yv-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1rem 0.9rem 2.7rem;
background:
linear-gradient(135deg, rgba(237, 247, 241, 0.95), rgba(255, 255, 255, 0.86)),
linear-gradient(120deg, rgba(212, 160, 23, 0.13), rgba(78, 184, 122, 0.16));
border-bottom: 1px solid rgba(47, 128, 85, 0.12);
}

.yv-chat-window.minimized .yv-chat-header {
border-bottom: 0;
}

.yv-chat-header p {
margin: 0 0 0.15rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sage-dk, #2f8055);
}

.yv-chat-header h3 {
margin: 0;
font-family: var(--font-heading);
font-size: 1.26rem;
font-weight: 600;
letter-spacing: 0;
color: var(--ink-900, #1e4d32);
}

.yv-chat-header__actions {
display: inline-flex;
align-items: center;
gap: 0.42rem;
flex: 0 0 auto;
}

.yv-chat-window-control {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(47, 128, 85, 0.18);
border-radius: 50%;
background: rgba(255, 255, 255, 0.72);
color: var(--sage-dk, #2f8055);
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}

.yv-chat-window-control:hover,
.yv-chat-window-control:focus-visible {
outline: none;
box-shadow: var(--ring, 0 0 0 3px rgba(58, 171, 116, 0.35));
}

.yv-chat-messages {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.72rem;
padding: 1rem;
overflow-y: auto;
background:
radial-gradient(circle at 18% 0%, rgba(125, 212, 174, 0.12), transparent 26%),
linear-gradient(180deg, #fbfefb, #f7fcf9);
}

.yv-chat-messages::-webkit-scrollbar {
width: 6px;
}

.yv-chat-messages::-webkit-scrollbar-track {
background: transparent;
}

.yv-chat-messages::-webkit-scrollbar-thumb {
background: rgba(47, 128, 85, 0.28);
border-radius: 999px;
}

.yv-chat-message {
display: flex;
align-items: flex-end;
gap: 0.48rem;
max-width: 100%;
animation: yvChatMessageIn 0.22s ease both;
}

.yv-chat-message.user-message {
justify-content: flex-end;
}

.yv-chat-message.bot-message {
justify-content: flex-start;
flex-wrap: wrap;
}

.yv-chat-avatar {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(47, 128, 85, 0.12);
border: 1px solid rgba(47, 128, 85, 0.16);
color: var(--sage-dk, #2f8055);
font-size: 0.78rem;
font-weight: 700;
flex: 0 0 auto;
}

.yv-message-text {
max-width: min(82%, 295px);
padding: 0.72rem 0.88rem;
border-radius: 15px;
font-size: 0.9rem;
line-height: 1.48;
white-space: pre-wrap;
word-wrap: break-word;
}

.user-message .yv-message-text {
background: var(--grad-accent, linear-gradient(120deg, #3aab74, #7dd4ae 55%, #4eb87a));
color: #fff;
border-bottom-right-radius: 5px;
box-shadow: 0 12px 24px -20px rgba(47, 128, 85, 0.8);
}

.bot-message .yv-message-text {
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(47, 128, 85, 0.12);
color: var(--text, #1c3a28);
border-bottom-left-radius: 5px;
}

.yv-chat-actions {
display: flex;
flex-wrap: wrap;
gap: 0.42rem;
width: calc(100% - 38px);
margin-left: 38px;
margin-top: -0.18rem;
}

.yv-chat-action {
min-height: 34px;
padding: 0.45rem 0.68rem;
border: 1px solid rgba(47, 128, 85, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
color: var(--ink-900, #1e4d32);
font: inherit;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.1;
cursor: pointer;
transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.yv-chat-action:hover,
.yv-chat-action:focus-visible {
transform: translateY(-1px);
border-color: rgba(47, 128, 85, 0.38);
background: rgba(237, 247, 241, 0.96);
outline: none;
}

.yv-typing {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.yv-typing-label {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-soft, #507060);
}

.typing-indicator {
display: inline-flex;
gap: 4px;
align-items: center;
}

.typing-indicator span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sage, #4eb87a);
animation: yvTyping 1.15s infinite;
}

.typing-indicator span:nth-child(2) {
animation-delay: 0.16s;
}

.typing-indicator span:nth-child(3) {
animation-delay: 0.32s;
}

.yv-chat-input-area {
display: flex;
align-items: flex-end;
gap: 0.58rem;
padding: 0.9rem;
border-top: 1px solid rgba(47, 128, 85, 0.12);
background: rgba(255, 255, 255, 0.95);
}

.yv-chat-end {
display: none;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 0.62rem;
border: 1px solid rgba(47, 128, 85, 0.18);
border-radius: 14px;
background: rgba(237, 247, 241, 0.86);
color: var(--sage-dk, #2f8055);
font: inherit;
font-size: 0.74rem;
font-weight: 700;
cursor: pointer;
}

.yv-chat-end.visible {
display: inline-flex;
}

.yv-chat-end:hover,
.yv-chat-end:focus-visible {
outline: none;
background: rgba(255, 255, 255, 0.96);
box-shadow: var(--ring, 0 0 0 3px rgba(58, 171, 116, 0.35));
}

.yv-chat-input {
flex: 1;
min-height: 42px;
max-height: 104px;
padding: 0.65rem 0.78rem;
border: 1px solid rgba(47, 128, 85, 0.18);
border-radius: 14px;
background: rgba(249, 253, 251, 0.96);
color: var(--text, #1c3a28);
font: inherit;
font-size: 0.9rem;
line-height: 1.35;
resize: none;
outline: none;
}

.yv-chat-input:focus {
border-color: rgba(47, 128, 85, 0.45);
box-shadow: var(--ring, 0 0 0 3px rgba(58, 171, 116, 0.35));
}

.yv-chat-input::placeholder {
color: rgba(80, 112, 96, 0.72);
}

.yv-chat-send {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border: none;
border-radius: 14px;
background: var(--grad-accent, linear-gradient(120deg, #3aab74, #7dd4ae 55%, #4eb87a));
color: #fff;
cursor: pointer;
box-shadow: 0 12px 24px -18px rgba(47, 128, 85, 0.8);
}

.yv-chat-send:hover,
.yv-chat-send:focus-visible {
outline: none;
transform: translateY(-1px);
box-shadow: 0 16px 28px -20px rgba(47, 128, 85, 0.9);
}

@keyframes yvChatPulse {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}

@keyframes yvChatMessageIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes yvTyping {
0%, 70%, 100% { opacity: 0.45; transform: translateY(0); }
35% { opacity: 1; transform: translateY(-5px); }
}

@media (max-width: 560px) {
#yv-chatbot-container {
right: 1rem;
bottom: 1rem;
}

.yv-chat-toggle {
min-width: 0;
padding-right: 0.78rem;
}

.yv-chat-toggle__copy small {
display: none;
}

.yv-chat-window {
right: 0;
bottom: 0;
width: calc(100vw - 2rem);
height: min(610px, calc(100vh - 6rem));
min-width: 0;
min-height: 390px;
resize: none;
}

.yv-message-text {
max-width: min(84%, 280px);
font-size: 0.88rem;
}
}

@media (prefers-reduced-motion: reduce) {
.yv-chat-toggle,
.yv-chat-message,
.typing-indicator span {
animation: none !important;
transition: none !important;
}
}

/* Phones: a round 56px chat button so it covers less of the page.
The label stays available to screen readers. */
@media (max-width: 780px) {
#yv-chatbot-container {
right: 16px;
bottom: 16px;
}

.yv-chat-toggle {
justify-content: center;
width: 56px;
min-width: 0;
height: 56px;
min-height: 56px;
padding: 0;
border-radius: 50%;
}

.yv-chat-toggle__icon {
width: 44px;
height: 44px;
}

.yv-chat-toggle__copy {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}