/* Ask Dxtr (.as), Make (.mk), Helpers (.hp), School and parent controls (.ct). Dark Dxtr theme, rem sizes like
   base.css. Safe for Windows 7 browsers (Chrome/Edge 109, Firefox 115): flex/grid gap, no :has, no nesting, no
   color-mix. Phones: one column below 760px wide. */
.as,.mk,.hp,.ct{flex:1;min-height:0}
.as .lcard,.mk .lcard,.hp .lcard,.ct .lcard{background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);padding:.9rem 1rem}
.as .ch,.mk .ch,.hp .ch,.ct .ch{display:inline-flex;align-items:center;padding:.45rem .85rem;border-radius:99px;background:var(--s2);border:1px solid var(--hair);
  font-size:.82rem;font-weight:700;color:var(--paper);text-align:left;transition:transform 90ms}
.as .ch:active,.mk .ch:active{transform:scale(.97)}
.as input[type=text],.mk input[type=text],.hp input[type=text],.hp select,.mk select{background:var(--s2);border:1px solid var(--hair);border-radius:.8rem;height:2.7rem;padding:0 .9rem;
  font-size:.95rem;min-width:0;color:var(--paper)}
.as input:focus,.mk input:focus,.hp input:focus{outline:2px solid var(--gold);outline-offset:1px}

/* ── Ask Dxtr ── */
.as{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:1rem}
.as-main{display:flex;flex-direction:column;gap:.7rem;min-height:0;min-width:0}
.as-top{display:flex;align-items:center;gap:.8rem}
.as-top h1{margin:.15rem 0 0;font-size:1.5rem;line-height:1.15}
.as-ic{width:2.8rem;height:2.8rem;flex:none}
.as-th{flex:1;min-height:6rem;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;padding:.2rem .2rem .4rem;-webkit-overflow-scrolling:touch}
.as-msg{max-width:min(46rem,92%);border-radius:1.1rem;padding:.7rem .95rem;font-size:.98rem;line-height:1.5;user-select:text;-webkit-user-select:text;overflow-wrap:anywhere}
.as-msg.me{align-self:flex-end;background:var(--s3);border-bottom-right-radius:.35rem}
.as-msg.ai{align-self:flex-start;background:var(--s1);border:1px solid var(--hair);border-bottom-left-radius:.35rem}
.as-msg p{margin:0 0 .55rem}.as-msg p:last-child{margin-bottom:0}
.as-empty{margin:auto;max-width:28rem;text-align:center;color:var(--mut);font-size:.95rem;line-height:1.5}
.as-empty p{margin:0}
.as-pic{display:block;max-width:12rem;max-height:9rem;border-radius:.7rem;margin-bottom:.4rem;object-fit:cover}
.as-img{display:block;max-width:100%;max-height:22rem;border-radius:.8rem}
.as-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.55rem}
.as-meta:empty{display:none}
.as-act{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:.6rem;font-size:.74rem;font-weight:800;color:var(--mut);background:var(--s2);border:1px solid var(--hair)}
.as-act .ic{width:.95rem;height:.95rem}
.as-src{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--hair2);display:flex;flex-direction:column;gap:.25rem}
.as-src a{color:var(--blue);font-size:.85rem;font-weight:700;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.as-more{margin-top:.55rem}
.as-dots{display:inline-flex;gap:.3rem;margin:.2rem 0}
.as-dots i{width:.45rem;height:.45rem;border-radius:50%;background:var(--mut);animation:asdot 1s infinite ease-in-out}
.as-dots i:nth-child(2){animation-delay:.15s}.as-dots i:nth-child(3){animation-delay:.3s}
@keyframes asdot{40%{transform:translateY(-.3rem);opacity:1}0%,80%,100%{opacity:.45}}
.as-shot{position:relative;margin-top:.6rem;border-radius:.7rem;overflow:hidden;max-width:30rem}
.as-shot img{display:block;width:100%}
.as-pt{position:absolute;width:1.6rem;height:1.6rem;margin:-.8rem 0 0 -.8rem;border-radius:50%;border:.2rem solid var(--gold);box-shadow:0 0 0 .3rem rgba(240,185,76,.35);animation:aspt 1.4s infinite}
@keyframes aspt{50%{box-shadow:0 0 0 .7rem rgba(240,185,76,0)}}
.as-ptl{position:absolute;transform:translate(1.1rem,-50%);background:var(--gold);color:var(--ink-on-gold);font-size:.75rem;font-weight:800;padding:.2rem .5rem;border-radius:.5rem;white-space:nowrap}
.as-tools{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.15rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.as-tools::-webkit-scrollbar{display:none}
.as-tool{flex:none;display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:5.4rem;padding:.55rem .5rem .5rem;border-radius:.9rem;background:var(--s1);border:1px solid var(--hair);
  font-size:.74rem;font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.3);transition:transform 90ms}
.as-tool:active{transform:translateY(2px)}
.as-tool img{width:1.7rem;height:1.7rem}
.as-tool em{font-style:normal;font-size:.6rem;color:var(--mut);font-weight:700;max-width:6.5rem;text-align:center;line-height:1.2}
.as-tool.locked{opacity:.55;box-shadow:none}
.as-tool.locked img{filter:grayscale(1)}
.as-tool.tg.on{background:rgba(95,168,224,.18);border-color:rgba(95,168,224,.55);color:var(--blue)}
.as-sug{display:flex;flex-wrap:wrap;gap:.4rem}
.as-comp{display:flex;gap:.5rem;align-items:center}
.as-comp input{flex:1}
.as-comp .btn{width:3rem;padding:0}
.as-voice{flex:1;padding:.6rem .8rem;border-radius:.8rem;background:var(--s2)}
.as-mic{flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--s2);border:1px solid var(--hair);display:grid;place-items:center}
.as-mic img{width:1.5rem;height:1.5rem}
.as-mic.on{background:var(--clay);border-color:transparent;animation:aspt 1.2s infinite}
.as-side{display:flex;flex-direction:column;gap:.8rem;overflow-y:auto;min-height:0}
.as-rec{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;text-align:left;padding:.55rem 0;border-top:1px solid var(--hair2)}
.as-rec:first-child{border-top:none}
.as-rec b{font-size:.9rem}
.as-feat{display:flex;flex-direction:column;gap:.15rem;margin-top:.3rem}
.as-f{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--mut);font-weight:600}
.as-f.on{color:var(--paper)}
.as-f em{font-style:normal;font-size:.62rem;color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:.08em}

/* ── Make ── */
.mk{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:1rem}
.mk-l{display:flex;flex-direction:column;gap:.7rem;min-height:0;min-width:0}
.mk-r{display:flex;flex-direction:column;gap:.8rem;overflow-y:auto;min-height:0}
.mk-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.mk-form input{flex:1;min-width:10rem}
.mk-stages{display:flex;gap:.4rem;list-style:none;margin:0;padding:0;counter-reset:mk}
.mk-stages li{flex:1;text-align:center;padding:.35rem .4rem;border-radius:.6rem;background:var(--s1);border:1px solid var(--hair);font-size:.74rem;font-weight:800;color:var(--mut)}
.mk-stages li.on{background:rgba(240,185,76,.16);border-color:rgba(240,185,76,.5);color:var(--gold)}
.mk-stages li.done{background:rgba(111,191,139,.14);border-color:rgba(111,191,139,.4);color:var(--green)}
.mk-run{flex:1;min-height:12rem;border-radius:var(--r);background:var(--s1);border:1px solid var(--hair);overflow:hidden;display:flex}
.mk-frame{flex:1;width:100%;min-height:12rem;border:0;background:#10241e}
.mk-frame.sm{height:16rem;flex:none;border-radius:.7rem;margin-top:.5rem}
.mk-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1rem;text-align:center;color:var(--mut)}
.mk-empty img{width:3rem;height:3rem;opacity:.8}
.mk-empty p{margin:0}
.mk-item{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.5rem 0;border-top:1px solid var(--hair2)}
.mk-item:first-child{border-top:none}
.mk-item img{width:1.7rem;height:1.7rem;flex:none}
.mk-item span{display:flex;flex-direction:column;min-width:0}
.mk-item b{font-size:.88rem}

/* ── Helpers ── */
.hp{display:flex;flex-direction:column;gap:.8rem;overflow-y:auto}
.hp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1rem;align-items:start}
.hp-cards{display:flex;flex-direction:column;gap:.7rem}
.hp-card img{width:2rem;height:2rem;flex:none}
.hp-card b{font-size:.98rem}
.hp-card.locked{opacity:.6}
.hp-out{min-height:12rem;user-select:text;-webkit-user-select:text}
.hp-out h3{margin:.1rem 0 .5rem}
.hp-out p{margin:0 0 .5rem}
.hp .mk-form{margin-top:.6rem}
.hp .mk-form input{min-width:8rem}

/* ── School and parent controls ── */
.ct{display:flex;flex-direction:column;gap:.8rem;min-height:0}
.ct-tabs{align-self:flex-start;overflow-x:auto;max-width:100%}
.ct-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;padding-bottom:.5rem}
.ct-body > *{flex:none}
.ct-body > p{margin:0}
.ct-grid{display:grid;gap:0;background:var(--s1);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.ct-grid > div{display:flex;align-items:center;justify-content:center;padding:.45rem .5rem;border-top:1px solid var(--hair2);min-height:2.6rem}
.ct-grid > .h{border-top:none;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:800;text-align:center;background:var(--s2)}
.ct-grid > .fn{justify-content:flex-start;font-size:.86rem;font-weight:700}
.ct-grid > .na{color:var(--s3);font-weight:800}
.ct-ap .row{flex-wrap:wrap}
.ct-prev:empty{display:none}
.ct-list{display:flex;flex-direction:column}
.ct-list .lr{flex-wrap:wrap}
.ct-bars{display:flex;flex-direction:column;gap:.45rem}
.ct-bn{width:10rem;font-size:.85rem;font-weight:700;flex:none}
.ct-bar{flex:1;height:.7rem;border-radius:99px;background:var(--s2);overflow:hidden}
.ct-bar i{display:block;height:100%;background:var(--gold);border-radius:99px}
.ct-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;overflow-y:auto;min-height:0}
.ct-two .lr .t .sm{font-weight:500}
.ct .tile .sm{margin-top:.35rem}

/* ── phones and narrow windows ── */
@media (max-width:760px){
  .as,.mk{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .as-side,.mk-r{max-height:14rem}
  .as-top h1{font-size:1.25rem}
  .as-msg{max-width:100%}
  .hp-grid,.ct-two{grid-template-columns:1fr}
  .ct-grid{font-size:.8rem}
  .ct-bn{width:7rem}
  .mk-stages li{font-size:.66rem;padding:.3rem .2rem}
}