/* 2026-06-22 nav-overlap fix v2: AGGRESSIVE — position:fixed guarantees no gap above
   regardless of any cascade interaction. Body padding-top compensates for the fixed nav. */
html, body { margin: 0 !important; padding: 0 !important; }
body { padding-top: 64px !important; background: #f8fafc; }
body header.portal-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 #e2e8f0, 0 4px 12px rgba(15,23,42,0.04);
  border-bottom: 0;
  z-index: 200;
}
body header.portal-nav .nav-wrap { padding-top: 12px !important; padding-bottom: 12px !important; }
.agent-build { border-top: 8px solid #f1f5f9; }
.agent-preview { border-left: 1px solid #e2e8f0; background: #fff; }
.agent-preview iframe { background: #fff; }
/* Also collapse the agent-build height calc — was 100vh - 71px; with body padding 64 it overflows */
.agent-build__layout { height: calc(100vh - 64px) !important; }
.agent-intro { min-height: calc(100vh - 64px) !important; }


/* /opt/fivedaylaunch-portal/public/agent/builder.css */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* HTML hidden attribute must beat our display rules (CSS specificity bug fix) */
[hidden]{display:none!important}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#fafafa;
  color:#0f172a;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ─── Top nav ──────────────────────────────────────────────── */
.agent-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}
.agent-nav .brand{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:900;font-size:18px;color:#0f172a;
  text-decoration:none;
  letter-spacing:-0.02em;
}
.agent-nav .brand span{color:#0ea5e9}
.agent-nav__right{display:flex;align-items:center;gap:12px;font-size:13px;color:#475569}
.agent-nav .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,#0ea5e9,#0369a1);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;letter-spacing:0.04em;
}
.agent-nav .signout{color:#64748b;text-decoration:none;font-size:12.5px;margin-left:6px}

/* ─── Intro screen ─────────────────────────────────────────── */
.agent-main{min-height:calc(100vh - 71px)}

.agent-intro{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100vh - 71px);
  padding:24px;
}
.agent-intro__inner{
  width:100%;max-width:760px;text-align:center;
  animation:agentFadeIn .5s ease-out;
}
@keyframes agentFadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.agent-intro__h{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(40px,7vw,72px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0 0 14px;
  color:#0f172a;
}
.agent-intro__sub{
  font-size:clamp(16px,1.8vw,19px);
  color:#64748b;
  margin:0 0 36px;
  line-height:1.5;
}
.agent-form{
  display:flex;gap:10px;align-items:stretch;
  max-width:680px;margin:0 auto 24px;
}
.agent-form input[type="text"]{
  flex:1;
  padding:16px 18px;
  font:inherit;font-size:16.5px;
  background:#fff;
  border:1.5px solid #cbd5e1;
  border-radius:12px;
  transition:border-color .15s,box-shadow .15s;
  color:#0f172a;
}
.agent-form input[type="text"]:focus{
  outline:none;
  border-color:#0ea5e9;
  box-shadow:0 0 0 4px rgba(14,165,233,.15);
}
.agent-cta{
  padding:16px 26px;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff;border:0;border-radius:12px;
  font:inherit;font-weight:800;font-size:15px;letter-spacing:0.01em;
  cursor:pointer;
  transition:filter .15s,transform .1s;
  box-shadow:0 10px 24px -10px rgba(124,58,237,.55);
  white-space:nowrap;
}
.agent-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.agent-cta:active{transform:translateY(0)}
.agent-cta:disabled{filter:grayscale(.3);cursor:not-allowed;opacity:.7}

.agent-examples{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  margin-top:8px;
  font-size:13px;color:#94a3b8;
}
.agent-examples__label{color:#94a3b8;margin-right:4px}
.agent-chip{
  font:inherit;font-size:13px;
  padding:6px 12px;
  background:#fff;border:1px solid #e2e8f0;border-radius:999px;
  color:#475569;cursor:pointer;
  transition:all .12s;
}
.agent-chip:hover{border-color:#a855f7;color:#7c3aed;background:#faf5ff}

/* ─── Build screen ──────────────────────────────────────────── */
.agent-build{
  display:block;
  padding:0;
  animation:agentFadeIn .35s ease-out;
}
.agent-build__layout{
  display:grid;
  grid-template-columns:360px 1fr;
  height:calc(100vh - 71px);
  gap:0;
}
@media (max-width:880px){
  /* Mobile: stack vertically. Log gets capped height so preview is reachable.
     Preview iframe needs explicit min-height (parent's auto would collapse 1fr to 0). */
  .agent-build__layout{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    height:auto;
  }
  .agent-log{max-height:42vh}
  .agent-preview{min-height:60vh}
  .agent-preview iframe{height:60vh}
}

.agent-log{
  background:#0f172a;
  color:#e2e8f0;
  padding:24px 24px 24px;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.agent-log__head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.agent-log__dot{
  width:10px;height:10px;border-radius:50%;
  background:#10b981;
  animation:agentPulse 1.4s ease-in-out infinite;
}
@keyframes agentPulse{
  0%,100%{opacity:.5}
  50%{opacity:1;box-shadow:0 0 0 6px rgba(16,185,129,.18)}
}
.agent-log__title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800;font-size:15px;color:#fff;
  letter-spacing:-0.01em;
}
.agent-log__list{
  list-style:none;padding:0;margin:0;
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
}
.agent-log__list li{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  font-size:13px;line-height:1.5;
  animation:agentLogIn .35s ease-out;
}
@keyframes agentLogIn{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
.agent-log__list li .icon{
  flex:0 0 16px;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
  font-size:12px;
}
.agent-log__list li.ok .icon{color:#10b981}
.agent-log__list li.work .icon{color:#f59e0b}
.agent-log__list li.info .icon{color:#0ea5e9}
.agent-log__list li .body{flex:1;color:#cbd5e1}
.agent-log__list li .body strong{color:#fff;font-weight:600}
.agent-log__list li.error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.agent-log__list li.error .icon{color:#fca5a5}

.agent-log__footer{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:8px;
}
.agent-log__footer a{
  display:block;text-align:center;
  padding:10px 14px;
  background:#fff;color:#0f172a;
  text-decoration:none;border-radius:8px;
  font-weight:700;font-size:13.5px;
  transition:transform .12s;
}
.agent-log__footer a:hover{transform:translateY(-1px)}
.agent-log__footer .secondary{
  background:transparent;color:#cbd5e1;border:1px solid rgba(255,255,255,.18);
}
.agent-log__footer .secondary:hover{background:rgba(255,255,255,.06);color:#fff}

/* ─── Preview pane (right) ───────────────────────────────────── */
.agent-preview{
  position:relative;
  background:#fafafa;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.agent-preview__skeleton{
  position:absolute;inset:0;
  display:flex;flex-direction:column;gap:14px;
  padding:24px;
  overflow:hidden;
}
.sk-block{
  background:linear-gradient(90deg,#eef2f7,#e2e8f0,#eef2f7);
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
  border-radius:10px;
}
@keyframes skShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.sk-hero{height:260px}
.sk-about{height:120px}
.sk-services{height:160px}
.sk-photos{height:200px}

.agent-preview iframe{
  position:relative;z-index:2;
  width:100%;height:100%;
  border:0;background:#fff;
  animation:agentFadeIn .5s ease-out;
}