/* ============================================================== */
/* SEHRI.CSS - UNIFIED THEME AND STYLESHEET                       */
/* ============================================================== */

/* -------------------------------------------------------------- */
/* 01. CSS VARIABLES (THEME TOKENS)                               */
/* -------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --tblr-primary: #5925e0;
    --tblr-primary-rgb: 89, 37, 224;

    /* Layout Variables */
    --sehri-sidebar-width: 280px;
    --sehri-sidebar-collapsed-width: 50px;

    /* Theme: Light */
    --background: #ffffff;
    --sehri-bg-primary: #ffffff;
    --sehri-bg-secondary: #f0f4f9;
    --sehri-bg-input: #ffffff;
    --sehri-bg-dropdown: #ffffff;
    --sehri-bg-gradient: #f0f4f9;

    --sehri-text-primary: #1f1f1f;
    --sehri-text-secondary: rgba(31, 31, 31, 0.6);
    --sehri-text-muted: rgba(31, 31, 31, 0.4);

    --sehri-border: rgba(0, 0, 0, 0.05);
    --sehri-border-strong: rgba(0, 0, 0, 0.08);

    --sehri-bg-hover: rgba(0, 0, 0, 0.05);
    --sehri-bg-hover-strong: rgba(0, 0, 0, 0.10);

    --sehri-chat-user-bg: rgba(0, 0, 0, 0.04);

    /* Ultra-Tucked Elevation Tokens (Light Mode) */
    --sehri-shadow-card: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --sehri-shadow-card-hover: 0 2px 4px -2px rgba(0, 0, 0, 0.25);

    --sehri-shadow-chat-form: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --sehri-shadow-chat-form-focus: 0 2px 4px -2px rgba(0, 0, 0, 0.25);

    --sehri-shadow-dropdown: 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --sehri-shadow-modal: 0 4px 8px -3px rgba(0, 0, 0, 0.25);
}

.theme-dark {
    /* Brand Colors */
    --tblr-primary: #8a5cf6;
    --tblr-primary-rgb: 138, 92, 246;

    /* Theme: Dark */
    --background: #131313;
    --sehri-bg-primary: #131313;
    --sehri-bg-secondary: #0f1115;
    --sehri-bg-input: #131313;
    --sehri-bg-dropdown: #131313;
    --sehri-bg-gradient: #07080a;

    --sehri-text-primary: #e3e3e3;
    --sehri-text-secondary: rgba(227, 227, 227, 0.6);
    --sehri-text-muted: rgba(227, 227, 227, 0.4);

    --sehri-border: rgba(255, 255, 255, 0.05);
    --sehri-border-strong: rgba(255, 255, 255, 0.08);

    --sehri-bg-hover: rgba(255, 255, 255, 0.05);
    --sehri-bg-hover-strong: rgba(255, 255, 255, 0.10);

    --sehri-chat-user-bg: #131313;

    /* Ultra-Tucked Elevation Tokens (Dark Mode) */
    --sehri-shadow-card: 0 1px 4px -2px rgba(0, 0, 0, 0.6);
    --sehri-shadow-card-hover: 0 2px 6px -2px rgba(0, 0, 0, 0.7);

    --sehri-shadow-chat-form: 0 2px 5px -2px rgba(0, 0, 0, 0.7);
    --sehri-shadow-chat-form-focus: 0 3px 6px -2px rgba(0, 0, 0, 0.8);

    --sehri-shadow-dropdown: 0 2px 6px -2px rgba(0, 0, 0, 0.7);
    --sehri-shadow-modal: 0 4px 10px -3px rgba(0, 0, 0, 0.8);
}

/* -------------------------------------------------------------- */
/* 02. GLOBAL STYLES & FONTS                                      */
/* -------------------------------------------------------------- */
:root {
    --font-body: 'Outfit', 'Tajawal', sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
    --tblr-border-color: var(--sehri-border);
    --tblr-body-bg: var(--sehri-bg-primary);
}

html[lang="ar"] {
    --font-body: 'Tajawal', 'Outfit', sans-serif !important;
    --font-heading: 'Tajawal', 'Plus Jakarta Sans', sans-serif !important;
}

/* -------------------------------------------------------------- */
/* 03. GENERAL COMPONENTS & CARDS                                 */
/* -------------------------------------------------------------- */
.card {
    background: var(--sehri-bg-primary) !important;
    box-shadow: var(--sehri-shadow-card) !important;
    border-radius: 16px !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sehri-shadow-card-hover) !important;
}

/* -------------------------------------------------------------- */
/* 04. SIDEBAR LAYOUT                                             */
/* -------------------------------------------------------------- */
.lqd-sehri-sidebar {
    background: var(--sehri-bg-primary) !important;
    border-color: var(--sehri-border) !important;
    padding-inline: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: var(--sehri-sidebar-width);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
    border-start-end-radius: 20px !important;
    border-end-end-radius: 20px !important;
    overflow: hidden !important;
}

.lqd-sehri-sidebar.no-transition,
.lqd-sehri-sidebar.no-transition * {
    transition: none !important;
}

.lqd-sehri-sidebar * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.lqd-sehri-sidebar *:hover {
    scrollbar-color: var(--sehri-border-strong) transparent;
}

.lqd-sehri-sidebar *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.lqd-sehri-sidebar *::-webkit-scrollbar-track {
    background-color: transparent;
}

.lqd-sehri-sidebar *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
}

.lqd-sehri-sidebar *:hover::-webkit-scrollbar-thumb {
    background-color: var(--sehri-border);
}

.lqd-sehri-sidebar *::-webkit-scrollbar-thumb:hover {
    background-color: var(--sehri-border-strong);
}

.lqd-sehri-sidebar *::-webkit-scrollbar-thumb:active {
    background-color: var(--sehri-text-muted) !important;
}

/* -------------------------------------------------------------- */
/* 05. SIDEBAR: HEADER & LOGOS                                    */
/* -------------------------------------------------------------- */
.lqd-sehri-sidebar .logo-expanded,
.lqd-sehri-sidebar .logo-collapsed {
    display: none !important;
}

/* Expanded Logic */
.lqd-sehri-sidebar:not(.sidebar-collapsed) .logo-expanded.logo-light {
    display: block !important;
    max-width: 130px !important;
}

.theme-dark .lqd-sehri-sidebar:not(.sidebar-collapsed) .logo-expanded.logo-dark {
    display: block !important;
    max-width: 130px !important;
}

.theme-dark .lqd-sehri-sidebar:not(.sidebar-collapsed) .logo-expanded.logo-light {
    display: none !important;
}

.lqd-sehri-sidebar .sidebar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    margin-bottom: 24px !important;
    flex-shrink: 0 !important;
}

.lqd-sehri-sidebar .collapse-btn {
    color: var(--sehri-text-primary) !important;
    background: transparent !important;
    transition: color 0.2s ease !important;
}

.lqd-sehri-sidebar .collapse-btn:hover {
    color: var(--sehri-text-primary) !important;
    opacity: 0.8 !important;
}

.lqd-sehri-sidebar .collapse-btn svg {
    transition: none !important;
}

.lqd-sehri-sidebar .collapse-btn:hover svg {
    transform: none !important;
}

/* -------------------------------------------------------------- */
/* 06. SIDEBAR: RECENTS & CHAT ITEMS                              */
/* -------------------------------------------------------------- */
.lqd-sehri-sidebar .sidebar-body {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    padding: 0 12px !important;
}

.lqd-sehri-sidebar .new-chat-btn {
    background: transparent !important;
    color: var(--sehri-text-primary) !important;
    margin-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    width: 100% !important;
    font-weight: 500 !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
}

.lqd-sehri-sidebar .new-chat-btn:hover {
    background: var(--sehri-bg-hover) !important;
}

.lqd-sehri-sidebar .new-chat-btn svg {
    color: var(--sehri-text-primary) !important;
    flex-shrink: 0;
    margin-inline-end: 8px !important;
}

.lqd-sehri-sidebar .new-chat-btn .lqd-sehri-sidebar-label {
    font-size: 13.5px !important;
}

.lqd-sehri-sidebar .recents-section {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    border-top: 1px solid var(--sehri-border) !important;
    overflow: hidden !important;
}

.lqd-sehri-sidebar .recents-section .lqd-sehri-sidebar-label {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--sehri-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    flex-shrink: 0 !important;
}

.lqd-sehri-sidebar .recents-list {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.lqd-sehri-sidebar .recents-list .chats-new {
    display: none !important;
}

/* Chat Search Box */
.lqd-sehri-sidebar .recents-list .chats-search {
    margin-top: 1px !important;
    margin-bottom: 5px !important;
    height: auto !important;
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.lqd-sehri-sidebar .recents-list .chats-search .chats-search-form {
    background: var(--sehri-bg-hover) !important;
    border-radius: 12px !important;
    border: none !important;
    position: relative !important;
    width: 100% !important;
}

.lqd-sehri-sidebar .recents-list .chats-search .chats-search-form .navbar-search-input {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    padding-inline-start: 36px !important;
    height: 40px !important;
    border-radius: 12px !important;
}

.lqd-sehri-sidebar .recents-list .chats-search .chats-search-form .navbar-search-input:focus,
.lqd-dropdown-dropdown-search:focus {
    outline: none !important;
    box-shadow: 0 0 0 1px var(--sehri-border-strong) !important;
}

.lqd-sehri-sidebar .recents-list .chats-search .chats-search-form .navbar-search-input::placeholder {
    color: var(--sehri-text-muted) !important;
}

.lqd-sehri-sidebar .recents-list .chats-search .chats-search-form svg {
    color: var(--sehri-text-primary) !important;
    opacity: 0.5;
    width: 14px !important;
    height: 14px !important;
    position: absolute !important;
    inset-inline-start: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Clear all button & Add Folder button */
.lqd-sehri-sidebar .recents-list .chats-search .lqd-chat-clear-all,
.lqd-sehri-sidebar .recents-list .chats-search .lqd-chat-add-folder {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: var(--sehri-bg-hover) !important;
    color: var(--sehri-text-primary) !important;
}

.lqd-sehri-sidebar .recents-list .chats-search .lqd-chat-clear-all:hover,
.lqd-sehri-sidebar .recents-list .chats-search .lqd-chat-add-folder:hover {
    background: var(--sehri-bg-hover-strong) !important;
}

.lqd-sehri-sidebar .recents-list .chats-search .lqd-chat-clear-all svg,
.lqd-sehri-sidebar .recents-list .chats-search .lqd-chat-add-folder svg {
    width: 16px !important;
    height: 16px !important;
}

/* Chat Items & Folders Unified */
.lqd-sehri-sidebar .recents-list .chats-list-container,
.lqd-sehri-sidebar .recents-list #chats-list-container {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.lqd-sehri-sidebar .recents-list .chats-list-container .card-body,
.lqd-sehri-sidebar .recents-list #chats-list-container .card-body {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item,
.lqd-sehri-sidebar .recents-list .chat-folder-item,
.lqd-sehri-sidebar .recents-list .chat-add-folder-item {
    border: none !important;
    background: transparent !important;
    margin-bottom: 2px !important;
    border-radius: 12px !important;
    position: relative !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item-trigger,
.lqd-sehri-sidebar .recents-list .chat-add-folder-modal-trigger {
    padding: 6px 8px !important;
    border-radius: 12px !important;
    color: var(--sehri-text-primary) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: background 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}

.lqd-sehri-sidebar .recents-list .chat-add-folder-modal-trigger {
    padding: 6px 14px !important;
    width: auto !important;
    font-weight: 500 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item:hover .chat-list-item-trigger,
.lqd-sehri-sidebar .recents-list .chat-folder-item:hover .chat-list-item-trigger,
.lqd-sehri-sidebar .recents-list .chat-add-folder-modal-trigger:hover {
    background: var(--sehri-bg-hover) !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item.active {
    background: var(--sehri-bg-hover) !important;
    font-weight: 500 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item.active::before {
    display: none !important;
}

.lqd-sehri-sidebar .recents-list .chat-folder-item .chat-list-item-trigger svg,
.lqd-sehri-sidebar .recents-list .chat-add-folder-modal-trigger svg {
    color: var(--sehri-text-primary) !important;
    width: 16px !important;
    height: 16px !important;
    margin-inline-end: 6px !important;
}

/* Chat Item specific elements */
.lqd-sehri-sidebar .recents-list .chat-list-item-trigger .chat-item-date {
    display: none !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item-trigger .lqd-chat-item-trigger-icons {
    display: none !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item.pin-mode .chat-list-item-trigger .lqd-chat-item-trigger-icons {
    display: flex !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item.pin-mode .chat-list-item-trigger .lqd-chat-item-trigger-icons svg {
    width: 16px !important;
    height: 16px !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item-trigger .lqd-chat-item-trigger-info {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item-trigger .chat-item-title {
    font-size: 13px !important;
    font-weight: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 180px !important;
}

/* Dropdown Context Menu Trigger on Chat Item */
.lqd-sehri-sidebar .recents-list .chat-list-item .order-last.ms-auto {
    position: absolute !important;
    inset-inline-end: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    opacity: 0;
    transition: opacity 0.15s ease !important;
    z-index: 10 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item:hover .order-last.ms-auto,
.lqd-sehri-sidebar .recents-list .chat-list-item .order-last.ms-auto.lqd-is-active {
    opacity: 1 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item .order-last.ms-auto.lqd-is-active .chat-dropdown-trigger {
    opacity: 1 !important;
}

.lqd-sehri-sidebar .recents-list .chat-list-item .order-last.ms-auto.lqd-is-active .chat-dropdown-trigger svg {
    opacity: 1 !important;
}

.sehri-chat-dropdown {
    background-color: var(--sehri-bg-primary) !important;
}

/* List scroll wrappers */
.lqd-sehri-sidebar .recents-list .chats-list,
.lqd-sehri-sidebar .recents-list #chat_sidebar_container,
.lqd-sehri-sidebar .recents-list .chat-list-wrapper {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

.lqd-sehri-sidebar .recents-list ul.chat-list-ul {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    scrollbar-width: thin !important;
    padding: 0 8px !important;
}

/* -------------------------------------------------------------- */
/* 07. SIDEBAR: FOOTER & USER PROFILE                             */
/* -------------------------------------------------------------- */
.lqd-sehri-sidebar .sidebar-footer {
    margin-top: auto !important;
    border-top: 1px solid var(--sehri-border) !important;
    flex-shrink: 0 !important;
}

.lqd-sehri-sidebar .user-profile {
    color: var(--sehri-text-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin: 0 8px 8px 8px !important;
    transition: background 0.2s ease !important;
}

.lqd-sehri-sidebar .user-profile:hover {
    background: var(--sehri-bg-hover) !important;
}

.lqd-sehri-sidebar .user-profile .profile-text .lqd-sehri-sidebar-label:first-child {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--sehri-text-primary) !important;
}

.lqd-sehri-sidebar .user-profile .profile-text .lqd-sehri-sidebar-label:last-child {
    font-size: 10px !important;
    color: var(--sehri-text-secondary) !important;
}

.lqd-sehri-sidebar .user-profile .settings-btn {
    color: var(--sehri-text-primary) !important;
    opacity: 0.7;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.lqd-sehri-sidebar .user-profile .settings-btn:hover {
    opacity: 1;
    background: var(--sehri-bg-hover-strong) !important;
}

/* -------------------------------------------------------------- */
/* 08. COLLAPSED SIDEBAR LOGIC                                    */
/* -------------------------------------------------------------- */
.lqd-sehri-sidebar.sidebar-collapsed {
    width: var(--sehri-sidebar-collapsed-width) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .logo-text,
.lqd-sehri-sidebar.sidebar-collapsed .logo-expanded,
.lqd-sehri-sidebar.sidebar-collapsed .lqd-sehri-sidebar-label,
.lqd-sehri-sidebar.sidebar-collapsed .settings-btn,
.lqd-sehri-sidebar.sidebar-collapsed .recents-section {
    display: none !important;
}

/* Collapsed Logo */
.lqd-sehri-sidebar.sidebar-collapsed .logo-collapsed.logo-light {
    display: block !important;
}

.theme-dark .lqd-sehri-sidebar.sidebar-collapsed .logo-collapsed.logo-dark {
    display: block !important;
}

.theme-dark .lqd-sehri-sidebar.sidebar-collapsed .logo-collapsed.logo-light {
    display: none !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .sidebar-header {
    justify-content: center !important;
    padding-inline: 0 !important;
    position: relative !important;
    height: 32px !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .sidebar-header .collapse-btn {
    display: none !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .sidebar-header .logo-area {
    display: block !important;
    margin: 0 auto !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .sidebar-header:hover .logo-area {
    display: none !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .sidebar-header:hover .collapse-btn {
    display: inline-flex !important;
    margin: 0 auto !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .new-chat-btn {
    justify-content: center !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .new-chat-btn svg {
    margin-inline-end: 0 !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .user-profile {
    justify-content: center !important;
    padding: 6px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .user-profile img {
    margin: 0 auto !important;
}

.lqd-sehri-sidebar.sidebar-collapsed .sidebar-body,
.lqd-sehri-sidebar.sidebar-collapsed .sidebar-footer {
    padding-inline: 0 !important;
}

/* -------------------------------------------------------------- */
/* 09. HEADER DYNAMIC SIZING                                      */
/* -------------------------------------------------------------- */
.lqd-chat-pro-header {
    background: transparent !important;
    border-bottom: none !important;
    z-index: 60 !important;
}

@media (min-width: 1024px) {
    .lqd-chat-pro-header {
        transition: inset-inline-start 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #lqd-sehri-sidebar-el.sidebar-expanded~.grow .lqd-chat-pro-header {
        inset-inline-start: var(--sehri-sidebar-width) !important;
        width: calc(100% - var(--sehri-sidebar-width)) !important;
    }

    #lqd-sehri-sidebar-el.sidebar-collapsed~.grow .lqd-chat-pro-header {
        inset-inline-start: var(--sehri-sidebar-collapsed-width) !important;
        width: calc(100% - var(--sehri-sidebar-collapsed-width)) !important;
    }
}

/* -------------------------------------------------------------- */
/* 10. CHAT CONTAINER & UI REPLICA                                */
/* -------------------------------------------------------------- */
.lqd-chat-v2-container {
    background: radial-gradient(circle at 50% 85%, rgba(186, 215, 255, 0.45) 0%, #f0f4f9 70%) !important;
}

.theme-dark .lqd-chat-v2-container {
    background: radial-gradient(circle at 50% 85%, rgba(67, 56, 202, 0.22) 0%, #07080a 70%) !important;
}

/* Transparent overlays */
.lqd-chat-v2-container .conversation-area-wrap,
.lqd-chat-v2-container .card,
.lqd-chat-v2-container .card-body,
.lqd-chat-v2-container .chats-wrap,
.lqd-chat-v2-container .conversation-area,
.lqd-chat-v2-container #load_chat_area_container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Sidebar matches (If separate from main sidebar) */
.chats-sidebar-wrap,
.lqd-chat-v2-sidebar {
    background: var(--sehri-bg-primary) !important;
    border-inline-end: 1px solid var(--sehri-border) !important;
}

.lqd-sehri-welcome {
    font-size: 2.75rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 2.5rem !important;
    color: var(--sehri-text-primary) !important;
    text-align: center !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-family: inherit !important;
}

.lqd-sehri-gradient-text {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    background-image: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #db2777 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
}

.dark .lqd-sehri-gradient-text,
[data-theme="dark"] .lqd-sehri-gradient-text,
html.dark .lqd-sehri-gradient-text,
body.dark .lqd-sehri-gradient-text {
    background-image: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #f472b6 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* -------------------------------------------------------------- */
/* GEMINI-STYLE CENTERED CHAT FORM BOX IN INITIAL STATE           */
/* -------------------------------------------------------------- */
.lqd-chat-form {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
}

@media (min-width: 1024px) {

    .conversation-not-started .lqd-chat-form,
    .group\/chats-wrap.conversation-not-started .lqd-chat-form,
    [class*="conversation-not-started"] .lqd-chat-form {
        transform: translateY(-40vh) !important;
    }

    @media (max-height: 750px) {

        .conversation-not-started .lqd-chat-form,
        .group\/chats-wrap.conversation-not-started .lqd-chat-form,
        [class*="conversation-not-started"] .lqd-chat-form {
            transform: translateY(-32vh) !important;
        }
    }
}

/* Center welcome text on mobile/tablet since the chat form stays at the bottom */
@media (max-width: 1023px) {

    .conversation-not-started .sehri-welcome-container,
    .group\/chats-wrap.conversation-not-started .sehri-welcome-container,
    [class*="conversation-not-started"] .sehri-welcome-container {
        transform: translateY(-30vh) !important;
    }

    @media (max-height: 750px) {

        .conversation-not-started .sehri-welcome-container,
        .group\/chats-wrap.conversation-not-started .sehri-welcome-container,
        [class*="conversation-not-started"] .sehri-welcome-container {
            transform: translateY(-25vh) !important;
        }
    }
}

/* Hide disclaimer text when no conversation started */
.conversation-not-started .lqd-chat-form-wrap>div:last-of-type>p:first-child,
.group\/chats-wrap.conversation-not-started .lqd-chat-form-wrap>div:last-of-type>p:first-child,
[class*="conversation-not-started"] .lqd-chat-form-wrap>div:last-of-type>p:first-child {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

/* -------------------------------------------------------------- */
/* SAFE DYNAMIC VIEWPORT HEIGHT (100DVH) FOR MOBILE SCROLLING BUG */
/* -------------------------------------------------------------- */
@media (min-width: 1024px) {
    #user_chat_area {
        height: calc(100dvh - var(--ad-h, 0px)) !important;
    }

    .lqd-sehri-sidebar {
        height: 100dvh !important;
    }
}



/* -------------------------------------------------------------- */
/* 11. CHAT BUBBLES                                               */
/* -------------------------------------------------------------- */
.lqd-chat-v2 .lqd-chat-ai-bubble {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-inline: 0 !important;
}

.lqd-chat-v2 .chats-container {
    padding: 1rem !important;
}

.lqd-chat-v2 .lqd-chat-ai-bubble .lqd-chat-avatar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.lqd-chat-v2 .lqd-chat-ai-bubble,
.lqd-chat-v2 .lqd-chat-user-bubble,
.lqd-chat-v2 .lqd-chat-image-bubble {
    margin-bottom: 0 !important;
}

.lqd-chat-action-btn,
.lqd-clipboard-copy,
.lqd-chat-bubble-canvas-trigger {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.lqd-chat-v2 .lqd-chat-user-bubble {
    border-radius: 1rem !important;
    padding: 1rem !important;
    background: var(--sehri-chat-user-bg) !important;
    color: var(--sehri-text-primary) !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0rem !important;
}

/* -------------------------------------------------------------- */
/* 12. CHAT FORM INPUT & TOOLBAR                                  */
/* -------------------------------------------------------------- */
@media (min-width: 1024px) {
    .sehri-chat-form {
        max-width: 700px !important;
        margin-inline: auto !important;
    }
}

.lqd-chat-form-wrap {
    border-top: none !important;
    background: transparent !important;
}

.lqd-chat-form-wrap::before {
    display: none !important;
}

.lqd-chat-form-inputs-container {
    border-radius: 16px !important;
    background: var(--sehri-bg-primary) !important;
    border: none !important;
    padding: 5px !important;
    box-shadow: var(--sehri-shadow-chat-form) !important;
    transition: box-shadow 0.25s ease !important;
}

@media (min-width: 1024px) {
    .lqd-chat-form-inputs-container {
        max-width: 700px !important;
        margin: 0 auto !important;
    }
}

.lqd-chat-form-inputs-container:focus-within {
    background: var(--sehri-bg-primary) !important;
    box-shadow: var(--sehri-shadow-chat-form-focus) !important;
}

#prompt,
#prompt:focus {
    font-size: 15px !important;
    color: var(--sehri-text-primary) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    scrollbar-width: none !important;
    /* Firefox */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.lqd-chat-form-inputs-container .form-control,
.lqd-chat-form-inputs-container .form-control:focus,
.lqd-chat-form-inputs-container .input-form,
.lqd-chat-form-inputs-container .input-form:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

#prompt::-webkit-scrollbar {
    display: none !important;
    /* Chrome, Safari */
}

#prompt::placeholder {
    color: var(--sehri-text-secondary) !important;
}

.lqd-chat-form-inputs-container .pointer-events-none.absolute {
    align-items: center !important;
    bottom: 50% !important;
    transform: translateY(50%) !important;
    padding-inline-end: 8px !important;
}

/* Record Buttons Hard Overrides */
#voice_record_button.lqd-chat-record-trigger,
#voice_record_stop_button.lqd-chat-record-stop-trigger {
    background-color: hsl(var(--foreground) / 0.05) !important;
    transform: none !important;
}

#voice_record_button.lqd-chat-record-trigger:hover,
#voice_record_stop_button.lqd-chat-record-stop-trigger:hover {
    background-color: hsl(var(--foreground) / 0.1) !important;
}

/* -------------------------------------------------------------- */
/* 13. DROPDOWNS & MODALS                                         */
/* -------------------------------------------------------------- */
/* Global Dropdown & Modal Styles */
.dropdown-menu,
.lqd-sidebar-settings-dropdown,
.lqd-sidebar-settings-dropdown .absolute,
.lqd-chat-options-dropdown,
.lqd-chat-header-dropdown {
    background: var(--sehri-bg-dropdown) !important;
    border: 1px solid var(--sehri-border) !important;
    box-shadow: var(--sehri-shadow-dropdown) !important;
}

.modal-content,
.lqd-modal-content {
    background: var(--sehri-bg-dropdown) !important;
    border: 1px solid var(--sehri-border) !important;
    box-shadow: var(--sehri-shadow-modal) !important;
}

/* Global Dropdown Items */
.dropdown-menu .dropdown-item {
    color: var(--sehri-text-primary) !important;
    border-radius: 16px !important;
    margin: 2px 8px !important;
    width: auto !important;
    transition: background 0.15s ease !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--sehri-bg-hover) !important;
    color: var(--sehri-text-primary) !important;
}

/* Modal specific */
.modal-header,
.modal-footer {
    border-color: var(--sehri-border) !important;
}

.lqd-sidebar-settings-dropdown {
    position: fixed !important;
    bottom: 16px !important;
    z-index: 999999 !important;
    inset-inline-start: calc(var(--sehri-sidebar-width) + 8px) !important;
    inset-inline-end: auto !important;
}

.lqd-sidebar-settings-dropdown.is-collapsed {
    inset-inline-start: calc(var(--sehri-sidebar-collapsed-width) + 8px) !important;
}

@media (max-width: 991px) {
    .lqd-sidebar-settings-dropdown {
        inset-inline-start: 16px !important;
        inset-inline-end: 16px !important;
        width: auto !important;
        bottom: 80px !important;
    }
}

/* Chat Item Context Menu */
.sehri-chat-dropdown {
    border-radius: 16px !important;
    border: 1px solid var(--sehri-border-strong) !important;
    background: var(--sehri-bg-dropdown) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    padding: 8px !important;
    min-width: 180px !important;
    max-height: none !important;
}

.theme-dark .sehri-chat-dropdown {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.sehri-chat-dropdown hr {
    border-color: var(--sehri-border-strong) !important;
    margin: 4px 0 !important;
}

.sehri-chat-dropdown .lqd-btn {
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    color: var(--sehri-text-primary) !important;
    transition: background 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    text-align: start !important;
    background: transparent !important;
}

.sehri-chat-dropdown .lqd-btn:hover {
    background: var(--sehri-bg-hover) !important;
    transform: none !important;
}

.sehri-chat-dropdown .lqd-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: var(--sehri-text-secondary) !important;
}

.sehri-chat-dropdown .lqd-btn svg.text-red-500 {
    color: #e53e3e !important;
}

/* Model Select Badge */
.lqd-sehri-model-select {
    margin-inline-end: 0 !important;
}

.lqd-sehri-model-select .lqd-modal>.lqd-btn {
    background-color: hsl(var(--foreground) / 0.05) !important;
    color: hsl(var(--heading-foreground) / 0.5) !important;
    border-radius: 0.75rem !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    padding-inline-start: 16px !important;
    padding-inline-end: 16px !important;
    border: none !important;
    box-shadow: none !important;
}

.lqd-sehri-model-select .lqd-modal>.lqd-btn svg {
    color: currentColor !important;
    margin-inline-start: 4px !important;
}

.lqd-sehri-model-select .lqd-modal>.lqd-btn:hover {
    background-color: hsl(var(--foreground) / 0.1) !important;
    color: hsl(var(--heading-foreground) / 1) !important;
}

/* -------------------------------------------------------------- */
/* 14. HELPERS & UTILITIES                                        */
/* -------------------------------------------------------------- */
.lqd-sehri-sidebar-label {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: inherit !important;
}

/* RTL slide animation override */
[dir="rtl"] .rtl-slide-out-full {
    transform: translateX(100%) !important;
}

.lqd-sehri-disclaimer {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--sehri-text-secondary) !important;
    margin-top: 4px !important;
}

.lqd-sehri-disclaimer a {
    color: var(--sehri-text-secondary) !important;
    text-decoration: underline !important;
}

.lqd-sehri-disclaimer a:hover {
    color: var(--sehri-text-primary) !important;
}

/* -------------------------------------------------------------- */
/* 15. CHAT FORM LAYOUT & FULLSCREEN                              */
/* -------------------------------------------------------------- */
.lqd-chat-form-inputs-container.is-fullscreen {
    height: 30vh !important;
}

.lqd-chat-form-inputs-container.is-fullscreen .lqd-chat-middle-input-container>div {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.lqd-chat-form-inputs-container.is-fullscreen .lqd-input-container {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.lqd-chat-form-inputs-container.is-fullscreen #prompt {
    flex-grow: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
}

.lqd-chat-form-inputs-container.is-fullscreen .form-group {
    height: 100% !important;
}

.lqd-chat-proxy-grid {
    grid-template-columns: auto 1fr auto !important;
    gap: 0.5rem !important;
}

.lqd-chat-main-grid {
    grid-template-columns: auto 1fr auto !important;
    gap: 0.5rem !important;
}

.lqd-chat-form-inputs-container.is-expanded .lqd-chat-main-grid {
    grid-template-columns: 1fr 1fr !important;
}

/* -------------------------------------------------------------- */
/* 16. CHAT HEADER FADE                                           */
/* -------------------------------------------------------------- */
.lqd-chat-pro-header {
    background: transparent !important;
    transition: background 0.3s ease;
}

.lqd-chat-v2-container:has(.conversation-started) .lqd-chat-pro-header {
    background: linear-gradient(to bottom, var(--sehri-bg-gradient) 10%, transparent 100%) !important;
}

/* -------------------------------------------------------------- */
/* 17. CHAT FORM WRAPPER FADE (HIDE SCROLLING TEXT)               */
/* -------------------------------------------------------------- */
.lqd-chat-form-wrap {
    background: transparent !important;
    transition: background 0.3s ease;
}

.conversation-started .lqd-chat-form-wrap,
.group\/chats-wrap.conversation-started .lqd-chat-form-wrap {
    background: linear-gradient(to top, var(--sehri-bg-gradient) 40%, transparent 100%) !important;
}

.lqd-chat-form-wrap::before {
    background: transparent !important;
}

/* -------------------------------------------------------------- */
/* 18. MOBILE FULLSCREEN OVERRIDES                                */
/* -------------------------------------------------------------- */
.lqd-chat-form-inputs-container.is-fullscreen .lqd-chat-main-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr auto !important;
    height: 100% !important;
}

.lqd-chat-left-btn-container {
    order: 1 !important;
    grid-column: span 1 !important;
}

.lqd-chat-form-inputs-container.is-expanded .lqd-chat-left-btn-container,
.lqd-chat-form-inputs-container.is-fullscreen .lqd-chat-left-btn-container {
    order: 2 !important;
    grid-column: span 1 !important;
    justify-self: start !important;
}

.lqd-chat-middle-input-container {
    order: 2 !important;
    grid-column: span 1 !important;
    min-width: 0 !important;
}

.lqd-chat-form-inputs-container.is-expanded .lqd-chat-middle-input-container,
.lqd-chat-form-inputs-container.is-fullscreen .lqd-chat-middle-input-container {
    order: 1 !important;
    grid-column: span 2 !important;
    height: 100% !important;
    min-width: 0 !important;
}

.lqd-chat-right-btn-container {
    order: 3 !important;
    grid-column: span 1 !important;
}

.lqd-chat-form-inputs-container.is-expanded .lqd-chat-right-btn-container,
.lqd-chat-form-inputs-container.is-fullscreen .lqd-chat-right-btn-container {
    order: 3 !important;
    grid-column: span 1 !important;
    justify-self: end !important;
}

/* Modals Global Styling */
.lqd-modal-content {
    border-radius: 30px !important;
    background-color: var(--sehri-bg-primary) !important;
    overflow: hidden !important;
}

/* Custom Premium Scrollbar */
::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.25) !important;
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.4) !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.25) transparent;
}

/* Welcome Screen & Chat Form Pop-Out Animation */
@keyframes pop-out-smooth {
    0% {
        opacity: 0;
        transform: scale(0.85);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Animate Welcome Screen */
.welcome-animated {
    animation: pop-out-smooth 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.welcome-glow {
    position: relative;
}

.welcome-glow::before {
    content: '';
    position: absolute;
    inset: -30px;
    background: radial-gradient(circle, var(--sehri-primary) 0%, transparent 70%);
    opacity: 0.12;
    z-index: -1;
    filter: blur(25px);
    animation: pop-out-smooth 1s ease-out forwards;
}

/* Animate Chat Form Box when conversation not started */
.conversation-not-started .lqd-chat-form-inputs-container {
    animation: pop-out-smooth 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
    opacity: 0;
}

/* -------------------------------------------------------------- */
/* 14. RTL HEADER DROPDOWN POSITIONING (NON-TELEPORTED FIX)       */
/* -------------------------------------------------------------- */

html[dir=rtl] .lqd-chat-v2 .lqd-dropdown-dropdown {
    --tw-translate-x: 0%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

/* -------------------------------------------------------------- */
/* 15. REALTIME CHAT COMPACT BUTTON FIX                           */
/* -------------------------------------------------------------- */

/* Chat Options Dropdown Clean Styling */
.lqd-chat-options-dropdown .lqd-chat-options-item,
.lqd-chat-options-dropdown button,
.lqd-chat-options-dropdown label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.625rem !important;
    /* gap-2.5 */
    padding: 0.375rem 0.5rem !important;
    /* py-1.5 px-2 */
    border-radius: 0.375rem !important;
    /* rounded-md */
    font-size: 0.8125rem !important;
    /* text-2xs (13px) */
    font-weight: 500 !important;
    /* font-medium */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.lqd-chat-options-dropdown button:hover,
.lqd-chat-options-dropdown label:hover,
.lqd-chat-options-dropdown .lqd-chat-options-item:hover {
    background-color: hsl(var(--foreground) / 0.05) !important;
}

.lqd-chat-options-dropdown button.active,
.lqd-chat-options-dropdown label.active,
.lqd-chat-options-dropdown label:has(input:checked) {
    color: hsl(var(--primary)) !important;
    background-color: hsl(var(--primary) / 0.05) !important;
}

.lqd-chat-form-inputs-container .lqd-realtime-chat-button[data-compact="true"] {
    background-color: hsl(var(--foreground) / 0.05) !important;
    border: none !important;
    box-shadow: none !important;
    color: hsl(var(--heading-foreground) / 0.5) !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
}

.lqd-chat-form-inputs-container .lqd-realtime-chat-button[data-compact="true"]:hover {
    background-color: hsl(var(--foreground) / 0.1) !important;
    color: hsl(var(--heading-foreground) / 1) !important;
    border: none !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------------- */
/* 16. CANVAS & CHAT AREA PREMIUM ENHANCEMENTS                    */
/* -------------------------------------------------------------- */

/* 16.1 Fluid Layout & Divider */
.sehri-canvas-divider {
    background-color: var(--sehri-border) !important;
    transition: background-color 0.3s ease !important;
}

.sehri-canvas-divider:hover {
    background-color: var(--tblr-primary) !important;
    cursor: col-resize !important;
}

.sehri-divider-grip {
    background-color: var(--sehri-border-strong) !important;
    box-shadow: 0 0 0 0 rgba(var(--tblr-primary-rgb), 0) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.sehri-canvas-divider:hover .sehri-divider-grip {
    background-color: var(--tblr-primary) !important;
    box-shadow: 0 0 10px 2px rgba(var(--tblr-primary-rgb), 0.3) !important;
}

/* 16.2 Canvas Header & Floating Toolbar */
.conversation-area {
    position: relative !important;
    z-index: 0 !important;
}

.sehri-canvas-header {
    position: relative !important;
    z-index: auto !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}

.sehri-canvas-header::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid var(--sehri-border) !important;
    border-radius: inherit !important;
    box-shadow: var(--sehri-shadow-card) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    pointer-events: none !important;
}

.theme-dark .sehri-canvas-header::before {
    background: rgba(19, 19, 19, 0.6) !important;
}

.sehri-canvas-header:hover::before {
    box-shadow: var(--sehri-shadow-card-hover) !important;
}

.sehri-toolbar-btn {
    border-radius: 12px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sehri-toolbar-btn:hover {
    background-color: var(--sehri-bg-hover-strong) !important;
}

/* 16.3 AI Magic Actions Menu & Submenus */
.sehri-magic-wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    right: -10px !important;
    left: -10px !important;
    height: 30px !important;
    background: transparent !important;
    z-index: 10 !important;
}

.sehri-magic-menu,
.sehri-magic-submenu {
    padding: 8px !important;
    background: var(--sehri-bg-primary) !important;
    border: 1px solid var(--sehri-border-strong) !important;
    border-radius: 16px !important;
    box-shadow: var(--sehri-shadow-modal) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

.sehri-magic-menu {
    z-index: 9999 !important;
    width: 220px !important;
    margin-top: 10px !important;
}

.sehri-magic-submenu {
    width: fit-content !important;
}

.sehri-magic-menu button,
.sehri-magic-submenu button {
    padding: 8px 12px !important;
    color: var(--sehri-text-primary) !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.sehri-magic-submenu button {
    white-space: nowrap !important;
    transform: none !important;
}

.sehri-magic-submenu button:hover {
    background-color: var(--sehri-bg-hover-strong) !important;
}

.sehri-magic-submenu button:hover {
    transform: none !important;
}

.sehri-magic-menu button svg {
    transition: transform 0.2s ease !important;
}

.sehri-magic-menu button:hover svg {
    filter: drop-shadow(0 0 4px rgba(var(--tblr-primary-rgb), 0.4)) !important;
    transform: scale(1.1) !important;
}

/* 16.5 AI Prompt Navigator */
.sehri-prompt-nav-bg {
    background: var(--sehri-bg-primary) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* 16.4 Empty States & Suggestions */
.sehri-dropzone {
    background: linear-gradient(135deg, var(--sehri-bg-primary) 0%, var(--sehri-bg-secondary) 100%) !important;
    border: 2px dashed var(--sehri-border-strong) !important;
    transition: all 0.3s ease !important;
}

.sehri-dropzone:hover {
    background: rgba(var(--tblr-primary-rgb), 0.05) !important;
    border-color: var(--tblr-primary) !important;
    box-shadow: var(--sehri-shadow-card) !important;
    transform: translateY(-2px) !important;
}

.sehri-prompt-pill {
    background: var(--sehri-bg-primary) !important;
    color: var(--sehri-text-secondary) !important;
    border: 1px solid var(--sehri-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--sehri-shadow-card) !important;
    transition: all 0.2s ease !important;
}

.sehri-prompt-pill:hover {
    background: var(--sehri-bg-hover-strong) !important;
    color: var(--tblr-primary) !important;
    border-color: var(--tblr-primary) !important;
    box-shadow: var(--sehri-shadow-card-hover) !important;
    transform: translateY(-2px) !important;
}


/* 19. Radical Fix for Tiptap Menus */
body [data-tippy-root],
body .tippy-box,
.tiptap-bubble-menu,
.tiptap-floating-menu {
    z-index: 2147483647 !important;
}

/* -------------------------------------------------------------- */
/* 20. MOBILE SIDEBAR DRAWER                                      */
/* -------------------------------------------------------------- */

@media (max-width: 991px) {

    /* ── Sidebar: Fixed full-height Drawer ── */
    .lqd-sehri-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        inset-inline-start: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100% !important;
        z-index: 9999 !important;
        /* LTR: slide out to the left */
        transform: translateX(-110%) !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.35s ease !important;
        background: var(--sehri-bg-primary) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 0 20px 20px 0 !important;
        border-inline-end: 1px solid var(--sehri-border) !important;
        padding-block: 0.75rem !important;
    }

    /* ── CRITICAL FIX: Override framework's absolute-overlay behavior ──
       The base framework uses max-md:absolute + max-md:top-0 + max-md:z-50
       on .chats-list-container so it slides over the chat area on mobile.
       Inside our Drawer sidebar, it must be a normal flex child instead. */
    .lqd-sehri-sidebar .chats-list-container {
        position: relative !important;
        top: auto !important;
        inset-inline-start: auto !important;
        height: 100% !important;
        z-index: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* RTL: sidebar is on the right, slide out to the right */
    [dir="rtl"] .lqd-sehri-sidebar {
        transform: translateX(110%) !important;
        border-radius: 20px 0 0 20px !important;
    }

    /* ── Open state (Alpine adds .mobile-drawer-open) ── */
    .lqd-sehri-sidebar.mobile-drawer-open {
        transform: translateX(0) !important;
        box-shadow: 24px 0 48px -8px rgba(0, 0, 0, 0.18),
            8px 0 16px -4px rgba(0, 0, 0, 0.10) !important;
    }

    [dir="rtl"] .lqd-sehri-sidebar.mobile-drawer-open {
        transform: translateX(0) !important;
        box-shadow: -24px 0 48px -8px rgba(0, 0, 0, 0.18),
            -8px 0 16px -4px rgba(0, 0, 0, 0.10) !important;
    }

    .theme-dark .lqd-sehri-sidebar.mobile-drawer-open {
        box-shadow: 24px 0 48px -8px rgba(0, 0, 0, 0.5),
            8px 0 16px -4px rgba(0, 0, 0, 0.3) !important;
    }

    /* ── Mobile Drawer: Show full desktop-like content ──────────── */
    /* Override Tailwind's max-sm:hidden so text labels appear in drawer */

    .lqd-sehri-sidebar.mobile-drawer-open .max-sm\:hidden {
        display: inline !important;
    }

    /* Reset max-sm:size-6 (shrinks category name to 24×24) back to auto */
    .lqd-sehri-sidebar.mobile-drawer-open .lqd-chat-category-name {
        width: auto !important;
        height: auto !important;
        padding: 4px 8px !important;
    }

    /* Show the category role subtitle on mobile drawer */
    .lqd-sehri-sidebar.mobile-drawer-open .lqd-chat-category-role {
        display: block !important;
    }

    /* Ensure sidebar-body and its links behave like expanded desktop */
    .lqd-sehri-sidebar.mobile-drawer-open .sidebar-body a,
    .lqd-sehri-sidebar.mobile-drawer-open .sidebar-body>div>button {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding-inline: 8px !important;
        padding-block: 6px !important;
    }

    /* Show the text label spans in the drawer */
    .lqd-sehri-sidebar.mobile-drawer-open .lqd-sehri-sidebar-label {
        display: block !important;
    }

    /* ── Override sidebar-collapsed on mobile ──
       Always show full content inside the drawer regardless of desktop state */


    .lqd-sehri-sidebar.sidebar-collapsed {
        width: 280px !important;
        max-width: 85vw !important;
        background: var(--sehri-bg-primary) !important;
        border-color: var(--sehri-border) !important;
        box-shadow: none !important;
    }

    /* Re-show logo + labels that collapsed state hides */
    .lqd-sehri-sidebar.sidebar-collapsed .lqd-sehri-sidebar-label {
        display: block !important;
    }

    .lqd-sehri-sidebar.sidebar-collapsed .recents-section {
        display: flex !important;
    }

    /* Expanded logo - light theme */
    .lqd-sehri-sidebar.sidebar-collapsed .logo-expanded.logo-light {
        display: block !important;
        max-width: 130px !important;
    }

    /* Expanded logo - dark theme */
    .theme-dark .lqd-sehri-sidebar.sidebar-collapsed .logo-expanded.logo-dark {
        display: block !important;
        max-width: 130px !important;
    }

    .theme-dark .lqd-sehri-sidebar.sidebar-collapsed .logo-expanded.logo-light {
        display: none !important;
    }

    /* Sidebar header: restore normal layout */
    .lqd-sehri-sidebar.sidebar-collapsed .sidebar-header {
        justify-content: space-between !important;
        padding-inline: 8px !important;
        height: auto !important;
        position: static !important;
    }

    .lqd-sehri-sidebar.sidebar-collapsed .sidebar-header .collapse-btn {
        display: inline-flex !important;
        margin: 0 !important;
    }

    .lqd-sehri-sidebar.sidebar-collapsed .sidebar-header .logo-area {
        display: flex !important;
    }

    .lqd-sehri-sidebar.sidebar-collapsed .sidebar-header:hover .logo-area {
        display: flex !important;
    }

    .lqd-sehri-sidebar.sidebar-collapsed .sidebar-header:hover .collapse-btn {
        display: inline-flex !important;
        margin: 0 !important;
    }

    /* Sidebar body: restore full-width links */
    .lqd-sehri-sidebar.sidebar-collapsed .sidebar-body,
    .lqd-sehri-sidebar.sidebar-collapsed .sidebar-footer {
        padding-inline: 8px !important;
    }

    /* New chat button: full width */
    .lqd-sehri-sidebar.sidebar-collapsed .new-chat-btn {
        justify-content: flex-start !important;
        padding: 10px 18px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        border-radius: 12px !important;
    }

    .lqd-sehri-sidebar.sidebar-collapsed .new-chat-btn svg {
        margin-inline-end: 8px !important;
    }

    /* User profile: full width */
    .lqd-sehri-sidebar.sidebar-collapsed .user-profile {
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 8px 8px 8px !important;
        border-radius: 12px !important;
    }

    .lqd-sehri-sidebar.sidebar-collapsed .user-profile img {
        margin: 0 !important;
    }

    /* Settings btn visible again */
    .lqd-sehri-sidebar.sidebar-collapsed .settings-btn {
        display: inline-flex !important;
    }

    /* ── Hamburger Button ── */
    .sehri-hamburger-btn {
        cursor: pointer !important;
        color: var(--sehri-text-primary) !important;
    }

    .sehri-hamburger-btn:hover {
        background: var(--sehri-bg-hover) !important;
    }

    @media (max-width: 1023px) {

        /* ── Mobile Header: ensure visible height ── */
        .lqd-chat-pro-header {
            min-height: 56px !important;
            height: 56px !important;
            display: flex !important;
            align-items: center !important;
            position: relative !important;
        }

        /* Remove bottom padding from wrapper to eliminate the white gap at the bottom */
        .sehri-chat-wrapper {
            padding-bottom: 0 !important;
        }

        #user_chat_area {
            height: calc(100dvh - 56px - var(--bottom-menu-height, 0px) - var(--ad-h, 0px) - 1.25rem) !important;
        }

        /* Grow area takes full width on mobile */
        .lqd-chat-v2-container>.grow {
            width: 100% !important;
            padding-inline: 0.5rem !important;
        }
    }
}

/* -------------------------------------------------------------- */
/* 21. MOBILE UX FIXES: NO H-SCROLL, SCROLLBAR, FORM SHADOW       */
/* -------------------------------------------------------------- */

@media (max-width: 1023px) {

    /* ── A. PREVENT HORIZONTAL SCROLL/SWIPE ── */

    /* Lock the root containers — no horizontal overflow allowed */
    body.lqd-chat-v2,
    body.lqd-chat-v2 .lqd-chat-v2-container,
    body.lqd-chat-v2 #user_chat_area,
    body.lqd-chat-v2 .chats-wrap,
    body.lqd-chat-v2 .conversation-area-wrap,
    body.lqd-chat-v2 .conversation-area,
    body.lqd-chat-v2 .chats-container {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* Prevent individual chat messages from exceeding viewport width */
    body.lqd-chat-v2 .lqd-chat-bubble,
    body.lqd-chat-v2 .chat-content,
    body.lqd-chat-v2 .chat-content * {
        max-width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Block horizontal touch gestures on the chat area only */
    body.lqd-chat-v2 .conversation-area {
        touch-action: pan-y !important;
    }

    /* ── B. HIDE SCROLLBAR (MOBILE) ── */
    /*
     * On mobile, the browser's native scroll indicator is enough.
     * The scrollbar inside the padded container looks misplaced.
     */
    body.lqd-chat-v2 .conversation-area,
    body.lqd-chat-v2 .chats-container {
        scrollbar-width: none !important;
        /* Firefox */
        -ms-overflow-style: none !important;
        /* IE/Edge */
    }

    body.lqd-chat-v2 .conversation-area::-webkit-scrollbar,
    body.lqd-chat-v2 .chats-container::-webkit-scrollbar {
        display: none !important;
        /* Chrome/Safari/Android */
    }

    body.lqd-chat-v2 .lqd-chat-v2-container>.grow {
        padding-inline: 0 !important;
    }

    body.lqd-chat-v2 .lqd-chat-form-inputs-container {
        margin-inline: 0.5rem !important;
    }

    /* Allow the form shadow to breathe beyond its own box */
    body.lqd-chat-v2 .lqd-chat-form-wrap {
        overflow: visible !important;
    }
}