/* @operifex/web — shell chrome styling. Uses ONLY standard agentui theme tokens
   (theme.css) so the shell stays divergence-ready — no bespoke palette. Mobile-first. */

/* Definite height chain (U19 screenshot-harness fix): mount() stamps .aui-root
   (height:100%) onto page hosts — with only min-height up the chain that 100%
   collapses to content height (chat input floated to the top, login card not
   centered) and the default body margin drew a white frame around the app. */
html, body { margin: 0; height: 100%; }
#app { height: 100%; display: flex; flex-direction: column; }
#app > * { flex: 1 1 auto; min-height: 0; }

.ops-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
}

/* --- header / nav --- */
.ops-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.ops-brand { font-weight: 700; letter-spacing: .2px; }
.ops-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.ops-nav-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg2);
  padding: 6px 12px;
  border-radius: var(--rad);
  cursor: pointer;
  font: inherit;
}
.ops-nav-item:hover { background: var(--bg3); color: var(--fg); }
.ops-nav-item.active { background: var(--accent); color: var(--accent-fg); }

.ops-locale { display: flex; gap: 2px; }
.ops-locale-btn {
  appearance: none; border: 1px solid var(--line); background: transparent;
  color: var(--fg2); padding: 4px 8px; cursor: pointer; font: inherit; border-radius: var(--rad);
}
.ops-locale-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

/* --- AI-transparency disclosure (AI Act Art. 50) --- */
.ops-ai-disclosure {
  padding: 6px 16px;
  font-size: 12px;
  color: var(--fg2);
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}

/* --- outlet --- */
.ops-outlet { flex: 1; display: flex; min-height: 0; }
.ops-page { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* --- preview pane --- */
.ops-preview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ops-preview-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: var(--bg2);
}
.ops-preview-caption { font-weight: 650; }
.ops-preview-body { flex: 1; display: flex; min-height: 0; }
.ops-preview-frame {
  flex: 1; min-height: 0; margin: 12px auto; width: 100%;
  border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; background: var(--bg);
}
.ops-preview-frame.mobile { box-shadow: var(--shadow); }
.ops-preview-side { width: 280px; border-left: 1px solid var(--line); padding: 12px; overflow: auto; }
.ops-diff-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.ops-diff-path { color: var(--accent); font-family: var(--mono); font-size: 12px; }
.ops-warn { color: var(--warn); font-size: 13px; }

/* --- builder page (U11) --- */
.ops-builder { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px; gap: 8px; }
.ops-builder-title { margin: 0; }
.ops-builder-controls { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.ops-builder-input {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit;
  color: var(--fg); background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--rad); padding: 10px 12px;
}
.ops-builder-row { display: flex; gap: 8px; }
.ops-builder-body { flex: 1; display: flex; min-height: 240px; gap: 12px; }
.ops-builder-frame {
  flex: 1; min-height: 240px; border: 1px solid var(--line);
  border-radius: var(--rad); overflow: hidden; background: var(--bg);
}
.ops-builder-side { width: 280px; overflow: auto; border-left: 1px solid var(--line); padding-left: 12px; }
.ops-builder-side h4 { margin: 0 0 8px; }
.ops-builder-log { display: flex; flex-direction: column; gap: 4px; }
.ops-version-select {
  font: inherit; background: var(--bg2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--rad); padding: 4px 8px;
}

/* --- library grid --- */
.ops-library { flex: 1; padding: 16px; overflow: auto; }
.ops-library-title { margin: 0 0 12px; }
.ops-app-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min, 220px), 100%), 1fr));
}
.ops-app-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: var(--rad);
  background: var(--bg2); color: var(--fg); cursor: pointer; font: inherit;
}
.ops-app-card:hover { border-color: var(--accent); }
.ops-app-name { font-weight: 650; }
.ops-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; align-self: flex-start; }
.ops-badge.ai { background: var(--accent); color: var(--accent-fg); }
.ops-badge.det { background: var(--bg3); color: var(--fg2); }

/* --- full-screen app takeover --- */
.ops-takeover {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: var(--bg);
}
.ops-takeover-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: var(--bg2);
}
.ops-takeover-body { flex: 1; padding: 24px; overflow: auto; }

/* --- responsive: stack the preview split + shrink chrome on small screens --- */
@media (max-width: 720px) {
  .ops-preview-body { flex-direction: column; }
  .ops-preview-side { width: auto; border-left: 0; border-top: 1px solid var(--line); }
  .ops-builder-body { flex-direction: column; }
  .ops-builder-side { width: auto; border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .ops-header { gap: 8px; }
}

/* --- schedules / knowledge / approvals page shells (U16) -------------------
   These three pages shipped with markup but no CSS: on the live site they
   rendered flush against the viewport edge with zero gaps, so a schedule read
   "Organizador Pessoal0 8 * * *". They reuse the .ops-library page-shell
   geometry (flex:1 + padding + own scroll) plus row spacing. */
.ops-schedules, .ops-knowledge, .ops-approvals { flex: 1; padding: 16px; overflow: auto; }
.ops-sched-title, .ops-know-title, .ops-approvals-title { margin: 0 0 8px; }
.ops-sched-note, .ops-know-status, .ops-approvals-note { margin: 0 0 12px; color: var(--fg2); }
.ops-sched-empty, .ops-approvals-empty, .ops-run-empty, .ops-know-empty { color: var(--fg2); }

.ops-sched-list, .ops-approvals-list { display: flex; flex-direction: column; gap: 10px; }
.ops-sched-row, .ops-approval-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--bg2);
}
.ops-sched-main, .ops-approval-main { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; }
.ops-sched-cron, .ops-approval-json { color: var(--fg2); }
.ops-sched-runs { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.ops-run-row { display: flex; gap: 10px; align-items: baseline; color: var(--fg2); font-size: 13px; }
.ops-approval-actions { display: flex; gap: 8px; }

.ops-know-section { margin: 0 0 20px; }
.ops-know-section > h3 { margin: 0 0 8px; }
.ops-know-summary {
  width: 100%; max-width: 720px; min-height: 160px; padding: 10px; font: inherit;
  color: var(--fg); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--rad);
}
.ops-know-prefs { display: flex; flex-direction: column; gap: 8px; }
.ops-know-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ops-know-pref {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--bg2);
}

/* --- install / PWA page (U14) ---------------------------------------------
   Same page-shell geometry as the schedules/knowledge/approvals pages: flex:1 +
   padding + own scroll, so it never renders flush against the viewport edge. */
.ops-install { flex: 1; padding: 16px; overflow: auto; max-width: 720px; }
.ops-install-title { margin: 0 0 8px; }
.ops-install-intro { margin: 0 0 16px; color: var(--fg2); }
.ops-install-box {
  padding: 14px 16px; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: var(--rad); background: var(--bg2);
}
.ops-install-box > :first-child { margin-top: 0; }
.ops-install-box > :last-child { margin-bottom: 0; }
.ops-install-state, .ops-install-note { margin: 0; color: var(--fg2); }
.ops-install-ios-title, .ops-notify-title { margin: 0 0 8px; font-size: 1rem; }
.ops-install-ios-steps { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ops-install-ios-step { color: var(--fg); }
.ops-install-ios-note, .ops-notify-ios, .ops-notify-intro, .ops-notify-status { margin: 0; }
/* Prose hint: NOT .aui-micro — that is a 10.5px uppercase mono LABEL style with
   line-height:1, which mangles a wrapped sentence into overlapping lines. */
.ops-install .ops-hint { font-size: 13px; line-height: 1.55; color: var(--fg2); margin: 0; }
.ops-install .ops-hint + .ops-hint { margin-top: 6px; }
.ops-notify-toggle { margin: 4px 0 8px; }
.ops-notify-status:empty { display: none; }
.ops-install-offline { margin: 4px 0 0; color: var(--fg2); }