/* The framed surface. Both interactive blocks on the page, the chat and the
   asset-class showcase, are the same object: a petrol chrome bar over a white
   body, optionally with a control strip beneath. Defining it once means the
   two read as one product rather than two widgets that happen to be adjacent.
   Depth comes from the hairline border and the chrome bar, never a shadow. */
.surface {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}

.surface-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--petrol-900);
  color: var(--on-dark);
}

.surface-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}

.surface-context {
  font-size: 11px;
  color: var(--on-dark-muted);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pushed to the far end of the chrome bar. */
.surface-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.surface-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
  animation: surface-pulse 1.8s ease-in-out infinite;
}

@keyframes surface-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .surface-live-dot { animation: none; }
}

.surface-body { padding: clamp(18px, 2.4vw, 30px); }

/* Revealed by AssetShowcase once it has mounted. .surface-foot sets a display
   value, which overrides the browser's own [hidden] rule, so the controls would
   otherwise sit there inert on a page with no JavaScript. */
.surface-foot[hidden] { display: none; }

.surface-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--rule);
}

@media (max-width: 560px) {
  .surface-chrome { padding: 9px 13px; }
  .surface-context { display: none; }
}