/* ─── Leanmote Bot — global side panel (RD-1892) ──────────────────
 *
 * Platform-wide agent panel. The CHAT COMPONENT styles (header, feed,
 * composer, message bubbles, history popover, confirm dialog) come
 * from bottleneck-insights.css — now loaded globally — via the shared
 * `.ct-agent-side-panel` / `.ct-chat-*` classes. This file only owns:
 *
 *   1. the full-height fixed GEOMETRY of the global panel (the
 *      bottleneck page keeps its own in-flow flex geometry for the
 *      Planning panel, scoped under #ct-tab-active-feed),
 *   2. the push behavior on the app chrome (header + wrapper get a
 *      right offset while the panel is open, Claude-Code style),
 *   3. the resize gutter,
 *   4. the top-bar bot toggle button,
 *   5. the sidebar-bottom user section that replaces the old
 *      top-right profile dropdown.
 *
 * Width is a :root custom property (--lm-bot-width) so the pre-paint
 * script in main.php can restore the persisted value before first
 * frame. Keys / clamp bounds must stay in sync with panel.js.
 *
 * z-index scale (documented, do not freestyle):
 *   Metronic app-header  = 100, app-sidebar = 105 (vendor)
 *   lm-bot panel         = 108
 *   lm-bot gutter        = 109
 *   BS dropdowns >= 1000, modals 1055, toasts 1080 — all stay above.
 */

:root {
    --lm-bot-width: 460px;
}

/* ─── Panel geometry — full viewport height, flush right ─── */

.lm-bot-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--lm-bot-width);
    min-width: 320px;
    /* Hard ceiling 560px — a chat panel doesn't read better wider, and
     * the dashboard column behind it must stay legible. The viewport
     * term only kicks in on narrow screens (keeps ≥720px for sidebar +
     * content). Keep 560 / 720 in sync with WIDTH_MAX / VIEWPORT_RESERVE
     * in js/leanmote-bot/panel.js and the pre-paint clamp in main.php. */
    max-width: min(560px, calc(100vw - 720px));
    z-index: 108;
    display: none;            /* hidden until body.lm-bot-open */
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid #e9e9ef;
    box-shadow: -8px 0 24px -18px rgba(67, 56, 202, 0.18);
    /* The shared component styles expect the panel to be a flex
     * column — feed grows, composer sticks to the bottom. */
}

body.lm-bot-open .lm-bot-panel {
    display: flex;
}

/* Neutralize the float-card chrome the shared class applies inside
 * the bottleneck flex row (margins + rounded corners) — the global
 * panel is an app rail, not a floating card. */
.lm-bot-panel.ct-agent-side-panel {
    margin: 0;
    border-radius: 0;
    flex: none;
}

/* The feed must absorb the freed vertical space (the shared styles
 * size it against the bottleneck row height). */
.lm-bot-panel .ct-agent-side-panel__feed {
    flex: 1 1 auto;
    min-height: 0;
}

/* Send button + user message bubble use the theme primary instead of
 * the Bottleneck module's indigo (--ct-accent). Scoped to the global
 * panel so the Bottleneck planning panel keeps its own styling, and
 * driven off --bs-primary so white-label orgs follow their brand. */
.lm-bot-panel .ct-agent-side-panel__send,
.lm-bot-panel .ct-chat-msg--user .ct-chat-msg__bubble {
    background: var(--bs-primary, #1b84ff);
}

.lm-bot-panel .ct-agent-side-panel__send:hover {
    background: var(--bs-primary-active, #056ee9);
}

/* Keep the send glyph solid white on the primary fill. */
.lm-bot-panel .ct-agent-side-panel__send,
.lm-bot-panel .ct-agent-side-panel__send i,
.lm-bot-panel .ct-agent-side-panel__send i:before {
    color: #fff !important;
}

/* ki-send is a duotone icon whose secondary path renders at 30% opacity,
 * which reads as a washed/bluish plane on the lighter primary blue.
 * Force the glyph (and any duotone paths) fully opaque — but NOT the
 * button itself, so :disabled can still dim the whole control. */
.lm-bot-panel .ct-agent-side-panel__send i,
.lm-bot-panel .ct-agent-side-panel__send i:before,
.lm-bot-panel .ct-agent-side-panel__send i .path1:before,
.lm-bot-panel .ct-agent-side-panel__send i .path2:before {
    opacity: 1 !important;
}

/* ─── Push behavior on the app chrome ─── */

/* Full-height panel: the header compresses WITH the content — its right
 * edge tracks the panel's left edge. To stop that compression from
 * breaking wide dashboard toolbars (AI Governance, Project Financials,
 * Performance Delivery), panel.js caps the panel width at the point the
 * header content would start to overflow (RD-1892). */
body.lm-bot-open .app-header {
    right: var(--lm-bot-width);
}

body.lm-bot-open .app-wrapper {
    margin-right: var(--lm-bot-width);
}

/* No open/close transition: panel.js measures the header synchronously
 * right after each width change to cap it, and an animating `right`
 * would make those reads land on a mid-animation box (wrong cap). The
 * toggle is instant. */

/* While dragging, kill text selection and keep the col-resize cursor
 * everywhere so the drag doesn't flicker over iframes/cards. */
body.lm-bot-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ─── Resize gutter (left edge of the panel) ─── */

.lm-bot-gutter {
    position: fixed;
    top: 0;
    bottom: 0;
    right: var(--lm-bot-width);
    width: 10px;
    margin-right: -5px;        /* straddle the panel border */
    z-index: 109;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    background: transparent;
}

body.lm-bot-open .lm-bot-gutter {
    display: flex;
}

.lm-bot-gutter__grip {
    width: 3px;
    height: 44px;
    border-radius: 3px;
    background: #d8d8e5;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.lm-bot-gutter:hover .lm-bot-gutter__grip,
.lm-bot-gutter:focus-visible .lm-bot-gutter__grip,
body.lm-bot-resizing .lm-bot-gutter__grip {
    opacity: 1;
    background: var(--bs-primary, #1b84ff);
}

.lm-bot-gutter:focus-visible {
    outline: 2px solid var(--bs-primary, #1b84ff);
    outline-offset: -2px;
}

/* ─── Top-bar bot toggle button ─── */

/* Light labeled button, sized and bordered like its Filters / Targets peers in the same header row. */
.lm-bot-toggle {
    --lm-bot-toggle-surface: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 45px;
    /* 90px floor matches the w-90px Filters button, so both keep the same footprint. */
    min-width: 90px;
    padding: 0 1rem;
    border: 1px solid #ccc;
    border-radius: var(--bs-border-radius, 0.475rem);
    background: var(--lm-bot-toggle-surface);
    color: var(--bs-gray-700, #4b5675);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, box-shadow 160ms ease-out, transform 100ms ease-out;
}

/* Indigo glyph — same agent accent as the panel title and the Bottleneck Insights badges. */
.lm-bot-toggle__glyph {
    flex: 0 0 auto;
    color: #4338ca;
}

/* The front panel is knocked out with the button surface so the overlap reads at 18px. */
.lm-bot-toggle__glyph-front {
    fill: var(--lm-bot-toggle-surface);
}

.lm-bot-toggle:hover {
    --lm-bot-toggle-surface: #f4f5f8;
    border-color: #b5b8c0;
    box-shadow: 0 1px 3px rgba(24, 22, 60, 0.06);
}

.lm-bot-toggle:active {
    transform: scale(0.98);
    box-shadow: none;
}

.lm-bot-toggle:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 1px;
}

/* Panel open: indigo-tinted surface so the button reads engaged without going solid. */
body.lm-bot-open .lm-bot-toggle {
    --lm-bot-toggle-surface: #eef0fd;
    border-color: #c3c6f5;
    color: #312a8f;
}

body.lm-bot-open .lm-bot-toggle:hover {
    --lm-bot-toggle-surface: #e5e8fb;
    border-color: #aeb2f0;
}

/* Narrow screens: drop the label and keep the square icon button. */
@media (max-width: 575.98px) {
    .lm-bot-toggle {
        width: 45px;
        min-width: 0;
        padding: 0;
    }

    .lm-bot-toggle__label {
        display: none;
    }
}

/* Panel-header bot glyph: the agent accent (indigo/violet --ct-accent),
 * matching the toggle and the agent badges in Bottleneck Insights. */
.lm-bot-panel .ct-agent-side-panel__title .bi {
    font-size: 1.3rem;
    line-height: 1;
    color: #4338ca;
}

/* ─── Sidebar-bottom user section (replaces top-right profile) ─── */

/* Pin the user section to the bottom of the sidebar from FIRST PAINT.
 * The menu lives in #kt_app_sidebar_menu_scroll, whose height is only
 * capped once Metronic's KTScroll initializes (on DOMContentLoaded). Until
 * then .app-sidebar-menu (.flex-column-fluid → `flex: 1 0 auto`, shrink 0)
 * keeps its full natural height and pushes this footer below the fixed
 * sidebar's bottom edge — so the user section looks empty/missing while the
 * page loads, then snaps into view when JS runs. Letting the menu area
 * shrink keeps the footer (server-rendered avatar + name + email) visible
 * immediately; KTScroll still sets the inner scroll height as before. */
.app-sidebar-menu {
    flex-shrink: 1;
    min-height: 0;
}

.lm-sidebar-user {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.5rem 0.75rem;
}

.lm-sidebar-user__trigger {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: 0.475rem;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.lm-sidebar-user__trigger:hover,
.lm-sidebar-user__trigger.show {
    background: rgba(255, 255, 255, 0.06);
}

.lm-sidebar-user__trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: -2px;
}

/* The account dropdown is a light popup that lives INSIDE the dark
 * sidebar, so the dark-sidebar menu-link rule
 * ([data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item
 * .menu-link, specificity 0,5,0) bleeds in and paints the text near-white
 * — invisible on the white menu, worst on hover. Re-assert readable
 * colors with a higher-specificity selector (0,6,0 / 0,7,0 on hover). */
/* !important: the dark-sidebar hover rule
 * (…menu-link:hover:not(.disabled):not(.active):not(.here), specificity
 * 0,8,0+) outranks any plain selector and would otherwise repaint the
 * text near-white on hover. It carries no !important, so this wins. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .lm-sidebar-user .menu .menu-item .menu-link {
    color: #4b5675 !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .lm-sidebar-user .menu .menu-item .menu-link:hover,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .lm-sidebar-user .menu .menu-item.show > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .lm-sidebar-user .menu .menu-item .menu-link.active {
    color: var(--bs-primary, #1b84ff) !important;
    background-color: #f4f4f8;
}

.lm-sidebar-user__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.lm-sidebar-user__name {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lm-sidebar-user__org {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lm-sidebar-user__chevron {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

/* Collapsed (minimized) sidebar: avatar only, centered. */
[data-kt-app-sidebar-minimize="on"] .lm-sidebar-user__meta,
[data-kt-app-sidebar-minimize="on"] .lm-sidebar-user__chevron {
    display: none;
}

[data-kt-app-sidebar-minimize="on"] .lm-sidebar-user__trigger {
    justify-content: center;
    padding: 0.5rem 0;
}

/* ─── Responsive: below lg the panel overlays full-width ─── */

@media (max-width: 991.98px) {
    .lm-bot-panel {
        width: 100vw;          /* full-screen overlay on mobile */
        max-width: 100vw;
        border-left: 0;
    }

    /* On mobile the panel overlays everything — don't compress the
     * header (it's covered anyway). */
    body.lm-bot-open .app-header {
        right: 0;
    }

    body.lm-bot-open .app-wrapper {
        margin-right: 0;
    }

    .lm-bot-gutter {
        display: none !important;
    }
}

/* ─── MCP connect invitation (top of panel) ───────────────────────
 * Subtle primary-tinted strip below the header inviting the user to
 * wire the Leanmote MCP into their own AI assistant. Dismissible
 * (localStorage) + click-to-copy URL chip — logic in panel.js. */
.lm-bot-connect {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(67, 56, 202, 0.06);
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #475569;
}

/* Author display:flex above outranks the UA [hidden] rule, so re-assert. */
.lm-bot-connect[hidden] {
    display: none;
}

.lm-bot-connect__icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #4338ca;
    font-size: 1rem;
}

.lm-bot-connect__body {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-bot-connect a {
    color: #4338ca;
    font-weight: 600;
    text-decoration: none;
}

.lm-bot-connect a:hover {
    text-decoration: underline;
}

/* Docs link — flex box starts its own line, so it reads as the next step. */
.lm-bot-connect__docs {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    width: fit-content;
    margin-top: 0.25rem;
}

.lm-bot-connect__docs .ki-outline {
    font-size: 0.8125rem;
}

/* MCP URL — click-to-copy chip. */
.lm-bot-connect__url {
    border: 0;
    border-radius: 0.3rem;
    padding: 0.05rem 0.35rem;
    background: rgba(67, 56, 202, 0.1);
    color: #4338ca;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.78125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.lm-bot-connect__url:hover {
    background: rgba(67, 56, 202, 0.18);
}

.lm-bot-connect__url:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 1px;
}

/* Brief green confirmation after a successful copy (set by panel.js). */
.lm-bot-connect__url.is-copied {
    background: rgba(35, 194, 119, 0.18);
    color: #1a8f59;
}

.lm-bot-connect__dismiss {
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: #94a3b8;
    line-height: 1;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: color 0.12s ease;
}

.lm-bot-connect__dismiss:hover {
    color: #475569;
}

.lm-bot-connect__dismiss:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 1px;
}

/* Loading placeholder for the view chip (server-rendered until agents.js
 * resolves the scope) — muted so it doesn't read as a real value. */
.ct-agent-side-panel__context-value--loading {
    opacity: 0.45;
}

/* ─── Inline "scope changed" notice in the chat feed ──────────────
 * Dropped into the feed when the user switches view/filters mid-chat,
 * with a one-click "new chat for this view" affordance. Muted, centered,
 * deliberately quieter than a real message bubble. */
.ct-agent-scope-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0;
    padding: 0.4rem 0.65rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #64748b;
    text-align: center;
}

.ct-agent-scope-notice__text strong {
    color: #334155;
    font-weight: 600;
}

.ct-agent-scope-notice__action {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--bs-primary, #1b84ff);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.ct-agent-scope-notice__action:hover {
    text-decoration: underline;
}

.ct-agent-scope-notice__action:focus-visible {
    outline: 2px solid var(--bs-primary, #1b84ff);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ─── RD-2157: empty-state welcome + starter-question chips ─── */
/* Sits AFTER the feed in the panel column; the empty feed (flex:1) grows and
 * pushes this block to the bottom, just above the composer. */
.ct-agent-suggestions {
    flex: 0 0 auto;
    padding: 0.5rem 1rem 0.85rem;
}

.ct-agent-suggestions__greeting {
    margin-bottom: 0.65rem;
}

.ct-agent-suggestions__hello {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.2;
    color: #181c32;
}

.ct-agent-suggestions__sub {
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: #78829d;
}

.ct-agent-suggestions__chips {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Defensive cap so an unusually long set of chips can't push the composer
     * off-screen — scroll within the block instead. */
    max-height: 50vh;
    overflow-y: auto;
}

.ct-agent-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid #e9e9ef;
    border-radius: 0.625rem;
    background: #fff;
    color: #3f4254;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.ct-agent-suggestion:hover {
    border-color: #c7c3f0;                 /* violet-tinted, ties to the bot accent */
    background: rgba(67, 56, 202, 0.05);
    color: #312a8f;
    transform: translateY(-1px);
}

.ct-agent-suggestion:active {
    transform: translateY(0);
}

.ct-agent-suggestion:focus-visible {
    outline: 2px solid #4338ca;
    outline-offset: 1px;
}

/* Staggered entrance for freshly-loaded chips (per-chip delay set inline). */
@keyframes ct-agent-chip-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.ct-agent-suggestion--enter {
    animation: ct-agent-chip-in 0.28s ease both;
}

/* Loading shimmer shown the instant the tab/view changes, until the new
 * suggestions arrive (so the previous view's questions never linger). */
.ct-agent-suggestion--skeleton {
    height: 2.15rem;
    border-color: transparent;
    cursor: default;
    background: linear-gradient(90deg, #f1f1f5 25%, #e7e7ee 37%, #f1f1f5 63%);
    background-size: 400% 100%;
    animation: ct-agent-chip-skel 1.2s ease-in-out infinite;
}

@keyframes ct-agent-chip-skel {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-agent-suggestion--enter,
    .ct-agent-suggestion--skeleton { animation: none; }
}