.connection-group,
#page-navigation,
.page-split {
  display: contents;
}
#session-source {
  display: flex;
  align-items: stretch;
}
.source-controls {
  display: grid;
  grid-template-columns: repeat(2, 34px);
}
#session-source .source-controls {
  grid-template-columns: repeat(3, 34px);
}
.source-controls button {
  display: grid;
  place-items: center;
  min-height: var(--control-height);
  padding-inline: 0;
}
.source-controls svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#cli-version:disabled {
  cursor: default;
  opacity: 1;
}

.control-controls {
  grid-template-columns: 60px;
  flex: 0 0 auto;
}
.page-split > .session-split {
  min-width: 0;
}
.page-split > .workspace-controls {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  flex: 1 1 220px;
  min-width: min(100%, 220px);
}
.page-split > [aria-label='Appearance'] {
  grid-template-columns: repeat(3, 34px);
  flex: 0 0 auto;
}
.page-split > [aria-label='Accounts and settings'] {
  grid-template-columns: repeat(2, minmax(max-content, 1fr));
  flex: 1 1 auto;
}
.workspace-controls svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.workspace-controls button {
  display: grid;
  place-items: center;
}
#session-jump,
#open-workspace {
  contain: inline-size;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
#session-jump {
  min-width: 0;
  padding-inline: 8px;
}
.control-controls #disconnect,
#session-source button {
  grid-template-rows: 17px 10px;
  gap: 2px;
  align-content: center;
  padding-block: 5px;
}
.toolbar-caption {
  font-size: 9px;
  line-height: 10px;
  font-weight: 600;
  white-space: nowrap;
}
#open-workspace {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1lh 10px;
  gap: 2px;
  align-content: center;
  min-height: var(--control-height);
  padding-block: 4px;
}
#workspace-label,
#workspace-caption {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-controls [aria-pressed] .toolbar-caption::after {
  content: 'Off';
}
.source-controls [aria-pressed='true'] .toolbar-caption::after {
  content: 'On';
}
#disconnect[data-control-state='controlled'] {
  box-shadow: inset 0 0 0 1px var(--accent);
}
#disconnect[aria-busy='true'] svg {
  animation: control-connecting 1s linear infinite;
}
@keyframes control-connecting {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #disconnect[aria-busy='true'] svg {
    animation: none;
  }
}
#workspace-menu {
  max-height: min(840px, calc(100dvh - 16px));
}
#session-menu {
  width: min(600px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  scrollbar-width: none;
}
#session-menu::-webkit-scrollbar {
  display: none;
}
.workspace-choice,
.session-choice {
  position: relative;
  min-width: 0;
}
.jump-menu .workspace-choice > .jump-choice {
  padding-right: calc(2 * 34px + 14px);
}
.jump-menu .session-choice > .jump-choice {
  padding-right: calc(34px + 14px);
}
.workspace-choice > [data-workspace-recent='true']:not([aria-current='true']) {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.jump-menu .jump-row-actions.block-tools {
  --toolbar-selection: var(--control-active-surface);

  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.jump-menu .jump-row-actions.block-tools > button {
  flex-basis: 34px;
  width: 34px;
  height: var(--toolbar-height);
  min-height: var(--toolbar-height);
  padding: 0;
}
.jump-menu .workspace-pin[aria-pressed='true'],
.jump-menu .session-pin[aria-pressed='true'] {
  color: var(--accent);
}
.workspace-pin[aria-pressed='true'] svg,
.session-pin[aria-pressed='true'] svg {
  fill: currentColor;
}
.jump-menu-items > span {
  padding: 10px 12px;
  color: var(--muted-text);
  font-size: 12px;
}
.workspace-settings form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--component-gap);
}
.workspace-settings input {
  width: 100%;
  margin-top: 6px;
  min-width: 0;
}
.workspace-connections {
  display: grid;
  gap: var(--component-gap);
  margin-top: var(--component-gap);
}
.workspace-connection {
  grid-template-columns: minmax(0, 1fr) auto;
}
.workspace-connection > span {
  padding: 10px 16px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--control-text);
}
.workspace-connection > button {
  border-left: 1px solid var(--control-divider);
  border-radius: 0 7px 7px 0;
}
.workspace-settings form > button {
  margin: 0;
  grid-column: 1 / -1;
}
.workspace-settings [role='status']:empty {
  display: none;
}
.workspace-settings [role='status'] {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .workspace-settings form {
    grid-template-columns: minmax(0, 1fr);
  }
}
.session-split button:only-child {
  border-radius: inherit;
}

.page-split > .history-controls {
  flex: 1 1 206px;
  min-width: min(100%, 206px);
}

.session-status {
  display: block;
}
.session-age {
  margin: 0;
  color: var(--muted-text);
  font-size: 12px;
}
.session-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.session-attachments {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
  white-space: nowrap;
}
.session-attachments svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 700px) and (max-width: 900px) {
  main > nav {
    font-size: 15px;
  }
  .page-split > .history-controls {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    flex-basis: 173px;
    min-width: 173px;
  }
  .page-split > .workspace-controls {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    flex-basis: 184px;
    min-width: 184px;
  }
  .source-controls {
    grid-template-columns: repeat(2, 32px);
  }
  .page-split > [aria-label='Appearance'] {
    grid-template-columns: repeat(3, 32px);
  }
  #session-source .source-controls {
    grid-template-columns: repeat(3, 32px);
  }
  .page-split > [aria-label='Accounts and settings'] button {
    padding-inline: 4px;
  }
  .history-controls #session-jump {
    padding-inline: 6px;
  }
}

.jump-menu .request-preview-heading {
  justify-content: center;
  padding-left: 0;
}
.jump-toolbar.block-tools {
  --toolbar-selection: var(--control-active-surface);

  position: static;
  flex-shrink: 0;
  max-width: 100%;
  border-color: var(--border);
  background: var(--card-background);
  color: var(--muted-text);
}
.jump-toolbar button {
  margin: 0;
  flex-shrink: 1;
  min-width: 0;
}
.jump-toolbar .jump-age {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.jump-toolbar button[aria-pressed='true']:not(:disabled) {
  color: var(--accent);
  box-shadow: inset 0 -2px var(--accent);
}
.jump-toolbar-note {
  padding: 0 8px 8px;
  color: var(--muted-text);
  font-size: 12px;
}
.workspace-alphabet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  gap: 3px;
  padding: 0 0 8px;
}
.workspace-alphabet button {
  --control-height: 28px;

  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted-text);
  font-size: 12px;
}
.workspace-alphabet button:hover:not(:disabled) {
  background: var(--control-hover-surface);
}
.workspace-alphabet button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--control-active-surface);
  color: var(--accent);
  box-shadow: inset 0 -2px var(--accent);
}
.jump-menu [hidden] {
  display: none;
}
