/* Profile tip tab — Figma 27:4140; fonts/tokens เดียวกับ chapter tip + design system */

.profile-page .story-stats-tip-icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  justify-content: center;
  line-height: 0;
  width: 20px;
}

.profile-page .story-stats-tip-icon svg {
  display: block;
  height: 20px;
  width: 20px;
}

body.profile-detail-page .profile-page .profile-tip-section.chapter-tip-banner {
  --profile-tip-surface: var(--Base-bg-base);
  --profile-tip-surface-muted: var(--Background-Brand-subtle);
  --profile-tip-border: var(--Border-Neutral-subtle);
  --profile-tip-brand: var(--Background-Brand-default);
  --profile-tip-brand-strong: var(--Text-Brand-default);
  --profile-tip-text: var(--Text-Neutral-primary);
  --profile-tip-text-muted: var(--Text-Neutral-tertiary);
  --chapter-surface: var(--profile-tip-surface);
  --chapter-surface-muted: var(--profile-tip-surface-muted);
  --chapter-border: var(--profile-tip-border);
  --chapter-border-soft: var(--profile-tip-border);
  --chapter-brand: var(--profile-tip-brand);
  --chapter-brand-strong: var(--profile-tip-brand-strong);
  --chapter-text: var(--profile-tip-text);
  --chapter-text-muted: var(--profile-tip-text-muted);
  --twl-radius-full: 999px;

  background-color: var(--chapter-surface);
  border: none;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  padding: 0;
  position: relative;
}

/* ── Layout ── */
.profile-tip-section__layout.chapter-tip-banner__content {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 1px minmax(240px, 408px);
  padding: 0;
  position: relative;
  width: 100%;
}

/* Collapsed desktop keeps lower rows rendered so the CTA gradient can fade them. */
.profile-tip-section__layout.chapter-tip-banner__content {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.profile-tip-section:not(.is-expanded) .profile-tip-section__layout.chapter-tip-banner__content,
.profile-tip-section:not(.is-expanded) .chapter-tip-banner__content {
  max-height: 408px;
  overflow: hidden;
}

.profile-tip-section.is-expanded .profile-tip-section__layout.chapter-tip-banner__content,
.profile-tip-section.is-expanded .chapter-tip-banner__content {
  max-height: none;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .profile-tip-section__layout.chapter-tip-banner__content {
    transition: none !important;
  }
}

.profile-tip-section .chapter-tip-banner__divider {
  align-self: stretch;
  background: var(--chapter-border-soft);
  display: block;
  height: auto;
  min-height: 408px;
  width: 1px;
}

.profile-tip-section__leaderboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

.profile-tip-section__items {
  min-width: 0;
  width: 100%;
}

/* ── Subtabs (Figma: DB Helv 20px, underline brand) ── */
.profile-tip-section__subtabs {
  display: flex;
  gap: 0;
  width: 100%;
}

.profile-tip-section__mobile-tabs {
  display: none;
}

.profile-tip-section__subtab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--chapter-text);
  cursor: pointer;
  flex: 1 1 0;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 36px;
  padding: 4px 16px;
  text-align: center;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.profile-tip-section__subtab:hover {
  color: var(--chapter-brand-strong);
}

.profile-tip-section__subtab.is-active {
  background: transparent;
  border-bottom-color: var(--Border-Brand-default);
  color: var(--Text-Brand-default);
  font-weight: 700;
}

/* ── Rank rows ── */
.profile-tip-section .chapter-tip-rank-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
}

.profile-tip-section .chapter-tip-rank-item {
  align-items: center;
  border-bottom: none;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 8px;
  position: relative;
  width: 100%;
}

.profile-tip-section .chapter-tip-rank-list .chapter-tip-rank-item ~ .chapter-tip-rank-item {
  border-top: 1px solid var(--chapter-border-soft);
}

/* badge «คุณ» + พื้นหลัง — เฉพาะคนที่ติด top 20 (IsCurrentUser) ไม่อยู่ไม่แสดงแถว */
.profile-tip-section .chapter-tip-rank-item.is-current-user {
  background-color: var(--Background-Brand-subtle);
  border-radius: 8px;
  overflow: hidden;
}

.profile-tip-section .chapter-tip-rank-item__left {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  gap: 16px;
  min-width: 0;
}

.profile-tip-section .chapter-tip-rank-item__order {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  height: 29px;
  justify-content: center;
  overflow: hidden;
  width: 32px;
}

.profile-tip-section .chapter-tip-rank-item__order img {
  display: block;
  height: 29px;
  object-fit: contain;
  width: 32px;
}

.profile-tip-section .chapter-tip-rank-item__index {
  color: var(--chapter-text);
  flex-shrink: 0;
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  min-width: 32px;
  text-align: center;
}

.profile-tip-section .chapter-tip-rank-item__avatar {
  border-radius: 50%;
  flex: 0 0 auto;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.profile-tip-section .chapter-tip-rank-item__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.profile-tip-section .chapter-tip-rank-item__name-row {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

/* Figma: Bai Jamjuree 14/500 */
.profile-tip-section .chapter-tip-rank-item__name {
  color: var(--chapter-text);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-tip-section .chapter-tip-rank-item__badge {
  align-items: center;
  background-color: var(--Background-Brand-default);
  border-radius: 4px;
  color: var(--Base-on-color);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 14px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 20px;
  padding: 4px 8px;
}

/* Figma: Bai Jamjuree 12/700 brand */
.profile-tip-section .chapter-tip-rank-item__coin {
  align-items: center;
  color: var(--chapter-brand-strong);
  display: inline-flex;
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 12px;
  font-weight: 700;
  gap: 2px;
  line-height: 18px;
}

.profile-tip-section .chapter-tip-rank-item__coin img {
  flex-shrink: 0;
  height: 12px !important;
  max-height: 12px;
  max-width: 12px;
  object-fit: contain;
  width: 12px !important;
}

/* Tip counts ขวา — Figma size S: icon 32 + DB Helv 20 */
.profile-tip-rank-item__counts {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: flex-end;
  max-width: 52%;
  min-width: 0;
}

.profile-tip-rank-item__count-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

.profile-tip-section .chapter-tip-count {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  height: 32px;
}

.profile-tip-section .chapter-tip-count img {
  height: 32px;
  object-fit: contain;
  width: 32px;
}

.profile-tip-section .chapter-tip-count__qty {
  align-items: center;
  color: var(--chapter-text-muted);
  display: inline-flex;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.profile-tip-section .chapter-tip-count__x {
  display: inline-block;
  text-align: center;
  width: 8px;
}

.profile-tip-section .chapter-tip-count__n {
  display: inline-block;
}

/* Figma more pill: tertiary bg, disabled text, DB Helv 20 */
.profile-tip-rank-item__more-pill {
  align-items: center;
  background: var(--Border-Neutral-subtle);
  border: none;
  border-radius: var(--twl-radius-full);
  color: var(--Text-Neutral-disabled);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 28px;
  padding: 2px 8px;
}

.profile-tip-rank-item__more-pill:hover,
.profile-tip-rank-item__more-pill:focus-visible {
  color: var(--Text-Neutral-secondary);
}

/* Shared rank +N modal — Figma Tip Modal */
.tip-items-modal { z-index: 100050; }
.tip-items-modal .modal-dialog { max-width: 440px; width: calc(100% - 32px); }
.tip-items-modal .modal-content {
  background: var(--Base-bg-base);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 2px 4px color-mix(in srgb, var(--Text-Neutral-primary) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 32px;
  position: relative;
}
.tip-items-modal__close {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--Icon-Neutral-secondary);
  display: inline-flex;
  font-size: 24px;
  height: 24px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 32px;
  top: 32px;
  width: 24px;
  z-index: 1;
}
.tip-items-modal__close svg {
  display: block;
  height: 24px;
  width: 24px;
}
.tip-items-modal__close svg path {
  fill: none !important;
  stroke: var(--Icon-Neutral-secondary) !important;
}
.tip-items-modal__title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Title-Page-font-family, var(--twl-font-heading));
  font-size: 32px;
  font-weight: 700;
  line-height: 31px;
  margin: 0;
  padding: 0 16px;
  text-align: center;
}
.tip-items-modal__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 20px;
  width: 100%;
}
.tip-items-modal__item {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.tip-items-modal__visual { padding: 10px; position: relative; }
.tip-items-modal__visual img { display: block; height: 48px; object-fit: contain; width: 48px; }
.tip-items-modal__visual span {
  background: var(--Base-bg-base);
  border: 1px solid var(--Border-Neutral-subtle);
  border-radius: 999px;
  bottom: 0;
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 8px;
  position: absolute;
  right: -10px;
  white-space: nowrap;
}
.tip-items-modal__label {
  color: var(--Text-Neutral-primary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.tip-items-modal__cta {
  align-items: center;
  display: flex;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 700;
  justify-content: center;
  line-height: 24px;
  min-height: 44px;
  padding: 10px 24px;
  text-decoration: none;
  width: 100%;
}

.tip-items-modal__cta,
.tip-items-modal__cta:visited,
.tip-items-modal__cta:hover,
.tip-items-modal__cta:focus-visible {
  color: var(--Base-on-color) !important;
  text-decoration: none;
}

/* Story / chapter links */
.profile-tip-rank-item__story-link,
.profile-tip-rank-item__chapter-link {
  align-items: center;
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}

.profile-tip-rank-item__story-link:hover .chapter-tip-rank-item__name,
.profile-tip-rank-item__chapter-link:hover .chapter-tip-rank-item__name {
  color: var(--chapter-brand-strong);
}

.profile-tip-rank-item__cover {
  border-radius: 4px;
  flex: 0 0 auto;
  height: 56px;
  object-fit: cover;
  width: 40px;
}

.profile-tip-rank-item__chapter-icon {
  flex-shrink: 0;
  height: 20px;
  stroke: var(--Icon-Brand-default);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.66667;
  width: 20px;
}

.profile-tip-rank-item__chapter-title-row {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.profile-tip-rank-item__chapter-title-row .chapter-tip-rank-item__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Story title and coin start under chapter title text, after document icon and gap. */
.profile-tip-rank-item__chapter-link .profile-tip-rank-item__story-title,
.profile-tip-rank-item__chapter-link .chapter-tip-rank-item__coin {
  padding-inline-start: 28px;
}

.profile-tip-rank-item__story-name {
  color: var(--chapter-text-muted);
  display: block;
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-tip-section .profile-tip-rank-item__story-title {
  color: var(--chapter-text-muted);
  display: block;
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Right panel gift grid ── */
.profile-tip-section .chapter-tip-banner__section-title {
  color: var(--chapter-text);
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 16px;
  text-align: center;
}

.profile-tip-section .chapter-tip-items-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  width: 100%;
}

.profile-tip-section .chapter-tip-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 96px;
  min-width: 0;
  text-align: center;
  width: 100%;
}

/* gift: ไม่มี bg วงกลม — icon + qty badge ตาม chapter tip */
.profile-tip-section .chapter-tip-item__visual {
  background: transparent;
  border-radius: 0;
  display: inline-block;
  padding: 0;
  position: relative;
}

.profile-tip-section .chapter-tip-item__visual img {
  display: block;
  height: 48px;
  object-fit: contain;
  width: 48px;
}

/* qty badge — DB Helv 20 (ตรง chapter + Figma) */
.profile-tip-section .chapter-tip-item__visual span {
  background-color: var(--Base-bg-base);
  border: 1px solid var(--Border-Neutral-subtle);
  border-radius: var(--twl-radius-full);
  bottom: -9px;
  color: var(--chapter-text-muted);
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  min-width: 32px;
  padding: 2px 8px;
  position: absolute;
  right: -24px;
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}

/* Figma: Bai Jamjuree 14/500 primary */
.profile-tip-section .chapter-tip-item__label {
  color: var(--chapter-text);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  margin-top: 21px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-tip-section .chapter-tip-item.is-empty {
  opacity: 0.3;
}

.profile-tip-section__empty {
  color: var(--chapter-text-muted);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 16px;
  margin: 0;
  padding: 32px 16px;
  text-align: center;
}

/* Empty / error states */
.profile-tip-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 200px;
  padding: 40px 16px;
  text-align: center;
  width: 100%;
}

.profile-tip-empty--section {
  min-height: 280px;
}

.profile-tip-empty__title {
  color: var(--Text-Neutral-primary);
  font-family: var(--Heading-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.profile-tip-empty__desc {
  color: var(--Text-Neutral-tertiary);
  font-family: var(--Body-font-family, var(--twl-font-body));
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
}

.profile-tip-empty__retry {
  background: transparent;
  border: 1px solid var(--Border-Brand-default);
  border-radius: 999px;
  color: var(--Text-Brand-default);
  cursor: pointer;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  padding: 8px 20px;
}

.profile-tip-empty__retry:hover {
  background: var(--Background-Brand-subtle);
}

/* list-only shimmer (สลับ subtab) */
.profile-tip-shimmer--list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  width: 100%;
}

.profile-tip-shimmer--list .profile-tip-shimmer__row:last-child {
  border-bottom: none;
}

/* ── Expand / collapse — ใช้ pattern เดียวกับ chapter tip ── */
/* ปิด ::after เดิมที่ชนกับปุ่ม */
.profile-tip-section::after {
  content: none !important;
  display: none !important;
}

.profile-tip-section .chapter-tip-banner__toggle {
  align-items: center;
  align-self: stretch;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--Base-bg-base) 50%,
    var(--Base-bg-base) 100%
  ) !important;
  border: none;
  color: var(--chapter-brand-strong);
  cursor: pointer;
  display: inline-flex !important;
  font-family: var(--Action-font-family, var(--twl-font-heading));
  font-size: 20px;
  font-weight: 500;
  gap: 2px;
  height: 107px !important;
  justify-content: center;
  line-height: 1;
  margin-top: -107px !important;
  padding: 71px 0 0 !important;
  pointer-events: auto;
  position: relative;
  width: 100%;
  z-index: 5;
}

.profile-tip-section .chapter-tip-banner__toggle i {
  font-size: 20px;
  line-height: 1;
  transform: none;
}

.profile-tip-section.is-expanded .chapter-tip-banner__toggle {
  background: transparent !important;
  height: 32px !important;
  margin-top: 8px !important;
  padding: 8px 0 !important;
}

.profile-tip-section.is-expanded .chapter-tip-banner__toggle i {
  transform: none;
}

/* Main tab active */
.profile-page .blog-comment-content .sub-header-tips a {
  color: inherit;
  text-decoration: none;
}

.profile-page .blog-comment-content .sub-header-tips.active a {
  color: var(--chapter-brand-strong);
}

/* Fanboard setting belongs to fanboard tab only. */
.profile-page .blog-comment-content .profile-fanboard-toggle {
  display: none;
}

.profile-page .blog-comment-content .profile-primary-tabs:has(.sub-header-fanboard.active) + .profile-fanboard-toggle {
  display: flex;
}

/* ── Shimmer loading (lazy tip section) ── */
.profile-tip-shimmer {
  padding: 8px 0 16px;
  width: 100%;
}

.profile-tip-shimmer__layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 1px minmax(240px, 408px);
  width: 100%;
}

.profile-tip-shimmer__divider {
  align-self: stretch;
  background: var(--Border-Neutral-subtle);
  min-height: 280px;
  width: 1px;
}

.profile-tip-shimmer__leaderboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.profile-tip-shimmer__subtabs {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.profile-tip-shimmer__row {
  align-items: center;
  border-bottom: 1px solid var(--Border-Neutral-subtle);
  display: flex;
  gap: 12px;
  min-height: 72px;
  padding: 12px 8px;
}

.profile-tip-shimmer__row:last-child {
  border-bottom: none;
}

.profile-tip-shimmer__row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.profile-tip-shimmer__row-gifts {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.profile-tip-shimmer__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.profile-tip-shimmer__grid {
  display: grid;
  gap: 12px 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
}

.profile-tip-shimmer__grid-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.profile-tip-shimmer__bone {
  background: linear-gradient(
    90deg,
    var(--Border-Neutral-subtle) 0%,
    var(--Base-bg-base) 40%,
    var(--Border-Neutral-subtle) 80%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  display: block;
  animation: profile-tip-shimmer 1.2s ease-in-out infinite;
}

.profile-tip-shimmer__bone--tab {
  height: 20px;
  width: 100%;
}

.profile-tip-shimmer__bone--rank {
  border-radius: 4px;
  flex-shrink: 0;
  height: 28px;
  width: 28px;
}

.profile-tip-shimmer__bone--avatar {
  border-radius: 50%;
  flex-shrink: 0;
  height: 48px;
  width: 48px;
}

.profile-tip-shimmer__bone--name {
  height: 14px;
  max-width: 140px;
  width: 70%;
}

.profile-tip-shimmer__bone--coin {
  height: 12px;
  max-width: 72px;
  width: 40%;
}

.profile-tip-shimmer__bone--gift-sm {
  border-radius: 8px;
  flex-shrink: 0;
  height: 28px;
  width: 28px;
}

.profile-tip-shimmer__bone--title {
  height: 22px;
  margin: 0 auto;
  max-width: 200px;
  width: 60%;
}

.profile-tip-shimmer__bone--gift {
  border-radius: 50%;
  height: 56px;
  width: 56px;
}

.profile-tip-shimmer__bone--label {
  height: 12px;
  width: 48px;
}

@keyframes profile-tip-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-tip-shimmer__bone {
    animation: none;
  }
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .profile-tip-section__layout.chapter-tip-banner__content {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .profile-tip-section .chapter-tip-banner__divider {
    display: none;
  }

  .profile-tip-section:not(.is-expanded) .profile-tip-section__layout.chapter-tip-banner__content,
  .profile-tip-section:not(.is-expanded) .chapter-tip-banner__content {
    max-height: 560px;
  }

  .profile-tip-rank-item__counts {
    max-width: 55%;
  }

  .profile-tip-section__subtab {
    font-size: 16px;
    padding: 4px 8px;
    white-space: normal;
  }

  .profile-tip-shimmer__layout {
    gap: 20px;
    grid-template-columns: 1fr;
  }

  .profile-tip-shimmer__divider {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .profile-tip-section.chapter-tip-banner {
    gap: 24px;
  }
  .profile-tip-section .chapter-tip-banner__toggle {
    display: none !important;
  }

  .profile-tip-section [data-profile-tip-rank-row] {
    display: flex !important;
  }

  .profile-tip-section:not(.is-expanded) .profile-tip-section__layout.chapter-tip-banner__content,
  .profile-tip-section:not(.is-expanded) .chapter-tip-banner__content {
    max-height: none;
    overflow: visible;
  }

  .profile-tip-section__leaderboard > .profile-tip-section__subtabs,
  .profile-tip-section .chapter-tip-banner__divider,
  .profile-tip-section .chapter-tip-banner__section-title {
    display: none;
  }

  .profile-tip-section__mobile-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
  }

  .profile-tip-section__mobile-tabs::-webkit-scrollbar {
    display: none;
  }

  .profile-tip-section__mobile-tabs .profile-tip-section__subtab {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 8px 12px;
    white-space: nowrap;
  }

  .profile-tip-section .profile-tip-section__mobile-hidden {
    display: none;
  }

  .profile-tip-section .chapter-tip-items-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 28px;
  }

  .profile-page .blog-comment-content .profile-primary-tabs {
    gap: 0;
    width: 100%;
  }

  .profile-page .blog-comment-content .profile-primary-tabs .sub-header {
    flex: 1 1 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
    text-align: center;
  }

  .profile-page .blog-comment-content .profile-primary-tabs .sub-header a {
    display: block;
    padding-inline: 4px;
    white-space: nowrap;
  }

  .tip-items-modal .modal-content {
    padding: 24px 16px;
  }

  .tip-items-modal__close {
    right: 20px;
    top: 24px;
  }

  .tip-items-modal__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
  }

  .profile-tip-rank-item__counts {
    max-width: 44%;
  }

  .profile-tip-section .chapter-tip-count img {
    height: 28px;
    width: 28px;
  }

  .profile-tip-section .chapter-tip-count__qty {
    font-size: 16px;
  }

  .profile-tip-rank-item__more-pill {
    font-size: 16px;
  }

  .profile-tip-section .chapter-tip-rank-item {
    gap: 4px;
    padding: 10px 4px;
  }

  .profile-tip-section .chapter-tip-rank-item__left {
    gap: 8px;
  }

  .profile-tip-section .chapter-tip-rank-item__avatar {
    height: 40px;
    width: 40px;
  }

  .profile-tip-section .site-profile-avatar--large {
    --site-profile-avatar-frame-gap: 4px;
    --site-profile-avatar-size: 40px;
  }

  .profile-tip-section__subtab {
    font-size: 14px;
    padding: 4px;
  }
}