/* ============================================================================
   KIBO v2 — legacy shell chrome (header, sidebar/panel, drop-zone, usage, notifications). Loaded BEFORE shell.css so the v2 .app-sidebar overrides win.
   Extracted from app.css (monolith split). Token-based, see _tokens.css.
   ============================================================================ */

/* ── App Shell ───────────────────────────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;        /* fallback for browsers without dvh */
    height: 100dvh;       /* mobile: excludes the dynamic browser chrome, prevents overflow scroll */
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: 52px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 100;
}

.header-brand { display: flex; align-items: center; gap: .55rem; }
.header-logo  { height: 32px; width: auto; }
/* App name next to the logo (KBW-0015) */
.header-brand-name { font-size: 1.08rem; font-weight: 700; letter-spacing: .02em; color: var(--text-primary); -webkit-user-select: none; user-select: none; }

/* header-pinned: always visible in header */
.header-pinned { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }


/* ── App body: sidebar + main (below header) ─────────────────────────────── */
.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}


/* ── Desktop sidebar ─────────────────────────────────────────────────────── */
.app-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overflow-x: hidden;
}

/* New chat button */
.sidebar-new-chat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0.75rem 0.25rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
}
.sidebar-new-chat:hover { background: var(--bg-surface-2); }
.sidebar-new-chat svg   { flex-shrink: 0; }


/* ── Sidebar index drop-zone ──────────────────────────────────────────────
   Rectangular section at the top of the sidebar, sized to the bar width.
   Click → file picker. Drag-drop a file → uploads to /api/chat/index for
   async server-side extraction by Argo (DocumentIndexJob). Theme-aware:
   tracks light/dark via the same CSS variables as the rest of the sidebar. */
.sidebar-dropzone {
    margin: 0.4rem 0.75rem 0.6rem;
    padding: 0.9rem 0.75rem 0.85rem;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
    flex-shrink: 0;
}
.sidebar-dropzone:hover,
.sidebar-dropzone.drag-over {
    border-color: var(--accent);
    background: var(--bg-surface);
    color: var(--text-primary);
}
.sidebar-dropzone.drag-over {
    border-style: solid;
}
.sidebar-dropzone.uploading {
    cursor: progress;
    opacity: 0.85;
}
.sidebar-dropzone.success {
    border-color: #16a34a;
    color: #16a34a;
    border-style: solid;
}
.sidebar-dropzone.error {
    border-color: #dc2626;
    color: #dc2626;
    border-style: solid;
}
.sidebar-dropzone-icon {
    opacity: 0.65;
    margin-bottom: 0.1rem;
}
.sidebar-dropzone:hover .sidebar-dropzone-icon,
.sidebar-dropzone.drag-over .sidebar-dropzone-icon,
.sidebar-dropzone.success .sidebar-dropzone-icon,
.sidebar-dropzone.error .sidebar-dropzone-icon {
    opacity: 1;
}
.sidebar-dropzone-label {
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.25;
}
.sidebar-dropzone-hint {
    font-size: 0.66rem;
    opacity: 0.75;
    line-height: 1.2;
}

/* Session list */
.sidebar-sessions {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0.25rem 0;
    min-height: 0;
}

.sidebar-section-label {
    padding: 0.375rem 0.875rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    flex-shrink: 0;
}
.sidebar-group-label {
    padding: 0.5rem 0.875rem 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 0.25rem;
}
.sidebar-group-label:first-child { margin-top: 0; }

.sidebar-session {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 0.375rem 0 0.75rem;
    border-radius: 8px;
    margin: 0 0.375rem;
    transition: background .12s;
}
.sidebar-session:hover { background: var(--bg-surface-2); }
.sidebar-session.active { background: var(--bg-surface-2); }

.sidebar-session-link {
    flex: 1;
    padding: 0.4rem 0.25rem 0.4rem 0.125rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.sidebar-session.active .sidebar-session-link { color: var(--accent); font-weight: 500; }

.sidebar-session-actions {
    flex-shrink: 0;
    display: none;
    align-items: center;
}
.sidebar-session:hover .sidebar-session-actions { display: flex; }

.sidebar-session-btn {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); border-radius: 5px;
    transition: background .12s, color .12s;
    padding: 0;
}
.sidebar-session-btn:hover { background: var(--bg-surface-3, var(--border)); color: var(--text-primary); }
/* Touch: hover doesn't exist, so the per-session actions (rename/delete) would be unreachable — keep
   them always visible and grow the buttons to the 44px minimum tap target (§12). */
@media (pointer: coarse) {
    .sidebar-session-actions { display: flex; }
    .sidebar-session-btn { width: 44px; height: 44px; }
}

/* Session rename input */
.sidebar-session-rename {
    flex: 1;
    padding: 0.25rem 0.375rem;
    font-size: 0.8125rem;
    background: var(--bg-input, var(--bg-surface-2));
    border: 1px solid var(--accent);
    border-radius: 5px;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

/* Sidebar nav footer */
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 0.5rem 0;
}

/* QuickGrid data tables (Team, …) — styled with the app tokens */
.k-grid-wrap { overflow-x: auto; }
.k-grid { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.k-grid thead th {
    text-align: left; font-weight: 600; color: var(--text-muted);
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.02em;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.k-grid tbody td {
    padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.k-grid tbody tr:hover { background: var(--bg-hover); }
.k-grid .col-title-text { color: var(--text-muted); }
.k-grid .col-sort-button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.k-grid-wrap nav[role="navigation"],
.k-grid-wrap .paginator { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.8rem; color: var(--text-muted); }

/* Hide placeholder rows whose cells are ALL empty (e.g. QuickGrid pagination padding).
   A real row always has at least one non-empty cell (the member name), so :not(:has(td:not(:empty)))
   never matches it — unlike tr:has(td:empty), which would wrongly hit rows with an empty
   owner/actions cell. */
.k-grid tbody tr:not(:has(td:not(:empty))) { display: none; }

/* Responsive: collapse the grid into stacked cards on narrow screens. */
@media (max-width: 640px) {
    .k-grid, .k-grid tbody, .k-grid tbody tr, .k-grid tbody td { display: block; width: 100%; }
    .k-grid thead { display: none; }
    .k-grid tbody tr {
        margin-bottom: 0.75rem; padding: 0.6rem 0.75rem;
        border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface);
    }
    .k-grid tbody td { padding: 0.3rem 0; border: none; }
    .k-grid tbody td:empty { display: none; }   /* drop empty owner/actions cells in card view */
}

/* Org switcher (multi-membership) — sits above the user footer */
.org-switcher { position: relative; padding: 0 0.875rem 0.25rem; }
.org-switcher-current {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; padding: 0.375rem 0.5rem;
    background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 8px;
    color: var(--text-primary); font-size: 0.78rem; font-weight: 500; cursor: pointer;
}
.org-switcher-current:hover { background: var(--bg-hover); }
.org-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-switcher-menu {
    position: absolute; left: 0.875rem; right: 0.875rem; bottom: calc(100% - 0.25rem);
    margin-bottom: 4px; z-index: 20;
    background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px; max-height: 240px; overflow-y: auto;
}
.org-switcher-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    width: 100%; padding: 0.4rem 0.5rem; border: none; border-radius: 6px;
    background: none; color: var(--text-primary); font-size: 0.78rem; text-align: left; cursor: pointer;
}
.org-switcher-item:hover:not(:disabled) { background: var(--bg-hover); }
.org-switcher-item.is-current { color: var(--accent); font-weight: 600; cursor: default; }
.org-switcher-item.is-loading { color: var(--text-muted); cursor: default; }

.sidebar-user-footer {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
}
.sidebar-user-info  { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sidebar-user-name  { font-size: 0.8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-email { font-size: 0.7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role  { font-size: 0.68rem; color: var(--accent); font-weight: 500; }

/* Bell button */
.bell-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); border-radius: 8px;
    transition: background .15s, color .15s;
    position: relative;
}
.bell-btn:hover:not(:disabled) { background: var(--bg-surface-2); color: var(--text-primary); }
.bell-btn:disabled { opacity: 0.45; cursor: default; }
.bell-btn.active { background: var(--bg-surface-2); color: var(--text-primary); }

/* Unread count badge */
.bell-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 3px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem; font-weight: 700; line-height: 16px;
    border-radius: 8px;
    text-align: center;
    pointer-events: none;
}

/* Sidebar backdrop: hidden on desktop */
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }

/* Sidebar brand: hidden on desktop */
.sidebar-brand { display: none; }

/* usage-dropdown-hidden: hides the dropdown on desktop when closed.
   Use !important to beat .usage-dropdown { display: flex } which has equal specificity but comes later. */
.usage-dropdown-hidden { display: none !important; }


/* ── Collapsed layout: contextual panel becomes an off-canvas drawer ──────────
   Single breakpoint (regole_sviluppo_ui.md §5). The rail stays visible; the panel slides in from
   the edge handle (§14.2). Tablet + phone share this state. */
@media (max-width: 1024px) {
    .header-brand { flex: 1; }
    .header-pinned { margin-left: 0; }

    /* Show backdrop on mobile (invisible/non-interactive until .visible) */
    .sidebar-backdrop { display: block; pointer-events: none; }

    /* Sidebar becomes a fixed overlay panel on mobile */
    .app-sidebar {
        position: fixed;
        top: 0; left: 0;
        width: min(280px, 85vw);
        height: 100dvh;
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        z-index: 300;
        transform: translateX(-110%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
    }
    .app-sidebar.open { transform: translateX(0); }

    /* Sidebar brand: only visible on mobile */
    .sidebar-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1rem;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
    }
    .sidebar-close-btn {
        display: flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        background: none; border: none; cursor: pointer;
        color: var(--text-muted); border-radius: 6px;
        transition: background .15s;
    }
    .sidebar-close-btn:hover { background: var(--bg-surface-2); }
}


/* ── Sidebar navigation links (visible on desktop + mobile) ─────────────── */
.sidebar-divider { height: 1px; background: var(--border); margin: 4px 0; flex-shrink: 0; }

.sidebar-link {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.875rem;
    font-size: 0.875rem; color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
    margin: 0 0.375rem;
    transition: background .1s, color .1s;
}
.sidebar-link:hover { background: var(--bg-surface-2); color: var(--text-primary); }

.sidebar-logout {
    display: flex; align-items: center; gap: 0.5rem;
    width: calc(100% - 0.75rem); margin: 0 0.375rem;
    padding: 0.55rem 0.5rem;
    font-size: 0.875rem; color: #ef4444;
    background: none; border: none; cursor: pointer;
    border-radius: 8px;
    transition: background .1s;
    text-align: left;
}
.sidebar-logout:hover { background: var(--bg-surface-2); }

.app-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Share the width with the right dock: reserve its open width (set inline by MainLayout) so the
       dock sits beside the page instead of over it. Animates with the dock's slide. */
    margin-right: var(--dock-gutter, 0);
    transition: margin-right .3s ease;
}
/* Suppress the animation while the dock is being resized so the edge tracks the handle (no lag). */
.app-main.no-anim { transition: none; }
/* Mobile: the dock is a full-screen modal — never reserve a gutter. */
@media (max-width: 720px) {
    .app-main { margin-right: 0; }
}


/* ── Header user menu ────────────────────────────────────────────────────── */
.header-user-menu { position: relative; }

.avatar-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    color: var(--text-primary);
    transition: background .15s;
}
.avatar-btn:hover { background: var(--bg-surface-2); }

.header-username {
    font-size: 0.875rem;
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chevron-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform .15s;
}
.chevron-icon.open { transform: rotate(180deg); }

.user-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    min-width: 180px;
    z-index: 120;
    overflow: hidden;
    padding: 4px 0;
}

.user-dropdown a,
.user-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .1s;
}
.user-dropdown a:hover,
.user-dropdown button:hover { background: var(--bg-surface-2); }

.user-dropdown .btn-logout { color: #ef4444; }


/* ── Usage widget ────────────────────────────────────────────────────────── */

.usage-widget { position: relative; }

.usage-pill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.usage-pill:hover { background: var(--bg-surface-2); }
.usage-pill .usage-icon { color: var(--text-muted); flex-shrink: 0; }

.usage-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    width: 220px;
    z-index: 120;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.usage-dropdown-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.usage-row { display: flex; flex-direction: column; gap: 0.3rem; }

.usage-row-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-primary);
}
.usage-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.usage-label { font-size: 0.75rem; }

.usage-bar-bg {
    height: 6px;
    background: var(--bg-surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.usage-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width .3s ease;
}
.usage-bar-fill.usage-bar-warn   { background: #f59e0b; }
.usage-bar-fill.usage-bar-danger { background: #ef4444; }

.usage-upgrade-btn {
    display: block;
    text-align: center;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.15rem;
    transition: opacity .15s;
}
.usage-upgrade-btn:hover { opacity: 0.88; }