/* GIFSQ Chat (v3.8.0; presenter layer v3.9.3; modern layout +
   animation v3.9.6) — our own site chat window.
   v3.9.6 (owner, with a phone screenshot of the old panel: "Is not
   speaking and no sound and tradition layout" → "Make it latest
   style layout and modern vibes with animation"): the panel is a
   presenter-forward, glass-green, soft-shadow card now: a larger
   portrait with a living ring in a gradient header, bubbles and
   cards that glide in, bouncing typing dots, chips and buttons
   with micro-motion. Every animation is transform/opacity only
   (cheap on phones), and one reduced-motion block at the end
   stills the whole window (the owner's house law). Scoped
   .gqm-chat; GIFSQ brand only: deep green, dark navy ink,
   Outfit for her name/headings, Inter for body text. */
.gqm-chat { position: fixed; right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom)); z-index: 99990;
    font-family: 'Inter', inherit; --gqm-green: #0d7a3f; --gqm-green-2: #12a150;
    --gqm-green-3: #17b978; --gqm-ink: #14202c;
    --gqm-head-font: 'Outfit', 'Inter', inherit; }
.gqm-chat-bubble { display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--gqm-green) 0%, var(--gqm-green-2) 60%, var(--gqm-green-3) 100%);
    color: #fff; border: 0; cursor: pointer; border-radius: 999px;
    padding: 13px 20px; font-size: 1rem; font-weight: 700;
    font-family: var(--gqm-head-font);
    box-shadow: 0 10px 28px rgba(13, 122, 63, .38), 0 2px 8px rgba(13, 122, 63, .25);
    transition: transform .18s ease, box-shadow .18s ease; }
.gqm-chat-bubble:hover { transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(13, 122, 63, .42), 0 3px 10px rgba(13, 122, 63, .28); }
/* Page reader (v3.9.9): her portrait as a circular bottom-left
   listening control, deliberately opposite the Ask Sathi bubble.
   The portrait fills the circle; a green state badge carries the
   play/pause glyph and a small Listen label sits under her face. */
.gqm-chat-reader { position: fixed; left: max(16px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom)); z-index: 99989;
    width: 58px; height: 58px; border-radius: 50%; padding: 0; overflow: visible;
    border: 2.5px solid #fff; background: #e8f7ee; cursor: pointer;
    box-shadow: 0 10px 28px rgba(8, 40, 22, .30), 0 2px 8px rgba(8, 40, 22, .20);
    transition: transform .18s ease, box-shadow .18s ease; }
.gqm-chat-reader[hidden] { display: none; }
.gqm-chat-reader:hover { transform: translateY(-2px); }
.gqm-chat-reader:active { transform: scale(.94); }
.gqm-chat-reader-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.gqm-chat-reader-state { position: absolute; right: -5px; bottom: -5px;
    width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #0d7a3f; color: #fff; border: 2px solid #fff; font-size: .68rem; line-height: 1;
    box-shadow: 0 3px 8px rgba(4, 30, 16, .30); }
.gqm-chat-reader-label { position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%);
    font-family: 'Inter', inherit; font-size: .62rem; font-weight: 700; line-height: 1;
    color: #0d7a3f; background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 2px 6px;
    box-shadow: 0 1px 4px rgba(4, 30, 16, .16); white-space: nowrap; }
.gqm-chat-reader.is-playing { animation: gqm-reader-pulse 1.15s ease-in-out infinite; }
.gqm-chat-reader.is-paused .gqm-chat-reader-state { background: #5b6b62; }
/* Page-reader karaoke (v3.9.11): the same sweep as chat karaoke,
   applied to the article's own words while Sathi reads the page
   — upcoming words dimmed, the word she is on filling with her
   green by the fraction spoken (--kwp, set from JS), words
   already read at full strength. Only blocks of the window being
   read carry .gqm-rkaraoke; the spans themselves (.gqm-rkw) have
   no layout effect, so wrapping never reflows the article. The
   green is the literal brand value because article content sits
   outside the .gqm-chat scope that defines --gqm-green-2. */
.gqm-rkaraoke .gqm-rkw { opacity: .45; }
.gqm-rkaraoke .gqm-rkw.lit { opacity: 1; }
.gqm-rkaraoke .gqm-rkw.now { opacity: 1; font-weight: 700; color: transparent;
    -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(90deg, #12a150 calc(var(--kwp, 0) * 100%), rgba(20, 32, 44, .45) 0); }
@keyframes gqm-reader-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, .42), 0 10px 28px rgba(8, 40, 22, .30); }
    50% { box-shadow: 0 0 0 9px rgba(18, 161, 80, 0), 0 10px 28px rgba(8, 40, 22, .30); } }
.gqm-chat-bubble:active { transform: scale(.96); }
.gqm-chat-bubble.is-open { display: none; }
.gqm-chat-panel { position: fixed; right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(392px, calc(100vw - 20px)); height: min(600px, calc(100dvh - 96px));
    background: #fff; color: var(--gqm-ink);
    border: 1px solid rgba(13, 122, 63, .35); border-radius: 24px;
    box-shadow: 0 24px 60px rgba(8, 40, 22, .30), 0 6px 18px rgba(8, 40, 22, .16);
    display: flex; flex-direction: column; overflow: hidden;
    animation: gqm-panel-in .38s cubic-bezier(.21, 1.02, .55, 1) both; }
.gqm-chat-panel[hidden] { display: none; }
@keyframes gqm-panel-in { from { opacity: 0; transform: translateY(18px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); } }
/* Presenter-forward header: deep-green glass gradient, her
   portrait large on the left with a living ring, name in Outfit,
   live status, voice toggle with a visible state label. */
.gqm-chat-head { display: flex; align-items: center; gap: 12px; color: #fff;
    padding: 14px 16px; position: relative;
    background: linear-gradient(120deg, #0a5c30 0%, var(--gqm-green) 52%, var(--gqm-green-2) 82%, var(--gqm-green-3) 125%); }
.gqm-chat-head::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); }
.gqm-chat-head-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gqm-chat-head-tx strong { font-family: var(--gqm-head-font); font-size: 1.22rem;
    font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.gqm-chat-head-tx span { font-size: .78rem; opacity: .94; line-height: 1.35; }
.gqm-chat-x { background: rgba(255, 255, 255, .18); color: #fff; border: 0;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .9rem;
    flex: none; position: relative; z-index: 1;
    transition: transform .15s ease, background .15s ease; }
.gqm-chat-x:hover { background: rgba(255, 255, 255, .30); transform: scale(1.08); }
.gqm-chat-x:active { transform: scale(.92); }
/* Presenter: 64px portrait, an animated conic ring that turns
   slowly while she is on stage and brightens/pulses while she
   speaks, plus the sound-bars pill from v3.9.3. */
.gqm-chat-presenter { position: relative; flex: none; width: 64px; height: 64px; z-index: 1; }
.gqm-chat-presenter::before { content: ''; position: absolute; inset: -5px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .75),
        rgba(141, 255, 182, .0), rgba(255, 255, 255, .75), rgba(255, 255, 255, .0));
    animation: gqm-ring-spin 7s linear infinite; opacity: .8; }
.gqm-chat-presenter.is-speaking::before { opacity: 1; animation-duration: 2.2s; }
@keyframes gqm-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.gqm-chat-avatar { position: relative; width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; display: block; background: #fff;
    border: 2.5px solid rgba(255, 255, 255, .9);
    box-shadow: 0 4px 14px rgba(4, 30, 16, .35); }
.gqm-chat-presenter.is-speaking .gqm-chat-avatar { animation: gqm-chat-pulse 1.15s ease-in-out infinite; }
@keyframes gqm-chat-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
    50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }
.gqm-chat-bars { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    z-index: 2; display: none; align-items: flex-end; gap: 2px; background: var(--gqm-green);
    border: 1.5px solid #fff; border-radius: 999px; padding: 3px 7px;
    box-shadow: 0 3px 8px rgba(4, 30, 16, .30); }
.gqm-chat-presenter.is-speaking .gqm-chat-bars { display: flex; }
.gqm-chat-bars i { width: 3px; height: 7px; background: #fff; border-radius: 2px;
    animation: gqm-chat-bar .8s ease-in-out infinite; }
.gqm-chat-bars i:nth-child(2) { animation-delay: .15s; }
.gqm-chat-bars i:nth-child(3) { animation-delay: .3s; }
.gqm-chat-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes gqm-chat-bar { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.5); } }
.gqm-chat-status { display: flex; align-items: center; }
.gqm-chat-dot { flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: #8dffb6; margin-right: 6px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .22);
    animation: gqm-dot-glow 2.6s ease-in-out infinite; }
@keyframes gqm-dot-glow { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
    50% { box-shadow: 0 0 0 4px rgba(141, 255, 182, .18); } }
.gqm-chat-voice { background: rgba(255, 255, 255, .18); color: #fff; border: 0;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .85rem;
    flex: none; position: relative; z-index: 1;
    transition: transform .15s ease, background .15s ease; }
.gqm-chat-voice:hover { transform: scale(1.08); }
.gqm-chat-voice:active { transform: scale(.92); }
.gqm-chat-voice.is-on { background: #fff; }
.gqm-chat-voice-state { font-size: .68rem; font-weight: 600; letter-spacing: .02em;
    color: #fff; opacity: .92; flex: none; width: 30px; line-height: 1.2; position: relative; z-index: 1; }
.gqm-chat-voicenote { background: #fff6da; color: #7a5b00; font-size: .74rem;
    padding: 7px 14px; line-height: 1.4; }
.gqm-chat-voicenote[hidden] { display: none; }
/* Messages: soft green-tinted stage; bubbles glide in. */
.gqm-chat-msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex;
    flex-direction: column; gap: 10px; scroll-behavior: smooth;
    background: linear-gradient(180deg, #f6fbf7 0%, #eef6f0 100%); }
.gqm-chat-msg { max-width: 88%; padding: 11px 14px; border-radius: 18px;
    font-size: .93rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
    animation: gqm-msg-in .3s ease both; }
.gqm-chat-msg.is-bot { background: #fff; border: 1px solid #dde7df;
    border-bottom-left-radius: 6px; align-self: flex-start;
    box-shadow: 0 2px 8px rgba(10, 40, 22, .05); }
.gqm-chat-msg.is-user { background: linear-gradient(135deg, var(--gqm-green) 0%, var(--gqm-green-2) 100%);
    color: #fff; border-bottom-right-radius: 6px; align-self: flex-end;
    box-shadow: 0 3px 10px rgba(13, 122, 63, .25); }
/* Chat karaoke (v3.9.10): while Sathi reads an answer, its words
   sweep like the captions in the owner's reference video —
   upcoming words dimmed, the word she is on filling with her
   green by the fraction she has spoken (--kwp, set from JS),
   words already read at full strength. Only the bubble being
   read carries .is-karaoke; every other bubble reads plain. */
.gqm-chat-msg.is-karaoke .kw { opacity: .45; }
.gqm-chat-msg.is-karaoke .kw.lit { opacity: 1; }
.gqm-chat-msg.is-karaoke .kw.now { opacity: 1; font-weight: 700; color: transparent;
    -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(90deg, var(--gqm-green-2) calc(var(--kwp, 0) * 100%), rgba(20, 32, 44, .45) 0); }
.gqm-chat-msg code { font: inherit; font-size: .92em; background: rgba(13, 122, 63, .09);
    padding: 0 4px; border-radius: 4px; }
@keyframes gqm-msg-in { from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); } }
/* Typing: three bouncing dots (built by chat.js as pure DOM). */
.gqm-chat-msg.is-typing { display: inline-flex; align-items: center; gap: 7px; }
.gqm-chat-dots { display: inline-flex; align-items: center; gap: 4px; }
.gqm-chat-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gqm-green-2);
    animation: gqm-dot-bounce 1.1s ease-in-out infinite; }
.gqm-chat-dots i:nth-child(2) { animation-delay: .14s; }
.gqm-chat-dots i:nth-child(3) { animation-delay: .28s; }
@keyframes gqm-dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-5px); opacity: 1; } }
.gqm-chat-typing-tx { font-size: .82rem; color: #6b7684; }
/* Listen: a real state machine now (idle / preparing / playing),
   driven by chat.js classes; spinner is a rotating border ring. */
.gqm-chat-listen { align-self: flex-start; margin-top: -4px; background: #e8f7ee;
    color: var(--gqm-green); border: 1px solid #bfe6cd; border-radius: 999px;
    padding: 5px 13px; font-size: .78rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: transform .15s ease, background .15s ease, color .15s ease; }
.gqm-chat-listen:hover { transform: translateY(-1px); }
.gqm-chat-listen:active { transform: scale(.96); }
.gqm-chat-listen.is-working { background: #fff6da; border-color: #ecd27a; color: #7a5b00; cursor: wait;
    animation: gqm-listen-pulse 1.2s ease-in-out infinite; }
.gqm-chat-listen.is-working::before { content: ''; width: 10px; height: 10px; flex: none;
    border-radius: 50%; border: 2px solid rgba(122, 91, 0, .30); border-top-color: #7a5b00;
    animation: gqm-spin .7s linear infinite; }
@keyframes gqm-listen-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes gqm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.gqm-chat-listen.is-playing { background: var(--gqm-green); border-color: var(--gqm-green); color: #fff; }
.gqm-chat-voicefail { align-self: flex-start; margin-top: -4px; font-size: .74rem;
    color: #a33c00; background: #fff1e6; border: 1px solid #f3cf9f; border-radius: 10px;
    padding: 5px 10px; line-height: 1.4; animation: gqm-msg-in .3s ease both; }
.gqm-chat-results { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.gqm-chat-card { display: flex; flex-direction: column; gap: 1px;
    background: #fff; border: 1.5px solid rgba(13, 122, 63, .45); border-radius: 16px;
    padding: 11px 14px; text-decoration: none; color: var(--gqm-ink);
    box-shadow: 0 2px 8px rgba(10, 40, 22, .05);
    animation: gqm-msg-in .32s ease both;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.gqm-chat-results .gqm-chat-card:nth-child(2) { animation-delay: .05s; }
.gqm-chat-results .gqm-chat-card:nth-child(3) { animation-delay: .10s; }
.gqm-chat-results .gqm-chat-card:nth-child(4) { animation-delay: .15s; }
.gqm-chat-results .gqm-chat-card:nth-child(5) { animation-delay: .20s; }
.gqm-chat-results .gqm-chat-card:nth-child(6) { animation-delay: .25s; }
.gqm-chat-card:hover { transform: translateY(-2px); border-color: var(--gqm-green);
    box-shadow: 0 8px 20px rgba(10, 40, 22, .12); }
.gqm-chat-card:active { transform: scale(.985); background: var(--gqm-green); color: #fff; }
.gqm-chat-card-k { font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--gqm-green); }
.gqm-chat-card:active .gqm-chat-card-k { color: #d9f2e2; }
.gqm-chat-card-t { font-weight: 700; font-size: .95rem; }
.gqm-chat-card-m { font-size: .8rem; color: #6b7684; }
.gqm-chat-card:active .gqm-chat-card-m { color: #e6f5ec; }
.gqm-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px 0; background: #fff; }
.gqm-chat-chip { border: 1.5px solid rgba(13, 122, 63, .55); color: var(--gqm-green);
    background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .82rem;
    font-weight: 600; cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; }
.gqm-chat-chip:hover { transform: translateY(-2px); background: #e8f7ee;
    box-shadow: 0 5px 12px rgba(13, 122, 63, .18); }
.gqm-chat-chip:active { transform: scale(.95); background: var(--gqm-green); color: #fff; }
.gqm-chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: #fff; align-items: center; }
.gqm-chat-form input { flex: 1; border: 1.5px solid #c9d4cc; border-radius: 999px;
    padding: 11px 15px; font-size: .95rem; outline: none; min-width: 0;
    transition: border-color .15s ease, box-shadow .15s ease; }
.gqm-chat-form input:focus { border-color: var(--gqm-green);
    box-shadow: 0 0 0 3px rgba(18, 161, 80, .18); }
.gqm-chat-send { background: linear-gradient(135deg, var(--gqm-green) 0%, var(--gqm-green-2) 100%);
    color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1rem;
    cursor: pointer; flex: none; box-shadow: 0 5px 14px rgba(13, 122, 63, .32);
    transition: transform .15s ease, box-shadow .15s ease; }
.gqm-chat-send:hover { transform: scale(1.07); box-shadow: 0 7px 18px rgba(13, 122, 63, .38); }
.gqm-chat-send:active { transform: scale(.9); }
.gqm-chat-note { padding: 0 14px 10px; font-size: .7rem; color: #8a94a0; background: #fff; line-height: 1.4; }
@media (min-width: 768px) {
    .gqm-chat-panel { width: 400px; height: min(620px, calc(100dvh - 110px)); }
}
@media (max-width: 480px) {
    .gqm-chat-head { padding: 11px 13px; gap: 10px; }
    .gqm-chat-presenter { width: 56px; height: 56px; }
    .gqm-chat-avatar { width: 56px; height: 56px; }
    .gqm-chat-head-tx strong { font-size: 1.1rem; }
    .gqm-chat-voice-state { display: none; }
    .gqm-chat-panel { height: min(600px, calc(100dvh - 84px)); }
}
@media (prefers-color-scheme: dark) {
    .gqm-chat-panel { background: #17212d; color: #e8eef2; border-color: rgba(47, 158, 95, .55); }
    .gqm-chat-head { background: linear-gradient(120deg, #07331b 0%, #0d7a3f 60%, #12a150 130%); }
    .gqm-chat-msgs { background: linear-gradient(180deg, #101820 0%, #0d141c 100%); }
    .gqm-chat-msg.is-bot { background: #1d2a38; border-color: #2c3e4f; }
    .gqm-chat-msg.is-karaoke .kw.now { background-image: linear-gradient(90deg, #8fdcab calc(var(--kwp, 0) * 100%), rgba(232, 238, 242, .42) 0); }
    .gqm-chat-msg code { background: rgba(143, 220, 171, .14); }
    .gqm-chat-typing-tx { color: #9aa6b4; }
    .gqm-chat-card { background: #1d2a38; color: #e8eef2; border-color: rgba(47, 158, 95, .5); }
    .gqm-chat-card-m { color: #9aa6b4; }
    .gqm-chat-chips, .gqm-chat-form, .gqm-chat-note { background: #17212d; }
    .gqm-chat-voicenote { background: #2c3e4f; color: #ffd97a; }
    .gqm-chat-chip { background: transparent; }
    .gqm-chat-form input { background: #101820; color: #e8eef2; border-color: #2c3e4f; }
    .gqm-chat-listen { background: #14301f; }
    .gqm-chat-voicefail { background: #3a2413; color: #ffb27a; border-color: #6b4423; }
}
/* House law: soft movement, and reduced motion stills EVERYTHING:
   no entrance, no pulse, no spin, no bounce, no hover lifts. */
@media (prefers-reduced-motion: reduce) {
    .gqm-chat *, .gqm-chat *::before, .gqm-chat *::after,
    .gqm-chat-reader, .gqm-chat-reader::before, .gqm-chat-reader::after {
        animation: none !important; transition: none !important; }
    .gqm-chat-msgs { scroll-behavior: auto; }
    .gqm-chat-card:hover, .gqm-chat-chip:hover, .gqm-chat-bubble:hover,
    .gqm-chat-voice:hover, .gqm-chat-x:hover, .gqm-chat-listen:hover { transform: none; }
}

/* v3.9.11.1 mobile-audit fixes (rebased on 3.9.11, which is preserved
   above): body bottom clearance so end-of-page content, including
   the footer, scrolls clear of the fixed Listen and Ask Sathi
   buttons; smaller fixed buttons on phones and no reader label on
   phones (aria label still announces it). A fixed button still sits
   over whatever is at the viewport edge while scrolling; the fix is
   that content can always be scrolled clear and the buttons are
   smaller, not that a fixed button occupies no pixels. */
body { padding-bottom: 96px; }
@media (max-width:768px){
.gqm-chat-reader{width:48px;height:48px}
.gqm-chat-reader-label{display:none}
.gqm-chat-bubble{padding:10px 14px;font-size:.9rem}
.gqm-chat-reader-state{width:21px;height:21px;font-size:.6rem}
}