/* ============================================================
   BUILDYBOT — APP VIEWER LAYOUT

   To customize the app header for a specific app, create your
   own CSS file and override any --app-* variable defined in
   the ":root" block below (e.g. --app-header-bg, --app-header-
   text, --app-header-height, --app-body-bg, etc.). Your file
   should be loaded after this one so your values take priority.
   All other colours and shapes are inherited from the active
   theme (themes.css) and layout (layouts.css), so you only
   need to set what you want to change.
   ============================================================ */

/* --- App-specific custom properties (override these) --- */
:root {
  --app-header-height: 48px;
  --app-header-bg: var(--nav-bg);
  --app-header-text: var(--nav-text);
  --app-header-border: var(--border-color);
  --app-header-font-size: 0.88rem;
  --app-header-padding-x: 1rem;
  --app-back-btn-bg: transparent;
  --app-back-btn-color: var(--nav-text);
  --app-back-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --app-back-btn-radius: var(--radius-sm);
  --app-body-bg: var(--bg);
  --app-body-padding: 0;
}

/* --- Header bar --- */
.app-viewer-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  height: var(--app-header-height);
  background: var(--app-header-bg);
  color: var(--app-header-text);
  border-bottom: 1px solid var(--app-header-border);
  padding: 0 var(--app-header-padding-x);
  gap: 0.75rem;
  font-size: var(--app-header-font-size);
  transition: background-color var(--transition-speed, 0.2s) ease,
              border-color var(--transition-speed, 0.2s) ease;
}

/* --- Back button --- */
.app-viewer-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--app-back-btn-bg);
  color: var(--app-back-btn-color);
  border: none;
  border-radius: var(--app-back-btn-radius);
  font-size: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.app-viewer-back:hover,
.app-viewer-back:focus-visible {
  background: var(--app-back-btn-hover-bg);
  color: var(--app-back-btn-color);
  text-decoration: none;
}

.app-viewer-back i {
  font-size: 1.1em;
}

/* --- Separator between back button and app name --- */
.app-viewer-sep {
  width: 1px;
  height: 1.2rem;
  background: currentColor;
  opacity: 0.25;
  flex-shrink: 0;
}

/* --- App name --- */
.app-viewer-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* --- Data storage link (centered in header) --- */
.app-viewer-data-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--app-header-text);
  opacity: 0.7;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
}

.app-viewer-data-link:hover,
.app-viewer-data-link:focus-visible {
  opacity: 1;
  background: var(--app-back-btn-hover-bg);
  color: var(--app-header-text);
  text-decoration: none;
}

/* --- Right-side slot for optional actions --- */
.app-viewer-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* --- Main content area beneath the header --- */
.app-viewer-body {
  flex: 1;
  background: var(--app-body-bg);
  padding: var(--app-body-padding);
  min-height: calc(100vh - var(--app-header-height));
}

/* --- Responsive --- */
@media (max-width: 575.98px) {
  .app-viewer-header {
    gap: 0.5rem;
    --app-header-padding-x: 0.65rem;
  }

  .app-viewer-back span {
    display: none;
  }

  .app-viewer-data-link {
    position: static;
    transform: none;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
  }
}

/* =========================
   META APP ADDITIONS
   ========================= */

:root {
  --bg-default: #f7f8fb;
  --panel-bg: #ffffff;
  --muted: #6b7280;
  --accent: #2563eb;
  --danger: #dc2626;
  --success: #16a34a;
  --radius: 8px;
  --gap: 12px;
  --shadow: 0 6px 18px rgba(16,24,40,0.06);
}

/* Reset & layout */
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 0;
  background: var(--bg-default);
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.3;
}

.meta-app {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--gap);
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Panels */
.left-pane, .right-pane {
  background: var(--panel-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.panel-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.panel-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

/* Messages list */
.messages {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: auto;
  max-height: calc(60vh - 120px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.msg {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.01));
  border: 1px solid rgba(15,23,42,0.03);
}

.msg .meta {
  min-width: 90px;
  max-width: 140px;
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.msg .body {
  flex: 1;
  white-space: pre-wrap;
  color: #0f172a;
  font-size: 0.95rem;
}

.role-badge {
  display: inline-block;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  color: white;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

.role-user { background: #0ea5e9; }
.role-assistant { background: #10b981; }
.role-system { background: #6b7280; }
.role-developer { background: #7c3aed; }

.msg .actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: auto;
  max-height: calc(60vh - 40px);
}

.snapshot {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(2,6,23,0.01), rgba(2,6,23,0.02));
  border: 1px solid rgba(2,6,23,0.03);
}

.snapshot h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.snapshot .meta {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  flex: 1;
  font-size: 0.82rem;
  color: var(--muted);
}

.snapshot .snap-actions {
  display: flex;
  gap: 0.4rem;
}

.small-btn {
  padding: 0.28rem 0.45rem;
  background: transparent;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.06);
  cursor: pointer;
  font-size: 0.8rem;
}

/* Compose */
.compose {
  margin-top: 0.6rem;
}

.compose-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.compose-row select, .compose-row input {
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  font-size: 0.95rem;
}

.compose-row select { min-width: 120px; }
.compose-row input { flex: 1; }

.compose-row button {
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.compose-note {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Inputs */
.input-small {
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,0.06);
}

/* Message highlight when comparing */
.compare-added {
  outline: 2px solid rgba(16,185,129,0.12);
  background: rgba(16,185,129,0.03);
}

.compare-removed {
  opacity: 0.6;
  border-style: dashed;
  border-color: rgba(220,38,38,0.12);
}

/* Responsive */
@media (max-width: 880px) {
  .meta-app {
    grid-template-columns: 1fr;
  }
  .right-pane {
    min-height: 180px;
  }
}