/* ============================================================
   Phiphygital — Product-UI mockups (real interface fragments)
   ============================================================ */

.mock {
  background: linear-gradient(180deg, oklch(0.21 0.024 264), oklch(0.175 0.02 264));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; position: relative;
}
.mock-glow { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, oklch(0.62 0.17 256 / 0.5), transparent 40%, transparent 60%, oklch(0.62 0.19 290 / 0.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* window chrome */
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: oklch(0.19 0.022 264 / 0.6); }
.mock-dots { display: flex; gap: 6px; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: oklch(0.4 0.03 264); }
.mock-dots i:nth-child(1) { background: oklch(0.65 0.16 25); }
.mock-dots i:nth-child(2) { background: oklch(0.78 0.14 80); }
.mock-dots i:nth-child(3) { background: oklch(0.72 0.16 150); }
.mock-title { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
.mock-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--font-mono); font-size: 0.66rem; color: var(--green); letter-spacing: 0.06em; }
.mock-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s infinite; }

.mock-body { padding: 16px; }

/* Hermes console — channels + event feed */
.console-channels { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chan { display: inline-flex; align-items: center; gap: 7px; font-size: 0.74rem; font-weight: 500; color: var(--ink-2); padding: 6px 11px; border-radius: 8px; background: oklch(0.5 0.04 264 / 0.12); border: 1px solid var(--line-soft); }
.chan svg { width: 13px; height: 13px; color: var(--blue-2); }
.feed { display: flex; flex-direction: column; gap: 9px; }
.feed-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border-radius: 11px; background: oklch(0.5 0.04 264 / 0.08); border: 1px solid var(--line-soft); }
@keyframes feedIn { to { opacity: 1; transform: none; } }
.feed-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.feed-ico svg { width: 15px; height: 15px; }
.fi-blue { background: oklch(0.62 0.17 256 / 0.18); color: var(--blue-2); }
.fi-violet { background: oklch(0.62 0.19 290 / 0.18); color: oklch(0.74 0.16 290); }
.fi-green { background: oklch(0.72 0.17 155 / 0.18); color: var(--green); }
.feed-txt { flex: 1; min-width: 0; }
.feed-txt b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; color: var(--ink); letter-spacing: -0.01em; }
.feed-txt span { font-size: 0.74rem; color: var(--muted); }
.feed-time { font-family: var(--font-mono); font-size: 0.64rem; color: var(--faint); white-space: nowrap; }
.feed-tag { font-family: var(--font-mono); font-size: 0.6rem; padding: 2px 6px; border-radius: 5px; background: oklch(0.62 0.17 256 / 0.16); color: var(--blue-2); letter-spacing: 0.04em; }

/* Chat thread */
.chat { display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 0.84rem; line-height: 1.45; }
.bubble.them { align-self: flex-start; background: oklch(0.26 0.025 264); color: var(--ink-2); border-bottom-left-radius: 4px; }
.bubble.ai { align-self: flex-end; background: var(--grad); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 6px 18px oklch(0.55 0.17 270 / 0.4); }
.bubble .who { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; margin-bottom: 3px; }

/* Pipeline / kanban */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kan-col { background: oklch(0.5 0.04 264 / 0.07); border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px; }
.kan-head { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; justify-content: space-between; }
.kan-head .n { color: var(--blue-2); }
.deal { background: oklch(0.24 0.025 264); border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px; margin-bottom: 7px; }
.deal:last-child { margin-bottom: 0; }
.deal .d-name { font-size: 0.74rem; font-weight: 600; color: var(--ink); }
.deal .d-meta { font-size: 0.64rem; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.deal .d-av { width: 16px; height: 16px; border-radius: 50%; background: var(--grad); flex: none; }

/* Stat chips inside mockups */
.mock-foot { display: flex; gap: 10px; padding: 13px 16px; border-top: 1px solid var(--line-soft); background: oklch(0.18 0.022 264 / 0.5); }
.mfoot-item { flex: 1; }
.mfoot-item b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.02em; }
.mfoot-item span { font-size: 0.66rem; color: var(--muted); }

/* floating accent badge on mockups */
.mock-badge { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; background: oklch(0.2 0.024 264 / 0.92); backdrop-filter: blur(12px); border: 1px solid var(--line-bright); box-shadow: var(--shadow-md); font-size: 0.78rem; font-weight: 600; color: var(--ink); z-index: 3; }
.mock-badge svg { width: 16px; height: 16px; }
.mock-badge .mb-dot { width: 8px; height: 8px; border-radius: 50%; }
@media (max-width: 560px) {
  .kanban { grid-template-columns: 1fr; }
  .kan-col:nth-child(n+2) { display: none; }
}