/*
 * پشتیبانی آنلاین همیان — the floating support chat on hamyanapp.com.
 *
 * Everything is scoped under .hsw so it can sit on every public page,
 * including the standalone ones that do not load general.css. The mark is the
 * same mascot the app's landing page uses, so somebody who installs the app
 * afterwards meets the same picture.
 *
 * Bottom-right on every size. The menubar is z-index 1600 and the mobile
 * dropdown 1500, and the homepage hero stacks its own layers above those, so
 * the widget takes the top of the range outright: nothing on a marketing page
 * should ever paint over a support chat the reader has opened.
 */

.hsw,
.hsw * {
    box-sizing: border-box;
    font-family: IRANYekanRegular, IRANYekanLight, Vazirmatn, Tahoma, Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hsw [hidden] {
    display: none !important;
}

/* Every colour below is written twice: the literal first, the token
   second. An Android WebView older than Chromium 49 — still on the Android 5
   and 6 handsets whose WebView never updated — drops any declaration
   containing var(), and a dropped `background` next to a literal
   `color: #ffffff` is white text on white: the reader's own questions and the
   «بپرس» button would simply vanish. */
.hsw {
    --hsw-green: #74b743;
    --hsw-green-deep: #3f7a1f;
    --hsw-green-soft: #edf6e5;
    --hsw-ink: #222222;
    --hsw-ink-soft: #6b6b6b;
    --hsw-line: #e4e6ea;
    --hsw-bot: #f3f4f6;
    --hsw-red: #d9483b;
    --hsw-shadow: 0 10px 30px rgba(20, 40, 10, 0.22);
    direction: rtl;
    text-align: right;
    font-size: 14px;
    line-height: 1.8;
    color: #222222;
    color: var(--hsw-ink);
}

/* ------------------------------------------------------------ launcher */

.hsw-launcher {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: var(--hsw-shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Split rather than grouped as `:hover, :focus-visible`. An unknown
   pseudo-class invalidates the WHOLE selector list, so on an engine without
   `:focus-visible` (Chromium < 86, Samsung Internet < 14) the grouped rule
   took the hover style down with it. */
.hsw-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(20, 40, 10, 0.28);
}

.hsw-launcher:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(20, 40, 10, 0.28);
}

.hsw-launcher:active {
    transform: scale(0.96);
}

/* The outline is on plain :focus, so a keyboard user on an old engine still
   sees where they are; the rule below removes it for mouse users on engines
   that can tell the difference, and is ignored by the ones that cannot. */
.hsw-launcher:focus {
    outline: 3px solid rgba(116, 183, 67, 0.45);
    outline-offset: 2px;
}

.hsw-launcher:focus:not(:focus-visible) {
    outline: none;
}

.hsw-launcher img {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    animation: hsw-breathe 3.2s ease-in-out infinite;
}

/* Slow opacity pulse, not a bounce: something that draws the eye to the
   corner without competing with the page's own headline. */
@keyframes hsw-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.82; transform: scale(0.97); }
}

/* Physical values, mirrored for RTL: the flex row runs right-to-left, so the
   mascot is on the RIGHT of the label and the pill's rounded end is on the
   LEFT. 6px toward the mascot (on top of the 8px gap), 14px toward the cap. */
.hsw-launcher-label {
    display: none;
    padding: 0 6px 0 14px;
    font-size: 14px;
    font-weight: bold;
    color: #222222;
    color: var(--hsw-ink);
    white-space: nowrap;
}

/* A round icon alone in a corner is a guess. On a wide screen there is room
   for the two words that end the guess; on a phone the greeting bubble below
   does that job once, then gets out of the way.
   Height is in the query as well as width — see the panel rule below. */
@media (min-width: 640px) and (min-height: 480px) {
    .hsw-launcher {
        right: 24px;
        bottom: 24px;
        /* insets the mascot from the pill's right-hand cap, in RTL */
        padding-right: 4px;
    }
    .hsw-launcher-label {
        display: inline;
    }
}

/* -------------------------------------------------------------- teaser */

.hsw-teaser {
    position: fixed;
    right: 16px;
    bottom: 86px;
    z-index: 2147483000;
    max-width: min(300px, calc(100vw - 32px));
    padding: 10px 14px 10px 36px;
    border-radius: 14px;
    border-bottom-right-radius: 4px;
    background: #ffffff;
    box-shadow: var(--hsw-shadow);
    font-size: 13px;
    line-height: 1.7;
    color: #222222;
    color: var(--hsw-ink);
    cursor: pointer;
    animation: hsw-rise 0.35s ease-out;
}

@media (min-width: 640px) and (min-height: 480px) {
    .hsw-teaser {
        right: 24px;
        bottom: 96px;
    }
}

.hsw-teaser strong {
    font-weight: bold;
    color: #3f7a1f;
    color: var(--hsw-green-deep);
}

.hsw-teaser-close {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b6b6b;
    color: var(--hsw-ink-soft);
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

.hsw-teaser-close:hover {
    background: #f3f4f6;
    background: var(--hsw-bot);
}

@keyframes hsw-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------- panel */

/*
 * Full screen by default, docked on a screen with room for both dimensions.
 *
 * The four physical offsets are written out and `inset` is only a shorthand
 * repeat of them: an engine that does not know `inset` (Chromium < 87,
 * Samsung Internet < 14, Safari < 14.1 — a real share of Iranian Android)
 * drops the declaration, and a `position: fixed` box with four auto offsets
 * is laid out at its static position, which for the last element in <body> is
 * below the footer. The panel would open thousands of pixels off-screen while
 * the page it covers is locked.
 *
 * And the height comes from top+bottom rather than `100vh`: on a phone
 * `100vh` is the viewport with the browser chrome HIDDEN, so where `dvh` is
 * unknown the panel is taller than the screen by the height of the toolbars
 * and the composer sits under them — with the page locked, so the reader
 * cannot scroll them away either.
 */
.hsw-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 2147483001;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    animation: hsw-rise 0.25s ease-out;
}

/* Height as well as width. A phone in landscape is 667x375: on width alone it
   got this docked panel, and 160px of it is header and composer, so the
   conversation had about forty pixels. `isMobile()` in the script uses the
   same query — they must not disagree about which layout is on screen. */
@media (min-width: 640px) and (min-height: 480px) {
    .hsw-panel {
        top: auto;
        left: auto;
        right: 24px;
        bottom: 96px;
        width: 380px;
        height: 600px;
        /* 96px under it for the launcher, 76px above it so a short laptop
           screen never pushes the header under the site's fixed menubar */
        max-height: calc(100vh - 172px);
        max-height: calc(100dvh - 172px);
        border-radius: 18px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
        overflow: hidden;
    }
}

.hsw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hsw-line);
    background: #ffffff;
}

.hsw-head img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hsw-head-text {
    flex: 1;
    min-width: 0;
}

.hsw-title {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    color: #222222;
    color: var(--hsw-ink);
    line-height: 1.5;
}

.hsw-subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b6b6b;
    color: var(--hsw-ink-soft);
    line-height: 1.5;
    text-align: right;
}

.hsw-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b6b6b;
    color: var(--hsw-ink-soft);
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
}

.hsw-close:hover {
    background: #f3f4f6;
    background: var(--hsw-bot);
    color: #222222;
    color: var(--hsw-ink);
}

.hsw-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 6px;
    background: #fafbfc;
}

.hsw-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #edf6e5;
    background: var(--hsw-green-soft);
    font-size: 12.5px;
    line-height: 1.8;
    color: #3f7a1f;
    color: var(--hsw-green-deep);
    text-align: right;
}

.hsw-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 12px;
}

.hsw-chip {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #cfe3bf;
    border-radius: 12px;
    background: #ffffff;
    color: #222222;
    color: var(--hsw-ink);
    font-size: 13px;
    text-align: right;
    cursor: pointer;
    transition: background 0.12s ease;
}

.hsw-chip:hover,
.hsw-chip:focus-visible {
    background: #edf6e5;
    background: var(--hsw-green-soft);
    outline: none;
}

.hsw-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0 0 10px;
}

.hsw-row-user {
    justify-content: flex-start;
}

.hsw-row-bot {
    justify-content: flex-end;
}

.hsw-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    order: 2;
}

.hsw-bubble {
    max-width: 86%;
    margin: 0;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.9;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    text-align: right;
}

.hsw-row-user .hsw-bubble {
    background: #74b743;
    background: var(--hsw-green);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.hsw-row-bot .hsw-bubble {
    background: #f3f4f6;
    background: var(--hsw-bot);
    color: #222222;
    color: var(--hsw-ink);
    border-bottom-left-radius: 4px;
}

.hsw-bubble a {
    color: #3f7a1f;
    color: var(--hsw-green-deep);
    text-decoration: underline;
    word-break: break-all;
    font-family: inherit;
}

.hsw-row-user .hsw-bubble a {
    color: #ffffff;
}

.hsw-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
}

.hsw-typing i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #74b743;
    background: var(--hsw-green);
    animation: hsw-dot 1.1s ease-in-out infinite;
}

.hsw-typing i:nth-child(2) { animation-delay: 0.18s; }
.hsw-typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes hsw-dot {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.hsw-error {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fdecea;
    color: #d9483b;
    color: var(--hsw-red);
    font-size: 12.5px;
    line-height: 1.8;
    text-align: right;
}

/* The two real ways to a person. Shown under a failed answer and behind the
   «آدم واقعی» link — never promised by the bot, always one tap away. */
.hsw-human {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--hsw-line);
    border-radius: 12px;
    background: #ffffff;
    font-size: 12.5px;
    line-height: 1.8;
    text-align: right;
}

.hsw-human p {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: #6b6b6b;
    color: var(--hsw-ink-soft);
    text-align: right;
}

.hsw-human a {
    display: block;
    padding: 6px 0;
    color: #3f7a1f;
    color: var(--hsw-green-deep);
    font-weight: bold;
    text-decoration: none;
}

.hsw-human a span {
    font-weight: normal;
    color: #6b6b6b;
    color: var(--hsw-ink-soft);
    font-size: 12px;
}

.hsw-foot {
    flex-shrink: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--hsw-line);
    background: #ffffff;
    /* keep the input above the home indicator on notched phones */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.hsw-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.hsw-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hsw-line);
    border-radius: 12px;
    background: #ffffff;
    color: #222222;
    color: var(--hsw-ink);
    /* 16px stops iOS from zooming the page on focus */
    font-size: 16px;
    outline: none;
    direction: rtl;
    text-align: right;
}

.hsw-input:focus {
    border-color: #74b743;
    border-color: var(--hsw-green);
    box-shadow: 0 0 0 3px rgba(116, 183, 67, 0.18);
}

.hsw-send {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #74b743;
    background: var(--hsw-green);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
}

.hsw-send:disabled {
    opacity: 0.45;
    cursor: default;
}

.hsw-send:not(:disabled):hover {
    background: #66a63a;
}

/* Announced, never shown: the one sentence that changed, for a screen
   reader. Not `display: none`, which would take it out of the accessibility
   tree and announce nothing at all. */
.hsw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The page must not scroll behind a full-screen panel on a phone. */
/*
 * The page behind a full-screen panel, held still.
 *
 * The body is taken out of flow and pulled up by the offset the script saved,
 * so what is behind the panel is the part of the page the reader was on. The
 * obvious `overflow: hidden` + `height: 100%` clamps the document's scroll
 * range to one viewport, which makes the browser reset the scroll position to
 * zero — so closing the chat threw the reader back to the top of the page
 * they had scrolled halfway down. `lockPage()` in the script owns the `top`
 * value and puts the scroll back on unlock.
 */
html.hsw-lock {
    overflow: hidden !important;
}

html.hsw-lock body {
    position: fixed !important;
    overflow: hidden !important;
    left: 0 !important;
    width: 100% !important;
    /* `top` is set inline by lockPage(); nothing here may override it. */
}

@media (prefers-reduced-motion: reduce) {
    .hsw-launcher img,
    .hsw-teaser,
    .hsw-panel,
    .hsw-typing i {
        animation: none;
    }
}

@media print {
    .hsw {
        display: none;
    }
}