/* =========================
   Ask Abhinav Button
   ========================= */

.chat-button {

    position: relative;

    flex-shrink: 0;

    padding: 10px 18px;

    border: none;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #ffffff;

    font-size: 0.85rem;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(37, 99, 235, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.chat-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(37, 99, 235, 0.30);

}


/* =========================
   Chat Window
   ========================= */

.chat-window {

    position: fixed;

    right: 28px;

    /*
       Higher than the old version so
       the chat is visible without
       sitting at the very bottom.
    */

    bottom: 105px;

    z-index: 300;

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

    height: 540px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(226, 232, 240, 0.9);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 25px 70px
        rgba(15, 23, 42, 0.20);

}


.hidden {

    display: none;

}


/* =========================
   Chat Header
   ========================= */

.chat-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 20px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #6366f1,
            #7c3aed
        );

    color: #ffffff;

}


.chat-header div {

    display: flex;

    flex-direction: column;

}


.chat-header strong {

    font-size: 1.05rem;

}


.chat-header span {

    margin-top: 2px;

    color:
        rgba(255, 255, 255, 0.8);

    font-size: 0.75rem;

}


#chat-close {

    width: 32px;

    height: 32px;

    border: none;

    border-radius: 50%;

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

    color: #ffffff;

    font-size: 1.5rem;

    line-height: 1;

    cursor: pointer;

}


#chat-close:hover {

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

}


/* =========================
   Messages
   ========================= */

.chat-messages {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 13px;

    padding: 18px;

    overflow-y: auto;

    background: #f8fafc;

}


.chat-message {

    max-width: 86%;

    padding: 12px 14px;

    border-radius: 13px;

    font-size: 0.88rem;

    line-height: 1.5;

}


.chat-message.assistant {

    align-self: flex-start;

    background: #ffffff;

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

    color: var(--text);

}


.chat-message.user {

    align-self: flex-end;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #6366f1
        );

    color: #ffffff;

}


/* =========================
   Input
   ========================= */

.chat-input-area {

    display: flex;

    gap: 8px;

    padding: 13px;

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

    background: #ffffff;

}


#chat-input {

    flex: 1;

    min-width: 0;

    padding: 11px 13px;

    border:
        1px solid #cbd5e1;

    border-radius: 10px;

    outline: none;

    font-size: 0.88rem;

}


#chat-input:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.08);

}


.chat-input-area button {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    border: none;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #7c3aed
        );

    color: #ffffff;

    font-size: 1.2rem;

    font-weight: 700;

    cursor: pointer;

}


.chat-input-area button:hover {

    transform: translateY(-1px);

}


.chat-input-area button:disabled {

    opacity: 0.55;

    cursor: not-allowed;

    transform: none;

}


/* =========================
   Mobile
   ========================= */

@media (max-width: 600px) {

    .chat-button {

        padding: 8px 12px;

        font-size: 0.78rem;

    }


    .chat-window {

        right: 15px;

        bottom: 85px;

        width:
            calc(100vw - 30px);

        height: 70vh;

    }

}