/* One compact menu control for both workspaces. The AI rail stays independent. */
#page-blogger .dashboard-collapsible { --dashboard-menu-width: 220px; --dashboard-gap: 34px; }
#page-creator .dashboard-collapsible { --dashboard-menu-width: 220px; --dashboard-gap: 24px; }
.dashboard-sidebar-shell { position: sticky; top: 110px; min-width: 0; align-self: start; overflow: clip; }
.dashboard-sidebar-heading { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 22px; width: var(--dashboard-menu-width); }
.dashboard-sidebar-heading h2 { flex: 1; margin: 0; padding-right: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1.3; }
#page-creator .dashboard-sidebar-heading h2 { white-space: nowrap; }
.dashboard-sidebar-toggle { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; }
.dashboard-sidebar-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-toggle-fill { stroke-width: 2; opacity: .55; }
.blogger-message-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; }
.blogger-message-count { position: absolute; top: -5px; right: -7px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: var(--ink); box-shadow: 0 0 0 2px var(--bg); font-size: 10px; font-weight: 800; line-height: 1; }
.dashboard-sidebar-toggle:hover { color: var(--text); background: var(--surface2); }
.dashboard-sidebar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dashboard-sidebar-toggle[aria-expanded="false"] { border-color: var(--line); background: var(--surface); }
.dashboard-sidebar-toggle[aria-expanded="false"] .dashboard-toggle-fill { opacity: 0; }
.dashboard-sidebar-content { display: grid; grid-template-rows: 1fr; }
.dashboard-sidebar-clip { min-height: 0; overflow: hidden; }
#page-blogger .sidebar .profile,
#page-creator .sidebar .profile { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
#page-blogger .sidebar .profile-avatar,
#page-creator .sidebar .profile-avatar { flex: 0 0 auto; width: 80px; height: 80px; }
#page-blogger .sidebar .profile-avatar img,
#page-creator .sidebar .profile-avatar img { object-position: center; }
#page-blogger .dashboard-sidebar-shell .sidebar,
#page-creator .dashboard-sidebar-shell .sidebar { position: relative; top: auto; grid-row: auto; width: var(--dashboard-menu-width); min-height: 0; padding: 0 18px 12px 0; }
.dashboard-sidebar-collapsed .dashboard-sidebar-content { grid-template-rows: 0fr; opacity: 0; transform: translateX(-24px); visibility: hidden; }
.dashboard-sidebar-collapsed .dashboard-sidebar-heading { margin-bottom: 0; }
.dashboard-sidebar-ready { transition: grid-template-columns 280ms ease; }
.dashboard-sidebar-ready .dashboard-sidebar-content { transition: grid-template-rows 280ms ease, opacity 180ms ease, transform 280ms ease, visibility 280ms; }
.dashboard-sidebar-ready .dashboard-sidebar-heading { transition: margin-bottom 280ms ease; }

@media (min-width: 761px) {
  #page-blogger .dashboard-collapsible,
  #page-creator .dashboard-collapsible:not(.has-ai-chat),
  #page-creator .dashboard-collapsible.has-ai-chat {
    grid-template-columns: var(--dashboard-menu-width) minmax(0, 1fr);
    column-gap: var(--dashboard-gap);
  }
  .dashboard-collapsible > .dashboard-sidebar-shell { grid-column: 1; grid-row: 1; }
  .dashboard-collapsible > .studio-workspace,
  .dashboard-collapsible > .blogger-main { grid-column: 2; grid-row: 1; min-width: 0; }
  #page-blogger .dashboard-collapsible.dashboard-sidebar-collapsed,
  #page-creator .dashboard-collapsible.dashboard-sidebar-collapsed { grid-template-columns: 44px minmax(0, 1fr); }
  .dashboard-sidebar-collapsed .dashboard-sidebar-heading h2 { visibility: hidden; }
}
@media (min-width: 1100px) {
  #page-creator .dashboard-collapsible.has-ai-chat { --dashboard-gap: 20px; grid-template-columns: var(--dashboard-menu-width) minmax(0, 1fr) 350px; }
  #page-creator .dashboard-collapsible.has-ai-chat.dashboard-sidebar-collapsed { grid-template-columns: 44px minmax(0, 1fr) 350px; }
}
@media (min-width: 1401px) {
  #page-creator .dashboard-collapsible:not(.has-ai-chat) { --dashboard-gap: 25px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  #page-blogger .dashboard-collapsible { --dashboard-menu-width: 185px; --dashboard-gap: 24px; }
}
@media (max-width: 760px) {
  #page-blogger .dashboard-collapsible,
  #page-creator .dashboard-collapsible { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .dashboard-sidebar-shell { position: static; grid-column: 1; grid-row: auto; width: 100%; }
  .dashboard-sidebar-heading { width: 100%; margin-bottom: 14px; }
  .dashboard-sidebar-heading h2 { font-size: 18px; }
  #page-blogger .sidebar .profile,
  #page-creator .sidebar .profile { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 18px; }
  #page-blogger .sidebar .profile-avatar,
  #page-creator .sidebar .profile-avatar { width: 64px; height: 64px; }
  #page-blogger .dashboard-sidebar-shell .sidebar,
  #page-creator .dashboard-sidebar-shell .sidebar { width: 100%; padding: 0 0 16px; }
  .dashboard-sidebar-collapsed .dashboard-sidebar-heading { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-sidebar-ready,
  .dashboard-sidebar-ready .dashboard-sidebar-content,
  .dashboard-sidebar-ready .dashboard-sidebar-heading { transition: none; }
}