/* The task manager (saryos-tasks.js; owner, 2026-11-01). Chat's grey and white, the accent on Open when one is set. */
:root {
  --stk-bg: #18181b; --stk-row: #202024; --stk-border: #2c2c31; --stk-text: #ededee; --stk-muted: #92929c;
  --stk-ok: #4ade80; --stk-bad: #f87171; --stk-open: #ffffff; --stk-open-text: #161618;
}
:root.light-mode {
  --stk-bg: #ffffff; --stk-row: #f4f4f5; --stk-border: #e4e4e7; --stk-text: #202024; --stk-muted: #6b6b75;
  --stk-ok: #15803d; --stk-bad: #b91c1c; --stk-open: #202024; --stk-open-text: #ffffff;
}
:root[data-accent] { --stk-open: var(--sary-accent); --stk-open-text: #ffffff; }

#portal-bar .saryos-tasks-btn { position: relative; }
#portal-bar .saryos-tasks-btn .stk-count {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: #7c5cff; color: #fff; font: 700 10px/17px Inter, system-ui, sans-serif; text-align: center;
}
:root[data-accent] #portal-bar .saryos-tasks-btn .stk-count { background: var(--sary-accent); }
#portal-bar .saryos-tasks-btn .stk-count[hidden] { display: none; }
#portal-bar .saryos-tasks-btn.is-running > i { animation: stk-pulse 1.6s ease-in-out infinite; }
#portal-bar .saryos-tasks-btn.has-unseen::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--stk-ok);
}
@keyframes stk-pulse { 50% { opacity: .45; } }

#saryos-tasks-panel, #saryos-tasks-notice {
  position: fixed; z-index: 2147483000; box-sizing: border-box;
  background: var(--stk-bg); color: var(--stk-text); border: 1px solid var(--stk-border); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35); font: 500 13px/1.4 Inter, system-ui, sans-serif;
}
#saryos-tasks-panel[hidden], #saryos-tasks-notice[hidden] { display: none; }
#saryos-tasks-panel { width: min(420px, calc(100vw - 24px)); max-height: min(70vh, 640px); overflow: auto; padding: 10px; }
#saryos-tasks-panel .stk-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
#saryos-tasks-panel .stk-head b { font-size: 15px; }
#saryos-tasks-panel .stk-link { background: none; border: 0; color: var(--stk-muted); font: inherit; cursor: pointer; padding: 4px; }
#saryos-tasks-panel .stk-link:hover { color: var(--stk-text); }
#saryos-tasks-panel .stk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#saryos-tasks-panel .stk-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: var(--stk-row); }
#saryos-tasks-panel .stk-ico { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--stk-border); color: var(--stk-muted); }
#saryos-tasks-panel .stk-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#saryos-tasks-panel .stk-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#saryos-tasks-panel .stk-text small { color: var(--stk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#saryos-tasks-panel .stk-text > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
#saryos-tasks-panel .stk-acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.stk-run, .stk-muted { color: var(--stk-muted); }
.stk-ok { color: var(--stk-ok); }
.stk-bad { color: var(--stk-bad); }
.stk-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: stk-spin .8s linear infinite; }
@keyframes stk-spin { to { transform: rotate(360deg); } }
#saryos-tasks-panel .stk-empty { margin: 0; padding: 6px 6px 10px; color: var(--stk-muted); }

#saryos-tasks-panel .stk-btn, #saryos-tasks-notice .stk-btn {
  height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--stk-border); background: transparent;
  color: var(--stk-text); font: 600 12px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
#saryos-tasks-panel .stk-btn.stk-open, #saryos-tasks-notice .stk-btn.stk-open { background: var(--stk-open); color: var(--stk-open-text); border-color: transparent; }
#saryos-tasks-panel .stk-x, #saryos-tasks-notice .stk-x {
  width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--stk-muted); cursor: pointer;
}
#saryos-tasks-panel .stk-x:hover, #saryos-tasks-notice .stk-x:hover { color: var(--stk-text); }

#saryos-tasks-notice { display: flex; align-items: center; gap: 10px; width: min(380px, calc(100vw - 24px)); padding: 10px 10px 10px 14px; }
#saryos-tasks-notice > i { font-size: 18px; }
#saryos-tasks-notice.is-done > i { color: var(--stk-ok); }
#saryos-tasks-notice.is-failed > i { color: var(--stk-bad); }
#saryos-tasks-notice > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#saryos-tasks-notice > span small { color: var(--stk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { #portal-bar .saryos-tasks-btn.is-running > i, .stk-spin { animation: none; } }