html,
body {
  --tf-accent-blue: #79b8ff;
  --tf-accent-blue-strong: #007acc;
  --tf-glass-blur: 16px;
  --tf-glass-border: rgba(255, 255, 255, 0.12);
  --tf-glass-border-soft: rgba(255, 255, 255, 0.07);
  --tf-glass-highlight: rgba(255, 255, 255, 0.1);
  --tf-wave-bg: rgb(34, 34, 34);
  --tf-wave-panel: rgba(0, 0, 0, 0.5);
  --tf-wave-panel-deep: rgba(0, 0, 0, 0.72);
  --tf-wave-text: #f4f5f7;
  --tf-wave-text-muted: #b8c0ca;
  height: 100%;
  margin: 0;
  background: #1e1e1e;
  color: #cccccc;
  font-family: "Segoe UI", "Verdana", "Tahoma", "Helvetica Neue", sans-serif;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#root {
  height: 100%;
  min-height: 100vh;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.vscode-app {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  height: 100vh;
  width: 100%;
}

.activity-bar {
  align-items: center;
  background: #333333;
  border-right: 1px solid #2a2d2e;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 8px;
  position: relative;
}

.activity-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: #c5c5c5;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  line-height: 1;
  min-height: 48px;
  min-width: 48px;
  outline: 0;
  padding: 8px 0;
  position: relative;
}

.activity-item:focus-visible {
  outline: 1px solid #8ab4f8;
  outline-offset: -1px;
}

.activity-item.active {
  border-left-color: #ffffff;
  color: #ffffff;
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.activity-icon {
  display: block;
  height: 16px !important;
  opacity: 0.95;
  width: 16px !important;
}

.activity-label {
  opacity: 0.95;
  font-size: 9px;
}


.activity-account-avatar {
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  display: block;
  height: 22px;
  object-fit: cover;
  width: 22px;
}

.activity-account-badge {
  background: #8a8f98;
  border: 2px solid #333333;
  border-radius: 50%;
  bottom: 9px;
  box-sizing: border-box;
  height: 11px;
  position: absolute;
  right: 11px;
  width: 11px;
}

.activity-item.account-signed-in .activity-account-badge {
  background: #3fb950;
}

.activity-item.account-signed-out .activity-account-badge {
  background: #6e7681;
}

.activity-item.account-loading .activity-account-badge {
  animation: loading-pulse 900ms ease-in-out infinite alternate;
  background: #d29922;
}

.activity-item.account-signed-in .activity-account-avatar {
  border-color: rgba(86, 211, 100, 0.86);
}

.activity-spacer {
  display: flex;
  flex: 1;
}

.activity-item:first-child {
  margin-top: 0;
}

.mobile-activity-item,
.mobile-activity-overflow {
  display: none;
}

.workbench-shell {
  background: #1e1e1e;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 22px;
  min-height: 0;
}

.workbench-main {
  display: grid;
  min-height: 0;
}

.workbench-main.sidebar-open {
  grid-template-columns: 240px minmax(0, 1fr);
}

.workbench-main.sidebar-closed {
  grid-template-columns: minmax(0, 1fr);
}

.workbench-editor {
  display: grid;
  min-height: 0;
  position: relative;
}

.workbench-editor.diagnostics-open {
  grid-template-rows: minmax(0, 1fr) 220px;
}

.workbench-editor.diagnostics-closed {
  grid-template-rows: minmax(0, 1fr);
}

.workbench-sidebar,
.workbench-editor {
  min-width: 0;
}

.workbench-sidebar {
  background: #252526;
  border-right: 1px solid #1f1f1f;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sidebar-title {
  align-items: center;
  background: #191b20;
  border-bottom: 1px solid #31343b;
  color: #d9dde4;
  display: flex;
  font-size: 10px;
  height: 26px;
  justify-content: space-between;
  padding: 0 12px;
  text-transform: uppercase;
}

.sidebar-title strong {
  color: #95a0ad;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.sidebar-content {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 12px;
}

.terminal-sidebar {
  display: flex;
}

.remote-signin-gate {
  align-items: center;
  background: radial-gradient(circle at 50% 28%, #1c222b, #14171c 72%);
  display: flex;
  grid-column: 1 / -1;
  height: 100vh;
  justify-content: center;
  width: 100%;
}

.remote-signin-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #343942;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 14px;
  max-width: 320px;
  padding: 28px 26px;
  width: calc(100% - 48px);
}

.remote-signin-brand {
  color: #d9dde4;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
}

.remote-signin-hint {
  color: #a8b2bf;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.account-content {
  align-content: start;
}

.account-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid #343942;
  border-radius: 4px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.account-card h3 {
  color: #d9dde4;
  font-size: 12px;
  margin: 0;
}

.account-card p {
  color: #a8b2bf;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.account-card.muted {
  background: transparent;
}

.account-card.signed-in {
  border-color: #275f97;
}

.account-form {
  display: grid;
  gap: 8px;
}

.account-form label {
  color: #a8b2bf;
  display: grid;
  font-size: 11px;
  gap: 4px;
}

.account-form input {
  background: #1f2329;
  border: 1px solid #3b414b;
  border-radius: 3px;
  color: #d9dde4;
  font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  min-width: 0;
  padding: 6px 7px;
}

.account-card button,
.account-form button {
  background: #0e639c;
  border: 1px solid #1177bb;
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  font-size: 12px;
  min-height: 26px;
  padding: 5px 8px;
}

.account-card button:hover,
.account-form button:hover {
  background: #1177bb;
}

.account-card button:disabled,
.account-form button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.account-error {
  color: #ffb7b0 !important;
}

.organization-list {
  display: grid;
  gap: 4px;
}

.organization-item {
  align-items: center;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #d9dde4 !important;
  display: flex;
  justify-content: space-between;
  text-align: left;
}

.organization-item.active {
  background: #26384d !important;
  border-color: #3f79b6 !important;
}

.organization-item em {
  color: #95a0ad;
  font-style: normal;
  text-transform: capitalize;
}

.terminal-section {
  display: grid;
  align-content: start;
  align-items: start;
  gap: 6px;
}

.terminal-section h3 {
  color: #9da8b5;
  font-size: 10px;
  margin: 0;
  text-transform: uppercase;
}

.terminal-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: #d8dde4;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: 10px 1fr;
  min-height: 24px;
  padding: 3px 8px;
  text-align: left;
  width: 100%;
}

.terminal-item.active {
  border-left-color: #3ad900;
}

.terminal-item.previous {
  border-left-color: #7a8089;
  opacity: 0.85;
}

.terminal-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.terminal-item.selected {
  background: #27384d;
  border-left-color: #79b8ff;
  opacity: 1;
}

.terminal-dot {
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  width: 7px;
}

.terminal-dot-active {
  background: #4dd65d;
}

.terminal-dot-previous {
  background: #6a7380;
}

.terminal-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.terminal-item strong {
  display: block;
  font-size: 12px;
}

.terminal-item span {
  color: #95a0ad;
  display: block;
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-empty {
  color: #95a0ad;
  font-size: 12px;
  margin: 0;
}

.sidebar-loading {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.sidebar-loading-dot,
.loading-spinner,
.statusbar-spinner {
  animation: loading-spin 900ms linear infinite;
  border: 2px solid rgba(149, 160, 173, 0.28);
  border-top-color: #79b8ff;
  border-radius: 50%;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.sidebar-loading-dot {
  height: 12px;
  width: 12px;
}

.hierarchy-content {
  min-height: 0;
  padding: 0;
}

.explorer-tree {
  color: #cccccc;
  font-size: 12px;
  line-height: 22px;
  min-height: 0;
  padding: 4px 0;
  user-select: none;
}

.explorer-row {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  grid-template-columns: 16px 16px minmax(0, 1fr) 12px 22px 20px;
  height: 22px;
  min-width: 0;
  outline: 0;
  padding-bottom: 0;
  padding-right: 8px;
  padding-top: 0;
  text-align: left;
  width: 100%;
}

.explorer-row.canvas-hidden {
  color: #858585;
}

.explorer-row.canvas-hidden .explorer-icon,
.explorer-row.canvas-hidden .explorer-status {
  opacity: 0.55;
}

.explorer-row:hover {
  background: #2a2d2e;
}

.explorer-row:focus-visible {
  outline: 1px solid #007fd4;
  outline-offset: -1px;
}

.explorer-row.selected {
  background: #04395e;
  color: #ffffff;
}

.explorer-row.selected:hover {
  background: #094771;
}

.explorer-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explorer-section-header {
  align-items: center;
  background: #1f1f1f;
  border: 0;
  border-top: 1px solid #343434;
  color: #bbbbbb;
  cursor: pointer;
  display: grid;
  font-size: 10px;
  font-weight: 700;
  grid-template-columns: 16px auto minmax(0, 1fr) auto;
  height: 25px;
  letter-spacing: 0;
  margin-top: 7px;
  outline: 0;
  padding: 0 8px 0 5px;
  position: relative;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

.explorer-section-header:first-child {
  margin-top: 0;
}

.explorer-section-header::before {
  background: #0078d4;
  bottom: 5px;
  content: "";
  left: 0;
  opacity: 0.85;
  position: absolute;
  top: 5px;
  width: 2px;
}

.explorer-section-header:hover {
  background: #252526;
}

.explorer-section-header:focus-visible {
  outline: 1px solid #007fd4;
  outline-offset: -1px;
}

.explorer-section-chevron {
  color: #c5c5c5;
  height: 10px !important;
  justify-self: center;
  transition: transform 120ms ease;
  width: 10px !important;
}

.explorer-section-chevron.open {
  transform: rotate(90deg);
}

.explorer-section-title {
  color: #bbbbbb;
}

.explorer-section-detail {
  color: #7f7f7f;
  font-size: 10px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  padding-left: 8px;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.explorer-section-count {
  color: #777777;
  font-variant-numeric: tabular-nums;
}

.explorer-chevron {
  color: #c5c5c5;
  height: 10px !important;
  justify-self: center;
  transition: transform 120ms ease;
  width: 10px !important;
}

.explorer-chevron.open {
  transform: rotate(90deg);
}

.explorer-chevron.placeholder {
  visibility: hidden;
}

.explorer-icon {
  color: #c5cbd3;
  display: block;
  height: 16px !important;
  justify-self: center;
  width: 16px !important;
}

.explorer-count {
  color: #858585;
  font-size: 11px;
  min-width: 0;
  text-align: right;
}

.explorer-count.placeholder {
  visibility: hidden;
}

.explorer-visibility {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  height: 18px;
  justify-self: end;
  opacity: 0;
  padding: 0;
  width: 18px;
}

.explorer-row:hover .explorer-visibility,
.explorer-row:focus-visible .explorer-visibility,
.explorer-row.canvas-hidden .explorer-visibility {
  opacity: 1;
}

.explorer-visibility:focus-visible {
  outline: 1px solid #007fd4;
  outline-offset: -1px;
}

.explorer-visibility svg {
  display: block;
  height: 14px !important;
  margin: 2px;
  width: 14px !important;
}

.explorer-visibility.placeholder {
  visibility: hidden;
}

.explorer-status {
  border-radius: 50%;
  height: 7px;
  justify-self: center;
  width: 7px;
}

.explorer-status.placeholder {
  visibility: hidden;
}

.explorer-status.connected {
  background: #4dc36a;
}

.explorer-status.connecting {
  background: #6ea8dd;
}

.explorer-status.degraded {
  background: #d7a94d;
}

.explorer-status.offline {
  background: #8f97a3;
}

.provider-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
}

.provider-sidebar-title {
  align-items: center;
}

.provider-title-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-width: 0;
}

.provider-title-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #c5ccd6;
  cursor: pointer;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  padding: 0;
  width: 20px;
}

.provider-title-button:hover,
.provider-title-button[aria-expanded="true"] {
  background: #343942;
}

.provider-title-button svg {
  height: 12px !important;
  width: 12px !important;
}

.provider-management-menu {
  background: #1f2228;
  border-bottom: 1px solid #2f343d;
  display: grid;
  min-width: 0;
  padding: 4px 0;
}

.provider-management-menu button,
.provider-context-menu button {
  appearance: none;
  background: transparent;
  border: 0;
  color: #d9dde4;
  cursor: pointer;
  font-size: 11px;
  line-height: 24px;
  min-width: 0;
  overflow: hidden;
  padding: 0 10px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-management-menu button:hover,
.provider-context-menu button:hover {
  background: #2f3540;
}

.provider-management-menu button:disabled,
.provider-context-menu button:disabled {
  color: #6f7782;
  cursor: default;
}

.provider-register-form {
  border-bottom: 1px solid #303640;
  display: grid;
  gap: 7px;
  padding: 8px 10px 10px;
}

.provider-register-form label {
  color: #9da8b5;
  display: grid;
  font-size: 10px;
  gap: 4px;
  min-width: 0;
  text-transform: uppercase;
}

.provider-register-form input {
  background: #11141a;
  border: 1px solid #3c4350;
  color: #e8e8e8;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 26px;
  min-width: 0;
  padding: 0 7px;
}

.provider-register-form .provider-checkbox-label,
.provider-share-dialog .provider-checkbox-label {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  min-width: 0;
  text-transform: none;
}

.provider-register-form .provider-checkbox-label input,
.provider-share-dialog .provider-checkbox-label input {
  height: 13px;
  margin: 0;
  min-width: 13px;
  padding: 0;
  width: 13px;
}

.provider-register-form button {
  background: #313844;
  border: 1px solid #4a5564;
  line-height: 24px;
  margin-top: 1px;
  padding: 0 8px;
}

.provider-register-error {
  color: #ffb9b5;
  font-size: 11px;
  line-height: 1.25;
  min-width: 0;
}

.provider-list {
  display: grid;
  align-content: start;
  align-items: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}

.provider-group {
  display: grid;
  gap: 0;
}

.provider-group-title {
  color: #9da8b5;
  font-size: 10px;
  font-weight: 600;
  padding: 8px 10px 4px;
  text-transform: uppercase;
}

.provider-empty-action button {
  appearance: none;
  background: transparent;
  border: 1px solid #3f4956;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 10px;
  line-height: 18px;
  padding: 0 6px;
  text-transform: none;
}

.provider-empty-action button:hover {
  background: #303743;
}

.provider-empty-action button:disabled {
  color: #6f7782;
  cursor: default;
}

.provider-group-empty {
  color: #7f8996;
  font-size: 11px;
  margin: 0;
  padding: 4px 10px 8px;
}

.settings-section-hint {
  color: #7f8996;
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
  padding: 2px 10px 8px;
}

.settings-sections {
  border-bottom: 1px solid #20262e;
  display: flex;
  gap: 2px;
  padding: 0 8px;
}

.settings-section-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #95a0ad;
  cursor: pointer;
  font-size: 11px;
  padding: 8px 8px 6px;
}

.settings-section-tab:hover {
  color: #d9dde4;
}

.settings-section-tab.active {
  border-bottom-color: var(--machine-accent, #4493f8);
  color: #eceff4;
}

.provider-empty-action {
  align-items: center;
  border-top: 1px solid #2f2f2f;
  color: #9da8b5;
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  min-height: 30px;
  padding: 5px 8px;
}

.provider-empty-action:first-of-type {
  border-top: 0;
}

.provider-row {
  align-items: start;
  border-left: 2px solid transparent;
  border-top: 1px solid #2f2f2f;
  color: #d9dde4;
  display: grid;
  gap: 8px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  overflow: hidden;
  min-height: 28px;
  min-width: 0;
  padding: 6px 8px;
  position: relative;
}

.provider-row:first-child {
  border-top: 0;
}

.provider-row.connected {
  border-left-color: #2f7d4f;
}

.provider-row.connecting {
  border-left-color: #49749f;
}

.provider-row.degraded {
  border-left-color: #9a7728;
}

.provider-row.offline {
  border-left-color: #6c7480;
  color: #8a939f;
}

.provider-row.menu-open {
  overflow: visible;
  z-index: 20;
}

.provider-row-action,
.provider-row-start {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #d9dde4;
  cursor: pointer;
  display: inline-flex;
  height: 18px;
  justify-content: center;
  opacity: 0;
  padding: 0;
}

.provider-row-action {
  border: 1px solid #4e5966;
  font-size: 10px;
  padding: 0 5px;
  width: auto;
}

.provider-row-start {
  border: 1px solid #3f5f49;
  color: #8ee59d;
  flex: 0 0 auto;
  font-size: 10px;
  opacity: 1;
  padding: 0 7px;
}

.provider-row:hover .provider-row-action {
  opacity: 1;
}

.provider-row-action:hover,
.provider-row-start:hover {
  background: #3f4a58;
}

.provider-row-start:hover {
  background: rgba(63, 95, 73, 0.38);
}

.provider-row-start:disabled {
  color: #6f7782;
  cursor: default;
}

.provider-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.provider-row-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-row-error {
  color: #ff9f9a;
  font-size: 11px;
  margin: 2px 0 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
  display: block;
}

.provider-row-main .provider-row-error {
  margin: 2px 0 0;
}

.provider-routes {
  display: grid;
  gap: 6px;
  margin-top: 5px;
}

.provider-route {
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #303744;
  border-radius: 3px;
  color: #9da8b5;
  display: grid;
  gap: 3px 6px;
  grid-template-columns: 52px minmax(0, 1fr);
  min-width: 0;
  padding: 4px 5px;
}

.provider-route-kind {
  border: 1px solid #4a5562;
  color: #c6ced8;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  text-transform: uppercase;
}

.provider-route-url {
  font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  grid-column: 1 / -1;
  min-width: 0;
}

.provider-route-name {
  color: #c6ced8;
  font-size: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-route.offline .provider-route-kind,
.provider-route.offline .provider-route-name,
.provider-route.offline .provider-route-url {
  color: #747f8b;
}

.provider-row:hover {
  background: #2a2d2e;
}

.provider-row-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  grid-column: 2 / 4;
  justify-content: space-between;
  min-width: 0;
  white-space: normal;
}

.provider-version {
  border: 1px solid #455260;
  color: #b8c4d1;
  display: inline-flex;
  flex: 0 0 auto;
  font: 10px/16px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  max-width: 98px;
  min-width: 0;
  overflow: hidden;
  padding: 0 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-version.current {
  border-color: #3b6948;
  color: #78d18d;
}

.provider-version.stale {
  border-color: #8a5f28;
  color: #f0bd61;
}

.provider-status {
  color: #9da8b5;
  font-size: 10px;
  flex: 0 0 54px;
  min-width: 54px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.provider-row strong {
  color: #d9dde4;
  display: block;
  font-size: 11px;
  line-height: 1.2;
}

.provider-row-rename {
  background: #0d1117;
  border: 1px solid var(--machine-accent, #4493f8);
  border-radius: 4px;
  color: #d9dde4;
  display: block;
  font-size: 11px;
  line-height: 1.2;
  padding: 1px 4px;
  width: 100%;
}

.provider-url {
  color: #95a0ad;
  display: block;
  font-size: 10px;
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.provider-row-menu {
  position: relative;
}

.provider-row-action svg {
  height: 12px !important;
  width: 12px !important;
}

.provider-row-remove-confirm {
  color: #f85149;
  font-weight: 600;
}

.provider-context-menu {
  background: #252a31;
  border: 1px solid #3d4652;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  display: grid;
  min-width: 164px;
  position: absolute;
  right: 0;
  top: 22px;
  z-index: 40;
}

.provider-registry-error {
  align-items: start;
  border-bottom: 1px solid #2f2f2f;
  border-left: 2px solid #9a7728;
  color: #d9dde4;
  display: grid;
  gap: 8px;
  grid-template-columns: 10px minmax(0, 1fr);
  margin-bottom: 4px;
  min-width: 0;
  padding: 7px 8px;
}

.provider-registry-error div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.provider-registry-error strong {
  font-size: 11px;
  line-height: 1.2;
}

.provider-registry-error span,
.provider-registry-error em {
  color: #9da8b5;
  font-size: 10px;
  font-style: normal;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  width: 7px;
}

.provider-row.connected .status-dot {
  background: #4dc36a;
}

.provider-row.connecting .status-dot {
  background: #6ea8dd;
}

.provider-row.degraded .status-dot {
  background: #d7a94d;
}

.provider-row.offline .status-dot {
  background: #8f97a3;
}

.provider-modal-backdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.46);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 1000;
}

.provider-share-dialog {
  background: #1f2228;
  border: 1px solid #3f4754;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  color: #d9dde4;
  display: grid;
  gap: 14px;
  max-width: min(460px, calc(100vw - 32px));
  min-width: min(420px, calc(100vw - 32px));
  padding: 0;
}

.provider-share-dialog header {
  align-items: center;
  border-bottom: 1px solid #303640;
  display: flex;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 14px;
}

.provider-share-dialog header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.provider-share-dialog header strong {
  font-size: 13px;
}

.provider-share-dialog header span {
  color: #9da8b5;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-share-dialog header button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #c5ccd6;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.provider-share-dialog header button:hover {
  background: #343942;
}

.provider-share-dialog header svg {
  height: 12px !important;
  width: 12px !important;
}

.provider-share-dialog-section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0 14px;
}

.provider-share-dialog label {
  color: #aeb7c2;
  font-size: 11px;
}

.provider-share-dialog input,
.provider-share-dialog select {
  background: #11141a;
  border: 1px solid #3c4350;
  color: #e8e8e8;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 28px;
  min-width: 0;
  padding: 0 8px;
}

.provider-share-card {
  border: 1px solid #343c47;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
}

.provider-share-card strong,
.provider-share-card span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-share-card span {
  color: #9da8b5;
  font: 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.provider-route-choice {
  display: grid;
  gap: 6px;
}

.provider-route-choice label {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.provider-route-choice input {
  height: 13px;
  margin: 0;
  width: 13px;
}

.provider-share-dialog footer {
  border-top: 1px solid #303640;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 14px;
}

.provider-share-dialog footer button {
  background: #3d434d;
  border: 1px solid #5c6673;
  color: #d9dde4;
  cursor: pointer;
  font-size: 12px;
  height: 28px;
  min-width: 72px;
  padding: 0 10px;
}

.provider-share-dialog footer button:disabled {
  cursor: default;
  opacity: 0.45;
}

.provider-share-error {
  color: #ffb9b5;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.panel-create-backdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 1400;
}

.panel-create-dialog {
  background: #1f2228;
  border: 1px solid #3f4754;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  color: #d9dde4;
  display: grid;
  gap: 14px;
  max-width: 460px;
  padding: 0;
  width: min(460px, calc(100vw - 32px));
}

.panel-create-dialog header {
  align-items: center;
  border-bottom: 1px solid #303640;
  display: flex;
  justify-content: space-between;
  min-width: 0;
  padding: 12px 14px;
}

.panel-create-dialog header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.panel-create-dialog header strong {
  font-size: 13px;
}

.panel-create-dialog header span {
  color: #9da8b5;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-create-dialog header button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #c5ccd6;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.panel-create-dialog header button:hover {
  background: #343942;
}

.panel-create-dialog label {
  color: #aeb7c2;
  display: grid;
  font-size: 11px;
  gap: 8px;
  min-width: 0;
  padding: 0 14px;
}

.panel-create-dialog input {
  background: #11141a;
  border: 1px solid #3c4350;
  color: #e8e8e8;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 32px;
  min-width: 0;
  outline: none;
  padding: 0 8px;
}

.panel-create-dialog input:focus {
  border-color: #6ea8dd;
  box-shadow: 0 0 0 2px rgba(110, 168, 221, 0.16);
}

.panel-create-dialog footer {
  border-top: 1px solid #303640;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 14px;
}

.panel-create-dialog footer button {
  background: #3d434d;
  border: 1px solid #5c6673;
  color: #d9dde4;
  cursor: pointer;
  font-size: 12px;
  height: 30px;
  min-width: 72px;
  padding: 0 10px;
}

.panel-create-dialog footer button[type="submit"] {
  background: #2f6fbb;
  border-color: #4088da;
  color: #ffffff;
}

.panel-create-dialog footer button:disabled {
  cursor: default;
  opacity: 0.45;
}

.sidebar-error {
  background: #351d1f;
  border: 1px solid #704146;
  color: #ffb9b5;
  font-size: 12px;
  line-height: 1.35;
  margin: 0 12px 12px;
  padding: 8px;
}

.session-list {
  display: grid;
  gap: 10px;
}

/* The chats scroller: rows carry their own padding, so the container keeps
   only a slim gutter — chat-app density, not panel-form density. */
.sidebar-content.session-list {
  padding: 8px 8px 12px;
}

.session-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-left: 2px solid #4d5864;
  color: #d9dde4;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.session-item:hover {
  background: #2a2d2e;
}

.session-item.selected {
  background: #27384d;
  border-left-color: #79b8ff;
}

.session-item strong,
.session-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-item strong {
  font: 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.session-item span {
  color: #95a0ad;
  font-size: 10px;
}

.session-item em {
  color: #aab5c4;
  font-size: 10px;
  font-style: normal;
}

.chat-item {
  /* Long-press is the touch affordance for the row actions — keep iOS from
     answering it with the text-selection callout instead. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  border-left-color: transparent;
  display: block;
  min-height: 48px;
  padding: 7px 9px;
  user-select: none;
}

.chat-item-titlerow {
  align-items: center;
  display: flex;
  gap: 7px;
}

/* The agent mark is the row's "avatar"; the presence dot rides its bottom-right
   corner as a status badge, ringed in the surface color so it reads as a
   separate indicator rather than part of the glyph. */
.chat-item-avatar {
  flex: 0 0 auto;
  height: 16px;
  position: relative;
  width: 16px;
}

.chat-item-titlerow .session-state-dot {
  bottom: -3px;
  box-shadow: 0 0 0 2px #252526;
  height: 11px;
  position: absolute;
  right: -3px;
  width: 11px;
}

.chat-item-titlerow strong {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-item-titlerow em {
  flex: 0 0 auto;
}

.chat-item-copy {
  display: grid;
  gap: 3px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.chat-item-subrow {
  align-items: baseline;
  display: flex;
  min-width: 0;
}

.chat-item-cwd {
  color: #6f7d8c;
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-cwd::after {
  color: #4d5864;
  content: "·";
  margin: 0 5px;
}

.chat-item-subrow .chat-item-preview {
  flex: 1 1 auto;
  min-width: 0;
}

/* Ended conversations are history: hollow glyph, dimmed title — they recede so
   live and waiting agents stand out. */
.chat-item.ended .chat-item-titlerow strong {
  color: #aeb8c4;
  font-weight: 500;
}

.session-state-dot.ended {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #5b6675;
}

.chat-item-titlerow .session-state-dot.ended {
  box-shadow: inset 0 0 0 1.5px #5b6675, 0 0 0 2px #252526;
}

/* Standard presence semantics in the chat list: green = actively working,
   amber = waiting for your input (the actionable "needs you" state), blue =
   working in the background, violet = unknown (the screen-scraping rung
   matched no pattern — an honest "can't tell", never guessed as running),
   hollow gray = ended. */
.chat-item-titlerow .session-state-dot.running {
  background: #3fb950;
}

.chat-item-titlerow .session-state-dot.waiting {
  background: #e3b341;
}

.chat-item-titlerow .session-state-dot.background {
  background: #58a6ff;
}

.chat-item-titlerow .session-state-dot.unknown {
  background: #a371f7;
}

/* Triage call-to-attention badge — only awaiting_me / stuck / unknown render one. */
.chat-attention {
  border-radius: 999px;
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 7px;
  text-transform: uppercase;
}

.chat-attention.awaiting_me {
  background: rgba(227, 179, 65, 0.18);
  color: #e3b341;
}

.chat-attention.asking {
  background: rgba(88, 166, 255, 0.18);
  color: #58a6ff;
}

.chat-attention.errored {
  background: rgba(248, 81, 73, 0.28);
  color: #ff7b72;
}

.chat-title-placeholder {
  color: #6f7d8c;
  font-style: italic;
  font-weight: 400;
}

/* Skeleton loading: shimmering bars shaped like rows, not a spinner or text. */
.chat-skeletons {
  display: grid;
  gap: 14px;
  padding: 6px 10px;
}

.chat-skeleton {
  align-items: center;
  column-gap: 7px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  row-gap: 7px;
}

.chat-skeleton-dot {
  background: #2b333d;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.chat-skeleton-line {
  background: linear-gradient(90deg, #232a32 25%, #2f3742 37%, #232a32 63%);
  background-size: 320px 100%;
  animation: chat-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  display: block;
  height: 9px;
}

.chat-skeleton-title {
  width: 70%;
}

.chat-skeleton-preview {
  grid-column: 2;
  width: 90%;
}

.chat-title-loading {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.chat-title-loading .chat-skeleton-line {
  height: 10px;
  max-width: 160px;
  width: 60%;
}

@keyframes chat-skeleton-shimmer {
  0% { background-position: 160px 0; }
  100% { background-position: -160px 0; }
}

.chat-item-copy strong {
  color: #eef3f8;
  font: 600 12px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.chat-item-copy span {
  font-size: 11px;
  line-height: 1.3;
}

.chat-item-first {
  color: #b3bdca;
}

.chat-item-preview {
  color: #8793a2;
}

.chat-item-copy .chat-command-chip {
  color: #8b9bb0;
  display: inline;
}

.chat-item-copy .chat-command-rest {
  color: inherit;
  display: inline;
}

.chat-line-command {
  color: inherit;
}

.chat-line-context {
  color: #7c8794;
  font-style: italic;
}

.chat-item em {
  color: #8793a2;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}

.chat-controls {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.chat-search {
  background: #1f2329;
  border: 1px solid #3a444f;
  border-radius: 4px;
  color: #e6ebf1;
  font-size: 11px;
  padding: 6px 8px;
  width: 100%;
}

.chat-search:focus {
  border-color: #79b8ff;
  outline: none;
}

/* Search and the filter toggle share one row so the agent chips no longer claim
   a permanent row of their own — they live in a popover under the toggle. */
.chat-search-row {
  align-items: center;
  display: flex;
  gap: 6px;
}

.chat-search-row .chat-search {
  flex: 1 1 auto;
}

.chat-filter-toggle {
  align-items: center;
  background: #262b32;
  border: 1px solid #3a444f;
  border-radius: 4px;
  color: #aeb8c4;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 29px;
  padding: 0 8px;
}

.chat-filter-toggle:hover {
  background: #2f3640;
  color: #e6ebf1;
}

.chat-filter-toggle.open,
.chat-filter-toggle.active {
  background: #27384d;
  border-color: #79b8ff;
  color: #e6ebf1;
}

.chat-filter-toggle-label {
  font-size: 10px;
  line-height: 1;
}

.chat-filter-popover {
  align-items: center;
  background: #1c2128;
  border: 1px solid #3a444f;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}

.chat-filter-chips {
  display: inline-flex;
  gap: 4px;
}

/* The agent mark sits between the presence dot and the title; tinted per
   provider so Claude vs Codex reads at a glance. */
.chat-agent-icon {
  flex: 0 0 auto;
}

.chat-agent-icon.agent-claude {
  color: #d98a5b;
}

.chat-agent-icon.agent-codex {
  color: #6fd0c4;
}

.chat-item.ended .chat-agent-icon {
  opacity: 0.6;
}

.chat-filter-chip {
  background: #262b32;
  border: 1px solid #3a444f;
  border-radius: 999px;
  color: #aeb8c4;
  cursor: pointer;
  font-size: 10px;
  line-height: 16px;
  padding: 1px 9px;
}

.chat-filter-chip:hover {
  background: #2f3640;
}

.chat-filter-chip.selected {
  background: #27384d;
  border-color: #79b8ff;
  color: #e6ebf1;
}

.chat-load-more {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.chat-load-more-button {
  background: #262b32;
  border: 1px solid #3a444f;
  border-radius: 999px;
  color: #aeb8c4;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 3px 12px;
}

.chat-load-more-button:hover {
  background: #2f3640;
  color: #e6ebf1;
}

.chat-section {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.chat-section-label {
  color: #8793a2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 6px 0 2px;
  text-transform: uppercase;
}

.chat-item-wrap {
  position: relative;
}

.chat-item-actions {
  align-items: center;
  display: none;
  gap: 2px;
  position: absolute;
  right: 6px;
  top: 6px;
}

/* Pin/archive stay hidden until asked for, chat-app style: hover/keyboard focus
   on desktop, long-press (.actions-revealed) on touch. A pinned chat is marked
   by living in the Pinned section, not by permanent row chrome. */
.chat-item-wrap:hover .chat-item-actions,
.chat-item-wrap:focus-within .chat-item-actions,
.chat-item-wrap.actions-revealed .chat-item-actions {
  display: flex;
}

.chat-item-action {
  background: #1f2329cc;
  border: 1px solid #3a444f;
  border-radius: 4px;
  color: #c2ccd8;
  cursor: pointer;
  font-size: 11px;
  line-height: 16px;
  padding: 0 5px;
}

.chat-item-action:hover {
  background: #2f3640;
  color: #e6ebf1;
}

.chat-item-action[aria-pressed="true"] {
  border-color: #79b8ff;
  color: #ffd351;
}

.session-state-dot {
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.sidebar-title-tools {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.sidebar-title-action {
  background: #313844;
  border: 1px solid #4a5564;
  border-radius: 3px;
  color: #d9dde4;
  cursor: pointer;
  font-size: 10px;
  line-height: 16px;
  padding: 0 6px;
  text-transform: uppercase;
}

.sidebar-title-action:hover {
  background: #3c4452;
}

.new-chat-form {
  align-content: start;
  display: grid;
  gap: 8px;
}

.new-chat-form label {
  color: #9da8b5;
  display: grid;
  font-size: 10px;
  gap: 4px;
  min-width: 0;
  text-transform: uppercase;
}

.new-chat-form input,
.new-chat-form select,
.new-chat-form textarea {
  background: #11141a;
  border: 1px solid #3c4350;
  color: #e8e8e8;
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  min-width: 0;
  padding: 5px 7px;
}

.new-chat-form select {
  height: 26px;
  padding: 0 4px;
}

.new-chat-form textarea {
  resize: vertical;
}

.new-chat-form button {
  background: #313844;
  border: 1px solid #4a5564;
  line-height: 24px;
  margin-top: 1px;
  padding: 0 8px;
}

.new-chat-form button:disabled {
  cursor: default;
  opacity: 0.6;
}

.new-chat-error {
  color: #ffb9b5;
  font-size: 11px;
  line-height: 1.25;
  min-width: 0;
}

.new-chat-hint {
  color: #9aa6b4;
  font-size: 10px;
  line-height: 1.3;
  margin: 0;
}

.session-state-dot.running,
.session-badge.running {
  background: #4dc36a;
  color: #07130a;
}

.session-state-dot.background,
.session-badge.background {
  background: #d7a94d;
  color: #171104;
}

.session-state-dot.waiting,
.session-badge.waiting {
  background: #6ea8dd;
  color: #06111c;
}

.session-state-dot.ended,
.session-badge.ended {
  background: #5b6675;
  color: #0b0f14;
}

.session-badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  padding: 4px 7px;
  white-space: nowrap;
}

.session-badge.no-session {
  background: #3f4a58;
  color: #d9dde4;
}

#display-stage {
  background: var(--tf-wave-bg);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}

#display-stage::before,
#display-stage::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

#display-stage::before {
  background-image: url("/wallpapers/mountains-photo.webp");
  background-position: center;
  background-size: cover;
  filter: saturate(0.86) brightness(0.78);
}

#display-stage::after {
  background: rgba(0, 0, 0, 0.22);
}

.canvas-board-layer {
  height: 100%;
  inset: 0;
  min-height: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.canvas-overlay-layer {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1000;
}

.empty-board {
  align-content: center;
  box-sizing: border-box;
  color: #d9dde4;
  display: grid;
  height: 100%;
  justify-items: center;
  padding: 40px;
  text-align: center;
}

.empty-board h1 {
  font-size: 24px;
  font-weight: 650;
  margin: 0 0 8px;
}

.empty-board p {
  color: #95a0ad;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 480px;
}

.loading-board {
  gap: 8px;
}

.loading-board h1 {
  margin-top: 4px;
}

.loading-spinner {
  height: 28px;
  width: 28px;
}

.loading-stage {
  height: 100%;
  width: 100%;
}

.canvas-switcher {
  left: 12px;
  pointer-events: auto;
  position: absolute;
  top: 12px;
  z-index: 1;
}

.canvas-switcher-trigger {
  align-items: center;
  backdrop-filter: blur(14px);
  background: rgba(18, 20, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 28px rgba(0, 0, 0, 0.32);
  color: #f4f5f7;
  cursor: pointer;
  display: inline-grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) 12px;
  min-height: 34px;
  min-width: 178px;
  padding: 6px 10px;
  text-align: left;
}

.canvas-presence-overlay {
  align-items: center;
  display: inline-flex;
  flex-direction: row-reverse;
  pointer-events: auto;
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 2;
}

.canvas-presence-avatar {
  align-items: center;
  background: var(--presence-color, #2f6f9f);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  margin-left: -5px;
  padding: 0;
  width: 20px;
}

.canvas-presence-avatar:disabled {
  cursor: default;
}

.canvas-presence-avatar.following {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 0 4px var(--presence-color, #2f6f9f);
}

.canvas-presence-avatar:first-child {
  margin-left: 0;
}

.canvas-presence-avatar img {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.figma-comment-controls {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  pointer-events: auto;
  position: absolute;
  right: 110px;
  top: 11px;
  z-index: 8;
}

.figma-comment-tool {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(27, 31, 36, 0.16);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: #1f2328;
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  padding: 0;
  width: 36px;
}

.figma-comment-tool svg {
  height: 16px !important;
  width: 16px !important;
}

.figma-comment-tool.active {
  background: #0d99ff;
  border-color: rgba(255, 255, 255, 0.92);
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.24), 0 8px 24px rgba(0, 0, 0, 0.24);
}

.figma-comment-filter {
  align-items: center;
  background: #f6f8fa;
  border: 1px solid #d8dee4;
  border-radius: 6px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  width: max-content;
}

.figma-comment-filter button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #57606a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
  height: 28px;
  padding: 0 8px;
}

.figma-comment-filter button[aria-pressed="true"] {
  background: #24292f;
  color: #ffffff;
}

.figma-comment-sidebar {
  background: #ffffff;
  border: 1px solid rgba(27, 31, 36, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  color: #1f2328;
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  max-height: calc(100% - 72px);
  padding: 12px;
  pointer-events: auto;
  position: absolute;
  right: 16px;
  top: 58px;
  width: 320px;
  z-index: 7;
}

.figma-comment-sidebar-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-width: 0;
}

.figma-comment-sidebar-header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.figma-comment-sidebar-header strong {
  color: #1f2328;
  font-size: 13px;
  font-weight: 700;
}

.figma-comment-sidebar-header span {
  color: #57606a;
  font-size: 11px;
}

.figma-comment-search {
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  color: #1f2328;
  font: inherit;
  font-size: 12px;
  height: 32px;
  padding: 0 9px;
}

.figma-comment-search:focus {
  border-color: #0d99ff;
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.18);
  outline: none;
}

.figma-comment-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0 -6px;
  min-height: 0;
  overflow: auto;
  padding: 0 6px 2px;
}

.figma-comment-list li {
  margin: 0;
  min-width: 0;
  padding: 0;
}

.figma-comment-list-item {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #1f2328;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 8px;
  text-align: left;
  width: 100%;
}

.figma-comment-list-item:hover {
  background: #f6f8fa;
}

.figma-comment-list-item.selected {
  background: rgba(13, 153, 255, 0.1);
  border-color: rgba(13, 153, 255, 0.45);
}

.figma-comment-list-avatar {
  align-items: center;
  background: #0d99ff;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 750;
  height: 28px;
  justify-content: center;
  overflow: hidden;
  width: 28px;
}

.figma-comment-list-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.figma-comment-list-body {
  min-width: 0;
}

.figma-comment-list-meta {
  align-items: baseline;
  color: #57606a;
  display: flex;
  font-size: 11px;
  gap: 6px;
  min-width: 0;
}

.figma-comment-list-meta strong {
  color: #1f2328;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-comment-list-body p {
  color: #1f2328;
  font-size: 12px;
  line-height: 1.35;
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-comment-list-body small {
  color: #57606a;
  display: block;
  font-size: 11px;
  margin-top: 4px;
}

.figma-comment-empty {
  color: #57606a;
  font-size: 12px;
  margin: 6px 2px 2px;
}

.figma-comment-world {
  cursor: default;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.figma-comment-world.active {
  cursor: crosshair;
  pointer-events: auto;
}

.figma-comment-pin {
  align-items: center;
  background: var(--comment-color, #0d99ff);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: 750;
  height: 28px;
  justify-content: center;
  left: 0;
  line-height: 1;
  pointer-events: auto;
  position: absolute;
  top: 0;
  transform-origin: 0 0;
  width: 28px;
}

.figma-comment-pin::after {
  background: inherit;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  bottom: -3px;
  content: "";
  height: 8px;
  position: absolute;
  right: 1px;
  transform: rotate(36deg);
  width: 8px;
}

.figma-comment-pin span {
  position: relative;
  z-index: 1;
}

.figma-comment-pin.draft {
  --comment-color: #0d99ff;
  box-shadow: 0 0 0 4px rgba(13, 153, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.32);
}

.figma-comment-pin:hover,
.figma-comment-pin.selected {
  box-shadow: 0 0 0 4px rgba(13, 153, 255, 0.24), 0 8px 22px rgba(0, 0, 0, 0.34);
  z-index: 2;
}

.figma-comment-pin.resolved {
  filter: grayscale(0.85);
  opacity: 0.68;
}

.figma-comment-pin.resolved.selected,
.figma-comment-pin.resolved:hover {
  filter: none;
  opacity: 1;
}

.figma-comment-pin small {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(27, 31, 36, 0.18);
  border-radius: 999px;
  bottom: -8px;
  color: #1f2328;
  display: inline-flex;
  font-size: 9px;
  font-weight: 750;
  height: 14px;
  justify-content: center;
  min-width: 14px;
  padding: 0 3px;
  position: absolute;
  right: -7px;
  z-index: 2;
}

.figma-comment-card {
  background: #ffffff;
  border: 1px solid rgba(27, 31, 36, 0.14);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  display: grid;
  gap: 8px;
  left: 0;
  max-height: min(420px, calc(100vh - 96px));
  padding: 12px;
  pointer-events: auto;
  position: absolute;
  top: 0;
  transform-origin: 0 0;
  width: 320px;
  z-index: 9;
}

.figma-comment-card-header {
  align-items: center;
  color: #1f2328;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}

.figma-comment-card-header-actions {
  align-items: center;
  display: inline-flex;
  gap: 2px;
}

.figma-comment-card-header button,
.figma-comment-card-actions button {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0;
}

.figma-comment-card-header button {
  background: transparent;
  border-radius: 4px;
  color: #6e7781;
  height: 24px;
  width: 24px;
}

.figma-comment-card-header button:hover {
  background: rgba(208, 215, 222, 0.55);
  color: #1f2328;
}

.figma-comment-card-header button svg {
  display: block;
  height: 13px !important;
  width: 13px !important;
}

.figma-comment-thread {
  border-bottom: 1px solid #d8dee4;
  display: grid;
  gap: 10px;
  max-height: 210px;
  overflow: auto;
  padding: 2px 2px 10px;
}

.figma-comment-message {
  display: grid;
  gap: 8px;
  grid-template-columns: 28px minmax(0, 1fr);
}

.figma-comment-avatar {
  align-items: center;
  background: #0d99ff;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  font-size: 10px;
  font-weight: 750;
  height: 28px;
  justify-content: center;
  overflow: hidden;
  width: 28px;
}

.figma-comment-avatar img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.figma-comment-message-meta {
  align-items: baseline;
  color: #57606a;
  display: flex;
  font-size: 11px;
  gap: 6px;
  min-width: 0;
}

.figma-comment-message-meta strong {
  color: #1f2328;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-comment-message p {
  color: #1f2328;
  font-size: 12px;
  line-height: 1.4;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.figma-comment-card textarea {
  background: #ffffff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  color: #1f2328;
  font: inherit;
  min-height: 78px;
  padding: 8px;
  resize: vertical;
}

.figma-comment-card textarea:focus {
  border-color: #0d99ff;
  box-shadow: 0 0 0 3px rgba(13, 153, 255, 0.18);
  outline: none;
}

.figma-comment-card-actions {
  display: flex;
  justify-content: flex-end;
}

.figma-comment-card-actions button {
  background: #0d99ff;
  border-radius: 6px;
  color: #ffffff;
  height: 28px;
  width: 32px;
}

.figma-comment-card-actions button svg {
  display: block;
  height: 13px !important;
  width: 13px !important;
}

.figma-comment-card-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.canvas-cursor-overlay {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.canvas-remote-cursor {
  left: 0;
  position: absolute;
  top: 0;
  transform-origin: 0 0;
}

.canvas-remote-cursor-pointer {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  height: 18px !important;
  width: 18px !important;
}

.canvas-remote-cursor-label {
  background: var(--presence-color, #007acc);
  border-radius: 3px;
  color: #ffffff;
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  margin-left: 8px;
  margin-top: -2px;
  max-width: 160px;
  overflow: hidden;
  padding: 2px 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-switcher-trigger:hover {
  background: rgba(27, 31, 36, 0.9);
  border-color: rgba(121, 184, 255, 0.42);
}

.canvas-switcher-name {
  color: #f4f5f7;
  font-size: 12px;
  font-weight: 650;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-switcher-chevron {
  display: block;
  height: 12px !important;
  justify-self: end;
  width: 12px !important;
}

.canvas-switcher-menu {
  backdrop-filter: blur(16px);
  background: rgba(18, 20, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  display: grid;
  gap: 8px;
  margin-top: 6px;
  min-width: 238px;
  padding: 8px;
}

.canvas-switcher-group {
  display: grid;
  gap: 2px;
}

.canvas-switcher-group-title {
  color: #8f9baa;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 6px 3px;
  text-transform: uppercase;
}

.canvas-switcher-option,
.canvas-switcher-new {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #d9dde4;
  cursor: pointer;
  display: grid;
  font-size: 12px;
  grid-template-columns: 14px minmax(0, 1fr);
  min-height: 26px;
  padding: 3px 7px;
  text-align: left;
}

.canvas-switcher-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.canvas-switcher-option.active {
  background: rgba(0, 122, 204, 0.28);
  border-color: rgba(121, 184, 255, 0.42);
  color: #ffffff;
}

.canvas-switcher-check {
  color: #79b8ff;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.canvas-switcher-check svg {
  display: block;
  height: 11px !important;
  width: 11px !important;
}

.canvas-switcher-new {
  border-top-color: rgba(255, 255, 255, 0.08);
  border-radius: 0;
  color: #7f8a98;
  cursor: default;
  grid-template-columns: 14px minmax(0, 1fr);
  margin-top: 2px;
  padding-top: 8px;
}

.canvas-switcher-new svg {
  display: block;
  height: 12px !important;
  width: 12px !important;
}

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

@keyframes loading-pulse {
  0%, 100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

.flow-placeholder {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.board-health-strip {
  align-items: center;
  backdrop-filter: blur(12px);
  background: rgba(18, 20, 22, 0.76);
  border: 1px solid var(--tf-glass-border);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--tf-glass-highlight), 0 8px 22px rgba(0, 0, 0, 0.32);
  color: #cbd5e1;
  display: flex;
  flex-wrap: wrap;
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  gap: 7px;
  left: 8px;
  max-width: calc(100% - 148px);
  padding: 4px 7px;
  pointer-events: none;
  position: absolute;
  top: 56px;
  z-index: 8;
}

.board-health-strip strong {
  color: #f4f5f7;
}

.board-health-strip.warn {
  border-color: #f2cc60;
  color: #ffe3a1;
}

.diagnostics-panel {
  background: #11141a;
  border: 0;
  border-top: 1px solid #3a414c;
  box-shadow: none;
  color: #d9dde4;
  display: flex;
  flex-direction: column-reverse;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding: 0 12px 8px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.diagnostics-panel header {
  align-items: center;
  background: #11141a;
  border-bottom: 1px solid #2c323b;
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  grid-template-columns: minmax(0, auto) auto auto minmax(140px, 1fr) auto;
  margin: 0 -12px;
  min-height: 30px;
  padding: 3px 12px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.diagnostics-count {
  color: #95a0ad;
}

.diagnostics-controls {
  min-width: 0;
}

.diagnostics-search {
  display: block;
  min-width: 0;
}

.diagnostics-search span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.diagnostics-search input {
  appearance: none;
  background: #181c22;
  border: 1px solid #333b47;
  border-radius: 4px;
  color: #d9dde4;
  font: 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 22px;
  min-width: 0;
  outline: 0;
  padding: 0 8px;
  width: 100%;
}

.diagnostics-search input:focus {
  border-color: #57a6ff;
}

.diagnostics-severity {
  align-items: center;
  display: inline-flex;
  gap: 1px;
}

.diagnostics-severity button {
  appearance: none;
  background: #181c22;
  border: 1px solid #333b47;
  color: #aab5c4;
  cursor: pointer;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 22px;
  padding: 0 7px;
  text-transform: uppercase;
}

.diagnostics-severity button:first-child {
  border-radius: 4px 0 0 4px;
}

.diagnostics-severity button:last-child {
  border-radius: 0 4px 4px 0;
}

.diagnostics-severity button.active,
.diagnostics-severity button:hover,
.diagnostics-severity button:focus-visible {
  background: #263241;
  border-color: #57a6ff;
  color: #f4f5f7;
  outline: 0;
}

.diagnostics-close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: #aab5c4;
  cursor: pointer;
  display: inline-flex;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 20px;
  justify-content: center;
  padding: 0;
  width: 20px;
}

.diagnostics-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f4f5f7;
}

.diagnostics-panel p {
  color: #95a0ad;
  margin: 0;
}

.diagnostics-body {
  flex: 0 0 auto;
  padding-top: 6px;
}

.diagnostics-panel ol {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.diagnostic-event {
  border-left: 3px solid #64748b;
  display: grid;
  gap: 1px;
  padding-left: 6px;
}

.diagnostic-event.info {
  border-left-color: #57a6ff;
}

.diagnostic-event.warn {
  border-left-color: #f2cc60;
}

.diagnostic-event.error {
  border-left-color: #ff6b6b;
}

.diagnostic-meta {
  color: #95a0ad;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.statusbar {
  align-items: center;
  background: #007acc;
  border-top: 1px solid #0b5ea8;
  color: #e6f1fb;
  display: flex;
  flex-shrink: 0;
  font-size: 11px;
  gap: 16px;
  justify-content: space-between;
  min-height: 22px;
  padding: 0 12px;
}

.statusbar-error {
  color: #ffd8d5;
}

.statusbar-state {
  align-items: center;
  display: inline-flex;
  gap: 7px;
  min-width: 0;
}

.statusbar-spinner {
  border-color: rgba(230, 241, 251, 0.36);
  border-top-color: #ffffff;
  height: 12px;
  width: 12px;
}

.statusbar-link {
  color: #e6f1fb;
  text-decoration: none;
}

.statusbar-link:hover {
  text-decoration: underline;
}

.statusbar-account {
  color: #d7ecff;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

*::-webkit-scrollbar {
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #686868;
  border: 2px solid #252526;
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #7a7a7a;
}


.react-flow {
  background: rgba(0, 0, 0, 0.24);
  height: 100%;
  width: 100%;
}

.react-flow__controls {
  background: rgba(18, 20, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.react-flow .react-flow__controls-button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #d9dde4;
  fill: #d9dde4;
}

.react-flow .react-flow__controls-button:last-child {
  border-bottom: 0;
}

.react-flow .react-flow__controls-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  fill: #ffffff;
}

.react-flow .react-flow__controls-button svg {
  fill: currentColor;
  height: 13px !important;
  width: 13px !important;
}

.react-flow__node {
  cursor: default;
}

.termfleet-minimap-provider {
  fill: rgba(226, 226, 226, 0.88);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.termfleet-minimap-screen {
  fill: transparent;
  stroke: rgba(45, 48, 54, 0.72);
  stroke-dasharray: 3 2;
  stroke-width: 1;
}

.termfleet-minimap-window {
  fill: rgba(45, 48, 54, 0.76);
  stroke: rgba(250, 250, 250, 0.58);
  stroke-width: 1;
}

.provider-group-node {
  backdrop-filter: blur(var(--tf-glass-blur)) saturate(1.08);
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid var(--provider-accent-border, rgba(255, 255, 255, 0.18));
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 26px var(--provider-accent-glow, transparent),
    0 12px 30px rgba(0, 0, 0, 0.22);
  box-sizing: border-box;
  max-width: 3600px;
  padding: 64px 18px 18px;
  position: relative;
}

/* A registered-but-down provider renders as a grey, desaturated offline machine
   so the fleet stays visible (and manageable) instead of vanishing. */
.provider-group-node.machine-offline {
  filter: grayscale(0.92) brightness(0.72);
  opacity: 0.72;
}

.provider-group-node.selected {
  border-color: var(--provider-accent, var(--tf-accent-blue));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 var(--selection-stroke, 2px) var(--provider-accent-strong, rgba(121, 184, 255, 0.72)),
    0 0 0 var(--selection-glow, 6px) var(--provider-accent-glow, rgba(121, 184, 255, 0.12)),
    0 12px 30px rgba(0, 0, 0, 0.22);
}

.provider-group-header {
  align-items: center;
  backdrop-filter: blur(12px) saturate(1.08);
  background:
    linear-gradient(90deg, var(--provider-accent-soft, transparent), transparent 62%),
    rgba(18, 20, 22, 0.72);
  border: 1px solid var(--provider-accent-border, rgba(255, 255, 255, 0.13));
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.28);
  color: var(--tf-wave-text);
  display: flex;
  font-size: 12px;
  gap: 14px;
  height: 28px;
  justify-content: space-between;
  left: 0;
  max-width: min(840px, calc(100% - 12px));
  min-width: 260px;
  padding: 0 10px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform-origin: top left;
  width: max-content;
  z-index: var(--z-machine-header);
}

.provider-group-title {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.provider-group-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-group-header span {
  color: rgba(184, 192, 202, 0.82);
  flex: 0 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-group-menu-button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: rgba(235, 239, 245, 0.92);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 20px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
  pointer-events: auto;
  width: 26px;
}

.provider-group-menu-button:hover,
.provider-group-menu-button:focus-visible {
  background: transparent;
  color: #ffffff;
  outline: 0;
}

.provider-group-menu-button span {
  color: currentColor;
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: visible;
  text-align: center;
}

.provider-settings-backdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.34);
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 100;
}

.provider-settings-modal {
  background: rgba(24, 27, 32, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  color: #eef2f7;
  display: grid;
  gap: 14px;
  max-height: min(86vh, 860px);
  overflow: auto;
  padding: 16px 18px 14px;
  width: min(620px, calc(100vw - 32px));
}

.provider-settings-modal header,
.provider-settings-modal footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.provider-settings-modal header strong {
  font-size: 13px;
}

.provider-settings-modal label {
  display: grid;
  gap: 6px;
}

.provider-settings-modal label span {
  color: rgba(213, 220, 230, 0.78);
  font-size: 11px;
}

.provider-settings-modal input[type="text"],
.provider-settings-modal select {
  appearance: none;
  background: #11141a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: #eef2f7;
  font: 12px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 30px;
  padding: 0 9px;
}

.provider-settings-modal input[type="text"]:focus,
.provider-settings-modal select:focus {
  border-color: #57a6ff;
  outline: 0;
}

.provider-settings-error {
  color: #ff9aa2;
  font-size: 11px;
  line-height: 1.35;
  margin: -2px 0 0;
}

.provider-settings-modal input[type="range"] {
  width: 100%;
}

.appearance-hero {
  background:
    radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px) 0 0 / 14px 14px,
    linear-gradient(150deg, #181c24, #0b0d12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  padding: 16px 18px;
}

.appearance-hero-machine {
  display: grid;
  gap: 6px;
  width: min(400px, 100%);
}

.appearance-hero-chip {
  align-items: center;
  background:
    linear-gradient(90deg, var(--provider-accent-soft, rgba(255, 255, 255, 0.04)), transparent 65%),
    rgba(18, 20, 22, 0.85);
  border: 1px solid var(--provider-accent-border, rgba(255, 255, 255, 0.13));
  border-radius: 6px;
  color: #e8edf4;
  display: flex;
  font-size: 11px;
  gap: 7px;
  height: 24px;
  max-width: 100%;
  padding: 0 9px;
  width: max-content;
}

.appearance-hero-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appearance-hero-icon {
  color: var(--provider-accent, #9aa6b5);
  height: 11px !important;
  width: 11px !important;
}

.appearance-hero-screen {
  align-items: center;
  border: 1px solid var(--provider-accent-border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  box-shadow:
    0 0 22px var(--provider-accent-glow, transparent),
    0 14px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  height: 150px;
  justify-content: center;
}

.appearance-hero-terminal {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  width: 66%;
}

.appearance-hero-terminal-bar {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 4px;
  height: 13px;
  padding: 0 6px;
}

.appearance-hero-terminal-bar i {
  border-radius: 50%;
  height: 5px;
  width: 5px;
}

.appearance-hero-terminal-bar i:nth-child(1) {
  background: #ff5f57;
}

.appearance-hero-terminal-bar i:nth-child(2) {
  background: #febc2e;
}

.appearance-hero-terminal-bar i:nth-child(3) {
  background: #28c840;
}

.appearance-hero-terminal-body {
  display: grid;
  padding: 6px 9px 7px;
  white-space: nowrap;
}

.appearance-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 11px;
  padding-top: 12px;
}

.appearance-section h3 {
  color: rgba(213, 220, 230, 0.6);
  font: 600 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.09em;
  margin: 0;
  text-transform: uppercase;
}

.provider-settings-modal .appearance-name,
.appearance-field {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 78px 1fr;
}

.appearance-field > span {
  color: rgba(213, 220, 230, 0.78);
  font-size: 11px;
}

.appearance-swatch-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.provider-settings-modal .appearance-swatch {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  height: 22px;
  padding: 0;
  width: 22px;
}

.provider-settings-modal .appearance-swatch:hover:not(:disabled) {
  background: inherit;
  filter: brightness(1.15);
}

.provider-settings-modal .appearance-swatch.selected {
  box-shadow:
    0 0 0 2px rgba(24, 27, 32, 1),
    0 0 0 4px rgba(121, 184, 255, 0.9);
}

.provider-settings-modal .appearance-swatch-none {
  background:
    linear-gradient(135deg, transparent 44%, #ff6b6b 46%, #ff6b6b 54%, transparent 56%),
    #11141a;
}

.provider-settings-modal .appearance-swatch-none:hover:not(:disabled) {
  background:
    linear-gradient(135deg, transparent 44%, #ff6b6b 46%, #ff6b6b 54%, transparent 56%),
    #11141a;
}

.provider-settings-modal input[type="color"].appearance-swatch-custom {
  appearance: none;
  background: conic-gradient(#f85149, #e3b341, #3fb950, #39c5cf, #4493f8, #bc8cff, #f85149);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  height: 22px;
  overflow: hidden;
  padding: 0;
  width: 22px;
}

.provider-settings-modal input[type="color"].appearance-swatch-custom::-webkit-color-swatch-wrapper {
  opacity: 0;
  padding: 0;
}

.provider-settings-modal input[type="color"].appearance-swatch-custom::-webkit-color-swatch {
  border: 0;
  opacity: 0;
}

.provider-settings-modal .appearance-swatch-square {
  border-radius: 5px;
}

.appearance-theme-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.provider-settings-modal .appearance-theme-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  display: grid;
  height: auto;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.provider-settings-modal .appearance-theme-card:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.provider-settings-modal .appearance-theme-card.selected {
  border-color: #57a6ff;
  box-shadow: 0 0 0 1px #57a6ff;
}

.appearance-theme-sample {
  display: block;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  padding: 13px 9px;
  white-space: nowrap;
}

.appearance-theme-label {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(222, 228, 236, 0.85);
  display: block;
  font-size: 10px;
  padding: 5px 8px 6px;
}

.appearance-wallpaper-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.provider-settings-modal .appearance-wallpaper {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: rgba(213, 220, 230, 0.7);
  display: grid;
  font-size: 10px;
  gap: 4px;
  height: auto;
  justify-items: center;
  padding: 0;
}

.provider-settings-modal .appearance-wallpaper:hover:not(:disabled) {
  background: transparent;
  color: #eef2f7;
}

.provider-settings-modal .appearance-wallpaper.selected {
  color: #eef2f7;
}

.appearance-wallpaper-tile {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  box-sizing: border-box;
  display: block;
  height: 34px;
  width: 54px;
}

.provider-settings-modal .appearance-wallpaper.selected .appearance-wallpaper-tile {
  box-shadow:
    0 0 0 2px rgba(24, 27, 32, 1),
    0 0 0 4px rgba(121, 184, 255, 0.9);
}

.appearance-wallpaper-none {
  background:
    linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 0.4) 48%, rgba(255, 255, 255, 0.4) 52%, transparent 54%),
    #11141a;
}

.provider-settings-modal .appearance-slider {
  align-items: center;
  gap: 9px;
  grid-template-columns: 78px auto 1fr auto;
}

.provider-settings-modal .appearance-slider small {
  color: rgba(213, 220, 230, 0.5);
  font-size: 9.5px;
}

.provider-settings-modal.machine-settings-window {
  gap: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: min(680px, 90vh);
  overflow: hidden;
  padding: 0;
  width: min(780px, calc(100vw - 32px));
}

.machine-settings-titlebar {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  height: 38px;
  padding: 0 12px;
}

.machine-settings-titlebar strong {
  font-size: 12.5px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-settings-traffic-lights {
  align-items: center;
  display: flex;
  gap: 7px;
}

.machine-settings-traffic-lights i {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  height: 11px;
  width: 11px;
}

.provider-settings-modal .machine-settings-close {
  background: #ff5f57;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  box-sizing: border-box;
  height: 11px;
  padding: 0;
  width: 11px;
}

.provider-settings-modal .machine-settings-close:hover:not(:disabled),
.provider-settings-modal .machine-settings-close:focus-visible {
  background: #ff5f57;
  filter: brightness(0.85);
}

.machine-settings-titlebar-spacer {
  display: block;
}

.machine-settings-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}

.machine-settings-sidebar {
  background: rgba(255, 255, 255, 0.025);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
}

.provider-settings-modal .machine-settings-nav-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: rgba(222, 228, 236, 0.85);
  display: flex;
  font-size: 12px;
  gap: 8px;
  height: 32px;
  padding: 0 8px;
  text-align: left;
}

.provider-settings-modal .machine-settings-nav-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.provider-settings-modal .machine-settings-nav-item.selected,
.provider-settings-modal .machine-settings-nav-item.selected:hover:not(:disabled) {
  background: #2f6fde;
  color: #ffffff;
}

.machine-settings-nav-tile {
  align-items: center;
  border-radius: 6px;
  color: #ffffff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.machine-settings-nav-tile svg {
  height: 10px !important;
  width: 10px !important;
}

.machine-settings-nav-tile.overview {
  background: #8e8e93;
}

.machine-settings-nav-tile.appearance {
  background: #bf5af2;
}

.machine-settings-nav-tile.wallpaper {
  background: #32ade6;
}

.machine-settings-nav-tile.display {
  background: #0a84ff;
}

.machine-settings-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.machine-settings-content .appearance-hero {
  border-radius: 8px;
  margin: 12px 14px 0;
  padding: 12px 14px;
}

.machine-settings-content .appearance-hero-screen {
  height: 118px;
}

.machine-settings-sections {
  align-content: start;
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding: 12px 14px 16px;
}

.machine-settings-sections .appearance-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.machine-settings-info {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  display: grid;
  margin: 0;
  overflow: hidden;
}

.machine-settings-info > div {
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 12px;
  grid-template-columns: 88px 1fr;
  padding: 7px 11px;
}

.machine-settings-info > div:first-child {
  border-top: 0;
}

.machine-settings-info dt {
  color: rgba(213, 220, 230, 0.62);
  font-size: 11px;
}

.machine-settings-info dd {
  color: #e8edf4;
  font-size: 12px;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-settings-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.machine-settings-remote-badge {
  background: rgba(64, 132, 240, 0.2);
  border: 1px solid rgba(64, 132, 240, 0.45);
  border-radius: 4px;
  color: #9ec1ff;
  font-size: 9.5px;
  font-style: normal;
  margin-left: 8px;
  padding: 1px 5px;
  vertical-align: 1px;
}

/* The header-wide `.provider-group-header span` rule ellipsizes text with
   overflow: hidden, which would clip the tooltip to the avatar circle — these
   selectors must outrank it. The group header is pointer-events: none so
   drags reach the node; the avatar opts back in so its hover tooltip fires. */
.machine-owner,
.provider-group-header .machine-owner {
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: auto;
  position: relative;
}

.machine-owner-badge {
  border: 1px solid var(--provider-accent-border, rgba(255, 255, 255, 0.3));
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  flex: 0 0 auto;
  height: 22px;
  object-fit: cover;
  vertical-align: middle;
  width: 22px;
}

.machine-owner-verified {
  align-items: center;
  background: #1f7a33;
  border: 1px solid rgba(8, 12, 9, 0.9);
  border-radius: 50%;
  bottom: -2px;
  color: #eafbef;
  display: inline-flex;
  font-size: 6.5px;
  font-weight: 700;
  height: 9px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -2px;
  width: 9px;
}

.machine-owner-tooltip {
  background: rgba(14, 17, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
  left: 50%;
  opacity: 0;
  padding: 5px 9px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 7px);
  transform: translateX(-50%) translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
  z-index: var(--z-machine-popover);
}

.machine-owner:hover .machine-owner-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.machine-owner-tooltip strong {
  color: #e6edf3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.machine-owner-tooltip em {
  color: rgba(213, 220, 230, 0.55);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.machine-owner-tooltip em.verified {
  color: #56d364;
}

.machine-settings-owner-source {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: rgba(213, 220, 230, 0.6);
  font-size: 9.5px;
  font-style: normal;
  padding: 1px 5px;
}

.machine-settings-owner-source.verified {
  border-color: rgba(63, 185, 80, 0.45);
  color: #56d364;
}

/* Machine health LED: the calm summary of the lifecycle store. Needs the
   same header-span escape hatches as the owner avatar (pointer-events and
   overflow are locked down by `.provider-group-header span`). */
.machine-health,
.provider-group-header .machine-health {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: auto;
  position: relative;
}

.machine-health-led {
  background: #3fb950;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(63, 185, 80, 0.55);
  height: 8px;
  opacity: 0.9;
  width: 8px;
}

.machine-health.phase-reconnecting .machine-health-led {
  animation: machine-health-pulse 1.1s ease-in-out infinite;
  background: #e3b341;
  box-shadow: 0 0 5px rgba(227, 179, 65, 0.7);
}

.machine-health.phase-offline .machine-health-led {
  animation: none;
  background: #f85149;
  box-shadow: 0 0 5px rgba(248, 81, 73, 0.7);
}

/* Stale: the console itself is unreachable, so this machine cannot be
   observed — neutral gray, not alarm colors; the console banner carries
   the outage story. */
.machine-health.phase-stale .machine-health-led {
  animation: none;
  background: #8b949e;
  box-shadow: none;
}

.machine-health.recovered .machine-health-led {
  animation: machine-health-recovered 2.5s ease;
}

@keyframes machine-health-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes machine-health-recovered {
  0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.8); }
  60% { box-shadow: 0 0 0 7px rgba(63, 185, 80, 0); }
  100% { box-shadow: 0 0 4px rgba(63, 185, 80, 0.55); }
}

.machine-health-popover {
  background: rgba(14, 17, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
  left: 0;
  min-width: 215px;
  opacity: 0;
  overflow: visible;
  padding: 7px 10px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 7px);
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
  z-index: var(--z-machine-popover);
}

.machine-health:hover .machine-health-popover {
  opacity: 1;
  transform: translateY(0);
}

.machine-health-popover strong {
  color: #e6edf3;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.machine-health-row {
  color: rgba(213, 220, 230, 0.78);
  display: flex;
  font-size: 10px;
  gap: 10px;
  justify-content: space-between;
  letter-spacing: 0;
  overflow: visible;
  text-transform: none;
}

.machine-health-row em {
  color: rgba(213, 220, 230, 0.5);
  font-style: normal;
}

.machine-settings-nav-tile.health {
  background: #e0426f;
}

.machine-health-pane-status {
  align-items: center;
  display: flex;
  gap: 7px;
}

.machine-health-pane-dot {
  background: #3fb950;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(63, 185, 80, 0.55);
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.machine-health-pane-dot.phase-reconnecting {
  background: #e3b341;
  box-shadow: 0 0 5px rgba(227, 179, 65, 0.7);
}

.machine-health-pane-dot.phase-offline {
  background: #f85149;
  box-shadow: 0 0 5px rgba(248, 81, 73, 0.7);
}

.machine-health-pane-dot.phase-stale,
.machine-health-pane-dot.phase-unknown {
  background: #8b949e;
  box-shadow: none;
}

.machine-health-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  max-height: 190px;
  overflow-y: auto;
  padding: 0;
}

.machine-health-events li {
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  font-size: 11px;
  gap: 10px;
  padding: 3px 2px;
}

.machine-health-event-time {
  color: rgba(213, 220, 230, 0.5);
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
}

.machine-health-event-label {
  color: rgba(213, 220, 230, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-health-event-label.down {
  color: #ffc7a1;
}

.machine-health-event-label.up {
  color: #7ee787;
}

/* Console health banner: the single treatment for "the path to everything
   is down". Machines dim to stale instead of walking their own outage
   ladders; this banner carries the outage story. Sits above machine chrome,
   below console modals (1000+). */
.console-health-banner {
  align-items: baseline;
  background: rgba(14, 17, 22, 0.96);
  border: 1px solid rgba(227, 179, 65, 0.45);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  color: #e6edf3;
  display: flex;
  font-size: 12px;
  gap: 8px;
  left: 50%;
  max-width: min(640px, calc(100vw - 32px));
  padding: 8px 14px;
  position: fixed;
  top: 10px;
  transform: translateX(-50%);
  z-index: 900;
}

.console-health-banner strong {
  font-weight: 600;
}

.console-health-dot {
  align-self: center;
  animation: machine-health-pulse 1.1s ease-in-out infinite;
  background: #e3b341;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(227, 179, 65, 0.7);
  flex: 0 0 auto;
  height: 8px;
  width: 8px;
}

.console-health-detail {
  color: rgba(213, 220, 230, 0.7);
}

.console-health-banner.phase-offline {
  border-color: rgba(248, 81, 73, 0.5);
}

.console-health-banner.phase-offline .console-health-dot {
  animation: none;
  background: #f85149;
  box-shadow: 0 0 5px rgba(248, 81, 73, 0.7);
}

.console-health-banner.recovered {
  border-color: rgba(63, 185, 80, 0.5);
}

.console-health-banner.recovered .console-health-dot {
  animation: none;
  background: #3fb950;
  box-shadow: 0 0 4px rgba(63, 185, 80, 0.55);
}

/* "A newer console version is available" — shown when this tab's bundle no longer
   matches what the console serves (see lifecycle/update-banner). Reuses the
   console-health banner shell; a calm blue accent (an update, not an outage). */
.update-available-banner {
  align-items: center;
  background: rgba(14, 17, 22, 0.96);
  border: 1px solid rgba(56, 139, 253, 0.5);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  color: #e6edf3;
  display: flex;
  font-size: 12px;
  gap: 10px;
  left: 50%;
  max-width: min(640px, calc(100vw - 32px));
  padding: 8px 14px;
  position: fixed;
  top: 10px;
  transform: translateX(-50%);
  z-index: 901;
}

.update-available-banner .console-health-dot {
  animation: none;
  background: #388bfd;
  box-shadow: 0 0 5px rgba(56, 139, 253, 0.7);
}

.update-available-banner strong {
  font-weight: 600;
}

.update-available-banner button {
  background: #388bfd;
  border: 0;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
}

/* Localhost-only remote-access controller. The compact status item opens the
   same live provider controls available in Settings; neither requires restart. */
.statusbar-tunnel-wrap {
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
}

.statusbar-tunnel-wrap + .statusbar-account {
  margin-left: 0;
}

.statusbar-tunnel {
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 4px;
  color: #e6f1fb;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
  padding: 1px 8px;
}

.statusbar-tunnel:hover {
  background: rgba(255, 255, 255, 0.22);
}

.statusbar-tunnel-dot {
  background: rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.statusbar-tunnel.connected .statusbar-tunnel-dot {
  background: #7ee2a8;
}

.statusbar-tunnel.error .statusbar-tunnel-dot {
  background: #ff9b9b;
}

.statusbar-tunnel.reconnecting .statusbar-tunnel-dot,
.statusbar-tunnel.starting .statusbar-tunnel-dot {
  animation: statusbar-tunnel-pulse 1.4s ease-in-out infinite;
  background: #f1d58a;
}

@keyframes statusbar-tunnel-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.statusbar-tunnel-backdrop {
  inset: 0;
  position: fixed;
  z-index: 940;
}

.statusbar-tunnel-popover {
  background: rgba(14, 17, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  bottom: calc(100% + 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  color: #e6edf3;
  padding: 14px;
  position: absolute;
  right: 0;
  width: 286px;
  z-index: 950;
}

.tunnel-access-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tunnel-access-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.tunnel-access-heading > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tunnel-access-heading strong {
  color: #e6edf3;
  font-size: 13px;
}

.tunnel-access-heading span {
  color: #98a3b2;
  font-size: 11px;
}

.tunnel-access-switch {
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
}

.tunnel-access-switch input {
  cursor: pointer;
  height: 20px;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 36px;
  z-index: 1;
}

.tunnel-access-switch span {
  background: #4a515c;
  border-radius: 11px;
  display: block;
  height: 20px;
  position: relative;
  transition: background 120ms ease;
  width: 36px;
}

.tunnel-access-switch span::after {
  background: #f2f4f7;
  border-radius: 50%;
  content: "";
  height: 16px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 120ms ease;
  width: 16px;
}

.tunnel-access-switch input:checked + span {
  background: #2f8f5b;
}

.tunnel-access-switch input:checked + span::after {
  transform: translateX(16px);
}

.tunnel-access-switch input:disabled + span {
  cursor: default;
  opacity: 0.55;
}

.tunnel-access-provider {
  align-items: center;
  color: #c6cdd5;
  display: flex;
  font-size: 11px;
  gap: 10px;
  justify-content: space-between;
}

.tunnel-access-provider select {
  background: #1d232b;
  border: 1px solid #343c46;
  border-radius: 5px;
  color: #d8dee7;
  font: inherit;
  max-width: 185px;
  padding: 4px 22px 4px 7px;
}

.tunnel-access-detail,
.tunnel-access-error,
.tunnel-access-temporary {
  color: #8894a3;
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
}

.tunnel-access-error {
  color: #ff9b9b;
}

.tunnel-access-handoff {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.statusbar-tunnel-qr {
  background: #ffffff;
  border-radius: 6px;
  height: 180px;
  image-rendering: pixelated;
  padding: 8px;
  width: 180px;
}

.statusbar-tunnel-hint {
  color: rgba(213, 220, 230, 0.85);
  font-size: 12px;
  margin: 0;
  text-align: center;
}

.statusbar-tunnel-code {
  color: rgba(213, 220, 230, 0.85);
  font-size: 12px;
  margin: 0;
  text-align: center;
}

.statusbar-tunnel-code strong {
  color: #e6edf3;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  margin-left: 4px;
}

.statusbar-tunnel-link {
  color: #7ee2a8;
  font-size: 11px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusbar-tunnel-copy {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #e6edf3;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 8px;
}

.statusbar-tunnel-copy:hover {
  background: rgba(255, 255, 255, 0.18);
}

.remote-access-settings .tunnel-access-controls {
  padding: 4px 10px 12px;
}

.remote-access-settings .tunnel-access-handoff {
  align-items: flex-start;
}

/* While the console is unreachable the board is unobservable: machines dim
   to a stale treatment (opacity only — no filters, so solid machines still
   pay no compositing cost) and the banner explains why. */
.vscode-app.console-blind .provider-group-node {
  opacity: 0.75;
  transition: opacity 400ms ease;
}

:root {
  /* Machine chrome layering scale. Within a provider node: terminal overlays
     sit above xterm internals (which use up to 11), the floating header above
     those, and hover popovers above everything in the node. Console-level
     overlays (modals, dialogs) live at 70+ and are unaffected. */
  --z-terminal-overlay: 14;
  --z-machine-header: 20;
  --z-machine-popover: 40;
}

/* Machine identity icon: an accent-tinted glyph tile in the group header. */
.machine-icon-tile {
  align-items: center;
  background: var(--provider-accent-soft, rgba(255, 255, 255, 0.12));
  border-radius: 5px;
  color: var(--provider-accent, #d5dce6);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.machine-icon-swatch {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  color: #c6cdd5;
  display: inline-flex;
  font-size: 10px;
  justify-content: center;
}

.machine-icon-swatch.selected {
  background: var(--provider-accent-soft, rgba(255, 255, 255, 0.16));
  color: var(--provider-accent, #e6edf3);
}

.machine-settings-nav-tile.windows {
  background: #5e5ce6;
}

.machine-titlebar-options {
  display: inline-flex;
  gap: 0;
}

.machine-titlebar-option {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left-width: 0;
  color: #c6cdd5;
  cursor: pointer;
  font-size: 11px;
  padding: 5px 11px;
}

.machine-titlebar-option:first-child {
  border-left-width: 1px;
  border-radius: 6px 0 0 6px;
}

.machine-titlebar-option:last-child {
  border-radius: 0 6px 6px 0;
}

.machine-titlebar-option.selected {
  background: #2f6fde;
  border-color: #2f6fde;
  color: #ffffff;
}

/* Machine window chrome: the variables live on .provider-group-node, so all
   desktop windows under a machine inherit its chrome. Glass and frost are
   class-gated so solid machines pay no compositing cost. */
.provider-group-node .desktop-window {
  border-radius: var(--machine-window-radius, 2px);
}

.provider-group-node.machine-windows-glass .desktop-window {
  background: rgba(var(--machine-window-base, 8, 10, 15), var(--machine-window-alpha, 0.98));
}

.provider-group-node.machine-windows-glass .workspace,
.provider-group-node.machine-windows-glass .workspace .xterm,
.provider-group-node.machine-windows-glass .workspace .xterm-screen,
.provider-group-node.machine-windows-glass .workspace .xterm-viewport {
  background: color-mix(in srgb, var(--terminal-background, #050608) calc(var(--machine-window-alpha, 0.98) * 100%), transparent) !important;
}

.provider-group-node.machine-windows-glass .window-titlebar {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}

.provider-group-node.machine-windows-frosted .desktop-window {
  backdrop-filter: blur(var(--machine-window-frost, 0px)) saturate(1.05);
}

.provider-group-node.machine-titlebar-minimal .window-titlebar {
  background: rgba(255, 255, 255, 0.025);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

.provider-group-node.machine-titlebar-minimal .window-dot {
  opacity: 0;
  transition: opacity 120ms ease;
}

.provider-group-node.machine-titlebar-minimal .window-titlebar:hover .window-dot {
  opacity: 1;
}

.provider-group-node.machine-titlebar-plain .window-dot.red,
.provider-group-node.machine-titlebar-plain .window-dot.yellow,
.provider-group-node.machine-titlebar-plain .window-dot.green {
  background: rgba(255, 255, 255, 0.28);
}

/* Light mode: flips the machine's chrome; pairs with the Light terminal
   scheme, which the user picks separately. */
.provider-group-node.machine-light {
  background: rgba(255, 255, 255, 0.5);
}

.provider-group-node.machine-light .provider-group-header {
  background:
    linear-gradient(90deg, var(--provider-accent-soft, transparent), transparent 62%),
    rgba(244, 246, 248, 0.88);
  border-color: rgba(0, 0, 0, 0.16);
  color: #1c2128;
}

.provider-group-node.machine-light .provider-group-header span,
.provider-group-node.machine-light .provider-group-title {
  color: #3a414b;
}

.provider-group-node.machine-light .desktop-window {
  background: rgba(246, 247, 249, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.07),
    0 12px 34px rgba(0, 0, 0, 0.28);
}

.provider-group-node.machine-light .window-titlebar {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.025));
  border-bottom-color: rgba(0, 0, 0, 0.1);
  color: #1c2128;
}

.provider-group-node.machine-light .window-name {
  color: #2b313a;
}

/* Settings toggles and the auto accent action. */
.machine-settings-toggle {
  align-items: center;
  color: #c6cdd5;
  cursor: pointer;
  display: flex;
  font-size: 11.5px;
  gap: 8px;
  margin-top: 8px;
}

.machine-settings-toggle input {
  accent-color: #2f6fde;
}

.machine-auto-accent {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  color: #c6cdd5;
  cursor: pointer;
  font-size: 10px;
  height: 22px;
  padding: 0 9px;
}

.machine-auto-accent:disabled {
  cursor: default;
  opacity: 0.4;
}

.machine-auto-accent:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.13);
}

.machine-settings-nav-tile.terminal {
  background: #1f9e6e;
}

.machine-themes-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.machine-save-theme {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #c6cdd5;
  cursor: pointer;
  font-size: 10.5px;
  padding: 4px 10px;
}

.machine-save-theme:hover {
  background: rgba(255, 255, 255, 0.13);
}

.machine-save-theme-input {
  background: #0d1117;
  border: 1px solid var(--machine-accent, #4493f8);
  border-radius: 6px;
  color: #eceff4;
  font-size: 10.5px;
  padding: 4px 10px;
  width: 140px;
}

.machine-theme-custom {
  display: inline-flex;
  position: relative;
}

.machine-theme-delete {
  align-items: center;
  background: rgba(20, 24, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #c6cdd5;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  height: 17px;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  position: absolute;
  right: 3px;
  top: 3px;
  transition: opacity 100ms ease;
  width: 17px;
  z-index: 2;
}

.machine-theme-custom:hover .machine-theme-delete {
  opacity: 1;
}

.machine-owner-initials {
  align-items: center;
  background: var(--provider-accent-soft, rgba(255, 255, 255, 0.12));
  color: var(--provider-accent, #d5dce6);
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.04em;
}

.machine-settings-owner {
  align-items: center;
  display: flex;
  gap: 7px;
}

.machine-settings-hint {
  color: rgba(213, 220, 230, 0.55);
  font-size: 10.5px;
  line-height: 1.45;
  margin: 0;
}

.machine-theme-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.provider-settings-modal .machine-theme-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  display: grid;
  height: auto;
  overflow: hidden;
  padding: 0;
}

.provider-settings-modal .machine-theme-card:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

.provider-settings-modal .machine-theme-card.selected {
  border-color: #57a6ff;
  box-shadow: 0 0 0 1px #57a6ff;
}

.machine-theme-mock {
  display: grid;
  gap: 3px;
  padding: 8px 9px 0;
}

.machine-theme-mock-chip {
  background: linear-gradient(90deg, var(--provider-accent-soft, rgba(255, 255, 255, 0.08)), rgba(255, 255, 255, 0.04) 70%);
  border: 1px solid var(--provider-accent-border, rgba(255, 255, 255, 0.14));
  border-radius: 3px;
  display: block;
  height: 6px;
  width: 55%;
}

.machine-theme-mock-screen {
  align-items: center;
  border: 1px solid var(--provider-accent-border, rgba(255, 255, 255, 0.16));
  border-radius: 4px;
  box-shadow: 0 0 10px var(--provider-accent-glow, transparent);
  display: flex;
  height: 44px;
  justify-content: center;
}

.machine-theme-mock-terminal {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  display: grid;
  gap: 2px;
  padding: 4px 5px;
  width: 60%;
}

.machine-theme-mock-terminal span {
  border-radius: 1px;
  display: block;
  height: 2px;
}

.machine-theme-mock-terminal span:nth-child(1) {
  width: 70%;
}

.machine-theme-mock-terminal span:nth-child(2) {
  width: 50%;
}

.machine-theme-mock-terminal span:nth-child(3) {
  width: 62%;
}

.machine-theme-label {
  color: rgba(222, 228, 236, 0.85);
  display: block;
  font-size: 10px;
  padding: 6px 9px 7px;
  text-align: left;
}

.machine-display-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.machine-display-controls select {
  min-width: 170px;
}

.machine-display-custom {
  align-items: center;
  color: rgba(213, 220, 230, 0.7);
  display: inline-flex;
  font-size: 11px;
  gap: 6px;
}

.machine-display-custom input {
  background: #11141a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: #eef2f7;
  font: 12px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 30px;
  padding: 0 8px;
  width: 72px;
}

.machine-settings-window .provider-settings-error {
  padding: 6px 14px 0;
}

.machine-settings-window footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
}

.machine-settings-footer-hint {
  color: rgba(213, 220, 230, 0.45);
  font-size: 10.5px;
  margin-right: auto;
}

.provider-settings-modal button {
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: #eef2f7;
  cursor: pointer;
  font: 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 28px;
  padding: 0 10px;
}

.provider-settings-modal header button {
  width: 28px;
}

.provider-settings-modal footer {
  gap: 8px;
  justify-content: flex-end;
}

.provider-settings-modal button:hover:not(:disabled),
.provider-settings-modal button:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: 0;
}

.provider-settings-modal button[type="submit"] {
  background: #0a84ff;
  border-color: #2d9cff;
}

.provider-settings-modal button:disabled {
  cursor: default;
  opacity: 0.55;
}

.provider-group-header .provider-version {
  flex: 0 0 auto;
  text-align: left;
}

.provider-type-icon {
  display: block;
  flex: 0 0 auto;
  height: 14px !important;
  width: 14px !important;
}

.provider-type-icon.docker {
  color: var(--provider-accent, #2496ed);
}

.provider-type-icon.iterm {
  color: var(--provider-accent, #9cdcfe);
}

.provider-type-icon.virtual-tmux {
  color: var(--provider-accent, #7fb069);
}

.provider-type-icon.unknown {
  color: var(--provider-accent, #7f8997);
}

.provider-group-screens {
  align-items: flex-start;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.screen-node {
  backdrop-filter: blur(14px) saturate(1.05);
  background: rgba(7, 9, 12, 0.34);
  border: 1px solid var(--tf-glass-border-soft);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 18px 46px rgba(0, 0, 0, 0.46);
  box-sizing: content-box;
  position: relative;
}

.screen-node.selected {
  border-color: var(--tf-accent-blue);
}

.screen-node-header {
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.055));
  border: 1px solid var(--tf-glass-border-soft);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-sizing: border-box;
  color: var(--tf-wave-text);
  display: flex;
  font-size: 12px;
  height: 28px;
  justify-content: space-between;
  left: -1px;
  padding: 0 10px;
  position: absolute;
  right: -1px;
  top: -28px;
}

.screen-node-header div {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.screen-node-header strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-node-header span {
  color: rgba(184, 192, 202, 0.82);
  display: block;
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen-node-header > div {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.screen-action {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: var(--tf-wave-text);
  cursor: pointer;
  display: inline-flex;
  font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 20px;
  justify-content: center;
  padding: 0;
  width: 20px;
}

.screen-action:hover {
  background: rgba(255, 255, 255, 0.13);
}

.space-dock {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  left: 50%;
  pointer-events: auto;
  position: absolute;
  transform: translateX(-50%) scale(var(--space-dock-scale, 1));
  transform-origin: bottom center;
  z-index: 70;
}

.space-dock-trigger {
  align-items: center;
  backdrop-filter: blur(18px) saturate(1.2);
  background: rgba(238, 242, 247, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow:
    0 -5px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  color: #1f242b;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0 0 3px;
  transition: transform 140ms ease, background 140ms ease;
  width: 56px;
}

.space-dock-trigger svg {
  display: block;
  height: 13px !important;
  width: 13px !important;
}

.space-dock:hover .space-dock-trigger,
.space-dock:focus-within .space-dock-trigger {
  background: rgba(250, 252, 255, 0.94);
  transform: translateY(-1px);
}

.space-dock-actions {
  align-items: end;
  backdrop-filter: blur(22px) saturate(1.35);
  background: rgba(245, 247, 250, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  display: flex;
  gap: 8px;
  opacity: 0;
  padding: 8px;
  pointer-events: none;
  transform: translateY(7px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 130ms ease, transform 130ms ease;
}

.space-dock:hover .space-dock-actions,
.space-dock:has(.space-dock-trigger:hover) .space-dock-actions,
.space-dock:focus-within .space-dock-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.space-dock-actions button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #20242a;
  cursor: pointer;
  display: grid;
  flex: 0 0 54px;
  gap: 5px;
  grid-template-rows: 34px 12px;
  justify-items: center;
  min-width: 54px;
  padding: 4px 4px 5px;
}

.space-dock-actions button:hover,
.space-dock-actions button:focus-visible {
  background: rgba(255, 255, 255, 0.74);
  outline: none;
}

.space-dock-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.space-dock-icon-tile {
  align-items: center;
  background: linear-gradient(180deg, #ffffff, #dfe5ee);
  border: 1px solid rgba(70, 80, 95, 0.16);
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(28, 35, 48, 0.18);
  box-sizing: border-box;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 8px;
  width: 34px;
}

.space-dock-icon-tile svg {
  background: none;
  border: 0;
  box-shadow: none;
  display: block;
  height: 16px !important;
  padding: 0;
  width: 16px !important;
}

.space-dock-actions strong {
  font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.display-frame {
  backdrop-filter: blur(8px) saturate(0.95);
  background: rgba(13, 15, 19, 0.18);
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  cursor: grab;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

.display-frame:active {
  cursor: grabbing;
}

.desktop {
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    rgba(7, 9, 13, 0.13);
  background-size: 48px 48px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.empty-screen-label {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: rgba(184, 192, 202, 0.78);
  display: flex;
  font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  inset: 32px;
  justify-content: center;
  position: absolute;
  z-index: 1;
}

.screen-resize-handle {
  bottom: 8px;
  color: #6f7886;
  cursor: nwse-resize;
  height: 18px;
  opacity: 0.8;
  position: absolute;
  right: 8px;
  width: 18px;
  z-index: 4;
}

.screen-resize-handle:hover {
  color: #9aa7b6;
}

.screen-resize-handle svg {
  display: block;
  height: 18px !important;
  width: 18px !important;
}

.desktop-window {
  background: rgba(8, 10, 15, 0.98);
  border: 0;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 34px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
}

.desktop-window.live {
  border-color: #79b8ff;
}

/* A kept-open failed launch: a red frame + a ribbon naming the failure, so a
   broken launch reads as broken on the board (matches the errored triage state). */
.desktop-window.launch-errored {
  border-color: #f85149;
}

.window-launch-error {
  align-items: center;
  background: rgba(248, 81, 73, 0.16);
  border-bottom: 1px solid rgba(248, 81, 73, 0.5);
  color: #ffb3ad;
  display: flex;
  flex: 0 0 auto;
  font-size: 11px;
  gap: 6px;
  overflow: hidden;
  padding: 4px 8px;
  white-space: nowrap;
}

.window-launch-error-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-window.selected-session {
  box-shadow:
    0 0 0 var(--selection-stroke, 3px) var(--tf-accent-blue),
    0 0 0 var(--selection-glow, 6px) rgba(121, 184, 255, 0.24),
    0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

.desktop-window.selected-terminal {
  box-shadow:
    0 0 0 var(--selection-stroke, 3px) var(--tf-accent-blue-strong),
    0 0 0 var(--selection-glow, 6px) rgba(0, 122, 204, 0.28),
    0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 6;
}

.desktop-window.selected-window {
  box-shadow:
    0 0 0 var(--selection-stroke, 3px) var(--tf-accent-blue-strong),
    0 0 0 var(--selection-glow, 6px) rgba(0, 122, 204, 0.28),
    0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 6;
}

.window-resize-handle {
  position: absolute;
  z-index: 4;
}

.window-resize-handle-bottom {
  bottom: 0;
  cursor: ns-resize;
  height: 8px;
  left: 0;
  right: 12px;
}

.window-resize-handle-corner {
  bottom: 0;
  cursor: nwse-resize;
  height: 14px;
  right: 0;
  width: 14px;
}

.window-resize-handle-corner::after {
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  border-right: 1px solid rgba(255, 255, 255, 0.42);
  bottom: 4px;
  content: "";
  height: 6px;
  position: absolute;
  right: 4px;
  width: 6px;
}

.window-resize-handle-right {
  bottom: 12px;
  cursor: ew-resize;
  right: 0;
  top: 24px;
  width: 8px;
}

.app-fullscreen-layer {
  background: #0d1117;
  inset: 0;
  position: fixed;
  z-index: 1000;
}

.conversation-reader-layer {
  align-items: center;
  background: rgba(5, 8, 12, 0.66);
  display: flex;
  justify-content: center;
  padding: 40px;
}

.conversation-reader {
  background: #0d1117;
  border: 1px solid #2b333d;
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  /* Fixed to the padded layer (not auto) so the reader is the same size on
     every open — without an explicit height it shrink-wraps the transcript and
     a short chat shows as a tiny box, a long one near-fullscreen. The body
     scrolls within this frame. */
  height: 100%;
  max-width: 900px;
  overflow: hidden;
  width: 100%;
}

.conversation-reader-header {
  align-items: center;
  border-bottom: 1px solid #20262e;
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 12px 14px;
}

.conversation-reader-heading {
  display: grid;
  gap: 2px;
  margin-right: auto;
  min-width: 0;
}

.conversation-reader-heading strong {
  color: #eef3f8;
  font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-reader-heading span {
  color: #8793a2;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-reader-badge {
  background: #262b32;
  border: 1px solid #3a444f;
  border-radius: 999px;
  color: #aeb8c4;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  text-transform: uppercase;
}

/* Subagents panel at the top of the reader body: a list of the chat's sidechain
   subagents, each expandable into its own transcript rendered in place. */
.reader-subagents {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #2b323b;
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  padding: 8px;
}

.reader-subagents-title {
  color: #8793a2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 4px 2px;
  text-transform: uppercase;
}

.reader-subagents-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reader-subagent-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #d9dde4;
  cursor: pointer;
  display: flex;
  gap: 7px;
  padding: 5px 7px;
  text-align: left;
  width: 100%;
}

.reader-subagent-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.reader-subagent-chevron {
  color: #6f7d8c;
  flex: 0 0 auto;
  font-size: 9px;
  width: 9px;
}

.reader-subagent-icon {
  flex: 0 0 auto;
  font-size: 11px;
}

.reader-subagent-toggle strong {
  color: #eef3f8;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
}

.reader-subagent-summary {
  color: #8793a2;
  flex: 1 1 auto;
  font-size: 11px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-subagent-body {
  border-left: 2px solid #2f6feb55;
  margin: 2px 0 6px 12px;
  padding: 4px 0 4px 12px;
}

.conversation-reader-resume {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.conversation-reader-target {
  background: #1f2329;
  border: 1px solid #3a444f;
  border-radius: 4px;
  color: #e6ebf1;
  font-size: 11px;
  max-width: 140px;
  padding: 2px 6px;
}

.conversation-reader-resume-button {
  background: #1f6feb33;
  border: 1px solid #388bfd66;
  border-radius: 4px;
  color: #cfe2ff;
  cursor: pointer;
  font-size: 11px;
  line-height: 18px;
  padding: 1px 9px;
  white-space: nowrap;
}

.conversation-reader-resume-button:hover:not(:disabled) {
  background: #1f6feb55;
  color: #fff;
}

.conversation-reader-resume-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.conversation-reader-close {
  background: #262b32;
  border: 1px solid #3a444f;
  border-radius: 4px;
  color: #c2ccd8;
  cursor: pointer;
  font-size: 12px;
  line-height: 18px;
  padding: 0 8px;
}

.conversation-reader-close:hover {
  background: #2f3640;
  color: #e6ebf1;
}

.conversation-reader-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
}

.desktop-window.fullscreen-panel {
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 80px rgba(0, 0, 0, 0.62);
  height: 100dvh !important;
  left: 0 !important;
  position: fixed !important;
  top: 0 !important;
  width: 100vw !important;
  z-index: 1000;
}

.vscode-app:has(.desktop-window.fullscreen-panel) .activity-bar {
  display: none;
}

.vscode-app:has(.desktop-window.fullscreen-panel) .workbench-sidebar,
.vscode-app:has(.desktop-window.fullscreen-panel) .statusbar {
  display: none;
}

.desktop-window.fullscreen-panel .window-titlebar {
  height: 32px !important;
  left: 0 !important;
  padding-left: 112px;
  top: 0 !important;
  width: 100% !important;
}

.desktop-window.fullscreen-panel .window-dot.red {
  height: 12px !important;
  left: 14px !important;
  top: 10px !important;
  width: 12px !important;
}

.desktop-window.fullscreen-panel .window-dot.yellow {
  height: 12px !important;
  left: 34px !important;
  top: 10px !important;
  width: 12px !important;
}

.desktop-window.fullscreen-panel .window-dot.green {
  cursor: pointer;
  height: 12px !important;
  left: 54px !important;
  top: 10px !important;
  width: 12px !important;
}

.desktop-window.fullscreen-panel .window-back-button {
  display: inline-flex;
}

.desktop-window.fullscreen-panel .agent-chat-view,
.desktop-window.fullscreen-panel .file-view,
.desktop-window.fullscreen-panel .folder-view,
.desktop-window.fullscreen-panel .iframe-view,
.desktop-window.fullscreen-panel .workspace {
  height: calc(100% - 32px) !important;
  left: 0 !important;
  top: 32px !important;
  width: 100% !important;
}

.desktop-window.remote-selected {
  box-shadow:
    0 0 0 var(--selection-stroke, 3px) var(--remote-selection-color, #79b8ff),
    0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

.desktop-window.remote-selected::after {
  background: var(--remote-selection-color, #79b8ff);
  border-radius: 3px 3px 0 0;
  bottom: 100%;
  color: #ffffff;
  content: attr(data-remote-selection-user);
  font-size: 11px;
  font-weight: 650;
  left: 0;
  max-width: 160px;
  overflow: hidden;
  padding: 2px 5px;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-titlebar {
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
  color: var(--tf-wave-text);
  display: flex;
  font: 12px/24px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  justify-content: flex-start;
  min-height: 0;
  padding: 0 8px 0 82px;
  position: absolute;
  z-index: 2;
}

.window-dot {
  border: 0;
  border-radius: 50%;
  cursor: default;
  display: inline-block;
  padding: 0;
  position: absolute;
}

.window-dot.red {
  background: #ff5f57;
}

.window-dot.yellow {
  background: #febc2e;
}

.window-dot.green {
  background: #28c840;
}

.window-back-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(238, 242, 248, 0.92);
  cursor: pointer;
  display: none;
  flex: 0 0 26px;
  height: 24px;
  justify-content: center;
  margin-left: -28px;
  margin-right: 8px;
  padding: 0;
  width: 26px;
}

.window-back-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.window-back-button svg {
  height: 12px !important;
  width: 12px !important;
}

.window-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-view-toggle {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 18px;
  margin-left: 8px;
  padding: 0;
  position: relative;
  transition: background 0.18s ease, border-color 0.18s ease;
  width: 38px;
}

.window-view-toggle[aria-checked="true"] {
  background: rgba(70, 132, 196, 0.55);
  border-color: rgba(122, 177, 232, 0.5);
}

.window-view-toggle-side {
  color: rgba(238, 242, 248, 0.45);
  height: 8px !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.18s ease;
  width: 8px !important;
}

.window-view-toggle-side.terminal {
  left: 5px;
}

.window-view-toggle-side.chat {
  right: 5px;
}

.window-view-toggle[aria-checked="false"] .window-view-toggle-side.terminal,
.window-view-toggle[aria-checked="true"] .window-view-toggle-side.chat {
  opacity: 0;
}

.window-view-toggle-knob {
  align-items: center;
  background: #f3f6fa;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #2b313a;
  display: flex;
  height: 14px;
  justify-content: center;
  left: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.18s ease;
  width: 14px;
}

.window-view-toggle[aria-checked="true"] .window-view-toggle-knob {
  color: #2b5d8f;
  left: calc(100% - 15px);
}

.window-view-toggle-knob svg {
  height: 8px !important;
  width: 8px !important;
}

.window-browser-actions {
  align-items: center;
  display: flex;
  gap: 4px;
  margin-left: auto;
  pointer-events: auto;
}

.window-browser-action {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(238, 242, 248, 0.92);
  cursor: pointer;
  display: flex;
  height: 22px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.window-browser-action:hover {
  background: rgba(255, 255, 255, 0.16);
}

.window-browser-action svg {
  height: 11px !important;
  width: 11px !important;
}

.window-session-badge {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 9px;
  line-height: 1;
  margin-left: auto;
  padding: 3px 6px;
}

.window-session-badge.has-session {
  background: #294869;
  color: #cfe6ff;
}

.window-session-badge.no-session {
  background: #3a3f47;
  color: #b5beca;
}

.window-body {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  overflow: hidden;
}

.iterm-window-bitmap {
  display: block;
  height: 100%;
  image-rendering: auto;
  inset: 0;
  object-fit: fill;
  position: absolute;
  user-select: none;
  width: 100%;
}

.iterm-close-overlay,
.iterm-drag-overlay {
  background: transparent;
  border: 0;
  padding: 0;
  position: absolute;
  z-index: 3;
}

.iterm-close-overlay {
  cursor: default;
}

.iterm-drag-overlay {
  cursor: move;
}

.workspace {
  background: var(--terminal-background, #050608);
  color: var(--terminal-foreground, #e6edf3);
  overflow: hidden;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  transform-origin: top left;
  width: 100%;
  height: 100%;
}

/* Connection treatment escalates by sustained outage duration (the tier),
   never by raw socket state — sub-grace blips show nothing at all. */
.workspace[data-terminal-tier="chip"],
.workspace[data-terminal-tier="veil"],
.workspace[data-terminal-tier="lost"] {
  box-shadow: inset 0 0 0 2px rgba(242, 204, 96, 0.8);
}

.workspace[data-terminal-tier="lost"],
.workspace[data-terminal-tier="ended"] {
  box-shadow: inset 0 0 0 2px rgba(255, 107, 107, 0.88);
}

.terminal-connection-badge {
  align-items: center;
  background: rgba(18, 20, 22, 0.86);
  border: 1px solid rgba(242, 204, 96, 0.62);
  border-radius: 4px;
  color: #ffe3a1;
  display: inline-flex;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  gap: 6px;
  padding: 5px 7px;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 5;
}

.workspace[data-terminal-state="disconnected"] .terminal-connection-badge {
  border-color: rgba(255, 107, 107, 0.72);
  color: #ffd8d5;
}

.terminal-recovered-toast {
  animation: terminal-toast-fade 4.5s ease forwards;
  border-color: rgba(63, 185, 80, 0.6);
  color: #7ee787;
}

@keyframes terminal-toast-fade {
  0% { opacity: 0; transform: translateY(-3px); }
  8% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

/* Transient terminal effects: a tint overlay mirroring the tmux pane's
   window-active-style so the browser shows the same flash a native tmux client
   does. Class-gated so unaffected terminals pay no compositing cost; the server
   drops the class once the effect expires. */
.desktop-window.terminal-effect::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: var(--z-terminal-overlay);
}

.desktop-window.terminal-effect-flash::after {
  background: rgba(220, 38, 38, 0.4);
}

.desktop-window.terminal-effect-highlight::after {
  background: rgba(34, 197, 94, 0.32);
}

.desktop-window.terminal-effect-dim::after {
  background: rgba(0, 0, 0, 0.48);
}

.terminal-veil {
  align-items: flex-end;
  background: rgba(7, 9, 13, 0.45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding-bottom: 18px;
  pointer-events: none;
  position: absolute;
  z-index: var(--z-terminal-overlay);
}

.workspace[data-terminal-tier="lost"] .terminal-veil {
  background: rgba(7, 9, 13, 0.62);
}

.terminal-veil-card {
  align-items: center;
  background: rgba(16, 19, 24, 0.94);
  border: 1px solid rgba(242, 204, 96, 0.45);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: #ffe3a1;
  display: flex;
  flex-direction: column;
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  gap: 5px;
  padding: 10px 14px;
  pointer-events: auto;
}

.workspace[data-terminal-tier="lost"] .terminal-veil-card {
  border-color: rgba(255, 107, 107, 0.55);
  color: #ffd8d5;
}

.terminal-veil-card strong {
  align-items: center;
  display: inline-flex;
  font-weight: 600;
  gap: 7px;
}

.terminal-veil-card > span {
  color: rgba(213, 220, 230, 0.62);
  font-size: 10.5px;
}

.terminal-veil-card button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  color: #e6edf3;
  cursor: pointer;
  font: 11px/1 inherit;
  margin-top: 2px;
  padding: 5px 12px;
}

.terminal-veil-card button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.terminal-connection-dot {
  animation: loading-pulse 900ms ease-in-out infinite;
  background: currentColor;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.workspace[data-terminal-state="disconnected"] .terminal-connection-dot {
  animation: none;
}

.workspace .xterm {
  background: var(--terminal-background, #050608);
  color: var(--terminal-foreground, #e6edf3);
  height: 100%;
}

.workspace .xterm-viewport {
  background-color: var(--terminal-background, #050608) !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

.workspace .xterm-screen {
  background: var(--terminal-background, #050608);
}

.workspace .xterm .scrollbar.vertical {
  opacity: 1 !important;
  visibility: visible !important;
  width: 6px !important;
}

.workspace .xterm .scrollbar.vertical .slider {
  background: rgba(232, 232, 232, 0.42) !important;
  width: 100% !important;
}

.workspace .xterm .scrollbar.vertical:hover .slider,
.workspace .xterm .scrollbar.vertical .slider.active {
  background: rgba(232, 232, 232, 0.72) !important;
}

.terminal-mobile-command {
  display: none;
}

.agent-chat-view {
  background: #101216;
  box-sizing: border-box;
  color: #eceff4;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  position: absolute;
}

.agent-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  padding: 14px;
}

.agent-chat-message {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-width: min(78%, 680px);
}

.agent-chat-message.user {
  align-self: flex-end;
}

.agent-chat-message.assistant {
  align-self: flex-start;
}

.agent-chat-activity {
  align-self: stretch;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  box-sizing: border-box;
  color: #edf2f7;
  flex: 0 0 auto;
  overflow: hidden;
}

.agent-chat-activity header {
  align-items: center;
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  gap: 8px;
  grid-template-columns: 18px auto minmax(0, 1fr) auto;
  min-height: 30px;
  padding: 5px 8px;
}

.agent-chat-activity header span {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(238, 242, 248, 0.86);
  display: inline-flex;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.agent-chat-activity header span svg {
  display: block;
  height: 10px !important;
  width: 10px !important;
}

.agent-chat-activity header strong,
.agent-chat-activity header em,
.agent-chat-activity header time {
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-activity header strong {
  color: #f5f7fb;
}

.agent-chat-activity header em,
.agent-chat-activity header time {
  color: rgba(222, 229, 238, 0.58);
  font-style: normal;
}

.agent-chat-activity-body {
  padding: 8px;
}

.agent-chat-activity-body p {
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-activity-body pre,
.agent-chat-activity-body a {
  color: rgba(240, 246, 252, 0.92);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.agent-chat-activity-body pre {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-activity-body a {
  overflow-wrap: anywhere;
}

.agent-chat-activity.tone-shell {
  border-color: rgba(88, 166, 255, 0.24);
}

.agent-chat-activity.tone-shell header {
  background: rgba(46, 117, 182, 0.16);
}

.agent-chat-activity.tone-file-read,
.agent-chat-activity.tone-file-edit {
  border-color: rgba(210, 168, 255, 0.22);
}

.agent-chat-activity.tone-discovery,
.agent-chat-activity.tone-planning,
.agent-chat-activity.tone-structured {
  border-color: rgba(187, 128, 255, 0.24);
}

.agent-chat-activity.tone-search,
.agent-chat-activity.tone-web {
  border-color: rgba(227, 179, 65, 0.24);
}

.agent-chat-activity.tone-browser {
  border-color: rgba(86, 211, 100, 0.22);
}

.agent-chat-activity.tone-task,
.agent-chat-activity.tone-subagent,
.agent-chat-activity.tone-workflow {
  border-color: rgba(57, 197, 207, 0.24);
}

.agent-chat-activity.tone-human,
.agent-chat-activity.tone-monitor,
.agent-chat-activity.tone-scheduler {
  border-color: rgba(255, 171, 112, 0.25);
}

.agent-chat-activity.tone-error {
  border-color: rgba(255, 123, 114, 0.42);
}

.agent-chat-activity.tone-error header {
  background: rgba(248, 81, 73, 0.16);
}

.agent-chat-activity.tone-warning {
  border-color: rgba(227, 179, 65, 0.34);
}

.agent-chat-activity.tone-checkpoint,
.agent-chat-activity.tone-link,
.agent-chat-activity.tone-attachment,
.agent-chat-activity.tone-mcp {
  border-color: rgba(121, 184, 255, 0.28);
}

.agent-chat-task-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.agent-chat-task-list li {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 76px minmax(0, 1fr);
}

.agent-chat-task-list span {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(238, 242, 248, 0.72);
  font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 4px 6px;
  text-align: center;
  text-transform: uppercase;
}

.agent-chat-task-list li.status-completed span {
  background: rgba(63, 185, 80, 0.18);
  color: #b8f2c1;
}

.agent-chat-task-list li.status-in-progress span {
  background: rgba(88, 166, 255, 0.18);
  color: #c9e4ff;
}

.agent-chat-tool-exchange {
  display: grid;
  gap: 8px;
}

.agent-chat-tool-exchange > div {
  background: rgba(5, 7, 10, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  overflow: hidden;
}

.agent-chat-tool-exchange header {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 242, 248, 0.68);
  display: flex;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  gap: 8px;
  justify-content: space-between;
  padding: 6px 8px;
  text-transform: uppercase;
}

.agent-chat-tool-exchange pre,
.agent-chat-tool-exchange p {
  color: rgba(240, 246, 252, 0.9);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-meta {
  align-items: center;
  color: rgba(222, 229, 238, 0.58);
  display: flex;
  font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  gap: 8px;
  margin: 0 2px 4px;
}

.agent-chat-message.user .agent-chat-meta {
  justify-content: flex-end;
}

.agent-chat-bubble {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-sizing: border-box;
  font: 12px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  max-width: 100%;
  padding: 9px 11px;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-bubble > * + * {
  margin-top: 8px;
}

.agent-chat-text {
  margin: 0;
}

.agent-chat-thinking {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: rgba(238, 242, 248, 0.82);
  padding: 7px 8px;
}

.agent-chat-thinking summary {
  cursor: pointer;
  font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

.agent-chat-thinking p {
  margin: 7px 0 0;
  white-space: pre-wrap;
}

.agent-chat-tool {
  background: rgba(5, 7, 10, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  overflow: hidden;
}

.agent-chat-tool header {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 6px 8px;
}

.agent-chat-tool header span,
.agent-chat-tool header strong {
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.agent-chat-tool header span {
  color: rgba(238, 242, 248, 0.66);
  text-transform: uppercase;
}

.agent-chat-tool header strong {
  color: #eef2f8;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-chat-tool pre {
  color: rgba(240, 246, 252, 0.9);
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.agent-chat-tool.use {
  border-color: rgba(88, 166, 255, 0.28);
}

.agent-chat-tool.use header {
  background: rgba(46, 117, 182, 0.18);
}

.agent-chat-tool.result {
  border-color: rgba(86, 211, 100, 0.2);
}

.agent-chat-tool.result header {
  background: rgba(63, 185, 80, 0.12);
}

.agent-chat-tool.result.error {
  border-color: rgba(255, 123, 114, 0.32);
}

.agent-chat-tool.result.error header {
  background: rgba(248, 81, 73, 0.16);
}

.agent-chat-tool.unknown {
  border-color: rgba(227, 179, 65, 0.28);
}

.agent-chat-message.assistant .agent-chat-bubble {
  background: rgba(255, 255, 255, 0.07);
  color: #eef2f8;
}

.agent-chat-message.user .agent-chat-bubble {
  background: rgba(30, 112, 205, 0.54);
  border-color: rgba(107, 166, 232, 0.28);
  color: #f7fbff;
}

.agent-chat-empty {
  align-self: center;
  color: rgba(222, 229, 238, 0.64);
  flex: 0 0 auto;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin: auto;
}

.agent-chat-composer {
  align-items: flex-end;
  background: rgba(16, 18, 22, 0.92);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.agent-chat-composer textarea {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-sizing: border-box;
  color: #f4f7fb;
  field-sizing: content;
  font: 12px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  max-height: 88px;
  min-height: 34px;
  outline: none;
  padding: 8px 10px;
  resize: none;
}

.agent-chat-composer textarea:focus {
  border-color: rgba(105, 169, 236, 0.72);
  box-shadow: 0 0 0 2px rgba(70, 132, 196, 0.22);
}

.agent-chat-composer button {
  align-items: center;
  background: #2d7bd8;
  border: 0;
  border-radius: 7px;
  color: white;
  display: flex;
  height: 34px;
  justify-content: center;
  min-height: 34px;
  padding: 0;
  width: 34px;
}

.agent-chat-composer button:disabled {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.42);
}

.iterm-snapshot {
  color: #e8e8e8;
  font-family: "Cascadia Code", Consolas, Menlo, Monaco, "SFMono-Regular", monospace;
  font-size: 12px;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  white-space: pre;
}

.folder-view {
  background: rgba(246, 247, 249, 0.96);
  box-sizing: border-box;
  color: #202124;
  display: flex;
  flex-direction: column;
  font: 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
  position: absolute;
}

.file-view {
  background: #0f141a;
  color: #d7dde6;
  overflow: hidden;
  position: absolute;
}

.iframe-view {
  background: #d7dbe2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
}

.iframe-browser-bar {
  align-items: center;
  background: #eef0f3;
  border-bottom: 1px solid rgba(92, 101, 116, 0.28);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 42px;
  gap: 8px;
  min-width: 0;
  padding: 7px 10px;
}

.iframe-refresh-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #4b5563;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 28px;
  height: 28px;
  justify-content: center;
  padding: 0;
  width: 28px;
}

.iframe-refresh-button:hover {
  background: rgba(63, 74, 89, 0.1);
  color: #1f2937;
}

.iframe-refresh-button svg {
  fill: currentColor;
  height: 16px !important;
  width: 16px !important;
}

.iframe-address-form {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.iframe-address-field {
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(119, 129, 145, 0.28);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  color: #333b47;
  display: block;
  flex: 1 1 auto;
  font: 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 28px;
  min-width: 0;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.iframe-address-field:focus {
  border-color: rgba(46, 120, 210, 0.62);
  box-shadow: 0 0 0 2px rgba(46, 120, 210, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.iframe-view iframe {
  border: 0;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.finder-toolbar {
  align-items: center;
  background: rgba(246, 247, 249, 0.88);
  border-bottom: 1px solid rgba(167, 173, 184, 0.45);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 44px;
  gap: 7px;
  min-width: 0;
  padding: 7px 10px;
}

.finder-nav-button,
.finder-tool-button,
.finder-view-switch button {
  align-items: center;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(150, 156, 166, 0.35);
  border-radius: 6px;
  box-sizing: border-box;
  color: #2f3338;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 26px;
  justify-content: center;
  padding: 0;
  width: 30px;
}

.finder-nav-button svg,
.finder-tool-button svg,
.finder-view-switch button svg,
.finder-search svg {
  display: block;
  height: 13px !important;
  width: 13px !important;
}

.finder-nav-button:disabled,
.finder-tool-button:disabled {
  color: #a5abb4;
  cursor: default;
}

.finder-title {
  color: #23272d;
  font-size: 13px;
  font-weight: 650;
  margin-left: 4px;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.finder-view-switch {
  align-items: center;
  background: rgba(230, 233, 238, 0.82);
  border: 1px solid rgba(150, 156, 166, 0.32);
  border-radius: 7px;
  display: inline-flex;
  overflow: hidden;
}

.finder-view-switch button {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 28px;
}

.finder-view-switch button.active {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.finder-tool-button.active {
  background: #0a84ff;
  border-color: #0a84ff;
  color: #ffffff;
}

.finder-search {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(150, 156, 166, 0.34);
  border-radius: 7px;
  color: #69717c;
  display: flex;
  flex: 0 1 150px;
  gap: 5px;
  height: 26px;
  min-width: 82px;
  padding: 0 8px;
}

.finder-search input {
  background: transparent;
  border: 0;
  color: #202124;
  font: inherit;
  min-width: 0;
  outline: none;
  width: 100%;
}

.finder-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.finder-sidebar {
  background: rgba(224, 229, 237, 0.76);
  border-right: 1px solid rgba(167, 173, 184, 0.45);
  box-sizing: border-box;
  flex: 0 0 160px;
  overflow: auto;
  padding: 12px 8px;
}

.finder-sidebar h4 {
  color: #7b838d;
  font-size: 10px;
  font-weight: 700;
  margin: 8px 8px 4px;
  text-transform: uppercase;
}

.finder-sidebar button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #252a31;
  display: flex;
  font: inherit;
  gap: 7px;
  height: 24px;
  padding: 0 8px;
  text-align: left;
  width: 100%;
}

.finder-sidebar button.active {
  background: rgba(0, 122, 255, 0.18);
}

.finder-sidebar button:disabled {
  color: #8d949e;
}

.finder-sidebar-icon {
  color: #3385ff;
  height: 14px !important;
  width: 14px !important;
}

.finder-context-menu {
  background: rgba(246, 247, 249, 0.96);
  border: 1px solid rgba(142, 149, 160, 0.42);
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  min-width: 198px;
  padding: 5px;
  position: fixed;
  z-index: 40;
}

.finder-context-menu button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: #202124;
  display: block;
  font: 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 6px 9px;
  text-align: left;
  width: 100%;
}

.finder-context-menu button:hover,
.finder-context-menu button:focus {
  background: #0a84ff;
  color: #ffffff;
  outline: none;
}

.finder-context-separator {
  background: rgba(142, 149, 160, 0.35);
  display: block;
  height: 1px;
  margin: 5px 4px;
}

.finder-content {
  background: #fbfbfc;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.folder-view * {
  scrollbar-color: rgba(90, 96, 106, 0.12) transparent;
  scrollbar-width: thin;
}

.folder-view *::-webkit-scrollbar {
  height: 3px;
  width: 3px;
}

.folder-view *::-webkit-scrollbar-track {
  background: transparent;
}

.folder-view *::-webkit-scrollbar-thumb {
  background: rgba(90, 96, 106, 0.10);
  border-radius: 999px;
}

.folder-view:hover * {
  scrollbar-color: rgba(90, 96, 106, 0.26) transparent;
}

.folder-view:hover *::-webkit-scrollbar-thumb {
  background: rgba(90, 96, 106, 0.24);
}

.folder-view *::-webkit-scrollbar-thumb:hover {
  background: rgba(90, 96, 106, 0.38);
}

.finder-pathbar {
  align-items: center;
  border-bottom: 1px solid #e1e4e8;
  color: #6b737d;
  display: flex;
  flex: 0 0 24px;
  font-size: 11px;
  overflow: hidden;
  padding: 0 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.finder-list-header {
  background: #f2f4f6;
  border-bottom: 1px solid #dfe3e8;
  color: #6b737d;
  display: grid;
  font-size: 11px;
  grid-template-columns: minmax(150px, 1fr) 140px 72px 86px;
  height: 24px;
  line-height: 24px;
  padding: 0 10px 0 34px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.folder-row {
  align-items: center;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: default;
  display: grid;
  font: inherit;
  grid-template-columns: 24px minmax(150px, 1fr) 140px 72px 86px;
  height: 26px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

.folder-row:nth-child(even) {
  background: #eef1f4;
}

.folder-row:hover,
.folder-row:focus,
.folder-row.selected {
  background: #dbeafe;
  outline: none;
}

.folder-entry-icon {
  color: #5b83b5;
  height: 15px !important;
  width: 18px !important;
}

.folder-entry-icon.directory {
  color: #2f88d8;
}

.folder-entry-icon.file,
.folder-entry-icon.other {
  color: #7d8793;
}

.finder-image-thumb {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  display: block;
  object-fit: cover;
}

.finder-image-thumb.small {
  border-radius: 3px;
  height: 18px;
  width: 18px;
}

.finder-image-thumb.large {
  border-radius: 6px;
  height: 48px;
  width: 58px;
}

.folder-entry-name,
.folder-entry-kind,
.folder-entry-size {
  display: block;
  line-height: 16px;
  max-height: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-entry-date,
.folder-entry-kind,
.folder-entry-size {
  color: #68717d;
}

.folder-entry-size {
  text-align: right;
}

.folder-empty {
  align-items: center;
  color: #68717d;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.finder-icon-view {
  align-content: start;
  display: grid;
  gap: 16px 18px;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  overflow: auto;
  padding: 22px;
}

.finder-icon-view button,
.finder-filmstrip button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #202124;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  padding: 8px 6px;
}

.finder-icon-view button.selected,
.finder-filmstrip button.selected {
  background: #dbeafe;
}

.finder-icon-view button span:last-child,
.finder-filmstrip button span:last-child {
  display: block;
  height: 15px;
  line-height: 15px;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.finder-large-icon,
.finder-preview-icon {
  display: block;
  height: 36px !important;
  width: 36px !important;
}

.finder-large-icon.directory,
.finder-preview-icon.directory {
  color: #2f88d8;
}

.finder-large-icon.file,
.finder-large-icon.other,
.finder-preview-icon.file,
.finder-preview-icon.other {
  color: #7d8793;
}

.finder-column-view {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) minmax(160px, 0.8fr);
  min-height: 0;
  overflow: hidden;
}

.finder-column {
  border-right: 1px solid #dfe3e8;
  min-width: 0;
  overflow: auto;
}

.finder-column-label {
  color: #737b86;
  font-size: 11px;
  font-weight: 650;
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-column-row {
  align-items: center;
  background: transparent;
  border: 0;
  color: #202124;
  display: grid;
  font: inherit;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  height: 24px;
  padding: 0 8px;
  text-align: left;
  width: 100%;
}

.finder-column-row span:nth-child(2) {
  display: block;
  height: 16px;
  line-height: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-column-row:hover,
.finder-column-row.selected {
  background: #0a84ff;
  color: #ffffff;
}

.finder-column-row.muted {
  color: #68717d;
}

.finder-preview {
  align-items: center;
  background: #f7f8fa;
  color: #30343a;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow: auto;
  padding: 22px 14px;
  text-align: center;
}

.finder-preview.large {
  justify-content: center;
}

.finder-preview .finder-preview-icon {
  height: 46px !important;
  width: 46px !important;
}

.finder-preview-image {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  display: block;
  max-height: min(210px, 48%);
  max-width: 92%;
  object-fit: contain;
}

.finder-preview.large .finder-preview-image {
  max-height: min(260px, 58%);
  max-width: 88%;
}

.finder-preview strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.finder-preview dl {
  margin: 4px 0 0;
  text-align: left;
  width: 100%;
}

.finder-preview div {
  border-top: 1px solid #e1e4e8;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  padding: 6px 0;
}

.finder-preview dt {
  color: #737b86;
}

.finder-preview dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finder-preview-open {
  background: #0a84ff;
  border: 0;
  border-radius: 7px;
  color: #ffffff;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin-top: 4px;
  padding: 7px 16px;
}

.finder-gallery-view {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: minmax(0, 1fr) 94px;
  min-height: 0;
}

.finder-filmstrip {
  align-items: stretch;
  border-top: 1px solid #dfe3e8;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
}

.finder-filmstrip button {
  flex: 0 0 82px;
}

.finder-file-viewer {
  background: rgba(246, 247, 249, 0.98);
  border-left: 1px solid rgba(167, 173, 184, 0.55);
  box-shadow: -18px 0 32px rgba(0, 0, 0, 0.16);
  bottom: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 44px;
  width: min(68%, 760px);
  z-index: 8;
}

.finder-file-viewer.panel {
  background: #0f141a;
  border-left: 0;
  bottom: 0;
  box-shadow: none;
  left: 0;
  right: 0;
  top: 0;
  width: auto;
}

.finder-file-viewer header {
  align-items: center;
  background: rgba(246, 247, 249, 0.94);
  border-bottom: 1px solid rgba(167, 173, 184, 0.45);
  display: grid;
  flex: 0 0 38px;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  padding: 0 10px;
}

.finder-file-viewer header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-file-viewer header span {
  color: #68717d;
  font-size: 11px;
  white-space: nowrap;
}

.finder-file-viewer header button {
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  border-radius: 50%;
  color: #343941;
  font: 18px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 24px;
  padding: 0;
  width: 24px;
}

.finder-file-body {
  align-items: stretch;
  background: #0f141a;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  overflow: auto;
}

.finder-file-body > img,
.finder-file-body > video {
  align-self: center;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.finder-code-viewer {
  background: #0f141a;
  box-sizing: border-box;
  color: #d7dde6;
  flex: 1 1 auto;
  font: 12px/1.55 "Cascadia Code", Consolas, Menlo, Monaco, "SFMono-Regular", monospace;
  margin: 0;
  overflow: auto;
  padding: 14px 16px;
  tab-size: 2;
  white-space: pre;
}

.file-loading-state {
  align-items: center;
  background: #0f141a;
  box-sizing: border-box;
  color: #8b949e;
  display: flex;
  font: 12px/1.45 "Cascadia Code", Consolas, Menlo, Monaco, "SFMono-Regular", monospace;
  height: 100%;
  justify-content: center;
  min-height: 0;
  padding: 16px;
  text-align: center;
}

.file-view .folder-empty,
.finder-file-viewer.panel .folder-empty {
  background: #0f141a;
  color: #8b949e;
}

.code-token.comment {
  color: #7d8b99;
}

.code-token.string {
  color: #9ddc82;
}

.code-token.number {
  color: #d6b56d;
}

.code-token.keyword {
  color: #7bb7ff;
  font-weight: 650;
}

.snapshot-terminal {
  box-sizing: border-box;
  color: #dfe3ea;
  font: 10px/1.15 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 28px 6px 6px;
  white-space: pre;
}

@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  :root {
    --tf-mobile-top-gutter: max(12px, env(safe-area-inset-top));
    --tf-mobile-bottom-gutter: max(12px, env(safe-area-inset-bottom));
    --tf-mobile-activity-height: calc(84px + var(--tf-mobile-bottom-gutter));
  }

  .vscode-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--tf-mobile-activity-height);
    height: 100dvh;
  }

  .activity-bar {
    align-items: stretch;
    background: rgba(21, 24, 30, 0.98);
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.32);
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-row: 2;
    justify-content: stretch;
    overflow: visible;
    padding: 8px 6px var(--tf-mobile-bottom-gutter);
  }

  .desktop-activity-item {
    display: none;
  }

  .mobile-activity-item {
    display: inline-flex;
  }

  .activity-item {
    border-left: 0;
    border-radius: 12px;
    border-top: 0;
    color: #8f98a6;
    gap: 6px;
    min-height: 0;
    min-width: 0;
    padding: 8px 4px 7px;
    width: 100%;
  }

  .activity-item.active {
    background: rgba(121, 184, 255, 0.13);
    border-left-color: transparent;
    color: #f4f8ff;
  }

  .activity-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .activity-icon {
    height: 24px !important;
    width: 24px !important;
  }

  .activity-bar .activity-label.sr-only {
    clip: auto;
    clip-path: none;
    display: block;
    height: auto;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    position: static;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
  }

  .activity-label {
    font: 12px/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 1;
  }

  .activity-account-badge {
    border-color: rgba(21, 24, 30, 0.98);
    bottom: 32px;
    right: calc(50% - 20px);
  }

  .activity-spacer {
    display: none;
  }

  .mobile-activity-overflow {
    background: rgba(31, 35, 43, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    bottom: calc(var(--tf-mobile-activity-height) + 6px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    display: grid;
    gap: 4px;
    padding: 6px;
    position: fixed;
    right: 8px;
    width: min(220px, calc(100vw - 16px));
    z-index: 1200;
  }

  .mobile-activity-overflow button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #eef3f9;
    cursor: pointer;
    display: grid;
    font: 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    gap: 10px;
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 44px;
    padding: 0 10px;
    text-align: left;
  }

  .mobile-activity-overflow button:hover,
  .mobile-activity-overflow button:focus-visible {
    background: rgba(121, 184, 255, 0.13);
    outline: none;
  }

  .workbench-shell {
    grid-row: 1;
    min-height: 0;
    padding-top: var(--tf-mobile-top-gutter);
  }

  .workbench-main.sidebar-open,
  .workbench-main.sidebar-closed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .workbench-sidebar {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    width: 100%;
    z-index: 5;
  }

  .sidebar-title {
    font-size: 13px;
    height: 46px;
    min-height: 46px;
    padding: 0 16px;
  }

  .sidebar-title strong {
    font-size: 13px;
  }

  .sidebar-title-action,
  .provider-title-button,
  .provider-row-action,
  .provider-row-start,
  .provider-empty-action button,
  .provider-management-menu button,
  .provider-context-menu button {
    min-height: 44px;
  }

  .sidebar-title-action {
    border-radius: 10px;
    font-size: 13px;
    line-height: 42px;
    padding: 0 14px;
  }

  .sidebar-content {
    gap: 14px;
    padding: 14px 16px 18px;
  }

  /* The chats list reads like a chat app (iMessage/Slack): a slim gutter, the
     rows' own padding carrying the touch target — not the 16px panel inset. */
  .sidebar-content.session-list {
    gap: 10px;
    padding: 10px 8px 16px;
  }

  /* The hierarchy tree is full-bleed by design (rows, section headers, and
     their hover/selection backgrounds span edge to edge — see the desktop
     `.hierarchy-content { padding: 0 }`). The mobile `.sidebar-content`
     padding above would otherwise re-inset it by 16px a side, leaving a gutter
     the row backgrounds never reach. Keep it edge to edge like `.provider-list`. */
  .hierarchy-content {
    padding: 0;
  }

  .provider-title-actions {
    gap: 10px;
  }

  .provider-title-button {
    border-radius: 11px;
    height: 44px;
    width: 44px;
  }

  .provider-title-button svg,
  .provider-row-action svg {
    height: 18px !important;
    width: 18px !important;
  }

  .provider-list {
    gap: 16px;
    padding-bottom: 20px;
  }

  .provider-group-title {
    font-size: 13px;
    padding: 13px 16px 8px;
  }

  .provider-empty-action {
    font-size: 14px;
    min-height: 56px;
    padding: 8px 12px 8px 16px;
  }

  .provider-empty-action button {
    border-radius: 10px;
    font-size: 14px;
    line-height: 42px;
    padding: 0 14px;
  }

  .provider-row {
    gap: 12px;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    min-height: 72px;
    padding: 12px 8px 12px 14px;
  }

  .provider-row-main {
    gap: 5px;
  }

  .provider-row strong {
    font-size: 15px;
    line-height: 1.25;
  }

  .provider-url {
    font-size: 13px;
    line-height: 1.25;
  }

  .provider-row-meta {
    gap: 8px;
  }

  .provider-version {
    font-size: 12px;
    line-height: 24px;
    max-width: 132px;
    padding: 0 8px;
  }

  .provider-status {
    font-size: 13px;
    min-width: 72px;
  }

  .provider-row-action,
  .provider-row-start {
    border-radius: 11px;
    font-size: 13px;
    height: 44px;
    opacity: 1;
    padding: 0 12px;
  }

  .provider-row-action {
    min-width: 44px;
  }

  .provider-row-start {
    min-width: 64px;
  }

  .provider-context-menu {
    min-width: min(240px, calc(100vw - 32px));
    top: 48px;
  }

  .provider-management-menu button,
  .provider-context-menu button {
    font-size: 14px;
    line-height: 44px;
    padding: 0 16px;
  }

  .provider-row-error {
    font-size: 13px;
    white-space: normal;
  }

  .provider-route {
    border-radius: 8px;
    gap: 6px 8px;
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 8px;
  }

  .provider-route-kind {
    font-size: 11px;
    line-height: 24px;
  }

  .provider-route-name,
  .provider-route-url {
    font-size: 12px;
  }

  .status-dot {
    height: 10px;
    margin-top: 5px;
    width: 10px;
  }

  .canvas-switcher-trigger {
    border-radius: 12px;
    font-size: 15px;
    min-height: 48px;
    min-width: min(220px, calc(100vw - 24px));
    padding: 10px 14px;
  }

  .react-flow__controls {
    border-radius: 12px;
  }

  .react-flow .react-flow__controls-button {
    height: 44px;
    width: 44px;
  }

  .react-flow .react-flow__controls-button svg {
    height: 18px !important;
    width: 18px !important;
  }

  .workbench-shell {
    font-size: 15px;
  }

  .terminal-item,
  .explorer-row,
  .session-item,
  .chat-item {
    min-height: 56px;
    padding: 12px 14px;
  }

  .terminal-item {
    gap: 12px;
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }

  .terminal-item strong,
  .session-item strong {
    font-size: 14px;
    line-height: 1.25;
  }

  .terminal-item span,
  .terminal-item em,
  .session-item span,
  .session-item em {
    font-size: 13px;
    line-height: 1.25;
  }

  .explorer-row {
    gap: 10px;
    grid-template-columns: 24px 28px minmax(0, 1fr) 14px 24px 44px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .explorer-label {
    font-size: 14px;
    line-height: 1.25;
  }

  .explorer-section-header {
    min-height: 48px;
    padding: 0 14px;
  }

  .explorer-section-title {
    font-size: 13px;
  }

  .explorer-section-detail,
  .explorer-section-count,
  .explorer-count {
    font-size: 12px;
  }

  .explorer-chevron,
  .explorer-section-chevron,
  .explorer-icon {
    height: 18px !important;
    width: 18px !important;
  }

  .explorer-visibility {
    border-radius: 10px;
    height: 44px;
    justify-self: center;
    opacity: 0;
    width: 44px;
  }

  .explorer-row:hover .explorer-visibility,
  .explorer-row:focus-within .explorer-visibility,
  .explorer-row:active .explorer-visibility,
  .explorer-row.canvas-hidden .explorer-visibility {
    opacity: 1;
  }

  .explorer-visibility svg {
    height: 18px !important;
    width: 18px !important;
  }

  .settings-section-hint,
  .account-card p,
  .new-chat-hint,
  .provider-registry-error span,
  .provider-registry-error em {
    font-size: 13px;
    line-height: 1.35;
  }

  .settings-sections {
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
  }

  .settings-section-tab,
  .chat-filter-chip,
  .chat-load-more-button {
    border-radius: 999px;
    font-size: 14px;
    line-height: 42px;
    min-height: 44px;
    padding: 0 16px;
  }

  .account-card {
    border-radius: 10px;
    gap: 12px;
    padding: 14px;
  }

  .account-card h3 {
    font-size: 16px;
  }

  .account-form,
  .new-chat-form,
  .provider-register-form {
    gap: 12px;
  }

  .account-form label,
  .new-chat-form label,
  .provider-register-form label,
  .provider-share-dialog label,
  .panel-create-dialog label,
  .provider-settings-modal label {
    font-size: 13px;
    gap: 7px;
  }

  .account-form input,
  .new-chat-form input,
  .new-chat-form select,
  .new-chat-form textarea,
  .provider-register-form input,
  .provider-share-dialog input,
  .provider-share-dialog select,
  .panel-create-dialog input,
  .provider-settings-modal input[type="text"],
  .provider-settings-modal select,
  .diagnostics-search input,
  .chat-search {
    border-radius: 10px;
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
  }

  .new-chat-form textarea {
    min-height: 112px;
  }

  .account-card button,
  .account-form button,
  .new-chat-form button,
  .provider-register-form button,
  .provider-share-dialog footer button,
  .panel-create-dialog footer button,
  .provider-settings-modal button,
  .conversation-reader-resume-button {
    border-radius: 11px;
    font-size: 15px;
    min-height: 44px;
    padding: 0 16px;
  }

  .chat-controls {
    gap: 12px;
  }

  .chat-search-row,
  .chat-filter-popover,
  .chat-filter-chips {
    gap: 8px;
  }

  .chat-filter-toggle {
    min-height: 44px;
    padding: 0 12px;
  }

  .chat-section {
    gap: 2px;
  }

  .chat-section-label {
    font-size: 12px;
    margin: 10px 4px 2px;
  }

  .chat-item {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 10px 12px;
    width: auto;
  }

  .chat-item-copy {
    gap: 4px;
  }

  .chat-item-copy strong {
    font-size: 15px;
  }

  .chat-item-copy span,
  .chat-item em {
    font-size: 13px;
  }

  /* Touch has no hover: rows stay clean (no chat app carries per-row buttons)
     and a long-press reveals one row's actions beside it. */
  .chat-item-actions {
    align-self: center;
    display: none;
    gap: 4px;
    grid-column: 2;
    grid-row: 1;
    position: static;
  }

  .chat-item-wrap {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .chat-item-action {
    background: #262b32;
    border: 0;
    border-radius: 10px;
    color: #c2ccd8;
    filter: grayscale(1);
    font-size: 14px;
    min-height: 42px;
    min-width: 42px;
    padding: 0 8px;
  }

  .session-state-dot {
    height: 10px;
    width: 10px;
  }

  .provider-share-dialog,
  .panel-create-dialog,
  .provider-settings-modal {
    border-radius: 14px;
    max-height: calc(100dvh - 32px);
    max-width: calc(100vw - 24px);
    min-width: 0;
    overflow: auto;
    width: calc(100vw - 24px);
  }

  .provider-share-dialog header,
  .panel-create-dialog header,
  .provider-settings-modal header,
  .provider-settings-modal footer {
    min-height: 56px;
    padding: 14px 16px;
  }

  .provider-share-dialog header strong,
  .panel-create-dialog header strong,
  .provider-settings-modal header strong {
    font-size: 17px;
  }

  .provider-share-dialog header span,
  .panel-create-dialog header span {
    font-size: 13px;
  }

  .provider-share-dialog header button,
  .panel-create-dialog header button,
  .provider-settings-modal header button,
  .provider-settings-modal .machine-settings-close {
    border-radius: 11px;
    height: 44px;
    width: 44px;
  }

  .diagnostics-panel {
    font-size: 13px;
  }

  .diagnostics-panel header {
    font-size: 14px;
  }

  .diagnostics-close {
    border-radius: 10px;
    height: 44px;
    width: 44px;
  }

  .diagnostics-severity button {
    border-radius: 10px;
    font-size: 13px;
    min-height: 44px;
    padding: 0 14px;
  }

  .provider-group-menu-button,
  .space-dock-trigger,
  .space-dock-actions button {
    border-radius: 11px;
    min-height: 44px;
    min-width: 44px;
  }

  .space-dock-trigger {
    border-radius: 24px 24px 0 0;
    height: 50px;
    width: 112px;
  }

  .space-dock-trigger svg {
    height: 20px !important;
    width: 20px !important;
  }

  .provider-group-menu-button span {
    height: 18px;
    width: 18px;
  }

  .window-titlebar,
  .desktop-window.fullscreen-panel .window-titlebar {
    min-height: 56px !important;
  }

  .desktop-window.fullscreen-panel .window-back-button {
    flex-basis: 44px;
    height: 44px;
    width: 44px;
  }

  .desktop-window.fullscreen-panel .window-name {
    font-size: 16px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle {
    height: 36px;
    width: 72px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-side {
    height: 15px !important;
    width: 15px !important;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-side.terminal {
    left: 11px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-side.chat {
    right: 11px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-knob {
    height: 30px;
    width: 30px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle[aria-checked="true"] .window-view-toggle-knob {
    left: calc(100% - 31px);
  }

  .desktop-window.fullscreen-panel .window-view-toggle-knob svg {
    height: 15px !important;
    width: 15px !important;
  }

  .desktop-window.fullscreen-panel .agent-chat-view,
  .desktop-window.fullscreen-panel .file-view,
  .desktop-window.fullscreen-panel .folder-view,
  .desktop-window.fullscreen-panel .iframe-view,
  .desktop-window.fullscreen-panel .workspace {
    height: calc(100% - 56px) !important;
    top: 56px !important;
  }

  .desktop-window.fullscreen-panel .window-body:has(.terminal-mobile-command) .workspace .xterm {
    height: calc(100% - 64px);
  }

  .desktop-window.fullscreen-panel .terminal-mobile-command {
    height: 64px;
    padding: 9px 12px;
  }

  .terminal-mobile-command input {
    border-radius: 12px;
    font-size: 16px;
    height: 46px;
  }

  .terminal-mobile-command button {
    border-radius: 12px;
    font-size: 15px;
    height: 46px;
    padding: 0 18px;
  }

  .terminal-connection-badge,
  .terminal-veil-card {
    font-size: 13px;
  }

  .terminal-veil-card {
    border-radius: 12px;
    padding: 14px 16px;
  }

  .terminal-veil-card button {
    border-radius: 10px;
    font-size: 14px;
    min-height: 44px;
    padding: 0 16px;
  }

  .agent-chat-messages {
    gap: 14px;
    padding: 16px;
  }

  .agent-chat-empty {
    font-size: 14px;
  }

  .agent-chat-composer {
    gap: 10px;
    padding: 12px;
  }

  .agent-chat-composer textarea {
    border-radius: 12px;
    font-size: 16px;
    min-height: 46px;
    padding: 11px 12px;
  }

  .agent-chat-composer button {
    border-radius: 12px;
    height: 46px;
    min-height: 46px;
    width: 46px;
  }

  .iframe-browser-bar,
  .finder-toolbar {
    flex-basis: 56px;
    gap: 10px;
    padding: 8px 12px;
  }

  .iframe-refresh-button,
  .finder-nav-button,
  .finder-tool-button,
  .finder-view-switch button,
  .finder-sidebar button,
  .finder-context-menu button,
  .finder-file-viewer header button {
    min-height: 44px;
  }

  .iframe-refresh-button,
  .finder-nav-button,
  .finder-tool-button {
    border-radius: 11px;
    height: 44px;
    width: 44px;
  }

  .iframe-address-field,
  .finder-search {
    border-radius: 12px;
    font-size: 15px;
    height: 44px;
  }

  .finder-title {
    font-size: 15px;
  }

  .finder-sidebar {
    flex-basis: 190px;
    font-size: 14px;
  }

  .finder-sidebar h4 {
    font-size: 12px;
  }

  .finder-sidebar button {
    border-radius: 10px;
    font-size: 14px;
    height: 44px;
  }

  .finder-context-menu button {
    border-radius: 9px;
    font-size: 15px;
    padding: 0 12px;
  }

  .workbench-main.sidebar-open .workbench-editor {
    display: none;
  }

  .workbench-main.sidebar-open:has(.desktop-window.fullscreen-panel) .workbench-sidebar {
    display: none;
  }

  .desktop-window.fullscreen-panel {
    background: #0d1117;
    border: 0;
    box-shadow: none;
  }

  .desktop-window.fullscreen-panel .window-titlebar {
    background: rgba(13, 17, 23, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: 8px;
    height: 48px !important;
    padding: 0 10px !important;
  }

  .desktop-window.fullscreen-panel .window-dot,
  .desktop-window.fullscreen-panel .window-session-badge {
    display: none;
  }

  .desktop-window.fullscreen-panel .window-back-button {
    border-radius: 10px;
    flex-basis: 34px;
    height: 34px;
    margin: 0;
    width: 34px;
  }

  .desktop-window.fullscreen-panel .window-name {
    color: #f3f6fa;
    font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .desktop-window.fullscreen-panel .window-view-toggle {
    height: 24px;
    margin-left: auto;
    width: 50px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-side {
    height: 11px !important;
    width: 11px !important;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-side.terminal {
    left: 7px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-side.chat {
    right: 7px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle-knob {
    height: 20px;
    width: 20px;
  }

  .desktop-window.fullscreen-panel .window-view-toggle[aria-checked="true"] .window-view-toggle-knob {
    left: calc(100% - 21px);
  }

  .desktop-window.fullscreen-panel .window-view-toggle-knob svg {
    height: 11px !important;
    width: 11px !important;
  }

  .desktop-window.fullscreen-panel .agent-chat-view,
  .desktop-window.fullscreen-panel .file-view,
  .desktop-window.fullscreen-panel .folder-view,
  .desktop-window.fullscreen-panel .iframe-view,
  .desktop-window.fullscreen-panel .workspace {
    height: calc(100% - 48px) !important;
    top: 48px !important;
  }

  .desktop-window.fullscreen-panel .window-body:has(.terminal-mobile-command) .workspace .xterm {
    height: calc(100% - 52px);
  }

  .desktop-window.fullscreen-panel .terminal-mobile-command {
    align-items: center;
    background: rgba(13, 17, 23, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    bottom: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    height: 52px;
    left: 0;
    padding: 8px 10px;
    position: absolute;
    right: 0;
    z-index: 5;
  }

  .terminal-mobile-command input {
    background: #1f242c;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: #eef3f9;
    font: 14px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    height: 36px;
    min-width: 0;
    outline: none;
    padding: 0 11px;
  }

  .terminal-mobile-command input:focus {
    border-color: rgba(121, 184, 255, 0.72);
    box-shadow: 0 0 0 2px rgba(121, 184, 255, 0.16);
  }

  .terminal-mobile-command button {
    background: #2f6fbb;
    border: 1px solid #4088da;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font: 650 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    height: 36px;
    padding: 0 14px;
  }

  .terminal-mobile-command button:disabled {
    cursor: default;
    opacity: 0.45;
  }

  .workbench-main.sidebar-closed .workbench-editor {
    grid-column: 1;
    grid-row: 1;
  }

  .workbench-main.sidebar-closed:has(.diagnostics-panel) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .workbench-main.sidebar-closed:has(.diagnostics-panel) .workbench-editor {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: minmax(0, 1fr);
  }

  .workbench-main.sidebar-closed:has(.diagnostics-panel) #display-stage {
    display: none;
  }

  .workbench-main.sidebar-closed:has(.diagnostics-panel) .diagnostics-panel {
    align-self: stretch;
    border-top: 0;
    box-sizing: border-box;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    justify-self: stretch;
    min-height: 0;
    padding: 0 12px 12px;
    width: 100%;
  }

  .diagnostics-panel header {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 0;
    padding: 10px 12px;
    row-gap: 8px;
  }

  .diagnostics-panel header strong,
  .diagnostics-count,
  .diagnostics-close {
    align-self: center;
  }

  .diagnostics-panel header strong {
    grid-column: 1;
    grid-row: 1;
  }

  .diagnostics-count {
    grid-column: 2;
    grid-row: 1;
  }

  .diagnostics-close {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .diagnostics-severity {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
  }

  .diagnostics-severity button {
    flex: 1 0 64px;
  }

  .diagnostics-controls {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .diagnostics-search input {
    height: 32px;
  }

  .diagnostics-body {
    flex: 1 1 auto;
    overflow: auto;
    padding-top: 10px;
  }

  .desktop-window.fullscreen-panel .window-titlebar {
    height: 56px !important;
    min-height: 56px !important;
  }

  .desktop-window.fullscreen-panel .agent-chat-view,
  .desktop-window.fullscreen-panel .file-view,
  .desktop-window.fullscreen-panel .folder-view,
  .desktop-window.fullscreen-panel .iframe-view,
  .desktop-window.fullscreen-panel .workspace {
    height: calc(100% - 56px) !important;
    top: 56px !important;
  }

  .agent-chat-view {
    font-size: 16px;
  }

  .conversation-reader-layer {
    align-items: stretch;
    background: #0d1117;
    justify-content: stretch;
    padding: var(--tf-mobile-top-gutter) 0 var(--tf-mobile-bottom-gutter);
  }

  .conversation-reader {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-width: none;
  }

  .conversation-reader-header {
    align-items: stretch;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 14px;
  }

  .conversation-reader-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .conversation-reader-heading strong {
    font-size: 16px;
  }

  .conversation-reader-heading span {
    font-size: 13px;
  }

  .conversation-reader-badge {
    align-self: center;
    font-size: 12px;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    padding: 5px 10px;
  }

  .conversation-reader-resume {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .conversation-reader-target,
  .conversation-reader-resume-button,
  .conversation-reader-close {
    border-radius: 11px;
    font-size: 15px;
    min-height: 44px;
    padding: 0 14px;
  }

  .conversation-reader-target {
    max-width: none;
    min-width: 0;
  }

  .conversation-reader-close {
    grid-column: 2;
    grid-row: 1;
    height: 44px;
    justify-self: end;
    width: 44px;
  }

  .conversation-reader-body {
    padding: 16px 14px 18px;
  }

  .agent-chat-messages {
    gap: 14px;
    padding: 16px 14px 18px;
  }

  .agent-chat-message {
    max-width: 92%;
  }

  .agent-chat-meta {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .agent-chat-bubble {
    border-radius: 13px;
    font-size: 15px;
    line-height: 1.5;
    padding: 12px 14px;
  }

  .agent-chat-activity header,
  .agent-chat-tool header,
  .agent-chat-tool-exchange header {
    min-height: 40px;
    padding: 8px 10px;
  }

  .agent-chat-activity header strong,
  .agent-chat-activity header em,
  .agent-chat-activity header time,
  .agent-chat-tool header span,
  .agent-chat-tool header strong,
  .agent-chat-tool-exchange header {
    font-size: 12px;
  }

  .agent-chat-activity-body p,
  .agent-chat-activity-body pre,
  .agent-chat-activity-body a,
  .agent-chat-tool pre,
  .agent-chat-tool-exchange pre,
  .agent-chat-tool-exchange p,
  .agent-chat-thinking summary {
    font-size: 14px;
  }

  .agent-chat-composer {
    gap: 10px;
    padding: 12px 12px calc(12px + var(--tf-mobile-bottom-gutter));
  }

  .agent-chat-composer textarea {
    border-radius: 13px;
    font-size: 16px;
    line-height: 1.35;
    max-height: 30dvh;
    min-height: 48px;
    padding: 12px 13px;
  }

  .agent-chat-composer button {
    border-radius: 13px;
    height: 48px;
    min-height: 48px;
    width: 48px;
  }

  .desktop-window.fullscreen-panel .window-body:has(.terminal-mobile-command) .workspace .xterm {
    height: calc(100% - (64px + var(--tf-mobile-bottom-gutter)));
  }

  .desktop-window.fullscreen-panel .terminal-mobile-command {
    height: calc(64px + var(--tf-mobile-bottom-gutter));
    padding: 9px 12px var(--tf-mobile-bottom-gutter);
  }

  .terminal-mobile-command input,
  .terminal-mobile-command button {
    border-radius: 13px;
    font-size: 16px;
    height: 46px;
  }

  .statusbar {
    display: none;
  }
}

.local-adapter-settings {
  padding: 2px 10px 6px;
}

.local-adapter-toggle {
  align-items: center;
  color: #c6cdd5;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 6px;
}

.local-adapter-toggle input:disabled + span {
  color: #6b7480;
}

.local-adapter-row {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 2px 0;
}

.local-adapter-toggle,
.local-adapter-console-label {
  flex: 1;
}

.local-adapter-console-label {
  color: #c6cdd5;
  font-size: 12px;
}

.local-adapter-port {
  background: #1d232b;
  border: 1px solid #343c46;
  border-radius: 4px;
  color: #c6cdd5;
  font-size: 12px;
  padding: 2px 6px;
  width: 64px;
}

.local-adapter-port:disabled {
  color: #6b7480;
  opacity: 0.6;
}

.local-adapter-hint {
  color: #6b7480;
  font-size: 10px;
}