/* AI team console mockup. Reskin: change the variables below.
   Translate: all text lives in index.html, nothing is drawn as an image. */
.cx-stage{
  /* Coquí skin: night bark text, mid brown labels, fawn fills, cream lines */
  --cx-accent:#7E6960; --cx-fill:#BB8C69; --cx-av:#9a7253;
  --cx-ink:#473D3A; --cx-text:#473D3A; --cx-muted:#6b5c57;
  --cx-bg:#fff; --cx-soft:#F7F0EF; --cx-line:#E1CFCD;
  --cx-ok:#5f7a5a; --cx-wait:#b07a2a; --cx-idle:#AC978F;
  position:relative;margin-top:64px;padding-bottom:8px
}
.cx{background:var(--cx-bg);border:1px solid var(--cx-line);box-shadow:0 24px 60px rgba(71,61,58,.14);border-radius:8px;overflow:hidden;font-size:13.5px;line-height:1.4;color:var(--cx-text);max-width:1000px}
.cx-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--cx-line);background:var(--cx-soft)}
.cx-bar i{width:9px;height:9px;border-radius:50%;background:var(--cx-line)}
.cx-title{margin-left:10px;font-size:12px;color:var(--cx-muted);letter-spacing:.04em}
.cx-body{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:360px}
.cx-h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cx-accent);font-weight:600;margin-bottom:10px}

/* agents */
.cx-side{border-right:1px solid var(--cx-line);padding:18px 16px;display:flex;flex-direction:column;gap:18px}
.cx-agents{list-style:none;display:flex;flex-direction:column;gap:4px}
.cx-agents li{display:flex;align-items:center;gap:10px;padding:7px 6px}
.cx-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--cx-av);color:#fff;font-size:11px;font-weight:500;letter-spacing:.04em}
.cx-agents span{flex:1;min-width:0}
.cx-agents strong{display:block;font-weight:500;color:var(--cx-ink);white-space:nowrap}
.cx-agents em{display:block;font-style:normal;font-size:11.5px;color:var(--cx-muted)}
.st{font-style:normal;font-size:10.5px;white-space:nowrap;display:flex;align-items:center;gap:5px;color:var(--cx-muted)}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cx-idle)}
.st-work::before{background:var(--cx-ok);animation:cx-pulse 1.6s ease-in-out infinite}
.st-wait{color:var(--cx-wait)}
.st-wait::before{background:var(--cx-wait)}
@keyframes cx-pulse{50%{opacity:.35}}

/* spend cap tile */
.cx-cap{margin-top:auto;border:1px solid var(--cx-line);background:var(--cx-soft);padding:12px 14px}
.cx-cap .cx-h{margin-bottom:8px}
.cx-meter{height:6px;background:var(--cx-line)}
.cx-meter span{display:block;height:100%;background:var(--cx-fill)}
.cx-cap-t{font-size:11.5px;color:var(--cx-muted);margin-top:7px}
.cx-cap-t b{color:var(--cx-ink);font-weight:600}

/* tabs */
.cx-main{padding:14px 18px 18px;min-width:0}
.cx-tabs{display:flex;gap:4px;border-bottom:1px solid var(--cx-line);margin-bottom:16px}
.cx-tabs button{font:inherit;font-size:13px;background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;color:var(--cx-muted);cursor:pointer;margin-bottom:-1px}
.cx-tabs button[aria-selected=true]{color:var(--cx-ink);border-color:var(--cx-accent);font-weight:500}
.cx-tabs b{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:4px;font-size:10.5px;background:var(--cx-wait);color:#fff;border-radius:9px;font-weight:600}
.cx-panel[hidden]{display:none}

/* board */
.cx-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cx-col{background:var(--cx-soft);padding:10px;min-height:270px}
.cx-cards{display:flex;flex-direction:column;gap:8px}
.cx-card{background:var(--cx-bg);border:1px solid var(--cx-line);border-left:3px solid var(--cx-idle);padding:9px 10px;animation:cx-in .45s ease}
.cx-card span{display:block;color:var(--cx-ink)}
.cx-card em{display:block;font-style:normal;font-size:11px;color:var(--cx-muted);margin-top:4px}
[data-col=doing] .cx-card{border-left-color:var(--cx-wait)}
[data-col=done] .cx-card{border-left-color:var(--cx-ok)}
[data-col=done] .cx-card span::before{content:"✓ ";color:var(--cx-ok)}
@keyframes cx-in{from{opacity:0;transform:translateY(-6px)}}

/* routines */
.cx-routines{list-style:none;border:1px solid var(--cx-line)}
.cx-routines li{display:grid;grid-template-columns:118px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--cx-line)}
.cx-routines li:last-child{border-bottom:0}
.cx-routines time{font-weight:600;color:var(--cx-accent);font-size:12.5px}
.cx-routines span{color:var(--cx-ink)}
.cx-routines em{font-style:normal;font-size:11.5px;color:var(--cx-muted)}

/* approval card */
.cx-approve{max-width:420px;border:1px solid var(--cx-line);border-top:3px solid var(--cx-wait);padding:16px 18px}
.cx-ask b{color:var(--cx-ink);font-weight:600}
.cx-quote{margin:10px 0 14px;padding:10px 12px;background:var(--cx-soft);color:var(--cx-muted);font-size:13px}
.cx-btns{display:flex;gap:8px}
.cx-btns span{flex:1;border-radius:999px;text-align:center;padding:8px 10px;font-size:12.5px;font-weight:500;border:1px solid var(--cx-ink)}
.cx-yes{background:var(--cx-ink);color:#fff}
.cx-no{color:var(--cx-ink)}

/* phone with the approval */
.cx-phone{position:absolute;right:0;bottom:-24px;width:220px;background:var(--cx-bg);border:8px solid var(--cx-ink);border-radius:28px;padding:22px 14px 16px;box-shadow:0 24px 50px rgba(71,61,58,.25);font-size:12.5px;line-height:1.4}
.cx-notch{position:absolute;top:6px;left:50%;width:54px;height:6px;margin-left:-27px;border-radius:3px;background:var(--cx-line)}
.cx-phone .cx-ask{margin-bottom:12px}
.cx-note{font-size:12px;color:var(--cx-muted);margin-top:14px}

@media (max-width:1100px){
  .cx-phone{right:-10px;width:200px}
}
@media (max-width:900px){
  .cx-stage{margin-top:44px}
  .cx-body{grid-template-columns:minmax(0,1fr)}
  .cx-side{min-width:0}
  .cx-side{border-right:0;border-bottom:1px solid var(--cx-line);padding:14px}
  .cx-agents{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}
  .cx-agents li{flex:none;border:1px solid var(--cx-line);padding:6px 8px}
  .cx-cap{margin-top:0}
  .cx-phone{position:relative;right:auto;bottom:auto;margin:-30px 0 0 auto;width:210px}
}
@media (max-width:620px){
  .cx{font-size:13px}
  .cx-main{padding:12px}
  .cx-board{grid-template-columns:1fr;gap:8px}
  .cx-col{min-height:0}
  .cx-routines li{grid-template-columns:84px 1fr}
  .cx-routines em{grid-column:2}
  .cx-tabs button{padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){
  .st-work::before,.cx-card{animation:none}
}