/* ===========================================================================
   SchoolNotes v35
   1) chat rich-reply layout (icon bullets, coloured links, cards)
   2) cart badge: hidden at zero and properly anchored
   =========================================================================== */

/* ---- chat rich replies -------------------------------------------------- */
.sn30-bubble.sn30-rich p { margin: 0 0 7px; }
.sn30-bubble.sn30-rich p:last-child { margin-bottom: 0; }
.sn30-bubble.sn30-rich p.sn30-h strong { color: #14335c; }
.sn30-bubble.sn30-rich ul.sn30-list { list-style: none; margin: 6px 0; padding: 0; }
.sn30-bubble.sn30-rich ul.sn30-list li {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 5px 0; font-size: .86rem; line-height: 1.45;
}
.sn30-bubble.sn30-rich ul.sn30-list li i {
  flex: 0 0 16px; margin-top: 3px; font-size: .74rem; color: #1A67C4;
}
.sn30-bubble.sn30-rich ul.sn30-list li:nth-child(2) i { color: #E8A93A; }
.sn30-bubble.sn30-rich ul.sn30-list li:nth-child(3) i { color: #16a34a; }
.sn30-bubble.sn30-rich ul.sn30-list li:nth-child(4) i { color: #db2777; }
.sn30-bubble.sn30-rich ul.sn30-list li:nth-child(5) i { color: #7c3aed; }
.sn30-bubble.sn30-rich a.sn30-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 3px 5px 3px 0; padding: 6px 12px;
  border-radius: 999px; font-weight: 700; font-size: .8rem;
  background: linear-gradient(120deg, #1A67C4, #14335c); color: #fff !important;
  text-decoration: none; box-shadow: 0 6px 14px -8px rgba(20,51,92,.9);
}
.sn30-bubble.sn30-rich a.sn30-link:hover { filter: brightness(1.08); }
.sn30-bubble.sn30-rich a.sn30-link i { font-size: .66rem; opacity: .85; }
.sn30-bubble.sn30-rich strong { color: #0b3f7a; }
.sn30-bubble.sn30-rich i.fas { font-size: .78rem; }

/* ---- cart badge --------------------------------------------------------- */
.app-nav-badge.is-zero,
#hdr-cart-count.is-zero,
#mob-cart-count.is-zero,
.cart-link span.is-zero { display: none !important; }

/* The screenshot bug: the badge floated above the tab bar because it was
   absolutely positioned against the whole nav item. Anchor it to the icon. */
.mobile-app-nav-cart { position: relative; }
.mobile-app-nav-cart .app-nav-badge {
  position: absolute; top: 4px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
  border-radius: 999px; background: #dc2626; color: #fff;
  font-size: .62rem; font-weight: 800; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
@media (max-width: 900px) {
  .mobile-app-nav-cart .app-nav-badge { top: 2px; margin-left: 5px; }
}