.quick-chat {
    position: fixed;
    right: 24px;
    bottom: 22px;
    z-index: 35;
    font-family: 'Inter', sans-serif;
}

.quick-chat-panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    display: flex;
    width: min(365px, calc(100vw - 28px));
    height: min(540px, calc(100dvh - 110px));
    min-height: 380px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(21, 35, 30, .1);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 22px 70px rgba(11, 25, 19, .24);
    animation: quick-chat-appear .18s ease-out;
}

.quick-chat-panel[hidden] { display: none; }

.quick-chat-header {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    background: #20392e;
    color: #fff;
}

.quick-chat-avatar,
.quick-chat-message-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 2px solid rgba(255,255,255,.7);
    border-radius: 50%;
    background: #c6f36b;
    color: #26352c;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 800;
}
.quick-chat-avatar,
.quick-chat-message-avatar { object-fit: cover; }

.quick-chat-header-copy { min-width: 0; flex: 1; }
.quick-chat-header-copy strong,
.quick-chat-header-copy small { display: block; }
.quick-chat-header-copy strong { font-size: .84rem; }
.quick-chat-header-copy small { margin-top: 4px; color: #cfdbd1; font-size: .68rem; }
.quick-chat-header-copy small i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #9ee16b; }
.quick-chat-close { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.quick-chat-close .material-symbols-rounded { font-size: 20px; }

.quick-chat-thread {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 13px;
    padding: 16px 13px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 1px 1px, rgba(52,81,63,.045) 1px, transparent 0) 0 0 / 17px 17px,
        #f4f6f1;
}

.quick-chat-day { align-self: center; padding: 4px 9px; border-radius: 999px; background: rgba(40,58,47,.08); color: #78837a; font-size: .61rem; }
.quick-chat-message { display: flex; max-width: 90%; align-items: flex-end; gap: 7px; }
.quick-chat-message-avatar { width: 25px; height: 25px; flex-basis: 25px; border: 0; font-size: .66rem; }
.quick-chat-message--outgoing { align-self: flex-end; }
.quick-chat-message--incoming { align-self: flex-start; }
.quick-chat-bubble { padding: 9px 11px 6px; border: 1px solid #e7ebe4; border-radius: 13px 13px 13px 4px; background: #fff; box-shadow: 0 2px 5px rgba(23,39,29,.04); }
.quick-chat-message--outgoing .quick-chat-bubble { border-color: #d8ebb9; border-radius: 13px 13px 4px 13px; background: #e8f5d4; }
.quick-chat-bubble p { margin: 0; color: #344238; font-size: .78rem; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.quick-chat-bubble time { display: block; margin-top: 4px; color: #89968b; font-size: .58rem; text-align: right; }

.quick-chat-form { padding: 12px 13px 9px; border-top: 1px solid #edf0eb; background: #fff; }
.quick-chat-form > label { display: block; margin: 0 0 5px; color: #647168; font-size: .64rem; font-weight: 700; }
.quick-chat-name-label span { color: #9aa49c; font-weight: 500; }
.quick-chat-name { width: 100%; min-height: 36px; margin-bottom: 10px; padding: 7px 10px; border: 1px solid #e3e9e1; border-radius: 8px; background: #fbfcfa; color: #27352c; font: inherit; font-size: .72rem; }
.quick-chat-compose { display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 10px; border: 1px solid #e1e7df; border-radius: 12px; background: #fbfcfa; }
.quick-chat-compose textarea { min-width: 0; min-height: 42px; max-height: 100px; flex: 1; resize: vertical; padding: 5px 0; border: 0; outline: 0; background: transparent; color: #27352c; font: inherit; font-size: .75rem; line-height: 1.45; }
.quick-chat-compose textarea:focus { outline: 0; }
.quick-chat-compose button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 0; border-radius: 10px; background: #263b30; color: #fff; cursor: pointer; transition: background .16s ease, transform .16s ease; }
.quick-chat-compose button:hover { transform: translateY(-1px); background: #395744; }
.quick-chat-compose button:disabled { cursor: wait; opacity: .55; }
.quick-chat-compose button .material-symbols-rounded { font-size: 18px; }
.quick-chat-status { min-height: 16px; margin: 5px 2px 0; color: #668048; font-size: .63rem; line-height: 1.4; }
.quick-chat-status.is-error { color: #b64d42; }

.quick-chat-launcher { display: flex; min-width: 60px; height: 58px; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 0; border-radius: 999px; background: #263b30; color: #fff; box-shadow: 0 8px 24px rgba(25, 48, 34, .3); cursor: pointer; transition: transform .18s ease, background .18s ease; }
.quick-chat-launcher:hover { transform: translateY(-2px); background: #365541; }
.quick-chat-launcher .material-symbols-rounded { font-size: 23px; }
.quick-chat-launcher .quick-chat-launch-logo { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; }
.quick-chat-launch-text { font-size: .78rem; font-weight: 700; }
.quick-chat-launch-close { display: none; }
.quick-chat-launcher[aria-expanded="true"] .quick-chat-launch-icon,
.quick-chat-launcher[aria-expanded="true"] .quick-chat-launch-text { display: none; }
.quick-chat-launcher[aria-expanded="true"] .quick-chat-launch-close { display: inline; }

@keyframes quick-chat-appear {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    .quick-chat { right: 13px; bottom: 13px; }
    .quick-chat-panel { bottom: 65px; width: min(365px, calc(100vw - 26px)); height: min(520px, calc(100dvh - 95px)); }
    .quick-chat-launcher { height: 52px; padding: 0 15px; }
}