/* STEP 4: MOBILE AI CHAT FIX */
#benge-ai-chat,
.benge-ai-chat,
#benge-chat-widget,
.benge-chat-widget{
    z-index:999999 !important;
}

#benge-ai-chat .benge-chat-panel,
.benge-ai-chat .benge-chat-panel,
#benge-chat-widget .benge-chat-panel,
.benge-chat-widget .benge-chat-panel{
    width:380px !important;
    max-width:calc(100vw - 20px) !important;
    max-height:min(78vh,720px) !important;
    border-radius:22px !important;
    overflow:hidden !important;
    background:#fff !important;
    box-shadow:0 25px 70px rgba(0,0,0,.24) !important;
}

.benge-chat-header{
    background:linear-gradient(135deg,#07142c,#0d1f47) !important;
    color:#fff !important;
    border-bottom:3px solid #c9a84c !important;
}

.benge-chat-body{
    background:#f8f8f8 !important;
    overflow-y:auto !important;
    max-height:calc(78vh - 160px) !important;
    padding:14px !important;
    scroll-behavior:smooth !important;
}

.benge-chat-footer{
    background:#fff !important;
    border-top:1px solid #ececec !important;
    padding:12px !important;
}

.benge-chat-body,
.benge-chat-body *{
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
}

.benge-chat-body p,
.benge-chat-body div,
.benge-chat-body span{
    white-space:normal !important;
}

.benge-chat-bubble,
.benge-chat-message,
.benge-chat-msg,
.benge-chat-response{
    max-width:88% !important;
    border-radius:20px !important;
    line-height:1.65 !important;
    font-size:16px !important;
}

.benge-chat-body .is-assistant,
.benge-chat-body .assistant,
.benge-chat-body [data-role="assistant"]{
    background:#fff !important;
    color:#111827 !important;
}

.benge-chat-body .is-user,
.benge-chat-body .user,
.benge-chat-body [data-role="user"]{
    background:#07142c !important;
    color:#fff !important;
}

.benge-chat-chip,
.benge-chat-suggestion,
.benge-chat-quick,
.benge-chat-action{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:10px 14px !important;
    border-radius:999px !important;
    border:2px solid #c9a84c !important;
    background:#fff !important;
    color:#111827 !important;
    font-weight:700 !important;
    margin:0 8px 10px 0 !important;
    white-space:normal !important;
}

#benge-ai-chat input[type="text"],
#benge-chat-widget input[type="text"],
.benge-ai-chat input[type="text"],
.benge-chat-widget input[type="text"]{
    height:52px !important;
    border-radius:16px !important;
    font-size:16px !important;
    padding:0 16px !important;
}

#benge-ai-chat button[type="submit"],
#benge-chat-widget button[type="submit"],
.benge-ai-chat button[type="submit"],
.benge-chat-widget button[type="submit"]{
    width:52px !important;
    height:52px !important;
    border-radius:16px !important;
    background:#000 !important;
    color:#fff !important;
}

@media (max-width: 768px){
    #benge-ai-chat,
    .benge-ai-chat,
    #benge-chat-widget,
    .benge-chat-widget{
        right:10px !important;
        bottom:10px !important;
        left:auto !important;
    }

    #benge-ai-chat .benge-chat-panel,
    .benge-ai-chat .benge-chat-panel,
    #benge-chat-widget .benge-chat-panel,
    .benge-chat-widget .benge-chat-panel{
        width:calc(100vw - 16px) !important;
        max-width:calc(100vw - 16px) !important;
        max-height:calc(100vh - 88px) !important;
        bottom:72px !important;
        right:0 !important;
        border-radius:24px !important;
    }

    .benge-chat-body{
        max-height:calc(100vh - 240px) !important;
        padding:12px !important;
    }

    .benge-chat-bubble,
    .benge-chat-message,
    .benge-chat-msg,
    .benge-chat-response{
        max-width:92% !important;
        font-size:15px !important;
    }

    .benge-chat-chip,
    .benge-chat-suggestion,
    .benge-chat-quick,
    .benge-chat-action{
        font-size:13px !important;
        padding:10px 12px !important;
    }
}

/* STEP 13: MOBILE CHAT COMPACT MODE */
@media (max-width: 768px) {
    #benge-ai-chat,
    .benge-ai-chat {
        right: 8px !important;
        bottom: 76px !important;
        left: auto !important;
    }

    #benge-ai-chat .benge-chat-panel,
    .benge-ai-chat .benge-chat-panel {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: 72vh !important;
        border-radius: 22px !important;
        bottom: 68px !important;
        right: 0 !important;
        left: auto !important;
    }

    .benge-chat-header {
        padding: 12px 14px !important;
    }

    .benge-chat-body {
        max-height: calc(72vh - 150px) !important;
        padding: 10px !important;
    }

    .benge-chat-footer {
        padding: 10px !important;
    }

    .benge-msg,
    .benge-chat-bubble,
    .benge-chat-message,
    .benge-chat-msg,
    .benge-chat-response {
        max-width: 88% !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        padding: 12px 14px !important;
        border-radius: 18px !important;
    }

    #bengeChatSuggs,
    .benge-chat-chip-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #bengeChatSuggs::-webkit-scrollbar,
    .benge-chat-chip-wrap::-webkit-scrollbar {
        display: none !important;
    }

    #bengeChatSuggs .benge-chat-chip,
    .benge-chat-chip-wrap .benge-chat-chip,
    .benge-chat-chip,
    .benge-chat-suggestion,
    .benge-chat-quick,
    .benge-chat-action {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        margin: 0 !important;
    }

    #benge-ai-chat input[type="text"],
    .benge-ai-chat input[type="text"] {
        height: 48px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
    }

    #benge-ai-chat button[type="submit"],
    .benge-ai-chat button[type="submit"],
    #benge-ai-chat .benge-chat-send,
    .benge-ai-chat .benge-chat-send {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }
}

/* STEP 14: MOBILE CHAT FINAL POLISH */
@media (max-width: 768px) {
    #benge-ai-chat,
    .benge-ai-chat {
        right: 8px !important;
        bottom: 92px !important;
        left: auto !important;
        z-index: 999999 !important;
    }

    #benge-ai-chat .benge-chat-panel,
    .benge-ai-chat .benge-chat-panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 66vh !important;
        bottom: 70px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .benge-chat-header {
        padding: 10px 12px !important;
    }

    .benge-chat-header .benge-chat-title,
    .benge-chat-title {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .benge-chat-header .benge-chat-subtitle,
    .benge-chat-subtitle {
        font-size: 12px !important;
    }

    .benge-chat-body {
        max-height: calc(66vh - 150px) !important;
        padding: 10px !important;
    }

    .benge-chat-footer {
        padding: 8px !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
    }

    .benge-msg,
    .benge-chat-bubble,
    .benge-chat-message,
    .benge-chat-msg,
    .benge-chat-response {
        max-width: 84% !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
    }

    #bengeChatSuggs,
    .benge-chat-chip-wrap {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        white-space: nowrap !important;
        padding: 8px 0 2px !important;
        scrollbar-width: none !important;
    }

    #bengeChatSuggs::-webkit-scrollbar,
    .benge-chat-chip-wrap::-webkit-scrollbar {
        display: none !important;
    }

    #bengeChatSuggs .benge-chat-chip,
    .benge-chat-chip-wrap .benge-chat-chip,
    .benge-chat-chip,
    .benge-chat-suggestion,
    .benge-chat-quick,
    .benge-chat-action {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 12.5px !important;
        min-height: 38px !important;
        padding: 7px 11px !important;
        border-radius: 999px !important;
    }

    #benge-ai-chat input[type="text"],
    .benge-ai-chat input[type="text"] {
        height: 46px !important;
        font-size: 16px !important;
        border-radius: 14px !important;
        padding: 0 14px !important;
    }

    #benge-ai-chat button[type="submit"],
    .benge-ai-chat button[type="submit"],
    #benge-ai-chat .benge-chat-send,
    .benge-ai-chat .benge-chat-send {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
    }

    .benge-lang-toggle,
    #benge-lang-wrap,
    .language-dropdown-toggle {
        z-index: 9990 !important;
    }
}