/* Cosmic orb-companion — Money Lessons guide. All classes namespaced .cmp-* */
.cmp { display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; }

.cmp-orb {
  width:44px; height:44px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 35% 30%, #bfe6ff, #5aa0ff 55%, #2a4a9e 100%);
  box-shadow:0 0 16px rgba(90,160,255,.55), inset 0 0 8px rgba(255,255,255,.35);
  animation:cmp-pulse 3.4s ease-in-out infinite;
}
@keyframes cmp-pulse {
  0%,100% { box-shadow:0 0 14px rgba(90,160,255,.45), inset 0 0 8px rgba(255,255,255,.30); }
  50%     { box-shadow:0 0 22px rgba(90,160,255,.70), inset 0 0 9px rgba(255,255,255,.40); }
}

.cmp-bubble {
  position:relative; flex:1;
  background:var(--panel2,#1b1f29); color:var(--ink,#e7ecf3);
  border-radius:14px; padding:11px 14px; font-size:14px; line-height:1.5;
}
.cmp-bubble::before {
  content:''; position:absolute; left:-6px; top:14px; width:12px; height:12px;
  background:inherit; transform:rotate(45deg); border-radius:2px;
}

.cmp-foot { margin-top:16px; }
.cmp-hint-btn {
  width:100%; background:transparent; border:1px solid var(--line2,#2c313b);
  color:var(--ink2,#aab3c0); border-radius:10px; padding:10px 14px;
  font-size:13px; cursor:pointer;
}
.cmp-hint-btn:hover { border-color:#5aa0ff; color:var(--ink,#e7ecf3); }
.cmp-hint {
  margin-top:10px; background:var(--panel2,#1b1f29); border-left:3px solid #5aa0ff;
  border-radius:8px; padding:11px 14px; font-size:13px; line-height:1.55;
  color:var(--ink2,#c4ccd8);
}

@media (prefers-reduced-motion: reduce) { .cmp-orb { animation:none; } }