/* ログアウト導線の幸せメッセージ(Figma: message)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * 本文 SP: guest/desc/sp 12px / PC: guest/desc/pc 14px
 * 日付 SP: guest/note/sp 10px / PC: guest/note/pc 12px
 *
 * SPをベースに、1080px以上でPCへ切り替える。 */
.guest-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  font-family: var(--guest-font-family);
}

.guest-message__meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* アイコン。丸形を維持。画像未指定時は単色プレースホルダー。 */
.guest-message__avatar {
  flex: none;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 40px;
  object-fit: cover;
  background: #C1C6EF;
}

img.guest-message__avatar {
  background: transparent;
}

/* 女性(gender_type=female)。プレースホルダー時の背景と性別の文字がピンク系になる。
 *
 * この4色(男性 #C1C6EF/#8690DF、女性 #F9C1D9/#F17EAF)だけは tokens.css を参照せず
 * 生の値で書いている。Figmaのカラーパレット(グローバルコレクション)にもguestの
 * セマンティックにも存在せず、ノード側で直接指定されているため。
 * デザインシステムに取り込むべきか確認待ち。 */
.guest-message--female .guest-message__avatar {
  background: #F9C1D9;
}

.guest-message--female img.guest-message__avatar {
  background: transparent;
}

.guest-message__profile {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  white-space: nowrap;
}

.guest-message__gender {
  color: #8690DF;
}

.guest-message--female .guest-message__gender {
  color: #F17EAF;
}

.guest-message__age {
  color: var(--guest-color-text-default);
}

/* 吹き出し。左上のみ角丸なし */
.guest-message__bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 16px 16px 8px;
  border-radius: 0 12px 12px 12px;
  /* gradation/pale-orange */
  background: linear-gradient(172deg, var(--color-neutral-0) 7.1429%, var(--color-orange-25) 92.857%);
  box-sizing: border-box;
}

.guest-message__text {
  margin: 0;
  width: 100%;
  color: var(--guest-color-text-mid-brown);
  font-size: var(--guest-font-size-xs);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  word-break: break-word;
}

.guest-message__date {
  margin: 0;
  width: 100%;
  color: var(--guest-color-text-default);
  font-size: var(--guest-font-size-2xs);
  font-weight: var(--guest-font-weight-regular);
  line-height: var(--guest-line-height-body);
  text-align: right;
}

@media (min-width: 1080px) {
  .guest-message {
    flex-direction: row;
    gap: 16px;
  }

  /* PCはアイコンの下に性別/年代が来る */
  .guest-message__meta {
    flex-direction: column;
    gap: 4px;
  }

  .guest-message__avatar {
    width: 48px;
    height: 48px;
  }

  .guest-message__profile {
    align-items: flex-start;
    justify-content: center;
    font-size: var(--guest-font-size-sm);
  }

  .guest-message__bubble {
    flex: 1 0 0;
    min-width: 1px;
    gap: 8px;
    padding: 20px 24px 12px;
  }

  .guest-message__text {
    font-size: var(--guest-font-size-sm);
  }

  .guest-message__date {
    font-size: var(--guest-font-size-xs);
  }
}