/* Shared V2 chrome; feature pages own their content layout. */
#view { scroll-margin-top: calc(var(--shell-topbar-height, 76px) + 12px); }
.topbar { height: auto; min-height: 64px; padding-block: 8px; }
.topbar .credit-pill { height: auto; }
.topbar .credit-pill :is(b, span) { line-height: 1.35; }
.toast-region { pointer-events: none; }
.toast { max-width: min(340px, calc(100vw - 28px)); }
.toast-region .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; }
.toast-region .toast > span { flex: 1; min-width: 0; align-self: center; overflow-wrap: anywhere; }
.toast-region .toast-close { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: -6px -8px -6px 0; font-size: 22px; }
.sync-recovery { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 14px 14px; margin-bottom: 20px; border-left: 3px solid var(--section-amber); border-bottom: 1px solid var(--line); }
.sync-recovery > div { min-width: 0; }
.sync-recovery strong { color: var(--ink); font-size: 15px; }
.sync-recovery p { margin: 6px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.sync-recovery p:empty { display: none; }
.sync-recovery ul { margin: 8px 0; padding-left: 20px; font-size: 13px; }
.sync-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
#view .page-head h1 { letter-spacing: 0; }
#view .head-actions { flex-wrap: wrap; }
.sidebar .nav [hidden] { display: none !important; }
.topbar .notification-bell { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.notification-bell > svg { width: 21px; height: 21px; }
.notification-bell [data-notification-badge] { position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px; padding-inline: 3px; border: 2px solid var(--panel); border-radius: 9px; font: 700 10px/13px system-ui, sans-serif; text-align: center; background: var(--danger); color: #fff; }
.notification-bell [hidden] { display: none; }

@media (max-width: 820px) {
  .sidebar { height: auto; min-height: 72px; }
  .sidebar .nav { height: auto; grid-template-columns: repeat(var(--mobile-nav-columns, 3), minmax(0, 1fr)); }
  .sidebar .nav button { height: auto; min-height: 54px; }
  .sidebar .nav .nav-label-mobile { width: auto; max-width: 100%; line-height: 1.35; overflow-wrap: anywhere; }
  .app-shell { padding-bottom: calc(var(--shell-nav-height, 72px) + 24px); }
  .sync-recovery { align-items: stretch; flex-direction: column; gap: 10px; }
  .sync-recovery-actions .button { flex: 1; }
  body { padding-bottom: 0; }
  html { scroll-padding-top: calc(var(--shell-topbar-height, 64px) + 64px); scroll-padding-bottom: calc(var(--shell-nav-height, 72px) + 100px); }
  #view :is(input, textarea, select, [contenteditable="true"], button, a) { scroll-margin-bottom: 100px; }
  .topbar #creditValue.is-wide { font-size: 13px; }
  .toast-region { bottom: calc(var(--shell-nav-height, 72px) + 12px); }
  body:has(#view[data-page="tool"][data-workspace-kind="workflow"], #view[data-page="settings"]) .toast-region { bottom: calc(var(--shell-nav-height, 72px) + 86px); }
}
@media (max-width: 600px) {
  .topbar { gap: 6px; flex-wrap: wrap; }
  .topbar .top-actions { gap: 3px; flex: none; }
  .topbar .topbar-identity { flex: 1; min-width: 0; }
  .topbar .brand-button { min-width: 0; }
  .topbar .brand-button > span:last-child { min-width: 0; }
  .topbar .brand b { font-size: 17px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
  .topbar #searchButton { display: grid; }
  .topbar .credit-pill { max-width: 6em; min-width: 0; }
  .topbar #creditValue { max-width: none; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 379px) {
  .topbar .brand-mark { display: none; }
  .topbar .brand b { font-size: 15px; }
}
@media (max-width: 820px) and (max-height: 520px) {
  body:has(#view[data-page="tool"][data-workspace-kind="workflow"], #view[data-page="settings"]) .toast-region { bottom: calc(var(--shell-nav-height, 72px) + 12px); }
}
/* Match the shell's 10px padding below 360px. */
@media (max-width: 360px) {
  .topbar { margin-inline: -10px; padding-inline: 10px; }
}