/* ============================================================
   PREVIEW-ONLY TWEAKS (marketing screenshot mockup)
   Loaded after launcher.css. Not part of the real AAC Hub.
   ============================================================ */

/* ---- Lavender accent (#C49DFF) across the preview. Status colors stay
   semantic: Live = green, In maintenance = amber, notification = red. ---- */
:root {
  --brand-50:  #F7F3FF;
  --brand-100: #F3ECFF;
  --brand-500: #C49DFF;
  --brand-600: #B98CFF;
  --brand-700: #9260E6;
  --brand-800: #8149DE;
  --brand-900: #6B3BC4;
  --accent:        #C49DFF;
  --accent-hover:  #B98CFF;
  --accent-press:  #9260E6;
  --accent-soft:   #F3ECFF;
  --accent-border: #E6D8FF;
  --live: #2F6B45;
}

/* Narrower sidebar */
:root { --sidebar-w: 202px; }

/* Brand row: larger logo + name, tucked close to the icon, full text always fits */
.ws { gap: 6px; padding: 4px; }
.ws-logo { width: 36px; height: 36px; }
.ws .meta { min-width: 0; }
.ws .meta b { font-size: 15px; letter-spacing: -.2px; white-space: nowrap; overflow: visible; }
.ws .meta .ws-sub { font-size: 11px; white-space: nowrap; overflow: visible; }
/* Keep the brand row identical whether or not the sidebar is hovered (no condense/jump) */
.side:not(:hover) .ws { gap: 6px; padding-left: 4px; padding-right: 4px; justify-content: flex-start; }
.side:not(:hover) .ws-logo { margin: 0; }

/* Slightly more compact app cards */
.grid { gap: 16px; }
.thumb { aspect-ratio: 16 / 8; }
.thumb-brand { width: 50px; height: 50px; border-radius: 14px; }
.card:not(.compact) .meta { padding: 12px 14px 14px; }
.meta .name { font-size: 14px; }
.meta .desc { font-size: 12px; margin-top: 4px; line-height: 1.5; }

/* Positioning context for the top-right notification bubble */
.grid:not(.list) .card { position: relative; }

/* "In maintenance" status pill — same shape as .badge, amber */
.badge.maint {
  background: var(--badge-warning-bg);
  border: .5px solid var(--badge-warning-border);
  color: var(--badge-warning-text);
}
.badge.maint .d { width: 5px; height: 5px; border-radius: 50%; background: var(--badge-warning-text); flex: none; display: inline-block; }

/* Notification bubble — identical pill style to Live / In maintenance, in red, pinned top-right */
.badge.notif {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  background: var(--badge-danger-bg);
  border: .5px solid var(--badge-danger-border);
  color: var(--badge-danger-text);
}

/* Account chip (Jordan Bennett) — compact single row, anchored to the bottom of the
   sidebar and floating just above the edge. Log-out removed so the name fits. */
.side .side-foot,
.side:not(:hover) .side-foot {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: auto 6px 8px;
  border-top: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(60,45,90,.12);
  padding: 6px 8px;
}
.side-foot .profile-tools { display: none; }
.side-foot .profile-id { flex: 1; min-width: 0; gap: 9px; }
.side-foot .profile-id .avatar { width: 30px; height: 30px; flex: none; }
.side-foot .profile-id .who b { font-size: 13px; line-height: 1.25; }
.side-foot .profile-id .who small { font-size: 11px; line-height: 1.2; }