.list-wrap, .detail-wrap, .session-list-wrap, .session-detail-wrap { flex: 1; overflow-y: auto; min-height: 0; } .row { display: grid; grid-template-columns: 22px 1fr auto; align-items: start; column-gap: 12px; padding: 14px 16px 14px 14px; min-height: var(--row-h); cursor: pointer; user-select: none; border-bottom: 1px solid var(--hairline); transition: background 0.06s; position: relative; } .row:last-child { border-bottom: 0; } .row:hover { background: rgba(255,255,255,0.025); } .row.cursor { background: var(--surface); } .row.cursor::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--muted-2); } .row.selected { background: var(--accent-soft); } .row.selected::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .row.cursor.selected { background: rgba(167,139,250,0.16); } .row-checkbox { width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; border: 1.5px solid var(--muted-2); background: transparent; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: all 0.1s; justify-self: center; } .row:hover .row-checkbox, .row.selected .row-checkbox, .row.cursor .row-checkbox { opacity: 1; } .row-checkbox:hover { border-color: var(--accent); } .row-checkbox.checked { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); } .row-checkbox svg { width: 10px; height: 10px; color: #0a0b14; opacity: 0; } .row-checkbox.checked svg { opacity: 1; } .row-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .row-path { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 500; color: var(--fg); line-height: 1.4; display: flex; align-items: center; gap: 6px; min-width: 0; } .row-status { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; } .row-status svg { width: 100%; height: 100%; } .row-status.broken { color: var(--danger); } .row-status.partial { color: var(--warn); } .row-status.archived { color: var(--muted-2); } .row-path .project-prefix { color: var(--muted); font-weight: 400; flex-shrink: 0; } .row-path .project-prefix-sep { color: var(--muted-2); margin: 0 2px; flex-shrink: 0; } .row-path .path-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .row-path mark, .row-summary mark, .srow-title mark, .srow-snippet mark { background: var(--accent-soft); color: var(--accent-2); padding: 0 2px; border-radius: 2px; } .row-summary { font-size: var(--text-base); color: var(--fg-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; padding-top: 1px; } .row-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: 8px; } .row:hover .row-meta { color: var(--muted-2); } .row-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.1s; } .row:hover .row-actions, .row.cursor .row-actions { opacity: 1; } .row-action { height: 24px; padding: 0 8px; border-radius: 4px; color: var(--muted); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 5px; transition: all 0.1s; border: 1px solid transparent; } .row-action:hover { background: var(--surface-hi); color: var(--fg); border-color: var(--hairline-strong); } .row-action.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,0.3); } .row-action.restore { color: var(--accent-2); } .row-action.restore:hover { background: var(--accent-soft); color: var(--fg); border-color: var(--accent-soft); } .row-action .kbd { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted-2); padding: 0 3px; border: 1px solid var(--hairline); border-radius: 2px; line-height: 1.4; } .row-action:hover .kbd { color: var(--fg-2); border-color: var(--hairline-strong); } .row.archived .row-path, .row.archived .row-summary { color: var(--muted); } .row.archived .row-path .project-prefix { color: var(--muted-2); } .srow { display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: 12px; padding: 12px 16px; min-height: var(--row-h-session); cursor: pointer; user-select: none; border-bottom: 1px solid var(--hairline); transition: background 0.06s; position: relative; } .srow:hover { background: rgba(255,255,255,0.025); } .srow.cursor { background: var(--surface); } .srow.cursor::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--muted-2); } .srow-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .srow-title { font-size: var(--text-md); font-weight: 500; color: var(--fg); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srow-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .srow-meta .project-tag { color: var(--fg-2); font-weight: 500; } .srow-meta .dot { width: 2px; height: 2px; background: var(--muted-2); border-radius: 50%; flex-shrink: 0; } .srow-snippet { margin-top: 4px; font-size: var(--text-sm); color: var(--fg-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: 14px; border-left: 2px solid var(--accent-soft); } .srow-snippet .snippet-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--accent-2); letter-spacing: 0.04em; text-transform: uppercase; margin-right: 6px; } .srow-right { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; padding-top: 2px; white-space: nowrap; } .empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: var(--text-sm); padding: 60px 20px; text-align: center; flex-direction: column; gap: 8px; } .empty .hint { font-size: 11px; color: var(--muted-2); }