/* Interactive replica of the desktop app. Colours and sizes come straight from the
   app's own stylesheet (DARK_QSS / SETUP_QSS), so it looks like the real window.
   The replica stays dark in both site themes - the real app is a dark overlay. */
#app-demo .ad-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:30px;align-items:start}

/* ---- the "desktop" behind the app: a video call ---- */
.ad-desk{position:relative;border-radius:16px;overflow:hidden;min-height:560px;
  background:linear-gradient(135deg,#1b2540,#2a3358 55%,#1d2a4a);border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(20,30,70,.35);padding:14px}
.ad-meet{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:8px;padding:44px 12px 12px;opacity:.55}
.ad-tile{border-radius:10px;background:linear-gradient(160deg,#3a4a7a,#26335c);display:flex;align-items:center;justify-content:center;
  position:relative;color:#fff;font-weight:700}
.ad-tile i{font-style:normal;width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:rgba(255,255,255,.14)}
.ad-tile span{position:absolute;left:8px;bottom:6px;font-size:11px;font-weight:600;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:5px}
.ad-meetbar{position:absolute;left:0;right:0;top:0;height:34px;background:rgba(0,0,0,.35);color:#cfd8f3;font-size:12px;
  display:flex;align-items:center;gap:10px;padding:0 14px}
.ad-meetbar b{color:#fff}
.ad-rec{width:8px;height:8px;border-radius:50%;background:#ff5a6a}
.ad-badge{position:absolute;right:14px;bottom:12px;z-index:5;font-size:12px;font-weight:700;color:#dff;background:rgba(10,20,40,.72);
  border:1px solid rgba(255,255,255,.18);padding:6px 11px;border-radius:999px}

/* ---- the app window ---- */
.adw{position:relative;z-index:3;max-width:960px;margin:34px auto 34px;font:14px/1.35 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  color:#fff;opacity:.97;--ans-fs:15px}
.adw *{box-sizing:border-box}
.adw button,.adw input{font:inherit;color:inherit}
.adw-main{transition:opacity .15s}
.adw-bar{background:rgba(24,24,24,.9);border:1px solid rgba(255,255,255,.157);border-radius:8px;padding:9px 12px;
  backdrop-filter:blur(6px)}
.adw-r1,.adw-r2{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.adw-r1{justify-content:space-between}
.adw-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.adw-brand img{width:26px;height:26px;border-radius:50%}
.adw-brand .a{color:#9ec5ff}.adw-brand .b{color:#cbd5ff}.adw-brand .c{color:#c4b5fd}
.adw-ctl{display:flex;align-items:center;gap:8px}
.adw-timer{font-weight:700;font-size:16px;padding:0 6px;font-variant-numeric:tabular-nums}
.adw-ico{opacity:.9;font-size:13px}
.adw input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.18);outline:none;width:110px;cursor:pointer}
.adw input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.25)}
.adw input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.25)}
.adw-r2{margin-top:7px}
.adw-sum{font-size:11px;color:#e8e8e8;padding:0 4px;white-space:nowrap}
.adw-user{font-size:12px;color:#e8e8e8;padding:0 2px;margin-left:auto}
.adw-btn{background:rgba(58,58,58,.86);color:#fff;border:1px solid rgba(255,255,255,.215);border-radius:5px;padding:4px 7px;font-size:11px;
  cursor:pointer;white-space:nowrap;line-height:1.3}
.adw-btn:hover{background:rgba(78,78,78,.92)}
.adw-btn.on{outline:2px solid #ffcf6b;outline-offset:1px}
.adw-wallet{font-weight:700}
.adw-start{background:rgba(31,106,58,.92);border-color:rgba(255,255,255,.27);font-weight:700}
.adw-start:hover{background:rgba(40,133,72,.96)}
.adw-start.stop{background:rgba(140,44,44,.92)}
.adw-start.stop:hover{background:rgba(170,55,55,.96)}
.adw-status{margin:9px 2px 8px;color:#dcdcdc;font-size:14px;min-height:20px;display:flex;align-items:center;gap:8px}
.adw-dot{width:9px;height:9px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 0 rgba(46,204,113,.6);animation:adwp 1.4s infinite}
@keyframes adwp{70%{box-shadow:0 0 0 8px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}
.adw-in{display:flex;gap:8px;align-items:center;background:rgba(24,24,24,.9);border:1px solid rgba(255,255,255,.157);border-radius:8px;padding:8px 10px;flex-wrap:wrap}
.adw-input{flex:1;min-width:160px;background:rgba(45,45,45,.88);border:1px solid rgba(255,255,255,.215);border-radius:5px;padding:7px 9px;
  color:#fff;outline:none;font-size:14px}
.adw-input::placeholder{color:#9a9a9a}
.adw-ask{background:rgba(45,90,150,.9);font-weight:700}
.adw-ask:hover{background:rgba(58,110,180,.95)}
.adw-chat{margin-top:8px;border:1px solid rgba(255,255,255,.118);border-radius:8px;padding:12px;min-height:290px;max-height:340px;overflow-y:auto;
  background:rgba(18,20,28,.82);backdrop-filter:blur(4px)}
.adw-chat::-webkit-scrollbar{width:10px}.adw-chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24);border-radius:5px}
.adw-empty{color:#ddd;font-size:var(--ans-fs)}
.adw-item{margin-bottom:14px}
.adw-q{color:#9ec5ff;font-size:calc(var(--ans-fs) - 1px);margin:0 0 6px}
.adw-q b{color:#9ec5ff}
.adw-a{font-size:var(--ans-fs);line-height:1.55;color:#fff;margin:0;white-space:pre-wrap}
.adw-a pre{margin:8px 0 0;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 12px;
  font:12.5px/1.5 Consolas,"Cascadia Mono",monospace;color:#e6edf7;overflow-x:auto;white-space:pre}
.adw-caret{display:inline-block;width:7px;height:1em;background:#9ec5ff;vertical-align:-2px;animation:adwb 1s steps(1) infinite}
@keyframes adwb{50%{opacity:0}}
.adw-foot{margin-top:8px;font-size:11px;color:#c9d0e4;opacity:.85;display:flex;gap:14px;flex-wrap:wrap}
.adw-foot b{color:#fff}

/* screen-capture simulation */
.adw-shot{position:absolute;inset:0;z-index:20;border-radius:8px;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.4)}
.adw-shot.show{display:flex}
.adw-shotbox{width:min(520px,92%);background:#fff;color:#1c2331;border-radius:10px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5);position:relative}
.adw-shotbox .hd{background:#e9edf6;padding:6px 10px;font-size:11px;color:#46506a;display:flex;gap:6px;align-items:center}
.adw-shotbox .hd i{width:8px;height:8px;border-radius:50%;background:#c3c9d8;display:inline-block}
.adw-shotbox .bd{padding:14px 16px;font-size:13px;line-height:1.5}
.adw-shotbox pre{margin:8px 0 0;background:#0f1424;color:#cfe3ff;padding:10px 12px;border-radius:8px;font:12px/1.5 Consolas,monospace}
.adw-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.adw-shot.show .adw-flash{animation:adwf .5s ease-out}
@keyframes adwf{0%{opacity:.9}100%{opacity:0}}
.adw-shotlbl{position:absolute;left:50%;transform:translateX(-50%);top:-30px;background:#4b7bff;color:#fff;font-weight:700;font-size:12px;padding:5px 12px;border-radius:999px;white-space:nowrap}

/* dialogs */
.adw-sheet{position:absolute;inset:-8px;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border-radius:10px;padding:10px}
.adw-sheet.show{display:flex}
.adw-card{width:min(560px,100%);max-height:100%;overflow-y:auto;background:#242424;border-radius:12px;padding:18px 22px 18px;color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.6);font-size:14px}
.adw-card.light{background:#eef1f8;color:#1c2331}
.adw-card h3{margin:0 0 12px;font-size:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.adw-x{background:transparent;border:0;color:inherit;font-size:16px;cursor:pointer;opacity:.7;padding:2px 6px}
.adw-sec{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#cfd3dc;margin:14px 0 6px;display:flex;align-items:center;gap:10px}
.adw-sec:after{content:"";flex:1;height:1px;background:rgba(255,255,255,.15)}
.adw-card p.h{margin:0 0 8px;color:#a7adbb;font-size:13.5px;line-height:1.5}
.adw-file{display:flex;align-items:center;gap:10px;background:#2c2c2c;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 14px}
.adw-file .n{flex:1;text-align:center;color:#6aa0ff;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adw-file button{background:transparent;border:0;color:#6aa0ff;font-weight:700;cursor:pointer;font-size:12.5px}
.adw-ta{width:100%;min-height:78px;background:#2c2c2c;border:1px solid rgba(255,255,255,.18);border-radius:8px;color:#fff;padding:9px 11px;font:13.5px/1.5 inherit;resize:vertical}
.adw-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.adw-b2{background:#333;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;padding:8px 18px;cursor:pointer}
.adw-b1{background:#3a6fd8;border:0;border-radius:8px;color:#fff;padding:9px 22px;font-weight:700;cursor:pointer}
.adw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:#2a2a2a;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:12px 14px}
.adw-stats small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;color:#cfd3dc;margin-bottom:2px}
.adw-stats b{font-size:21px;color:#5b8cff}
.adw-sel{width:100%;background:#2c2c2c;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:10px 12px;font-size:14px}
.adw-ready{list-style:none;margin:6px 0 0;padding:0}
.adw-ready li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:15px;opacity:.25;transition:opacity .3s}
.adw-ready li.in{opacity:1}
.adw-ready li:before{content:"\2713";width:19px;height:19px;border-radius:5px;background:#3dbb7a;color:#fff;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.adw-ready small{color:#aab;font-size:15px}
.adw-hist .it{background:#2c2c2c;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px 13px;margin-bottom:8px}
.adw-hist .it b{color:#9ec5ff;font-size:13px}
.adw-hist .it p{margin:5px 0 0;font-size:13px;color:#e6e6e6;line-height:1.5}
.adw-hist .it small{color:#8d93a3}
.adw-kbd{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;background:#f7f8fc;border:1px solid #d5dae6;border-radius:8px;padding:9px 12px;margin-bottom:7px;color:#3b4353;font-size:13.5px}
.adw-kbd b{background:#fff;color:#2f6fe0;border:1px solid #c7cee0;border-bottom:2px solid #c7cee0;border-radius:6px;padding:4px 8px;text-align:center;font-size:12.5px}
.adw-step{display:flex;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.adw-step:first-of-type{border-top:0}
.adw-step span{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(90deg,#4b7bff,#8b5cff);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.adw-notes h4{margin:12px 0 4px;font-size:13px;color:#9ec5ff}
.adw-notes ul{margin:0;padding-left:18px;color:#e6e6e6;font-size:13.5px}
.adw-toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#1f6a3a;color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;z-index:40;display:none}
.adw-toast.show{display:block}

/* hide (panic) overlay */
.ad-hidden{position:absolute;inset:0;z-index:12;display:none;align-items:center;justify-content:center;text-align:center;color:#cfd8f3;
  background:rgba(8,12,24,.55);font-size:14px;padding:20px}
.ad-hidden.show{display:flex}
.ad-hidden b{display:block;color:#fff;font-size:17px;margin-bottom:6px}
.adw.is-hidden{visibility:hidden}

/* explainer side panel */
.ad-side{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:grid;grid-template-columns:1.25fr 1fr;gap:6px 30px}
.ad-left{min-width:0}.ad-right{min-width:0;border-left:1px solid var(--line);padding-left:26px}
.ad-side h3{margin:0 0 6px;font-size:16px}
.ad-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.ad-chip{font-size:12.5px;font-weight:600;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 11px;cursor:pointer}
.ad-chip:hover{border-color:#4b7bff}
.ad-chip.on{background:linear-gradient(90deg,#4b7bff,#8b5cff);color:#fff;border-color:transparent}
.ad-hint{font-size:12.5px;color:var(--muted);margin:0 0 10px}
.ad-detail{padding-top:2px}
.ad-detail h4{margin:0 0 5px;font-size:15.5px}
.ad-detail p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.ad-note{margin-top:12px;font-size:12px;color:var(--muted)}
@media(max-width:860px){.ad-side{grid-template-columns:1fr}.ad-right{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}}
@media(max-width:640px){
  .ad-desk{padding:8px;min-height:0}
  .ad-meet{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr}
  .adw{margin:30px auto 40px}
  .adw-user{display:none}
  .adw input[type=range]{width:78px}
  .adw-kbd{grid-template-columns:1fr}
  .adw-stats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .adw-stats b{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.adw-dot,.adw-caret{animation:none}}

/* keep the replica dark whatever the site theme is */
html[data-theme] .adw input.adw-input{background:rgba(45,45,45,.88);color:#fff;border:1px solid rgba(255,255,255,.215)}
html[data-theme] .adw .adw-ta{background:#2c2c2c;color:#fff;border:1px solid rgba(255,255,255,.18)}
html[data-theme] .adw .adw-sel{background:#2c2c2c;color:#fff;border:1px solid rgba(255,255,255,.18)}
html[data-theme] .adw input[type=range]{background:rgba(255,255,255,.18);border:0;padding:0}
html[data-theme] .adw ::placeholder{color:#9a9a9a}

/* one row of controls on desktop, like the real window: the role summary shrinks instead of the row wrapping */
@media(min-width:900px){
  .adw-r2{flex-wrap:nowrap}
  .adw-sum{flex:1 1 auto;min-width:40px;overflow:hidden;text-overflow:ellipsis}
  .adw-user{margin-left:0}
}