/* ==========================================================================
   LannaTrip Chat Widget
   ========================================================================== */


/* ==========================================================================
   CHAT BUTTON
   ========================================================================== */

.lannatrip-chat-button {

    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 62px;
    height: 62px;

    border: 0;
    border-radius: 50%;

    background: #159447;
    color: #ffffff;

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

    font-size: 25px;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);

    z-index: 99990;

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

}


.lannatrip-chat-button:hover {

    transform: scale(1.06);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);

}


.lannatrip-chat-button.is-hidden {

    opacity: 0;

    pointer-events: none;

    transform: scale(0.8);

}


/* ==========================================================================
   CHAT BOX
   ========================================================================== */

.lannatrip-chat-box {

    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 370px;

    max-width:
        calc(100vw - 30px);

    height: 550px;

    max-height:
        calc(100vh - 40px);

    background: #ffffff;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.22);

    z-index: 99999;

    display: flex;

    flex-direction: column;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.96);

    transform-origin:
        bottom right;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

}


.lannatrip-chat-box.is-open {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

}


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

.lannatrip-chat-header {

    height: 82px;

    flex-shrink: 0;

    background: #159447;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        12px 16px;

}


.lannatrip-chat-profile {

    display: flex;

    align-items: center;

    gap: 10px;

}


.lannatrip-chat-avatar {

    width: 46px;
    height: 46px;

    border-radius: 50%;

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

    display: flex;

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

    font-size: 21px;

}


.lannatrip-chat-brand {

    font-size: 17px;

    font-weight: 700;

    line-height: 1.2;

}


.lannatrip-chat-status {

    margin-top: 3px;

    font-size: 11px;

    opacity: 0.95;

    display: flex;

    align-items: center;

    gap: 5px;

}


.lannatrip-chat-status span {

    width: 7px;
    height: 7px;

    background: #a8ff00;

    border-radius: 50%;

    display: inline-block;

}


.lannatrip-chat-actions {

    display: flex;

    align-items: center;

    gap: 4px;

}


.lannatrip-chat-actions button {

    width: 38px;
    height: 38px;

    border: 0;

    background:
        transparent;

    color: #ffffff;

    border-radius: 50%;

    display: flex;

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

    font-size: 19px;

    cursor: pointer;

}


.lannatrip-chat-actions button:hover {

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

}


.lannatrip-chat-back {

    visibility: hidden;

}


/* ==========================================================================
   HOME
   ========================================================================== */

/*
   หน้า Welcome จะถูกใช้เฉพาะตอนยังไม่ได้เริ่มแชท
*/

.lannatrip-chat-home {

    flex: 1;

    overflow-y: auto;

    padding: 12px 14px;

}


/*
   เมื่อเริ่มแชทแล้ว
   JS ควรซ่อน Home และแสดง Chat Screen
*/

.lannatrip-chat-home.is-hidden {

    display: none !important;

}


.lannatrip-chat-welcome {

    text-align: center;

    padding:
        2px 4px 10px;

}


.lannatrip-chat-wave {

    font-size: 34px;

    line-height: 1;

    margin-bottom: 6px;

}


.lannatrip-chat-welcome h4 {

    margin: 0;

    color: #111827;

    font-size: 19px;

    font-weight: 700;

}


.lannatrip-chat-welcome p {

    margin:
        5px 0 0;

    color: #64748b;

    font-size: 12px;

}


/* ==========================================================================
   OPTIONS
   ========================================================================== */

.lannatrip-chat-option {

    width: 100%;

    min-height: 54px;

    margin-bottom: 7px;

    padding:
        8px 10px;

    border:
        1px solid #e2e8f0;

    border-radius: 12px;

    background: #ffffff;

    display: flex;

    align-items: center;

    gap: 10px;

    text-align: left;

    color: #111827;

    cursor: pointer;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;

}


.lannatrip-chat-option:hover {

    background: #f8fafc;

    border-color: #159447;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06);

}


.lannatrip-chat-option-icon {

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    border-radius: 10px;

    background: #effaf3;

    display: flex;

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

    font-size: 19px;

}


.lannatrip-chat-option-text {

    flex: 1;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.3;

}


.lannatrip-chat-option > i {

    color: #94a3b8;

    font-size: 13px;

}


/* ==========================================================================
   SECURITY
   ========================================================================== */

.lannatrip-chat-security {

    padding:
        5px 4px 1px;

    text-align: center;

    color: #94a3b8;

    font-size: 10px;

}


.lannatrip-chat-security i {

    color: #159447;

    margin-right: 4px;

}
/* ==========================================================================
   CUSTOMER NAME FORM
   ========================================================================== */

.lannatrip-chat-name-form {

    width: 100%;

    padding:
        8px 4px 14px;

    box-sizing: border-box;

}


/* --------------------------------------------------------------------------
   NAME FORM CONTENT
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-form-element {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* --------------------------------------------------------------------------
   NAME INPUT
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-input {

    width: 100%;

    height: 46px;

    box-sizing: border-box;

    border:
        1px solid #dbe2ea;

    border-radius: 12px;

    background:
        #ffffff;

    color:
        #1e293b;

    padding:
        0 14px;

    font-family:
        inherit;

    font-size:
        14px;

    outline:
        none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;

}


/* --------------------------------------------------------------------------
   PLACEHOLDER
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-input::placeholder {

    color:
        #94a3b8;

}


/* --------------------------------------------------------------------------
   INPUT FOCUS
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-input:focus {

    border-color:
        #159447;

    box-shadow:
        0 0 0 3px
        rgba(21, 148, 71, 0.10);

}


/* --------------------------------------------------------------------------
   INVALID
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-input.is-invalid {

    border-color:
        #ef4444;

    box-shadow:
        0 0 0 3px
        rgba(239, 68, 68, 0.08);

}
/* ==========================================================================
   CUSTOMER NAME - CONTINUE BUTTON
   ========================================================================== */

.lannatrip-chat-name-button {

    width: 135px !important;

    height: 40px !important;

    margin: 3px auto 0 !important;

    padding: 0 !important;

    border: none !important;

    border-radius: 22px !important;

    background:
        linear-gradient(
            135deg,
            #18a957 0%,
            #119447 100%
        ) !important;

    color: #ffffff !important;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 40px;

    text-align: center;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:
        0 4px 10px
        rgba(17, 148, 71, 0.18);

    transition:
        all 0.18s ease;

}


/* Hover */

.lannatrip-chat-name-button:hover {

    transform: translateY(-1px);

    box-shadow:
        0 6px 14px
        rgba(17, 148, 71, 0.25);

}


/* Active */

.lannatrip-chat-name-button:active {

    transform: translateY(0);

    box-shadow:
        0 3px 7px
        rgba(17, 148, 71, 0.18);

}


/* Disabled */

.lannatrip-chat-name-button:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

}

/* --------------------------------------------------------------------------
   HOVER
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-submit:hover {

    background:
        linear-gradient(
            135deg,
            #18a957 0%,
            #117a39 100%
        ) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 15px
        rgba(21, 148, 71, 0.22);

}


/* --------------------------------------------------------------------------
   ACTIVE
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-submit:active {

    transform:
        translateY(0);

    box-shadow:
        0 3px 8px
        rgba(21, 148, 71, 0.16);

}

/* --------------------------------------------------------------------------
   BUTTON HOVER
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-submit:hover {

    background:
        linear-gradient(
            135deg,
            #18a957 0%,
            #117a39 100%
        );

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(21, 148, 71, 0.25);

}


/* --------------------------------------------------------------------------
   BUTTON ACTIVE
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-submit:active {

    transform:
        translateY(0);

    box-shadow:
        0 3px 8px
        rgba(21, 148, 71, 0.18);

}


/* --------------------------------------------------------------------------
   BUTTON DISABLED
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-submit:disabled {

    opacity:
        0.65;

    cursor:
        not-allowed;

    transform:
        none;

}


/* --------------------------------------------------------------------------
   ERROR
   -------------------------------------------------------------------------- */

.lannatrip-chat-name-error {

    display:
        none;

    margin:
        -3px 2px 0;

    color:
        #ef4444;

    font-size:
        11px;

    line-height:
        1.4;

}


/* ==========================================================================
   CUSTOMER NAME FORM - MOBILE
   ========================================================================== */

@media (max-width: 576px) {

    .lannatrip-chat-name-form {

        padding:
            6px 2px 12px;

    }


    .lannatrip-chat-name-input {

        height:
            45px;

        font-size:
            14px;

    }


    .lannatrip-chat-name-submit {

        height:
            45px;

        font-size:
            14px;

    }

}


/* ==========================================================================
   CHAT SCREEN
   ========================================================================== */

.lannatrip-chat-screen {

    display: none;

    flex: 1;

    min-height: 0;

    flex-direction: column;

    background: #f8fafc;

}


.lannatrip-chat-screen.is-active {

    display: flex;

}


/*
   สำคัญ:
   เมื่อ Chat Screen active
   Home ไม่ควรกินพื้นที่
*/

.lannatrip-chat-home.chat-started {

    display: none !important;

}


/* ==========================================================================
   MESSAGE AREA
   ========================================================================== */

.lannatrip-chat-messages {

    flex: 1;

    overflow-y: auto;

    padding:
        8px 10px;

    display: flex;

    flex-direction: column;

    gap: 5px;

}


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

.lannatrip-chat-message {

    display: flex;

    width: 100%;

    margin: 0;

    padding: 0;

}


/* --------------------------------------------------------------------------
   ADMIN MESSAGE
   -------------------------------------------------------------------------- */

.lannatrip-chat-message-admin {

    justify-content: flex-start;

}


/* --------------------------------------------------------------------------
   CUSTOMER MESSAGE
   -------------------------------------------------------------------------- */

.lannatrip-chat-message-customer {

    justify-content: flex-end;

}


/* ==========================================================================
   MESSAGE ROW
   ========================================================================== */

/*
   โครงสร้างที่ JS จะสร้าง:

   10:28 ✓  555+

   เวลา
   สถานะ
   Bubble
*/

.lannatrip-chat-message-row {

    display: flex;

    align-items: flex-end;

    gap: 3px;

    max-width: 100%;

    margin: 0;

    padding: 0;

}


/* ==========================================================================
   MESSAGE TIME
   ========================================================================== */

.lannatrip-chat-message-time {

    flex-shrink: 0;

    font-size: 8px !important;

    line-height: 1.1;

    color: #94a3b8;

    white-space: nowrap;

    margin: 0;

    padding: 0 0 2px 0;

}


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

.lannatrip-chat-message-status {

    flex-shrink: 0;

    font-size: 8px !important;

    line-height: 1.1;

    color: #94a3b8;

    white-space: nowrap;

    margin: 0;

    padding: 0 0 2px 0;

    letter-spacing: -1px;

}


/* ==========================================================================
   MESSAGE BUBBLE
   ========================================================================== */

.lannatrip-chat-bubble {

    max-width: 78%;

    padding:
        7px 10px;

    border-radius: 14px;

    font-size: 13px;

    line-height: 1.4;

    word-break: break-word;

    margin: 0;

}


/* --------------------------------------------------------------------------
   ADMIN BUBBLE
   -------------------------------------------------------------------------- */

.lannatrip-chat-message-admin
.lannatrip-chat-bubble {

    background: #ffffff;

    color: #1e293b;

    border:
        1px solid #e2e8f0;

    border-bottom-left-radius: 5px;

}


/* --------------------------------------------------------------------------
   CUSTOMER BUBBLE
   -------------------------------------------------------------------------- */

.lannatrip-chat-message-customer
.lannatrip-chat-bubble {

    background: #159447;

    color: #ffffff;

    border-bottom-right-radius: 5px;

}


/* ==========================================================================
   MESSAGE STATUS COLORS
   ========================================================================== */

/*
   ส่งแล้ว
   ✓
*/

.lannatrip-chat-message-status.status-sent {

    color: #94a3b8;

}


/*
   อ่านแล้ว
   ✓✓
*/

.lannatrip-chat-message-status.status-read {

    color: #159447;

}


/* ==========================================================================
   INPUT
   ========================================================================== */

.lannatrip-chat-form {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 6px;

    padding:
        8px;

    background: #ffffff;

    border-top:
        1px solid #e2e8f0;

}


.lannatrip-chat-input {

    flex: 1;

    min-width: 0;

    height: 40px;

    border:
        1px solid #dbe2ea;

    border-radius: 20px;

    padding:
        0 13px;

    outline: none;

    font-family: inherit;

    font-size: 13px;

    color: #1e293b;

    background: #ffffff;

}


.lannatrip-chat-input:focus {

    border-color: #159447;

    box-shadow:
        0 0 0 2px rgba(21, 148, 71, 0.10);

}


.lannatrip-chat-send {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    border: 0;

    border-radius: 50%;

    background: #159447;

    color: #ffffff;

    display: flex;

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

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease;

}


.lannatrip-chat-send:hover {

    background: #117a39;

    transform: scale(1.04);

}


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

.lannatrip-chat-footer {

    flex-shrink: 0;

    height: 30px;

    background: #f8fafc;

    border-top:
        1px solid #edf0f3;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #94a3b8;

    font-size: 9px;

}


/* ==========================================================================
   UNREAD BADGE
   ========================================================================== */

.lannatrip-chat-unread {

    position: absolute;

    top: -4px;

    right: -4px;

    min-width: 20px;

    height: 20px;

    padding:
        0 5px;

    border-radius: 10px;

    background: #ef4444;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    border:
        2px solid #ffffff;

}


/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

.lannatrip-chat-messages::-webkit-scrollbar,
.lannatrip-chat-home::-webkit-scrollbar {

    width: 5px;

}


.lannatrip-chat-messages::-webkit-scrollbar-thumb,
.lannatrip-chat-home::-webkit-scrollbar-thumb {

    background: #cbd5e1;

    border-radius: 10px;

}


.lannatrip-chat-messages::-webkit-scrollbar-track,
.lannatrip-chat-home::-webkit-scrollbar-track {

    background: transparent;

}


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

@media (max-width: 576px) {

    .lannatrip-chat-button {

        right: 16px;

        bottom: 16px;

        width: 58px;
        height: 58px;

        font-size: 23px;

    }


    .lannatrip-chat-box {

        right: 5px;
        left: 5px;

        bottom: 5px;

        width: auto;

        max-width: none;

        height:
            calc(100vh - 10px);

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

        border-radius: 18px;

    }


    .lannatrip-chat-header {

        height: 78px;

        padding:
            10px 13px;

    }


    .lannatrip-chat-avatar {

        width: 44px;
        height: 44px;

        font-size: 20px;

    }


    .lannatrip-chat-brand {

        font-size: 16px;

    }


    .lannatrip-chat-status {

        font-size: 10px;

    }


    .lannatrip-chat-home {

        padding:
            10px 12px;

    }


    .lannatrip-chat-messages {

        padding:
            7px 8px;

        gap: 4px;

    }


    .lannatrip-chat-bubble {

        max-width: 82%;

        padding:
            6px 9px;

        font-size: 12px;

        line-height: 1.4;

    }


    .lannatrip-chat-message-time,
    .lannatrip-chat-message-status {

        font-size: 7px !important;

    }


    .lannatrip-chat-form {

        padding:
            7px;

    }


    .lannatrip-chat-input {

        height: 40px;

        font-size: 12px;

    }


    .lannatrip-chat-send {

        width: 40px;
        height: 40px;

    }


    .lannatrip-chat-footer {

        height: 28px;

        font-size: 9px;

    }

}


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

@media (max-width: 380px) {

    .lannatrip-chat-box {

        right: 0;
        left: 0;

        bottom: 0;

        height: 100vh;

        max-height: 100vh;

        border-radius: 0;

    }


    .lannatrip-chat-header {

        height: 76px;

    }


    .lannatrip-chat-messages {

        padding:
            6px;

    }


    .lannatrip-chat-bubble {

        max-width: 84%;

        font-size: 12px;

    }

}