.floating-link{z-index: 1000; cursor: pointer; overflow: hidden; white-space: nowrap; gap: 1rem; transition: width .35s ease, box-shadow .35s ease;}
.floating-link img{flex: 0 0 4.6rem; width: 4.6rem; max-width: none;}
.floating-link-label{color: var(--primary-color); font-family: var(--font-family); font-size: var(--fs-md); opacity: 0; transform: translateX(.8rem); transition: opacity .25s ease, transform .35s ease;}
@media(width > 991px){
    .floating-link:is(:hover, :focus-visible){width: 25rem; box-shadow: -.5rem .6rem 2rem rgba(var(--primary-dark-color-rgb), .12);}
    .floating-link:is(:hover, :focus-visible) .floating-link-label{opacity: 1; transform: translateX(0);}
}
@media(width < 992px){
    .floating-link img{flex-basis: 3.8rem; width: 3.8rem;}
}
.floating-link:focus-visible{outline: .2rem solid var(--primary-color); outline-offset: .3rem;}

html.chat-open, body.chat-open{overflow: hidden !important;}

.chat-overlay{
    --chat-line: rgba(var(--primary-dark-color-rgb), .17);
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .38s;
}
.chat-overlay.is-open{visibility: visible; pointer-events: auto; transition-delay: 0s;}
.chat-backdrop{position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(31, 16, 17, .45); opacity: 0; cursor: pointer; transition: opacity .38s ease;}
.chat-overlay.is-open .chat-backdrop{opacity: 1;}

.chat-panel{
    position: absolute;
    right: 0;
    top: 0;
    width: min(48rem, 100%);
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--off-white-color);
    color: var(--primary-dark-color);
    box-shadow: -.8rem 0 4rem rgba(31, 16, 17, .13);
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1);
    font-family: var(--font-family);
}
.chat-overlay.is-open .chat-panel{transform: translateX(0);}
.chat-panel button{font-family: var(--font-family);}
.chat-panel :is(button, a):focus-visible{outline: .2rem solid var(--primary-color); outline-offset: .2rem;}

.chat-header{display: flex; justify-content: space-between; align-items: flex-start; gap: 1.6rem; padding: 2.8rem var(--gutter) 2.4rem; border-bottom: .1rem solid var(--chat-line);}
.chat-header h2{font-size: clamp(2.7rem, 3vw, 3.5rem); line-height: 1.12; color: var(--primary-color);}
.chat-header-actions{display: flex; gap: .7rem; flex-shrink: 0;}
.chat-icon-button{display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border: .1rem solid var(--chat-line); border-radius: 50%; background: transparent; color: var(--primary-color); font-size: 2.3rem; line-height: 1; cursor: pointer; transition: background-color .2s ease, border-color .2s ease;}
.chat-icon-button:hover{background: var(--cream-color); border-color: var(--primary-color);}
.chat-close{font-size: 2.7rem;}

.chat-log{display: flex; flex-direction: column; gap: 1.2rem; min-height: 0; overflow-y: auto; padding: 2.4rem var(--gutter); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--chat-line) transparent;}
.message-row{display: flex; flex: none;}
.message-row.user{justify-content: flex-end;}
.bubble{max-width: 88%; padding: 1.2rem 1.5rem; font-size: 1.5rem; line-height: 1.45; overflow-wrap: anywhere; animation: chat-message-in .22s ease both;}
.message-row.bot .bubble{border: .1rem solid var(--chat-line); border-radius: 1.1rem 1.1rem 1.1rem .3rem; background: #fff;}
.message-row.bot .bubble.answer-card{background: var(--cream-color);}
.message-row.user .bubble{border-radius: 1.1rem 1.1rem .3rem 1.1rem; background: var(--primary-color); color: #fff;}
.cta-link{display: block; width: fit-content; margin-top: 1.2rem; color: var(--primary-color); border-bottom: .1rem solid currentColor; font-family: var(--font-semibold); font-size: 1.4rem;}

.choice-dock{max-height: min(44dvh, 36rem); overflow-y: auto; padding: 1.8rem var(--gutter) max(2.2rem, env(safe-area-inset-bottom)); border-top: .1rem solid var(--chat-line); background: var(--off-white-color); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--chat-line) transparent;}
.dock-label{position: sticky; top: -1.8rem; z-index: 1; padding: 0 0 1.2rem; color: var(--primary-color); background: var(--off-white-color); font-family: var(--font-semibold); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase;}
.choices{display: flex; flex-wrap: wrap; gap: .8rem;}
.choices.is-questions{display: grid; grid-template-columns: 1fr;}
.choices.is-followup{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
.choices.is-followup .choice-button:first-child{grid-column: 1 / -1;}
.choices.is-followup .choice-button.primary{background: var(--primary-color); color: #fff;}
.choice-button{min-height: 4.4rem; padding: 1rem 1.4rem; border: .1rem solid var(--chat-line); border-radius: .4rem; background: #fff; color: var(--primary-dark-color); cursor: pointer; text-align: left; font-size: 1.4rem; line-height: 1.3; transition: background-color .2s ease, border-color .2s ease, color .2s ease;}
.choice-button:hover{border-color: var(--primary-color); background: var(--cream-color);}
.choice-button.primary{border-color: var(--primary-color); background: var(--cream-color); color: var(--primary-color);}
.choice-button.primary:hover{background: var(--primary-color); color: #fff;}
.choice-button.secondary{color: var(--primary-color);}
.choice-button.whatsapp{border-color: var(--primary-dark-color); background: var(--primary-dark-color); color: #fff;}
.choice-button.whatsapp:hover{background: var(--primary-color); border-color: var(--primary-color);}
.choices.is-followup .choice-button.secondary{background: transparent;}

@keyframes chat-message-in{from{opacity: 0; transform: translateY(.5rem);}to{opacity: 1; transform: translateY(0);}}
@media(width < 600px){
    .chat-panel{width: 100%; box-shadow: none;}
    .chat-header{padding: max(2rem, env(safe-area-inset-top)) 2rem 1.8rem;}
    .chat-log{padding: 2rem;}
    .choice-dock{padding-left: 2rem; padding-right: 2rem; max-height: 46dvh;}
    .choices:not(.is-followup) .choice-button{width: 100%;}
    .bubble{max-width: 93%;}
}
@media(prefers-reduced-motion: reduce){
    .chat-overlay, .chat-backdrop, .chat-panel, .bubble{transition: none; animation: none;}
}