/* Melete product UI. One quiet application surface shared by the homepage embed
   and the full dialog. Layout follows the workspace's own width (container
   queries), so both mounts respond to the room they actually have. */
.workspace,.demo-dialog,.guest-dialog {
  --ws-side: #f4f4ee; --ws-canvas: #fff; --ws-well: #f9f9f5; --ws-hover: #ebebe4;
  --ws-ink: #242d30; --ws-ink-2: #4d5659; --ws-ink-3: #646d70; --ws-icon: #8a9396;
  --ws-line: #e7e7df; --ws-line-strong: #d6d8ce;
  --ws-blue: #3658e8; --ws-blue-ink: #2f4fd6; --ws-blue-wash: #edf0fd; --ws-ring: #3658e833;
  --ws-green: #27704d; --ws-green-wash: #e5f1e9; --ws-green-dot: #2f8a5f;
  --ws-amber: #855800; --ws-amber-wash: #fbf0d9; --ws-amber-dot: #cf8a12;
  --ws-red: #a23a26; --ws-red-wash: #f9e8e4; --ws-red-dot: #c24e37;
  --ws-violet: #5b4580; --ws-violet-wash: #efeaf6;
}
.workspace { container: ws / inline-size; --surface: #fff; display: block; min-width: 0; background: var(--ws-canvas); color: var(--ws-ink); font: 400 13px/1.45 var(--sans); text-align: left; letter-spacing: 0; isolation: isolate; }
.workspace ul,.workspace ol,.artifact-reader ul { list-style: none; margin: 0; padding: 0; }
.workspace p,.artifact-reader p { line-height: 1.5; }
.workspace .icon { width: 16px; height: 16px; }
.workspace .brand-icon,.artifact-reader .brand-icon { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.workspace :is(button,a,[tabindex]):focus-visible,.guest-dialog :is(button,a):focus-visible,.dialog-bar :is(button,a):focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 1px; }
.workspace :is(input,select,textarea):focus { outline: none; }
.workspace :is(input,select,textarea):focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 1px; }
.workspace .workspace-heading:focus { outline: none; }
.workspace .workspace-heading:focus-visible { outline: 2px solid var(--ws-blue); outline-offset: 3px; border-radius: 3px; }
.ws-app { display: flex; min-height: 0; height: 100%; }
.workspace[data-mode="preview"] .ws-app { height: 760px; }
.workspace[data-mode="full"] { flex: 1; min-height: 0; }

/* Shared controls */
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--ws-line-strong); border-radius: 6px; background: #fff; color: var(--ws-ink); font: 500 13px/1 var(--sans); white-space: nowrap; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.ws-btn:hover { background: var(--ws-well); border-color: #c5c8bd; }
.ws-btn .icon { width: 15px; height: 15px; color: var(--ws-ink-3); }
.ws-btn-primary { background: var(--ws-blue); border-color: var(--ws-blue); color: #fff; box-shadow: 0 1px 1px #1f37a133; }
.ws-btn-primary:hover { background: var(--ws-blue-ink); border-color: var(--ws-blue-ink); }
.ws-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.ws-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; color: var(--ws-blue-ink); font: 500 12px/1.3 var(--sans); white-space: nowrap; }
.ws-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.ws-icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; color: var(--ws-ink-3); transition: background-color .12s, color .12s; }
.ws-icon-btn:hover { background: var(--ws-hover); color: var(--ws-ink); }
.ws-icon-btn .icon { width: 15px; height: 15px; }
.ws-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: auto; padding: 0 5px; border-radius: 9px; background: var(--ws-blue); color: #fff; font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ws-muted { color: var(--ws-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ws-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--ws-blue); }
.ws-dot.is-review { background: var(--ws-amber-dot); }
.ws-dot.is-done,.ws-dot.is-approved { background: var(--ws-green-dot); }
.ws-dot.is-changes { background: var(--ws-red-dot); }
.ws-dot.is-idle { background: var(--ws-icon); }
.ws-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; background: #eeeee7; color: var(--ws-ink-2); font: 500 11px/1 var(--sans); white-space: nowrap; }
.ws-pill.is-review,.ws-pill.is-pending { background: var(--ws-amber-wash); color: var(--ws-amber); }
.ws-pill.is-approved,.ws-pill.is-done { background: var(--ws-green-wash); color: var(--ws-green); }
.ws-pill.is-active { background: var(--ws-blue-wash); color: var(--ws-blue-ink); }
.ws-pill.is-changes { background: var(--ws-red-wash); color: var(--ws-red); }
.ws-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: #dfe5f6; color: #2c438f; font: 600 10px/1 var(--sans); letter-spacing: .02em; }
.ws-avatar[data-tone="b"] { background: #f2e3d0; color: #74450f; }
.ws-avatar[data-tone="c"] { background: #dbeae1; color: #285f43; }
.ws-avatar[data-tone="d"] { background: #ebe3f2; color: #5b3a74; }
.ws-avatar.is-sm { width: 22px; height: 22px; font-size: 9px; }
.ws-avatar.is-xs { width: 18px; height: 18px; font-size: 8px; }
.ws-avatar.is-agent { background: #fff; box-shadow: inset 0 0 0 1px var(--ws-line-strong); }
.ws-avatar.is-agent .brand-mark { width: 15px; height: 11px; }
.ws-avatar.is-xs.is-agent .brand-mark { width: 12px; height: 9px; }
.ws-scope { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font: 500 11px/1 var(--sans); white-space: nowrap; }
.ws-scope.is-company { background: var(--ws-blue-wash); color: var(--ws-blue-ink); }
.ws-scope.is-project { background: var(--ws-green-wash); color: var(--ws-green); }
.ws-scope.is-private { background: var(--ws-violet-wash); color: var(--ws-violet); }
.ws-source { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; height: 22px; padding: 0 7px 0 5px; border-radius: 5px; background: var(--ws-well); box-shadow: inset 0 0 0 1px var(--ws-line); color: var(--ws-ink-2); font-size: 12px; line-height: 1; }
.ws-source>span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-source.is-icon { width: 22px; padding: 0; justify-content: center; }
.ws-source-set { display: inline-flex; gap: 4px; }
.ws-glyph { display: block; width: 16px; height: 16px; flex-shrink: 0; }
.ws-glyph.is-done { color: var(--ws-green-dot); }
.ws-glyph.is-running { color: var(--ws-blue); }
.ws-glyph.is-waiting { color: var(--ws-amber-dot); }
.ws-glyph.is-changes { color: var(--ws-red-dot); }
.ws-glyph-arc { transform-origin: 8px 8px; animation: ws-spin 1.1s linear infinite; }
@keyframes ws-spin { to { transform: rotate(360deg); } }

/* Sidebar */
.ws-sidebar { display: flex; flex-direction: column; gap: 10px; width: 216px; flex-shrink: 0; min-height: 0; padding: 12px 10px 10px; background: var(--ws-side); border-right: 1px solid var(--ws-line); }
.ws-org { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px; font-weight: 600; font-size: 13px; color: var(--ws-ink); }
.ws-org-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--ws-ink); color: #fff; font: 600 11px/1 var(--sans); }
.ws-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 6px 0 8px; border: 1px solid var(--ws-line-strong); border-radius: 6px; background: #fff; color: var(--ws-ink-3); font: 400 13px/1 var(--sans); transition: border-color .12s; }
.ws-search:hover { border-color: #c5c8bd; }
.ws-search .icon { width: 15px; height: 15px; color: var(--ws-icon); }
.ws-search kbd { margin-left: auto; padding: 2px 5px; border: 1px solid var(--ws-line); border-radius: 4px; background: var(--ws-well); color: var(--ws-ink-3); font: 500 11px/1 var(--sans); }
.workspace-nav { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.ws-nav-group { display: flex; flex-direction: column; gap: 1px; }
.ws-nav-bottom { margin-top: auto; }
.ws-nav-item,.ws-project { display: flex; align-items: center; gap: 9px; width: 100%; height: 28px; padding: 0 8px; border-radius: 6px; color: var(--ws-ink-2); font: 500 13px/1 var(--sans); text-align: left; white-space: nowrap; transition: background-color .12s, color .12s; }
.ws-nav-item .icon { width: 16px; height: 16px; color: var(--ws-icon); }
.ws-nav-item:hover,.ws-project:hover { background: var(--ws-hover); color: var(--ws-ink); }
.ws-nav-item.active,.ws-project.is-selected { background: #fff; color: var(--ws-ink); box-shadow: 0 0 0 1px var(--ws-line-strong), 0 1px 2px #242d300f; }
.ws-nav-item.active .icon { color: var(--ws-blue); }
.ws-projects { display: flex; flex-direction: column; gap: 1px; }
.ws-project { padding-left: 12px; font-weight: 400; }
.ws-project .ws-dot { margin: 0 3px 0 1px; }
.ws-project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-project-count { margin-left: auto; color: var(--ws-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.ws-user { display: flex; align-items: center; gap: 8px; padding: 10px 6px 0; border-top: 1px solid var(--ws-line); }
.ws-user strong { display: block; font-weight: 500; font-size: 13px; line-height: 1.2; }
.ws-user small { display: block; font-size: 12px; color: var(--ws-ink-3); line-height: 1.3; }

/* Header and body */
.ws-body { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.ws-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 10px 24px; border-bottom: 1px solid var(--ws-line); }
.ws-title { min-width: 0; }
.ws-title-context { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: var(--ws-ink-3); font-size: 12px; line-height: 1.2; }
.ws-title-context .icon { width: 13px; height: 13px; }
.workspace .workspace-heading { margin: 0; color: var(--ws-ink); font: 600 15px/1.3 var(--sans); letter-spacing: -.1px; }
.ws-title-desc { margin: 2px 0 0; color: var(--ws-ink-3); font-size: 12px; line-height: 1.4; }
.ws-crumbs { display: flex; align-items: center; gap: 6px; }
.ws-crumb { display: inline-flex; align-items: center; gap: 2px; height: 24px; margin: 0 0 2px -6px; padding: 0 6px 0 2px; border-radius: 5px; color: var(--ws-ink-3); font: 500 12px/1 var(--sans); }
.ws-crumbs .ws-crumb { margin: 0 0 0 -6px; font-size: 13px; }
.ws-crumb:hover { background: var(--ws-hover); color: var(--ws-ink); }
.ws-crumb .icon { width: 15px; height: 15px; }
.ws-crumb-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; }
.ws-crumb-current::before { content: '/'; margin-right: 8px; color: var(--ws-line-strong); font-weight: 400; }
.ws-top-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ws-facepile { display: flex; align-items: center; padding: 2px; border-radius: 14px; }
.ws-facepile .ws-avatar { width: 26px; height: 26px; font-size: 10px; box-shadow: 0 0 0 2px #fff; }
.ws-facepile .ws-avatar+.ws-avatar { margin-left: -3px; }
.ws-facepile:hover .ws-avatar { box-shadow: 0 0 0 2px var(--ws-well); }
.ws-facepile-more { margin-left: 6px; color: var(--ws-ink-3); font-size: 12px; }
.ws-content { display: flex; flex: 1; min-height: 0; }
.workspace-main { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-y: auto; padding: 18px 28px 16px; overscroll-behavior: contain; }

/* Overview: request, agent run, document, approval */
.ws-thread { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 700px; margin-inline: auto; }
.ws-msg { display: grid; grid-template-columns: 24px minmax(0,1fr); column-gap: 10px; }
.ws-msg-meta { display: flex; align-items: baseline; gap: 8px; line-height: 24px; }
.ws-msg-meta strong { font-weight: 600; font-size: 13px; }
.ws-msg-meta span { color: var(--ws-ink-3); font-size: 12px; }
.ws-request-text { margin: 0; color: var(--ws-ink); font-size: 14px; overflow-wrap: anywhere; }
.workspace .agent-text { margin: 0 0 10px; color: var(--ws-ink-2); font-size: 14px; }
.ws-run { display: flex; flex-direction: column; }
.ws-step { position: relative; display: grid; grid-template-columns: 16px minmax(0,1fr); column-gap: 12px; padding: 6px 0; }
.ws-step::before { content: ''; position: absolute; left: 7.5px; top: 25px; bottom: -6px; width: 1px; background: var(--ws-line-strong); }
.ws-step:last-child::before { display: none; }
.ws-step>.ws-glyph { position: relative; margin-top: 3px; }
.ws-step-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; min-height: 22px; }
.ws-step-title { color: var(--ws-ink); font-weight: 500; font-size: 13px; line-height: 1.35; }
.ws-step.is-running .ws-step-title { color: var(--ws-blue-ink); }
.ws-doc { grid-column: 2; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 440px; margin: 8px 0 4px; padding: 9px 12px 9px 10px; border: 1px solid var(--ws-line-strong); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px #242d300d; text-align: left; transition: border-color .12s, box-shadow .12s; }
.ws-doc:hover { border-color: #bfc3b6; box-shadow: 0 3px 10px #242d3014; }
.ws-doc-thumb { display: flex; flex-direction: column; gap: 3px; width: 30px; height: 38px; flex-shrink: 0; padding: 7px 5px 0; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px var(--ws-line-strong); }
.ws-doc-thumb i { display: block; height: 2px; border-radius: 1px; background: #d9dcd3; }
.ws-doc-thumb i:first-child { width: 70%; height: 3px; background: var(--ws-blue); }
.ws-doc-thumb i:last-child { width: 80%; }
.ws-doc-copy { min-width: 0; }
.ws-doc-copy strong { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.ws-doc-copy small { display: block; color: var(--ws-ink-3); font-size: 12px; line-height: 1.4; }
.ws-doc-open { margin-left: auto; color: var(--ws-blue-ink); font-weight: 500; font-size: 12px; }
.ws-approval { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; min-width: 0; margin: -3px 0 0; padding: 8px 8px 8px 12px; border-radius: 8px; background: #fdf8ec; box-shadow: inset 0 0 0 1px #efdfb8; }
.ws-step-approval.is-done .ws-approval { background: #f3f9f5; box-shadow: inset 0 0 0 1px #cfe5d7; }
.ws-step-approval.is-changes .ws-approval { background: #fcf4f2; box-shadow: inset 0 0 0 1px #efd0c8; }
.ws-step-approval>.ws-glyph { margin-top: 12px; }
.ws-step-approval::before { top: 0; bottom: auto; height: 12px; }
.ws-approval-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-approval-note { display: flex; align-items: center; gap: 5px; color: var(--ws-amber); font-size: 12px; }
.ws-step-approval.is-done .ws-approval-note { color: var(--ws-green); }
.ws-step-approval.is-changes .ws-approval-note { color: var(--ws-red); }
.ws-approval-note .icon { width: 13px; height: 13px; }
.ws-decision { display: flex; gap: 6px; }
.approval-mini-result { display: flex; align-items: center; gap: 10px; }
.is-flash .ws-approval,.ws-review.is-flash { animation: ws-flash .9s ease-out; }
@keyframes ws-flash { from { box-shadow: inset 0 0 0 1px var(--ws-blue), 0 0 0 3px var(--ws-ring); } }
html[data-motion-paused=true] .is-flash .ws-approval,html[data-motion-paused=true] .ws-review.is-flash { animation: none; }
/* A finding: something people missed, caught by cross-checking a source. */
.ws-finding { grid-column: 2; display: grid; gap: 5px; width: 100%; max-width: 520px; margin: 8px 0 4px; padding: 9px 12px 9px 13px; border-radius: 6px; background: #fffbf3; box-shadow: inset 3px 0 0 var(--ws-amber-dot), inset 0 0 0 1px #f0e2c4; }
.ws-finding p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12.5px; line-height: 1.45; }
.ws-finding-issue { color: #5a3f0b; }
.ws-finding-issue strong { color: var(--ws-amber); font-weight: 600; }
.ws-finding-issue .ws-glyph { width: 15px; height: 15px; margin-top: 1px; color: var(--ws-amber-dot); }
.ws-finding-fix { color: var(--ws-green); }
.ws-finding-fix .icon { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; }
.ws-count-up { font-variant-numeric: tabular-nums; }

/* Homepage run playback. workspace.js sets data-run only while the run plays. */
.ws-run [data-run] { transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.ws-run [data-run=hidden] { opacity: 0; transform: translateY(6px); visibility: hidden; transition: none; }
.ws-step[data-run=done]>.ws-glyph { animation: ws-check-in .32s cubic-bezier(.22,1,.36,1); }
.workspace .agent-text[data-run=working] { color: var(--ws-ink-3); }
.ws-finding[data-run=shown] { animation: ws-finding-in 1.1s ease-out; }
@keyframes ws-check-in { from { transform: scale(.55); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes ws-finding-in { 0% { background: #fff1d6; } 100% { background: #fffbf3; } }
.ws-composer-wrap { position: sticky; bottom: -16px; width: 100%; max-width: 700px; margin: auto auto 0; padding: 16px 0 0; background: linear-gradient(#fff0, #fff 14px); }
.workspace[data-mode="preview"] .ws-composer-wrap { position: static; }
.ws-composer { display: block; padding: 10px 8px 8px 12px; border: 1px solid var(--ws-line-strong); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px #242d300d; transition: border-color .12s, box-shadow .12s; }
.ws-composer:focus-within { border-color: var(--ws-blue); box-shadow: 0 0 0 3px var(--ws-ring); }
.workspace .ws-composer textarea { display: block; width: 100%; min-height: 21px; max-height: 120px; padding: 0; border: 0; background: transparent; color: var(--ws-ink); font: 400 14px/1.5 var(--sans); resize: none; field-sizing: content; }
.workspace .ws-composer textarea:focus-visible { outline: none; }
.ws-composer textarea::placeholder { color: var(--ws-ink-3); }
.ws-composer-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ws-composer-context { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--ws-ink-3); font-size: 12px; }
.ws-composer-context .icon { width: 14px; height: 14px; }
.ws-composer-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-send { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; flex-shrink: 0; border-radius: 7px; background: var(--ws-blue); color: #fff; transition: background-color .12s; }
.ws-send:hover { background: var(--ws-blue-ink); }
.ws-send .icon { width: 16px; height: 16px; stroke-width: 2; }

/* Context panel */
.ws-context { display: flex; flex-direction: column; gap: 16px; width: 272px; flex-shrink: 0; overflow-y: auto; padding: 16px; background: var(--ws-well); border-left: 1px solid var(--ws-line); }
.ws-ctx h4 { margin: 0 0 8px; color: var(--ws-ink-2); font: 600 12px/1.3 var(--sans); }
.ws-ctx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ws-ctx-head h4 { margin: 0; }
.ws-ctx-head .ws-count { margin-left: 0; }
.ws-ctx-list { display: flex; flex-direction: column; gap: 8px; }
.ws-ctx-empty { margin: 0; color: var(--ws-ink-3); font-size: 12px; }
.ws-model { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 0 0 9px; border: 1px solid var(--ws-line-strong); border-radius: 6px; background: #fff; transition: border-color .12s, box-shadow .12s; }
.ws-model:hover { border-color: #c5c8bd; }
.ws-model:focus-within { border-color: var(--ws-blue); box-shadow: 0 0 0 3px var(--ws-ring); }
.ws-model>.brand-icon,.ws-model>.icon:first-child { width: 16px; height: 16px; color: var(--ws-ink-2); }
.workspace .ws-model select { flex: 1; min-width: 0; height: 100%; padding: 0 28px 0 0; border: 0; background: transparent; color: var(--ws-ink); font: 500 13px/1 var(--sans); cursor: pointer; appearance: none; -webkit-appearance: none; }
.workspace .ws-model select:focus-visible { outline: none; }
.ws-model>.icon:last-child { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--ws-ink-3); pointer-events: none; }
.ws-ctx-note { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 8px; align-items: start; }
.ws-ctx-note .ws-scope { justify-content: center; margin-top: 1px; }
.ws-ctx-note p { margin: 0; color: var(--ws-ink-2); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-ctx-person { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ws-ctx-person span:not(.ws-avatar) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ctx-person small { margin-left: auto; color: var(--ws-ink-3); font-size: 12px; white-space: nowrap; }
.ws-env { padding: 10px; border: 1px solid var(--ws-line); border-radius: 8px; background: #fff; }
.ws-env-head { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 13px; }
.ws-env-head .icon { width: 15px; height: 15px; color: var(--ws-ink-3); }
.ws-env-state { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--ws-ink-3); font-weight: 400; font-size: 12px; }
.ws-env-state .ws-dot { width: 6px; height: 6px; }
.ws-env-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ws-env-caps li { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 5px; border-radius: 5px; background: var(--ws-well); box-shadow: inset 0 0 0 1px var(--ws-line); color: var(--ws-ink-2); font-size: 12px; }
.ws-env-caps .icon { width: 13px; height: 13px; color: var(--ws-ink-3); }
.ws-ctx-review { display: flex; align-items: flex-start; gap: 8px; width: calc(100% + 12px); margin: -4px -6px; padding: 4px 6px; border-radius: 6px; text-align: left; }
.ws-ctx-review:hover { background: var(--ws-hover); }
.ws-ctx-review .ws-glyph { margin-top: 1px; }
.ws-ctx-review>span { min-width: 0; }
.ws-ctx-review strong { display: block; overflow: hidden; font-weight: 500; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ws-ctx-review small { display: block; color: var(--ws-ink-3); font-size: 12px; }

/* List views */
.ws-rows { border-top: 1px solid var(--ws-line); }
.ws-rows>li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; border-bottom: 1px solid var(--ws-line); }
.ws-row-main { flex: 1; min-width: 0; }
.ws-row-main strong { display: block; font-weight: 500; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.ws-row-main small { display: block; color: var(--ws-ink-3); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.ws-row-icon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; background: var(--ws-well); box-shadow: inset 0 0 0 1px var(--ws-line); color: var(--ws-ink-2); }
.ws-row-icon .icon { width: 15px; height: 15px; }
.ws-row-icon.is-sm { width: 24px; height: 24px; }
.ws-row-icon.is-sm .icon { width: 13px; height: 13px; }
.ws-section+.ws-section { margin-top: 22px; }
.ws-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ws-section-head h4 { margin: 0; font: 600 13px/1.3 var(--sans); }
.ws-section-head .ws-count { margin-left: 0; }
.ws-empty { margin: 0; padding: 28px 12px; border-bottom: 1px solid var(--ws-line); color: var(--ws-ink-3); font-size: 13px; text-align: center; }
.ws-more { margin: 8px 4px 0; color: var(--ws-ink-3); font-size: 12px; }
.ws-table-head { padding: 0 8px 6px; border-bottom: 1px solid var(--ws-line); color: var(--ws-ink-3); font-size: 12px; }
.ws-select,.ws-scope-select,.workspace .ws-form select { height: 28px; padding: 0 26px 0 9px; border: 1px solid var(--ws-line-strong); border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' fill='none' stroke='%23646d70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center / 14px; color: var(--ws-ink); font: 500 13px/1 var(--sans); cursor: pointer; appearance: none; -webkit-appearance: none; }

/* Projects */
.ws-proj+.ws-proj { margin-top: 18px; }
.ws-proj-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0 4px 8px; border-bottom: 1px solid var(--ws-line); }
.ws-proj-head h4 { margin: 0; font: 600 14px/1.3 var(--sans); }
.ws-proj-team { color: var(--ws-ink-3); font-size: 12px; }
.ws-proj-progress { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--ws-ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.goal-progress { width: 72px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--ws-line); }
.goal-progress span { display: block; height: 100%; border-radius: inherit; background: var(--ws-blue); transition: width .25s ease; }
.ws-task { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px; border-bottom: 1px solid var(--ws-line); cursor: pointer; }
.ws-task:hover { background: #fafaf7; }
.ws-task input { width: 15px; height: 15px; margin: 0; flex-shrink: 0; accent-color: var(--ws-blue); cursor: pointer; }
.ws-task-text { flex: 1; min-width: 0; font-size: 13px; }
.ws-task input:checked+.ws-task-text { color: var(--ws-ink-3); }
.ws-task-owner { display: flex; align-items: center; gap: 6px; color: var(--ws-ink-3); font-size: 12px; white-space: nowrap; }
.ws-proj-foot { display: flex; align-items: center; gap: 14px; padding: 8px 4px 0; color: var(--ws-ink-3); font-size: 12px; }
.ws-proj-foot .ws-link { margin-left: auto; }

/* Memory */
.ws-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.ws-toolbar>label { color: var(--ws-ink-3); font-size: 12px; }
.ws-toolbar-count { color: var(--ws-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.workspace .ws-scope-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; color: var(--ws-ink-3); font-size: 12px; }
.ws-scope-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ws-memory-list { border-top: 1px solid var(--ws-line); }
.ws-memory { display: grid; grid-template-columns: 92px minmax(0,1fr) 28px; gap: 12px; align-items: start; padding: 10px 4px; border-bottom: 1px solid var(--ws-line); }
.workspace .ws-scope-select { width: 92px; height: 24px; padding: 0 22px 0 8px; border: 0; border-radius: 5px; background-position: right 5px center; background-size: 13px; font-size: 12px; }
.ws-scope-select.is-company { background-color: var(--ws-blue-wash); color: var(--ws-blue-ink); }
.ws-scope-select.is-project { background-color: var(--ws-green-wash); color: var(--ws-green); }
.ws-scope-select.is-private { background-color: var(--ws-violet-wash); color: var(--ws-violet); }
.ws-memory-body { min-width: 0; }
.workspace .ws-memory textarea { display: block; width: calc(100% + 8px); min-height: 24px; margin: 0 -4px; padding: 2px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ws-ink); font: 400 13px/1.5 var(--sans); resize: none; field-sizing: content; transition: background-color .12s, box-shadow .12s; }
.workspace .ws-memory textarea:hover { background: var(--ws-well); }
.workspace .ws-memory textarea:focus { background: #fff; box-shadow: 0 0 0 1px var(--ws-blue), 0 0 0 3px var(--ws-ring); outline: none; }
.ws-memory textarea::placeholder { color: var(--ws-ink-3); }
.ws-memory-source { display: block; margin-top: 2px; color: var(--ws-ink-3); font-size: 12px; }

/* Artifacts */
.ws-doc-grid { display: grid; grid-template-columns: minmax(0,2.3fr) 76px minmax(0,1.2fr) minmax(0,1fr) 128px; gap: 12px; align-items: center; }
.ws-doc-list { border-bottom: 0; }
.ws-doc-row { width: 100%; min-height: 56px; padding: 8px; border-bottom: 1px solid var(--ws-line); text-align: left; transition: background-color .12s; }
.ws-doc-row:hover { background: #fafaf7; }
.ws-doc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-doc-name .ws-doc-thumb { width: 26px; height: 33px; padding: 6px 4px 0; }
.ws-doc-name strong { display: block; font-weight: 500; font-size: 13px; line-height: 1.3; }
.ws-doc-name small { display: block; color: var(--ws-ink-3); font-size: 12px; }
.ws-doc-sources { display: flex; gap: 5px; }
.ws-doc-owner { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ws-ink-2); font-size: 13px; white-space: nowrap; }
.ws-doc-updated { color: var(--ws-ink-3); font-size: 12px; white-space: nowrap; }
.ws-doc-status { display: flex; justify-content: flex-start; }

/* Reader */
.artifact-reader { width: 100%; max-width: 660px; margin: 0 auto; padding: 8px 0 28px; color: var(--ws-ink); font-family: var(--sans); }
.reader-type { margin: 0 0 6px; color: var(--ws-ink-3); font: 500 12px/1.3 var(--sans); }
.artifact-reader h3,.workspace .artifact-reader .workspace-heading { margin: 0 0 10px; color: var(--ws-ink); font: 600 28px/1.15 var(--sans); letter-spacing: -.6px; }
.artifact-reader .reader-lede { margin: 0 0 16px; color: var(--ws-ink-2); font-size: 15px; line-height: 1.55; }
.reader-meta { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 8px 20px; margin: 0 0 8px; padding: 12px 0; border-block: 1px solid var(--ws-line); font-size: 13px; }
.reader-meta>div { display: contents; }
.reader-meta dt { color: var(--ws-ink-3); line-height: 22px; }
.reader-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; min-width: 0; line-height: 22px; }
.artifact-reader section { margin: 22px 0 0; }
.artifact-reader section h4 { margin: 0 0 6px; font: 600 15px/1.35 var(--sans); }
.artifact-reader section p { margin: 0; color: var(--ws-ink-2); font-size: 14px; line-height: 1.65; }

/* Automations, connectors, activity, people */
.ws-form { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 10px 12px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--ws-line-strong); border-radius: 8px; background: var(--ws-well); }
.ws-form-wide { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) minmax(0,.7fr); }
.ws-form label { display: flex; flex-direction: column; gap: 5px; color: var(--ws-ink-2); font: 500 12px/1.3 var(--sans); }
.workspace .ws-form :is(input,select) { width: 100%; min-width: 0; height: 32px; padding: 0 28px 0 10px; border: 1px solid var(--ws-line-strong); border-radius: 6px; background-color: #fff; color: var(--ws-ink); font: 400 13px/1 var(--sans); }
.workspace .ws-form input { padding-right: 10px; }
.workspace .ws-form :is(input,select):focus { border-color: var(--ws-blue); box-shadow: 0 0 0 3px var(--ws-ring); }
.workspace .ws-form :is(input,select):focus-visible { outline: none; }
.ws-form input::placeholder { color: var(--ws-ink-3); }
.ws-form-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 8px; }
.automation-row.is-paused .ws-row-main strong { color: var(--ws-ink-2); }
.automation-row .ws-btn-sm { min-width: 64px; }
.connector-glyph { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--ws-line-strong); }
.workspace .connector-glyph .brand-icon { width: 18px; height: 18px; }
.ws-connector-access { min-width: 96px; color: var(--ws-ink-3); font-size: 12px; text-align: right; white-space: nowrap; }
.connector-card.is-on .ws-connector-access { color: var(--ws-ink-2); }
.connector-switch { display: inline-flex; align-items: center; width: 32px; height: 18px; flex-shrink: 0; padding: 2px; border-radius: 9px; background: #d6d8ce; box-shadow: inset 0 0 0 1px var(--ws-icon); transition: background-color .15s, box-shadow .15s; }
.connector-switch>span { width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #242d3040; transition: transform .15s ease; }
.connector-switch[aria-checked="true"] { background: var(--ws-blue); box-shadow: none; }
.connector-switch[aria-checked="true"]>span { transform: translateX(14px); }
.ws-review { flex-wrap: wrap; }
.ws-review>.ws-glyph { align-self: flex-start; margin-top: 3px; }
.audit-list { border-top: 1px solid var(--ws-line); }
.audit-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 42px; padding: 6px 4px; border-bottom: 1px solid var(--ws-line); }
.audit-row strong { font-weight: 500; font-size: 13px; }
.audit-row div span { margin-left: 8px; color: var(--ws-ink-3); font-size: 12px; overflow-wrap: anywhere; }
.audit-row time { color: var(--ws-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-meta { display: grid; grid-template-columns: 18px 88px 108px; gap: 6px; align-items: center; color: var(--ws-ink-2); font-size: 12px; white-space: nowrap; }
.audit-meta>span:not(.ws-avatar) { overflow: hidden; text-overflow: ellipsis; }
.audit-meta time { text-align: right; }
.member-row .ws-avatar,.ws-agent-row .ws-avatar { width: 28px; height: 28px; font-size: 11px; }
.ws-agent-row .ws-avatar.is-agent .brand-mark { width: 17px; height: 12px; }

/* Homepage frame and caption */
.product-stage { position: relative; }
/* A quiet label for the embedded window, in the gap above its frame. */
.demo-ui-label { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 9px; color: #737b7e; font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: .02em; text-align: center; pointer-events: none; }
.product-perspective { border: 1px solid #d6d8ce; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #242d300f, 0 30px 60px -30px #242d3040; }
.preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 2px 0; color: #5d6669; font-size: 13px; }
.preview-caption p { margin: 0; line-height: 1.5; }
.preview-caption .text-link { gap: 6px; margin: 0; padding: 4px 0; color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.preview-caption .text-link .icon { width: 15px; height: 15px; }

/* Dialogs */
.demo-dialog { width: calc(100% - 64px); max-width: 1280px; height: min(840px, calc(100dvh - 48px)); max-height: calc(100dvh - 32px); overflow: hidden; border: 1px solid #d6d8ce; border-radius: 12px; background: #fff; }
.demo-dialog[open] { display: flex; flex-direction: column; }
.dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; height: 52px; padding: 0 10px 0 20px; border-bottom: 1px solid #e3e4dc; background: var(--paper); }
.dialog-bar-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.dialog-bar h2 { margin: 0; color: var(--ink); font: 600 14px/1.25 var(--sans); letter-spacing: 0; white-space: nowrap; }
.dialog-bar-title>span { overflow: hidden; color: #5d6669; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dialog-bar-actions { display: flex; align-items: center; gap: 4px; }
.dialog-bar-link { height: 30px; padding: 0 10px; border-radius: 6px; color: #4d5659; font: 500 12px/1 var(--sans); }
.dialog-bar-link:hover { background: #ebebe4; color: var(--ink); }
.dialog-bar .icon-button { width: 32px; height: 32px; border-radius: 6px; color: #4d5659; }
.dialog-bar .icon-button:hover { background: #ebebe4; }
.dialog-bar .icon-button .icon { width: 18px; height: 18px; }
.guest-dialog { width: calc(100% - 40px); max-width: 760px; max-height: calc(100dvh - 60px); overflow: auto; border: 1px solid #d6d8ce; border-radius: 12px; background: #fff; }
.guest-dialog .dialog-bar { position: sticky; top: 0; z-index: 3; }
.guest-dialog .artifact-reader { padding: 24px 40px 36px; }
.guest-dialog .artifact-reader h3 { font-size: 34px; letter-spacing: -.9px; }
.reader-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--ws-line); }
.reader-toolbar .wordmark { font-size: 21px; letter-spacing: -1px; }
.reader-toolbar .wordmark .brand-mark { width: 24px; height: 24px; }
.guest-note { display: flex; gap: 8px; margin: 28px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--ws-well); box-shadow: inset 0 0 0 1px var(--ws-line); color: var(--ws-ink-2); font-size: 13px; }
.guest-note .icon { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; color: var(--ws-ink-3); }

/* Without room for the context column, it moves below the thread. */
@container ws (max-width: 1099px) {
  .ws-content { display: block; overflow-y: auto; }
  .workspace-main { overflow: visible; }
  .ws-composer-wrap { position: static; margin-top: 8px; padding-top: 14px; background: none; }
  .ws-context { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 28px; width: auto; overflow: visible; padding: 18px 28px 22px; border-left: 0; border-top: 1px solid var(--ws-line); }
  .workspace[data-mode="preview"] .ws-app { height: auto; }
  .workspace[data-mode="preview"] :is(.ws-ctx-people,.ws-ctx-env,.ws-ctx-reviews) { display: none; }
  .ws-doc-grid { grid-template-columns: minmax(0,2fr) 76px minmax(0,1.2fr) 118px; }
  .ws-doc-updated { display: none; }
  .ws-table-head span:nth-child(4) { display: none; }
}
/* Narrow: navigation becomes a scrollable strip above a single column. */
@container ws (max-width: 819px) {
  .ws-app { flex-direction: column; }
  .ws-sidebar { width: auto; gap: 0; padding: 0; border-right: 0; border-bottom: 1px solid var(--ws-line); }
  .ws-org { height: 44px; padding: 0 16px; }
  .ws-search,.ws-user,.ws-projects { display: none; }
  .workspace-nav { flex-direction: row; gap: 2px; padding: 0 10px 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .workspace-nav::-webkit-scrollbar { display: none; }
  .ws-nav-group { flex-direction: row; gap: 2px; }
  .ws-nav-bottom { margin-top: 0; }
  .ws-nav-item { width: auto; height: 32px; padding: 0 10px; flex-shrink: 0; }
  .ws-body { flex: 1; }
  .ws-topbar { flex-wrap: wrap; gap: 10px; min-height: 0; padding: 12px 16px; }
  .ws-top-actions { flex-wrap: wrap; }
  .ws-facepile { display: none; }
  .workspace-main { padding: 16px 16px 14px; }
  .ws-context { grid-template-columns: minmax(0,1fr); padding: 16px; }
  .ws-step-main { gap: 4px 8px; }
  .ws-approval { padding: 8px 10px; }
  .ws-doc { max-width: none; }
  .ws-rows>li { flex-wrap: wrap; gap: 8px 12px; }
  .ws-connector-access { display: none; }
  .connector-card .ws-row-main { flex-basis: calc(100% - 100px); }
  .automation-row .ws-row-main { flex-basis: calc(100% - 44px); }
  .automation-row .ws-pill { margin-left: 40px; }
  .automation-row .ws-btn-sm { margin-left: auto; }
  .ws-review .ws-row-main { flex-basis: calc(100% - 32px); }
  .ws-review .ws-link { margin-left: 28px; }
  .ws-review .ws-decision,.ws-review .approval-mini-result { margin-left: auto; }
  .ws-table-head { display: none; }
  .ws-doc-grid { grid-template-columns: minmax(0,1fr) auto; }
  .ws-doc-sources,.ws-doc-owner { display: none; }
  .ws-proj-progress { margin-left: 0; width: 100%; }
  .ws-task-owner span { display: none; }
  .ws-proj-foot { flex-wrap: wrap; }
  .workspace .ws-toolbar .ws-scope-legend { margin-left: 0; width: 100%; }
  .ws-memory { grid-template-columns: minmax(0,1fr) 28px; gap: 6px 8px; }
  .ws-memory .ws-scope-select { grid-column: 1; }
  .ws-memory .ws-memory-body { grid-column: 1; grid-row: 2; }
  .ws-memory .ws-icon-btn { grid-column: 2; grid-row: 1 / 3; }
  .ws-form,.ws-form-wide { grid-template-columns: minmax(0,1fr); }
  .audit-row { grid-template-columns: 24px minmax(0,1fr); row-gap: 4px; }
  .audit-row div span { display: block; margin-left: 0; }
  .audit-meta { grid-column: 2; grid-template-columns: 18px auto auto; justify-content: start; }
  .audit-meta time::before { content: ''; display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px 2px; border-radius: 50%; background: var(--ws-icon); vertical-align: middle; }
  .artifact-reader h3,.workspace .artifact-reader .workspace-heading { font-size: 24px; }
}
@media (max-width: 1100px) {
  .demo-dialog { width: calc(100% - 32px); }
}
@media (max-width: 700px) {
  .demo-ui-label { position: static; margin: 0 0 9px; }
  .demo-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .dialog-bar { height: 56px; padding: 0 6px 0 16px; }
  .dialog-bar-title { flex-direction: column; align-items: flex-start; gap: 2px; }
  .dialog-bar h2 { font-size: 13px; }
  .dialog-bar-title>span { font-size: 11px; }
  .dialog-bar-link { padding: 0 8px; white-space: nowrap; }
  .dialog-bar-link-extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .guest-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 24px); }
  .guest-dialog .artifact-reader { padding: 20px 18px 28px; }
  .guest-dialog .artifact-reader h3 { font-size: 26px; }
  .preview-caption { flex-direction: column; align-items: flex-start; gap: 6px; }
  .product-perspective { border-radius: 10px; }
  /* Native-size entry text avoids iOS focus zoom. */
  .workspace .ws-composer textarea,.workspace .ws-memory textarea,.workspace .ws-form :is(input,select),.workspace .ws-model select { font-size: 16px; }
}