/* Replica of the real app window — markup and values mirror
   Workspace/src/App.css: top bar + workspaces rail + agent grid with 1px
   separators, flat panes, #58b368 active border. Decorative only. */

.deck__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 36px;
  flex: none;
  border-bottom: 1px solid var(--app-seam);
  background-color: var(--app-chrome);
}

.deck__bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar__icon {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  color: var(--app-dim);
}

.bar__icon svg,
.pane__action svg,
.pane__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pane__action svg,
.pane__close svg {
  width: 13px;
  height: 13px;
}

.deck__brand {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
}

.deck__bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar__action {
  border: 1px solid #2a3343;
  background-color: #161b26;
  color: var(--app-text);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
}

.deck__status {
  font-size: 12px;
  color: var(--app-dim);
  font-variant-numeric: tabular-nums;
}

.deck__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.rail {
  width: 172px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--app-seam);
  background-color: var(--app-chrome);
}

.rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
}

.rail__title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-dim);
}

.rail__add {
  color: var(--app-dim);
  font-size: 16px;
  line-height: 1;
}

.rail__list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding-right: 4px;
}

.rail__item--active {
  background-color: #1b2230;
}

.rail__select {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  font-size: 13px;
}

.rail__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #3b4658;
  flex: none;
}

.rail__item--active .rail__dot {
  background-color: var(--app-green);
}

.rail__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__count {
  font-size: 11px;
  color: var(--app-dim);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}

.rail__close {
  color: var(--app-dim);
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
}

.deck__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.deck__grid {
  position: absolute;
  inset: 0;
  display: grid;
  /* minmax(0, …): nowrap terminal lines must not inflate track min-content */
  grid-template-columns: repeat(var(--tracks, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr));
  gap: 1px;
  background-color: var(--app-seam);
}

.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 2px solid transparent;
  background-color: var(--app-bg);
  overflow: hidden;
}

.pane--active {
  border-color: var(--app-green);
}

.pane__bar {
  display: flex;
  align-items: center;
  height: 26px;
  flex: none;
  padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--app-border);
  background-color: var(--app-chrome);
}

.pane__title {
  font-size: 12px;
  color: var(--app-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.pane__open {
  flex: none;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid #2a3446;
  border-radius: 4px;
  color: var(--app-muted);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.pane__branch {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--mono);
  color: #7fb88a;
  background-color: #12211a;
  border: 1px solid #1d3a2a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.pane__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.pane__action,
.pane__close {
  display: inline-flex;
  color: var(--app-dim);
  line-height: 1;
  padding: 3px;
}

.pane__body {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
}

/* stand-in for the xterm viewport: newest lines sit at the bottom */
.term {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px 10px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.75;
  color: #8b93a1;
  overflow: hidden;
}

.term__line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.term__line--cmd {
  color: var(--app-text);
}

.term__line--think {
  color: var(--app-dim);
  font-style: italic;
}

.term__line--add {
  color: rgba(88, 179, 104, 0.8);
}

.term__line--del {
  color: rgba(244, 67, 54, 0.62);
}

.term__line--ok {
  color: var(--app-green);
}

.term__line--wait {
  color: rgba(255, 193, 7, 0.66);
}

.term__line--meta {
  color: #565f6e;
}