/* ===== AI Builder overlay — self-contained ===== */
.yb, .yb * { box-sizing: border-box; }
.yb {
  --yb-bg: #0b0f1d;
  --yb-surface: #141c30;
  --yb-surface-2: #1b2540;
  --yb-text: #eaeefb;
  --yb-muted: #9aa6c4;
  --yb-border: rgba(255,255,255,.1);
  --yb-primary: #7c6ffd;
  --yb-primary-2: #2dd4ff;
  position: fixed; inset: 0; z-index: 2147483500;
  background: rgba(5,7,16,.72); backdrop-filter: blur(8px);
  display: none; align-items: stretch; justify-content: center;
  font-family: "Manrope", "DM Sans", system-ui, sans-serif;
}
.yb.open { display: flex; }

.yb__modal {
  margin: auto; width: min(1180px, 96vw); height: min(90vh, 860px);
  background: var(--yb-bg); border: 1px solid var(--yb-border); border-radius: 20px;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.8); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}

.yb__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--yb-border); background: linear-gradient(135deg, rgba(124,111,253,.18), rgba(45,212,255,.08)); }
.yb__logo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--yb-text); letter-spacing: .02em; }
.yb__logo span { color: var(--yb-primary-2); }
.yb__bar-tag { color: var(--yb-muted); font-size: .8rem; }
.yb__close { margin-left: auto; background: none; border: 0; color: var(--yb-muted); font-size: 24px; cursor: pointer; line-height: 1; }
.yb__close:hover { color: var(--yb-text); }

.yb__body { display: grid; grid-template-columns: 380px 1fr; min-height: 0; }

/* Left: prompt panel */
.yb__panel { border-right: 1px solid var(--yb-border); padding: 22px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.yb__panel h2 { color: var(--yb-text); font-size: 1.25rem; margin: 0; }
.yb__panel p.yb__hint { color: var(--yb-muted); font-size: .86rem; margin: 0; }

.yb__formats { display: flex; gap: 8px; }
.yb__format { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--yb-border); background: var(--yb-surface); color: var(--yb-muted); font-size: .85rem; cursor: pointer; transition: .2s; }
.yb__format.active { border-color: var(--yb-primary); color: var(--yb-text); background: rgba(124,111,253,.18); }

.yb__textarea {
  width: 100%; min-height: 150px; resize: vertical; padding: 14px; border-radius: 12px;
  background: var(--yb-surface); border: 1px solid var(--yb-border); color: var(--yb-text);
  font-family: inherit; font-size: .92rem; line-height: 1.5; outline: none;
}
.yb__textarea:focus { border-color: var(--yb-primary); box-shadow: 0 0 0 3px rgba(124,111,253,.2); }
.yb__textarea::placeholder { color: var(--yb-muted); }

.yb__ideas { display: flex; flex-wrap: wrap; gap: 7px; }
.yb__idea { background: var(--yb-surface); border: 1px solid var(--yb-border); color: var(--yb-text); font-size: .78rem; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: .2s; }
.yb__idea:hover { border-color: var(--yb-primary); background: rgba(124,111,253,.15); }

.yb__generate {
  margin-top: auto; width: 100%; padding: 14px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--yb-primary), var(--yb-primary-2)); color: #fff;
  font-weight: 700; font-size: .98rem; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .2s, opacity .2s;
}
.yb__generate:hover { transform: translateY(-2px); }
.yb__generate:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Right: preview panel */
.yb__preview { display: grid; grid-template-rows: auto 1fr; min-height: 0; background: var(--yb-surface); }
.yb__preview-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--yb-border); }
.yb__tabs { display: flex; gap: 6px; }
.yb__tab { padding: 6px 13px; border-radius: 8px; border: 1px solid var(--yb-border); background: transparent; color: var(--yb-muted); font-size: .82rem; cursor: pointer; }
.yb__tab.active { background: rgba(124,111,253,.2); color: var(--yb-text); border-color: var(--yb-primary); }
.yb__preview-actions { margin-left: auto; display: flex; gap: 8px; }
.yb__act { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--yb-border); background: var(--yb-surface-2); color: var(--yb-text); font-size: .8rem; cursor: pointer; }
.yb__act:hover { border-color: var(--yb-primary); }
.yb__act:disabled { opacity: .4; cursor: not-allowed; }

.yb__stage { position: relative; min-height: 0; overflow: hidden; }
.yb__frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.yb__code { width: 100%; height: 100%; margin: 0; overflow: auto; background: #0a0d18; color: #cde3ff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.55; padding: 16px; white-space: pre; display: none; }

.yb__empty, .yb__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--yb-muted); text-align: center; padding: 30px; }
.yb__empty { background: var(--yb-surface); }
.yb__empty .yb__big { font-size: 46px; }
.yb__loading { background: rgba(10,13,24,.85); display: none; }
.yb.loading .yb__loading { display: flex; }
.yb__spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--yb-primary-2); animation: yb-spin .8s linear infinite; }
@keyframes yb-spin { to { transform: rotate(360deg); } }
.yb__loading small { max-width: 260px; }

.yb__hidden { display: none !important; }

@media (max-width: 820px) {
  .yb__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .yb__panel { border-right: 0; border-bottom: 1px solid var(--yb-border); max-height: 42%; }
  .yb__modal { height: 94vh; width: 96vw; }
}
@media (prefers-reduced-motion: reduce) { .yb__spinner { animation: none; } .yb__generate:hover { transform: none; } }