/* UI-31..33: the agent sheet, after Meta Muse (docs/next-project/screenshots/
   references/img_4767-4772). One design: the right-side panel on a desktop,
   full screen on a phone. Rule zero: nothing small (16-17px body, 44px
   targets), few words. Untinted neutrals; colour only for meaning (green
   connected / complete, red failed). Loaded after mobile.css. */

/* The task sheet is placed in the panel. Only on a desktop: at 900px and
   below the panel is the fixed full-screen drawer (styles.css), kept fixed. */
@media (min-width: 901px) { .work-panel.agent-sheet { position:relative; } }

/* ---------- header: close, avatar with pencil, name, status, share ---------- */
:root .agent-sheet .wp-head { grid-template-columns:44px minmax(0,1fr) 44px; grid-template-areas:"close agent share" "tabs tabs tabs"; align-items:start; gap:14px 8px; padding:16px 16px 12px; border-bottom:0; }
.agent-sheet .as-round, .as-round { width:44px; height:44px; min-width:44px; padding:0; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--panel-2); color:var(--ink); cursor:pointer; }
.agent-sheet .as-round:hover { background:var(--hover-2); }
.agent-sheet .as-round svg { width:20px; height:20px; }
:root .agent-sheet .wp-head #wp-close { grid-area:close; }
.agent-sheet #wp-share { grid-area:share; }
.agent-sheet .wp-agent { gap:6px; padding-top:4px; }
.agent-sheet .as-avatar-wrap { position:relative; display:inline-grid; }
:root .agent-sheet .wp-avatar, :root .agent-sheet .wp-avatar .agent-identity { width:96px; height:96px; }
.agent-sheet .wp-avatar { border-radius:50%; overflow:hidden; }
.agent-sheet .as-avatar-edit { position:absolute; right:-2px; bottom:2px; width:36px; height:36px; padding:0; display:grid; place-items:center; border-radius:50%; border:2px solid var(--panel); background:var(--raise); color:var(--ink); cursor:pointer; }
.agent-sheet .as-avatar-edit::before { content:""; position:absolute; inset:-6px; } /* 48px touch area */
.agent-sheet .as-avatar-edit svg { width:17px; height:17px; }
:root .agent-sheet .wp-agent-name { font-size:24px; font-weight:700; letter-spacing:-.01em; margin-top:4px; }
:root .agent-sheet .wp-agent-status { min-height:22px; align-items:center; gap:6px; color:var(--ink); font-size:16px; }
.agent-sheet .wp-agent-status .agent-readiness { display:none; }
.agent-sheet .wp-agent-working { color:var(--ink-2); font-size:16px; }
.agent-sheet .as-connected { display:inline-flex; align-items:center; gap:7px; }
/* "Connected" only while the agent's runtime reports ready (app.js
   paintRuntimeReadiness: hidden during a turn or when not ready); the
   working words replace it during a turn; otherwise nothing. */
.agent-sheet .as-connected { display:none; }
.agent-sheet .agent-readiness[data-state="ready"]:not([hidden]) ~ .as-connected { display:inline-flex; }
.agent-sheet .wp-agent-working:not([hidden]) ~ .as-connected { display:none; }
.agent-sheet .as-bolt { width:20px; height:20px; padding:3px; border-radius:50%; background:var(--green); color:var(--panel); fill:currentColor; stroke:none; }

/* the five icon tabs: one segmented pill */
:root .agent-sheet .wp-head .wp-tabs { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:4px; padding:4px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); }
:root .agent-sheet .wp-tabs > button { width:auto; height:44px; border-radius:999px; border:0; color:var(--ink-2); }
:root .agent-sheet .wp-tabs > button.active { background:var(--hover-2); color:var(--ink); border:0; }
.agent-sheet .wp-tabs > button svg { width:22px; height:22px; }
:root .agent-sheet .wp-body { padding:8px 16px 24px; }

/* ---------- Activity ---------- */
.as-activity { display:flex; flex-direction:column; gap:18px; }
.as-day-title { margin:0 0 6px; font-size:18px; font-weight:600; color:var(--ink); }
.as-rows { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.as-row { position:relative; display:flex; align-items:flex-start; gap:14px; width:100%; padding:10px 28px 10px 0; border:0; border-radius:14px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.as-row:hover { background:var(--hover); }
.as-row:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.as-row.is-current { background:var(--hover); }
.as-row-icon { flex:none; width:52px; height:52px; display:grid; place-items:center; border-radius:50%; background:var(--raise); color:var(--ink-2); }
.as-row-icon svg { width:24px; height:24px; }
.as-row-icon.is-running { animation:ca-pulse 1.6s ease-in-out infinite; }
.as-row-text { display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:3px; }
.as-row-title { font-size:17px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-row-result { font-size:15px; line-height:1.35; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.as-row-time { font-size:14px; color:var(--ink-3); }
.as-row-dot { position:absolute; right:8px; top:22px; width:9px; height:9px; border-radius:50%; background:var(--red); }
.as-empty { font-size:16px; padding:8px 0; }
@media (prefers-reduced-motion: reduce) { .as-row-icon.is-running { animation:none; } }

/* the task sheet over the list */
/* Below the header, so the panel's own close and tabs stay in reach. */
.as-task-layer { position:absolute; inset:var(--as-head-h, 0px) 0 0 0; z-index:5; display:flex; flex-direction:column; justify-content:flex-end; }
.as-scrim { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.as-task-sheet { position:relative; display:flex; flex-direction:column; max-height:calc(100% - 8px); margin:0 8px 8px; border:1px solid var(--line-2); border-radius:28px; background:var(--panel-2); box-shadow:var(--shadow-pop); animation:as-rise .2s ease-out; }
.as-task-close { position:absolute; top:14px; right:14px; z-index:1; }
.as-task-scroll { overflow:auto; min-height:0; padding:20px 20px 24px; overscroll-behavior:contain; }
.as-task.ca-panel { gap:0; }
.as-task-top { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-right:52px; padding-bottom:16px; }
.as-task .ca-badge { font-size:14px; padding:4px 10px; border-radius:8px; }
.as-task .ca-badge.done { background:var(--green-soft); color:var(--green); }
.as-task .ca-badge.error { background:var(--red-soft); color:var(--red); }
:root .as-task .as-task-title { margin:4px 0 0; font-size:19px; font-weight:700; line-height:1.3; color:var(--ink); }
.as-task-result { margin:4px 0 0; font-size:16px; line-height:1.4; color:var(--ink); }
.as-task-time { font-size:15px; color:var(--ink-3); }
.as-task-summary { margin:0; padding:16px 0; border-top:1px solid var(--line-2); font-size:16px; line-height:1.5; color:var(--ink-2); }
.as-task-main { padding:16px 0 4px; border-top:1px solid var(--line-2); }
.as-task-label { margin:0 0 12px; font-family:var(--mono); font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.as-task .ca-steps { gap:4px; }
.as-task .ca-step { position:relative; align-items:flex-start; min-height:44px; padding:6px 28px 6px 0; font-size:15px; cursor:pointer; }
.as-task .ca-step::after { content:""; position:absolute; right:6px; top:13px; width:8px; height:8px; border-right:2px solid var(--ink-3); border-top:2px solid var(--ink-3); transform:rotate(45deg); transition:transform .15s; }
.as-task .ca-step.is-open::after { transform:rotate(135deg); }
.as-task .ca-step-text { font-weight:600; color:var(--ink); white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; }
.as-task .ca-step.is-open .ca-step-text { -webkit-line-clamp:unset; display:block; }
.as-task .ca-step time { font-size:14px; color:var(--ink-3); padding-top:1px; }
.as-task .ca-step.done .ca-step-icon { color:var(--green); }
.as-task .ca-step.done .ca-step-icon svg { display:none; }
.as-task .ca-step.done .ca-step-icon::before { content:""; width:22px; height:22px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.2 2.8 2.8 5.2-5.8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.2 2.8 2.8 5.2-5.8'/%3E%3C/svg%3E") center/contain no-repeat; }
.as-task .ca-step-icon { width:22px; height:22px; flex:none; display:grid; place-items:center; background:var(--panel-2); }
@keyframes as-rise { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .as-task-sheet { animation:none; } }

/* ---------- Computer (UI-32) ---------- */
.as-computer { display:flex; flex-direction:column; gap:16px; }
.as-computer-preview { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#e9e9e9; }
.as-computer-img { display:block; width:100%; height:auto; aspect-ratio:640/420; }
.as-open-browser { position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:rgba(0,0,0,.72); color:#ffffff; font:inherit; font-size:16px; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.as-open-browser:hover { background:rgba(0,0,0,.85); }
.as-open-browser:disabled { opacity:.6; cursor:progress; }
.as-open-browser svg { width:18px; height:18px; }
.as-computer:has(.cc:not([hidden])) .as-computer-preview { display:none; }

/* ---------- Identity (UI-33): saved-from-chats row ---------- */
.agent-sheet .identity-panel { display:flex; flex-direction:column; gap:14px; }
.as-list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 16px; border:1px solid var(--line); border-radius:16px; background:var(--panel-2); color:var(--ink); font-size:16px; text-decoration:none; }
.as-list-row:hover { background:var(--hover); }
.as-list-meta { color:var(--ink-3); }

/* ---------- desktop: the same sheet in the side panel ---------- */
@media (min-width: 901px) {
  :root .agent-sheet .wp-avatar, :root .agent-sheet .wp-avatar .agent-identity { width:84px; height:84px; }
  :root .agent-sheet .wp-agent-name { font-size:22px; }
}
@media (max-width: 900px) {
  :root .agent-sheet .wp-head { padding:12px 16px 12px; padding-top:max(12px, env(safe-area-inset-top, 0px)); }
  .as-task-sheet { margin:0; border-radius:28px 28px 0 0; padding-bottom:env(safe-area-inset-bottom, 0px); max-height:100%; }
}
.as-map { margin-top:16px; }
.as-map .btn { min-height:44px; padding:0 16px; font-size:15px; }