/* Existing account and navigation shell, with Oliver's shared theme tokens. */
:root { --shell-nav-height:72px; --shell-nav-gap:12px; }
.sidebar-tools-heading { padding:16px 12px 6px; }
.sidebar-tools-heading h2 { color:var(--ux-text); font-size:22px; line-height:1.3; }
.sidebar-tools-heading p { color:var(--ux-muted); font-size:12px; margin-top:6px; }
body.ux-r311 #appScreen > .app-header .header-actions { gap:4px; }
body.ux-r311 #appScreen > .app-header .header-actions .icon-btn {
  position:relative; display:grid; place-items:center; width:44px!important; min-width:44px;
  height:44px!important; min-height:44px; padding:10px!important; border:0!important;
  border-radius:50%; background:transparent!important; box-shadow:none!important;
  color:var(--ux-text)!important; transform:none!important; filter:none!important;
  transition:background-color 160ms ease,color 160ms ease!important;
}
body.ux-r311 #appScreen > .app-header .header-actions .icon-btn svg { width:20px; height:20px; }
body.ux-r311 #appScreen > .app-header .header-actions .icon-btn:is(:active,.oliver-pressing) { background:var(--ux-soft)!important; }
body.ux-r311 #appScreen > .app-header :is(button:focus-visible) { outline:2px solid var(--primary-light)!important; outline-offset:3px; }
body.ux-r311 #appScreen > .app-header #notificationBadge {
  position:absolute; top:0; right:0; min-width:18px; width:auto; height:18px; padding:0 4px;
  display:grid; place-items:center; border:2px solid var(--ux-bg); border-radius:12px;
  background:var(--red); color:var(--ux-bg); font-size:10px; font-weight:800; line-height:1;
  box-sizing:content-box; pointer-events:none; box-shadow:none;
}
body.ux-r311 #appScreen > .app-header #notificationBadge.hidden { display:none; }
body.ux-r311 .profile-mini > .profile-avatar-actions { display:flex; align-items:center; gap:5px; flex:none; }
body.ux-r311 .profile-avatar-actions #menuToggle { width:56px!important; height:56px!important; min-width:56px; border:0!important; border-radius:50%; padding:0!important; background:transparent!important; box-shadow:none!important; }
body.ux-r311 .profile-avatar-actions #topPhoto { width:100%!important; height:100%!important; border:0!important; border-radius:50%; overflow:hidden; }
body.ux-r311 .profile-avatar-actions #topPhoto :is(img,.photo-img) { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
body.ux-r311 #businessModeToggle {
  display:grid; place-items:center; flex:none; width:44px; height:44px; min-width:44px;
  position:relative; isolation:isolate; padding:12px; border:0; border-radius:50%; background:transparent!important; color:var(--primary-light);
  cursor:pointer; touch-action:manipulation; box-shadow:none; transition:background-color 160ms ease,opacity 160ms ease;
}
body.ux-r311 #businessModeToggle::before { content:''; position:absolute; inset:5px; z-index:-1; border-radius:50%; background:var(--primary-dim); }
body.ux-r311 #businessModeToggle svg { width:20px; height:20px; }
body.ux-r311 #businessModeToggle[aria-pressed=true] { color:var(--on-primary); }
body.ux-r311 #businessModeToggle[aria-pressed=true]::before { background:var(--primary); box-shadow:0 0 0 2px var(--primary-light); }
body.ux-r311 #businessModeToggle[aria-pressed=true]::after { content:'✓'; position:absolute; right:0; bottom:2px; display:grid; place-items:center; width:15px; height:15px; border:2px solid var(--ux-bg); border-radius:50%; background:var(--green); color:var(--ux-bg); font-size:11px; font-weight:800; line-height:1; }
body.ux-r311 #businessModeToggle:is(:active,.oliver-pressing) { opacity:.75; transform:none!important; }
body.ux-r311 #businessModeToggle:disabled { opacity:.5; cursor:wait; }
body.ux-r311 #topGreeting { font-size:12px!important; line-height:1.4; margin:0 0 3px; color:var(--ux-muted); }
body.ux-r311 #topName { line-height:1.3; }

/* Native dialog supplies inert background, focus containment and Escape support. */
body.ux-r311 dialog#profileContextPopover {
  position:fixed; inset:auto 0 0!important; margin:0 auto; width:calc(100% - var(--oliver-safe-left) - var(--oliver-safe-right))!important;
  max-width:460px; max-height:calc(100dvh - var(--oliver-safe-top) - 24px)!important;
  box-sizing:border-box; padding:10px 20px max(20px,var(--oliver-safe-bottom));
  border:1px solid var(--ux-line)!important; border-bottom:0!important; border-radius:28px 28px 0 0;
  color:var(--ux-text); background:var(--ux-panel)!important; box-shadow:var(--shadow-sm)!important;
  overflow:auto; overscroll-behavior:contain; animation:profile-sheet-in 220ms cubic-bezier(.2,.8,.2,1);
}
body.ux-r311 dialog#profileContextPopover:not([open]) { display:none; }
body.ux-r311 dialog#profileContextPopover::backdrop { background:color-mix(in srgb,var(--ux-bg) 72%,transparent); }
.profile-sheet-handle { width:34px; height:4px; border-radius:4px; background:var(--ux-line); margin:0 auto 14px; }
.profile-sheet-heading { display:flex; align-items:center; gap:12px; }
.profile-sheet-heading .profile-context-identity { min-width:0; flex:1; padding:0 0 16px; }
.profile-sheet-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:10px; align-self:flex-start; color:var(--ux-muted); background:transparent; border:0; border-radius:50%; }
.profile-sheet-close svg,.profile-sheet-links svg { width:20px; height:20px; }
.profile-sheet-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; padding-bottom:8px; border-bottom:1px solid var(--ux-line); }
.profile-sheet-links button { display:flex; align-items:center; justify-content:space-between; gap:4px; text-align:left; min-height:48px; padding:8px; border:0; border-radius:12px; background:transparent; color:var(--ux-text); font-size:13px; }
.profile-sheet-links svg { flex:none; width:15px; color:var(--ux-muted); }
.profile-sheet-logout { width:100%; min-height:48px; margin-top:10px; border:0; border-radius:12px; background:transparent; color:var(--red); font-weight:600; }
body.ux-r311 #profileContextPopover :is(.profile-sheet-close,.profile-sheet-links button,.profile-sheet-logout):is(:active,:hover) { background:var(--ux-soft); }
body.ux-r311 #profileContextPopover .profile-context-open { background:transparent!important; color:var(--ux-text)!important; }
body.ux-r311 #profileContextPopover :is(.profile-context-open,.profile-sheet-links button)[aria-current=page] { background:var(--primary-dim)!important; color:var(--primary-light)!important; }
body.ux-r311 #profileContextPopover .profile-personal-return { display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:12px; margin-bottom:12px; text-align:left; border:1px solid var(--primary-light); border-radius:14px; background:var(--primary-dim); color:var(--primary-light); }
.profile-personal-return > span:nth-child(2) { flex:1; display:grid; gap:4px; }
.profile-personal-return b { font-size:14px; }
.profile-personal-return small { font-size:12px; color:var(--ux-muted); }
.profile-personal-return svg { width:22px; height:22px; }
/* Lock only background scrollers, never the sheet's own content. CSS tracks
   native dialogs and legacy sheets without observers or saved scroll offsets. */
html:has(body .sheet-bg:not(.hidden),body dialog[open],body #fabMenu:not(.hidden),body .app-confirm-dialog:not(.hidden)),
body:has(.sheet-bg:not(.hidden),dialog[open],#fabMenu:not(.hidden),.app-confirm-dialog:not(.hidden)),
body:has(.sheet-bg:not(.hidden),dialog[open],#fabMenu:not(.hidden),.app-confirm-dialog:not(.hidden)) :is(#appShell,#appScreen,.page,.chat-box) {
  overflow:hidden!important; overscroll-behavior:none!important;
}
:is(.sheet-bg,.sheet-bg .sheet,dialog[open],#fabMenu) { overscroll-behavior:contain; }
@keyframes profile-sheet-in { from { transform:translateY(32px); opacity:0; } to { transform:translateY(0); opacity:1; } }

@media(max-width:899px) {
  body.ux-r311 #appScreen { padding-bottom:calc(var(--shell-nav-height) + var(--shell-nav-gap) * 2 + var(--oliver-safe-bottom))!important; }
  body.ux-r311 #appScreen > .bottom-tabs {
    display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:2px;
    position:fixed; left:50%!important; right:auto!important; bottom:calc(var(--shell-nav-gap) + var(--oliver-safe-bottom))!important;
    width:calc(100% - 24px - var(--oliver-safe-left) - var(--oliver-safe-right))!important; max-width:520px!important;
    height:var(--shell-nav-height)!important; min-height:0; margin:0!important; padding:6px!important; box-sizing:border-box;
    border:1px solid var(--ux-line)!important; border-radius:40px!important; background:var(--ux-panel)!important;
    box-shadow:var(--shadow-sm)!important; transform:translateX(-50%)!important; backdrop-filter:none!important;
    opacity:1!important; visibility:visible!important; pointer-events:auto!important;
  }
  body.ux-r311 #appScreen > .bottom-tabs > button[data-page] {
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
    width:100%; min-width:0; height:58px; min-height:44px; padding:6px 1px!important; margin:0;
    border:0!important; border-radius:30px!important; background:transparent!important; color:var(--ux-muted)!important;
    box-shadow:none!important; transform:none!important; filter:none!important;
    transition:background-color 180ms ease,color 180ms ease!important;
  }
  body.ux-r311 #appScreen > .bottom-tabs > button[data-page]::before,
  body.ux-r311 #appScreen > .bottom-tabs > button[data-page]::after { display:none!important; }
  body.ux-r311 #appScreen > .bottom-tabs > button[data-page] svg { width:22px; height:22px; flex:none; transform:none!important; }
  body.ux-r311 #appScreen > .bottom-tabs > button[data-page] span { font-size:10px!important; line-height:14px; font-weight:600; white-space:nowrap; }
  body.ux-r311 #appScreen > .bottom-tabs > button[data-page].active { color:var(--primary-light)!important; background:var(--primary-dim)!important; }
  body.ux-r311 #appScreen > .bottom-tabs > button[data-page]:is(:active,.oliver-pressing) { background:var(--ux-soft)!important; }
  body.ux-r311 #appScreen > .bottom-tabs .nav-fab-slot { position:static!important; display:flex!important; align-items:center; justify-content:center; width:auto; height:58px; transform:none!important; }
  body.ux-r311 #appScreen > .bottom-tabs #fab { position:static!important; width:48px!important; height:48px!important; min-height:48px!important; margin:0!important; padding:0!important; border:0!important; border-radius:50%!important; box-shadow:none!important; transform:none!important; }
  body.ux-r311 #fabMenu { bottom:calc(var(--shell-nav-height) + var(--shell-nav-gap) + var(--oliver-safe-bottom) + 10px)!important; }
  /* Reuse keyboard signals from VisualViewport / native insets. No focus timers. */
  html.oliver-native-ime-visible body.ux-r311 #appScreen > .bottom-tabs,
  body.ux-r311.assistant-keyboard-open #appScreen > .bottom-tabs { display:none!important; pointer-events:none!important; }
  html.oliver-native-ime-visible body.ux-r311 #appScreen,
  body.ux-r311.assistant-keyboard-open #appScreen { padding-bottom:0!important; }
}
@media(max-width:600px) {
  body.ux-r311 #appScreen > .app-header { display:grid!important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 8px!important; padding-bottom:16px!important; }
  body.ux-r311 #appScreen > .app-header .profile-mini { display:contents; }
  body.ux-r311 #appScreen > .app-header .profile-avatar-actions { grid-column:1; grid-row:1; }
  body.ux-r311 #appScreen > .app-header .header-actions { grid-column:2; grid-row:1; }
  body.ux-r311 #appScreen > .app-header .profile-greeting { grid-column:1 / -1; grid-row:2; }
  body.ux-r311 #appScreen > .app-header #topName { font-size:22px!important; margin:0; }
}
@media(hover:hover) {
  body.ux-r311 #appScreen > .app-header .header-actions .icon-btn:hover { background:var(--ux-soft)!important; }
}
@media(prefers-reduced-motion:reduce) {
  body.ux-r311 dialog#profileContextPopover { animation:none!important; }
  body.ux-r311 #appScreen :is(.bottom-tabs button,.header-actions button,#businessModeToggle) { transition:none!important; }
}