/* Shared base for the Dynamic demo layouts (studio, board), copied from the
   BREIN demos and recolored in Dynamic blue: tokens, the Dynamic logo, the top
   bar, the live-AI status strip, buttons and toast.
   The chat and workspace demos carry their own copies of the same tokens. */

:root{
  color-scheme:dark;
  --bg:#050508;--panel:#0c0c11;--panel-2:#16161d;--raised:#1c1c25;--line:#26262f;--line-strong:#383844;
  --ink:#f3f7fa;--soft:#d2dbe2;--muted:#94a3ae;
  --orange:#007ac2;--orange-text:#4fb0ea;--orange-tint:#007ac21f;
  --gold:#ff8106;--gold-text:#ffa24d;--gold-tint:#ff810617;
  --ok:#35c46a;--ok-text:#8fd3a6;--ok-tint:#2f9e5a1f;
  --display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --body:'Manrope',Arial,sans-serif;
  --shadow:0 24px 60px -24px #000000cc;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f6fa;--panel:#ffffff;--panel-2:#e8eff5;--raised:#ffffff;--line:#0e1a241c;--line-strong:#0e1a2433;
  --ink:#0e1a24;--soft:#34424e;--muted:#56646f;
  --orange-text:#0a619a;--orange-tint:#007ac214;
  --gold-text:#a34f00;--gold-tint:#ff810624;
  --ok-text:#1f7a44;--ok-tint:#2f9e5a17;
  --shadow:0 24px 60px -28px #0e1a2440;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
a{color:var(--orange-text)}
small{display:block;font-size:12px;color:var(--muted)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.icon{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* logo mark (the Dynamic logo overrides are at the end) */
.brein{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brein-mark{width:34px;height:34px;flex:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.brein-roof{stroke:var(--orange);stroke-width:3.2}
.brein-walls{stroke:currentColor;stroke-width:2.4}
.brein-net{stroke:var(--gold);stroke-width:1.6}
.brein-node{fill:var(--gold)}
.brein-word{display:flex;flex-direction:column;line-height:1}
.brein-word b{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:.03em}
.brein-word i{font-style:normal;color:var(--orange)}
.brein-word small{margin-top:3px;font-size:8.5px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}

/* top bar */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:18px;height:64px;padding:0 24px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar-title{font-weight:800;font-size:14px}
.bar-title span{font-weight:600;color:var(--muted)}
.back-link{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
.back-link:hover{border-color:var(--orange);color:var(--orange-text)}
.back-link .icon{width:17px;height:17px;transition:transform .2s}
.back-link:hover .icon{transform:translateX(-3px)}
.back-short{display:none}
.is-embed .back-link{display:none}
.demo-pill{margin-left:auto;padding:5px 11px;border-radius:999px;background:var(--gold-tint);color:var(--gold-text);font-size:12px;font-weight:700;white-space:nowrap}

/* live AI status strip */
.live-status{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:13px;color:var(--soft)}
.live-status strong{color:var(--ink)}
.live-status a{font-weight:800}
.live-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--muted)}
.live-status.on{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-tint)}
.live-status.on .live-dot{background:var(--ok);box-shadow:0 0 0 4px #35c46a26}
.live-status.off .live-dot{background:var(--gold)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tag.live{background:var(--ok-tint);color:var(--ok-text)}
.tag.sample{background:var(--panel-2);color:var(--muted)}

/* buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid transparent;font-weight:800;font-size:13px;transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn.primary{background:var(--orange);color:#ffffff;box-shadow:0 10px 26px -12px #007ac2aa}
.btn.primary:hover{background:#1b8fd8;transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn.ghost:hover{border-color:var(--orange);color:var(--orange-text)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.field{display:flex;flex-direction:column;gap:7px}
.field span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);color:var(--ink)}
.field textarea{min-height:84px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint)}

/* typing indicator and toast */
.thinking{display:inline-flex;gap:5px;padding:6px 0}
.thinking i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:pulse 1.2s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
#toast{position:fixed;bottom:24px;left:50%;z-index:60;display:none;max-width:90vw;padding:11px 18px;border:1px solid var(--line-strong);border-radius:999px;background:var(--raised);font-size:13px;font-weight:600;box-shadow:var(--shadow);transform:translateX(-50%)}
#toast.show{display:block}

@media (max-width:760px){
  .bar{gap:10px;padding:0 14px}
  .back-long{display:none}.back-short{display:inline}
  .back-link{padding:8px 12px 8px 9px}
  .bar-title span{display:none}
  .demo-pill{font-size:11px;padding:4px 9px}
}
@media (max-width:420px){
  .demo-pill{display:none}
  .bar .brein-word small{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Dynamic Air Quality Solutions logo: their wordmark, white on dark, blue on light */
.brein.dyn{flex-direction:column;align-items:flex-start;gap:5px;line-height:1}
.dyn-logo{display:block;width:auto;height:34px}
.dyn-logo.on-light{display:none}
:root[data-theme="light"] .dyn-logo.on-dark{display:none}
:root[data-theme="light"] .dyn-logo.on-light{display:block}
.dyn-sub{display:block;margin:0;font-size:8.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
img.brein-mark{object-fit:contain}
.bar .dyn-logo{height:28px}
@media (max-width:420px){.bar .dyn-sub{display:none}.bar .dyn-logo{height:24px}}
/* The shared unlock card and lock button (/realestate/demo/unlock.css) in Dynamic blue */
html .brein-lock{border-color:#007ac266;background:#007ac21a}
html .brein-lock:hover{background:#007ac22e;border-color:var(--orange)}
html .bu-card{box-shadow:0 30px 80px -24px #000000d9,0 0 0 1px #007ac21a}
html .bu-submit{color:#fff;box-shadow:0 12px 30px -12px #007ac2aa}
html .bu-submit:hover{background:#1b8fd8}
html .bu-form input:focus{box-shadow:0 0 0 3px #007ac229}