/* ═══════════════════════════════════════════════════════════════════════════
   Info Point — prefix mw-ip-*
   A two-panel knowledge desk on the shared dark canvas (mw-canvas.css): the wiki
   browser + two-phase semantic search on the left, the AI assistant (Artist-Office
   chat embed, MwChat) on the right. Tokens come from --mw-canvas-* (mw-canvas.css);
   this file only lays out and skins the Info-Point-specific chrome. The reused wiki
   components read --mw-wiki-* — aliased to the canvas tokens on .mw-ip-knowledge so
   they theme without duplicating any color values.
   ═══════════════════════════════════════════════════════════════════════════ */

.mw-ip-page {
    /* fill the viewport below the dense 48px MudAppBar (same constant the office/wiki use) */
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

/* Mobile panel switch — hidden on desktop where both panels sit side by side. */
.mw-ip-tabs {
    display: none;
    position: relative;
    z-index: 1;
    gap: 6px;
    padding: 4px;
    background: var(--mw-canvas-surface);
    border: 1px solid var(--mw-canvas-border);
    border-radius: var(--mw-canvas-radius);
}

.mw-ip-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--mw-canvas-radius-sm);
    background: transparent;
    color: var(--mw-canvas-text-dim);
    font: 600 0.85rem var(--mw-canvas-font-body);
    cursor: pointer;
}

.mw-ip-tab--active {
    background: var(--mw-canvas-accent-tint);
    color: var(--mw-canvas-accent-soft);
}

.mw-ip-grid {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* ── Panels ─────────────────────────────────────────────────────────────── */
.mw-ip-panel {
    position: relative;
    z-index: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--mw-canvas-surface);
    border: 1px solid var(--mw-canvas-border);
    border-radius: var(--mw-canvas-radius);
    box-shadow: var(--mw-canvas-shadow);
    overflow: hidden;
}

.mw-ip-panel-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mw-canvas-border);
}

.mw-ip-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 0.95rem var(--mw-canvas-font-body);
    letter-spacing: -0.01em;
    color: var(--mw-canvas-text);
}

.mw-ip-panel-title .mud-icon-root { color: var(--mw-canvas-accent); }

.mw-ip-head-spacer { flex: 1; }

/* Pill toggle (search, back) shared across the knowledge head. */
.mw-ip-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--mw-canvas-border);
    border-radius: 999px;
    background: transparent;
    color: var(--mw-canvas-text-dim);
    font: 500 0.8rem var(--mw-canvas-font-body);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.mw-ip-pill:hover {
    color: var(--mw-canvas-text);
    border-color: var(--mw-canvas-border-strong);
}

.mw-ip-pill--active {
    background: var(--mw-canvas-accent-tint);
    border-color: var(--mw-canvas-accent-line);
    color: var(--mw-canvas-accent-soft);
}

/* ── Knowledge panel ────────────────────────────────────────────────────── */
.mw-ip-knowledge {
    /* Alias the reused wiki components' tokens to the shared canvas set — single source of truth,
       no color values duplicated. Covers MwWikiTwoPhaseSearch, MwWikiCategoryTree, search rows. */
    --mw-wiki-bg-page: var(--mw-canvas-bg-page);
    --mw-wiki-surface-elev: var(--mw-canvas-surface-elev);
    --mw-wiki-surface-hover: var(--mw-canvas-surface-hover);
    --mw-wiki-border: var(--mw-canvas-border);
    --mw-wiki-border-strong: var(--mw-canvas-border-strong);
    --mw-wiki-text: var(--mw-canvas-text);
    --mw-wiki-text-dim: var(--mw-canvas-text-dim);
    --mw-wiki-text-faint: var(--mw-canvas-text-faint);
    --mw-wiki-accent: var(--mw-canvas-accent);
    --mw-wiki-accent-soft: var(--mw-canvas-accent-soft);
    --mw-wiki-accent-tint: var(--mw-canvas-accent-tint);
    --mw-wiki-accent-line: var(--mw-canvas-accent-line);
    --mw-wiki-amber: var(--mw-canvas-amber);
    --mw-wiki-amber-dim: var(--mw-canvas-amber-dim);
    --mw-wiki-blue: var(--mw-canvas-blue);
    --mw-wiki-blue-dim: var(--mw-canvas-blue-dim);
    --mw-wiki-red: var(--mw-canvas-red);
    --mw-wiki-red-dim: var(--mw-canvas-red-dim);
    --mw-wiki-radius: var(--mw-canvas-radius);
    --mw-wiki-radius-sm: var(--mw-canvas-radius-sm);
}

.mw-ip-knowledge-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
}

/* The reused two-phase search field/rows already carry their own mw-wiki-search-* styling. */

.mw-ip-reader {
    max-width: 780px;
    margin: 0 auto;
}

/* ── Assistant panel ────────────────────────────────────────────────────── */
.mw-ip-assistant { flex-direction: row; }

.mw-ip-rail {
    width: 258px;
    flex-shrink: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mw-canvas-border);
}

.mw-ip-rail-head {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--mw-canvas-border);
}

.mw-ip-newchat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--mw-canvas-radius-sm);
    background: var(--mw-canvas-accent);
    color: #0b0713;
    font: 600 0.85rem var(--mw-canvas-font-body);
    cursor: pointer;
    transition: filter 0.12s;
}

.mw-ip-newchat:hover { filter: brightness(1.08); }

.mw-ip-rail-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--mw-canvas-border);
    border-radius: var(--mw-canvas-radius-sm);
    background: var(--mw-canvas-bg-page);
    color: var(--mw-canvas-text-faint);
}

.mw-ip-rail-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--mw-canvas-text);
    font: 400 0.82rem var(--mw-canvas-font-body);
    outline: none;
}

.mw-ip-rail-search input::placeholder { color: var(--mw-canvas-text-faint); }

.mw-ip-rail-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-ip-conv {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--mw-canvas-radius-sm);
    cursor: pointer;
    color: var(--mw-canvas-text-dim);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.mw-ip-conv:hover { background: var(--mw-canvas-surface-hover); }

.mw-ip-conv--active {
    background: var(--mw-canvas-accent-tint);
    border-color: var(--mw-canvas-accent-line);
    color: var(--mw-canvas-text);
}

.mw-ip-conv-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mw-ip-conv-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 500 0.83rem var(--mw-canvas-font-body);
    color: var(--mw-canvas-text);
}

.mw-ip-conv-time {
    font: 400 0.68rem var(--mw-canvas-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--mw-canvas-text-faint);
}

.mw-ip-conv-rename {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--mw-canvas-accent-line);
    border-radius: 6px;
    background: var(--mw-canvas-bg-page);
    color: var(--mw-canvas-text);
    font: 500 0.83rem var(--mw-canvas-font-body);
    padding: 3px 6px;
    outline: none;
}

.mw-ip-conv-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}

.mw-ip-conv:hover .mw-ip-conv-actions,
.mw-ip-conv--active .mw-ip-conv-actions { opacity: 1; }

.mw-ip-conv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mw-canvas-text-faint);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.mw-ip-conv-btn:hover { background: var(--mw-canvas-surface-hover); color: var(--mw-canvas-text); }

.mw-ip-conv-btn--danger:hover { color: var(--mw-canvas-red); }

/* Star stays visible (not hover-gated) once lit, so favorites read at a glance. */
.mw-ip-conv-star--on {
    opacity: 1;
    color: var(--mw-canvas-amber);
}

.mw-ip-conv-star--on .mud-icon-root { color: var(--mw-canvas-amber); }

.mw-ip-rail-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--mw-canvas-text-faint);
    font: 400 0.8rem var(--mw-canvas-font-body);
}

.mw-ip-chat {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
}

/* MwChat fills the chat column (its own mw-chat-* styling handles the interior). */
.mw-ip-chat .mw-chat {
    flex: 1;
    min-width: 0;
    height: 100%;
}

.mw-ip-chat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: var(--mw-canvas-text-dim);
}

.mw-ip-chat-empty .mud-icon-root { color: var(--mw-canvas-accent); opacity: 0.7; }

.mw-ip-chat-empty-title {
    font: 600 1.05rem var(--mw-canvas-font-body);
    letter-spacing: -0.02em;
    color: var(--mw-canvas-text);
}

.mw-ip-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: var(--mw-canvas-text-faint);
    font: 400 0.85rem var(--mw-canvas-font-body);
    text-align: center;
}

/* ── Mobile: one panel at a time via the tab switch ─────────────────────── */
@media (max-width: 960px) {
    .mw-ip-tabs { display: flex; }

    .mw-ip-grid { grid-template-columns: 1fr; }

    .mw-ip-grid--knowledge .mw-ip-assistant,
    .mw-ip-grid--assistant .mw-ip-knowledge { display: none; }

    /* Rail becomes a capped scroll strip above the chat on narrow screens. */
    .mw-ip-assistant { flex-direction: column; }

    .mw-ip-rail {
        width: 100%;
        max-height: 40%;
        border-right: 0;
        border-bottom: 1px solid var(--mw-canvas-border);
    }
}