#kesho-smart-guide-root {
    --ksg-primary: #06748D;
    --ksg-primary-dark: #055F73;
    --ksg-coral: #FE9378;
    --ksg-coral-soft: #FEC3B4;
    --ksg-cream: #F2E3BD;
    --ksg-orange: #EF7F39;

    --ksg-text: #26363B;
    --ksg-muted: #6D7C81;
    --ksg-line: #DCE6E8;
    --ksg-surface: #FFFFFF;
    --ksg-soft: #F6FAFA;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 2147482000;

    direction: rtl;
    text-align: right;

    font-family:
        Vazirmatn,
        Tahoma,
        Arial,
        sans-serif;

    font-size: 15px;
    line-height: 1.75;

    box-sizing: border-box;
}


#kesho-smart-guide-root *,
#kesho-smart-guide-root *::before,
#kesho-smart-guide-root *::after {
    box-sizing: inherit;
}


#kesho-smart-guide-root button,
#kesho-smart-guide-root textarea {
    font: inherit;
}


/* ==========================================================
   LAUNCHER
   ========================================================== */

#kesho-smart-guide-root .ksg-launcher {
    appearance: none;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 1px solid rgba(6, 116, 141, .22);
    border-radius: 50%;

    background:
        var(--ksg-primary);

    cursor: pointer;

    box-shadow:
        0 8px 26px rgba(5, 95, 115, .20);

    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease;

    outline: none;
}


#kesho-smart-guide-root .ksg-launcher:hover {
    background:
        var(--ksg-primary-dark);

    transform:
        translateY(-2px);
}


#kesho-smart-guide-root .ksg-launcher:active {
    transform:
        translateY(0);
}


#kesho-smart-guide-root .ksg-launcher:focus-visible {
    outline:
        3px solid rgba(254, 147, 120, .48);

    outline-offset:
        3px;
}


#kesho-smart-guide-root .ksg-launcher-icon {
    display: block;

    width: 42px;
    height: 42px;

    object-fit: contain;

    /*
     * User requirement:
     * horizontal mirror ONLY.
     */
    transform:
        scaleX(1);

    filter:
        brightness(0)
        invert(1);

    pointer-events: none;
}


/* ==========================================================
   PANEL
   ========================================================== */

#kesho-smart-guide-root .ksg-panel {
    position: absolute;

    right: 0;
    bottom: 78px;

    width: min(390px, calc(100vw - 32px));

    /*
     * Responsive usable chat height.
     *
     * Large screens:
     *   capped at 760px.
     *
     * Short screens:
     *   automatically follows the viewport.
     */
    height: min(760px, calc(100dvh - 110px));
    max-height: calc(100dvh - 110px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid var(--ksg-line);

    border-radius:
        22px;

    background:
        var(--ksg-surface);

    box-shadow:
        0 18px 55px rgba(34, 55, 61, .16);

    color:
        var(--ksg-text);
}


#kesho-smart-guide-root .ksg-panel[hidden] {
    display: none !important;
}


/* ==========================================================
   HEADER
   ========================================================== */

#kesho-smart-guide-root .ksg-head {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 76px;

    padding:
        13px 15px;

    border-bottom:
        1px solid var(--ksg-line);

    background:
        #FFFFFF;
}


#kesho-smart-guide-root .ksg-head-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}


#kesho-smart-guide-root .ksg-head-icon {
    flex: 0 0 auto;

    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(6, 116, 141, .09);
}


#kesho-smart-guide-root .ksg-head-icon img {
    display: block;

    width: 21px;
    height: 21px;

    transform:
        scaleX(-1);

    filter:
        brightness(0)
        saturate(100%)
        invert(36%)
        sepia(43%)
        saturate(1370%)
        hue-rotate(146deg)
        brightness(90%)
        contrast(96%);
}


#kesho-smart-guide-root .ksg-head-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 1px;
}


#kesho-smart-guide-root .ksg-head-text strong {
    display: block;

    color:
        var(--ksg-text);

    font-size:
        15.5px;

    font-weight:
        700;

    line-height:
        1.55;
}


#kesho-smart-guide-root .ksg-head-text span {
    display: block;

    overflow: hidden;

    color:
        var(--ksg-muted);

    font-size:
        12px;

    font-weight:
        400;

    line-height:
        1.65;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


#kesho-smart-guide-root .ksg-close {
    flex: 0 0 auto;

    appearance: none;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        transparent;

    color:
        #748388;

    cursor: pointer;

    font-size:
        25px;

    line-height:
        1;

    transition:
        background-color .15s ease,
        color .15s ease;

    outline: none;
}


#kesho-smart-guide-root .ksg-close:hover {
    background:
        #F3F7F7;

    color:
        var(--ksg-text);
}


#kesho-smart-guide-root .ksg-close:focus-visible {
    outline:
        2px solid rgba(6, 116, 141, .35);

    outline-offset:
        1px;
}


/* ==========================================================
   BODY
   ========================================================== */

#kesho-smart-guide-root .ksg-body {
    min-height: 0;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color:
        #C8D7DA
        transparent;
}


#kesho-smart-guide-root .ksg-messages {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding:
        18px 16px 10px;
}


#kesho-smart-guide-root .ksg-msg {
    width: fit-content;
    max-width: 82%;

    padding:
        9px 12px;

    border-radius:
        15px;

    font-size:
        13.5px;

    line-height:
        1.8;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


#kesho-smart-guide-root .ksg-assistant {
    align-self: flex-start;

    border:
        1px solid #E1EBED;

    border-bottom-right-radius:
        5px;

    background:
        #F5F9F9;

    color:
        var(--ksg-text);
}


#kesho-smart-guide-root .ksg-user {
    align-self: flex-end;

    border:
        1px solid rgba(6, 116, 141, .10);

    border-bottom-left-radius:
        5px;

    background:
        var(--ksg-primary);

    color:
        #FFFFFF;
}


/* ==========================================================
   STARTER QUESTIONS
   ========================================================== */

#kesho-smart-guide-root .ksg-starters {
    padding:
        7px 16px 18px;
}


#kesho-smart-guide-root .ksg-starters[hidden] {
    display: none !important;
}


#kesho-smart-guide-root .ksg-starters-title {
    margin-bottom:
        8px;

    color:
        var(--ksg-muted);

    font-size:
        11.5px;

    line-height:
        1.7;
}


#kesho-smart-guide-root .ksg-starter-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}


#kesho-smart-guide-root .ksg-starter-list button {
    appearance: none;

    min-height: 34px;

    padding:
        6px 11px;

    border:
        1px solid #D5E3E5;

    border-radius:
        10px;

    background:
        #FFFFFF;

    color:
        #40565C;

    cursor: pointer;

    font-size:
        11.8px;

    font-weight:
        500;

    line-height:
        1.5;

    transition:
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease;

    outline: none;
}


#kesho-smart-guide-root .ksg-starter-list button:hover {
    border-color:
        rgba(6, 116, 141, .45);

    background:
        rgba(6, 116, 141, .045);

    color:
        var(--ksg-primary-dark);
}


#kesho-smart-guide-root .ksg-starter-list button:focus-visible {
    outline:
        2px solid rgba(6, 116, 141, .25);

    outline-offset:
        2px;
}


/* ==========================================================
   TYPING
   ========================================================== */

#kesho-smart-guide-root .ksg-typing {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    min-width: 48px;
}


#kesho-smart-guide-root .ksg-typing span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #93A4A8;

    animation:
        ksg-dot 1s infinite ease-in-out;
}


#kesho-smart-guide-root .ksg-typing span:nth-child(2) {
    animation-delay:
        .14s;
}


#kesho-smart-guide-root .ksg-typing span:nth-child(3) {
    animation-delay:
        .28s;
}


@keyframes ksg-dot {
    0%,
    60%,
    100% {
        opacity: .35;
        transform: translateY(0);
    }

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


/* ==========================================================
   COMPOSER
   ========================================================== */

#kesho-smart-guide-root .ksg-form {
    flex: 0 0 auto;

    padding:
        11px 12px;

    border-top:
        1px solid var(--ksg-line);

    background:
        #FFFFFF;
}


#kesho-smart-guide-root .ksg-compose {
    display: flex;
    align-items: flex-end;

    gap: 8px;

    min-height: 46px;

    padding:
        5px 6px 5px 11px;

    border:
        1px solid #D6E2E4;

    border-radius:
        15px;

    background:
        #FFFFFF;

    transition:
        border-color .15s ease;
}


#kesho-smart-guide-root .ksg-compose:focus-within {
    border-color:
        rgba(6, 116, 141, .58);
}


#kesho-smart-guide-root .ksg-input {
    appearance: none;

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 34px;
    max-height: 112px;

    margin: 0;
    padding: 6px 2px;

    overflow-y: auto;

    resize: none;

    border: 0 !important;
    border-radius: 0;

    outline: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    color:
        var(--ksg-text);

    font-size:
        13px;

    line-height:
        1.7;
}


#kesho-smart-guide-root .ksg-input::placeholder {
    color:
        #99A6AA;

    opacity:
        1;
}


#kesho-smart-guide-root .ksg-input::-webkit-inner-spin-button,
#kesho-smart-guide-root .ksg-input::-webkit-outer-spin-button {
    display: none;
}


#kesho-smart-guide-root .ksg-send {
    appearance: none;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        var(--ksg-primary);

    color:
        #FFFFFF;

    cursor: pointer;

    transition:
        background-color .15s ease,
        opacity .15s ease;

    outline: none;
}


#kesho-smart-guide-root .ksg-send svg {
    width: 17px;
    height: 17px;

    transform:
        rotate(180deg);
}


#kesho-smart-guide-root .ksg-send:hover:not(:disabled) {
    background:
        var(--ksg-primary-dark);
}


#kesho-smart-guide-root .ksg-send:disabled {
    opacity:
        .28;

    cursor:
        default;
}


#kesho-smart-guide-root .ksg-send:focus-visible {
    outline:
        2px solid rgba(254, 147, 120, .55);

    outline-offset:
        2px;
}


/* ==========================================================
   ONE-TIME CONVERSATION FEEDBACK
   ========================================================== */

#kesho-smart-guide-root .ksg-feedback-toast {
    position: absolute;

    right: 0;
    bottom: 78px;

    width: max-content;
    max-width: min(300px, calc(100vw - 32px));

    display: flex;
    align-items: center;

    gap: 12px;

    padding:
        9px 10px 9px 13px;

    border:
        1px solid var(--ksg-line);

    border-radius:
        14px;

    background:
        #FFFFFF;

    box-shadow:
        0 10px 30px rgba(34, 55, 61, .14);

    color:
        #53666B;

    font-size:
        12px;
}


#kesho-smart-guide-root .ksg-feedback-actions {
    display: flex;

    gap: 5px;
}


#kesho-smart-guide-root .ksg-feedback-actions button {
    appearance: none;

    min-width: 38px;

    padding:
        4px 8px;

    border:
        1px solid #D7E3E5;

    border-radius:
        8px;

    background:
        #FFFFFF;

    color:
        var(--ksg-primary-dark);

    cursor: pointer;

    font-size:
        11.5px;
}


#kesho-smart-guide-root .ksg-feedback-actions button:hover {
    border-color:
        rgba(6, 116, 141, .45);

    background:
        rgba(6, 116, 141, .05);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    #kesho-smart-guide-root {
        right: 14px;
        bottom: 16px;
    }


    #kesho-smart-guide-root .ksg-launcher {
        width: 58px;
        height: 58px;
    }


    #kesho-smart-guide-root .ksg-launcher-icon {
        width: 40px;
        height: 40px;
    }


    #kesho-smart-guide-root .ksg-panel {
        position: fixed;

        right: 12px;
        bottom: 86px;

        width:
            calc(100vw - 24px);

        /*
         * Mobile chat uses almost all usable viewport
         * while keeping launcher clearance below.
         */
        height:
            calc(100dvh - 104px);

        max-height:
            calc(100dvh - 104px);

        border-radius:
            19px;
    }


    #kesho-smart-guide-root .ksg-feedback-toast {
        position: fixed;

        right: 12px;
        bottom: 86px;
    }
}


@media (prefers-reduced-motion: reduce) {

    #kesho-smart-guide-root *,
    #kesho-smart-guide-root *::before,
    #kesho-smart-guide-root *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* ==========================================================
   KSG UI POLISH 0.4.8
   Scoped override layer.
   ========================================================== */


/* ----------------------------------------------------------
   PANEL HEIGHT

   Previous 0.4.7 was intentionally taller.
   This revision reduces desktop height modestly while
   remaining viewport-responsive.
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-panel {
    height:
        min(
            600px,
            calc(100dvh - 250px)
        );

    max-height:
        calc(100dvh - 250px);
}


/* ----------------------------------------------------------
   LAUNCHER ICON

   Keep current circular frame.
   Increase only the actual icon.
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-launcher-icon {
    width:
        36px;

    height:
        36px;

    transition:
        opacity .14s ease,
        transform .14s ease;
}


/* ----------------------------------------------------------
   OPEN STATE

   One control = one responsibility:
   launcher becomes the close button.

   Header close control remains in DOM for JS compatibility
   but is not visually rendered.
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-launcher {
    position:
        relative;
}


#kesho-smart-guide-root .ksg-launcher::before {
    content:
        "×";

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    color:
        #FFFFFF;

    font-size:
        35px;

    font-weight:
        300;

    line-height:
        1;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .14s ease;
}


#kesho-smart-guide-root.is-open .ksg-launcher-icon {
    opacity:
        0;
}


#kesho-smart-guide-root.is-open .ksg-launcher::before {
    opacity:
        1;
}


#kesho-smart-guide-root .ksg-close {
    display:
        none !important;
}


/* ----------------------------------------------------------
   HEADER

   Header remains balanced after removal of duplicate close.
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-head {
    justify-content:
        flex-start;
}


#kesho-smart-guide-root .ksg-head-main {
    width:
        100%;
}


/* ----------------------------------------------------------
   MESSAGE BUBBLES

   Prevent assistant bubbles from visually stretching wider
   than their content.
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-msg {
    width:
        auto !important;

    min-width:
        0;

    height:
        auto;

    min-height:
        0;
}


#kesho-smart-guide-root .ksg-assistant {
    max-width:
        78%;
}


#kesho-smart-guide-root .ksg-user {
    max-width:
        84%;
}


/* ----------------------------------------------------------
   STARTER QUESTIONS

   Full question sentences need a list, not small tag chips.
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-starters {
    padding:
        8px 16px 18px;
}


#kesho-smart-guide-root .ksg-starters-title {
    margin-bottom:
        9px;

    font-size:
        12px;
}


#kesho-smart-guide-root .ksg-starter-list {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap:
        7px;
}


#kesho-smart-guide-root .ksg-starter-list button {
    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    padding:
        9px 12px;

    border-radius:
        11px;

    text-align:
        right;

    white-space:
        normal;

    font-size:
        12.5px;

    line-height:
        1.7;
}


/* ----------------------------------------------------------
   BACKEND-DRIVEN FOLLOW-UPS

   Same visual language as initial questions.
   No container is rendered when backend returns [].
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-dynamic-suggestions {
    display:
        grid;

    gap:
        8px;

    width:
        100%;

    margin-top:
        2px;

    padding:
        2px 0 4px;
}


#kesho-smart-guide-root .ksg-dynamic-suggestions-title {
    color:
        var(--ksg-muted);

    font-size:
        11.5px;

    line-height:
        1.7;
}


#kesho-smart-guide-root .ksg-dynamic-suggestions-list {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap:
        7px;
}


#kesho-smart-guide-root .ksg-dynamic-suggestions-list button {
    appearance:
        none;

    width:
        100%;

    min-height:
        42px;

    padding:
        9px 12px;

    border:
        1px solid #D5E3E5;

    border-radius:
        11px;

    background:
        #FFFFFF;

    color:
        #40565C;

    text-align:
        right;

    cursor:
        pointer;

    font-size:
        12.5px;

    font-weight:
        500;

    line-height:
        1.7;

    transition:
        border-color .15s ease,
        background-color .15s ease,
        color .15s ease;
}


#kesho-smart-guide-root .ksg-dynamic-suggestions-list button:hover {
    border-color:
        rgba(6, 116, 141, .45);

    background:
        rgba(6, 116, 141, .045);

    color:
        var(--ksg-primary-dark);
}


#kesho-smart-guide-root .ksg-dynamic-suggestions-list button:focus-visible {
    outline:
        2px solid rgba(6, 116, 141, .25);

    outline-offset:
        2px;
}


/* ----------------------------------------------------------
   COMPOSER

   Slightly calmer outline hierarchy.
   ---------------------------------------------------------- */

#kesho-smart-guide-root .ksg-compose {
    border-color:
        #C9DADD;
}


#kesho-smart-guide-root .ksg-compose:focus-within {
    border-color:
        rgba(6, 116, 141, .48);
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    #kesho-smart-guide-root .ksg-panel {
        height:
            calc(100dvh - 228px);

        max-height:
            calc(100dvh - 228px);
    }


    #kesho-smart-guide-root .ksg-launcher-icon {
        width:
            34px;

        height:
            34px;
    }


    #kesho-smart-guide-root .ksg-launcher::before {
        font-size:
            33px;
    }


    #kesho-smart-guide-root .ksg-assistant {
        max-width:
            84%;
    }


    #kesho-smart-guide-root .ksg-user {
        max-width:
            88%;
    }
}

/* ==========================================================
   KSG UI COMPACT 0.4.9
   ========================================================== */

#kesho-smart-guide-root .ksg-panel {
    height:
        min(
            600px,
            calc(100dvh - 250px)
        );

    max-height:
        calc(100dvh - 250px);
}


/*
 * Compact message bubbles.
 * Prevent first assistant message from looking like a card.
 */
#kesho-smart-guide-root .ksg-msg {
    flex:
        0 0 auto !important;

    height:
        auto !important;

    min-height:
        0 !important;

    padding:
        9px 13px !important;

    line-height:
        1.7 !important;
}


#kesho-smart-guide-root .ksg-messages > .ksg-assistant:first-child {
    max-width:
        72%;

    padding:
        9px 13px !important;
}


/*
 * Keep whitespace proportional after reducing panel height.
 */
#kesho-smart-guide-root .ksg-messages {
    padding-top:
        14px;
}


@media (max-width: 600px) {

    #kesho-smart-guide-root .ksg-panel {
        height:
            calc(100dvh - 228px);

        max-height:
            calc(100dvh - 228px);
    }


    #kesho-smart-guide-root .ksg-messages > .ksg-assistant:first-child {
        max-width:
            78%;
    }
}

/* ==========================================================
   KSG FINAL COMPACT UI
   ========================================================== */

#kesho-smart-guide-root .ksg-msg {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 9px 13px !important;
    line-height: 1.7 !important;
}

#kesho-smart-guide-root .ksg-messages > .ksg-assistant:first-child {
    width: fit-content !important;
    max-width: 72% !important;
    min-height: 0 !important;
    padding: 9px 13px !important;
}

@media (max-width: 600px) {
    #kesho-smart-guide-root .ksg-messages > .ksg-assistant:first-child {
        max-width: 78% !important;
    }
}