/* src/components/super/XWUISuperChat/XWUISuperChat.css */
/*
 * XWUISuperChat — page-layout helpers ONLY. The shell chrome (sidebar +
 * header) comes from XWUISuperApp + XWUIShellApp; the inner industry/chat
 * components paint themselves. This file just lays out the two-pane and
 * single-pane page hosts so chat-list / channels render WhatsApp-style
 * and mentions / saved / activity render fullscreen.
 *
 * Theme tokens only. No hard-coded colors — the inner components already
 * paint per-tile chrome through their own tokens.
 */

.xwui-super-chat-twopane {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    width: 100%;
    height: 100%;
    gap: 0;
    background: var(--xwui-color-surface);
    overflow: hidden;
}

.xwui-super-chat-pane-list {
    border-inline-end: 1px solid var(--xwui-color-border);
    overflow: auto;
    min-width: 0;
}

.xwui-super-chat-pane-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.xwui-super-chat-main-header {
    border-bottom: 1px solid var(--xwui-color-border);
    flex: 0 0 auto;
}

.xwui-super-chat-main-thread {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

.xwui-super-chat-main-composer {
    flex: 0 0 auto;
    border-top: 1px solid var(--xwui-color-border);
    padding: var(--xwui-space-2, 0.5rem);
    background: var(--xwui-color-surface);
}

.xwui-super-chat-main-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--xwui-space-6, 1.5rem);
    color: var(--xwui-color-text-muted, var(--xwui-color-text));
    font-size: var(--xwui-font-size-sm, 0.875rem);
    text-align: center;
}
/* WHY: `display:flex` above beats the UA `[hidden]{display:none}` rule. */
.xwui-super-chat-main-empty[hidden] {
    display: none !important;
}

/* Messenger mode — contacts + canvas only (host owns account/nav chrome).
 * Match host CE and/or inner .xwui-super-app root. */
.xwui-super-chat--messenger .xwui-shell-app-first,
.xwui-super-chat--messenger .xwui-shell-app-header,
.xwui-super-chat--messenger .xwui-shell-app-sidebar,
.xwui-super-chat--messenger .xwui-shell-app-sidebar-toggle,
.xwui-super-chat--messenger .xwui-shell-app-splitter,
.xwui-super-chat--messenger .xwui-shell-app-menu-btn,
xwui-super-chat.xwui-super-chat--messenger .xwui-shell-app-first,
xwui-super-chat.xwui-super-chat--messenger .xwui-shell-app-header,
xwui-super-chat.xwui-super-chat--messenger .xwui-shell-app-sidebar,
xwui-super-chat.xwui-super-chat--messenger .xwui-shell-app-sidebar-toggle,
xwui-super-chat.xwui-super-chat--messenger .xwui-shell-app-splitter,
xwui-super-chat.xwui-super-chat--messenger .xwui-shell-app-menu-btn {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.xwui-super-chat--messenger .xwui-shell-app,
.xwui-super-chat--messenger .xwui-shell-app-shell-host,
.xwui-super-chat--messenger .xwui-shell-app-main,
.xwui-super-chat--messenger .xwui-super-app-page {
    min-height: 0;
    height: 100%;
}

.xwui-super-chat--messenger .xwui-shell-app {
    min-height: 0;
}

.xwui-super-chat-singlepane {
    display: block;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.xwui-super-chat-placeholder {
    padding: var(--xwui-space-6, 1.5rem);
    color: var(--xwui-color-text-muted, var(--xwui-color-text));
    font-size: var(--xwui-font-size-sm, 0.875rem);
}

/* RTL — inherit document direction even when a child stamped dir="ltr"
 * during boot (same pattern as XWUIShellApp). Logical borders already
 * flip; this forces flex/grid inline axes to mirror under AR pages. */
html[dir="rtl"] .xwui-super-app,
html[dir="rtl"] .xwui-super-app [dir="ltr"],
html[dir="rtl"] .xwui-super-chat-twopane,
html[dir="rtl"] .xwui-super-chat-pane-list,
html[dir="rtl"] .xwui-super-chat-pane-main {
    direction: rtl;
}
html[dir="ltr"] .xwui-super-app [dir="rtl"] {
    direction: ltr;
}

/* Pane divider uses logical border — keep as a hook for subclass overrides. */
.xwui-super-app[dir="rtl"] .xwui-super-chat-pane-list,
html[dir="rtl"] .xwui-super-chat-pane-list {
    border-inline-end: 1px solid var(--xwui-color-border);
}

/* Phone breakpoint — collapse to single column. The chat-list pane takes
 * priority on first paint; the host can wire a swipe-to-detail interaction
 * later. WHY a media query (not a JS observer): no JS = no flicker. */
/* Desktop — back is for the single-pane mobile swap only. */
@media (min-width: 641px) {
    .xwui-super-chat-twopane .xwui-chat-header-back {
        display: none;
    }
}

@media (max-width: 640px) {
    .xwui-super-chat-twopane {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .xwui-super-chat-pane-main {
        display: none;
    }
    /* Thread open — swap to canvas; back on ChatHeader restores the list. */
    .xwui-super-chat-twopane--thread .xwui-super-chat-pane-list {
        display: none;
    }
    .xwui-super-chat-twopane--thread .xwui-super-chat-pane-main {
        display: flex;
    }
}