/* tighten up the section padding so more of the screen is iframe */
.dashboard-section {
    padding: 1rem 0;
    /* was 2rem; you can go to 0 if you like */
    background-color: #f8f9fa;
}

/* container splits exactly 50/50, with a center divider */
.chatbot-container {
    display: flex;
    height: 100vh;
    margin: 1rem auto;
    max-width: 1200px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

/* both panels exactly half width */
.chatbot-info,
.chatbot-embed {
    width: 50%;
    padding: 2rem;
    box-sizing: border-box;
    overflow-y: hidden;
}

/* vertical divider */
.chatbot-info {
    background: #f0f4ff;
    border-right: 1px solid #ddd;
}

.chatbot-embed {
    background: #fff;
    position: relative;
}

/* force the chat to fill the right panel */
.chatbot-embed langflow-chat {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* responsive: stack panels on mobile */
@media (max-width: 768px) {
    .chatbot-container {
        flex-direction: column;
        height: 160vh;
    }

    .chatbot-info,
    .chatbot-embed {
        width: 100%;
        padding: 1rem;
    }

    .chatbot-embed {
        height: 1100px;
    }
}

.chatbot-title {
    text-align: center;
    margin: 2rem 0 1rem;
    /* 2rem above, 1rem below */
}

.chatbot-title h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--chat-accent, #4796E3);
    /* uses your accent variable */
}