/* ============================================================================
   KIBO v2 — SHELL: macro navigation rail (always visible).
   Coexists with the existing .app-shell/.app-body/.app-main structure and with
   the panel element (.app-sidebar), reusing its off-canvas behaviour
   on mobile. See regole_sviluppo_ui.md §6. Token-based, zero literals.
   ============================================================================ */

.krail {
    flex-shrink: 0;
    width: var(--rail);
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    z-index: 30;
}

.krail .krail-btn {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.krail .krail-btn svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.krail .krail-btn:hover { background: var(--paper); color: var(--ink); }

/* active macro-area */
.krail .krail-btn.on { background: var(--human-soft); color: var(--human-text); }
.krail .krail-btn.on::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5px;
    height: 22px;
    border-radius: 3px;
    background: var(--human);
}

/* unread badge on the rail bell (item 4) */
.krail .krail-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: var(--alert, #c62828);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    pointer-events: none;
}

/* disabled (coming-soon) macro-areas */
.krail .krail-btn.soon { opacity: .38; cursor: default; }
.krail .krail-btn.soon:hover { background: none; color: var(--ink-soft); }

/* hover tooltip label (desktop) */
.krail .krail-lbl {
    position: absolute;
    left: 52px;
    background: var(--ink);
    color: var(--card);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-4px);
    transition: .15s;
    z-index: 50;
}
.krail .krail-btn:hover .krail-lbl { opacity: 1; transform: translateX(0); }

.krail .krail-spacer { flex: 1; }

/* ── Contextual panel (reuses .app-sidebar) — v2 structure ──────────────────
   Scrollable body (per-area contextual content) + fixed "elevated" footer
   with the shared components (drop-zone + user box), present on every panel. */
.app-sidebar { width: var(--panel); overflow: hidden; }

.sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-elev {
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    padding: 0.5rem;
}

/* ── Contextual panel collapse (desktop) — reclaim the panel's width for the page ──────
   Mirrors the right dock: an edge chevron flips and slides while the panel animates to width 0.
   Desktop only (≥1025px); on mobile the panel is an off-canvas drawer driven by the edge handle. */
.app-body { position: relative; }

@media (min-width: 1025px) {
    .app-sidebar { transition: width .25s cubic-bezier(.4,0,.2,1); }
    .app-sidebar.collapsed { width: 0; min-width: 0; border-right-color: transparent; }
}

/* ── Shared dock / panel edge tabs (KBW-0028) ───────────────────────────────────
   The three edge tabs — left panel collapse (desktop), left drawer handle (mobile), right dock —
   share ONE look: a slim 16×46 bordered tab on desktop, a larger 28×56 shadowed touch target on
   mobile. Only the direction differs (radius / border side / shadow offset) → --left / --right.
   Each element below adds ONLY its own anchor, animation and z-index; the visual identity and the
   desktop→mobile switch live here once. */
.k-dock-tab {
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    width: 16px; height: 46px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    cursor: pointer;
}
.k-dock-tab:hover { background: var(--paper); color: var(--ink); }
.k-dock-tab--left  { border-left: none;  border-radius: 0 8px 8px 0; }
.k-dock-tab--right { border-right: none; border-radius: 8px 0 0 8px; }

@media (max-width: 1024px) {
    /* Bigger thumb target with a shadow instead of the hairline border. Shorter than it was: at 56px
       the tab spanned both the title row and the row below it, so it sat over content on every task
       view no matter how the page was laid out (KBW-0152). 44px is still a full touch target and
       clears the head row on its own. */
    .k-dock-tab { width: 26px; height: 44px; border: none; }
    .k-dock-tab--left  { box-shadow:  2px 0 8px rgba(42, 47, 66, .10), 0 0 0 1px var(--line); }
    .k-dock-tab--right { box-shadow: -2px 0 8px rgba(42, 47, 66, .10), 0 0 0 1px var(--line); }
    .k-dock-tab--left:hover  { box-shadow:  2px 0 12px rgba(42, 47, 66, .14), 0 0 0 1px var(--line); }
    .k-dock-tab--right:hover { box-shadow: -2px 0 12px rgba(42, 47, 66, .14), 0 0 0 1px var(--line); }
}

/* Left contextual panel — desktop collapse tab (slides to the rail edge when collapsed). */
.lpanel-toggle {
    position: absolute;
    top: 12px;   /* just below the header — .app-body already starts under it (KBW-0028) */
    left: calc(var(--rail) + var(--panel));
    z-index: 31;
    transition: left .25s cubic-bezier(.4,0,.2,1), background .15s, color .15s;
}
.lpanel-toggle.collapsed { left: var(--rail); }
.lpanel-toggle svg { transition: transform .25s ease; }
.lpanel-toggle.collapsed svg { transform: rotate(180deg); }
@media (max-width: 1024px) { .lpanel-toggle { display: none; } }   /* mobile uses the drawer handle */

/* Left contextual panel — mobile drawer handle (§14.2): an off-canvas drawer opener poking from the
   rail edge (the old top-right hamburger opened a left drawer, which was counterintuitive). Shares
   .k-dock-tab; only its own fixed anchor lives here. */
.sidebar-handle { display: none; }
@media (max-width: 1024px) {
    .sidebar-handle {
        display: flex;
        position: fixed;
        left: var(--rail);
        top: 56px;   /* level with the right dock tab — tight under the 52px header (KBW-0152) */
        z-index: 31;
        transition: background .15s, left .15s, box-shadow .15s;
    }
}

/* ── Phone bottom bar (§2 / §14.2) ──────────────────────────────────────────────
   On a phone the vertical rail is hidden and macro-navigation moves under the thumb. Five slots:
   Chat · Attività (pulldown of the task views, icon follows the current one) · Notifiche (badge) ·
   Memoria · Menu (⋯ → Jobs / Impostazioni / Tema). Profile/org/logout stay in the left drawer.
   Hidden above the phone breakpoint (the rail takes over on tablet/desktop). */
.kbottom { display: none; }

/* Structural styles are inert while .kbottom is display:none, so they can live outside the query. */
.kbottom-slot { position: relative; flex: 1 1 0; display: flex; }
.kbottom-btn {
    flex: 1 1 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 2px 4px;
    background: none; border: none; cursor: pointer; text-decoration: none;
    color: var(--ink-soft); font: inherit;
}
.kbottom-btn svg {
    width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.kbottom-btn span {
    font-size: 10px; font-weight: 600; line-height: 1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Active slot — same reading as the rail's active button (accent bar + soft pill), instead of only
   tinting the glyph: the tint alone was too faint to tell where you are (KBW-0149). */
.kbottom-btn.on { color: var(--human-text); }
.kbottom-btn.on svg {
    background: var(--human-soft);
    border-radius: 10px;
    padding: 2px 10px;
    box-sizing: content-box;   /* keep the 22px glyph and grow the pill around it */
}
.kbottom-btn.on::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--human);
}
.kbottom-badge {
    position: absolute; top: 2px; right: calc(50% - 20px);
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px; background: var(--alert, #c62828); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
}

/* Pulldown opening upward from a slot (views / overflow sheet). */
.kbottom-menu-backdrop { position: fixed; inset: 0; z-index: 41; }
.kbottom-menu {
    position: absolute; bottom: calc(100% + 6px); left: 6px; z-index: 42;
    min-width: 170px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}
.kbottom-menu-end { left: auto; right: 6px; }
.kbottom-menu a, .kbottom-menu button {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 8px;
    background: none; border: none; cursor: pointer; text-decoration: none;
    color: var(--ink); font: inherit; font-size: 14px; text-align: left; width: 100%;
}
.kbottom-menu a:hover, .kbottom-menu button:hover { background: var(--paper); }
.kbottom-menu a.on { color: var(--human-text); background: var(--human-soft); }
.kbottom-menu svg {
    width: 20px; height: 20px; flex: 0 0 auto;
    stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 640px) {
    .krail { display: none; }

    .kbottom {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: flex; align-items: stretch;
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--card); border-top: 1px solid var(--line);
        box-shadow: 0 -1px 6px rgba(0, 0, 0, .06);
    }
    /* Reserve the bar's height so content (and the chat input) isn't hidden behind it. */
    .app-body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

    /* Rail gone → the drawer handle sits at the very screen edge. */
    .sidebar-handle { left: 0; }
}

/* ── Short viewports (landscape phone, KBW-0140) ───────────────────────────────
   Above 640px the bottom bar gives way to the vertical rail, but a phone on its side is only ~390px
   tall: the rail's nine entries don't fit and everything below the spacer (trash, theme, settings)
   ends up off-screen and unreachable. Let the rail scroll rather than group its entries — the extra
   pulldown would be a second navigation grammar for the same bar. The spacer collapses to a plain
   separator so the utilities follow the work areas directly. */
@media (max-height: 560px) {
    .krail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
    .krail::-webkit-scrollbar { display: none; }
    .krail .krail-btn { flex-shrink: 0; }
    .krail .krail-spacer { flex: 0 0 10px; }
    /* The tooltip sits outside the 62px rail, which the scroll container now clips. */
    .krail .krail-btn:hover .krail-lbl { opacity: 0; }
}

/* ── Collapse ≤1024: the rail stays visible; the panel becomes an
   off-canvas drawer sliding from the left over the rail with a backdrop (rules inherited
   from .app-sidebar in app.css). The rail tooltip labels are disabled. ───── */
@media (max-width: 1024px) {
    .krail .krail-btn:hover .krail-lbl { opacity: 0; }
}

/* ── Communications screen (item 4) ─────────────────────────────────────────── */
.comms-empty { padding: 2rem; text-align: center; color: var(--ink-soft); }
.comms-split { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 1rem; align-items: start; min-width: 0; }
/* min-width:0 on the list + items: grid/flex children default to min-width:auto, so the nowrap
   .comms-item-snip would force the list past its column (grid) or the viewport (mobile flex) instead
   of ellipsizing. Needed in BOTH layouts, so it lives on the base rules, not the media query. */
.comms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: calc(100vh - 220px); overflow-y: auto; min-width: 0; }
.comms-item { padding: .55rem .7rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; min-width: 0; }
.comms-item:hover { background: var(--paper); }
.comms-item.on { background: var(--human-soft); border-color: var(--human); }
.comms-item.unread .comms-item-title { font-weight: 700; }
.comms-item.unread::before { content: "•"; color: var(--alert, #c62828); margin-right: .3rem; }
.comms-item-title { font-size: .85rem; color: var(--ink); }
.comms-item-snip { font-size: .76rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comms-item-time { font-size: .7rem; color: var(--ink-soft); margin-top: .15rem; }
.comms-detail { padding: 1rem; border: 1px solid var(--line); border-radius: 10px; min-height: 200px; }
.comms-detail-title { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ink); }
.comms-detail-meta { font-size: .76rem; color: var(--ink-soft); margin-bottom: .8rem; }
.comms-detail-body { font-size: .9rem; color: var(--ink); white-space: pre-wrap; }
.comms-detail-empty { color: var(--ink-soft); text-align: center; padding: 2rem; }

/* Back button lives in the detail but is desktop-hidden — only the mobile fullscreen sheet (§14.5)
   needs a way back to the list; on desktop list + detail sit side by side. */
.comms-back { display: none; align-self: flex-start; margin-bottom: .6rem; }

/* ── Notifications on mobile / tablet-portrait (§14.5) ──────────────────────────
   Two fixes: (1) the list must scroll on its own instead of stacking the detail below the fold
   (the old layout left the detail off-screen and unreachable); (2) tapping a message opens the
   detail as a centred modal (like the Memory Map settings modal) over a dimmed scrim, with a back
   button, not stacked under the list. */
.comms-scrim { display: none; }

@media (max-width: 768px) {
    /* Fill the page height and let the list be the scroll container (min-width:0 is on the base rules,
       shared with the desktop grid). */
    .comms-split { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .comms-list { max-height: none; flex: 1 1 auto; max-width: 100%;}

    /* Dimmed scrim behind the centred detail modal (sits above the header at z 100). */
    .comms-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 109; }

    /* Detail = centred modal, shown only when a message is selected. */
    .comms-detail {
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: min(400px, 92vw); max-height: 82dvh; overflow-y: auto;
        z-index: 110; border-radius: 14px; background: var(--card);
        box-shadow: var(--shadow-md);
        display: none;
    }
    .comms-detail.open { display: block; }
    .comms-back { display: inline-flex; }
}