/* ========================================== * Chat Switchboard – Memory UI (v0.18.0) * ========================================== */ /* ── Summary Stats ─────────────────────── */ .memory-summary { display: flex; gap: 16px; margin-bottom: 12px; padding: 10px 0; } .memory-stat { display: flex; flex-direction: column; align-items: center; padding: 10px 20px; background: var(--bg-2); border-radius: 8px; min-width: 80px; } .memory-stat-value { font-size: 1.5rem; font-weight: 600; color: var(--text-1); line-height: 1.2; } .memory-stat-label { font-size: 0.75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; } /* ── Toolbar ───────────────────────────── */ .memory-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .memory-filter-row { display: flex; gap: 8px; } .memory-select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-1); font-size: 0.82rem; min-width: 120px; } .memory-search { flex: 1; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-1); font-size: 0.82rem; } .memory-search::placeholder { color: var(--text-3); } .memory-actions-row { display: flex; gap: 6px; align-items: center; } /* ── Memory List ───────────────────────── */ .memory-list { display: flex; flex-direction: column; gap: 6px; max-height: 400px; overflow-y: auto; padding-right: 4px; } /* ── Memory Card ───────────────────────── */ .memory-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; transition: border-color 0.15s; } .memory-card:hover { border-color: var(--accent); } .memory-card-pending { border-left: 3px solid var(--warning, #f0ad4e); } .memory-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; gap: 8px; } .memory-key { font-weight: 600; font-size: 0.85rem; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .memory-badges { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .memory-scope-badge { font-size: 0.68rem; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 500; } .memory-scope-user { background: var(--accent-dim, #1a3a5c); color: var(--accent-text, #6db3f2); } .memory-scope-persona { background: #3a2a1a; color: #f0ad4e; } .memory-scope-persona_user { background: #2a1a3a; color: #c084fc; } .memory-confidence { font-size: 0.7rem; padding: 1px 5px; border-radius: 4px; font-weight: 500; background: var(--bg-3); color: var(--text-2); } .memory-confidence-high { color: var(--success, #5cb85c); } .memory-confidence-medium { color: var(--warning, #f0ad4e); } .memory-confidence-low { color: var(--text-3); } .memory-owner { font-size: 0.68rem; color: var(--text-3); font-family: monospace; } .memory-card-value { font-size: 0.82rem; color: var(--text-2); line-height: 1.4; margin-bottom: 6px; word-break: break-word; } .memory-card-footer { display: flex; justify-content: space-between; align-items: center; } .memory-date { font-size: 0.7rem; color: var(--text-3); } .memory-card-actions { display: flex; gap: 4px; } /* ── Tiny Action Buttons ───────────────── */ .btn-tiny { padding: 2px 8px; font-size: 0.72rem; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-2); cursor: pointer; line-height: 1.4; transition: background 0.12s, color 0.12s; } .btn-tiny:hover { background: var(--bg-3); color: var(--text-1); } .btn-tiny.btn-approve { color: var(--success, #5cb85c); border-color: var(--success, #5cb85c); } .btn-tiny.btn-approve:hover { background: var(--success, #5cb85c); color: #fff; } .btn-tiny.btn-reject { color: var(--danger, #d9534f); border-color: var(--danger, #d9534f); } .btn-tiny.btn-reject:hover { background: var(--danger, #d9534f); color: #fff; } /* ── Edit Form ─────────────────────────── */ .memory-edit-form { padding: 4px 0; } .memory-edit-form .form-group { margin-bottom: 6px; } .memory-edit-input { width: 100%; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-1); color: var(--text-1); font-size: 0.82rem; font-family: inherit; } .memory-edit-input:focus { outline: none; border-color: var(--accent); } /* ── Persona Memory Section ────────────── */ .memory-persona-section { margin-top: 8px; } .form-divider { border-top: 1px solid var(--border); margin: 10px 0; } .form-section-title { font-size: 0.85rem; font-weight: 600; color: var(--text-2); margin: 0 0 6px; } /* ── Admin Toolbar ─────────────────────── */ .admin-toolbar-label { font-size: 0.82rem; color: var(--text-2); margin-right: auto; } /* ── Responsive ────────────────────────── */ @media (max-width: 640px) { .memory-summary { gap: 8px; } .memory-stat { padding: 8px 12px; } .memory-filter-row { flex-direction: column; } .memory-card-header { flex-direction: column; align-items: flex-start; } }