:root { --bg: #f4f5f7; --card: #ffffff; --text: #1f2937; --muted: #6b7280; --border: #e5e7eb; --accent: #2563eb; --accent-dark: #1d4ed8; --warn: #c2410c; --warn-bg: #ffedd5; --good: #15803d; --good-bg: #dcfce7; --header-bg: #111827; --header-fg: #ffffff; --input-bg: #ffffff; --row-alt: #fafafa; --disc-bg: #fff7ed; --disc-border: #fed7aa; --status-bg: #eff6ff; --status-border: #bfdbfe; --status-fg: #1e40af; --code-bg: #f3f4f6; --src-tag-bg: #e0e7ff; --src-tag-fg: #3730a3; --src-tag-edit-bg: #fef3c7; --src-tag-edit-fg: #92400e; } /* Auto dark if OS says so and user hasn't chosen manually */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f172a; --card: #1e293b; --text: #e5e7eb; --muted: #94a3b8; --border: #334155; --accent: #3b82f6; --accent-dark: #60a5fa; --warn: #fdba74; --warn-bg: #3a2411; --good: #86efac; --good-bg: #14351f; --header-bg: #020617; --header-fg: #f3f4f6; --input-bg: #0f172a; --row-alt: #172033; --disc-bg: #2a1d0e; --disc-border: #78350f; --status-bg: #172033; --status-border: #1e40af; --status-fg: #93c5fd; --code-bg: #0b1120; --src-tag-bg: #1e293b; --src-tag-fg: #a5b4fc; --src-tag-edit-bg: #3a2411; --src-tag-edit-fg: #fcd34d; } } /* Explicit manual override via data-theme attr on */ :root[data-theme="dark"] { --bg: #0f172a; --card: #1e293b; --text: #e5e7eb; --muted: #94a3b8; --border: #334155; --accent: #3b82f6; --accent-dark: #60a5fa; --warn: #fdba74; --warn-bg: #3a2411; --good: #86efac; --good-bg: #14351f; --header-bg: #020617; --header-fg: #f3f4f6; --input-bg: #0f172a; --row-alt: #172033; --disc-bg: #2a1d0e; --disc-border: #78350f; --status-bg: #172033; --status-border: #1e40af; --status-fg: #93c5fd; --code-bg: #0b1120; --src-tag-bg: #1e293b; --src-tag-fg: #a5b4fc; --src-tag-edit-bg: #3a2411; --src-tag-edit-fg: #fcd34d; } * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; margin: 0; padding: 0; background: var(--bg); color: var(--text); } header { background: var(--header-bg); color: var(--header-fg); padding: .75rem 1.5rem; display: flex; align-items: center; gap: 2rem; } header h1 { margin: 0; font-size: 1.1rem; } header nav { flex: 1; } header nav a { color: var(--muted); text-decoration: none; margin-right: 1rem; } header nav a:hover { color: var(--header-fg); } #theme-toggle { background: transparent; border: 1px solid #374151; color: var(--header-fg); padding: .25rem .6rem; border-radius: 4px; font-size: .85rem; cursor: pointer; } #theme-toggle:hover { border-color: var(--muted); } main { max-width: 1080px; margin: 1.5rem auto; padding: 0 1rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .card h2 { margin-top: 0; font-size: 1.05rem; } .hint { color: var(--muted); font-size: .875rem; margin: .25rem 0; } .hidden { display: none !important; } .badge { display: inline-block; background: var(--warn-bg); color: var(--warn); padding: .1rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; margin-left: .5rem; } .badge.ok { background: var(--good-bg); color: var(--good); } .field { margin-bottom: 1rem; } .field label { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .875rem; } .field input, .field select { width: 100%; padding: .5rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; background: var(--input-bg); color: var(--text); } .field-row input[type="text"], .disc-row input[type="text"] { background: var(--input-bg); color: var(--text); } .field-row.empty input[type="text"] { background: transparent; border: 1px dashed var(--border); } .field-row.empty .path { color: var(--muted); } .field-row .type-hint { font-size: .7rem; color: var(--muted); font-weight: 400; margin-left: .4rem; background: var(--code-bg); padding: .05rem .35rem; border-radius: 3px; } .src-tag.src-tag-missing { background: transparent; color: var(--muted); border: 1px dashed var(--border); } button { background: var(--border); color: var(--text); padding: .5rem 1rem; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font: inherit; } button.primary { background: var(--accent); color: #fff; border-color: var(--accent); } button.primary:hover:not([disabled]) { background: var(--accent-dark); } button[disabled] { opacity: .5; cursor: not-allowed; } a.btn { display: inline-block; background: var(--border); color: var(--text); padding: .5rem 1rem; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font: inherit; text-decoration: none; } a.btn:hover { filter: brightness(1.08); } a.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } a.btn.primary:hover { background: var(--accent-dark); } .actions { display: flex; gap: 1rem; align-items: center; } .status, .result { padding: .75rem 1rem; border-radius: 6px; margin-top: 1rem; font-size: .875rem; } .status { background: var(--status-bg); border: 1px solid var(--status-border); color: var(--status-fg); } .result { background: var(--good-bg); border: 1px solid var(--border); color: var(--good); } /* Fields list */ .section-header { font-weight: 600; color: var(--text); font-size: .95rem; margin: 1.25rem 0 .5rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: .75rem; padding: .25rem 0; } .section-header::before { content: "▾"; display: inline-block; font-size: .7rem; color: var(--muted); transition: transform 120ms ease; } .section-header.collapsed::before { transform: rotate(-90deg); } .section-header .sec-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .section-header .sec-prefix { color: var(--muted); font-weight: 500; } .section-header .sec-prefix::after { content: " › "; color: var(--muted); } .section-header .sec-leaf { color: var(--text); } .section-header .sec-progress { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; } .section-header .sec-bar { width: 80px; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; } .section-header .sec-bar .fill { display: block; height: 100%; background: var(--accent); transition: width .2s ease; } .section-header.state-full .sec-bar .fill { background: var(--good); } .section-header.state-empty .sec-bar .fill { background: transparent; } .section-header .sec-count { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; } .field-group.collapsed .field-row { display: none; } .field-row.filtered-out { display: none !important; } .field-row { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr); gap: .75rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); } .field-row:last-child { border-bottom: none; } .field-row .field-label { display: flex; align-items: center; gap: .4rem; min-width: 0; } .field-row .path { font-size: .875rem; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .field-row input[type="text"] { width: 100%; padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 4px; font-size: .875rem; background: var(--input-bg); color: var(--text); } .field-row input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .field-row .src-tag { display: inline-block; font-size: .68rem; line-height: 1; padding: .15rem .4rem; border-radius: 3px; background: var(--src-tag-edit-bg); color: var(--src-tag-edit-fg); text-transform: uppercase; letter-spacing: .04em; } .field-row.discrepancy { background: var(--disc-bg); margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; } /* Discrepancy UI (card-based) */ .disc-row { border: 1px solid var(--disc-border); background: var(--disc-bg); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: .75rem; } .disc-row .disc-path { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; color: var(--text); } .disc-row .disc-path .field-full { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); margin-top: .15rem; } .disc-candidates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-top: .5rem; } .disc-card { border: 2px solid var(--border); background: var(--card); border-radius: 6px; padding: .75rem .9rem; cursor: pointer; transition: border-color 100ms ease, background 100ms ease; display: flex; flex-direction: column; gap: .35rem; } .disc-card:hover { border-color: var(--muted); } .disc-card.selected { border-color: var(--accent); background: var(--card); } .disc-card.selected::before { content: "✓"; color: var(--accent); font-weight: 700; float: right; font-size: 1rem; } .disc-card .value { font-weight: 600; font-size: 1rem; color: var(--text); word-break: break-word; } .disc-card .sources { font-size: .75rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .3rem; } .disc-card .source-chip { background: var(--src-tag-bg); color: var(--src-tag-fg); padding: .1rem .4rem; border-radius: 3px; } .disc-card.custom { background: transparent; border-style: dashed; } .disc-card.custom input[type="text"] { width: 100%; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; background: var(--input-bg); color: var(--text); margin-top: .15rem; } .disc-card.custom .label { font-size: .8rem; color: var(--muted); } /* Discrepancy confirm/save action bar */ .disc-actions { display: flex; justify-content: flex-end; margin-top: .75rem; gap: .5rem; } .disc-save-btn { font-size: .825rem; padding: .35rem .9rem; } .disc-save-btn.saved { background: var(--good, #15803d); border-color: var(--good, #15803d); opacity: 1; } .disc-save-btn[disabled] { cursor: default; } .disc-row.confirmed { background: transparent; border-color: var(--border); border-left: 3px solid var(--good, #15803d); } .disc-row.confirmed .disc-card.selected { border-color: var(--good, #15803d); } .disc-row.confirmed .disc-card.selected::before { color: var(--good, #15803d); } .disc-row .disc-path { font-weight: 600; margin-bottom: .5rem; } .disc-row label { display: block; padding: .25rem 0; font-size: .875rem; cursor: pointer; } .disc-row input[type="radio"] { margin-right: .5rem; } .disc-row .custom-input { margin-top: .25rem; } .disc-row .custom-input input { padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 3px; width: 60%; } /* Table source picker — alternate candidates */ .table-alts { margin-top: .75rem; padding-top: .6rem; border-top: 1px dashed var(--border); } .table-alts-head { font-size: .75rem; color: var(--muted); margin-bottom: .4rem; } .table-alts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .table-alts-list li { display: flex; align-items: center; gap: .6rem; padding: .35rem .55rem; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; font-size: .825rem; } .table-alts-list li .alt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; } .table-use-btn { font-size: .75rem; padding: .2rem .55rem; } /* Extracted table preview */ .table-block { border: 1px solid var(--border); border-radius: 6px; padding: .75rem 1rem; margin-bottom: .75rem; background: var(--card); } .table-block .table-header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; } .table-scroll { max-height: 320px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); } table.extracted-table { width: 100%; border-collapse: collapse; font-size: .82rem; } table.extracted-table th, table.extracted-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } table.extracted-table th { position: sticky; top: 0; background: var(--card); color: var(--muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--border); z-index: 1; } table.extracted-table tr:last-child td { border-bottom: none; } table.extracted-table th.num, table.extracted-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Document list */ .doc-row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: .875rem; border-bottom: 1px solid var(--border); } .doc-row:last-child { border-bottom: none; } .doc-row .doc-type { font-size: .75rem; color: var(--muted); } /* ---- Chat assistant (G.6) ---- */ #chat-toggle { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.2rem; border: 1px solid var(--border); background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.15); z-index: 20; } #chat-panel { position: fixed; right: 1.5rem; bottom: 5rem; width: 360px; max-width: calc(100vw - 3rem); height: 460px; max-height: calc(100vh - 7rem); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.2); z-index: 19; overflow: hidden; } #chat-panel header { display: flex; justify-content: space-between; align-items: center; padding: .6rem .85rem; border-bottom: 1px solid var(--border); font-weight: 600; background: var(--input-bg); color: var(--text); } #chat-panel header::before { /* tiny avatar dot for visibility */ content: '🤖'; margin-right: .4rem; } #chat-close { background: none; border: none; color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; } #chat-log { flex: 1; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; } .chat-msg { padding: .5rem .7rem; border-radius: 8px; max-width: 85%; } .chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; } .chat-msg.assistant { align-self: flex-start; background: var(--input-bg); border: 1px solid var(--border); } .chat-msg.system { align-self: center; color: var(--muted); font-size: .75rem; font-style: italic; } .chat-applied { font-size: .75rem; color: var(--muted); margin-top: .25rem; } #chat-form { display: flex; gap: .5rem; padding: .5rem; border-top: 1px solid var(--border); } #chat-input { flex: 1; resize: none; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg); color: var(--text); font-family: inherit; font-size: .875rem; } /* ---- Auth / dashboard (H.5) ---- */ main.narrow { max-width: 520px; margin: 2rem auto; } main.narrow label { display: block; margin-bottom: .75rem; } main.narrow label input { width: 100%; padding: .5rem; margin-top: .25rem; border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg); color: var(--text); } .hint.error { color: #d33; } button.tab { background: none; border: none; padding: .5rem 1rem; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; } button.tab.active { color: var(--text); border-bottom-color: var(--accent); } button.tab .badge { margin-left: .25rem; } .prop-row { display: grid; grid-template-columns: 2fr auto auto 1fr; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--border); } .prop-row:last-child { border-bottom: none; } .prop-name { font-weight: 600; color: var(--text); text-decoration: none; } .prop-name:hover { text-decoration: underline; } .tag { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--input-bg); color: var(--muted); } .tag-template { background: rgba(139, 92, 246, 0.12); color: var(--violet-400); } .role-tag { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--accent); color: #fff; text-transform: capitalize; } .job-row { display: grid; grid-template-columns: auto auto 1fr; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--border); align-items: center; } .share-row { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--border); align-items: center; } .share-row .unshare-btn { font-size: .75rem; padding: .2rem .5rem; } dialog { border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; background: var(--bg); color: var(--text); max-width: 420px; } dialog::backdrop { background: rgba(0,0,0,0.4); } dialog label { display: block; margin: .75rem 0; } dialog input, dialog select { width: 100%; padding: .5rem; margin-top: .25rem; border: 1px solid var(--border); border-radius: 4px; background: var(--input-bg); color: var(--text); } /* ---- Property detail / scenarios (I.4) ---- */ .section-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; } .section-bar h2 { margin: 0; } .doc-bundle-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--border); align-items: center; } .doc-bundle-row:last-child { border-bottom: none; } .doc-bundle-row .doc-name { color: var(--text); text-decoration: none; font-weight: 500; } .doc-bundle-row .doc-name:hover { text-decoration: underline; } .doc-bundle-row .doc-remove { background: none; border: 1px solid var(--border); color: var(--muted); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; } .doc-bundle-row .doc-remove:hover { border-color: #d33; color: #d33; } .job-row { display: grid; grid-template-columns: 2fr auto auto 1fr auto; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--border); align-items: center; } .job-row:last-child { border-bottom: none; } .job-row .job-name { font-weight: 600; padding: 2px 4px; border-radius: 3px; } .job-row .job-name[contenteditable="true"]:hover { background: var(--input-bg); } .job-row .job-name[contenteditable="true"]:focus { outline: 2px solid var(--accent); background: var(--input-bg); } .job-row .row-actions { display: flex; gap: .5rem; } .job-row .btn, .job-row button { font-size: .75rem; padding: .25rem .6rem; } .status-awaiting_review { background: #fed; color: #a50; } .status-confirmed { background: #dfe; color: #083; } .status-extracting, .status-parsing { background: #def; color: #048; } .status-failed { background: #fdd; color: #a22; } /* Review job name inline rename */ .job-name-editable { font-size: 1.25rem; font-weight: 600; padding: 2px 4px; border-radius: 3px; } .job-name-editable[contenteditable="true"]:hover { background: var(--input-bg); } .job-name-editable[contenteditable="true"]:focus { outline: 2px solid var(--accent); background: var(--input-bg); } /* ---- Scenario cards (J.2) ---- */ .scenario-card { padding: .5rem 0; border-bottom: 1px solid var(--border); } .scenario-card:last-child { border-bottom: none; } .scenario-head { display: grid; grid-template-columns: 2fr auto auto 1fr auto; gap: .6rem; align-items: center; } .scenario-summary { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; padding-left: .25rem; } .summary-chip { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border); } .summary-chip em { color: var(--muted); font-style: normal; font-weight: 500; } /* ---- Dashboard polish (J.3) ---- */ .prop-row { grid-template-columns: 2fr auto auto auto 1fr auto; } .prop-row.archived { opacity: .5; } .prop-row .action-btn { background: none; border: 1px solid var(--border); color: var(--muted); width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: .9rem; } .prop-row .action-btn:hover { border-color: var(--accent); color: var(--accent); } /* ---- Dashboard card grid ---- */ .prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .prop-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .prop-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); } .prop-card.archived { opacity: .55; } .prop-card-accent { height: 4px; background: var(--accent); } .prop-card.t-multifamily .prop-card-accent { background: linear-gradient(90deg, #3b82f6, #60a5fa); } .prop-card.t-commercial .prop-card-accent { background: linear-gradient(90deg, #a855f7, #c084fc); } .prop-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; } .prop-card-head { display: flex; align-items: center; gap: .75rem; } .prop-card-avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; background: var(--input-bg); color: var(--muted); border: 1px solid var(--border); } .prop-card.t-multifamily .prop-card-avatar { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; } .prop-card.t-commercial .prop-card-avatar { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; } :root[data-theme="dark"] .prop-card.t-multifamily .prop-card-avatar { background: #172554; color: #93c5fd; border-color: #1e3a8a; } :root[data-theme="dark"] .prop-card.t-commercial .prop-card-avatar { background: #2e1065; color: #c4b5fd; border-color: #4c1d95; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prop-card.t-multifamily .prop-card-avatar { background: #172554; color: #93c5fd; border-color: #1e3a8a; } :root:not([data-theme="light"]) .prop-card.t-commercial .prop-card-avatar { background: #2e1065; color: #c4b5fd; border-color: #4c1d95; } } .prop-card-title { flex: 1; min-width: 0; } .prop-card-name { font-size: 1rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prop-card-sub { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: .1rem; } .card-action { flex: 0 0 auto; background: none; border: 1px solid var(--border); color: var(--muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .card-action:hover { border-color: var(--accent); color: var(--accent); } .prop-card-meta { display: flex; flex-wrap: wrap; gap: .35rem; } .prop-card-meta .chip { font-size: .72rem; padding: .15rem .55rem; border-radius: 999px; background: var(--input-bg); color: var(--muted); border: 1px solid var(--border); } .prop-card-footer { margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .74rem; color: var(--muted); } .prop-card-footer .hint { font-size: .74rem; } .scenario-card .delete-btn { background: none; border: 1px solid var(--border); color: var(--muted); padding: .25rem .5rem; border-radius: 4px; cursor: pointer; } .scenario-card .delete-btn:hover { border-color: #d33; color: #d33; } /* ---- Toasts ---- */ #toast-host { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .4rem; pointer-events: none; } .toast { padding: .55rem .85rem; border-radius: 6px; font-size: .85rem; color: #fff; background: #2a2a2a; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; max-width: 340px; } .toast-show { opacity: 1; transform: translateY(0); } .toast-ok { background: #1f7a3a; border-color: #1f7a3a; } .toast-err { background: #a33; border-color: #a33; } .toast-pending { background: #444; border-color: #555; } /* ---- Review page: wide layout ---- */ body.page-review .page-body > main { max-width: none; margin: 1.5rem; padding: 0; } /* Fields: 2-column responsive grid so non-table fields aren't single-stacked */ body.page-review .field-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); column-gap: 1.5rem; } body.page-review .field-group .section-header { grid-column: 1 / -1; } body.page-review .field-group.collapsed { display: block; } /* Delicate status tints on field rows */ .field-row { border-left: 3px solid transparent; padding-left: .6rem; } .field-row:not(.empty) { border-left-color: var(--status-filled, #bbf7d0); } .field-row.empty { border-left-color: var(--status-empty, #fecaca); } :root { --status-filled: #bbf7d0; --status-empty: #fecaca; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --status-filled: #166534; --status-empty: #7f1d1d; } } :root[data-theme="dark"] { --status-filled: #166534; --status-empty: #7f1d1d; } /* Narrow viewports */ @media (max-width: 900px) { body.page-review .page-body > main { margin: 1rem; } body.page-review .field-group { grid-template-columns: 1fr; } } /* ---------- Agent card: fancy live panel ------------------------------- */ .agent-card { position: relative; overflow: hidden; background: radial-gradient(circle at 0% 0%, rgba(139,92,246,.12), transparent 60%), radial-gradient(circle at 100% 0%, rgba(59,130,246,.12), transparent 60%), var(--card-bg, #fff); border: 1px solid transparent; background-clip: padding-box; } .agent-card::before { content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(120deg, #8b5cf6, #3b82f6, #06b6d4, #8b5cf6); background-size: 300% 100%; border-radius: inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: agent-border 8s linear infinite; pointer-events: none; opacity: .55; } .agent-card.is-running::before { animation-duration: 3s; opacity: 1; } @keyframes agent-border { to { background-position: 300% 0; } } .agent-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; } .agent-title { display:flex; align-items:center; gap:.6rem; } .agent-pulse { width:.7rem; height:.7rem; border-radius:50%; background: linear-gradient(135deg,#8b5cf6,#3b82f6); box-shadow: 0 0 0 0 rgba(139,92,246,.7); } .agent-card.is-running .agent-pulse { animation: agent-pulse 1.2s cubic-bezier(.4,0,.6,1) infinite; } @keyframes agent-pulse { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,.5); } 70% { box-shadow: 0 0 0 10px rgba(139,92,246,0); } 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); } } .agent-phase { font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; padding:.15rem .5rem; border-radius:999px; background:rgba(139,92,246,.12); color:#6d28d9; } :root[data-theme="dark"] .agent-phase { background:rgba(139,92,246,.22); color:#c4b5fd; } .agent-controls { display:flex; gap:.5rem; align-items:center; } .agent-controls button { padding:.45rem .85rem; border-radius:8px; } .agent-stop { background:#ef4444; color:#fff; border:none; } .agent-stop:hover { background:#dc2626; } .agent-reset { background:transparent; color:var(--muted); border:1px solid var(--border); } .agent-reset:hover:not(:disabled) { background:var(--hover-bg,#f3f4f6); color:var(--text); } .agent-reset:disabled { opacity:.4; cursor:not-allowed; } .agent-instructions { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 .35rem; } .agent-instructions-label { display: flex; align-items: baseline; gap: .6rem; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .agent-instructions-label .hint { font-size: .75rem; } .agent-instructions textarea { width: 100%; resize: vertical; min-height: 2.5rem; padding: .55rem .75rem; border-radius: 8px; border: 1px solid var(--border); background: rgba(148,163,184,.04); color: var(--text); font: inherit; font-size: .9rem; line-height: 1.45; transition: border-color var(--duration,160ms) ease, background var(--duration,160ms) ease; } .agent-instructions textarea::placeholder { color: var(--text-faint); } .agent-instructions textarea:focus { outline: none; border-color: rgba(139,92,246,.55); background: rgba(139,92,246,.06); } .agent-stats { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:1rem; margin:.75rem 0 0 0; align-items: stretch; } .agent-stats-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; } .agent-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } @media (max-width: 640px) { .agent-stats { grid-template-columns: 1fr; } .agent-stats-row { grid-template-columns: 1fr; } } .agent-stat { padding:.6rem .75rem; border-radius:10px; background:var(--stat-bg, rgba(148,163,184,.08)); border:1px solid var(--border); } .agent-stat-k { font-size:.72rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; } .agent-stat-v { font-size:1.6rem; font-weight:600; font-variant-numeric: tabular-nums; line-height:1.1; margin:.1rem 0 .35rem; } .agent-stat-max { font-size:.85rem; color:var(--muted); font-weight:400; margin-left:.2rem; } .agent-stat-saved { color:#059669; } :root[data-theme="dark"] .agent-stat-saved { color:#34d399; } .agent-bar { height:4px; border-radius:2px; background:rgba(148,163,184,.18); overflow:hidden; } .agent-bar-fill { height:100%; width:0%; background:linear-gradient(90deg,#8b5cf6,#3b82f6); transition: width .4s ease; } .agent-bar-fill.saved { background:linear-gradient(90deg,#10b981,#059669); } .agent-feed-wrap { padding-top:.25rem; } .agent-feed-head { display:flex; justify-content:space-between; align-items:baseline; font-size:.8rem; color:var(--muted); margin-bottom:.35rem; letter-spacing:.04em; text-transform:uppercase; } .agent-feed { max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.82rem; } .agent-row { display:flex; gap:.5rem; align-items:flex-start; padding:.3rem .5rem; border-radius:6px; animation: agent-row-in .25s ease-out; } @keyframes agent-row-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } .agent-row-icon { flex:0 0 1.2rem; text-align:center; } .agent-row-text { flex:1; word-break:break-word; } .agent-row-start { background:rgba(59,130,246,.10); } .agent-row-iter { color:var(--muted); } .agent-row-thought { background:rgba(99,102,241,.08); font-style:italic; } .agent-row-call { background:rgba(139,92,246,.08); } .agent-row-result { color:var(--muted); } .agent-row-saved { background:rgba(16,185,129,.12); color:#065f46; font-weight:500; } :root[data-theme="dark"] .agent-row-saved { color:#6ee7b7; } .agent-row-stop { background:rgba(100,116,139,.12); } .agent-row-err { background:rgba(239,68,68,.12); color:#991b1b; } :root[data-theme="dark"] .agent-row-err { color:#fca5a5; } /* Agent "quip" — light working-state messages that cycle while running. */ .agent-quip { font-style: italic; color: var(--muted); font-size: .9rem; margin-left: .35rem; opacity: 0; transform: translateY(-2px); transition: opacity .3s ease, transform .3s ease; } .agent-quip.visible { opacity: 1; transform: translateY(0); }