/* ============================================
   TSB 5.0 - Collapsible Sidebar
   Uses tokens from tokens.css
   ============================================ */

/* ─── Sidebar Container ─── */
.tsb-sidebar {
    --sidebar-bg: var(--app-bg-shell, var(--bg-primary, #080808));
    --sidebar-surface: var(--app-surface-control, rgba(255,255,255,0.035));
    --sidebar-surface-hover: var(--app-surface-card-hover, rgba(255,255,255,0.05));
    --sidebar-border: var(--app-border-soft, rgba(255,255,255,0.07));
    --sidebar-border-muted: var(--app-border-muted, rgba(255,255,255,0.06));
    --sidebar-border-hover: var(--app-border-hover, rgba(255,255,255,0.12));
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    transition: width var(--duration-normal) var(--ease-out);
    z-index: 100;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    box-shadow: none;
    isolation: isolate;
    min-height: 0;
}
.tsb-sidebar::-webkit-scrollbar { display: none; }

html.light .tsb-sidebar {
    --sidebar-bg: #ffffff;
    --sidebar-surface: rgba(15, 23, 42, 0.045);
    --sidebar-surface-hover: rgba(15, 23, 42, 0.065);
    --sidebar-border: var(--app-divider-default, rgba(15, 23, 42, 0.16));
    --sidebar-border-muted: var(--app-divider-muted, rgba(15, 23, 42, 0.12));
    --sidebar-border-hover: rgba(15, 23, 42, 0.18);
    --sidebar-text-strong: #0f172a;
    --sidebar-text-main: #1f2937;
    --sidebar-text-muted: #64748b;
    --sidebar-text-faint: #7c8797;
    --sidebar-icon: #4b5563;
    --sidebar-icon-muted: #64748b;
}

.tsb-sidebar:not(.sidebar-ready) {
    transition: none;
}

body.has-sidebar:not(.sidebar-ready) {
    transition: none;
}

.tsb-sidebar > * {
    position: relative;
    z-index: 1;
}

.tsb-sidebar::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 8;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) ease;
}

.tsb-sidebar.account-scope-open::after {
    opacity: 1;
}

html.light .tsb-sidebar::after {
    background: transparent;
}

html.light .tsb-sidebar.account-scope-open::after {
    opacity: 0;
}

.tsb-sidebar.expanded {
    width: 248px;
}

/* Collapsed: allow dropdown to overflow sidebar bounds */
.tsb-sidebar:not(.expanded) {
    overflow: visible;
    overflow-y: visible;
}

/* ─── Logo Area ─── */
.sidebar-brand-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 67px;
    padding: 0 12px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    min-height: 38px;
    flex-shrink: 0;
    text-decoration: none;
    position: relative;
}

.sidebar-brand-row .sidebar-logo {
    flex: 1;
    min-width: 0;
}

.sidebar-logo img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
    transition: filter var(--duration-normal) var(--ease-out);
    filter: none;
}

.sidebar-logo:hover img {
    transform: none;
}

.sidebar-logo .sidebar-logo-lockup {
    position: relative;
    top: 0;
    width: 70px;
    height: auto;
    max-height: 20px;
    border-radius: 0;
    object-fit: contain;
    filter: none;
}

html.light .sidebar-logo .sidebar-logo-lockup {
    filter: brightness(0) saturate(100%);
    opacity: 0.92;
}

.sidebar-logo:hover .sidebar-logo-lockup {
    transform: none;
}

.sidebar-brand-row .sidebar-logo::after {
    display: none;
}

.sidebar-review-insights {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-left: auto;
    z-index: 14;
}

.sidebar-review-insights .review-insights-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: rgba(116, 214, 199, 0.9);
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    box-shadow: none;
}

.sidebar-review-insights .review-insights-trigger:hover {
    border-color: rgba(77, 171, 154, 0.18);
    background: rgba(77, 171, 154, 0.07);
    color: #8af2df;
}

.sidebar-review-insights .review-insights-trigger i,
.sidebar-review-insights .review-insights-trigger svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.85;
}

.sidebar-review-insights .review-insights-trigger-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.tsb-sidebar.expanded .sidebar-review-insights .review-insights-trigger {
    width: auto;
    min-width: 0;
    min-height: 32px;
    padding: 0 9px;
}

.tsb-sidebar.expanded .sidebar-review-insights .review-insights-trigger-text {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: rgba(214, 223, 232, 0.78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

html.light .sidebar-review-insights .review-insights-trigger {
    border-color: rgba(17, 122, 105, 0.32);
    background: rgba(77, 171, 154, 0.16);
    color: #075f52;
    font-weight: 750;
}

html.light .sidebar-review-insights .review-insights-trigger:hover {
    border-color: rgba(17, 122, 105, 0.36);
    background: rgba(77, 171, 154, 0.17);
    color: #065f52;
}

html.light .tsb-sidebar.expanded .sidebar-review-insights .review-insights-trigger-text {
    color: #0f766e;
}

.sidebar-review-insights .review-insights-trigger-badge {
    position: absolute;
    top: 1px;
    right: -1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border: 1px solid rgba(0,0,0,0.78);
    border-radius: 999px;
    background: var(--accent);
    color: #04110f;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: none;
}

.sidebar-review-insights .review-insights-trigger-badge[hidden] {
    display: none;
}

.sidebar-review-insights .review-insights-trigger:has(.review-insights-trigger-badge:not([hidden])) svg {
    color: #8af2df;
}

.sidebar-review-insights .review-insights-trigger:has(.review-insights-trigger-badge:not([hidden])) {
    border-color: rgba(77, 171, 154, 0.16);
    background: rgba(77, 171, 154, 0.06);
}

html.light .sidebar-review-insights .review-insights-trigger:has(.review-insights-trigger-badge:not([hidden])) {
    border-color: rgba(17, 122, 105, 0.34);
    background: rgba(77, 171, 154, 0.17);
}

html.light .sidebar-review-insights .review-insights-trigger:has(.review-insights-trigger-badge:not([hidden])) svg {
    color: #075f52;
}

html.light .sidebar-review-insights .review-insights-trigger-badge {
    border-color: #ffffff;
    background: #0f766e;
    color: #ffffff;
}

.tsb-sidebar.expanded .sidebar-brand-row .sidebar-logo {
    padding-right: 0;
}

.review-insights-popover-global {
    position: fixed;
    top: 88px;
    left: 264px;
    right: auto;
    width: min(392px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    z-index: 260;
}
/* ─── Account Scope Selector ─── */
.sidebar-account-scope {
    padding: 8px 12px;
    min-height: 60px;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    z-index: 18;
    border-top: 1px solid var(--sidebar-border);
    border-bottom: 1px solid var(--sidebar-border);
}
.account-scope-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, #adadad);
    cursor: pointer;
    transition: all 0.18s ease;
    font-size: 13px;
    min-height: 42px;
    overflow: hidden;
    box-shadow: none;
    outline: none;
}

.account-scope-btn:focus-visible {
    border-color: rgba(77, 171, 154, 0.30);
    outline: 2px solid rgba(77, 171, 154, 0.20);
    outline-offset: 2px;
}

html.light .account-scope-btn:focus-visible {
    border-color: rgba(17, 122, 105, 0.30);
    outline-color: rgba(17, 122, 105, 0.18);
}

.account-scope-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(214, 223, 232, 0.72);
}

.account-scope-icon > i,
.account-scope-icon > svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
}

.account-scope-meta {
    display: block;
    margin-top: 2px;
    color: rgba(214, 223, 232, 0.44);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.account-scope-btn[aria-expanded="true"] {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
}
.account-scope-btn.is-disabled {
    opacity: 0.68;
    cursor: default;
}
.account-scope-btn.is-disabled:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary, #adadad);
    transform: none;
}
.account-scope-btn.account-scope-btn--preview {
    cursor: pointer;
    opacity: 1;
}
.account-scope-btn.account-scope-btn--preview:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary, #adadad);
    transform: none;
}
.account-scope-btn:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-primary, #f0f0f0);
    transform: none;
}

html.light .account-scope-btn {
    color: var(--sidebar-text-main);
}

.tsb-sidebar.expanded .account-scope-dropdown {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    margin: 0 -12px -8px;
}

.tsb-sidebar.expanded .account-scope-dropdown.open {
    display: block;
}

html.light .account-scope-icon {
    color: var(--sidebar-icon-muted);
}

html.light .account-scope-meta {
    color: var(--sidebar-text-muted);
    font-weight: 600;
}

html.light .account-scope-btn:hover {
    color: var(--sidebar-text-strong);
}

html.light .account-scope-btn:hover .account-scope-icon,
html.light .account-scope-btn:hover .account-scope-meta {
    color: var(--sidebar-icon);
}

html.light .account-scope-label {
    color: var(--sidebar-text-strong);
    font-weight: 700;
}

html.light .account-scope-chevron {
    color: var(--sidebar-icon-muted);
    opacity: 0.74;
}

.account-scope-btn.scoped {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary, #adadad);
}
.account-scope-btn.scoped .account-scope-label {
    color: var(--text-primary, #f0f0f0);
}
.account-scope-copy {
    display: grid;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.account-scope-value {
    flex-shrink: 0;
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.account-scope-value[data-tone="positive"] {
    color: var(--accent);
}
.account-scope-value[data-tone="negative"] {
    color: var(--red-light);
}
.account-scope-label {
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
}
.account-scope-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.15s ease;
}

.tsb-sidebar:not(.expanded) .account-scope-btn[aria-expanded="true"] {
    border-color: transparent;
    border-radius: 7px;
}

/* Dropdown */
.account-scope-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 0;
    z-index: 22;
    overflow: hidden;
    min-width: 0;
    box-shadow: none;
    max-height: 280px;
    overflow-y: auto;
}
.account-scope-dropdown.open {
    display: block;
}

html.light .account-scope-dropdown {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--sidebar-border);
    border-bottom: 1px solid var(--sidebar-border);
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
}

/* Collapsed sidebar: dropdown flows out to the right */
.tsb-sidebar:not(.expanded) .account-scope-dropdown {
    left: 56px;
    right: auto;
    width: 224px;
    min-width: 224px;
    top: 0;
    margin-top: 0;
    border: 1px solid var(--sidebar-border);
    border-radius: 7px;
    padding: 6px;
    background: var(--app-surface-section, #101010);
}

html.light .tsb-sidebar:not(.expanded) .account-scope-dropdown {
    background: #ffffff;
    border-color: var(--sidebar-border);
}

.account-scope-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 0;
    border-bottom-color: rgba(255, 255, 255, 0.035);
    cursor: pointer;
    color: var(--text-secondary, #adadad);
    font-size: 13px;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 48px;
}

.account-scope-option:last-child {
    border-bottom-color: transparent;
}

.account-scope-option:hover {
    background: rgba(255,255,255,0.035);
    border-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.035);
    color: var(--text-primary, #f0f0f0);
}
.account-scope-option.active {
    background: rgba(255,255,255,0.055);
    border-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.035);
    color: var(--text-primary, #f0f0f0);
}
.account-scope-option--preview.active {
    background: rgba(255,255,255,0.055);
    border-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.035);
    color: var(--text-primary, #f0f0f0);
}
.account-scope-option--locked {
    opacity: 0.48;
    cursor: default;
}
.account-scope-option--locked:hover {
    background: transparent;
    color: var(--text-secondary, #adadad);
}
.account-scope-option-meta {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.account-scope-option-value {
    display: inline-flex;
    justify-content: flex-end;
    min-width: 48px;
    flex-shrink: 0;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.account-scope-option-value[data-tone="positive"] {
    color: var(--accent);
}
.account-scope-option-value[data-tone="negative"] {
    color: var(--red-light);
}
.account-scope-option-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.account-scope-option-copy > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-scope-option-sub {
    color: rgba(214, 223, 232, 0.44);
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.light .account-scope-option {
    gap: 12px;
    min-height: 56px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--app-divider-default, rgba(15, 23, 42, 0.16));
    border-radius: 0;
    color: var(--sidebar-text-main);
}

html.light .account-scope-option:hover {
    background: #f8fafc;
    border-color: transparent;
    border-bottom-color: var(--app-divider-default, rgba(15, 23, 42, 0.16));
    color: var(--sidebar-text-strong);
}

html.light .account-scope-option.active,
html.light .account-scope-option--preview.active {
    background: rgba(15, 118, 110, 0.1);
    border-color: var(--app-divider-default, rgba(15, 23, 42, 0.16));
    border-bottom-color: rgba(15, 118, 110, 0.18);
    color: var(--sidebar-text-strong);
    box-shadow: inset 3px 0 0 #0f766e;
}

html.light .account-scope-option-copy > span:first-child {
    color: #111827;
    font-weight: 650;
}

html.light .account-scope-option-sub {
    color: var(--sidebar-text-muted);
}

html.light .account-scope-option-meta {
    color: var(--sidebar-text-muted);
}

html.light .account-scope-option-value[data-tone="positive"] {
    color: #15915b;
}

html.light .account-scope-option-value[data-tone="negative"] {
    color: #dc2626;
}
.account-scope-option-hint {
    padding: 8px 10px 4px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-tertiary);
}
.account-scope-option > i,
.account-scope-option > svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: block;
}

/* Mobile sidebar: always show labels */
.tsb-sidebar.mobile-open .account-scope-dropdown {
    left: 8px;
    right: 8px;
    top: 60px;
    min-width: auto;
}

/* ─── Nav Section ─── */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px 12px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-section-label {
    display: block;
    padding: 14px 2px 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(184, 190, 198, 0.36);
    pointer-events: none;
}

.sidebar-nav > .sidebar-section-label:first-child {
    padding-top: 4px;
}

/* ─── Nav Links ─── */
.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    box-shadow: none;
}
.sidebar-link i,
.sidebar-link svg {
    width: 16.5px;
    height: 16.5px;
    flex-shrink: 0;
    opacity: 0.78;
    display: block;
}
.sidebar-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background var(--duration-fast) ease, opacity var(--duration-fast) ease;
    opacity: 0;
}
.sidebar-link:hover {
    background: rgba(255,255,255,0.035);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

html.light .sidebar-section-label {
    color: var(--sidebar-text-muted);
    font-weight: 800;
}

html.light .sidebar-link {
    color: var(--sidebar-text-main);
    font-weight: 600;
}

html.light .sidebar-link i,
html.light .sidebar-link svg {
    color: var(--sidebar-icon-muted);
    opacity: 1;
    stroke-width: 2;
}

html.light .sidebar-link:hover {
    background: rgba(15, 23, 42, 0.055);
    color: var(--sidebar-text-strong);
}

html.light .sidebar-link:hover i,
html.light .sidebar-link:hover svg {
    color: var(--sidebar-icon);
}

/* Active state - main items */
.sidebar-link.active {
    background: linear-gradient(90deg, rgba(77,171,154,0.105), rgba(77,171,154,0.035));
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(77,171,154,0.035);
}
.sidebar-link.active i {
    color: var(--accent);
    opacity: 1;
}
.sidebar-link.active::before {
    background: linear-gradient(180deg, #5BC4B0, #4DAB9A);
    opacity: 1;
}

html.light .sidebar-link.active {
    background: linear-gradient(90deg, rgba(15, 118, 110, 0.16), rgba(15, 118, 110, 0.055));
    color: #0b5f58;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.18);
}

html.light .sidebar-link.active i,
html.light .sidebar-link.active svg {
    color: #0b5f58;
    opacity: 1;
}

html.light .sidebar-link.active::before {
    width: 3px;
    background: #0f766e;
}

/* Logout link */
.sidebar-link.logout:hover {
    background: var(--sidebar-surface);
    color: var(--red-light);
}
.sidebar-link.logout:hover i {
    color: var(--red-light);
}

/* ─── Labels (text next to icons) ─── */
.sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity var(--duration-fast) ease, width var(--duration-fast) ease;
}
.tsb-sidebar.expanded .sidebar-label {
    opacity: 1;
    width: auto;
    font-size: 14px;
}
.tsb-sidebar.expanded .sidebar-logo .sidebar-label {
    display: flex;
    align-items: center;
    overflow: visible;
    height: auto;
    min-width: 0;
}

.tsb-sidebar.expanded .sidebar-section-label.sidebar-label {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    overflow: visible;
    white-space: nowrap;
    font-size: 10px;
}

.tsb-sidebar:not(.expanded) .sidebar-section-label {
    padding: 0;
    height: 0;
}

.tsb-sidebar:not(.expanded) .sidebar-label {
    display: none;
}

/* ─── Collapsed: center icons ─── */
.tsb-sidebar:not(.expanded):not(.mobile-open) .sidebar-logo {
    justify-content: center;
    min-height: 58px;
    padding: 14px 0 12px;
    overflow: visible;
}

.tsb-sidebar:not(.expanded):not(.mobile-open) .sidebar-brand-row {
    flex-direction: column;
    gap: 6px;
    min-height: auto;
    padding: 12px 0 6px;
}

.tsb-sidebar:not(.expanded):not(.mobile-open) .sidebar-logo .sidebar-logo-lockup {
    display: block;
    width: 42px;
    max-width: 42px;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
}

.tsb-sidebar:not(.expanded) .sidebar-brand-row .sidebar-logo {
    padding-right: 0;
}

.tsb-sidebar:not(.expanded) .sidebar-brand-row {
    justify-content: center;
}

.tsb-sidebar:not(.expanded) .sidebar-review-insights {
    display: flex;
}

.tsb-sidebar:not(.expanded) ~ .review-insights-popover-global {
    left: 84px;
}

.tsb-sidebar:not(.expanded) .sidebar-account-scope,
.tsb-sidebar:not(.expanded) .sidebar-nav,
.tsb-sidebar:not(.expanded) .sidebar-footer {
    padding-left: 0;
    padding-right: 0;
}

.tsb-sidebar:not(.expanded) .sidebar-account-scope {
    min-height: 46px;
}

.tsb-sidebar:not(.expanded) .sidebar-footer-tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tsb-sidebar:not(.expanded) .account-scope-btn,
.tsb-sidebar:not(.expanded) .sidebar-link,
.tsb-sidebar:not(.expanded) .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.tsb-sidebar:not(.expanded) .sidebar-user {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 14px;
}

.tsb-sidebar:not(.expanded) .sidebar-link::before {
    left: 50%;
    top: auto;
    bottom: 5px;
    width: 14px;
    height: 2px;
    transform: translateX(-50%);
}

.tsb-sidebar:not(.expanded) .sidebar-link i,
.tsb-sidebar:not(.expanded) .sidebar-link svg,
.tsb-sidebar:not(.expanded) .account-scope-btn i,
.tsb-sidebar:not(.expanded) .account-scope-btn svg,
.tsb-sidebar:not(.expanded) .sidebar-toggle i,
.tsb-sidebar:not(.expanded) .sidebar-toggle svg {
    width: 18px;
    height: 18px;
    margin: 0;
}

.tsb-sidebar:not(.expanded) .sidebar-link i,
.tsb-sidebar:not(.expanded) .sidebar-link svg {
    position: relative;
    top: 0;
}

.tsb-sidebar:not(.expanded) .sidebar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

/* ─── Tooltips (collapsed only) ─── */
.tsb-sidebar:not(.expanded) .sidebar-link[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 12px;
    background: var(--app-surface-section, #101010);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--sidebar-border);
    box-shadow: 0 12px 28px rgba(0,0,0,0.34);
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
}

/* ─── Divider ─── */
.sidebar-divider {
    height: 1px;
    background: var(--app-border-muted, rgba(255,255,255,0.06));
    margin: 11px 14px 4px;
    opacity: 1;
}

.tsb-sidebar.expanded .sidebar-divider,
.tsb-sidebar.mobile-open .sidebar-divider {
    display: none;
}

.tsb-sidebar:not(.expanded) .sidebar-divider {
    width: 24px;
    margin: 12px auto 6px;
}

/* Plan badge in logo */
.sidebar-plan-badge {
    position: relative;
    top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 10px;
}
.sidebar-plan-badge.expert {
    background: linear-gradient(180deg, rgba(201, 164, 92, 0.18), rgba(201, 164, 92, 0.11));
    color: #e7c98e;
    border: 1px solid rgba(201, 164, 92, 0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sidebar-plan-badge.pro {
    background: rgba(77,171,154,0.12);
    color: #5BC4B0;
    border: 1px solid rgba(77,171,154,0.2);
}

html.light .sidebar-plan-badge.pro {
    background: rgba(15, 118, 110, 0.10);
    color: #0f766e;
    border-color: rgba(15, 118, 110, 0.24);
}

.sidebar-plan-badge.free {
    background: rgba(255,255,255,0.05);
    color: rgba(240,240,242,0.82);
    border: 1px solid rgba(255,255,255,0.1);
}

html.light .sidebar-plan-badge.free {
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
    border-color: rgba(15, 118, 110, 0.22);
}

/* ─── Footer (User + Logout + Toggle) ─── */
.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: transparent;
}

.sidebar-footer-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px 30px;
    align-items: center;
    gap: 4px;
}

/* User info */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 6px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--app-control-tint);
    border: 1px solid var(--sidebar-border-muted);
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.sidebar-user:hover {
    border-color: var(--sidebar-border-hover);
    background: var(--sidebar-surface-hover);
}
.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--app-surface-highlight), var(--app-control-tint));
    border: 1px solid var(--sidebar-border-hover);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.sidebar-avatar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-user-name {
    display: block;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-topline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.sidebar-user > .sidebar-label {
    min-width: 0;
    flex: 1;
}

.sidebar-user-topline .sidebar-plan-badge {
    min-height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.sidebar-user-handle {
    font-size: 11px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.sidebar-logout-form {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    flex: 1;
}

.sidebar-footer-action {
    min-height: 32px;
    width: auto;
    font-size: 13px;
    border-radius: 10px;
}

.sidebar-link.sidebar-footer-action,
.sidebar-toggle.sidebar-footer-action {
    min-width: 0;
    gap: 9px;
    justify-content: flex-start;
    padding: 6px 7px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.sidebar-logout-form .sidebar-footer-action {
    width: 100%;
}

.sidebar-link.sidebar-footer-action .sidebar-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-toggle.sidebar-footer-action {
    padding-inline: 0;
    width: 30px;
    min-width: 30px;
    justify-content: center;
}

.sidebar-toggle.sidebar-footer-action .sidebar-label {
    display: none;
}

.sidebar-theme-toggle [data-theme-icon-dark][hidden],
.sidebar-theme-toggle [data-theme-icon-light][hidden] {
    display: none;
}

.sidebar-link.sidebar-footer-action:hover,
.sidebar-toggle.sidebar-footer-action:hover {
    background: var(--sidebar-surface);
    border-color: var(--sidebar-border);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

html.light .sidebar-footer {
    border-top-color: var(--sidebar-border);
    background: #ffffff;
}

html.light .sidebar-user {
    background: var(--app-surface-card, #ffffff);
    border-color: var(--sidebar-border);
}

html.light .sidebar-user:hover {
    background: var(--sidebar-surface-hover);
    border-color: var(--sidebar-border-hover);
}

html.light .sidebar-avatar {
    background: #ffffff;
    border-color: var(--sidebar-border);
    color: var(--sidebar-text-strong);
}

html.light .sidebar-user-name {
    color: var(--sidebar-text-strong);
    font-weight: 700;
}

html.light .sidebar-user-handle {
    color: var(--sidebar-text-muted);
    font-weight: 600;
}

html.light .sidebar-link.sidebar-footer-action,
html.light .sidebar-toggle.sidebar-footer-action {
    color: var(--sidebar-text-main);
    font-weight: 600;
}

html.light .sidebar-link.sidebar-footer-action i,
html.light .sidebar-link.sidebar-footer-action svg,
html.light .sidebar-toggle.sidebar-footer-action i,
html.light .sidebar-toggle.sidebar-footer-action svg {
    color: var(--sidebar-icon);
    opacity: 1;
}

html.light .sidebar-link.sidebar-footer-action:hover,
html.light .sidebar-toggle.sidebar-footer-action:hover {
    background: var(--sidebar-surface-hover);
    border-color: var(--sidebar-border);
    color: var(--sidebar-text-strong);
}

html.light .sidebar-link.sidebar-footer-action:hover i,
html.light .sidebar-link.sidebar-footer-action:hover svg,
html.light .sidebar-toggle.sidebar-footer-action:hover i,
html.light .sidebar-toggle.sidebar-footer-action:hover svg {
    color: var(--sidebar-text-strong);
    opacity: 1;
}

html.light .sidebar-link.logout:hover {
    border-color: rgba(239, 68, 68, 0.18);
    background: rgba(239, 68, 68, 0.07);
    color: var(--red);
}

html.light .sidebar-link.logout:hover i,
html.light .sidebar-link.logout:hover svg {
    color: var(--red);
}

/* ─── Toggle Button ─── */
.sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    transition: all var(--duration-fast) ease;
}
.sidebar-toggle:hover {
    background: var(--sidebar-surface);
    color: var(--text-secondary);
}
.sidebar-link.sidebar-footer-action i,
.sidebar-link.sidebar-footer-action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.82;
    transition: transform var(--duration-normal) var(--ease-out);
    display: block;
}

.sidebar-toggle.sidebar-footer-action i,
.sidebar-toggle.sidebar-footer-action svg {
    width: 16px;
    height: 16px;
}

.sidebar-toggle i,
.sidebar-toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--duration-normal) var(--ease-out);
    display: block;
}
/* Rotate icon when collapsed */
.tsb-sidebar:not(.expanded) .sidebar-collapse-toggle i,
.tsb-sidebar:not(.expanded) .sidebar-collapse-toggle svg {
    transform: rotate(180deg);
}
.sidebar-toggle-label {
    font-size: 12px;
}

.sidebar-footer-tools .sidebar-label {
    font-size: 12px;
}

/* ─── Main Content Offset ─── */
/* Use padding-left on body so all content shifts regardless of child margin rules */
body.has-sidebar {
    padding-left: 64px;
    transition: padding-left var(--duration-normal) var(--ease-out);
}
body.has-sidebar.sidebar-expanded {
    padding-left: 248px;
}

/* ─── Mobile ─── */
.sidebar-mobile-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 101;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-section, var(--bg-primary));
    border: 1px solid var(--app-border-soft, rgba(255,255,255,0.07));
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    box-shadow: var(--shadow-sm);
}
.sidebar-mobile-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.sidebar-mobile-btn i,
.sidebar-mobile-btn svg {
    width: 20px;
    height: 20px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 99;
}
.sidebar-overlay.active {
    display: block;
}

@media (max-width: 767px) {
    .tsb-sidebar {
        width: min(300px, calc(100vw - 28px));
        transform: translateX(-100%);
        transition: transform var(--duration-slow) var(--ease-out);
        box-shadow: var(--shadow-lg);
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .tsb-sidebar.expanded {
        width: min(300px, calc(100vw - 28px));
    }
    .tsb-sidebar.mobile-open {
        transform: translateX(0);
    }
    .tsb-sidebar.mobile-open .sidebar-brand-row {
        flex-wrap: nowrap;
        align-items: center;
        min-height: 62px;
        padding: 12px 10px 8px;
    }
    .tsb-sidebar.mobile-open .sidebar-brand-row .sidebar-logo {
        width: auto;
        padding-right: 0 !important;
    }
    .tsb-sidebar.mobile-open .sidebar-logo {
        justify-content: flex-start;
        min-height: 42px;
        padding: 0;
    }
    /* In mobile, always show labels and left-align (like expanded) */
    .tsb-sidebar.mobile-open .sidebar-label {
        display: block;
        opacity: 1;
        width: auto;
    }
    .tsb-sidebar.mobile-open .sidebar-section-label {
        padding: 15px 12px 5px;
        height: auto;
    }
    .tsb-sidebar.mobile-open .sidebar-section-label.sidebar-label {
        display: block;
        width: 100%;
        opacity: 1;
        overflow: visible;
        white-space: nowrap;
    }
    .tsb-sidebar.mobile-open .sidebar-account-scope,
    .tsb-sidebar.mobile-open .sidebar-nav,
    .tsb-sidebar.mobile-open .sidebar-footer {
        padding-left: 10px;
        padding-right: 10px;
    }
    .tsb-sidebar.mobile-open .sidebar-footer-tools {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
    }
    .tsb-sidebar.mobile-open .sidebar-logout-form {
        width: 100%;
        flex: none;
    }
    .tsb-sidebar.mobile-open .sidebar-collapse-toggle.sidebar-footer-action {
        display: none;
    }
    .tsb-sidebar.mobile-open .account-scope-btn,
    .tsb-sidebar.mobile-open .sidebar-link,
    .tsb-sidebar.mobile-open .sidebar-user,
    .tsb-sidebar.mobile-open .sidebar-toggle,
    .tsb-sidebar.mobile-open .sidebar-logo {
        justify-content: flex-start !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .tsb-sidebar.mobile-open .account-scope-btn,
    .tsb-sidebar.mobile-open .sidebar-link,
    .tsb-sidebar.mobile-open .sidebar-toggle {
        width: 100%;
        min-height: 44px;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        border-radius: 12px;
    }
    .tsb-sidebar.mobile-open .sidebar-user {
        width: 100%;
        min-height: 56px;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        border-radius: 14px;
    }
    .tsb-sidebar.mobile-open .sidebar-divider {
        width: auto;
        margin: 12px 12px 6px;
        opacity: 1;
    }
    .tsb-sidebar.mobile-open .sidebar-link::before {
        left: 0;
        top: 9px;
        bottom: 9px;
        width: 3px;
        height: auto;
        transform: none;
    }
    .tsb-sidebar.mobile-open .sidebar-link i,
    .tsb-sidebar.mobile-open .sidebar-link svg,
    .tsb-sidebar.mobile-open .account-scope-btn i,
    .tsb-sidebar.mobile-open .account-scope-btn svg,
    .tsb-sidebar.mobile-open .sidebar-toggle i,
    .tsb-sidebar.mobile-open .sidebar-toggle svg {
        width: 18px;
        height: 18px;
        margin: 0;
        transform: none;
    }
    /* No tooltips on mobile */
    .tsb-sidebar .sidebar-link[data-tooltip]:hover::after {
        display: none;
    }

    /* No padding offset on mobile */
    body.has-sidebar,
    body.has-sidebar.sidebar-expanded {
        padding-left: 0;
    }
    /* Show hamburger */
    .sidebar-mobile-btn {
        display: flex;
        top: calc(10px + env(safe-area-inset-top));
        left: calc(10px + env(safe-area-inset-left));
    }
    .tsb-sidebar.mobile-open ~ .sidebar-mobile-btn,
    body.sidebar-mobile-open .sidebar-mobile-btn {
        left: min(250px, calc(100vw - 58px));
        background: var(--app-surface-card-hover, rgba(255,255,255,0.05));
        border-color: var(--app-border-hover, rgba(255,255,255,0.12));
    }

    /* Hide desktop sidebar */
    .tsb-sidebar:not(.mobile-open) {
        transform: translateX(-100%);
    }

    /* Pad top of main content for mobile button */
    body.has-sidebar main {
        padding-top: calc(58px + env(safe-area-inset-top)) !important;
    }

    body.widgets-page.has-sidebar main.widgets-main.app-page-layout {
        padding-top: 14px !important;
    }

    .review-insights-popover-global {
        width: auto;
        max-height: calc(100vh - 20px);
        border-radius: 0;
    }
}