.live-workspace {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #dbe4eb;
  background: #f7fafc;
}

.live-workspace-heading,
.delivery-heading,
.live-workspace-grid,
.browser-action,
.delivery-card header,
.delivery-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.live-workspace-heading > div,
.delivery-heading > div {
  display: grid;
  gap: 3px;
}

.live-workspace-heading span,
.agent-brief > div > span,
.delivery-heading span {
  color: #a87824;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.live-workspace-heading small {
  display: flex;
  align-items: center;
  color: #607487;
  font-weight: 800;
}

.live-workspace-heading small i,
.event-stream i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7190a6;
  margin-right: 7px;
}

.is-running .live-workspace-heading small {
  color: #137153;
}

.is-running .live-workspace-heading small i {
  background: #27a778;
  box-shadow: 0 0 0 6px rgb(39 167 120 / 12%);
  animation: live-pulse 1.4s infinite;
}

.live-workspace-grid {
  align-items: stretch;
  margin-top: 14px;
}

.mini-browser,
.agent-brief {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #d6e0e7;
  background: white;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: #eaf0f4;
  border-bottom: 1px solid #d6e0e7;
}

.browser-dots {
  display: flex;
  gap: 4px;
}

.browser-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aab8c3;
}

.browser-address {
  flex: 1;
  padding: 5px 10px;
  border-radius: 4px;
  background: white;
  color: #52697c;
  font-size: 0.73rem;
}

.browser-screen {
  min-height: 170px;
  padding: 22px;
  background: linear-gradient(150deg, #fff, #f3f7f9);
}

.screen-login,
.screen-result,
.screen-compare {
  display: grid;
  justify-items: center;
  gap: 11px;
  text-align: center;
}

.screen-login i {
  width: min(80%, 270px);
  height: 22px;
  border: 1px solid #d8e1e7;
  border-radius: 3px;
  background: white;
}

.screen-login span,
.screen-result span,
.screen-schedule footer {
  color: #6f8190;
  font-size: 0.76rem;
}

.screen-schedule header,
.screen-schedule footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.screen-table {
  display: grid;
  gap: 7px;
}

.screen-table i {
  height: 17px;
  background: linear-gradient(90deg, #dce8ee 35%, #eef3f6 35%);
}

.is-running .screen-table i,
.is-running .screen-login i {
  background-size: 220% 100%;
  animation: screen-scan 1.8s linear infinite;
}

.screen-compare div {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 25px;
}

.screen-compare span {
  padding: 19px 12px;
  border: 1px solid #d8e3e9;
  background: #f8fafb;
  color: #3f586c;
  font-size: 0.76rem;
}

.screen-result i {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin-top: 16px;
  border-radius: 50%;
  background: #dff3eb;
  color: #16805c;
  font-size: 1.35rem;
  font-style: normal;
}

.screen-result.failed i {
  background: #f9e2e2;
  color: #a93434;
}

.browser-action {
  padding: 12px;
  border-top: 1px solid #dce5eb;
  font-size: 0.75rem;
}

.browser-action strong {
  flex: 1;
}

.browser-action progress {
  width: 110px;
  accent-color: #257eab;
}

.agent-brief {
  padding: 16px;
}

.agent-brief > div > strong {
  display: block;
  margin-top: 4px;
  color: #113d66;
}

.agent-mission {
  margin: 14px 0;
  padding-left: 22px;
  color: #405a6e;
  font-size: 0.79rem;
  line-height: 1.7;
}

.event-stream {
  max-height: 130px;
  overflow: auto;
  border-top: 1px solid #e4eaee;
}

.event-stream > div {
  display: flex;
  align-items: flex-start;
  padding: 8px 2px;
  border-bottom: 1px solid #edf1f3;
  font-size: 0.73rem;
}

.event-stream span {
  display: grid;
}

.event-stream small {
  color: #7b8c99;
}

.privacy-note {
  margin: 10px 0 0;
  color: #768895;
  font-size: 0.72rem;
}

@keyframes live-pulse {
  50% {
    opacity: 0.35;
  }
}

@keyframes screen-scan {
  to {
    background-position: -220% 0;
  }
}

@media (max-width: 850px) {
  .live-workspace-grid {
    flex-direction: column;
  }
  .mini-browser,
  .agent-brief {
    width: 100%;
  }
}