privateboard 0.1.0

package/public/agent-overlay.css

@@ -0,0 +1,444 @@
+/* ═══════════════════════════════════════════
+   AGENT DETAIL OVERLAY — shared across pages
+   ═══════════════════════════════════════════ */
+
+[data-agent] { cursor: pointer; }
+img[data-agent] { transition: filter 0.15s, outline 0.15s; }
+img[data-agent]:hover { filter: brightness(1.15); }
+
+.agent-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.72);
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  /* Sits above every other floater · the composer picker (9001),
+     agent-profile drawer (9100/9200), adjourn overlay (9400) all
+     should disappear behind this when the user opens an agent intro. */
+  z-index: 9700;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  font-family: var(--mono, "Inter", system-ui, sans-serif);
+}
+.agent-overlay.open {
+  display: flex;
+  animation: agent-fade 0.14s ease-out;
+}
+@keyframes agent-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.agent-card {
+  position: relative;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100vh - 60px);
+  overflow-y: auto;
+  background: var(--panel, #131312);
+  border: 0.5px solid var(--line-strong, #3A3A35);
+  color: var(--text, #C8C5BE);
+  animation: agent-rise 0.18s ease-out;
+  /* Auto-hide scrollbar: thumb is transparent until the pointer is
+     over the card OR the card is actively being scrolled (the
+     .is-scrolling class is toggled by agent-overlay.js on each scroll
+     event with a short trailing timeout). Reserved gutter avoids
+     layout shift when the thumb fades in. */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  scrollbar-gutter: stable;
+  transition: scrollbar-color 0.18s;
+}
+.agent-card:hover,
+.agent-card.is-scrolling { scrollbar-color: var(--text-faint, #3A382F) transparent; }
+.agent-card::-webkit-scrollbar { width: 8px; }
+.agent-card::-webkit-scrollbar-track { background: transparent; }
+.agent-card::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 4px;
+  transition: background 0.18s;
+}
+.agent-card:hover::-webkit-scrollbar-thumb,
+.agent-card.is-scrolling::-webkit-scrollbar-thumb { background: var(--text-faint, #3A382F); }
+.agent-card::-webkit-scrollbar-thumb:hover { background: var(--text-soft, #8E8B83); }
+@keyframes agent-rise {
+  from { transform: translateY(8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+.agent-card::before, .agent-card::after {
+  content: "";
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--lime, #6FB572);
+  pointer-events: none;
+}
+.agent-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
+.agent-card::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }
+
+.agent-classification {
+  background: var(--panel-2, #1A1A18);
+  border-bottom: 0.5px solid var(--line-bright, #2A2A26);
+  padding: 5px 14px;
+  font-size: 9px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--lime, #6FB572);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.agent-classification .right { color: var(--text-faint, #3A382F); letter-spacing: 0.12em; }
+
+.agent-card-head {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 18px 20px 14px;
+  border-bottom: 0.5px dashed var(--line-bright, #2A2A26);
+}
+.agent-card-avatar {
+  width: 68px;
+  height: 68px;
+  background: var(--panel-2, #1A1A18);
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  padding: 5px;
+  display: block;
+  image-rendering: pixelated;
+}
+.agent-card-id .name {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text, #C8C5BE);
+  line-height: 1.1;
+  margin-bottom: 5px;
+  letter-spacing: -0.01em;
+}
+.agent-card-id .role {
+  font-size: 9.5px;
+  color: var(--lime, #6FB572);
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-weight: 700;
+}
+.agent-card-id .handle {
+  font-size: 10.5px;
+  color: var(--text-faint, #3A382F);
+  margin-top: 5px;
+  letter-spacing: 0.04em;
+  font-family: var(--mono);
+}
+.agent-card-close {
+  width: 28px; height: 28px;
+  background: transparent;
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  color: var(--text-dim, #5C5A52);
+  font-size: 14px;
+  cursor: pointer;
+  font-family: var(--mono);
+  align-self: start;
+  transition: all 0.12s;
+}
+.agent-card-close:hover {
+  border-color: var(--lime, #6FB572);
+  color: var(--lime, #6FB572);
+}
+
+.agent-card-body { padding: 16px 20px 8px; }
+
+.agent-block { margin-bottom: 16px; }
+.agent-block-label {
+  font-size: 9.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--text-dim, #5C5A52);
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.agent-block-label::before {
+  content: "";
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  background: var(--lime, #6FB572);
+}
+.agent-block-label .badge {
+  margin-left: auto;
+  font-size: 8.5px;
+  letter-spacing: 0.12em;
+  color: var(--text-faint, #3A382F);
+  font-weight: 600;
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  padding: 1px 6px;
+}
+
+.agent-lens {
+  font-family: var(--sans);
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-soft, #8E8B83);
+  letter-spacing: -0.003em;
+}
+
+/* Model · single-line "Name · Provider" using the same trait-tag
+   palette so it sits visually adjacent to the surrounding blocks. */
+.agent-model-display {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text, #C8C5BE);
+  letter-spacing: 0.02em;
+}
+.agent-model-name {
+  font-weight: 700;
+}
+.agent-model-provider {
+  font-size: 9.5px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-soft, #8E8B83);
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  padding: 2px 7px;
+}
+.agent-model-provider:empty { display: none; }
+
+.agent-traits {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.agent-trait {
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  padding: 3px 8px;
+  font-size: 9.5px;
+  font-family: var(--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--text-soft, #8E8B83);
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* In-room memory · live-notes-style stream of this agent's turns
+   in the current room. Each entry: timestamp + tag chip + body.
+   Newest entry is highlighted; entries past the 8th fade so the eye
+   lands on the most recent. */
+.agent-memory-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 240px;
+  overflow-y: auto;
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  background: var(--bg, #0E0E0D);
+  padding: 4px 10px;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  scrollbar-gutter: stable;
+  transition: scrollbar-color 0.18s;
+}
+.agent-memory-list:hover,
+.agent-memory-list.is-scrolling { scrollbar-color: var(--text-faint, #3A382F) transparent; }
+.agent-memory-list::-webkit-scrollbar { width: 6px; }
+.agent-memory-list::-webkit-scrollbar-track { background: transparent; }
+.agent-memory-list::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+  transition: background 0.18s;
+}
+.agent-memory-list:hover::-webkit-scrollbar-thumb,
+.agent-memory-list.is-scrolling::-webkit-scrollbar-thumb { background: var(--text-faint, #3A382F); }
+.agent-memory-list::-webkit-scrollbar-thumb:hover { background: var(--text-soft, #8E8B83); }
+.agent-note-entry {
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 0.5px dotted rgba(255, 255, 255, 0.035);
+}
+.agent-note-entry:last-child { border-bottom: none; }
+.agent-note-time {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  color: var(--text-faint, #3A382F);
+  letter-spacing: 0.04em;
+  padding-top: 3px;
+}
+.agent-note-body {
+  font-family: var(--sans);
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text-soft, #8E8B83);
+  letter-spacing: -0.003em;
+}
+.agent-note-tag {
+  display: inline-block;
+  font-family: var(--mono);
+  font-size: 8.5px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 1px 5px;
+  margin-right: 6px;
+  vertical-align: 1px;
+  border: 0.5px solid var(--line-bright, #2A2A26);
+  color: var(--text-dim, #5C5A52);
+  background: rgba(0, 0, 0, 0.2);
+}
+.agent-note-tag.t-obs      { color: var(--text-dim, #5C5A52);   border-color: var(--line-bright, #2A2A26); }
+.agent-note-tag.t-insight  { color: var(--lime, #6FB572);       border-color: var(--lime-deep, #2D5532); }
+.agent-note-tag.t-warn     { color: var(--amber, #C99826);      border-color: var(--amber-dim, #5A4519); }
+.agent-note-tag.t-open     { color: var(--text-dim, #5C5A52);   border-color: var(--line-bright, #2A2A26); }
+.agent-note-tag.t-soln     { color: var(--lime, #6FB572);       border-color: var(--lime, #6FB572); background: rgba(111, 181, 114, 0.10); }
+.agent-note-tag.t-crux     { color: var(--amber, #C99826);      border-color: var(--amber, #C99826); background: rgba(181, 149, 96, 0.10); }
+.agent-note-tag.t-origin   { color: var(--text-dim, #5C5A52);   border-color: var(--line-bright, #2A2A26); }
+.agent-note-entry.t-old   .agent-note-body { color: var(--text-dim, #5C5A52); }
+.agent-note-entry.t-old   .agent-note-time { opacity: 0.55; }
+.agent-note-entry.t-fresh { background: linear-gradient(90deg, rgba(111, 181, 114, 0.06), transparent 60%); }
+.agent-note-entry.t-fresh .agent-note-body { color: var(--text, #C8C5BE); }
+.agent-note-entry.t-fresh .agent-note-time { color: var(--lime, #6FB572); }
+
+.agent-memory-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 20px 12px;
+  text-align: center;
+}
+.agent-memory-empty .lock-icon {
+  font-size: 12px;
+  color: var(--text-faint, #3A382F);
+  line-height: 1;
+}
+.agent-memory-empty .lock-text {
+  font-family: var(--sans);
+  font-size: 11.5px;
+  line-height: 1.5;
+  color: var(--text-soft, #8E8B83);
+  letter-spacing: -0.003em;
+  max-width: 320px;
+}
+
+.agent-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px;
+  background: var(--line-bright, #2A2A26);
+  border: 0.5px solid var(--line-bright, #2A2A26);
+}
+.agent-stat {
+  background: var(--panel, #131312);
+  padding: 9px 10px;
+  text-align: center;
+}
+.agent-stat .v {
+  font-family: var(--mono);
+  font-size: 18px;
+  color: var(--lime, #6FB572);
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  line-height: 1;
+}
+.agent-stat .l {
+  font-size: 8.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--text-faint, #3A382F);
+  margin-top: 4px;
+}
+
+.agent-card-foot {
+  border-top: 0.5px solid var(--line-bright, #2A2A26);
+  padding: 12px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--panel-2, #1A1A18);
+}
+.agent-card-foot .meta {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  color: var(--text-faint, #3A382F);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.agent-card-foot .meta .lime { color: var(--lime, #6FB572); }
+.agent-card-cta {
+  text-decoration: none;
+  background: var(--lime, #6FB572);
+  color: var(--bg, #0A0A0A);
+  padding: 7px 12px;
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  border: 0.5px solid var(--lime, #6FB572);
+  cursor: pointer;
+  transition: all 0.12s;
+}
+.agent-card-cta:hover {
+  background: transparent;
+  color: var(--lime, #6FB572);
+}
+
+/* Privacy mode: home / logged-out pages set body[data-agent-mode="public"]
+   to hide personal memory + track-record blocks and swap the CTA. */
+.agent-overlay .public-only { display: none; }
+.agent-overlay.public .private-only { display: none; }
+.agent-overlay.public .public-only { display: revert; }
+
+.agent-locked {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 14px;
+  border: 0.5px dashed var(--lime-dim, #2D5532);
+  background: rgba(111, 181, 114, 0.04);
+}
+.agent-locked .lock-icon {
+  font-size: 22px;
+  color: var(--lime, #6FB572);
+  line-height: 1;
+}
+.agent-locked .lock-text {
+  font-family: var(--sans);
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--text-soft, #8E8B83);
+  letter-spacing: -0.003em;
+}
+.agent-locked .lock-link {
+  color: var(--lime, #6FB572);
+  font-weight: 700;
+  text-decoration: none;
+  font-family: var(--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 10.5px;
+  margin-right: 4px;
+}
+.agent-locked .lock-link:hover { text-decoration: underline; }
+.agent-block-label .locked-badge {
+  color: var(--text-faint, #3A382F);
+  border-color: var(--lime-dim, #2D5532);
+}
+
+@media (max-width: 600px) {
+  .agent-overlay { padding: 12px; }
+  .agent-card-head { grid-template-columns: auto 1fr; gap: 12px; padding: 14px 14px 12px; }
+  .agent-card-close { grid-column: 1 / -1; justify-self: end; }
+  .agent-card-body { padding: 12px 14px 6px; }
+  .agent-card-foot { padding: 10px 14px; flex-direction: column; gap: 8px; align-items: stretch; }
+  .agent-card-foot .meta { text-align: center; }
+}