/* ==========================================================
   TST Chat Widget — Expand / shrink toggle (add-on)
   Loaded by includes/expand-toggle.php. Settings:
   TST Chat Widget -> Widget Size.
   ========================================================== */

/* Header button — same look as the WhatsApp / close icons */
.tst-expand-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: var(--tst-fs-16, 16px);
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    opacity: .9;
    transition: opacity var(--tst-motion-200, 200ms) ease;
}
.tst-expand-btn:hover { opacity: 1; }
.tst-expand-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tst-expand-btn svg { width: 1em; height: 1em; display: block; pointer-events: none; }

/* Size change */
#tst-chat-box { transition: width .2s ease, height .2s ease; }

#tst-chat-box.tst-expanded {
    width: min(var(--tcw-xw, 720px), calc(100vw - 40px));
    height: min(var(--tcw-xh, 85vh), calc(100vh - 130px));
    max-height: none;
}

/* Phones: expanded = full screen */
@media (max-width: 480px) {
    #tst-chat-box.tst-expanded {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        z-index: 100001; /* above the round launcher button */
    }
    #tst-chat-box.tst-expanded .tst-chatbox-header { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #tst-chat-box,
    .tst-expand-btn { transition: none; }
}