/* "Try the Brain" section on bosslevel.biz/air (copied from /realestate).
   Frames the interactive demo (air/demo/?embed=1) in a browser window.
   Uses the page's tokens from air.css; owns no other page styles.
   Phones get a poster and a full-screen link instead of a scroll-trapping iframe. */

.re-demo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px;padding:6px;border:1px solid var(--line);border-radius:999px;background:var(--panel);width:fit-content;max-width:100%}
.re-demo-tab{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 14px var(--body);cursor:pointer;transition:background .2s,color .2s}
.re-demo-tab span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel-2);font-size:12px}
.re-demo-tab:hover{color:var(--ink)}
.re-demo-tab[aria-selected="true"]{background:var(--orange);color:#140803}
.re-demo-tab[aria-selected="true"] span{background:#14080322}
.re-demo-panel{margin-top:26px}
.re-demo-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:18px;font-size:16px;color:var(--muted)}
.re-demo-label span{padding:4px 12px;border-radius:999px;background:#ff44001f;color:var(--orange-text);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.re-demo-frame{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);overflow:hidden;box-shadow:0 40px 90px -40px #000000cc}
:root[data-theme="light"] .re-demo-frame{box-shadow:0 40px 90px -46px #14101455}
.re-demo-bar{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.re-demo-dots{display:flex;gap:7px}
.re-demo-dots i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.re-demo-dots i:first-child{background:var(--orange)}
.re-demo-url{flex:1;min-width:0;max-width:420px;margin-inline:auto;padding:5px 14px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.re-demo-open{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--orange-text);white-space:nowrap}
.re-demo-open:hover{text-decoration:underline;text-underline-offset:3px}
.re-demo-frame iframe{display:block;width:100%;height:min(980px,92vh);min-height:720px;border:0;background:var(--bg)}
.re-demo-frame--chat iframe{height:min(900px,88vh);min-height:660px}
.re-demo-poster{display:none}
.re-demo-tips{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:26px;color:var(--muted);font-size:15px}
.re-demo-tips li{display:flex;gap:10px;align-items:baseline}
.re-demo-tips li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);transform:translateY(-1px)}
.re-demo-tips strong{color:var(--ink);font-weight:700}

@media (max-width:760px){
  .re-demo-frame iframe{display:none}
  .re-demo-bar .re-demo-open{display:none}
  .re-demo-frame{max-width:430px;margin-inline:auto;border-radius:28px}
  .re-demo-bar{height:40px;padding:0 12px;gap:10px}
  .re-demo-dots i{width:9px;height:9px}
  .re-demo-url{font-size:12px;padding:4px 10px}
  .re-demo-poster{display:block;position:relative;max-height:560px;overflow:hidden}
  .re-demo-poster picture,.re-demo-poster img{display:block;width:100%;height:auto}
  .re-demo-poster::after{content:"";position:absolute;inset:auto 0 0;height:200px;background:linear-gradient(to bottom,transparent,var(--panel) 72%);pointer-events:none}
  .re-demo-poster .button{position:absolute;left:50%;bottom:22px;z-index:1;transform:translateX(-50%);white-space:nowrap}
  .re-demo-poster .button:hover{transform:translateX(-50%) translateY(-2px)}
  .re-demo-label{margin-bottom:14px;font-size:15px}
  .re-demo-panel{margin-top:20px}
  .re-demo-tips{flex-direction:column}
  .re-demo-tabs{border-radius:18px;width:100%}
  .re-demo-tab{flex:1 1 40%;justify-content:center;padding:10px 12px}
}