/* ═══════════════════════════════════════════════════════════════
   OmicsLab — Embedded External App Styles
   ═══════════════════════════════════════════════════════════════ */

.ea-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px); /* full viewport minus top nav */
  max-height: calc(100vh - 56px);
  overflow: hidden;
}

/* ── Top bar ── */
.ea-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 1.25rem;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ea-topbar-left { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ea-badge {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  border: 1px solid; border-radius: 99px; padding: .18rem .55rem;
  white-space: nowrap; flex-shrink: 0;
}
.ea-app-name { font-size: .9rem; font-weight: 700; color: #e6edf3; line-height: 1.2; }
.ea-app-desc { font-size: .75rem; color: #8b949e; line-height: 1.4; margin-top: .15rem;
  max-width: 640px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ea-topbar-right { flex-shrink: 0; }
.ea-open-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600;
  background: #21262d; border: 1px solid #30363d; border-radius: 6px;
  color: #c9d1d9; padding: .35rem .8rem; text-decoration: none; white-space: nowrap;
}
.ea-open-btn:hover { background: #30363d; color: #e6edf3; }

/* ── Feature chips bar ── */
.ea-features-bar {
  display: flex; gap: .35rem; flex-wrap: wrap;
  padding: .5rem 1.25rem;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  flex-shrink: 0;
}
.ea-feature-chip {
  font-size: .68rem; border: 1px solid; border-radius: 99px;
  padding: .15rem .55rem; white-space: nowrap;
}

/* ── Frame wrapper — takes all remaining height ── */
.ea-frame-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0d1117;
}

/* ── Loading spinner ── */
.ea-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; background: #0d1117; z-index: 2;
}
.ea-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: #58a6ff;
  animation: ea-spin .8s linear infinite;
}
@keyframes ea-spin { to { transform: rotate(360deg); } }
.ea-loading-msg { font-size: .82rem; color: #6e7681; }

/* ── Fallback state (iframe blocked) ── */
.ea-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem; background: #0d1117; z-index: 2; padding: 2rem;
  text-align: center;
}
.ea-fallback-icon {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid; display: flex; align-items: center; justify-content: center;
}
.ea-fallback-title { font-size: 1rem; font-weight: 700; color: #e6edf3; }
.ea-fallback-msg { font-size: .82rem; color: #8b949e; max-width: 380px; line-height: 1.6; }
.ea-fallback-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 700;
  border: 1px solid; border-radius: 8px;
  padding: .55rem 1.3rem; text-decoration: none;
}
.ea-fallback-btn:hover { opacity: .85; }

/* ── The iframe itself ── */
.ea-iframe {
  width: 100%; height: 100%;
  border: none;
  display: block;
  background: #fff;
}

/* ── Responsive ── */
@media (max-width: 680px) {
  .ea-page { height: calc(100vh - 48px); max-height: calc(100vh - 48px); }
  .ea-topbar { padding: .5rem .85rem; }
  .ea-features-bar { display: none; } /* hide feature chips on small screens */
  .ea-app-desc { display: none; }
}