/* HelloComp – RGB RAM Notice (2.0) */
.hc-rgbNoticeBar{
  width: 100%;
  box-sizing: border-box;

  margin: 12px 0 14px;
  padding: 12px 14px;

  border-radius: 3px;
  border: 1px solid #ddd;
  background: linear-gradient(#ffffff 50%, #e9eff6);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);

  color: #24324a;
  font-size: 13px;
  line-height: 1.35;
}

.hc-rgbNoticeBar strong{
  font-weight: 700;
}

.hc-rgbNoticeBar .hc-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;

  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;

  /* červené ladění */
  border: 1px solid rgba(220, 38, 38, 0.28);
  color: #991b1b;

  background: rgba(255,255,255,0.75);
  box-shadow: 0 6px 16px rgba(12, 36, 88, 0.10);
  margin-right: 10px;
}

/* Červená tečka + ring pulse (pořád) */
.hc-rgbNoticeBar .hc-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #dc2626;
  display:inline-block;

  position: relative;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22);
  transform: translateZ(0);
}

.hc-rgbNoticeBar .hc-dot::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius: 999px;
  border: 2px solid rgba(220, 38, 38, 0.30);
  opacity: 0;
  transform: scale(0.9);
  animation: hcDotRing 1.1s ease-out infinite;
}

@keyframes hcDotRing{
  0%   { opacity: 0; transform: scale(0.90); }
  35%  { opacity: .55; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.22); }
}

/* respektuj uživatele s omezením animací */
@media (prefers-reduced-motion: reduce){
  .hc-rgbNoticeBar .hc-dot::after{ animation: none; }
}

.hc-rgbNoticeBar .hc-sub{
  opacity: .9;
  margin-top: 6px;
  font-size: 12.5px;
}

/* Mikro poznámka přímo v RAM kartě */
.hc-ramInlineNote{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,0.10);
  font-size: 12px;
  line-height: 1.3;
  color: rgba(36, 50, 74, 0.92);
}

/* RESPONSIVE */
@media (max-width: 520px){
  .hc-rgbNoticeBar{
    padding: 11px 12px;
    border-radius: 3px;
    font-size: 12.8px;
  }

  /* badge na vlastní řádek */
  .hc-rgbNoticeBar .hc-badge{
    margin-right: 0;
    margin-bottom: 8px;
    display: inline-flex;
  }

  .hc-rgbNoticeBar .hc-sub{
    font-size: 12.4px;
  }
}