/**
 * chrome-shell.css — P1 bilateral chrome primitive (top sibling ribbon).
 * Uses canonical --s-* tokens only.
 */

[data-chrome-shell-host] {
  border-top: 1px solid var(--s-color-border-subtle);
  background: var(--s-color-surface-default);
}

.chrome-shell__ribbon {
  display: flex;
  align-items: stretch;
  min-height: 36px;
}

.chrome-shell__ribbon-inner {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  padding: 0 var(--s-space-3);
}

.chrome-shell__ribbon-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-raised);
  color: var(--s-color-fg-secondary);
  cursor: pointer;
}

.chrome-shell__ribbon-toggle:hover {
  background: var(--s-color-surface-hover);
  color: var(--s-color-fg-default);
}

.chrome-shell__siblings {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  flex: 1;
  min-width: 0;
}

.admin-shell[data-shell-state="ribbon-popover"] .chrome-shell__siblings {
  display: none;
}

.chrome-shell__sibling {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid transparent;
  border-radius: var(--s-radius-md);
  background: transparent;
  color: var(--s-color-fg-secondary);
  font-size: var(--s-font-size-0);
  cursor: pointer;
  white-space: nowrap;
}

.chrome-shell__sibling:hover {
  background: var(--s-color-surface-hover);
  color: var(--s-color-fg-default);
}

.chrome-shell__sibling[data-active="true"] {
  background: var(--s-brand-alpha-10);
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-default);
  font-weight: 600;
}

.chrome-shell__sibling-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.chrome-shell__search-slot {
  flex-shrink: 0;
  margin-left: auto;
}

.chrome-shell__search-affordance {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-raised);
  color: var(--s-color-fg-secondary);
  font-size: var(--s-font-size-0);
  cursor: pointer;
}

.chrome-shell__search-affordance:hover {
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-default);
}

.chrome-shell__popover {
  position: absolute;
  left: var(--s-space-3);
  top: calc(var(--shell-header-height, 48px) + 36px);
  z-index: 200;
  min-width: 200px;
  padding: var(--s-space-2);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-lg);
  background: var(--s-color-surface-raised);
  box-shadow: none;
}

.chrome-shell__popover[hidden] {
  display: none;
}

.chrome-shell__popover-inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.chrome-shell__popover .chrome-shell__sibling {
  width: 100%;
  justify-content: flex-start;
}

.admin-shell[data-shell-state="ribbon-popover"] .chrome-shell__popover--open {
  display: block;
}

/* Shape containers — sibling chrome symmetry */
[data-chrome-left-panel],
[data-chrome-center-pane],
[data-chrome-right-rail] {
  min-height: 0;
}

/* ── Pane registry (right rail) ── */
.pane-registry__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
  padding: var(--s-space-2);
  min-height: 0;
}

.pane-registry__pane {
  display: flex;
  flex-direction: column;
  min-height: 80px;
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-default);
}

.pane-registry__pane[hidden] {
  display: none;
}

.pane-registry__header {
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1) var(--s-space-2);
  border-bottom: 1px solid var(--s-color-border-subtle);
}

.pane-registry__toggle,
.pane-registry__popout {
  font-size: var(--s-font-size-0);
  background: transparent;
  border: none;
  color: var(--s-color-fg-secondary);
  cursor: pointer;
}

.pane-registry__body {
  flex: 1;
  padding: var(--s-space-2);
  overflow: auto;
}

.pane-registry__stub {
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
}

.pane-registry__resize-handle {
  height: 6px;
  cursor: row-resize;
  background: var(--s-color-border-subtle);
}

/* ── Global footer dock ── */
.global-footer {
  position: fixed;
  bottom: var(--s-space-4);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: var(--s-space-1);
  padding: var(--s-space-1);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-lg);
  background: var(--s-color-surface-raised);
  box-shadow: none;
}

.global-footer[data-side="right"] {
  right: var(--s-space-4);
  left: auto;
}

.global-footer[data-side="left"] {
  left: var(--s-space-4);
  right: auto;
}

.global-footer--dragging {
  opacity: 0.92;
}

.global-footer__drag {
  border: none;
  background: transparent;
  color: var(--s-color-fg-tertiary);
  cursor: grab;
  padding: var(--s-space-1);
}

.global-footer__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
  max-width: min(480px, 70vw);
}

.global-footer__item,
.global-footer__overflow {
  font-size: var(--s-font-size-0);
  padding: var(--s-space-1) var(--s-space-2);
  border: 1px solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-default);
  color: var(--s-color-fg-secondary);
  cursor: pointer;
}

.global-footer__overflow-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: var(--s-space-1);
  padding: var(--s-space-1);
  border: 1px solid var(--s-color-border-default);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}