.shell-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr); block-size: 100dvh; overflow: hidden; }
.shell-main { min-inline-size: 0; overflow: auto; }
.shell-sidebar { position: sticky; inset-block-start: 0; block-size: 100dvh; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s3); background: var(--sidebar); border-inline-end: 1px solid var(--border); z-index: 50; min-inline-size: 0; }
.shell-brand { display: flex; align-items: center; justify-content: space-between; min-block-size: 40px; }
.shell-brand a { color: var(--text); text-decoration: none; padding-inline: var(--s2); }
.shell-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 44px; block-size: 44px; padding: var(--s2); border: 0; background: transparent; color: var(--text); border-radius: var(--radius-control); }
.shell-sidebar svg, .shell-mobilebar svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.shell-destinations { display: grid; gap: var(--s1); }
.shell-row { display: flex; align-items: center; gap: var(--s3); inline-size: 100%; min-block-size: 44px; padding: var(--s2) var(--s3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); text-align: start; text-decoration: none; cursor: pointer; }
.shell-row:hover, .shell-icon:hover { background: var(--hover); }
.shell-row[aria-current="page"], .shell-chat-row a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-strong); box-shadow: inset 3px 0 var(--primary); font-weight: 600; }
[dir="rtl"] .shell-row[aria-current="page"], [dir="rtl"] .shell-chat-row a[aria-current="page"] { box-shadow: inset -3px 0 var(--primary); }
.shell-new, .shell-new:hover { background: var(--primary); color: var(--on-primary); }
.shell-new:hover { background: var(--primary-hover); }
.shell-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.shell-label kbd { float: inline-end; color: var(--text-muted); font: var(--fs-eyebrow) var(--font); }
.shell-sidebar hr { inline-size: 100%; border: 0; border-block-start: 1px solid var(--border); margin-block: var(--s2); }
.shell-recents { flex: 1; min-block-size: 0; overflow: auto; border-block-start: 1px solid var(--border); padding-block-start: var(--s3); }
.shell-recents h2 { color: var(--text-muted); font-size: var(--fs-meta); padding-inline: var(--s3); }
.shell-chat-row { display: flex; align-items: center; position: relative; }
.shell-chat-row > a { flex: 1; min-inline-size: 0; color: var(--text); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--radius-control); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); }
.shell-chat-row:hover { background: var(--hover); }
.shell-chat-more summary { cursor: pointer; list-style: none; padding: var(--s2); opacity: 0; }
.shell-chat-row:hover summary, .shell-chat-row:focus-within summary, .shell-chat-more[open] summary { opacity: 1; }
.shell-chat-actions { position: absolute; inset-inline-end: 0; inset-block-start: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); box-shadow: var(--shadow-pop); padding: var(--s2); z-index: 1; }
.shell-chat-actions button { display: block; inline-size: 100%; text-align: start; }
.shell-account { position: relative; margin-block-start: auto; border-block-start: 1px solid var(--border); padding-block-start: var(--s2); }
.shell-avatar { display: grid; place-items: center; inline-size: 30px; block-size: 30px; flex: none; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); font-size: var(--fs-meta); }
.shell-account-menu { position: absolute; inset-block-end: calc(100% + var(--s2)); inset-inline-start: 0; inline-size: 240px; max-block-size: 75dvh; overflow: auto; display: grid; gap: var(--s2); background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-pop); border-radius: var(--radius-card); padding: var(--s4); }
.shell-account-menu a { padding-block: var(--s1); }
.shell-account-menu label { font-size: var(--fs-meta); }
.shell-account-menu p { margin: 0; }
.shell-skeleton { block-size: 28px; margin: var(--s2); border-radius: var(--radius-control); background: var(--track); }
.shell-mobilebar, .shell-scrim { display: none; }
html[data-sidebar="collapsed"] .app-shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0,1fr); }
html[data-sidebar="collapsed"] .shell-sidebar { padding-inline: var(--s2); }
html[data-sidebar="collapsed"] .shell-sidebar .shell-label, html[data-sidebar="collapsed"] .shell-recents { display: none; }
html[data-sidebar="collapsed"] .shell-row { justify-content: center; padding-inline: var(--s2); }
html[data-sidebar="collapsed"] .shell-brand { justify-content: center; }
.page-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--s4); margin-block-end: var(--s5); }
.page-header > div { min-inline-size: 0; }
.page-header p { margin-block: var(--s2) 0; color: var(--text-muted); max-inline-size: 68ch; }
.page-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); inline-size: 100%; border-block-end: 1px solid var(--border); padding-block-end: var(--s2); margin-block-end: var(--s5); }
.page-tabs a { display: inline-flex; align-items: center; min-block-size: 44px; padding: var(--s2) var(--s3); color: var(--text-muted); text-decoration: none; border-radius: var(--radius-control); }
.page-tabs a[aria-current="page"] { color: var(--primary-strong); background: var(--primary-soft); font-weight: 600; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: var(--s4); }
#shell-palette { inline-size: min(640px,calc(100% - 32px)); }
#shell-search-results a { display: block; padding: var(--s3); border-radius: var(--radius-control); text-decoration: none; }
#shell-search-results a:hover, #shell-search-results a:focus { background: var(--primary-soft); color: var(--primary-strong); }
#shell-search-results h3 { margin-block: var(--s4) var(--s1); font-size: var(--fs-meta); color: var(--text-muted); }
.auth-shell { min-block-size: 100dvh; display: grid; place-content: center; padding: var(--gutter); }
.auth-shell > .brand { text-align: center; font-size: var(--fs-h2); margin-block-end: var(--s5); color: var(--text); text-decoration: none; }
.auth-shell .auth-card { inline-size: min(440px, calc(100vw - 2 * var(--gutter))); margin: 0; }
.reading-content { max-inline-size: var(--reading-w); }
@media (max-width: 767px) {
    .app-shell, html[data-sidebar="collapsed"] .app-shell { display: block; padding-block-start: 56px; }
    .shell-main { block-size: calc(100dvh - 56px); }
    .shell-mobilebar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 56px; padding-inline: var(--s2); background: var(--surface); border-block-end: 1px solid var(--border); z-index: 40; }
    .shell-mobilebar > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .shell-sidebar { display: none; position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(85vw,320px); block-size: 100dvh; }
    .shell-drawer-open .shell-sidebar { display: flex; }
    .shell-drawer-open .shell-scrim { display: block; position: fixed; inset: 0; inline-size: 100%; block-size: 100%; background: var(--scrim); border: 0; border-radius: 0; z-index: 49; }
    html[data-sidebar="collapsed"] .shell-sidebar .shell-label { display: block; }
    html[data-sidebar="collapsed"] .shell-recents { display: block; }
    html[data-sidebar="collapsed"] .shell-row { justify-content: start; }
    html[data-sidebar="collapsed"] .shell-brand { justify-content: space-between; }
    .shell-chat-more summary { opacity: 1; }
    .shell-main.tc-shell { block-size: calc(100dvh - 56px); }
    .page-tabs { gap: var(--s1); }
    .page-tabs a { padding-inline: var(--s2); }
}