/* ============================================================
   AMRIT GITA
   HOME GUIDANCE CHATBOT
   DIVINE SUDARSHAN LAUNCHER
   File: css/guidance-widget.css
============================================================ */


/* ============================================================
   ROOT
============================================================ */

.guidance-widget {
    position: fixed;

    right: 8px;
    bottom: 20px;

    z-index: 1600;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    pointer-events: none;
}


.guidance-widget[hidden] {
    display: none !important;
}


.guidance-widget [hidden] {
    display: none !important;
}


.guidance-widget button,
.guidance-widget textarea,
.guidance-widget a {
    font: inherit;
}


.guidance-widget button {
    -webkit-tap-highlight-color: transparent;
}


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

.guidance-widget-panel {
    position: absolute;

    right: 10px;
    bottom: calc(100% + 18px);

    width: min(
        420px,
        calc(100vw - 48px)
    );

    height: min(
        540px,
        calc(100dvh - 215px)
    );

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

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(139, 91, 30, 0.15);

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 253, 248, 0.99),
            rgba(252, 247, 237, 0.99)
        );

    box-shadow:
        0 30px 85px
        rgba(54, 33, 12, 0.18),
        0 8px 26px
        rgba(92, 55, 15, 0.08);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transform-origin:
        bottom right;

    animation:
        guidancePanelOpen
        220ms
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    pointer-events: auto;
}


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

.guidance-widget-panel::before {
    content: "";

    position: absolute;

    top: -110px;
    right: -90px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(224, 145, 31, 0.13),
            transparent 70%
        );

    pointer-events: none;
}


.guidance-widget-panel::after {
    content: "ॐ";

    position: absolute;

    right: -24px;
    top: 115px;

    color:
        rgba(159, 94, 10, 0.024);

    font-family:
        "Nirmala UI",
        "Mangal",
        Georgia,
        serif;

    font-size: 155px;

    line-height: 1;

    pointer-events: none;
}


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

.guidance-widget-header {
    position: relative;
    z-index: 5;

    flex-shrink: 0;

    min-height: 76px;

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

    gap: 12px;

    padding:
        14px
        15px;

    border-bottom:
        1px solid
        rgba(117, 79, 40, 0.09);

    background:
        linear-gradient(
            135deg,
            rgba(255, 253, 248, 0.99),
            rgba(249, 234, 208, 0.96)
        );
}


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

.guidance-widget-header-brand {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 11px;
}


.guidance-widget-avatar {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

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

    border:
        1px solid
        rgba(179, 116, 23, 0.19);

    border-radius: 50%;

    color: #9b6118;

    background:
        radial-gradient(
            circle at 35% 28%,
            #ffffff,
            #f4dfb9
        );

    box-shadow:
        0 7px 18px
        rgba(91, 55, 13, 0.09);

    font-family:
        "Nirmala UI",
        "Mangal",
        Georgia,
        serif;

    font-size: 20px;
}


.guidance-widget-header-copy {
    min-width: 0;
}


.guidance-widget-header-copy strong {
    display: block;

    overflow: hidden;

    margin-bottom: 3px;

    color: #302116;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.02em;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.guidance-widget-header-copy span {
    display: block;

    overflow: hidden;

    color: #8d7763;

    font-size: 10px;
    font-weight: 500;

    line-height: 1.35;

    text-overflow: ellipsis;

    white-space: nowrap;
}


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

.guidance-widget-header-actions {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 5px;
}


.guidance-widget-expand-button,
.guidance-widget-close-button {
    width: 34px;
    height: 34px;

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

    padding: 0;

    border:
        1px solid
        rgba(115, 78, 40, 0.11);

    border-radius: 10px;

    color: #755a40;

    background:
        rgba(255, 255, 255, 0.68);

    cursor: pointer;

    text-decoration: none;

    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}


.guidance-widget-expand-button {
    font-size: 14px;
    font-weight: 800;
}


.guidance-widget-close-button {
    font-size: 21px;
    font-weight: 400;

    line-height: 1;
}


.guidance-widget-expand-button:hover,
.guidance-widget-close-button:hover {
    color: #bd5b06;

    border-color:
        rgba(185, 113, 18, 0.25);

    background: #ffffff;

    transform:
        translateY(-1px);
}


/* ============================================================
   STATUS
============================================================ */

.guidance-widget-status {
    position: relative;
    z-index: 6;

    flex-shrink: 0;

    margin:
        9px
        12px
        0;

    padding:
        9px
        11px;

    border-radius: 11px;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.45;
}


.guidance-widget-status.is-info {
    color: #765718;

    border:
        1px solid
        rgba(178, 122, 35, 0.18);

    background: #fff8e9;
}


.guidance-widget-status.is-success {
    color: #39724b;

    border:
        1px solid
        rgba(58, 129, 80, 0.18);

    background: #eff8f2;
}


.guidance-widget-status.is-error {
    color: #943f35;

    border:
        1px solid
        rgba(159, 61, 49, 0.18);

    background: #fff1ef;
}


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

.guidance-widget-body {
    position: relative;
    z-index: 3;

    flex:
        1
        1
        auto;

    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding:
        16px
        14px
        18px;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(151, 105, 54, 0.22)
        transparent;
}


.guidance-widget-body::-webkit-scrollbar {
    width: 5px;
}


.guidance-widget-body::-webkit-scrollbar-track {
    background: transparent;
}


.guidance-widget-body::-webkit-scrollbar-thumb {
    border-radius: 999px;

    background:
        rgba(151, 105, 54, 0.22);
}


/* ============================================================
   WELCOME
============================================================ */

.guidance-widget-welcome {
    max-width: 325px;

    margin:
        14px
        auto
        22px;

    text-align: center;
}


.guidance-widget-welcome-symbol {
    width: 61px;
    height: 61px;

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

    margin:
        0
        auto
        13px;

    border:
        1px solid
        rgba(178, 116, 24, 0.18);

    border-radius: 50%;

    color: #9c6217;

    background:
        radial-gradient(
            circle at 35% 28%,
            #ffffff,
            #f2debc
        );

    box-shadow:
        0 12px 30px
        rgba(88, 55, 16, 0.08);

    font-family:
        "Nirmala UI",
        "Mangal",
        Georgia,
        serif;

    font-size: 26px;
}


.guidance-widget-welcome > span {
    display: block;

    margin-bottom: 5px;

    color: #9b691f;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.guidance-widget-welcome h2 {
    margin:
        0
        auto
        8px;

    color: #302116;

    font-size: 21px;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.03em;
}


.guidance-widget-welcome p {
    max-width: 300px;

    margin:
        0
        auto
        16px;

    color: #76624e;

    font-size: 12px;

    line-height: 1.62;
}


/* ============================================================
   SUGGESTIONS
============================================================ */

.guidance-widget-suggestions {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;
}


.guidance-widget-suggestion {
    min-height: 31px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(176, 113, 24, 0.17);

    border-radius: 999px;

    color: #805d34;

    background:
        rgba(255, 251, 243, 0.9);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}


.guidance-widget-suggestion:hover {
    color: #b65305;

    border-color:
        rgba(190, 115, 14, 0.29);

    background: #fff5e4;

    transform:
        translateY(-1px);
}


/* ============================================================
   MESSAGE LIST
============================================================ */

.guidance-widget-messages {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


.guidance-widget-message {
    width: 100%;

    display: flex;
    align-items: flex-end;

    gap: 8px;

    animation:
        guidanceMessageAppear
        180ms
        ease-out;
}


/* ============================================================
   ASSISTANT MESSAGE
============================================================ */

.guidance-widget-message-assistant {
    justify-content: flex-start;
}


.guidance-widget-message-assistant
.guidance-widget-message-avatar {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

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

    margin-bottom: 2px;

    border:
        1px solid
        rgba(177, 115, 23, 0.17);

    border-radius: 50%;

    color: #975f17;

    background:
        radial-gradient(
            circle,
            #fffdf8,
            #f1dfc2
        );

    font-family:
        "Nirmala UI",
        "Mangal",
        Georgia,
        serif;

    font-size: 13px;
}


.guidance-widget-message-assistant
.guidance-widget-message-content {
    max-width: 84%;
}


.guidance-widget-message-assistant
.guidance-widget-message-bubble {
    padding:
        11px
        13px;

    border:
        1px solid
        rgba(111, 83, 50, 0.08);

    border-radius:
        5px
        16px
        16px
        16px;

    color: #514234;

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 6px 17px
        rgba(61, 39, 16, 0.045);

    font-size: 12px;

    line-height: 1.65;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


.guidance-widget-message-assistant.is-safety
.guidance-widget-message-bubble {
    border-color:
        rgba(174, 84, 59, 0.16);

    background: #fff7f4;
}


/* ============================================================
   USER MESSAGE
============================================================ */

.guidance-widget-message-user {
    justify-content: flex-end;
}


.guidance-widget-message-user
.guidance-widget-message-content {
    max-width: 84%;
}


.guidance-widget-message-user
.guidance-widget-message-bubble {
    padding:
        11px
        13px;

    border-radius:
        16px
        5px
        16px
        16px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #e67c08,
            #c85c03
        );

    box-shadow:
        0 7px 17px
        rgba(171, 76, 5, 0.14);

    font-size: 12px;

    line-height: 1.6;

    white-space: pre-wrap;

    overflow-wrap: anywhere;
}


.guidance-widget-message-user.is-pending {
    opacity: 0.7;
}


.guidance-widget-message-user.is-error
.guidance-widget-message-bubble {
    box-shadow:
        0 0 0 2px
        rgba(166, 56, 47, 0.14);
}


/* ============================================================
   MESSAGE META
============================================================ */

.guidance-widget-message-meta {
    margin:
        5px
        4px
        0;

    color: #9a8773;

    font-size: 9px;
    font-weight: 600;

    line-height: 1.4;
}


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

.guidance-widget-typing {
    display: flex;
    align-items: flex-end;

    gap: 8px;

    margin-top: 14px;
}


.guidance-widget-typing
.guidance-widget-message-avatar {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

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

    border:
        1px solid
        rgba(177, 115, 23, 0.17);

    border-radius: 50%;

    color: #975f17;

    background: #fff8ec;

    font-family:
        "Nirmala UI",
        "Mangal",
        Georgia,
        serif;

    font-size: 13px;
}


.guidance-widget-typing-bubble {
    min-width: 62px;
    min-height: 39px;

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

    gap: 4px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(111, 83, 50, 0.08);

    border-radius:
        5px
        15px
        15px
        15px;

    background: #ffffff;
}


.guidance-widget-typing-bubble span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ad8960;

    animation:
        guidanceTypingDot
        1.05s
        ease-in-out
        infinite;
}


.guidance-widget-typing-bubble span:nth-child(2) {
    animation-delay: 0.13s;
}


.guidance-widget-typing-bubble span:nth-child(3) {
    animation-delay: 0.26s;
}


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

.guidance-widget-composer-wrap {
    position: relative;
    z-index: 6;

    flex-shrink: 0;

    padding:
        10px
        12px
        10px;

    border-top:
        1px solid
        rgba(111, 83, 50, 0.08);

    background:
        rgba(255, 253, 248, 0.97);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


.guidance-widget-form {
    position: relative;

    display: grid;

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

    align-items: end;

    gap: 8px;

    padding:
        7px
        7px
        7px
        12px;

    border:
        1px solid
        rgba(126, 88, 48, 0.14);

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 5px 16px
        rgba(55, 36, 16, 0.04);

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.guidance-widget-form:focus-within {
    border-color:
        rgba(198, 116, 12, 0.4);

    box-shadow:
        0 0 0 4px
        rgba(221, 137, 14, 0.07);
}


/* ============================================================
   ACCESSIBLE INPUT LABEL
============================================================ */

.guidance-widget-input-label {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip:
        rect(
            0,
            0,
            0,
            0
        );

    white-space: nowrap;
}


/* ============================================================
   TEXTAREA
============================================================ */

.guidance-widget-input {
    width: 100%;

    min-height: 30px;
    max-height: 105px;

    padding:
        6px
        0;

    overflow-y: auto;

    border: 0;

    outline: 0;

    resize: none;

    color: #302116;

    background: transparent;

    font-size: 13px;

    line-height: 1.5;
}


.guidance-widget-input::placeholder {
    color: #a39280;
}


.guidance-widget-input:disabled {
    opacity: 0.6;

    cursor: not-allowed;
}


/* ============================================================
   SEND BUTTON
============================================================ */

.guidance-widget-send-button {
    width: 39px;
    height: 39px;

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

    padding: 0;

    border: 0;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #e67c08,
            #c85c03
        );

    box-shadow:
        0 7px 17px
        rgba(173, 76, 5, 0.18);

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}


.guidance-widget-send-button:hover:not(:disabled) {
    transform:
        translateY(-1px);

    box-shadow:
        0 9px 20px
        rgba(173, 76, 5, 0.24);
}


.guidance-widget-send-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;

    box-shadow: none;
}


.guidance-widget-send-button.is-loading span {
    animation:
        guidanceSendPulse
        800ms
        ease-in-out
        infinite;
}


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

.guidance-widget-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 6px;

    padding:
        0
        3px;

    color: #9a8774;

    font-size: 9px;
    font-weight: 600;
}


#guidanceWidgetCharacterCount.near-limit {
    color: #ad590b;

    font-weight: 800;
}


/* ============================================================
   SUDARSHAN GUIDANCE LAUNCHER
============================================================ */

.guidance-chakra-launcher {
    position: relative;

    width: 160px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    outline: 0;

    background: transparent;

    cursor: pointer;

    pointer-events: auto;

    user-select: none;
    -webkit-user-select: none;
}


/* ============================================================
   CHAKRA VISUAL AREA
============================================================ */

.guidance-chakra-visual {
    position: relative;

    width: 154px;
    height: 116px;

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

    overflow: visible;

    transition:
        transform 220ms ease,
        filter 220ms ease;
}


/* ============================================================
   ROTATING ENERGY HALO
============================================================ */

.guidance-chakra-visual::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 116px;
    height: 116px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,

            transparent 0deg,

            rgba(
                255,
                207,
                89,
                0.13
            ) 25deg,

            rgba(
                242,
                155,
                27,
                0.75
            ) 58deg,

            rgba(
                181,
                81,
                0,
                0.28
            ) 83deg,

            transparent 112deg,

            transparent 170deg,

            rgba(
                255,
                215,
                107,
                0.16
            ) 205deg,

            rgba(
                231,
                133,
                15,
                0.75
            ) 242deg,

            rgba(
                157,
                67,
                0,
                0.26
            ) 274deg,

            transparent 310deg,

            transparent 360deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 55%,
            #000 57%,
            #000 64%,
            transparent 67%
        );

    mask:
        radial-gradient(
            circle,
            transparent 55%,
            #000 57%,
            #000 64%,
            transparent 67%
        );

    opacity: 0.87;

    transform:
        translate(
            -50%,
            -50%
        )
        rotate(0deg);

    animation:
        guidanceEnergyRingRotate
        7s
        linear
        infinite;

    pointer-events: none;
}


/* ============================================================
   DIVINE SPARKS
============================================================ */

.guidance-chakra-visual::after {
    content: "✦";

    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 6;

    width: 1px;
    height: 1px;

    color:
        rgba(
            213,
            126,
            14,
            0.92
        );

    font-size: 9px;

    line-height: 1;

    text-shadow:
        -58px -29px 0
        rgba(
            221,
            133,
            20,
            0.77
        ),

        53px -18px 0
        rgba(
            255,
            192,
            68,
            0.75
        ),

        -47px 30px 0
        rgba(
            190,
            88,
            5,
            0.66
        ),

        48px 35px 0
        rgba(
            224,
            132,
            19,
            0.70
        );

    transform:
        translate(
            -50%,
            -50%
        );

    animation:
        guidanceSparkTwinkle
        2.7s
        ease-in-out
        infinite;

    pointer-events: none;
}


/* ============================================================
   STRONGER GOLDEN GLOW
============================================================ */

.guidance-chakra-glow {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 124px;
    height: 94px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,

            rgba(
                255,
                199,
                75,
                0.62
            ) 0%,

            rgba(
                237,
                139,
                18,
                0.37
            ) 37%,

            rgba(
                183,
                78,
                0,
                0.19
            ) 59%,

            rgba(
                122,
                51,
                0,
                0.07
            ) 70%,

            transparent 81%
        );

    filter:
        blur(13px);

    transform:
        translate(
            -50%,
            -50%
        );

    animation:
        guidanceChakraGlowPulse
        3.4s
        ease-in-out
        infinite;

    pointer-events: none;
}


/* ============================================================
   ACTUAL TILTED CHAKRA IMAGE

   Chakra does NOT rotate.
   Only gentle floating movement.
============================================================ */

.guidance-chakra-image {
    position: relative;

    z-index: 4;

    width: 140px;
    height: auto;

    max-width: none;

    display: block;

    object-fit: contain;

    object-position: center;

    filter:
        drop-shadow(
            0 9px 14px
            rgba(
                83,
                36,
                0,
                0.30
            )
        )
        drop-shadow(
            0 0 14px
            rgba(
                239,
                141,
                21,
                0.32
            )
        );

    transform-origin:
        50% 50%;

    animation:
        guidanceChakraFloat
        4.6s
        ease-in-out
        infinite;

    pointer-events: none;

    user-select: none;

    -webkit-user-drag: none;
}


/* ============================================================
   SAKHA / SAKHI LABEL
============================================================ */

.guidance-chakra-label {
    position: relative;

    z-index: 8;

    display: block;

    margin-top: -3px;

    color: #7d4c16;

    font-size: 11px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: 0.025em;

    text-align: center;

    white-space: nowrap;

    text-shadow:
        0 2px 10px
        rgba(
            91,
            42,
            2,
            0.13
        );

    transition:
        color 180ms ease,
        transform 180ms ease,
        text-shadow 180ms ease;
}


/* ============================================================
   LABEL STAR
============================================================ */

.guidance-chakra-label::before {
    content: "✦";

    display: block;

    margin-bottom: 2px;

    color:
        rgba(
            174,
            91,
            7,
            0.72
        );

    font-size: 7px;

    line-height: 1;
}


/* ============================================================
   CHAKRA HOVER
============================================================ */

.guidance-chakra-launcher:hover
.guidance-chakra-visual {
    transform:
        translateY(-3px)
        scale(1.035);

    filter:
        brightness(1.06)
        saturate(1.08);
}


.guidance-chakra-launcher:hover
.guidance-chakra-image {
    filter:
        drop-shadow(
            0 12px 18px
            rgba(
                82,
                35,
                0,
                0.34
            )
        )
        drop-shadow(
            0 0 17px
            rgba(
                234,
                127,
                7,
                0.39
            )
        );
}


.guidance-chakra-launcher:hover
.guidance-chakra-label {
    color: #a54d05;

    transform:
        translateY(-1px);

    text-shadow:
        0 3px 13px
        rgba(
            134,
            60,
            0,
            0.18
        );
}


/* ============================================================
   OPEN STATE
============================================================ */

.guidance-widget.is-open
.guidance-chakra-image {
    animation-duration: 5.5s;

    opacity: 0.95;
}


.guidance-widget.is-open
.guidance-chakra-label {
    color: #a45810;
}


/* ============================================================
   ACCESSIBILITY FOCUS
============================================================ */

.guidance-widget button:focus-visible,
.guidance-widget a:focus-visible,
.guidance-widget textarea:focus-visible {
    outline:
        2px solid
        rgba(
            211,
            119,
            8,
            0.66
        );

    outline-offset: 3px;
}


.guidance-chakra-launcher:focus-visible {
    border-radius: 24px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .guidance-widget {
        right: 6px;
        bottom: 16px;
    }


    .guidance-widget-panel {
        right: 10px;

        width:
            min(
                400px,
                calc(100vw - 36px)
            );

        height:
            min(
                525px,
                calc(100dvh - 195px)
            );

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


    .guidance-chakra-launcher {
        width: 142px;
    }


    .guidance-chakra-visual {
        width: 137px;
        height: 104px;
    }


    .guidance-chakra-image {
        width: 124px;
    }


    .guidance-chakra-visual::before {
        width: 102px;
        height: 102px;
    }


    .guidance-chakra-glow {
        width: 104px;
        height: 80px;
    }

}


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

@media (max-width: 600px) {

    .guidance-widget {
        right: 4px;
        bottom: 9px;
    }


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

    .guidance-widget-panel {
        position: fixed;

        left: 8px;
        right: 8px;
        bottom: 8px;

        width: auto;

        height:
            calc(100dvh - 16px);

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

        border-radius: 24px;

        transform-origin:
            bottom center;
    }


    body.guidance-widget-open {
        overflow: hidden;
    }


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

    .guidance-widget-header {
        min-height: 70px;

        padding:
            12px
            13px;
    }


    .guidance-widget-avatar {
        width: 41px;
        height: 41px;

        font-size: 18px;
    }


    .guidance-widget-header-copy strong {
        font-size: 13px;
    }


    .guidance-widget-header-copy span {
        font-size: 9px;
    }


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

    .guidance-widget-body {
        padding:
            14px
            12px
            16px;
    }


    .guidance-widget-welcome {
        margin-top: 10px;
    }


    .guidance-widget-welcome h2 {
        font-size: 20px;
    }


    .guidance-widget-welcome p {
        font-size: 12px;
    }


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

    .guidance-widget-message-assistant
    .guidance-widget-message-content,
    .guidance-widget-message-user
    .guidance-widget-message-content {
        max-width: 87%;
    }


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

    .guidance-widget-composer-wrap {
        padding:
            9px
            10px
            10px;
    }


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

    .guidance-chakra-launcher {
        width: 110px;
    }


    .guidance-chakra-visual {
        width: 106px;
        height: 82px;
    }


    .guidance-chakra-image {
        width: 96px;
    }


    .guidance-chakra-visual::before {
        width: 80px;
        height: 80px;
    }


    .guidance-chakra-glow {
        width: 84px;
        height: 65px;
    }


    .guidance-chakra-visual::after {
        font-size: 7px;

        text-shadow:
            -40px -20px 0
            rgba(
                221,
                133,
                20,
                0.70
            ),

            39px -13px 0
            rgba(
                255,
                190,
                68,
                0.65
            ),

            -33px 22px 0
            rgba(
                185,
                79,
                4,
                0.58
            ),

            36px 25px 0
            rgba(
                218,
                124,
                14,
                0.62
            );
    }


    .guidance-chakra-label {
        margin-top: -2px;

        font-size: 9px;
    }


    /*
     * Chat open hone ke baad mobile launcher hide.
     */
    .guidance-widget.is-open
    .guidance-chakra-launcher {
        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }

}


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

@media (max-width: 430px) {

    .guidance-widget {
        right: 2px;
        bottom: 8px;
    }


    .guidance-widget-panel {
        left: 5px;
        right: 5px;
        bottom: 5px;

        height:
            calc(100dvh - 10px);

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

        border-radius: 21px;
    }


    .guidance-widget-header {
        padding:
            11px
            10px;
    }


    .guidance-widget-header-actions {
        gap: 3px;
    }


    .guidance-widget-expand-button,
    .guidance-widget-close-button {
        width: 32px;
        height: 32px;
    }


    .guidance-chakra-launcher {
        width: 100px;
    }


    .guidance-chakra-visual {
        width: 96px;
        height: 75px;
    }


    .guidance-chakra-image {
        width: 88px;
    }


    .guidance-chakra-visual::before {
        width: 73px;
        height: 73px;
    }


    .guidance-chakra-glow {
        width: 77px;
        height: 60px;
    }


    .guidance-chakra-label {
        font-size: 8.5px;
    }

}


/* ============================================================
   SHORT DESKTOP
============================================================ */

@media
(max-height: 700px)
and
(min-width: 601px) {

    .guidance-widget-panel {
        height:
            calc(100dvh - 175px);

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


    .guidance-chakra-launcher {
        width: 133px;
    }


    .guidance-chakra-visual {
        width: 129px;
        height: 96px;
    }


    .guidance-chakra-image {
        width: 116px;
    }


    .guidance-chakra-visual::before {
        width: 95px;
        height: 95px;
    }


    .guidance-chakra-glow {
        width: 98px;
        height: 75px;
    }


    .guidance-chakra-label {
        font-size: 9.5px;
    }

}


/* ============================================================
   TOUCH DEVICES
============================================================ */

@media
(hover: none)
and
(pointer: coarse) {

    .guidance-widget-suggestion:hover,
    .guidance-widget-send-button:hover,
    .guidance-widget-expand-button:hover,
    .guidance-widget-close-button:hover,
    .guidance-chakra-launcher:hover
    .guidance-chakra-visual,
    .guidance-chakra-launcher:hover
    .guidance-chakra-label {
        transform: none;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .guidance-widget-panel,
    .guidance-widget-message,
    .guidance-widget-typing-bubble span,
    .guidance-widget-send-button.is-loading span,
    .guidance-chakra-image,
    .guidance-chakra-visual::before,
    .guidance-chakra-visual::after,
    .guidance-chakra-glow {
        animation: none !important;
    }

}


/* ============================================================
   PRINT
============================================================ */

@media print {

    .guidance-widget {
        display: none !important;
    }

}


/* ============================================================
   PANEL OPEN ANIMATION
============================================================ */

@keyframes guidancePanelOpen {

    from {
        opacity: 0;

        transform:
            translateY(12px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* ============================================================
   MESSAGE APPEAR
============================================================ */

@keyframes guidanceMessageAppear {

    from {
        opacity: 0;

        transform:
            translateY(5px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@keyframes guidanceTypingDot {

    0%,
    60%,
    100% {
        transform:
            translateY(0);

        opacity: 0.35;
    }

    30% {
        transform:
            translateY(-4px);

        opacity: 1;
    }

}


/* ============================================================
   SEND BUTTON
============================================================ */

@keyframes guidanceSendPulse {

    0%,
    100% {
        transform:
            translateY(0);

        opacity: 0.65;
    }

    50% {
        transform:
            translateY(-2px);

        opacity: 1;
    }

}


/* ============================================================
   CHAKRA FLOAT

   Actual Chakra orientation remains fixed.
============================================================ */

@keyframes guidanceChakraFloat {

    0%,
    100% {
        transform:
            translateY(-2px)
            scale(1);
    }

    50% {
        transform:
            translateY(3px)
            scale(1.012);
    }

}


/* ============================================================
   ENERGY RING ROTATION

   Only the halo rotates.
============================================================ */

@keyframes guidanceEnergyRingRotate {

    from {
        transform:
            translate(
                -50%,
                -50%
            )
            rotate(0deg);
    }

    to {
        transform:
            translate(
                -50%,
                -50%
            )
            rotate(360deg);
    }

}


/* ============================================================
   GOLDEN GLOW PULSE
============================================================ */

@keyframes guidanceChakraGlowPulse {

    0%,
    100% {
        opacity: 0.66;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.94);
    }

    50% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.08);
    }

}


/* ============================================================
   DIVINE SPARK TWINKLE
============================================================ */

@keyframes guidanceSparkTwinkle {

    0%,
    100% {
        opacity: 0.35;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.84);
    }

    45% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.14);
    }

    72% {
        opacity: 0.57;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.97);
    }

}