/* ==========================================================================
   Per-language shells: navigation model + action placement.
   Native: reference layout (title menu, Chats page). The other three re-house
   navigation, history and actions in their own idioms.
   ========================================================================== */
.grow { flex: 1; }
.card-menu { position: absolute; top: 6px; right: 6px; z-index: 30; opacity: 0; transition: opacity var(--dur); }
.tcard:hover .card-menu, .tcard:focus-within .card-menu, .trow:hover .card-menu { opacity: 1; }
.trow .card-menu { position: static; }
.chat-head .btn.cmd::after, .chat-head [data-label]::after { content: none; }
/* hide the in-page masthead nav when a shell provides global navigation */
.theme-fluent .masthead .brand, .theme-fluent .masthead .topnav, .theme-fluent .masthead .profile,
.theme-material .masthead .brand, .theme-material .masthead .topnav, .theme-material .masthead .profile,
.theme-glass .masthead .brand, .theme-glass .masthead .topnav, .theme-glass .masthead .profile { display: none; }
.theme-fluent .tasks .masthead, .theme-material .tasks .masthead, .theme-glass .tasks .masthead { display: none; }
.theme-fluent .newtab .masthead, .theme-material .newtab .masthead, .theme-glass .newtab .masthead { display: none; }
.theme-fluent .chat-head .profile, .theme-material .chat-head .profile, .theme-glass .chat-head .profile, .theme-fluent .snav-top, .theme-material .snav-top, .theme-glass .snav-top { display: none; }
.theme-fluent .newtab .hero, .theme-material .newtab .hero, .theme-glass .newtab .hero { padding-top: 80px; }

/* ---------------- Fluent: suite header + navigation pane ------------------ */
.fl-shell { display: flex; flex-direction: column; height: 100%; }
.fl-suite { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 4px; background: #0f6cbd; color: #fff; flex-shrink: 0; }
.dark .fl-suite { background: #115ea3; }
.fl-suite .btn.icon-btn { color: #fff; } .fl-suite .btn.icon-btn:hover { background: rgba(255,255,255,.14); }
.fl-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: #fff; padding: 0 8px; }
.fl-brand .icon { width: 20px; height: 20px; }
.fl-crumb { font-size: 14px; opacity: .85; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.35); }
.fl-search { display: inline-flex; align-items: center; gap: 8px; height: 32px; width: 320px; padding: 0 12px; border-radius: 4px; background: rgba(255,255,255,.92); color: #616161; font-size: 14px; text-align: left; }
.fl-search:hover { background: #fff; }
.fl-suite .avatar-btn { color: #fff; } .fl-suite .avatar-btn:hover { background: rgba(255,255,255,.14); } .fl-suite .avatar-btn .av { width: 28px; height: 28px; }
.fl-row { display: flex; flex: 1; min-height: 0; }
.fl-nav { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; padding: 8px; background: #f0f0f0; border-right: 1px solid var(--border); overflow-y: auto; transition: width var(--dur-slow); }
.dark .fl-nav { background: #262626; }
.fl-nav.collapsed { width: 48px; padding: 8px 4px; }
.fl-nav.collapsed .fl-item span, .fl-nav.collapsed .fl-sep { display: none; }
.fl-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--foreground); position: relative; text-align: left; width: 100%; }
.fl-item .icon { color: #616161; width: 18px; height: 18px; flex-shrink: 0; }
.fl-item:hover { background: #e6e6e6; } .dark .fl-item:hover { background: #333; }
.fl-item[aria-current="page"], .fl-item[aria-pressed="true"] { background: #e6e6e6; } .dark .fl-item[aria-current="page"] { background: #333; }
.fl-item[aria-current="page"]::before, .fl-item[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: #0f6cbd; }
.fl-sep { height: 1px; background: var(--border); margin: 8px 4px; }
.fl-hist { display: flex; flex-direction: column; gap: 1px; }
.fl-h { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 6px 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #616161; }
.fl-sub { padding: 6px 10px 2px; font-size: 11px; color: #8a8a8a; font-weight: 600; }
.fl-empty { padding: 4px 10px; font-size: 13px; color: #8a8a8a; }
.fl-chat { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 10px; border-radius: 4px; font-size: 13px; color: var(--foreground); position: relative; }
.fl-chat .icon { color: #616161; flex-shrink: 0; } .fl-chat .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-chat:hover { background: #e6e6e6; } .dark .fl-chat:hover { background: #333; }
.fl-chat[aria-current="page"] { background: #e6e6e6; font-weight: 600; } .fl-chat[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: #0f6cbd; }
.fl-chat .card-menu { position: static; width: 24px; height: 24px; }
.fl-main { flex: 1; min-width: 0; position: relative; background: var(--background); overflow: hidden; display: flex; flex-direction: column; }
.fl-main > * { flex: 1; min-height: 0; }
/* Fluent command bar: labelled commands instead of bare icons */
.theme-fluent .chat-head { height: 48px; padding: 0 8px; gap: 2px; }
.theme-fluent .chat-head .btn.icon-btn[data-label] { width: auto; padding: 0 10px; gap: 6px; font-size: 14px; font-weight: 600; color: var(--foreground); }
.theme-fluent .chat-head .btn.icon-btn[data-label]::after { content: attr(data-label); }
.theme-fluent .chat-head .btn.icon-btn[data-label] .icon { color: #0f6cbd; }
.theme-fluent .chat-head .share { order: 5; } .theme-fluent .chat-head .grow { order: 4; }
.theme-fluent .sp-header { background: var(--surface-primary); }

/* ---------------- Material: navigation rail + app bar + list-detail --------- */
.md-shell { display: flex; height: 100%; }
.md-rail { width: 80px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 16px; background: var(--m-surface-1, #f7f2fa); }
.md-fab { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--m-primary-container, #eaddff); color: var(--m-on-primary-container, #21005d); box-shadow: var(--shadow-md); margin-bottom: 20px; transition: box-shadow var(--dur); }
.md-fab:hover { box-shadow: var(--shadow-lg); }
.md-dest { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; font-size: 12px; font-weight: 500; color: var(--m-on-surface-variant, #49454f); letter-spacing: .04em; }
.md-dest .icon { width: 24px; height: 24px; padding: 4px 16px; box-sizing: content-box; border-radius: 16px; transition: background-color var(--dur); }
.md-dest:hover .icon { background: var(--accent); }
.md-dest[aria-current="page"] .icon, .md-dest[aria-pressed="true"] .icon { background: var(--m-secondary-container, #e8def8); color: var(--m-on-secondary-container, #1d192b); }
.md-dest[aria-current="page"] { color: var(--m-on-surface, #1d1b20); }
.md-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-appbar { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 16px 0 24px; background: var(--m-surface-2, #f3edf7); flex-shrink: 0; }
.md-title { font-size: 22px; font-weight: 400; color: var(--m-on-surface, #1d1b20); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-body { flex: 1; min-height: 0; display: flex; }
.md-list { width: 300px; flex-shrink: 0; overflow-y: auto; padding: 12px 8px; background: var(--m-surface-1, #f7f2fa); border-right: 1px solid var(--m-outline-variant, #cac4d0); }
.md-hist { display: flex; flex-direction: column; gap: 2px; }
.md-h { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 8px 0 16px; font-size: 14px; font-weight: 500; color: var(--m-primary, #6750a4); }
.md-sub { padding: 8px 16px 4px; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--m-on-surface-variant, #49454f); }
.md-empty { padding: 4px 16px; font-size: 13px; color: var(--m-on-surface-variant, #49454f); }
.md-chat { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 16px; border-radius: 24px; font-size: 14px; color: var(--m-on-surface, #1d1b20); position: relative; }
.md-chat .icon { color: var(--m-on-surface-variant, #49454f); width: 18px; height: 18px; flex-shrink: 0; }
.md-chat .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-chat:hover { background: var(--accent); }
.md-chat[aria-current="page"] { background: var(--m-secondary-container, #e8def8); color: var(--m-on-secondary-container, #1d192b); font-weight: 500; }
.md-chat .card-menu { position: static; width: 32px; height: 32px; }
.md-main { flex: 1; min-width: 0; position: relative; background: var(--background); overflow: hidden; display: flex; flex-direction: column; }
.md-main > * { flex: 1; min-height: 0; }
.theme-material .chat-head { background: transparent; height: 56px; }
.theme-material .card-menu { opacity: 1; background: var(--m-surface-2, #f3edf7); }
#toaster.md-snack { top: auto; bottom: 24px; }

/* ---------------- Liquid Glass: floating source list ------------------------ */
.gl-shell { display: flex; height: 100%; gap: 0; }
.gl-sidebar { width: 264px; flex-shrink: 0; margin: 14px 0 14px 14px; padding: 12px; border-radius: 28px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.42); backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45), 0 30px 60px -30px rgba(15,23,42,.45); overflow-y: auto; }
.dark .gl-sidebar { background: rgba(20,26,40,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.gl-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.gl-group { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.gl-h { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); }
.gl-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--foreground); text-align: left; width: 100%; transition: background-color var(--dur), box-shadow var(--dur); }
.gl-item .icon { color: var(--muted-foreground); }
.gl-item:hover { background: rgba(255,255,255,.55); }
.gl-item[aria-current="page"], .gl-item[aria-pressed="true"] { background: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(15,23,42,.45); }
.gl-item[aria-current="page"] .icon { color: #0a84ff; }
.dark .gl-item:hover, .dark .gl-item[aria-current="page"] { background: rgba(255,255,255,.14); box-shadow: none; }
.gl-hist { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.gl-sub { padding: 6px 12px 2px; font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
.gl-empty { padding: 4px 12px; font-size: 13px; color: var(--muted-foreground); }
.gl-chat { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 4px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--foreground); position: relative; }
.gl-chat .icon { color: var(--muted-foreground); flex-shrink: 0; } .gl-chat .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-chat:hover { background: rgba(255,255,255,.55); }
.gl-chat[aria-current="page"] { background: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(15,23,42,.45); }
.dark .gl-chat:hover, .dark .gl-chat[aria-current="page"] { background: rgba(255,255,255,.14); box-shadow: none; }
.gl-chat .card-menu { position: static; width: 24px; height: 24px; opacity: 0; }
.gl-chat:hover .card-menu { opacity: 1; }
.gl-foot { display: flex; align-items: center; gap: 8px; padding: 8px 6px 4px; border-top: 1px solid rgba(15,23,42,.08); margin-top: 6px; }
.gl-foot .avatar-btn { border-radius: 999px; }
.gl-name { font-size: 13px; font-weight: 600; }
.gl-main { flex: 1; min-width: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.gl-main > * { flex: 1; min-height: 0; }
.theme-glass .main .chat-pane, .theme-glass .main .side-pane { margin: 0; }
.theme-glass .main { padding: 14px; }
.theme-glass .tasks, .theme-glass .projects-page, .theme-glass .settings, .theme-glass .newtab { margin: 14px 14px 14px 14px; height: calc(100% - 28px); border-radius: 30px; background: rgba(255,255,255,.42); backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45), 0 30px 60px -30px rgba(15,23,42,.45); }
.dark.theme-glass .tasks, .dark.theme-glass .projects-page, .dark.theme-glass .settings, .dark.theme-glass .newtab { background: rgba(20,26,40,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.theme-glass .settings .snav { background: transparent; }
.theme-material .chat-head .crumb { display: none; }
.theme-material .chat-head .share { margin-left: auto; }