/* ================================================================
   chat-layout.css — Two-panel layout (sidebar + panel columns)
   Used by: layout.html.twig (full page) and _widget.html.twig (modal)
   ================================================================ */

/* ── Root container ─────────────────────────────────────────── */
.chat-layout-root {
    display: flex;
    width: 100%;
    overflow: hidden;
    background: #f0f2f5;
}

/* ── Sidebar (left panel) ───────────────────────────────────── */
.chat-sidebar-col {
    width: 340px;
    min-width: 280px;
    max-width: 380px;
    border-right: 1px solid #e9ecef;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* ── Panel (right column) ───────────────────────────────────── */
.chat-panel-col {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
}

/* ── Conversation list items ────────────────────────────────── */
.conv-item { color: #1c1c1e; }
.conv-item:hover { background: #f5f6f6; }
.conv-item.conv-active { background: #deeaf8 !important; }

/* ── Panel loading spinner ──────────────────────────────────── */
.panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f0f2f5;
}

/* ── Mobile: stack panels full-width ────────────────────────── */
@media (max-width: 767px) {
    .chat-sidebar-col {
        width: 100%;
        max-width: 100%;
        border-right: none;
    }
    .chat-layout-root.panel-open .chat-sidebar-col { display: none; }
    .chat-layout-root:not(.panel-open) .chat-panel-col { display: none; }
}