/* vibe.css — styling for hallucinated VibeOS render blocks (media + component
   trees) produced by the LLM and rendered by src/apps/vibe-render.js.
   Class-based only; the renderer never emits inline styles or handlers, keeping
   the surface CSP-friendly. Designed to read as a small retro window/card that
   "pops" out of the dark Ubuntu terminal stream. */

.vibe-app,
.vibe-media {
  margin: 8px 0;
  max-width: 560px;
  font-family: "Tahoma", "Segoe UI", sans-serif;
}

/* ---- media step-out ---- */
.vibe-media__img,
.vibe-figure .vibe-img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 2px solid #404040;
  border-radius: 2px;
}
.vibe-media__video {
  display: block;
  max-width: 100%;
  border: 2px solid #404040;
}
.vibe-media__audio {
  width: 100%;
}
.vibe-img-fallback {
  font-style: italic;
  opacity: 0.75;
}

/* ---- window chrome (Win95-ish, pops over the dark terminal) ---- */
.vibe-window {
  background: #c0c0c0;
  color: #000;
  border: 2px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff, 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.vibe-window__title {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: 700;
  padding: 3px 8px;
  letter-spacing: 0.02em;
}
.vibe-window__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- containers / layout ---- */
.vibe-app .vibe-panel {
  background: #c0c0c0;
  color: #000;
  border: 2px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vibe-panel__title {
  font-weight: 700;
}
.vibe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vibe-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vibe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.vibe-grid[data-cols="1"] { grid-template-columns: 1fr; }
.vibe-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.vibe-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.vibe-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.vibe-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
.vibe-fieldset {
  border: 1px solid #808080;
  padding: 8px;
}

/* ---- content ---- */
.vibe-heading { margin: 0; font-size: 1.05rem; }
.vibe-text { margin: 0; line-height: 1.4; }
.vibe-text--muted { opacity: 0.7; }
.vibe-text--mono { font-family: "Consolas", monospace; }
.vibe-text--title { font-weight: 700; font-size: 1.1rem; }
.vibe-code {
  margin: 0;
  background: #000;
  color: #33ff66;
  padding: 8px;
  overflow-x: auto;
  font-family: "Consolas", monospace;
  font-size: 0.85rem;
}
.vibe-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  background: #000080;
  color: #fff;
  font-size: 0.78rem;
}
.vibe-badge--success { background: #157a3a; }
.vibe-badge--danger { background: #a01919; }
.vibe-badge--muted { background: #606060; }
.vibe-divider {
  border: none;
  border-top: 1px solid #808080;
  margin: 2px 0;
}
.vibe-list { margin: 0; padding-left: 20px; }
.vibe-list__item[role="button"] { cursor: pointer; }
.vibe-list__item[role="button"]:hover { background: #000080; color: #fff; }
.vibe-progress { width: 100%; height: 18px; }

/* ---- interactive ---- */
.vibe-btn {
  font-family: inherit;
  background: #c0c0c0;
  color: #000;
  border: 2px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
  padding: 4px 12px;
  min-width: 38px;
  cursor: pointer;
}
.vibe-btn:active {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
}
.vibe-btn--primary { font-weight: 700; }
.vibe-btn--danger { color: #a01919; }
.vibe-link {
  background: none;
  border: none;
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.vibe-input,
.vibe-textarea,
.vibe-select {
  font-family: inherit;
  background: #fff;
  color: #000;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #808080;
  padding: 3px 6px;
}
.vibe-textarea { resize: vertical; min-height: 48px; }

/* a hallucinated app waiting on a model round-trip (interaction in flight) */
.vibe-app--busy {
  opacity: 0.55;
  pointer-events: none;
}