.overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 10, 18, 0.75);
  display: grid;
  place-items: center;
  padding: 20px;
}

/* The overlay backdrop is translucent (75% dark), so the resize handles
   underneath leak through with their hover/active orange tint. They also
   remain hoverable through the overlay because their stacking context is
   independent. When any modal is open, hide them entirely so the dialog
   feels fully on top. Driven by the .frame--has-overlay class on the root
   frame (toggled in App.vue from store.overlay). */
.frame--has-overlay .sidebar-resize-handle,
.frame--has-overlay .notif-dock-resize-handle {
  display: none;
}

.ws-activate-overlay {
  background: rgba(5, 10, 18, 0.6);
}

.ws-activate-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent, #7aa2f7);
  border-radius: 50%;
  animation: ws-activate-spin 0.7s linear infinite;
}

@keyframes ws-activate-spin {
  to {
    transform: rotate(360deg);
  }
}

.boot-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}

.boot-card {
  width: min(480px, 100%);
  border: 1px solid var(--border);
  background: var(--panel-elevated);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 20px;
  display: grid;
  gap: 12px;
}

.boot-copy {
  color: var(--muted);
}

.boot-form {
  display: grid;
  gap: 10px;
}

.dialog {
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.form,
.panel-editor,
.panel-card,
.grid {
  display: grid;
  gap: 10px;
}

.input-with-action {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.input-with-action input {
  flex: 1;
  min-width: 0;
}

.input-with-action__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.tab-picker-dropdown {
  position: absolute;
  z-index: 9000;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
  display: grid;
  gap: 2px;
  min-width: 160px;
}

.tab-picker-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.tab-picker-dropdown__item:hover {
  background: rgba(var(--tint), 0.08);
}

.tab-picker-dropdown__cwd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.tab-picker-dropdown__cwd-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.tab-picker-dropdown__cwd-select {
  flex: 1;
  min-width: 160px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: inherit;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  color-scheme: dark;
}

.tab-picker-dropdown__cwd-select option {
  background: var(--panel-elevated);
  color: var(--text);
}

.tab-picker-dropdown__cwd-select option:checked {
  background: var(--accent) !important;
  box-shadow: inset 0 0 0 100px var(--accent);
  color: #000 !important;
}

.layout-picker {
  position: absolute;
  z-index: 9000;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 8px;
}

.layout-picker__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.layout-picker__item {
  display: grid;
  gap: 3px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 10px;
  white-space: nowrap;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s;
}

.layout-picker__item:hover {
  background: rgba(var(--tint), 0.06);
  border-color: var(--border);
  color: var(--text);
}

.layout-picker__item--active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--accent);
}

.layout-thumb {
  width: 40px;
  height: 30px;
}

.tab--grouped {
  border-bottom-color: color-mix(in srgb, var(--accent), transparent 50%);
}

.form {
  margin-top: 14px;
}

.grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Explicit two-column grid that holds when the dialog is too narrow for
   the implicit `.grid` rule to win. Use this on `<div class="grid grid--two-col">`
   when you want comboboxes / inputs sitting visibly side-by-side instead
   of expanding full-width like single-field rows. */
.grid--two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 540px) {
  .grid--two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Right-aligned footer button cluster — buttons stay together on the right
   so the action chain is read in a consistent place across all dialogs. */
.dialog__footer--end {
  justify-content: flex-end;
  gap: 8px;
}

label {
  display: grid;
  gap: 4px;
}

label span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(var(--tint), 0.04);
  color: inherit;
  padding: 8px 10px;
  font-size: 13px;
}

select {
  /* Makes the native arrow glyph follow the dark theme. */
  color-scheme: dark;
}

select option {
  background: var(--panel-elevated);
  color: var(--text);
}

/* Override the OS-default light-blue highlight for the selected option in
   the open dropdown. Chromium on Windows paints a native highlight over
   `background`, so we use `box-shadow inset` (which layers above it) plus
   `!important` to force the accent color through. */
select option:checked {
  background: var(--accent) !important;
  box-shadow: inset 0 0 0 100px var(--accent);
  color: #000 !important;
}

.panel-card {
  padding: 10px;
}

.panel-card__header,
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.context-menu {
  position: fixed;
  z-index: 9000;
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  padding: 4px;
  display: grid;
  gap: 0;
}

.context-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.context-menu__icon {
  flex: 0 0 auto;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
}

.context-menu__item:hover {
  background: rgba(var(--tint), 0.07);
}

.context-menu__item--active {
  color: var(--accent);
}

.context-menu__item--danger {
  color: var(--danger);
}

.context-menu__item--danger:hover {
  background: rgba(255, 111, 141, 0.1);
}

.context-menu__label {
  padding: 4px 12px 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.context-menu__divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--border);
}

/* ── Internal-content responsiveness (Remote Access etc.) ──
 * Keeps sidebar | main as a 2-column desktop layout right down to the
 * mobile breakpoint in mobile.css. Anything that was previously stacked
 * here purely because the *frame* collapsed lives in that 768px block
 * instead — at 1100px we still have ~880px of main area on a default
 * 220px sidebar, no reason to fold the whole shell.
 */
@media (max-width: 1100px) {
  .remote-access__hero {
    grid-template-columns: 1fr;
  }

  .remote-access__qr {
    width: 96px;
    height: 96px;
  }

  .remote-mode-tabs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .sidebar,
  .workspace {
    padding: 10px;
  }

  .terminal-toolbar {
    flex-wrap: wrap;
  }

  .docker-manager__header,
  .terminal-toolbar__actions,
  .workspace-pane__header,
  .workspace-pane__actions,
  .dialog__footer,
  .dialog__header,
  .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-meta__stats,
  .remote-access__stats,
  .docker-card__actions,
  .docker-manager__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tab-strip {
    gap: 0;
  }

  .tab {
    min-width: 90px;
  }

  .terminal-stage--cols,
  .terminal-stage--grid,
  .terminal-stage--top-split,
  .terminal-stage--left-split {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
    grid-auto-rows: minmax(120px, 1fr);
  }

  .git-grid {
    grid-template-columns: 1fr;
  }

  .review-grid--summary,
  .review-grid--drafts,
  .review-grid--agent {
    grid-template-columns: 1fr;
  }

  .git-section--changes,
  .git-section--history {
    grid-template-columns: 1fr;
  }

  .git-history__panels {
    grid-template-columns: 1fr;
  }

  .git-changes-grid {
    grid-template-columns: 1fr;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .frame {
    min-width: 0;
  }

  .workspace-meta__stats,
  .remote-access__stats,
  .docker-card__actions,
  .docker-manager__summary {
    grid-template-columns: 1fr;
  }

  .git-sibling-list li {
    flex-direction: column;
    align-items: stretch;
  }

  .project,
  .workspace-card {
    padding: 4px 6px;
  }

  .project__badge,
  .workspace-card__badge {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
}
