.app-shell {
  display: flex;
  height: 100vh;
  padding: 16px;
  gap: 16px;
  background-color: var(--sys-bg);
}

.dynamic-island-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--sys-surface-lowest);
  border-radius: var(--radius-xl);
  padding: 18px 14px;
  transition: width var(--trans-normal);
  user-select: none;
  flex-shrink: 0;
}

.dynamic-island-sidebar.expanded { width: 250px; }
.dynamic-island-sidebar.collapsed { width: 76px; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 0 4px;
}

.sidebar-brand-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.brand-icon {
  font-size: 26px;
  color: var(--sys-primary);
  flex-shrink: 0;
}

.brand-labels {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  transition: opacity var(--trans-fast);
}

.brand-name { font-size: 15px; font-weight: 600; color: var(--sys-text); }
.brand-tag { font-size: 11px; color: var(--sys-text-subtle); }

.collapsed .brand-labels { display: none; }

.sidebar-nav-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-content-flow {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  overflow: hidden;
}

.top-island-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--sys-surface-lowest);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  min-height: 56px;
}

.viewport-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

.tab-view { display: none; animation: viewFadeIn var(--trans-normal); }
.tab-view.active { display: block; }

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}