/* ════════════════════════════════════════════════════════════════════════
   study-rail.css — two sidebars on the desktop Khio AI shell (2026-09-27).

   The layout of ChatGPT's desktop app, which the user sent as the example:
   a narrow icon rail on the far left holds the sections (Ask AI, Co-Writer,
   Artifacts, and Settings at the foot), and the panel beside it (the
   existing .study-sidebar, outlined against the rail) holds what is IN them: the workspace
   switcher, New chat and Recents, with the account row at the bottom.
   Hiding the panel leaves the rail, instead of the old 76px icon sidebar.

   Scope: body.khio-desktop (desktop pointer, 1024px and up, never an iPad)
   and a Khio AI view. Never inside an old study set (.detail-active): that
   view collapses the sidebar into its own method icons, and the set tours
   depend on it (CLAUDE.md, Study frontend 6). Phones keep their drawer.
   The rail markup is in study.html; study-deeptutor.js _renderRail fills
   #khioRailSections.

   Two surfaces and two radii (2026-09-28, "The coloring isnt consistent the
   rounding edges arent aswell": the rail was a third grey between the white
   panel and the page, and the panel rounded one corner only). The rail and
   the page are one canvas, the chat's own --dt-glass-bg-color, and the
   panel is the one card on it. Radii are the ones the shell's pages already
   use (Settings: 16px cards, 10px buttons and fields): 16px for the panel
   and the card in it, 10px for everything you click in the rail and panel.
   ════════════════════════════════════════════════════════════════════════ */

.khio-rail { display: none; }
#navKhioAI .khio-panel-new { display: none; }

/* The canvas, painted on the layout so the gaps around the panel match it. */
body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) { background: var(--dt-glass-bg-color) !important; }

body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) .khio-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 60px;
    width: 60px;
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    padding: 12px 0 14px;
    box-sizing: border-box;
    z-index: 51;
}
.khio-rail-sections { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; }
.khio-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Every rail button is a 38px square with an 18px line icon in a muted grey;
   the active section is a soft tile with the icon in ink, the way the
   example marks Home. Labels are hidden, the title attribute is the tooltip. */
html body .study-layout .khio-rail .khio-rail-btn,
html body .study-layout .khio-rail .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(17, 17, 20, .5) !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
html body .study-layout .khio-rail .nav-link-label { display: none !important; }
html body .study-layout .khio-rail .khio-rail-btn[hidden] { display: none !important; }
html body .study-layout .khio-rail .khio-rail-btn svg,
html body .study-layout .khio-rail .nav-link svg { width: 18px !important; height: 18px !important; stroke-width: 1.75 !important; opacity: 1 !important; color: inherit !important; }
html body .study-layout .khio-rail .khio-rail-btn:hover,
html body .study-layout .khio-rail .nav-link:hover { background: rgba(17, 17, 20, .06) !important; color: #111114 !important; }
html body .study-layout .khio-rail .nav-link.active {
    background: rgba(17, 17, 20, .075) !important;
    color: #111114 !important;
}
html body .study-layout .khio-rail .khio-rail-btn:focus-visible,
html body .study-layout .khio-rail .nav-link:focus-visible { outline: 2px solid var(--k-blue, #0a84ff); outline-offset: 2px; }

/* The panel: a white card on the canvas, outlined and rounded all round, the
   section rows gone (they are the rail now), New chat on top, and Recents
   as plain titles. */
body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) .study-sidebar {
    margin: 8px 0;
    height: calc(100vh - 16px);
    height: calc(100dvh - 16px);
    border: 1px solid rgba(17, 17, 20, .09) !important;
    border-radius: 16px;
    box-sizing: border-box;
}
html body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) .sidebar-premium-card { border-radius: 16px !important; }
html body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) .sidebar-premium-card-cta,
html body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) .sidebar-collapse-btn { border-radius: 10px !important; }
html :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) > .nav-link[data-section]:not(.khio-panel-new),
html :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) > .nav-link[data-study-view] { display: none !important; }
html :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) > .khio-panel-new {
    display: flex !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    color: #111114 !important;
    margin-bottom: 14px !important;
}
html :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) > .khio-panel-new:hover { background: rgba(17, 17, 20, .05) !important; }
html :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) > .khio-panel-new .nav-link-label { font-weight: 500 !important; font-size: 14.5px !important; }
html :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) > .khio-panel-new svg { width: 17px !important; height: 17px !important; stroke-width: 1.75 !important; }
:is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) .dt2-recents-head {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(17, 17, 20, .45);
}
:is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) .dt2-recents-row { padding: 7px 10px; border-radius: 10px; }
:is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) .dt2-recents-row-title { font-size: 14.5px; }

/* Hidden panel: the rail is the whole sidebar. The shell's own collapsed
   state (the 76px icon sidebar) still applies inside an old study set. */
body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active).sidebar-collapsed .study-sidebar { display: none !important; }

/* The chats panel belongs to the Ask AI chat and shows nowhere else (James
   2026-09-30: "should only show up when ur in askai"; before that, 09-29,
   for an open artifact and for Settings). Artifacts, Co-Writer and Settings
   take the whole width and the rail stays, so the chats are one click away.
   Nothing is saved: the panel's own shown-or-hidden choice is untouched, so
   the chat puts it back as it was. The rail's top button stays where it is
   (James 2026-10-01: "the side nav bar loses the top icon when u go to
   artifacts"); here it opens the chat with its panel showing
   (study-deeptutor.js _renderRail). The chat is the one view whose layout
   carries .dt2-section-chat. */
body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active):not(.dt2-section-chat):not(.khio-panel-on) .study-sidebar { display: none !important; }
/* Space and Keeps have a panel of their own (James 2026-10-03: "an extended
   version of this side bar for when ur in keeps or space"): .khio-panel-on,
   set by study-deeptutor.js _renderRail, which fills it with their spaces,
   pages and Keeps where the chat lists its Recents.
   .kp-sb-open is the same panel opened as the phone's drawer for the Khio
   chat (one-thread web, public/css/shared/khio-page.css), and
   .khio-rail-flyout the panel a rail icon opens on hover (study-deeptutor.js
   _flyOpen), so their rows wear these exact rules too. */
:is(body.khio-desktop .study-layout.khio-panel-on #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) .khio-panel-row { gap: 9px; }
.khio-panel-row-icon { flex: 0 0 18px; width: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: rgba(17, 17, 20, .5); }
.khio-panel-row-icon svg { width: 15px; height: 15px; stroke-width: 1.75; }
:is(body.khio-desktop .study-layout.khio-panel-on #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) .dt2-recents-head { margin-top: 10px; }
html[data-theme="dark"] .khio-panel-row-icon { color: rgba(245, 244, 240, .5); }
/* With the panel gone the rail is all there is, so it says where you are:
   the gear is lit in Settings the way a section is lit in its own view. */
html body.in-settings .study-layout .khio-rail .khio-rail-foot .khio-rail-btn:not(#khioRailInstall) { background: rgba(17, 17, 20, .075) !important; color: #111114 !important; }
html[data-theme="dark"] body.in-settings .study-layout .khio-rail .khio-rail-foot .khio-rail-btn:not(#khioRailInstall) { background: rgba(255, 255, 255, .08) !important; color: #f5f4f0 !important; }

/* Dark: the same canvas (black, the chat's) with the panel a step above it,
   outlined as in light. */
html[data-theme="dark"] body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) .study-sidebar { background: #141416 !important; border-color: rgba(255, 255, 255, .09) !important; }
html[data-theme="dark"] body .study-layout .khio-rail .khio-rail-btn,
html[data-theme="dark"] body .study-layout .khio-rail .nav-link { color: rgba(245, 244, 240, .5) !important; }
html[data-theme="dark"] body .study-layout .khio-rail .khio-rail-btn:hover,
html[data-theme="dark"] body .study-layout .khio-rail .nav-link:hover,
html[data-theme="dark"] body .study-layout .khio-rail .nav-link.active { background: rgba(255, 255, 255, .08) !important; color: #f5f4f0 !important; }
html[data-theme="dark"] :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) > .khio-panel-new { color: #f5f4f0 !important; }
html[data-theme="dark"] :is(body.khio-desktop .study-layout.khio-ai-nav-on:not(.detail-active) #navKhioAI, body .study-layout.kp-sb-open #navKhioAI, body .khio-rail-flyout > .khio-flyout-nav) .dt2-recents-head { color: rgba(245, 244, 240, .44); }

/* The rail's hover flyout (one-thread web, computers): a section's panel,
   opened beside the rail by hovering or focusing its icon (study-deeptutor.js
   _flyOpen). The panel's own card: white, outlined, 16px corners. */
.khio-rail-flyout {
    position: fixed; z-index: 1300; top: 8px; bottom: 8px; width: 300px; box-sizing: border-box;
    display: flex; flex-direction: column; padding: 14px 10px 12px; overflow-y: auto; overscroll-behavior: contain;
    background: #ffffff; border: 1px solid rgba(17, 17, 20, .09); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17, 17, 20, .05), 0 12px 32px rgba(17, 17, 20, .12);
    font-family: var(--k-sans, 'Inter', system-ui, sans-serif); color: #111114;
    opacity: 0; transform: translateX(-4px); transition: opacity .14s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}
.khio-rail-flyout[hidden] { display: none; }
.khio-rail-flyout.is-open { opacity: 1; transform: none; }
.khio-flyout-title { padding: 2px 10px 10px; font: 500 19px/1.2 var(--k-display, Georgia, serif); letter-spacing: -.01em; }
.khio-flyout-nav { display: flex; flex-direction: column; min-height: 0; }
.khio-flyout-nav .dt2-recents-list { display: flex; flex-direction: column; }
.khio-flyout-nav .dt2-recents-row { display: flex; align-items: center; cursor: pointer; color: inherit; }
.khio-flyout-nav .dt2-recents-row:hover { background: rgba(17, 17, 20, .05); }
.khio-flyout-nav .dt2-recents-row-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khio-flyout-nav .khio-panel-new { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font: 500 14.5px/1.3 var(--k-sans, "Inter", system-ui, sans-serif) !important; }
.khio-flyout-nav .khio-panel-new:hover { background: rgba(17, 17, 20, .05); }
html[data-theme="dark"] .khio-flyout-nav .khio-panel-new:hover { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .khio-rail-flyout { background: #141416; border-color: rgba(255, 255, 255, .09); color: #f5f4f0; box-shadow: 0 12px 32px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .khio-flyout-nav .dt2-recents-row:hover { background: rgba(255, 255, 255, .06); }
@media (prefers-reduced-motion: reduce) { .khio-rail-flyout { transition: none; } }