/*
 * ==========================================================
 * CLEAN MODAL LAYOUT
 * ==========================================================
 *
 * Makes the whole modal layout nice with proper backgrounds
 * and no overlapping between chat and profile areas
 */

/* Main modal container */
.tk-profile-box,
.tk-direct-message-box {
    background: #fafafa !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
}

/* Modal content area */
.tk-profile-box .tk-main,
.tk-direct-message-box .tk-main {
    background: #fafafa !important;
    padding: 20px !important;
    gap: 20px !important;
    height: calc(100% - 80px) !important;
}

/* Left side - Chat area */
.tk-profile-box .tk-main > div:first-child,
.tk-direct-message-box .tk-main > div:first-child {
    background: #f5f5f5 !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-right: 10px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

/* Right side - Profile details area */
.tk-profile-box .tk-main > div:last-child,
.tk-direct-message-box .tk-main > div:last-child {
    background: #fff !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-left: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Profile tables - ensure white background */
.tk-profile-box .tk-profile-list,
.tk-direct-message-box .tk-profile-list {
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    margin: 10px 0 !important;
    padding: 8px !important;
}

/* Chat conversation area */
.tk-profile-box .tk-board .tk-conversation,
.tk-direct-message-box .tk-board .tk-conversation {
    background: transparent !important;
    border-radius: 8px !important;
}

/* Chat messages list */
.tk-profile-box .tk-board .tk-conversation .tk-list,
.tk-direct-message-box .tk-board .tk-conversation .tk-list {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 10px !important;
    margin-bottom: 10px !important;
}

/* Chat editor area */
.tk-profile-box .tk-editor,
.tk-direct-message-box .tk-editor {
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Top bar styling */
.tk-profile-box .tk-top-bar,
.tk-direct-message-box .tk-top-bar {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: #fff !important;
    padding: 20px 25px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Section titles in profile area */
.tk-profile-box .tk-title,
.tk-direct-message-box .tk-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Ensure no overlapping */
.tk-profile-box .tk-main > div,
.tk-direct-message-box .tk-main > div {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 5px !important;
}

/* Fix any scroll areas */
.tk-profile-box .tk-scroll-area,
.tk-direct-message-box .tk-scroll-area {
    padding-right: 8px !important;
}

.tk-profile-box .tk-scroll-area::-webkit-scrollbar,
.tk-direct-message-box .tk-scroll-area::-webkit-scrollbar {
    width: 6px !important;
}

.tk-profile-box .tk-scroll-area::-webkit-scrollbar-track,
.tk-direct-message-box .tk-scroll-area::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 3px !important;
}

.tk-profile-box .tk-scroll-area::-webkit-scrollbar-thumb,
.tk-direct-message-box .tk-scroll-area::-webkit-scrollbar-thumb {
    background: #cbd5e0 !important;
    border-radius: 3px !important;
}

/* Rating area styling */
.tk-profile-box .tk-rating-area,
.tk-direct-message-box .tk-rating-area {
    background: #f8fafc !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin-top: 10px !important;
}

/* No results text */
.tk-profile-box .tk-no-results,
.tk-direct-message-box .tk-no-results {
    color: #718096 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 20px !important;
}

/* Bot control panel and mobile list - white backgrounds */
.tk-mobile-list,
.bot-control-panel {
    background: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    margin: 10px !important;
    padding: 15px !important;
}

.tk-mobile-list .bot-control-panel {
    margin: 0 !important;
    box-shadow: none !important;
}

.platform-header {
    background: #f8f9fa !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tk-profile-box .tk-main,
    .tk-direct-message-box .tk-main {
        flex-direction: column !important;
        padding: 15px !important;
    }
    
    .tk-profile-box .tk-main > div,
    .tk-direct-message-box .tk-main > div {
        margin: 5px 0 !important;
    }
}