:root {
    --gscs-chat-accent: #008430;
    --gscs-chat-accent-dark: #046b28;
    --gscs-chat-ink: #1b1b1b;
    --gscs-chat-ink-soft: #5b5b5b;
    --gscs-chat-bg: #ffffff;
    --gscs-chat-bubble-bot: #f2f5f2;
    --gscs-chat-line: #e4e7e4;
}

#gscs-chat-launcher {
    position: fixed;
    right: 24px;
    /* the site's own scroll-to-top/mail/whatsapp stack sits at right:50px,
       bottom:10px, ~100px tall — sit clear of it */
    bottom: 130px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #17a854 0%, var(--gscs-chat-accent) 55%, var(--gscs-chat-accent-dark) 100%);
    border: none;
    box-shadow: 0 10px 26px rgba(4, 107, 40, 0.4), 0 2px 6px rgba(0, 0, 0, 0.14), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    cursor: pointer;
    /* The site's .scrollToTop stack claims z-index 99999999, and one image rule
       asks for 9999999999999 — which browsers clamp to the 32-bit maximum,
       2147483647. Anything below that could end up painted over the open chat
       panel, which is how three floating icons came to sit on top of it. Taking
       the ceiling itself is the only value nothing can outrank; the widget is
       included after the page content, so it also wins any tie on DOM order. */
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .18s ease, box-shadow .18s ease;
}

#gscs-chat-launcher:hover {
    transform: scale(1.07) translateY(-1px);
    box-shadow: 0 14px 32px rgba(4, 107, 40, 0.48), 0 3px 8px rgba(0, 0, 0, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

#gscs-chat-launcher:focus-visible {
    outline: 2px solid #bdf0d4;
    outline-offset: 3px;
}

#gscs-chat-launcher .gscs-chat-launcher-icon {
    position: relative;
    display: block;
}

.gscs-chat-launcher-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(23, 168, 84, 0.55);
    animation: gscsLauncherPulse 2.6s ease-out infinite;
    pointer-events: none;
}

.gscs-chat-launcher-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4ade80;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

@keyframes gscsLauncherPulse {
    0% { transform: scale(0.92); opacity: .55; }
    70% { transform: scale(1.38); opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .gscs-chat-launcher-ring {
        animation: none;
    }
}

#gscs-chat-panel {
    position: fixed;
    right: 24px;
    bottom: 202px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    /* Must allow for the 202px bottom offset *and* the site header the panel
       would otherwise slide up behind (~79px, see the media queries below).
       With a flat "100vh - 140px" the top edge landed above the viewport
       entirely on any window shorter than about 760px. */
    max-height: calc(100vh - 290px);
    background: var(--gscs-chat-bg);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 2147483647;
    font-family: -apple-system, "Segoe UI", "Noto Sans Bengali", Roboto, Arial, sans-serif;
}

#gscs-chat-panel.open {
    display: flex;
}

@media (min-width: 700px) {
    #gscs-chat-panel.expanded {
        width: 60vw;
        height: 65vh;
        /* Same cap as the base rule: 202px of bottom offset plus the site
           header, so expanding can never push the panel up behind the menu. */
        max-height: calc(100vh - 290px);
    }
}

.gscs-chat-header {
    background: var(--gscs-chat-accent);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}

.gscs-chat-header-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.gscs-chat-header-sub {
    font-size: 11px;
    opacity: .85;
    font-weight: 400;
}

.gscs-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.gscs-chat-header-actions button {
    background: transparent;
    border: none;
    color: #fff;
    opacity: .85;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .12s ease, background .12s ease;
}

.gscs-chat-header-actions button:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.gscs-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fafbfa;
}

.gscs-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
    flex: 0 0 auto;
    background: #fafbfa;
}

.gscs-chat-chip {
    border: 1px solid var(--gscs-chat-line);
    background: #fff;
    color: var(--gscs-chat-ink);
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
}

.gscs-chat-chip:hover {
    border-color: var(--gscs-chat-accent);
    color: var(--gscs-chat-accent-dark);
}

.gscs-chat-bubble-row {
    display: flex;
}

.gscs-chat-bubble-row.user {
    justify-content: flex-end;
}

.gscs-chat-bubble {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    word-wrap: break-word;
}

.gscs-chat-bubble-row.user .gscs-chat-bubble {
    background: var(--gscs-chat-accent);
    color: #fff;
    border-bottom-right-radius: 3px;
}

.gscs-chat-bubble-row.bot .gscs-chat-bubble {
    background: var(--gscs-chat-bubble-bot);
    color: var(--gscs-chat-ink);
    border-bottom-left-radius: 3px;
    /* Answers run to several paragraphs with source links under them, so they
       get the whole column. The 84% cap stays on the visitor's own messages,
       which are short and need to read as the other side of the conversation. */
    max-width: 100%;
}

.gscs-chat-bubble p {
    margin: 0 0 8px;
}

.gscs-chat-bubble p:last-child {
    margin-bottom: 0;
}

.gscs-chat-bubble ul {
    margin: 4px 0 8px;
    padding-left: 18px;
}

.gscs-chat-sources {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gscs-chat-sources a {
    font-size: 11.5px;
    color: var(--gscs-chat-accent-dark);
    text-decoration: none;
}

.gscs-chat-sources a:hover {
    text-decoration: underline;
}

.gscs-chat-escalate {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.gscs-chat-escalate-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease;
}

.gscs-chat-escalate-btn:hover {
    transform: translateY(-1px);
}

.gscs-chat-escalate-btn.email {
    background: #fff;
    color: var(--gscs-chat-accent-dark);
    border-color: var(--gscs-chat-accent);
}

.gscs-chat-escalate-btn.whatsapp {
    background: #25d366;
    color: #fff;
    box-shadow: 0 3px 10px rgba(37, 211, 102, 0.35);
}

.gscs-chat-feedback {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.gscs-chat-feedback button {
    border: 1px solid var(--gscs-chat-line);
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    padding: 3px 8px;
    cursor: pointer;
    color: var(--gscs-chat-ink-soft);
}

.gscs-chat-feedback button.active {
    border-color: var(--gscs-chat-accent);
    color: var(--gscs-chat-accent-dark);
    background: #eef8f0;
}

.gscs-chat-typing {
    display: inline-flex;
    gap: 3px;
    padding: 4px 0;
}

.gscs-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9aa39a;
    animation: gscsChatTyping 1s infinite ease-in-out;
}

.gscs-chat-typing span:nth-child(2) {
    animation-delay: .15s;
}

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

@keyframes gscsChatTyping {

    0%,
    60%,
    100% {
        opacity: .3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.gscs-chat-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--gscs-chat-line);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: #fff;
}

.gscs-chat-input {
    flex: 1 1 auto;
    border: 1px solid var(--gscs-chat-line);
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 13.5px;
    resize: none;
    max-height: 90px;
    font-family: inherit;
    outline: none;
}

.gscs-chat-input:focus {
    border-color: var(--gscs-chat-accent);
}

.gscs-chat-send {
    background: linear-gradient(135deg, #17a854 0%, var(--gscs-chat-accent-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .12s ease;
}

.gscs-chat-send:hover:not(:disabled) {
    transform: translateY(-1px);
}

.gscs-chat-send:disabled {
    opacity: .5;
    cursor: default;
}

.gscs-chat-human-link {
    text-align: center;
    padding: 6px 12px 10px;
    font-size: 11.5px;
    background: #fff;
    flex: 0 0 auto;
}

.gscs-chat-human-link a {
    color: var(--gscs-chat-accent-dark);
    text-decoration: none;
}

.gscs-chat-human-link a:hover {
    text-decoration: underline;
}

/* A short viewport — a phone turned sideways, or a small browser window — is
   not narrow, so the mobile rule below never fires, yet the 202px bottom offset
   leaves barely 190px of panel. Give the height back by pinning top and bottom
   here too, and leave the width rules alone. */
/* Clears the site's own sticky header. The logo renders at width:70px and is
   234x209 natively, so it stands about 63px tall, plus the navbar's own padding
   — call it 79px, and leave a little air above the panel. */
@media (max-height: 620px) {
    #gscs-chat-panel,
    #gscs-chat-panel.expanded {
        top: 88px;
        bottom: 10px;
        height: auto;
        max-height: none;
    }
}

@media (max-width: 480px) {
    /* Pinned to all four edges instead of being given a height and an offset:
       the panel then fits whatever the phone's viewport turns out to be, with
       no arithmetic to get wrong and no dependence on 100vh, which mobile
       browsers report inconsistently as the address bar shows and hides.
       Expanding is meaningless at this size, so both states share the rule. */
    #gscs-chat-panel,
    #gscs-chat-panel.expanded {
        /* Starts below the site header rather than on top of it, so the logo
           and the menu button stay reachable while the chat is open. */
        top: 88px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        border-radius: 14px;
    }

    /* Nothing to expand into — hide the control rather than leave a dead button. */
    #gscs-chat-expand {
        display: none;
    }

    #gscs-chat-launcher {
        right: 16px;
        bottom: 122px;
    }
}

.gscs-chat-error {
    margin: 6px 0 0;
    font-size: 12.5px;
    font-style: italic;
    opacity: .75;
}