/* ============================================================
   App-Mock Stylesheet
   ----------------------------------------------------------------
   Inline HTML/CSS reproductions of Siftable's product surfaces,
   used in marketing pages instead of PNG screenshots. All styles
   are scoped under `.app-mock` so they never leak into or
   conflict with `.exf-marketing` site styles.

   Why mocks instead of PNGs:
     • No re-shooting when the app changes — edit CSS instead.
     • No anonymization tax — every label is mock data by design.
     • Instant render (no PNG waterfall, no CDN cost).
     • Crisp at any DPI; PNGs were blurring on retina.

   Authoring rules:
     • Only mock-realistic data — never paste real keys, names,
       customers, or PII into a mock.
     • Use the real app's tokens (black surface, mint accent,
       mono for keys/slugs, pill chips). Don't invent new colors.
     • Keep mocks decorative: no JS, no onclick, no real links.
     • Mark wrappers with aria-hidden="true" since the proof-point
       heading already describes the surface for screen readers.

   Layout assumption:
     • Mocks live inside `.browser-frame__body` which has an
       aspect-ratio of 19/10. Mocks fit that frame.
   ============================================================ */

/* ----- 0. Scope reset & base ------------------------------- */
.app-mock,
.app-mock *,
.app-mock *::before,
.app-mock *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.app-mock {
  --m-bg:        #050507;
  --m-surface:   #0a0a0d;
  --m-surface-2: #111116;
  --m-surface-3: #16161d;
  --m-border:    rgba(255, 255, 255, 0.06);
  --m-border-strong: rgba(255, 255, 255, 0.10);
  --m-text:      #e8e4df;
  --m-text-2:    #8a8a9a;
  --m-text-dim:  #5a5a6a;

  --m-mint:      #00e4a8;
  --m-mint-dim:  rgba(0, 228, 168, 0.10);
  --m-mint-line: rgba(0, 228, 168, 0.30);
  --m-blue:      #5b8def;
  --m-blue-dim:  rgba(91, 141, 239, 0.12);
  --m-amber:     #f5a623;
  --m-amber-dim: rgba(245, 166, 35, 0.10);
  --m-coral:     #ff6b5a;
  --m-coral-dim: rgba(255, 107, 90, 0.12);
  --m-purple:    #8b5cf6;
  --m-purple-dim: rgba(139, 92, 246, 0.12);

  --m-font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --m-font-display: 'Comfortaa', 'Poppins', -apple-system, sans-serif;
  --m-font-mono:    'IBM Plex Mono', 'Geist Mono', ui-monospace, monospace;

  position: absolute;
  inset: 0;
  background: var(--m-bg);
  color: var(--m-text);
  font-family: var(--m-font-body);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  /* Container query so mocks scale uniformly inside the 19:10 frame */
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* All sizing inside is in cqw so mocks always fit their frame */
.app-mock {
  /* default scale: full-bleed at 19:10 */
}

.app-mock * { font-family: inherit; }

/* ----- 1. Top nav (shared by all surfaces) ----------------- */
.app-mock__nav {
  display: flex;
  align-items: center;
  height: 7.4cqw;
  padding: 0 2.6cqw;
  border-bottom: 1px solid var(--m-border);
  gap: 2cqw;
  font-size: 1.2cqw;
}

.app-mock__brand {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: 1.55cqw;
  color: var(--m-text);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.app-mock__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2cqw;
  height: 2.2cqw;
  border-radius: 6px;
  background: rgba(0, 228, 168, 0.06);
  color: var(--m-mint);
  font-family: var(--m-font-mono);
  font-size: 1.1cqw;
  font-weight: 500;
}

.app-mock__workspace {
  display: inline-flex;
  align-items: center;
  gap: 0.4cqw;
  padding: 0.45cqw 0.9cqw;
  border: 1px solid var(--m-mint-line);
  border-radius: 999px;
  font-size: 1.05cqw;
  color: var(--m-text);
  background: var(--m-mint-dim);
}

.app-mock__workspace::before {
  content: "";
  width: 0.45cqw;
  height: 0.45cqw;
  border-radius: 50%;
  background: var(--m-mint);
}

.app-mock__nav-links {
  display: flex;
  gap: 1.6cqw;
  align-items: center;
  margin-left: 0.8cqw;
}

.app-mock__nav-link {
  color: var(--m-text-2);
  font-size: 1.15cqw;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
  padding: 0.3cqw 0;
}

.app-mock__nav-link.is-active {
  color: var(--m-text);
  font-weight: 500;
}

.app-mock__nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.6cqw;
  height: 1px;
  background: var(--m-mint);
}

.app-mock__nav-spacer { flex: 1; }

.app-mock__search {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.45cqw 0.9cqw;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--m-border);
  color: var(--m-text-dim);
  font-size: 1.1cqw;
  min-width: 12cqw;
}

.app-mock__search-kbd {
  margin-left: auto;
  padding: 0.1cqw 0.45cqw;
  border: 1px solid var(--m-border);
  border-radius: 4px;
  font-family: var(--m-font-mono);
  font-size: 0.95cqw;
  color: var(--m-text-2);
}

.app-mock__credits {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.4cqw 0.8cqw;
  border: 1px solid var(--m-mint-line);
  border-radius: 999px;
  background: var(--m-mint-dim);
  font-size: 1.1cqw;
  color: var(--m-mint);
  font-weight: 500;
}

.app-mock__credits-buy {
  padding: 0.15cqw 0.55cqw;
  border-radius: 999px;
  background: var(--m-mint);
  color: #04140e;
  font-size: 0.95cqw;
  font-weight: 600;
}

.app-mock__nav-utility {
  display: flex;
  gap: 1.4cqw;
  align-items: center;
  font-size: 1.1cqw;
  color: var(--m-text-2);
}

/* ----- 2. Pills, chips, generic atoms ---------------------- */
.app-mock__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35cqw;
  padding: 0.18cqw 0.7cqw;
  border-radius: 999px;
  font-size: 0.95cqw;
  font-family: var(--m-font-mono);
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.app-mock__pill--mint   { background: var(--m-mint-dim);   color: var(--m-mint);   border: 1px solid var(--m-mint-line); }
.app-mock__pill--blue   { background: var(--m-blue-dim);   color: var(--m-blue);   border: 1px solid rgba(91,141,239,0.30); }
.app-mock__pill--amber  { background: var(--m-amber-dim);  color: var(--m-amber);  border: 1px solid rgba(245,166,35,0.30); }
.app-mock__pill--coral  { background: var(--m-coral-dim);  color: var(--m-coral);  border: 1px solid rgba(255,107,90,0.30); }
.app-mock__pill--purple { background: var(--m-purple-dim); color: var(--m-purple); border: 1px solid rgba(139,92,246,0.30); }
.app-mock__pill--ghost  { background: rgba(255,255,255,0.03); color: var(--m-text-2); border: 1px solid var(--m-border); font-family: var(--m-font-body); }

.app-mock__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0.55cqw 1cqw;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--m-border-strong);
  color: var(--m-text);
  font-size: 1.05cqw;
  font-weight: 500;
  white-space: nowrap;
}

.app-mock__btn--mint {
  background: var(--m-mint-dim);
  border-color: var(--m-mint-line);
  color: var(--m-mint);
}

.app-mock__btn--primary {
  background: var(--m-mint);
  border-color: var(--m-mint);
  color: #04140e;
}

/* ----- 3. Vault surface ----------------------------------- */
.app-mock--vault .app-mock__body {
  padding: 2.2cqw 2.6cqw;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
}

.app-mock__page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4cqw;
}

.app-mock__page-title {
  display: flex;
  align-items: center;
  gap: 1cqw;
}

.app-mock__page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 8px;
  background: var(--m-mint-dim);
  color: var(--m-mint);
  font-size: 1.4cqw;
}

.app-mock__page-title h1 {
  font-family: var(--m-font-display);
  font-size: 2.2cqw;
  font-weight: 600;
  color: var(--m-text);
  letter-spacing: -0.01em;
  line-height: 1;
}

.app-mock__page-title small {
  display: block;
  margin-top: 0.3cqw;
  color: var(--m-text-2);
  font-size: 1cqw;
}

.app-mock__page-actions {
  display: flex;
  gap: 0.7cqw;
  align-items: center;
}

.app-mock__searchbar {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0.8cqw 1.1cqw;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  color: var(--m-text-dim);
  font-size: 1.1cqw;
}

.app-mock__searchbar-icon { opacity: 0.6; }

.app-mock__filter {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5cqw;
  padding: 0.6cqw 0.9cqw;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  font-size: 1.05cqw;
  color: var(--m-text-2);
  white-space: nowrap;
}

.app-mock__searchrow {
  display: flex;
  gap: 0.7cqw;
  align-items: stretch;
}

.app-mock__searchrow .app-mock__searchbar { flex: 1; }

.app-mock__table {
  display: flex;
  flex-direction: column;
}

.app-mock__table-head,
.app-mock__table-row {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr;
  align-items: center;
  gap: 1cqw;
  padding: 0.95cqw 1.1cqw;
}

.app-mock__table-head {
  border-bottom: 1px solid var(--m-border);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-text-dim);
  font-family: var(--m-font-mono);
  font-size: 0.85cqw;
  padding-top: 0.55cqw;
  padding-bottom: 0.55cqw;
}

.app-mock__table-row + .app-mock__table-row {
  border-top: 1px solid rgba(255,255,255,0.03);
}

.app-mock__key {
  display: flex;
  align-items: center;
  gap: 0.85cqw;
  min-width: 0;
}

.app-mock__key-icon {
  flex-shrink: 0;
  width: 2cqw;
  height: 2cqw;
  border-radius: 6px;
  background: var(--m-mint-dim);
  color: var(--m-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05cqw;
}

.app-mock__key-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-mock__key-name strong {
  font-size: 1.15cqw;
  font-weight: 500;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-mock__key-name span {
  font-family: var(--m-font-mono);
  font-size: 1cqw;
  color: var(--m-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-mock__cell-muted { color: var(--m-text-2); font-size: 1.05cqw; }
.app-mock__cell-dim   { color: var(--m-text-dim); font-size: 1.05cqw; font-style: italic; }

/* ----- 4. Calendar surface -------------------------------- */
.app-mock--calendar .app-mock__body {
  display: grid;
  grid-template-columns: 14cqw 1fr 18cqw;
  gap: 0;
  height: calc(100% - 7.4cqw);
}

.app-mock__inbox {
  border-right: 1px solid var(--m-border);
  padding: 1.4cqw 1.2cqw;
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
  overflow: hidden;
}

.app-mock__inbox-header {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  font-family: var(--m-font-mono);
  font-size: 0.95cqw;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m-text-dim);
}

.app-mock__inbox-hint {
  font-size: 1cqw;
  color: var(--m-text-dim);
  line-height: 1.4;
  margin-bottom: 0.4cqw;
}

.app-mock__task-card {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.7cqw 0.8cqw;
  border: 1px solid var(--m-border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}

.app-mock__task-card-grip {
  color: var(--m-text-dim);
  font-size: 0.95cqw;
  letter-spacing: 0.05em;
}

.app-mock__task-card-body { flex: 1; min-width: 0; }
.app-mock__task-card-title {
  font-size: 1.05cqw;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-mock__task-card-meta {
  font-size: 0.9cqw;
  color: var(--m-text-dim);
  font-family: var(--m-font-mono);
  margin-top: 0.15cqw;
}

.app-mock__task-card-dot {
  width: 0.55cqw;
  height: 0.55cqw;
  border-radius: 50%;
  background: var(--m-mint);
  flex-shrink: 0;
}

.app-mock__cal-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-mock__cal-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 1cqw 1.2cqw;
  border-bottom: 1px solid var(--m-border);
}

.app-mock__seg {
  display: inline-flex;
  border: 1px solid var(--m-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 1cqw;
}

.app-mock__seg-item {
  padding: 0.4cqw 0.9cqw;
  color: var(--m-text-2);
  font-weight: 500;
}

.app-mock__seg-item.is-active {
  background: rgba(255,255,255,0.05);
  color: var(--m-text);
}

.app-mock__cal-title {
  margin-left: auto;
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: 1.4cqw;
  color: var(--m-text);
}

.app-mock__cal-pager {
  display: inline-flex;
  align-items: center;
  gap: 0.4cqw;
}

.app-mock__cal-iconbtn {
  width: 2cqw;
  height: 2cqw;
  border-radius: 999px;
  background: var(--m-mint-dim);
  color: var(--m-mint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1cqw;
}

.app-mock__cal-grid {
  display: grid;
  grid-template-columns: 2.4cqw repeat(7, 1fr);
  flex: 1;
  min-height: 0;
  background: var(--m-bg);
}

.app-mock__cal-grid-head {
  display: contents;
}

.app-mock__cal-day-head {
  text-align: center;
  font-size: 1.05cqw;
  color: var(--m-text-2);
  padding: 0.7cqw 0;
  border-bottom: 1px solid var(--m-border);
  font-weight: 500;
}

.app-mock__cal-day-head.is-today {
  background: #4ec3d9;
  color: #04141a;
  font-weight: 700;
}

.app-mock__cal-cell.is-today-col,
.app-mock__cal-grid > .app-mock__cal-cell:nth-child(8n + 4) {
  background: rgba(78, 195, 217, 0.06);
}

.app-mock__cal-rowlabel,
.app-mock__cal-cell {
  border-bottom: 1px solid rgba(255,255,255,0.03);
  border-right: 1px solid rgba(255,255,255,0.03);
  font-size: 0.95cqw;
  color: var(--m-text-dim);
  position: relative;
}

.app-mock__cal-rowlabel {
  font-family: var(--m-font-mono);
  text-align: right;
  padding: 0.3cqw 0.4cqw 0 0;
  border-right: 1px solid var(--m-border);
}

.app-mock__cal-event {
  position: absolute;
  left: 6%;
  right: 6%;
  background: rgba(91, 141, 239, 0.20);
  border-left: 2px solid var(--m-blue);
  border-radius: 4px;
  padding: 0.3cqw 0.4cqw;
  font-size: 0.8cqw;
  color: #cfdcff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-mock__cal-event--mint {
  background: rgba(0, 228, 168, 0.18);
  border-left-color: var(--m-mint);
  color: #b9f5e1;
}

.app-mock__cal-now {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--m-coral);
  z-index: 2;
}

.app-mock__cal-now::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.25cqw;
  width: 0.5cqw;
  height: 0.5cqw;
  border-radius: 50%;
  background: var(--m-coral);
}

.app-mock__assist {
  border-left: 1px solid var(--m-border);
  display: flex;
  flex-direction: column;
  padding: 1.2cqw 1.1cqw;
  gap: 1cqw;
  overflow: hidden;
}

.app-mock__assist-card {
  border: 1px solid var(--m-mint-line);
  background: var(--m-mint-dim);
  border-radius: 10px;
  padding: 0.8cqw 1cqw;
  display: flex;
  align-items: center;
  gap: 0.6cqw;
}

.app-mock__assist-card strong {
  font-size: 1.05cqw;
  color: var(--m-text);
  display: block;
}
.app-mock__assist-card span {
  font-size: 0.95cqw;
  color: var(--m-text-2);
}

.app-mock__assist-header {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  font-family: var(--m-font-mono);
  font-size: 0.95cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-mint);
}

.app-mock__assist-sub {
  font-size: 0.95cqw;
  color: var(--m-text-dim);
  font-family: var(--m-font-mono);
}

.app-mock__bubble {
  border: 1px solid var(--m-border);
  border-radius: 10px;
  padding: 0.9cqw 1cqw;
  background: rgba(255,255,255,0.02);
  font-size: 1.0cqw;
  line-height: 1.45;
  color: var(--m-text);
}

.app-mock__assist-input {
  margin-top: auto;
  border: 1px solid var(--m-border);
  border-radius: 10px;
  padding: 0.7cqw 0.85cqw;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
  min-width: 0;
}

.app-mock__assist-input > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.app-mock__assist-input-row {
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  font-size: 0.9cqw;
  color: var(--m-text-dim);
  flex-wrap: wrap;
}

/* ----- 5. Home / Dashboard surface ------------------------ */
.app-mock--home .app-mock__body {
  padding: 2.4cqw 3cqw 2cqw;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
}

.app-mock__greeting {
  font-family: var(--m-font-display);
  font-size: 3.2cqw;
  font-weight: 600;
  color: var(--m-text);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.app-mock__date {
  font-family: var(--m-font-mono);
  font-size: 1cqw;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m-mint);
  margin-top: 0.3cqw;
}

.app-mock__greet-sub {
  color: var(--m-text-2);
  font-size: 1.15cqw;
  margin-top: 0.2cqw;
}

.app-mock__askbar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.05cqw 1.4cqw;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  color: var(--m-text-dim);
  font-size: 1.2cqw;
}

.app-mock__askbar-spark {
  color: var(--m-mint);
  font-size: 1.2cqw;
}

.app-mock__chips {
  display: flex;
  gap: 0.6cqw;
  flex-wrap: wrap;
}

.app-mock__chip {
  padding: 0.4cqw 0.95cqw;
  border-radius: 999px;
  background: rgba(91, 141, 239, 0.10);
  border: 1px solid rgba(91, 141, 239, 0.30);
  color: #b8caff;
  font-size: 1.05cqw;
}

.app-mock__chip--mint {
  background: var(--m-mint-dim);
  border-color: var(--m-mint-line);
  color: var(--m-mint);
}

.app-mock__priority {
  border: 1px solid var(--m-mint-line);
  background: linear-gradient(180deg, rgba(0,228,168,0.06), rgba(0,228,168,0.01));
  border-radius: 12px;
  padding: 1.1cqw 1.3cqw;
}

.app-mock__priority-label {
  font-family: var(--m-font-mono);
  font-size: 0.95cqw;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--m-mint);
}

.app-mock__priority-title {
  margin-top: 0.4cqw;
  font-family: var(--m-font-display);
  font-size: 1.5cqw;
  font-weight: 500;
  color: var(--m-text);
  letter-spacing: -0.01em;
}

.app-mock__home-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 1.2cqw;
}

.app-mock__panel {
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: 1cqw 1.2cqw;
  background: rgba(255,255,255,0.02);
}

.app-mock__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--m-font-mono);
  font-size: 0.95cqw;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--m-text-dim);
  margin-bottom: 0.7cqw;
}

.app-mock__panel-link { color: var(--m-mint); }

.app-mock__row {
  display: flex;
  align-items: flex-start;
  gap: 0.7cqw;
  padding: 0.45cqw 0;
  font-size: 1.05cqw;
  color: var(--m-text);
}

.app-mock__row-time {
  width: 4cqw;
  flex-shrink: 0;
  font-family: var(--m-font-mono);
  color: var(--m-text-dim);
  font-size: 0.95cqw;
  padding-top: 0.1cqw;
}

.app-mock__row-bullet {
  width: 0.5cqw;
  height: 0.5cqw;
  border-radius: 50%;
  background: var(--m-mint);
  flex-shrink: 0;
  margin-top: 0.55cqw;
}

.app-mock__row-tag {
  flex-shrink: 0;
  font-family: var(--m-font-mono);
  font-size: 0.8cqw;
  letter-spacing: 0.06em;
  padding: 0.15cqw 0.55cqw;
  border-radius: 4px;
  text-transform: uppercase;
}

.app-mock__row-tag--now    { background: rgba(255,107,90,0.15); color: var(--m-coral); }
.app-mock__row-tag--today  { background: var(--m-amber-dim); color: var(--m-amber); }

.app-mock__row-text {
  flex: 1;
  font-size: 1.0cqw;
  line-height: 1.4;
  color: var(--m-text);
}

/* ----- 6. Chat surface ------------------------------------ */
.app-mock--chat .app-mock__body {
  display: grid;
  grid-template-columns: 14cqw 1fr;
  height: calc(100% - 7.4cqw);
}

.app-mock__chat-list {
  border-right: 1px solid var(--m-border);
  padding: 1cqw 0.8cqw;
  display: flex;
  flex-direction: column;
  gap: 0.45cqw;
  overflow: hidden;
}

.app-mock__chat-list-head {
  font-family: var(--m-font-mono);
  font-size: 0.95cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-text-dim);
  padding: 0.4cqw 0.4cqw 0.6cqw;
}

.app-mock__chat-item {
  padding: 0.5cqw 0.6cqw;
  border-radius: 6px;
  font-size: 1cqw;
  color: var(--m-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-mock__chat-item.is-active {
  background: rgba(255,255,255,0.05);
  color: var(--m-text);
  border-left: 2px solid var(--m-mint);
  padding-left: 0.4cqw;
}

.app-mock__chat-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-mock__chat-scroll {
  flex: 1;
  padding: 1.6cqw 2cqw;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  overflow: hidden;
}

.app-mock__msg {
  max-width: 88%;
  font-size: 1.05cqw;
  line-height: 1.55;
  color: var(--m-text);
}

.app-mock__msg--user {
  align-self: flex-end;
  background: rgba(91,141,239,0.10);
  border: 1px solid rgba(91,141,239,0.25);
  border-radius: 12px 12px 4px 12px;
  padding: 0.8cqw 1cqw;
}

.app-mock__msg--ai {
  background: rgba(0, 228, 168, 0.06);
  border: 1px solid var(--m-mint-line);
  border-radius: 12px 12px 12px 4px;
  padding: 1cqw 1.2cqw;
}

.app-mock__msg--ai h4 {
  font-family: var(--m-font-display);
  font-size: 1.2cqw;
  font-weight: 600;
  color: var(--m-text);
  margin-bottom: 0.5cqw;
}

.app-mock__msg--ai ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45cqw;
}

.app-mock__msg--ai li {
  position: relative;
  padding-left: 1.2cqw;
  color: var(--m-text);
}

.app-mock__msg--ai li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--m-mint);
  font-family: var(--m-font-mono);
}

.app-mock__msg--ai li strong { color: var(--m-mint); font-weight: 500; }

.app-mock__chat-input {
  border-top: 1px solid var(--m-border);
  padding: 1cqw 1.4cqw;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  background: rgba(255,255,255,0.02);
  font-size: 1.05cqw;
  color: var(--m-text-dim);
}

.app-mock__chat-input-input {
  flex: 1;
  padding: 0.55cqw 0.9cqw;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--m-border);
}

.app-mock__chat-input-model {
  display: inline-flex;
  align-items: center;
  gap: 0.35cqw;
  padding: 0.35cqw 0.7cqw;
  border-radius: 999px;
  background: var(--m-mint-dim);
  border: 1px solid var(--m-mint-line);
  color: var(--m-mint);
  font-family: var(--m-font-mono);
  font-size: 0.9cqw;
}

/* ----- 7. Knowledge / Dataset surface --------------------- */
.app-mock--knowledge .app-mock__body {
  display: grid;
  grid-template-columns: 22cqw 1fr;
  height: calc(100% - 7.4cqw);
}

.app-mock__sidebar {
  border-right: 1px solid var(--m-border);
  padding: 1.4cqw 1.2cqw;
  display: flex;
  flex-direction: column;
  gap: 0.9cqw;
  overflow: hidden;
}

.app-mock__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6cqw;
}

.app-mock__sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  font-family: var(--m-font-display);
  font-size: 1.4cqw;
  font-weight: 600;
}

.app-mock__sidebar-title-icon { color: var(--m-purple); font-size: 1.3cqw; }

.app-mock__sidebar-new {
  padding: 0.35cqw 0.7cqw;
  border-radius: 6px;
  background: var(--m-purple-dim);
  border: 1px solid rgba(139,92,246,0.30);
  color: var(--m-purple);
  font-size: 0.95cqw;
  white-space: nowrap;
}

.app-mock__sidebar-search {
  padding: 0.55cqw 0.85cqw;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  color: var(--m-text-dim);
  font-size: 1cqw;
}

.app-mock__sidebar-filters {
  display: flex;
  gap: 0.5cqw;
}

.app-mock__sidebar-filters > * {
  flex: 1;
  padding: 0.4cqw 0.6cqw;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--m-border);
  font-size: 0.95cqw;
  color: var(--m-text-2);
}

.app-mock__note-card {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 0.85cqw 0.4cqw;
  display: flex;
  flex-direction: column;
  gap: 0.35cqw;
}

.app-mock__note-card-title {
  font-size: 1.0cqw;
  font-weight: 500;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-mock__note-card-meta {
  display: flex;
  gap: 0.55cqw;
  align-items: center;
}

.app-mock__note-card-meta time {
  font-family: var(--m-font-mono);
  font-size: 0.85cqw;
  color: var(--m-text-dim);
}

.app-mock__note-card-preview {
  font-size: 0.9cqw;
  color: var(--m-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--m-font-mono);
}

.app-mock__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  color: var(--m-text-dim);
  font-size: 1.1cqw;
  padding: 2cqw;
  text-align: center;
}

.app-mock__empty-icon {
  width: 4cqw;
  height: 4cqw;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2cqw;
  opacity: 0.7;
}

/* ----- 8. Projects surface -------------------------------- */
.app-mock--projects .app-mock__body {
  display: grid;
  grid-template-columns: 22cqw 1fr;
  height: calc(100% - 7.4cqw);
}

.app-mock__proj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4cqw;
}

.app-mock__proj-tab {
  padding: 0.3cqw 0.7cqw;
  border-radius: 6px;
  font-size: 0.95cqw;
  color: var(--m-text-2);
  border: 1px solid transparent;
}

.app-mock__proj-tab.is-active {
  background: rgba(255,255,255,0.04);
  border-color: var(--m-border);
  color: var(--m-text);
}

.app-mock__proj-count {
  font-size: 0.95cqw;
  color: var(--m-text-dim);
  font-family: var(--m-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4cqw 0;
  border-bottom: 1px solid var(--m-border);
}

.app-mock__proj-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.6cqw;
  padding: 0.8cqw 0.4cqw;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.app-mock__proj-card-title {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  font-size: 1.05cqw;
  color: var(--m-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-mock__proj-card-emoji { font-size: 1.1cqw; }

.app-mock__proj-card-desc {
  grid-column: 1 / -1;
  font-size: 0.9cqw;
  color: var(--m-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----- 9. Responsive: keep mocks legible on small frames -- */
@media (max-width: 720px) {
  .app-mock { font-size: 11px; }
}

/* ----- 10. Browser frame override for mocks --------------- */
.browser-frame__body:has(.app-mock) {
  background: var(--m-bg, #050507);
  position: relative;
}