/* Shared sidebar shell and stateless action presentation. */
chess-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-width: 0;
  padding: 20px 16px;
  margin: 0;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: var(--sidebar-background, #fafbfc);
  color: #334155;
  color-scheme: light;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
chess-sidebar[overlay] { position: absolute; inset: 0; height: 100%; max-height: 100%; border: 0; border-radius: 20px; }
chess-sidebar[hidden], chess-sidebar > [hidden] { display: none !important; }
chess-sidebar > .sidebar-header { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: 36px; }
chess-sidebar > .sidebar-header > [data-sidebar-slot="right"] { margin-left: auto; }
chess-sidebar > .sidebar-header h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
chess-sidebar > .sidebar-body { display: flex; flex-direction: column; gap: 14px; flex: 1 0 auto; min-width: 0; background: inherit; }
chess-sidebar[body-scroll] { overflow: hidden; }
chess-sidebar[body-scroll] > .sidebar-body { flex: 1; min-height: 0; }
chess-sidebar > .sidebar-footer { display: grid; gap: 8px; flex: 0 0 auto; margin-top: auto; }
chess-sidebar > .sidebar-footer > chess-button { width: 100%; }
chess-sidebar > .sidebar-footer > chess-button > button { min-height: 44px; font-size: .86rem; }
chess-sidebar:hover, chess-sidebar:focus-within { scrollbar-color: #cbd5e1 transparent; }
chess-sidebar::-webkit-scrollbar { width: 6px; }
chess-sidebar::-webkit-scrollbar-track { background: transparent; }
chess-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
chess-sidebar:hover::-webkit-scrollbar-thumb, chess-sidebar:focus-within::-webkit-scrollbar-thumb { background: #cbd5e1; }