/* ============================================================
   Avelle OS — interactive client-view demo (A5)
   Reusable: link this + avelle-os-demo.js, drop in #avelle-os.
   ============================================================ */
.aos{border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F7F8FD 100%);
  border:1px solid rgba(82,78,240,.24);
  box-shadow:0 34px 80px -26px rgba(43,24,166,.34),0 2px 6px -2px rgba(43,24,166,.08),
             inset 0 1px 0 rgba(255,255,255,.9)}

/* window chrome */
.aos__bar{display:flex;align-items:center;gap:.55rem;padding:.75rem 1rem;
  background:linear-gradient(180deg,#FBFBFE,#F2F3FA);border-bottom:1px solid rgba(82,78,240,.14)}
.aos__dots{display:flex;gap:5px}
.aos__dots i{width:9px;height:9px;border-radius:50%;background:rgba(43,24,166,.15)}
.aos__title{font-family:'Satoshi',sans-serif;font-weight:700;font-size:.82rem;color:var(--ink);margin-left:.4rem}
.aos__client{font-size:.75rem;color:rgba(28,22,41,.5)}
.aos__live{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  font-weight:700;letter-spacing:.03em;color:var(--purple-deep)}
.aos__live i{width:7px;height:7px;border-radius:50%;background:var(--purple);
  animation:aospulse 1.6s ease-in-out infinite}
@keyframes aospulse{0%,100%{box-shadow:0 0 0 0 rgba(82,78,240,.5)}50%{box-shadow:0 0 0 6px rgba(82,78,240,0)}}

/* body: rail + panel */
.aos__body{display:grid;grid-template-columns:190px 1fr;min-height:430px}
.aos__rail{padding:.9rem .7rem;border-right:1px solid rgba(82,78,240,.12);
  background:linear-gradient(180deg,rgba(244,245,251,.7),rgba(255,255,255,.4))}
.aos__rail-label{font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(28,22,41,.4);padding:.25rem .55rem .55rem}
.aos-dept{display:flex;align-items:center;gap:.55rem;width:100%;padding:.6rem .6rem;margin-bottom:.2rem;
  border:none;border-radius:11px;background:transparent;cursor:pointer;text-align:left;
  font-family:inherit;font-size:.83rem;font-weight:600;color:rgba(28,22,41,.62);
  transition:background .18s,color .18s}
.aos-dept:hover{background:rgba(82,78,240,.07);color:var(--ink)}
.aos-dept.is-active{background:#fff;color:var(--ink);
  box-shadow:0 4px 14px -6px rgba(43,24,166,.3),inset 0 0 0 1px rgba(82,78,240,.22)}
.aos-dept svg{width:15px;height:15px;flex:none;color:var(--purple)}
.aos-dept__n{margin-left:auto;font-size:.68rem;font-weight:700;color:#fff;background:var(--purple);
  min-width:18px;height:18px;border-radius:100px;display:grid;place-items:center;padding:0 5px}
.aos-dept:not(.is-active) .aos-dept__n{background:rgba(82,78,240,.2);color:var(--purple-deep)}

.aos__panel{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column}
.aos__panel-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem}
.aos__panel-head h4{font-family:'Satoshi',sans-serif;font-weight:700;font-size:1rem;color:var(--ink)}
.aos__panel-head span{font-size:.76rem;color:rgba(28,22,41,.5)}

/* KPI tiles */
.aos-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:.9rem}
.aos-kpi{padding:.65rem .6rem;border-radius:13px;text-align:center;background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(43,24,166,.08)}
.aos-kpi b{display:block;font-family:'Satoshi',sans-serif;font-weight:700;font-size:1.15rem;
  letter-spacing:-.02em;color:var(--purple-deep);font-variant-numeric:tabular-nums}
.aos-kpi span{display:block;font-size:.63rem;font-weight:600;color:rgba(28,22,41,.5);margin-top:1px;line-height:1.25}

/* agent rows */
.aos-agents{display:flex;flex-direction:column;gap:.4rem;margin-bottom:.9rem}
.aos-agent{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;
  padding:.5rem .7rem;border-radius:12px;background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(43,24,166,.07)}
.aos-agent__dot{width:7px;height:7px;border-radius:50%;background:#C3BFE4;transition:background .3s}
.aos-agent.is-run .aos-agent__dot{background:var(--purple);animation:aospulse 1.4s ease-in-out infinite}
.aos-agent.is-done .aos-agent__dot{background:#22B573}
.aos-agent__main{min-width:0}
.aos-agent__name{display:block;font-size:.79rem;font-weight:600;color:var(--ink)}
.aos-agent__task{display:block;font-size:.7rem;color:rgba(28,22,41,.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aos-agent__chip{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;color:var(--purple-deep);background:rgba(82,78,240,.12);white-space:nowrap}
.aos-agent.is-done .aos-agent__chip{color:#0E7A4C;background:rgba(34,181,115,.14)}
.aos-agent__bar{grid-column:1/-1;height:4px;border-radius:100px;background:rgba(43,24,166,.08);overflow:hidden}
.aos-agent__fill{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,var(--purple),var(--purple-deep));transition:width .3s linear}

/* feed */
.aos-feed{margin-top:auto;border-radius:12px;padding:.6rem .75rem;height:96px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(43,24,166,.07)}
.aos-feed__line{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:.68rem;
  line-height:1.85;color:rgba(28,22,41,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:aosfeed .35s ease-out}
.aos-feed__line b{color:var(--purple-deep);font-weight:600}
.aos-feed__line em{font-style:normal;color:#0E7A4C}
@keyframes aosfeed{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* footer strip */
.aos__foot{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.6rem 1rem;
  border-top:1px solid rgba(82,78,240,.12);background:rgba(244,245,251,.6);
  font-size:.68rem;color:rgba(28,22,41,.45)}
.aos__foot b{color:var(--purple-deep);font-weight:700}
.aos__foot span{margin-left:auto}

@media (max-width:820px){
  /* minmax(0,1fr) not 1fr — a 1fr track's auto minimum sizes to the rail's
     content, making the column wider than the card */
  .aos__body{grid-template-columns:minmax(0,1fr)}
  /* min-width:0 — grid items default to min-width:auto, which would size the
     rail to its flex children and push the whole card past the viewport */
  .aos__rail{display:flex;gap:.35rem;overflow-x:auto;min-width:0;border-right:none;
    border-bottom:1px solid rgba(82,78,240,.12);padding:.6rem}
  .aos__rail-label{display:none}
  .aos-dept{width:auto;margin-bottom:0;white-space:nowrap;flex:none}
  .aos-dept__n{display:none}
  .aos-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .aos__live i,.aos-agent.is-run .aos-agent__dot{animation:none}
  .aos-feed__line{animation:none}
}