/*
 * Thread view stylesheet (.th-* per-task execution + .thl-* threads list).
 *
 * Spec: .claude/specs/workflow-domain-redesign/ FR-01.
 * Extracted from inline <style> blocks at pwa/views/thread.js:42-121 (.th-*)
 * and lines 717-736 (.thl-*). 25 hex/rgba literals retained for phase-2.
 */

.th-root { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.th-topbar { display:flex; align-items:center; gap:var(--space-snug); padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent)); position:sticky; top:0; z-index:20; }
.th-back { background:none; border:none; font-size:20px; cursor:pointer; color:var(--link); padding:0; line-height:1; }
.th-topbar-title { flex:1; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.th-status-badge { padding:3px 8px; border-radius:var(--radius-default); font-size:11px; font-weight:700; color:var(--color-on-primary); cursor:pointer; position:relative; }
.th-status-menu { position:absolute; top:100%; right:0; background:var(--bg2); border:1px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 20%, transparent)); border-radius:var(--radius-snug); padding:4px 0; z-index:30; min-width:100px; box-shadow:0 4px 12px color-mix(in srgb, var(--color-on-surface) 30%, transparent); }
.th-status-option { display:block; width:100%; padding:8px 14px; font-size:13px; text-align:left; background:none; border:none; color:var(--text); cursor:pointer; }
.th-status-option:hover { background:var(--bg); }
.th-status-dot { display:inline-block; width:8px; height:8px; border-radius:var(--radius-full); margin-right:var(--space-tight); }
.th-header-toggle { background:none; border:none; font-size:13px; color:var(--link); cursor:pointer; font-weight:600; padding:4px 8px; }
.th-header { background:var(--bg2); border-bottom:1px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent)); overflow:hidden; transition:max-height 0.3s ease; }
.th-header.collapsed { max-height:0; border-bottom:none; }
.th-header.expanded { max-height:600px; }
.th-header-inner { padding:12px 16px; }
.th-header-section { margin-bottom:var(--space-sm); }
/* Section labels — primitive: uxSectionHeader(text). Local rule preserves
   the right-side action button ("+ Add") layout that the primitive does
   not own; primitive applies the typography. */
.th-header-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-tight); }
.th-header-label .ux-section-header { padding:0; }
.th-pinned-item { font-size:13px; padding:4px 0; border-bottom:1px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 8%, transparent)); }
.th-resource-item { display:flex; align-items:center; gap:var(--space-base); font-size:13px; padding:4px 0; }
.th-resource-type { font-size:11px; padding:2px 6px; border-radius:var(--radius-sm); background:var(--bg); font-weight:600; }
.th-resource-del { background:none; border:none; cursor:pointer; font-size:14px; opacity:0.4; padding:0 4px; margin-left:auto; }
.th-resource-del:hover { opacity:1; color:var(--color-error); }
.th-resource-add { background:none; border:none; cursor:pointer; font-size:11px; color:var(--link); font-weight:600; padding:2px 6px; }
.th-stakeholder { display:inline-flex; align-items:center; gap:var(--space-tight); padding:4px 10px; border-radius:var(--radius-lg); background:var(--bg); font-size:13px; margin:2px 4px 2px 0; }
.th-avatar { width:22px; height:22px; border-radius:var(--radius-full); background:var(--link); color:var(--color-on-primary); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.th-stats { display:flex; gap:var(--space-gutter); font-size:12px; color:var(--hint); }
.th-timeline { flex:1; overflow-y:auto; padding:var(--space-gutter); display:flex; flex-direction:column; gap:var(--space-base); scroll-behavior:smooth; }
.th-date-sep { text-align:center; padding:8px 0; font-size:12px; color:var(--hint); font-weight:600; }
.th-entry { display:flex; gap:var(--space-snug); max-width:85%; animation:th-fadein 0.2s ease; }
@keyframes th-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.th-entry.role-user { align-self:flex-end; flex-direction:row-reverse; }
.th-entry.role-agent { align-self:flex-start; }
.th-entry.role-system { align-self:center; max-width:90%; }
.th-bubble { padding:10px 14px; border-radius:var(--radius-lg); font-size:14px; line-height:1.5; word-break:break-word; position:relative; }
.th-entry.role-user .th-bubble { background:var(--link); color:var(--color-on-primary); border-bottom-right-radius:4px; }
.th-entry.role-agent .th-bubble { background:var(--bg2); border-bottom-left-radius:4px; }
.th-entry.role-system .th-bubble { background:transparent; color:var(--hint); font-size:12px; text-align:center; padding:4px 8px; }
.th-bubble p { margin:0 0 8px; } .th-bubble p:last-child { margin-bottom:0; }
.th-bubble pre { background:color-mix(in srgb, var(--color-on-surface) 15%, transparent); padding:8px 10px; border-radius:var(--radius-default); overflow-x:auto; font-size:13px; margin:8px 0; }
.th-bubble code { font-size:13px; }
.th-entry-meta { display:flex; gap:var(--space-tight); align-items:center; font-size:11px; color:var(--hint); margin-top:var(--space-xs); padding:0 4px; }
.th-pin-btn { background:none; border:none; cursor:pointer; font-size:12px; opacity:0.5; padding:0; }
.th-pin-btn:hover { opacity:1; }
.th-pin-btn.pinned { opacity:1; color:var(--link); }
.th-comm-card { border:1px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 20%, transparent)); border-radius:var(--radius-md); padding:var(--space-sm); margin:4px 0; background:var(--bg2); max-width:100%; }
.th-comm-badge { display:inline-flex; align-items:center; gap:var(--space-xs); font-size:11px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius-tight); margin-bottom:var(--space-base); }
.th-comm-badge.inbound { background:color-mix(in srgb, var(--color-primary) 10%, transparent); color:var(--color-primary); }
.th-comm-badge.outbound { background:color-mix(in srgb, var(--color-success) 10%, transparent); color:var(--color-success); }
.th-comm-contact { display:flex; align-items:center; gap:var(--space-base); margin-bottom:var(--space-tight); }
.th-comm-name { font-weight:600; font-size:14px; }
.th-comm-handle { font-size:12px; color:var(--hint); }
.th-comm-body { font-size:13px; line-height:1.5; color:var(--text); max-height:80px; overflow:hidden; position:relative; }
.th-comm-body.expanded { max-height:none; }
.th-comm-expand { font-size:12px; color:var(--link); cursor:pointer; border:none; background:none; padding:4px 0; font-weight:600; }
.th-comm-footer { display:flex; gap:var(--space-snug); margin-top:var(--space-tight); font-size:12px; color:var(--hint); align-items:center; }
.th-comm-reply { background:none; border:1px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 20%, transparent)); border-radius:var(--radius-tight); padding:3px 10px; font-size:11px; font-weight:600; color:var(--link); cursor:pointer; margin-left:auto; }
.th-comm-reply:active { opacity:0.6; }
.th-generating { padding:10px 14px; border-radius:var(--radius-lg); background:var(--bg2); align-self:flex-start; max-width:85%; }
.th-dot-pulse { display:inline-flex; gap:var(--space-xs); } .th-dot-pulse span { width:6px; height:6px; border-radius:var(--radius-full); background:var(--hint); animation:th-pulse 1.2s infinite; } .th-dot-pulse span:nth-child(2) { animation-delay:0.2s; } .th-dot-pulse span:nth-child(3) { animation-delay:0.4s; }
@keyframes th-pulse { 0%,80%,100% { opacity:0.3; } 40% { opacity:1; } }
.th-composer { display:flex; gap:var(--space-base); padding:12px 16px; background:var(--bg); border-top:1px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 15%, transparent)); align-items:flex-end; flex-wrap:wrap; }
.th-composer textarea { flex:1; padding:10px 14px; border-radius:18px; border:1.5px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 20%, transparent)); background:var(--bg2); color:var(--text); font-size:15px; font-family:inherit; resize:none; min-height:20px; max-height:120px; outline:none; line-height:1.4; min-width:0; }
.th-composer textarea:focus { border-color:var(--link); }
.th-send-btn { width:38px; height:38px; border-radius:var(--radius-full); background:var(--link); border:none; color:var(--color-on-primary); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.th-send-btn:disabled { opacity:0.4; cursor:default; }
.th-channel-row { display:flex; align-items:center; gap:var(--space-tight); width:100%; padding:0 0 4px; }
.th-channel-badge { display:inline-flex; align-items:center; gap:var(--space-xs); padding:3px 10px; border-radius:var(--radius-md); font-size:12px; font-weight:600; cursor:pointer; border:none; color:var(--color-on-primary); }
.th-channel-recipient { font-size:12px; color:var(--hint); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.th-channel-reset { background:none; border:none; font-size:14px; cursor:pointer; color:var(--hint); padding:2px 4px; }
.th-channel-reset:hover { color:var(--color-error); }
.th-loading { display:flex; align-items:center; justify-content:center; padding:var(--space-lg); color:var(--hint); }
.th-empty { display:flex; flex-direction:column; align-items:center; padding:60px 32px; text-align:center; flex:1; justify-content:center; }
.th-empty-icon { font-size:48px; margin-bottom:var(--space-sm); opacity:0.6; }
.th-empty-title { font-size:16px; font-weight:600; margin-bottom:var(--space-xs); }
.th-empty-sub { font-size:14px; color:var(--hint); }

/* Threads-list view (.thl-*) — mounted at #/threads. */
.thl-root { padding:var(--space-gutter); }
.thl-topbar { display:flex; align-items:center; gap:var(--space-snug); margin-bottom:var(--space-gutter); }
.thl-back { background:none; border:none; font-size:20px; cursor:pointer; color:var(--link); padding:0; line-height:1; }
.thl-title { flex:1; font-size:18px; font-weight:700; }
.thl-search { width:100%; padding:10px 14px; border-radius:var(--radius-md); border:1.5px solid var(--border, color-mix(in srgb, var(--color-on-surface-variant) 20%, transparent)); background:var(--bg2); color:var(--text); font-size:14px; font-family:inherit; outline:none; margin-bottom:var(--space-sm); }
.thl-search:focus { border-color:var(--link); }
.thl-tabs { display:flex; gap:var(--space-tight); margin-bottom:var(--space-gutter); overflow-x:auto; }
.thl-tab { padding:6px 14px; border-radius:var(--radius-lg); font-size:13px; font-weight:600; border:none; cursor:pointer; background:var(--bg2); color:var(--hint); white-space:nowrap; }
.thl-tab.active { background:var(--link); color:var(--color-on-primary); }
.thl-card { display:flex; flex-direction:column; gap:var(--space-tight); padding:var(--space-roomy); border-radius:var(--radius-roomy); background:var(--bg2); margin-bottom:var(--space-snug); cursor:pointer; border:1px solid transparent; transition:border-color 0.15s; }
.thl-card:active { border-color:var(--link); }
/* .thl-card-top → .base-row in pwa/styles/base.css. Markup composes both. */
.thl-card-title { flex:1; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thl-card-badge { padding:2px 8px; border-radius:var(--radius-tight); font-size:10px; font-weight:700; color:var(--color-on-primary); flex-shrink:0; }
.thl-card-meta { display:flex; gap:var(--space-sm); font-size:12px; color:var(--hint); }
.thl-card-preview { font-size:13px; color:var(--hint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thl-empty { text-align:center; padding:var(--space-lg); color:var(--hint); }
.thl-loading { text-align:center; padding:var(--space-lg); color:var(--hint); }

/* Status / channel tone classes — drop inline `style="background:..."`. */
.th-status-dot.th-status-active,
.th-status-badge.th-status-active,
.thl-card-badge.th-status-active     { background: var(--color-success); }
.th-status-dot.th-status-paused,
.th-status-badge.th-status-paused,
.thl-card-badge.th-status-paused     { background: var(--color-warning); }
.th-status-dot.th-status-closed,
.th-status-badge.th-status-closed,
.thl-card-badge.th-status-closed     { background: var(--color-on-surface-variant, var(--hint)); }
.th-channel-badge.th-tone-chat       { background: var(--link); }
.th-channel-badge.th-tone-email      { background: var(--color-warning); }
.th-channel-badge.th-tone-whatsapp   { background: var(--color-success); }

/* System entry occupies full row (replaces inline style="max-width:95%;align-self:stretch"). */
.th-entry.role-system { max-width: 95%; align-self: stretch; }

/* Resource link / stakeholder role / empty fallback meta typography. */
.th-resource-link { color: var(--link); }
.th-stakeholder-role { color: var(--color-on-surface-variant, var(--hint)); font-size: 11px; }
.th-empty-fallback { font-size: 12px; color: var(--color-on-surface-variant, var(--hint)); }