/* Preview-only read-only usage anchored below the native navigation. */
html.ysa-connected-preview .ysa-sidebar-usage{position:fixed;left:24px;bottom:max(24px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;width:56px;height:56px;min-width:0;margin:0;padding:6px;background:transparent}
html.ysa-connected-preview .ysa-sidebar-usage-trigger{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ysa-on-ink);text-align:left}
html.ysa-connected-preview .ysa-sidebar-usage-trigger:hover{background:transparent}
html.ysa-connected-preview .ysa-sidebar-usage-trigger:focus-visible{outline:2px solid var(--ysa-lime);outline-offset:3px}
html.ysa-connected-preview .ysa-sidebar-usage-rings{display:block;flex:none;width:32px;height:32px;overflow:visible}
html.ysa-connected-preview .ysa-sidebar-usage-rings circle{fill:none;stroke-width:3;transform:rotate(-90deg);transform-origin:24px 24px}
html.ysa-connected-preview .ysa-sidebar-usage-track{stroke:#d2d2c6}
html.ysa-connected-preview .ysa-sidebar-usage-period{stroke:#526b68;stroke-linecap:round}
html.ysa-connected-preview .ysa-sidebar-usage-conversations{stroke:#8b988e;stroke-linecap:round}
html.ysa-connected-preview .ysa-sidebar-usage-symbol{display:none}
html.ysa-connected-preview .ysa-sidebar-usage-label{display:none;font:500 14px/1.4 var(--ysa-font-sans)}
html.ysa-connected-preview.ysa-sidebar-rail:not(.ysa-sidebar-open) .ysa-sidebar-usage-trigger{width:44px;margin-left:0}
html.ysa-connected-preview.ysa-sidebar-rail:not(.ysa-sidebar-open) .ysa-sidebar-usage-label{display:none}
html.ysa-connected-preview .ysa-sidebar-usage-details{position:fixed;z-index:1900;width:320px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:16px;border:1px solid var(--ysa-line);border-radius:16px;background:var(--ysa-sheet);color:var(--ysa-ink);font:400 14px/1.5 var(--ysa-font-sans);box-shadow:var(--ysa-shadow-menu);overflow-wrap:anywhere}
html.ysa-connected-preview .ysa-sidebar-usage-details[hidden]{display:none}
html.ysa-connected-preview .ysa-sidebar-usage-row{display:grid;grid-template-columns:8px minmax(0,1fr);align-items:baseline;gap:4px 8px}
html.ysa-connected-preview .ysa-sidebar-usage-row.is-conversations{margin-top:16px;padding-top:16px;border-top:1px solid var(--ysa-line)}
html.ysa-connected-preview .ysa-sidebar-usage-dot{width:8px;height:8px;border-radius:50%;background:#0f2523;border:1px solid var(--ysa-ink)}
html.ysa-connected-preview .ysa-sidebar-usage-row.is-conversations .ysa-sidebar-usage-dot{background:#647166}
html.ysa-connected-preview .ysa-sidebar-usage-value{grid-column:2;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
html.ysa-connected-preview :is(.ysa-sidebar-usage-note,.ysa-sidebar-usage-dates){margin:8px 0 0 16px;font-size:14px;line-height:1.5;color:var(--ysa-text-muted)}
html.ysa-connected-preview .ysa-sidebar-usage-footer{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--ysa-line);font-size:14px;line-height:1.5;color:var(--ysa-text-muted)}

/* Keep the avatar above the separate bottom control, including short windows. */
@media(min-width:721px){
 html.ysa-connected-preview:not(.ysa-sidebar-rail) .ysa-sidebar-usage-details,html.ysa-connected-preview.ysa-sidebar-open .ysa-sidebar-usage-details{left:min(calc(36px + var(--ysa-sidebar-expanded-width)),calc(100vw - 336px))!important}
 html.ysa-connected-preview .ysa-mobile-drawer:has(.ysa-sidebar-usage){min-height:0;max-height:calc(100dvh - var(--ysa-sheet-top) - 64px - max(24px,env(safe-area-inset-bottom,0px)))}
}
/* The closed mobile menu still yields to the existing bottom navigation. */
@media(max-width:720px){
 html.ysa-connected-preview .ysa-sidebar-usage-track{stroke:#657168}
 html.ysa-connected-preview .ysa-sidebar-usage-period{stroke:#d2d2c6}
 html.ysa-connected-preview .ysa-sidebar-usage-conversations{stroke:#a7aea2}
 html.ysa-connected-preview .ysa-drawer-account:has(.ysa-sidebar-usage){display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:4px;padding-bottom:0}
 html.ysa-connected-preview .ysa-drawer-account:has(.ysa-sidebar-usage) .ysa-drawer-settings-menu{grid-column:1;grid-row:2;min-width:0}
 html.ysa-connected-preview .ysa-drawer-account:has(.ysa-sidebar-usage) .ysa-drawer-cortex-upgrade{grid-column:1/-1;grid-row:1}
 html.ysa-connected-preview .ysa-sidebar-usage{position:static;grid-column:2;grid-row:2;align-self:center;width:44px;height:54px;padding:0}
 html.ysa-connected-preview .ysa-sidebar-usage-trigger{justify-content:center}
 html.ysa-connected-preview .ysa-sidebar-usage-rings{width:20px;height:20px}
}

/* In shallow desktop windows every original menu action stays in one scroll column. */
@media(min-width:721px) and (max-height:420px){
 html.ysa-connected-preview .ysa-mobile-drawer:has(.ysa-sidebar-usage){overflow:auto;overscroll-behavior:contain}
 html.ysa-connected-preview .ysa-mobile-drawer:has(.ysa-sidebar-usage) .ysa-drawer-body{flex:none}
 html.ysa-connected-preview .ysa-mobile-drawer:has(.ysa-sidebar-usage) .ysa-drawer-primary{flex:none;overflow:visible}
 html.ysa-connected-preview .ysa-mobile-drawer:has(.ysa-sidebar-usage) .ysa-drawer-label{display:none}
 html.ysa-connected-preview .ysa-mobile-drawer:has(.ysa-sidebar-usage) .ysa-drawer-settings-popover{position:fixed;left:24px;width:min(320px,calc(100vw - 48px));bottom:calc(64px + max(24px,env(safe-area-inset-bottom,0px)));max-height:calc(100dvh - var(--ysa-sheet-top) - 64px - max(24px,env(safe-area-inset-bottom,0px)))}
}