/* ========================================
   공통 스타일 - 모든 커스텀 말풍선에 적용
   ======================================== */

/* ========================================
   말풍선 기본 스타일 (app.css에서 이동)
   ======================================== */
.member-x-toast-bubble {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 6px 16px 16px 16px;
  padding: 10px 12px;
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 12px 26px rgba(17, 18, 24, 0.18);
  min-width: 180px;
  max-width: 360px;
  cursor: pointer;
  pointer-events: auto;
}

.member-x-toast-bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 16px;
  border-width: 8px 10px 8px 0;
  border-style: solid;
  border-color: transparent rgba(255, 255, 255, 0.96) transparent transparent;
}

.member-x-toast-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

.member-x-toast-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

.member-x-toast-text.is-revealing {
  animation: memberMessageIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* 기본 말풍선 크기 및 여백 */
.member-x-toast-bubble[data-x-username] {
  /* 레이아웃 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* 배경 이미지 공통 설정 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;

  /* 테두리 및 그림자 제거 */
  border: none;
  border-radius: 0;
  box-shadow: none;

  /* 크기 및 여백 */
  padding: 40px 50px 30px 50px;
  min-height: 100px;
  max-width: 480px;
}

/* 기본 삼각형 숨김 */
.member-x-toast-bubble[data-x-username]::after {
  display: none;
}


/* ========================================
   멤버별 커스텀 배경 이미지
   ======================================== */


.member-x-toast-bubble[data-x-username="hanakonana_"] {
  background-image: url('/static/img/bubbles/hanakonana.png');
}

.member-x-toast-bubble[data-x-username="akanelize"] {
  background-image: url('/static/img/bubbles/AkaneLize.png');
}

.member-x-toast-bubble[data-x-username="nenekomashiro"] {
  background-image: url('/static/img/bubbles/nenekomashiro.png');
}

.member-x-toast-bubble[data-x-username="ayatsunoyuni"]{
  background-image: url('/static/img/bubbles/ayatsunoyuni.png');
}

.member-x-toast-bubble[data-x-username="sakihanehuya"]{
  background-image: url('/static/img/bubbles/sakihanehuya.png');
}

.member-x-toast-bubble[data-x-username="shirayukihina_"]{
  background-image: url('/static/img/bubbles/shirayukihina.png');
}

.member-x-toast-bubble[data-x-username="arahashitabi"]{
  background-image: url('/static/img/bubbles/arahashitabi.png');
}

.member-x-toast-bubble[data-x-username="tenkoshibuki"]{
  background-image: url('/static/img/bubbles/tenkoshibuki.png');
  padding: 35px 50px 45px 50px;
}

.member-x-toast-bubble[data-x-username="yuzuhariko"] {
  background-image: url('/static/img/bubbles/yuzuhariko.png');
}

.member-x-toast-bubble[data-x-username="aokumorin"] {
  background-image: url('/static/img/bubbles/aokumorin.png');
}



/* 말풍선 전체 컨테이너 위치 조절 */
.member-page[data-x-username="HanakoNana_"] .member-x-toast-shell {
  --member-bubble-offset-x: -70px;
  --member-bubble-offset-y: -60px;
}

.member-page[data-x-username="Shirayukihina_"] .member-x-toast-shell {
  --member-bubble-offset-x: -60px;
  --member-bubble-offset-y: -80px;
}

.member-page[data-x-username="ArahashiTabi"] .member-x-toast-shell {
  --member-bubble-offset-x: -60px;
  --member-bubble-offset-y: -80px;
}


.member-page[data-x-username="AkaneLize"] .member-x-toast-shell {
  --member-bubble-offset-x: -100px;
  --member-bubble-offset-y: -90px;
}


.member-page[data-x-username="YuzuhaRiko"] .member-x-toast-shell {
  --member-bubble-offset-x: -80px;
  --member-bubble-offset-y: -60px;
}

.member-page[data-x-username="TenkoShibuki"] .member-x-toast-shell {
  --member-bubble-offset-x: -80px;
  --member-bubble-offset-y: -60px;
}

.member-page[data-x-username="AokumoRin"] .member-x-toast-shell {
  --member-bubble-offset-x: -90px;
  --member-bubble-offset-y: -60px;
}


.member-page[data-x-username="NenekoMashiro"] .member-x-toast-shell {
  --member-bubble-offset-x: -90px;
  --member-bubble-offset-y: -60px;
}


.member-page[data-x-username="SakihaneHuya"] .member-x-toast-shell {
  --member-bubble-offset-x: -110px;
  --member-bubble-offset-y: -60px;
}







.member-x-toast-bubble[data-x-username="hanakonana_"]::after {
  display: none; /* Hide default triangle */
}

/* Ensure text is properly styled within the bubble */
.member-x-toast-bubble .member-x-toast-text {
  text-align: center;
  font-size: 0.65rem;  /* 여기서 글씨 크기 조절 */
  /* color: var(--text); */
  line-height: 1.1;
  margin-bottom: 2px;
  overflow: hidden;
  word-break: break-word;  /* 단어 중간에서 안 끊김 */
  white-space: normal;   /* 공백 기준으로 줄바꿈 */

  /* 최대 3줄, 넘으면 ... 표시 */
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 최대 줄 수 (2, 3, 4 등) */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.member-x-toast-bubble .member-x-toast-title {
  text-align: center;
  font-size: 0.5rem;  /* 시간 글씨는 더 작게 */
  /* color: var(--muted); */
  font-weight: 600;
}