/* aw-cowork-ui.css — stylized Microsoft Copilot Cowork surfaces for the Copilot journey (Act 5) + Cowork lab guides.
   Markup comes from lib/js/aw-cowork-ui.js. Every root carries .cw so the tokens below scope to the kit. */

.cw {
	--cw-bg:#ffffff; --cw-surface:#f6f6f9; --cw-raise:#ffffff; --cw-line:#dedbe7; --cw-line-strong:#c9c5d6;
	--cw-ink:#1f1d24; --cw-sub:#5f5b69; --cw-faint:#8a8696;
	--cw-accent:#5b5fc7; --cw-accent-soft:#eceefb; --cw-on-accent:#ffffff;
	--cw-ok:#107c41; --cw-ok-soft:#e7f5ec; --cw-warn:#9a6200; --cw-warn-soft:#fdf3df; --cw-risk:#b42a3e; --cw-risk-soft:#fbe9ec;
	--cw-shadow:0 10px 28px rgba(40,30,70,0.14);
	--cw-rail:#f7f7f8; --cw-nav-on:#ebe9f4; --cw-chrome:#efeff1; --cw-coral:#e0675a; --cw-coral-soft:#f8d3cb;
	font-family:'Segoe UI', system-ui, sans-serif; color:var(--cw-ink); text-align:left;
}
body.theme-dark .cw {
	--cw-bg:#26252e; --cw-surface:#2e2d37; --cw-raise:#34333e; --cw-line:#46444f; --cw-line-strong:#5a5866;
	--cw-ink:#efedf5; --cw-sub:#bcb8c8; --cw-faint:#8f8b9c;
	--cw-accent:#a9acff; --cw-accent-soft:#363759; --cw-on-accent:#17172a;
	--cw-ok:#6fd49a; --cw-ok-soft:#21362b; --cw-warn:#f0c46a; --cw-warn-soft:#3a3122; --cw-risk:#ff9aa8; --cw-risk-soft:#3d262b;
	--cw-shadow:0 10px 28px rgba(0,0,0,0.42);
	--cw-rail:#2b2a33; --cw-nav-on:#3a3850; --cw-chrome:#1f1e25; --cw-coral:#f0907f; --cw-coral-soft:#4a302c;
}

/* ── window: Microsoft Edge frame → Copilot app ── */
.cw-win { display:flex; flex-direction:column; width:100%; background:var(--cw-bg); border:1px solid var(--cw-line-strong); border-radius:10px; box-shadow:var(--cw-shadow); overflow:hidden; }
.cw svg { width:1.05rem; height:1.05rem; flex:none; display:block; }
.cw svg.is-thick path { stroke-width:3; }
.cw-etabs { display:flex; align-items:flex-end; gap:0.3rem; padding:0.35rem 0.5rem 0; background:var(--cw-chrome); }
.cw-etab { display:inline-flex; align-items:center; gap:0.45rem; min-width:11rem; padding:0.35rem 0.65rem; border-radius:8px 8px 0 0; background:var(--cw-bg); font-size:0.78rem; }
.cw-etab img { width:15px; height:15px; }
.cw-etab i { margin-left:auto; font-style:normal; color:var(--cw-faint); }
.cw-enew { font-size:1rem; color:var(--cw-sub); padding:0 0.4rem 0.3rem; }
.cw-ectl { display:inline-flex; gap:1.1rem; padding:0 0.4rem 0.4rem; color:var(--cw-sub); }
.cw-ectl i { font-style:normal; font-size:0.8rem; }
.cw-eaddr { display:flex; align-items:center; gap:0.6rem; padding:0.35rem 0.6rem; background:var(--cw-bg); border-bottom:1px solid var(--cw-line); color:var(--cw-sub); }
.cw-enav { display:inline-flex; gap:0.55rem; }
.cw-url { flex:1; display:flex; align-items:center; gap:0.45rem; min-width:0; padding:0.28rem 0.75rem; border-radius:999px; background:var(--cw-surface); font-size:0.8rem; color:var(--cw-ink); }
.cw-url svg { width:0.85rem; height:0.85rem; color:var(--cw-sub); }
.cw-url span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-ava { flex:none; width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:50%; background:#0f7b80; color:#fff; font-size:0.85rem; font-weight:600; }
.cw-ava.is-sm { width:1.4rem; height:1.4rem; font-size:0.68rem; }
.cw-bar-sp { flex:1; }
.cw-body { display:flex; min-height:0; flex:1; }
.cw-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.7rem; padding:1rem 1.1rem; }

/* left rail (Copilot app) */
.cw-rail { flex:none; width:11.5rem; display:flex; flex-direction:column; gap:0.55rem; padding:0.7rem 0.55rem 0.6rem; background:var(--cw-rail); border-right:1px solid var(--cw-line); }
.cw-rail-h { display:flex; align-items:center; gap:0.4rem; padding:0 0.2rem; }
.cw-rail-h b { font-size:1.1rem; font-weight:600; margin-right:auto; }
.cw-rail-ic { display:inline-flex; gap:0.5rem; color:var(--cw-sub); }
.cw-rail-ic svg { width:0.9rem; height:0.9rem; }
.cw-seg { display:flex; padding:3px; border-radius:10px; background:var(--cw-line); }
.cw-seg span { flex:1; text-align:center; font-size:0.82rem; padding:0.25rem 0; border-radius:8px; color:var(--cw-sub); }
.cw-seg span.is-on { background:var(--cw-bg); color:var(--cw-ink); box-shadow:0 1px 2px rgba(0,0,0,0.12); }
.cw-nav { display:flex; flex-direction:column; gap:0.1rem; }
.cw-nav span { display:flex; align-items:center; gap:0.55rem; padding:0.38rem 0.5rem; border-radius:8px; font-size:0.85rem; color:var(--cw-ink); }
.cw-nav em { font-style:normal; white-space:nowrap; }
.cw-nav span.is-on { background:var(--cw-nav-on); }
.cw-acct { margin-top:auto; display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0.2rem 0; color:var(--cw-sub); }
.cw-acct-t { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.cw-acct-t > span { display:flex; align-items:center; gap:0.3rem; font-size:0.8rem; color:var(--cw-ink); }
.cw-acct-t i { font-style:normal; font-size:0.62rem; font-weight:600; padding:0.02rem 0.25rem; border-radius:3px; background:var(--cw-ink); color:var(--cw-bg); }
.cw-acct-t small { font-size:0.7rem; color:var(--cw-sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-rail.is-mini { width:3.2rem; align-items:center; }
.cw-rail.is-mini .cw-rail-h, .cw-rail.is-mini .cw-seg, .cw-rail.is-mini .cw-nav em, .cw-rail.is-mini .cw-acct-t, .cw-rail.is-mini .cw-acct > svg { display:none; }
.cw-rail.is-mini .cw-nav { margin-top:0.2rem; }
.cw-rail.is-mini .cw-acct { padding:0; }

/* ── pills, chips, buttons ── */
.cw-pill { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.8rem; padding:0.2rem 0.65rem; border-radius:999px; border:1px solid var(--cw-line); background:var(--cw-bg); color:var(--cw-sub); white-space:nowrap; }
.cw-pill.is-accent { border-color:var(--cw-accent); color:var(--cw-accent); background:var(--cw-accent-soft); }
.cw-pill.is-ok { border-color:var(--cw-ok); color:var(--cw-ok); background:var(--cw-ok-soft); }
.cw-pill.is-warn { border-color:var(--cw-warn); color:var(--cw-warn); background:var(--cw-warn-soft); }
.cw-pill.is-risk { border-color:var(--cw-risk); color:var(--cw-risk); background:var(--cw-risk-soft); }
.cw-btn { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.9rem; font-weight:600; padding:0.4rem 0.95rem; border-radius:8px; border:1px solid var(--cw-line-strong); background:var(--cw-bg); color:var(--cw-ink); white-space:nowrap; }
.cw-btn.is-primary { background:var(--cw-accent); border-color:var(--cw-accent); color:var(--cw-on-accent); }
.cw-btn.is-split { padding-right:0.55rem; }
.cw-btn .cw-caret { padding-left:0.5rem; margin-left:0.15rem; border-left:1px solid color-mix(in srgb, currentColor 40%, transparent); }
.cw-link { font-size:0.8rem; color:var(--cw-accent); }

/* ── home ── */
.cw-home { width:100%; max-width:36rem; margin:0 auto; display:flex; flex-direction:column; gap:0.75rem; padding:0.8rem 0 0.4rem; }
.cw-greet { font-family:Georgia, Cambria, 'Times New Roman', serif; font-size:1.7rem; font-weight:400; padding-left:1.4rem; margin-bottom:0.2rem; }
.cw-compose { display:flex; flex-direction:column; gap:0.6rem; padding:0.8rem 1rem 0.6rem; border:1px solid var(--cw-line-strong); border-radius:22px; background:var(--cw-bg); box-shadow:0 4px 14px rgba(0,0,0,0.06); }
.cw-compose-text { font-size:1rem; line-height:1.45; min-height:1.45em; color:var(--cw-ink); }
.cw-compose-text.is-empty { color:var(--cw-faint); }
.cw-compose-row { display:flex; align-items:center; gap:0.85rem; color:var(--cw-sub); }
.cw-plus svg { width:1.15rem; height:1.15rem; }
.cw-model { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.85rem; color:var(--cw-ink); }
.cw-model em { font-style:normal; color:var(--cw-sub); }
.cw-model svg { width:0.8rem; height:0.8rem; color:var(--cw-sub); }
.cw-send { width:1.9rem; height:1.9rem; display:grid; place-items:center; border-radius:50%; background:var(--cw-ink); color:var(--cw-bg); }
.cw-tip { display:flex; align-items:center; justify-content:center; gap:0.35rem; font-size:0.75rem; color:var(--cw-sub); }
.cw-tip svg { width:0.85rem; height:0.85rem; }
.cw-next-h { display:flex; align-items:baseline; margin-top:0.3rem; }
.cw-next-h b { font-size:0.8rem; font-weight:600; margin-right:auto; }
.cw-next-h span { font-size:0.78rem; color:var(--cw-sub); }
.cw-prompts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0.6rem; }
.cw-prompt { display:flex; align-items:center; gap:0.65rem; padding:0.55rem; border:1px solid var(--cw-line); border-radius:12px; background:var(--cw-bg); font-size:0.88rem; line-height:1.3; }
.cw-prompt > span { min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* tiny coral illustrations, echoing the product's suggestion thumbnails */
.cw-art { flex:none; position:relative; width:3.4rem; height:3.4rem; border-radius:6px; background:var(--cw-surface); overflow:hidden; }
.cw-art b { position:absolute; display:block; }
.cw-art.is-inbox b:nth-child(1) { left:0; right:0; top:1.25rem; height:0.9rem; background:var(--cw-coral-soft); }
.cw-art.is-inbox b:nth-child(2) { left:0.4rem; right:0.8rem; top:0.55rem; height:2px; background:var(--cw-coral); box-shadow:0 0.32rem 0 var(--cw-coral-soft), 0 1.05rem 0 var(--cw-coral), 0 1.38rem 0 var(--cw-coral); }
.cw-art.is-inbox b:nth-child(3) { left:0.4rem; right:1.4rem; bottom:0.45rem; height:2px; background:var(--cw-coral-soft); }
.cw-art.is-week b:nth-child(1) { left:1.1rem; top:0; bottom:1.7rem; width:1rem; background:var(--cw-coral-soft); }
.cw-art.is-week b:nth-child(2) { left:1.15rem; top:0; bottom:1.7rem; width:3px; background:var(--cw-coral); }
.cw-art.is-week b:nth-child(3) { left:2.3rem; top:1.6rem; bottom:0; width:0.9rem; background:var(--cw-coral-soft); border-right:3px solid var(--cw-coral); }
.cw-art.is-pitch b:nth-child(1) { left:0.5rem; right:0.5rem; top:-0.3rem; height:0.8rem; border:1.5px solid var(--cw-coral-soft); border-radius:5px; }
.cw-art.is-pitch b:nth-child(2) { left:0.5rem; right:0.5rem; top:0.9rem; height:1.6rem; border:1.5px solid var(--cw-coral-soft); border-radius:5px; }
.cw-art.is-pitch b:nth-child(3) { left:1.25rem; top:1.25rem; width:0.95rem; height:0.95rem; border-radius:50%; background:var(--cw-coral); }
.cw-h { font-size:0.8rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--cw-sub); }

/* ── conversation ── */
.cw-msg { max-width:88%; font-size:1rem; line-height:1.5; padding:0.6rem 0.85rem; border-radius:14px; }
.cw-msg.is-user { align-self:flex-end; background:var(--cw-accent-soft); border:1px solid color-mix(in srgb, var(--cw-accent) 35%, transparent); border-bottom-right-radius:4px; }
.cw-msg.is-cowork { align-self:flex-start; background:var(--cw-surface); border:1px solid var(--cw-line); border-bottom-left-radius:4px; }
.cw-thinking { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.9rem; color:var(--cw-sub); }
.cw-dots { display:inline-flex; gap:3px; }
.cw-dots i { width:6px; height:6px; border-radius:50%; background:var(--cw-accent); animation:cwDot 1.2s ease-in-out infinite; }
.cw-dots i:nth-child(2) { animation-delay:0.15s; } .cw-dots i:nth-child(3) { animation-delay:0.3s; }
@keyframes cwDot { 0%, 80%, 100% { opacity:0.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.cw-skillmsg { display:inline-flex; align-items:center; gap:0.45rem; font-size:0.9rem; color:var(--cw-accent); }
.cw-steps { display:flex; flex-direction:column; gap:0.3rem; }
.cw-step { display:flex; align-items:center; gap:0.55rem; font-size:0.9rem; color:var(--cw-sub); }
.cw-step-mark { width:1.05rem; height:1.05rem; flex:none; display:grid; place-items:center; border-radius:50%; border:2px solid var(--cw-line-strong); font-size:0.65rem; }
.cw-step.is-done { color:var(--cw-ink); }
.cw-step.is-done .cw-step-mark { border-color:var(--cw-ok); background:var(--cw-ok); color:#fff; }
.cw-step.is-run .cw-step-mark { border-color:var(--cw-accent); border-top-color:transparent; animation:cwSpin 0.9s linear infinite; }
@keyframes cwSpin { to { transform:rotate(360deg); } }

/* ── side panel ── */
.cw-side { flex:none; width:15.5rem; display:flex; flex-direction:column; gap:0.75rem; padding:0.9rem 0.85rem; border-left:1px solid var(--cw-line); background:var(--cw-surface); }
.cw-sec { display:flex; flex-direction:column; gap:0.4rem; }
.cw-progress { height:8px; border-radius:999px; background:var(--cw-line); overflow:hidden; }
.cw-progress i { display:block; height:100%; width:0; background:var(--cw-accent); border-radius:999px; transition:width 0.6s ease; }
.cw-progress-pct { font-size:0.8rem; color:var(--cw-sub); }
.cw-files { display:flex; flex-direction:column; gap:0.35rem; }
.cw-file { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; padding:0.35rem 0.5rem; border:1px solid var(--cw-line); border-radius:8px; background:var(--cw-bg); }
.cw-file span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-ftype { flex:none; width:1.35rem; height:1.35rem; display:grid; place-items:center; border-radius:4px; font-size:0.62rem; font-weight:700; color:#fff; }
.cw-ftype.t-docx { background:#185abd; } .cw-ftype.t-xlsx { background:#107c41; } .cw-ftype.t-pptx { background:#c43e1c; }
.cw-ftype.t-pdf { background:#b42a3e; } .cw-ftype.t-eml { background:#0f6cbd; } .cw-ftype.t-md { background:#5f5b69; } .cw-ftype.t-html { background:#7a3fb8; }
.cw-chips { display:flex; flex-wrap:wrap; gap:0.35rem; }

/* ── cards (approval, question, trigger, schedule) ── */
.cw-card { display:flex; flex-direction:column; gap:0.6rem; padding:0.85rem 1rem; border:2px solid var(--cw-line-strong); border-radius:14px; background:var(--cw-raise); box-shadow:var(--cw-shadow); }
.cw-card.is-accent { border-color:var(--cw-accent); }
.cw-card-h { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.cw-card-h b { font-size:1.05rem; font-weight:600; margin-right:auto; }
.cw-fields { display:grid; grid-template-columns:auto 1fr; gap:0.3rem 0.8rem; font-size:0.9rem; }
.cw-fields dt { color:var(--cw-sub); }
.cw-fields dd { margin:0; }
.cw-preview { font-size:0.9rem; line-height:1.5; padding:0.6rem 0.75rem; border:1px solid var(--cw-line); border-radius:10px; background:var(--cw-surface); white-space:pre-line; }
.cw-actions { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.cw-actions .cw-link { margin-right:auto; }
.cw-menu { display:flex; flex-direction:column; padding:0.3rem; border:1px solid var(--cw-line-strong); border-radius:10px; background:var(--cw-bg); box-shadow:var(--cw-shadow); align-self:flex-end; min-width:15rem; }
.cw-menu span { font-size:0.9rem; padding:0.35rem 0.6rem; border-radius:6px; }
.cw-menu span.is-on { background:var(--cw-accent-soft); color:var(--cw-accent); }
.cw-options { display:flex; flex-direction:column; gap:0.35rem; }
.cw-option { display:flex; align-items:center; gap:0.55rem; font-size:0.9rem; padding:0.4rem 0.6rem; border:1px solid var(--cw-line); border-radius:9px; background:var(--cw-bg); }
.cw-option i { width:0.95rem; height:0.95rem; flex:none; border-radius:50%; border:2px solid var(--cw-line-strong); }
.cw-option.is-on { border-color:var(--cw-accent); }
.cw-option.is-on i { border-color:var(--cw-accent); box-shadow:inset 0 0 0 3px var(--cw-raise); background:var(--cw-accent); }
.cw-check { display:inline-flex; align-items:center; gap:0.45rem; font-size:0.9rem; }
.cw-check i { width:1rem; height:1rem; border-radius:4px; border:2px solid var(--cw-accent); background:var(--cw-accent); color:var(--cw-on-accent); display:grid; place-items:center; font-size:0.65rem; font-style:normal; }

/* ── task list / automations ── */
.cw-tabs { display:flex; gap:1.1rem; border-bottom:1px solid var(--cw-line); }
.cw-tabs span { font-size:0.9rem; padding:0.35rem 0; color:var(--cw-sub); border-bottom:2px solid transparent; margin-bottom:-1px; }
.cw-tabs span.is-on { color:var(--cw-ink); font-weight:600; border-bottom-color:var(--cw-accent); }
.cw-rows { display:flex; flex-direction:column; gap:0.4rem; }
.cw-row { display:flex; align-items:center; gap:0.6rem; padding:0.5rem 0.7rem; border:1px solid var(--cw-line); border-radius:10px; background:var(--cw-bg); font-size:0.9rem; }
.cw-row-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:0.1rem; }
.cw-row-t b { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-row-t small { font-size:0.8rem; color:var(--cw-sub); }

/* ── code / file text (SKILL.md, /cost) ── */
.cw-code { font-family:'Cascadia Code','Consolas',monospace; font-size:0.85rem; line-height:1.55; padding:0.7rem 0.85rem; border:1px solid var(--cw-line); border-radius:10px; background:var(--cw-surface); white-space:pre; overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
	.cw-dots i, .cw-step.is-run .cw-step-mark { animation:none; }
	.cw-progress i { transition:none; }
}