/**
 * Findout User Notifications Styles
 * 通知メッセージのスタイル
 */

/* 通知ポップアップ・チャット・ライトボックス等表示中（JS が class を付与） */
body.findout-scroll-lock {
  overflow: hidden !important;
}

/* お知らせ一覧・ドロワー共通の未読バッジ */
.findout-notification-unread-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: #c00;
  border-radius: 999px;
  white-space: nowrap;
}

#findout-notifications-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
}

/* 詳細表示モーダル（暗幕 + 中央カード）— オーバーレイ fade + コンテンツ scale(1.2→1) */
.findout-notification-modal {
  --findout-modal-anim-duration: 0.5s;
  position: fixed;
  inset: 0;
  /* ヘッダーお知らせドロワー（100002）より手前 */
  z-index: 100010;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: auto;
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--findout-modal-anim-duration) ease,
    transform 0s var(--findout-modal-anim-duration);
}

.findout-notification-modal.is-open {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--findout-modal-anim-duration) ease;
}

.findout-notification-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.findout-notification-modal__dialog.findout-notification-popup {
  position: relative;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  align-self: center;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  max-height: min(90vh, 900px);
  width: min(800px, 92vw);
  max-width: 92vw;
  transform: scale(1.2);
  transition: transform var(--findout-modal-anim-duration) ease;
}

/* モーダル内: 左右対称パディング（閉じるボタンは上余白）・件名は左・Flexカードは中央 */
.findout-notification-modal .findout-notification-popup__scroll {
  padding: 48px 24px 24px 24px;
}

.findout-notification-modal
  .findout-notification-popup.findout-notification-popup--flex-only
  .findout-notification-popup__scroll {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: visible;
}

.findout-notification-modal
  .findout-notification-popup.findout-notification-popup--flex-only
  .findout-notification-content {
  display: flex;
  justify-content: center;
  width: 100%;
}

.findout-notification-modal .findout-notification-content {
  width: 100%;
  text-align: left;
}

.findout-notification-modal .findout-notification-title {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left !important;
  padding-right: 44px;
  box-sizing: border-box;
}

.findout-notification-modal .findout-notification-flex-root {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

.findout-notification-modal.is-open
  .findout-notification-modal__dialog.findout-notification-popup {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .findout-notification-modal {
    transition: opacity 0.2s ease;
    transform: none;
  }

  .findout-notification-modal.is-open {
    transition: opacity 0.2s ease;
  }

  .findout-notification-modal__dialog.findout-notification-popup {
    transform: none;
    transition: none;
  }
}

.findout-notification-popup,
.findout-notification-slide {
  --findout-notification-panel-bg: #ffffff;
  --findout-notification-content-bg: #f5f5f5;
  --findout-notification-content-border: #f5f5f5;
  --findout-notification-popup-radius: 20px;
  pointer-events: auto;
  /* max-width / max-height は enqueue 時のインラインCSS（コード既定 popup_width / popup_height）で指定 */
  /* 外枠の角丸。overflow:visible はシャドウ用（内側は __scroll で角丸を合わせる） */
  overflow: visible;
  word-wrap: break-word;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--findout-notification-popup-radius);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 12px 32px rgba(15, 23, 42, 0.16),
    0 28px 64px rgba(15, 23, 42, 0.22);
}

.findout-notification-popup__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  background: var(--findout-notification-panel-bg, #ffffff);
  /* 閉じるボタン列・スクロールバー分の余白 */
  padding: 12px 52px 20px 20px;
  box-sizing: border-box;
}

/* 通常表示: スクロール領域の角をポップアップ外枠の角丸に合わせる（直角が角丸の上に乗るのを防ぐ） */
.findout-notification-popup:not(.findout-notification-popup--flex-only)
  > .findout-notification-popup__scroll,
.findout-notification-slide:not(.findout-notification-popup--flex-only)
  > .findout-notification-popup__scroll {
  border-radius: inherit;
}

.findout-notification-content .notification-content-item {
  background: var(--findout-notification-content-bg, #f5f5f5);
  border: 1px solid var(--findout-notification-content-border, #f5f5f5);
  border-radius: 6px;
  margin: 15px 0;
  padding: 15px;
  box-sizing: border-box;
}

.findout-notification-popup__scroll::-webkit-scrollbar,
.findout-notification-slide::-webkit-scrollbar {
  width: 6px;
}

.findout-notification-popup__scroll::-webkit-scrollbar-track,
.findout-notification-slide::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.findout-notification-popup__scroll::-webkit-scrollbar-thumb,
.findout-notification-slide::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.findout-notification-popup__scroll::-webkit-scrollbar-thumb:hover,
.findout-notification-slide::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.findout-notification-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.findout-notification-close:hover {
  background: rgba(15, 23, 42, 0.12);
  opacity: 1;
}

.findout-notification-content {
  position: relative;
}

/* Flexカードのみの通知はカード以外の余白を削る */
.findout-notification-popup--flex-only .findout-notification-popup__scroll,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-notification-popup__scroll {
  padding: 10px;
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: visible;
}

.findout-notification-popup--flex-only .findout-notification-popup__scroll::-webkit-scrollbar,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-notification-popup__scroll::-webkit-scrollbar {
  display: none;
}

.findout-notification-popup--flex-only .findout-notification-content,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-notification-content {
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.findout-notification-popup--flex-only .findout-notification-flex-root--main,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-notification-flex-root--main {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.findout-notification-flex-card-anchor {
  position: relative;
  width: fit-content;
  max-width: 100%;
  overflow: visible;
  flex-shrink: 0;
}

/* 複数カード: カルーセル幅をカード幅に合わせ、閉じるは表示中カード右上・ナビはその直上 */
.findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor--stacked,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.findout-notification-popup--flex-only .findout-flex-carousel-stacked--popup,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup {
  width: fit-content;
  max-width: 100%;
}

.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-viewport,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-viewport {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-bubble,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-bubble {
  position: relative;
  overflow: hidden;
}

.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-bubble
  > .findout-notification-close,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-bubble
  > .findout-notification-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 12;
  background: #ffffff;
  color: #333333;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 4px 12px rgba(15, 23, 42, 0.12);
  opacity: 1;
}

.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-topnav,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-topnav {
  position: relative;
  z-index: 8;
  width: 100%;
  margin-bottom: 8px;
  pointer-events: auto;
}

.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-bottomnav,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-bottomnav {
  pointer-events: auto;
}

.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-btn,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-flex-carousel-stacked--popup
  .findout-flex-carousel-stacked-btn {
  position: relative;
  z-index: 9;
  pointer-events: auto;
}

/* Flexカードのみ: ポップアップ外枠/白背景を非表示（カードのみ見せる） */
.findout-notification-popup.findout-notification-popup--flex-only,
.findout-notification-slide.findout-notification-popup--flex-only,
.findout-notification-modal__dialog.findout-notification-popup.findout-notification-popup--flex-only {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Flexカードのみ: 閉じるボタンをカード右上に重ねる（白丸＋影で視認性を確保） */
.findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor
  .findout-notification-close,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor
  .findout-notification-close,
.findout-notification-modal
  .findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor
  .findout-notification-close {
  top: 6px;
  right: 6px;
  z-index: 10;
  background: #ffffff;
  color: #333333;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 4px 12px rgba(15, 23, 42, 0.12);
  opacity: 1;
}

.findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor
  .findout-notification-close:hover,
.findout-notification-slide.findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor
  .findout-notification-close:hover,
.findout-notification-modal
  .findout-notification-popup--flex-only
  .findout-notification-flex-card-anchor
  .findout-notification-close:hover {
  background: #f8f8f8;
  border-color: rgba(15, 23, 42, 0.18);
}

/* ポップアップ・スライド: 本文・件名は左（Flex カードの横中央は .findout-notification-flex-root で実現） */
.findout-notification-popup .findout-notification-content,
.findout-notification-slide .findout-notification-content {
  text-align: left;
}

.findout-notification-title {
  word-break: break-word;
  margin: 0 0 12px;
  padding-right: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: inherit;
}

.findout-notification-body {
  word-break: break-word;
}

.findout-notification-image img,
.findout-notification-video video {
  display: block;
  margin: 0 auto;
}

/* 本文内 URL から埋め込んだ画像・動画（一覧/ベル詳細ポップアップ） */
.findout-notification-embed {
  margin: 10px 0;
}

.findout-notification-inline-img,
.findout-notification-inline-video {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.findout-notification-text .findout-notification-embed:first-child {
  margin-top: 0;
}

/* コンテンツ内メディア（画像+動画を1スライダー、クリックでライトボックス） */
.findout-content-media {
  margin: 10px 0;
  max-width: 100%;
}

.findout-content-media-slider {
  position: relative;
  margin: 0;
}

.findout-content-media-viewport {
  overflow: hidden;
  width: 100%;
  border-radius: 6px;
  background: #eee;
}

.findout-content-media-track {
  display: flex;
  flex-direction: row;
  transition: transform 0.28s ease;
  will-change: transform;
}

.findout-content-media-slide {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 2px;
  cursor: pointer;
  outline: none;
}

.findout-content-media-slide:focus-visible {
  box-shadow: 0 0 0 2px #2271b1 inset;
  border-radius: 4px;
}

.findout-content-media-slide-inner {
  position: relative;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.findout-content-media-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  vertical-align: middle;
}

.findout-content-media-thumb-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  pointer-events: none;
}

.findout-content-media-slide-inner.findout-content-media-slide-video {
  min-height: 120px;
}

.findout-content-media-video-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 18px;
  line-height: 48px;
  text-align: center;
  pointer-events: none;
}

/*
 * テーマの [type=button], button { … } は (0,1,0) 程度で、
 * .findout-content-media-nav 単体 (0,1,0) だと読み込み順で負ける。
 * 親 + button + type + クラスで詳細度を上げ、テーマが触るプロパティをすべて明示する。
 */
.findout-content-media button[type="button"].findout-content-media-nav {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45);
  color: #333;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.findout-content-media button[type="button"].findout-content-media-nav:hover {
  background-color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 1);
  color: #333;
}

.findout-content-media
  button[type="button"].findout-content-media-nav.findout-content-media-prev {
  left: 6px;
}

.findout-content-media
  button[type="button"].findout-content-media-nav.findout-content-media-next {
  right: 6px;
}

.findout-content-media-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.findout-content-media button[type="button"].findout-content-media-dot {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 4px;
  min-width: 18px;
  min-height: 4px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: #ccc;
  color: transparent;
  font-size: 0;
  line-height: 0;
  font-weight: 400;
  font-style: normal;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  display: block;
  flex-shrink: 0;
  vertical-align: baseline;
  transition: background-color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.findout-content-media
  button[type="button"].findout-content-media-dot.is-active {
  background-color: #333;
}

.findout-content-media-caption {
  margin: 8px 0 0;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.chat-content-item .findout-content-media {
  margin-top: 12px;
}

/* ライトボックス */
.findout-content-media-lightbox-root {
  position: fixed;
  inset: 0;
  z-index: 10000050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.findout-content-media-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.findout-content-media-lightbox {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 56px 24px;
  box-sizing: border-box;
}

.findout-content-media-lightbox-inner {
  max-width: 100%;
  max-height: calc(92vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.findout-content-media-lightbox-media {
  max-width: 100%;
  max-height: calc(92vh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.findout-content-media-lightbox-caption {
  margin: 12px 0 0;
  color: #eee;
  font-size: 14px;
  text-align: center;
  max-width: 100%;
}

.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-close {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 28px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  transition: background-color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-prev,
.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-next {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  font-size: 28px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  transition: background-color 0.2s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-prev:hover,
.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-next:hover {
  background-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-prev {
  left: 8px;
}

.findout-content-media-lightbox-root
  button[type="button"].findout-content-media-lightbox-next {
  right: 8px;
}

/* LINE Flex Message 風 JSON レンダリング（findout-flex-message.js） */
/* max-width は通知側のみ。チャット横カルーセルでは .findout-flex-bubble の 100% がカード幅を潰すため付けない */
.findout-flex-bubble {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-sizing: border-box;
}

.findout-notification-flex-root .findout-flex-bubble,
.findout-notification-popup .findout-notification-content .findout-flex-bubble,
.findout-notification-slide .findout-notification-content .findout-flex-bubble {
  max-width: 100%;
}

.findout-flex-bubble-part--body {
  padding: 12px 14px;
}

/* 以下 Flex の画像・はみ出し対策は通知（.findout-notification-flex-root）内のみ。チャットは従来表示 */
.findout-notification-flex-root .findout-flex-bubble .findout-flex-box-outer {
  min-width: 0;
  max-width: 100%;
}

.findout-notification-flex-root .findout-flex-bubble-part--body {
  min-width: 0;
  max-width: 100%;
}

.findout-flex-bubble-part--header,
.findout-flex-bubble-part--footer {
  padding: 10px 14px;
  background: #f7f7f7;
}

.findout-notification-flex-root .findout-flex-bubble {
  background: var(--findout-notification-content-bg, #f5f5f5);
  border-color: var(--findout-notification-content-border, #f5f5f5);
}

.findout-notification-flex-root .findout-flex-bubble-part--header,
.findout-notification-flex-root .findout-flex-bubble-part--body,
.findout-notification-flex-root .findout-flex-bubble-part--footer,
.findout-notification-flex-root .findout-flex-bubble-part--hero {
  background: transparent;
}

.findout-flex-bubble-part--hero {
  line-height: 0;
}

.findout-flex-bubble-part--hero .findout-flex-image-wrap {
  margin: 0;
}

.findout-notification-flex-root .findout-flex-bubble-part--hero {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.findout-notification-flex-root .findout-flex-image-wrap {
  display: block;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.findout-notification-flex-root .findout-flex-image-link {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.findout-notification-flex-root .findout-flex-image-el {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  box-sizing: border-box;
}

.findout-notification-flex-root
  .findout-flex-bubble-part--body
  .findout-flex-image-wrap {
  max-width: 100%;
}

/* 通知ポップアップ・スライド・本文内の画像（Flex 以外の HTML も含む） */
.findout-notification-popup .findout-notification-content img,
.findout-notification-slide .findout-notification-content img,
.findout-notification-content img {
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

/* 仕様書 6.4 Carousel */
.findout-flex-carousel,
.flex-carousel {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  max-width: 100%;
}

.findout-flex-carousel .findout-flex-bubble,
.flex-carousel .flex-bubble {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/*
 * チャット内のみ: 横スクロールで複数カードを並べ、次カードがチラ見えする（PC/スマホ共通・固定）。
 * グローバル .findout-flex-bubble { max-width:100% } だと、カルーセル行幅に合わせて1枚が100%幅になりやすいためここで打ち消す。
 * 通知のスタックカルーセル（.findout-flex-carousel-stacked）は対象外。
 */
.findout-chat-messages
  .findout-flex-carousel:not(.findout-flex-carousel-stacked),
.findout-chat-popup-content
  .findout-flex-carousel:not(.findout-flex-carousel-stacked) {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  /* 複数枚は吹き出し内いっぱいをビューポートに（固定 px は横に広げても効かないため使わない） */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}

/* カルーセル1枚: カード幅に合わせてコンパクトに */
.findout-chat-messages
  .findout-flex-carousel--single:not(.findout-flex-carousel-stacked),
.findout-chat-popup-content
  .findout-flex-carousel--single:not(.findout-flex-carousel-stacked) {
  width: fit-content;
  max-width: min(100%, var(--findout-chat-flex-card-width, 220px));
}

.findout-chat-messages
  .findout-flex-carousel:not(.findout-flex-carousel-stacked)
  .findout-flex-bubble,
.findout-chat-popup-content
  .findout-flex-carousel:not(.findout-flex-carousel-stacked)
  .findout-flex-bubble {
  max-width: none;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.findout-chat-container,
.findout-chat-popup-content {
  /* カード本体幅（findout-flex-message.js CHAT_FLEX_BUBBLE_WIDTH_PX と揃える） */
  --findout-chat-flex-card-width: 220px;
  --findout-chat-panel-bg: #ffffff;
  --findout-chat-bubble-other-bg: #f5f5f5;
  --findout-chat-bubble-other-border: #f5f5f5;
  --findout-chat-line-green: #06c755;
  /* 吹き出し padding 0 12px ×2 + border 1px ×2（box-sizing: border-box 時の外寸） */
  --findout-chat-bubble-padding-inline: 24px;
  --findout-chat-bubble-border-inline: 2px;
  --findout-chat-bubble-outer-width: calc(
    var(--findout-chat-flex-card-width, 200px) +
      var(--findout-chat-bubble-padding-inline) +
      var(--findout-chat-bubble-border-inline)
  );
}

/* チャット履歴エリア: 端までスクロールしたとき背面へ伝播しない */
.findout-chat-messages,
.findout-chat-popup-content .findout-chat-messages {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--findout-chat-panel-bg, #ffffff);
}

/* 相手（管理者）テキスト吹き出し: チャット背景より濃いグレー */
.findout-chat-messages .chat-message-bubble.admin:not(:has(.chat-message-text--flex)),
.findout-chat-popup-content
  .chat-message-bubble.admin:not(:has(.chat-message-text--flex)) {
  background: var(--findout-chat-bubble-other-bg, #f5f5f5);
  border-color: var(--findout-chat-bubble-other-border, #f5f5f5);
  padding: 8px 14px;
}

/* Flex カード: LINE 風の白カードをチャット背景上に直接表示（グレー吹き出しなし） */
.findout-chat-messages .chat-message-bubble.admin:has(.chat-message-text--flex),
.findout-chat-popup-content
  .chat-message-bubble.admin:has(.chat-message-text--flex) {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}

.findout-chat-messages .chat-message-row.admin:has(.findout-flex-message),
.findout-chat-popup-content .chat-message-row.admin:has(.findout-flex-message) {
  max-width: min(100%, calc(100% - 8px));
  width: 100%;
}

.findout-chat-messages .findout-flex-bubble,
.findout-chat-popup-content .findout-flex-bubble {
  border-radius: 12px;
  box-sizing: border-box;
}

/* 相手（管理者）Flex カード: テキスト吹き出しと同じ濃いグレー（body 等の白上書きをしない） */
.findout-chat-messages .chat-message-row.admin .findout-flex-bubble,
.findout-chat-popup-content .chat-message-row.admin .findout-flex-bubble {
  background: var(--findout-chat-bubble-other-bg, #f5f5f5);
  border: 1px solid var(--findout-chat-bubble-other-border, #f5f5f5);
  box-shadow: none;
}

.findout-chat-messages .chat-message-row.admin .findout-flex-bubble-part--header,
.findout-chat-messages .chat-message-row.admin .findout-flex-bubble-part--body,
.findout-chat-messages .chat-message-row.admin .findout-flex-bubble-part--footer,
.findout-chat-messages .chat-message-row.admin .findout-flex-bubble-part--hero,
.findout-chat-popup-content .chat-message-row.admin .findout-flex-bubble-part--header,
.findout-chat-popup-content .chat-message-row.admin .findout-flex-bubble-part--body,
.findout-chat-popup-content .chat-message-row.admin .findout-flex-bubble-part--footer,
.findout-chat-popup-content .chat-message-row.admin .findout-flex-bubble-part--hero {
  background: transparent;
}

/* 自分（ユーザー）Flex カード: 白カード（LINE 風） */
.findout-chat-messages .chat-message-row.user .findout-flex-bubble,
.findout-chat-popup-content .chat-message-row.user .findout-flex-bubble {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
}

.findout-chat-messages .chat-message-row.user .findout-flex-bubble-part--header,
.findout-chat-messages .chat-message-row.user .findout-flex-bubble-part--body,
.findout-chat-messages .chat-message-row.user .findout-flex-bubble-part--footer,
.findout-chat-messages .chat-message-row.user .findout-flex-bubble-part--hero,
.findout-chat-popup-content .chat-message-row.user .findout-flex-bubble-part--header,
.findout-chat-popup-content .chat-message-row.user .findout-flex-bubble-part--body,
.findout-chat-popup-content .chat-message-row.user .findout-flex-bubble-part--footer,
.findout-chat-popup-content .chat-message-row.user .findout-flex-bubble-part--hero {
  background: #ffffff;
}

.findout-chat-messages .findout-flex-bubble-part--hero .findout-flex-image-wrap,
.findout-chat-popup-content .findout-flex-bubble-part--hero .findout-flex-image-wrap {
  margin: 0;
  line-height: 0;
}

.findout-chat-messages .findout-flex-bubble-part--hero,
.findout-chat-popup-content .findout-flex-bubble-part--hero {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.findout-chat-messages .findout-flex-bubble-part--hero .findout-flex-image-el,
.findout-chat-popup-content .findout-flex-bubble-part--hero .findout-flex-image-el {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.findout-chat-messages .findout-flex-image-wrap,
.findout-chat-popup-content .findout-flex-image-wrap {
  display: block;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.findout-chat-messages .findout-flex-image-link,
.findout-chat-popup-content .findout-flex-image-link {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.findout-chat-messages .findout-flex-image-el,
.findout-chat-popup-content .findout-flex-image-el {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  box-sizing: border-box;
}

.findout-chat-messages .findout-flex-bubble-part--header,
.findout-chat-popup-content .findout-flex-bubble-part--header {
  padding: 10px 14px 0;
}

.findout-chat-messages .findout-flex-bubble-part--body,
.findout-chat-popup-content .findout-flex-bubble-part--body {
  padding: 10px 14px 8px;
}

.findout-chat-messages .findout-flex-bubble-part--footer,
.findout-chat-popup-content .findout-flex-bubble-part--footer {
  padding: 0 14px 14px;
}

.findout-chat-messages
  .findout-flex-bubble-part--body
  > .findout-flex-box-outer
  > .findout-flex-text:first-child,
.findout-chat-popup-content
  .findout-flex-bubble-part--body
  > .findout-flex-box-outer
  > .findout-flex-text:first-child {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: #111111;
}

.findout-chat-messages .findout-flex-carousel--chat,
.findout-chat-popup-content .findout-flex-carousel--chat {
  gap: 10px;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.findout-chat-messages
  .findout-flex-bubble-part--footer
  .findout-flex-box-outer,
.findout-chat-popup-content
  .findout-flex-bubble-part--footer
  .findout-flex-box-outer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.findout-chat-messages
  .findout-flex-bubble-part--footer
  .findout-flex-button,
.findout-chat-popup-content
  .findout-flex-bubble-part--footer
  .findout-flex-button,
.findout-chat-messages
  .findout-flex-bubble-part--footer
  a.findout-flex-button--uri,
.findout-chat-popup-content
  .findout-flex-bubble-part--footer
  a.findout-flex-button--uri {
  display: block;
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
  text-align: center;
  border-radius: 6px;
  padding: 11px 12px;
}

.findout-chat-messages
  .findout-flex-bubble-part--footer
  .flex-button--primary-default,
.findout-chat-popup-content
  .findout-flex-bubble-part--footer
  .flex-button--primary-default,
.findout-chat-messages
  .findout-flex-bubble-part--footer
  button.findout-flex-button--postback.flex-button--primary-default,
.findout-chat-popup-content
  .findout-flex-bubble-part--footer
  button.findout-flex-button--postback.flex-button--primary-default,
.findout-chat-messages
  .findout-flex-bubble-part--footer
  a.findout-flex-button--uri.flex-button--primary-default,
.findout-chat-popup-content
  .findout-flex-bubble-part--footer
  a.findout-flex-button--uri.flex-button--primary-default {
  background: var(--findout-chat-line-green, #06c755) !important;
  border: 1px solid var(--findout-chat-line-green, #06c755) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
}

.findout-chat-messages
  .findout-flex-bubble-part--footer
  .flex-button--secondary-style,
.findout-chat-popup-content
  .findout-flex-bubble-part--footer
  .flex-button--secondary-style {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111111 !important;
}

/* 通知（アンケート含む）も、文字・ボタン表示ルールを通常カードと統一 */
.findout-notification-flex-root .findout-flex-bubble-part--header {
  padding: 10px 14px 0;
}

.findout-notification-flex-root .findout-flex-bubble-part--body {
  padding: 10px 14px 8px;
}

.findout-notification-flex-root
  .findout-flex-bubble--survey
  .findout-flex-bubble-part--body
  > .findout-flex-box-outer {
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
}

.findout-notification-flex-root
  .findout-flex-bubble--survey
  .findout-flex-bubble-part--body
  .findout-flex-image-wrap:first-child
  .findout-flex-image-link,
.findout-notification-flex-root
  .findout-flex-bubble--survey
  .findout-flex-bubble-part--body
  .findout-flex-image-wrap:first-child
  .findout-flex-image-el {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.findout-notification-flex-root .findout-flex-bubble-part--footer {
  padding: 0 14px 14px;
}

.findout-notification-flex-root
  .findout-flex-bubble-part--body
  > .findout-flex-box-outer
  > .findout-flex-text:first-child {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: #111111;
}

.findout-notification-flex-root
  .findout-flex-bubble-part--footer
  .findout-flex-box-outer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.findout-notification-flex-root .findout-flex-bubble-part--footer .findout-flex-button,
.findout-notification-flex-root
  .findout-flex-bubble-part--footer
  a.findout-flex-button--uri {
  display: block;
  width: 100%;
  margin-top: 0;
  box-sizing: border-box;
  text-align: center;
  border-radius: 6px;
  padding: 11px 12px;
}

.findout-notification-flex-root
  .findout-flex-bubble-part--footer
  .flex-button--primary-default,
.findout-notification-flex-root
  .findout-flex-bubble-part--footer
  button.findout-flex-button--postback.flex-button--primary-default,
.findout-notification-flex-root
  .findout-flex-bubble-part--footer
  a.findout-flex-button--uri.flex-button--primary-default {
  background: var(--findout-chat-line-green, #06c755) !important;
  border: 1px solid var(--findout-chat-line-green, #06c755) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
}

.findout-notification-flex-root
  .findout-flex-bubble-part--footer
  .flex-button--secondary-style {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111111 !important;
}

/* アンケートカードも通常カードと同じ表示ルールに統一（通知/チャット共通） */
.findout-flex-bubble--survey .findout-flex-bubble-part--body .findout-flex-image-wrap:first-child {
  margin: -10px -14px 10px;
  display: block;
  width: calc(100% + 28px);
  max-width: none;
}

.findout-flex-bubble--survey .findout-flex-bubble-part--body .findout-flex-image-el:first-child {
  width: 100% !important;
  display: block;
}

.findout-flex-bubble--survey
  .findout-flex-bubble-part--body
  > .findout-flex-box-outer {
  align-items: stretch !important;
}

.findout-flex-bubble--survey .findout-flex-bubble-part--hero .findout-flex-image-wrap,
.findout-flex-bubble--survey .findout-flex-bubble-part--hero .findout-flex-image-link,
.findout-flex-bubble--survey .findout-flex-bubble-part--hero .findout-flex-image-el {
  display: block;
  width: 100% !important;
  max-width: none;
}

.findout-notification-flex-root
  .findout-flex-bubble--survey
  .findout-flex-bubble-part--body
  > .findout-flex-box-outer,
.findout-notification-flex-root
  .findout-flex-bubble--survey
  .findout-flex-bubble-part--hero
  > .findout-flex-box-outer {
  align-items: stretch !important;
}

.findout-flex-bubble--survey .findout-flex-bubble-part--body .findout-flex-button,
.findout-flex-bubble--survey
  .findout-flex-bubble-part--body
  a.findout-flex-button--uri,
.findout-flex-bubble--survey .findout-flex-bubble-part--footer .findout-flex-button,
.findout-flex-bubble--survey
  .findout-flex-bubble-part--footer
  a.findout-flex-button--uri {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  box-sizing: border-box;
  text-align: center;
  border-radius: 6px;
  padding: 11px 12px;
  align-self: stretch !important;
}

.findout-flex-bubble--survey .flex-button--primary-default,
.findout-flex-bubble--survey button.findout-flex-button--postback.flex-button--primary-default,
.findout-flex-bubble--survey a.findout-flex-button--uri.flex-button--primary-default {
  background: var(--findout-chat-line-green, #06c755) !important;
  border: 1px solid var(--findout-chat-line-green, #06c755) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 600;
}

/* survey の JSON 側 margin / center 指定を打ち消して通常カード同等の幅にする */
.findout-flex-bubble--survey .findout-flex-bubble-part--body .findout-flex-box-outer,
.findout-flex-bubble--survey .findout-flex-bubble-part--footer .findout-flex-box-outer {
  align-items: stretch !important;
}

/* survey: 画像が左寄りになる inline margin / fit-content を強制リセット */
.findout-flex-bubble--survey .findout-flex-bubble-part--hero .findout-flex-box-outer,
.findout-flex-bubble--survey .findout-flex-bubble-part--body .findout-flex-box-outer {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.findout-flex-bubble--survey .findout-flex-image-wrap,
.findout-flex-bubble--survey .findout-flex-image-link,
.findout-flex-bubble--survey .findout-flex-image-el {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0 !important;
}

/* survey: ボタンの inline margin / width 指定を強制リセット */
.findout-flex-bubble--survey .findout-flex-button,
.findout-flex-bubble--survey a.findout-flex-button--uri {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
}

/* 管理者: カルーセル複数のビューポートを吹き出し幅いっぱいに。ユーザーは従来どおり fit-content */
.findout-chat-messages
  .chat-message-row.admin
  .findout-flex-message.flex-message,
.findout-chat-popup-content
  .chat-message-row.admin
  .findout-flex-message.flex-message {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.findout-chat-messages
  .chat-message-row.user
  .findout-flex-message.flex-message,
.findout-chat-popup-content
  .chat-message-row.user
  .findout-flex-message.flex-message {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

/* 通知ポップアップ内カルーセル: 1枚表示 + 上下 ‹ 1/n › 行（findout-flex-message.js） */
.findout-flex-carousel.findout-flex-carousel-stacked {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  gap: 0;
  padding: 0 0 4px;
  scroll-snap-type: none;
}

/* PC/スマホ共通: カード上・下の ‹ 1/n › 行（左右の絶対配置ナビは使わない） */
.findout-flex-carousel-stacked-topnav,
.findout-flex-carousel-stacked-bottomnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.findout-flex-carousel-stacked-topnav {
  margin-bottom: 8px;
}

.findout-flex-carousel-stacked-bottomnav {
  margin-top: 8px;
}

.findout-flex-carousel-stacked-topnav .findout-flex-carousel-stacked-btn,
.findout-flex-carousel-stacked-bottomnav .findout-flex-carousel-stacked-btn {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin-top: 0;
}

.findout-flex-carousel-stacked-counter {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 40px;
  min-width: 3.25em;
  text-align: center;
  flex-shrink: 0;
}

.findout-flex-carousel-stacked-viewport {
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  /* 縦スクロールはブラウザに任せ、横は JS（タッチ・マウス・ホイール）で処理 */
  touch-action: pan-y pinch-zoom;
  cursor: grab;
}

.findout-flex-carousel-stacked-viewport:active {
  cursor: grabbing;
}

.findout-flex-carousel-stacked-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.findout-flex-carousel-stacked-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
}

/* ナビ共通（上下行の ‹ ›） */
.findout-flex-carousel-stacked-btn {
  position: relative;
  z-index: 3;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
}

/* 旧 HTML 互換: 左右中央の矢印は非表示 */
.findout-flex-carousel-stacked-btn--edge {
  display: none !important;
}

.findout-flex-carousel-stacked-btn:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

.findout-flex-carousel-stacked-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 768px) {
  .findout-flex-carousel.findout-flex-carousel-stacked {
    padding: 0 0 10px;
  }

  .findout-flex-carousel-stacked-topnav .findout-flex-carousel-stacked-btn,
  .findout-flex-carousel-stacked-bottomnav .findout-flex-carousel-stacked-btn {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .findout-flex-carousel-stacked-counter {
    line-height: 44px;
  }
}

.findout-flex-text {
  line-height: 1.45;
  word-break: break-word;
}

/* チャット内 Flex カード: xl 等のインライン 22px を使わず吹き出し本文サイズに統一 */
.findout-chat-messages .findout-flex-bubble .findout-flex-text,
.findout-chat-messages
  .findout-flex-bubble
  .findout-flex-text
  .findout-flex-span,
.findout-chat-popup-content .findout-flex-bubble .findout-flex-text,
.findout-chat-popup-content
  .findout-flex-bubble
  .findout-flex-text
  .findout-flex-span {
  font-size: 15px;
  line-height: 1.25;
  margin: 6px 0 !important;
}

.findout-chat-messages .chat-message-subject,
.findout-chat-popup-content .chat-message-subject,
.findout-chat-messages .chat-content-item-title,
.findout-chat-popup-content .chat-content-item-title {
  font-size: 15px;
}

/* Flex アクション: チャットの postback(button) とポップアップの uri/サーベイリンク(a)のベースを同一 */
a.findout-flex-button--uri,
button.findout-flex-button--postback.flex-button,
button.flex-button.findout-flex-button--postback,
button.findout-flex-button--datetimepicker.flex-button,
button.flex-button.findout-flex-button--datetimepicker {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
}

a.findout-flex-button--uri {
  text-decoration: none !important;
}

a.findout-flex-button--uri.flex-button--link-style,
button.findout-flex-button--postback.flex-button--link-style,
button.flex-button.findout-flex-button--postback.flex-button--link-style,
button.findout-flex-button--datetimepicker.flex-button--link-style,
button.flex-button.findout-flex-button--datetimepicker.flex-button--link-style {
  text-decoration: underline !important;
  font-weight: 500;
}

a.findout-flex-button--uri:hover,
button.findout-flex-button--postback.flex-button:hover,
button.flex-button.findout-flex-button--postback:hover,
button.findout-flex-button--datetimepicker.flex-button:hover,
button.flex-button.findout-flex-button--datetimepicker:hover {
  opacity: 0.92;
}

.findout-flex-button--static {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  color: #666;
  font-size: 14px;
  cursor: not-allowed;
}

/* 仕様書 6.3 Button（postback / datetimepicker / primary / secondary / link） */

.flex-button--primary-default {
  background: #42659a;
  color: #ffffff;
  border: 1px solid #42659a;
}

.flex-button--primary-default:hover {
  filter: brightness(1.06);
}

.flex-button--secondary-style {
  background: #ffffff;
  color: #111111;
  border: 1px solid #d1d5db;
}

.flex-button--secondary-style:hover {
  filter: brightness(0.97);
}

/* surveyカード（class付与 or surveyリンク検出）: 画像全幅 + ボタン幅100% を最終上書き */
.findout-flex-bubble--survey,
.findout-flex-bubble:has(
    a.findout-flex-button--uri[href*="sakina-survey"][href*="/v2/survey"],
    button.findout-flex-button--postback[data-postback*="survey_start"]
  ) {
  --findout-survey-card: 1;
}

.findout-flex-bubble:is(.findout-flex-bubble--survey)
  .findout-flex-bubble-part--hero
  .findout-flex-image-wrap,
.findout-flex-bubble:is(.findout-flex-bubble--survey)
  .findout-flex-bubble-part--hero
  .findout-flex-image-link,
.findout-flex-bubble:is(.findout-flex-bubble--survey)
  .findout-flex-bubble-part--hero
  .findout-flex-image-el,
.findout-flex-bubble:has(
    a.findout-flex-button--uri[href*="sakina-survey"][href*="/v2/survey"],
    button.findout-flex-button--postback[data-postback*="survey_start"]
  )
  .findout-flex-bubble-part--hero
  .findout-flex-image-wrap,
.findout-flex-bubble:has(
    a.findout-flex-button--uri[href*="sakina-survey"][href*="/v2/survey"],
    button.findout-flex-button--postback[data-postback*="survey_start"]
  )
  .findout-flex-bubble-part--hero
  .findout-flex-image-link,
.findout-flex-bubble:has(
    a.findout-flex-button--uri[href*="sakina-survey"][href*="/v2/survey"],
    button.findout-flex-button--postback[data-postback*="survey_start"]
  )
  .findout-flex-bubble-part--hero
  .findout-flex-image-el {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.findout-flex-bubble:is(.findout-flex-bubble--survey) .findout-flex-button,
.findout-flex-bubble:is(.findout-flex-bubble--survey) a.findout-flex-button--uri,
.findout-flex-bubble:has(
    a.findout-flex-button--uri[href*="sakina-survey"][href*="/v2/survey"],
    button.findout-flex-button--postback[data-postback*="survey_start"]
  )
  .findout-flex-button,
.findout-flex-bubble:has(
    a.findout-flex-button--uri[href*="sakina-survey"][href*="/v2/survey"],
    button.findout-flex-button--postback[data-postback*="survey_start"]
  )
  a.findout-flex-button--uri {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

.flex-button--link-style {
  background: #ffffff;
  border: none;
  text-decoration: underline;
  font-weight: 500;
}

.flex-button--link-style:hover {
  opacity: 0.88;
}

.flex-button--sm {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

.findout-flex-separator {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin: 10px 0;
}

.findout-flex-image--missing,
.findout-flex-unsupported {
  font-size: 12px;
  color: #999;
  padding: 4px 0;
}

.findout-notification-flex-root {
  max-width: 100%;
}

.chat-message-text--flex {
  max-width: 100%;
  min-width: 0;
}

/* 件名・ヘッダーは Flex カード外にあり、改行指定が無いと intrinsic 幅で行が横に伸びる */
.findout-chat-messages .chat-message-header,
.findout-chat-popup-content .chat-message-header,
.findout-chat-messages .chat-message-subject,
.findout-chat-popup-content .chat-message-subject {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 送信者名をタイトル（件名）に近づける */
.findout-chat-messages .chat-message-header,
.findout-chat-popup-content .chat-message-header {
  font-size: 12px;
  color: #666;
  margin: 0 0 2px;
  line-height: 1.25;
}

.findout-chat-messages .chat-message-header + .chat-message-subject,
.findout-chat-popup-content .chat-message-header + .chat-message-subject {
  margin-top: 0;
}

.findout-chat-messages .chat-message-subject,
.findout-chat-popup-content .chat-message-subject {
  margin: 0 0 8px;
  line-height: 1.35;
}

/* Flex カードと同じ幅に件名・ヘッダーを揃える（カードは行幅＋吹き出し padding 分が必要なため行は 80% のまま） */
.findout-chat-messages
  .chat-message-bubble.admin:has(.chat-message-text--flex)
  .chat-message-header,
.findout-chat-popup-content
  .chat-message-bubble.admin:has(.chat-message-text--flex)
  .chat-message-header,
.findout-chat-messages
  .chat-message-bubble.admin:has(.chat-message-text--flex)
  .chat-message-subject,
.findout-chat-popup-content
  .chat-message-bubble.admin:has(.chat-message-text--flex)
  .chat-message-subject,
.findout-chat-messages
  .chat-message-bubble.user:has(.chat-message-text--flex)
  .chat-message-header,
.findout-chat-popup-content
  .chat-message-bubble.user:has(.chat-message-text--flex)
  .chat-message-header,
.findout-chat-messages
  .chat-message-bubble.user:has(.chat-message-text--flex)
  .chat-message-subject,
.findout-chat-popup-content
  .chat-message-bubble.user:has(.chat-message-text--flex)
  .chat-message-subject {
  max-width: var(--findout-chat-flex-card-width, 220px);
}

.findout-chat-messages .chat-message-row,
.findout-chat-popup-content .chat-message-row {
  width: fit-content;
  min-width: 0;
  max-width: 80%;
  box-sizing: border-box;
}

/* 通常テキストのみ: カードあり吹き出しの外寸（200px + padding + border ≒ 226px）に合わせる */
.findout-chat-messages .chat-message-row:not(:has(.findout-flex-message)),
.findout-chat-popup-content .chat-message-row:not(:has(.findout-flex-message)) {
  max-width: var(--findout-chat-bubble-outer-width);
}

.findout-chat-messages
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-bubble,
.findout-chat-popup-content
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-bubble {
  max-width: var(--findout-chat-bubble-outer-width);
  width: 100%;
  box-sizing: border-box;
}

.findout-chat-messages
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-header,
.findout-chat-popup-content
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-header,
.findout-chat-messages
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-subject,
.findout-chat-popup-content
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-subject,
.findout-chat-messages
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-text,
.findout-chat-popup-content
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-message-text,
.findout-chat-messages
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-content-item,
.findout-chat-popup-content
  .chat-message-row:not(:has(.findout-flex-message))
  .chat-content-item {
  max-width: 100%;
}

.findout-chat-messages .chat-message-row.user,
.findout-chat-popup-content .chat-message-row.user {
  align-self: flex-end;
  width: fit-content;
}

.findout-chat-messages .chat-message-bubble,
.findout-chat-popup-content .chat-message-bubble {
  min-width: 0;
  overflow-wrap: break-word;
}

.findout-chat-messages .chat-message-bubble.admin,
.findout-chat-popup-content .chat-message-bubble.admin {
  width: fit-content;
  max-width: 100%;
}

.findout-chat-messages .chat-message-bubble.user,
.findout-chat-popup-content .chat-message-bubble.user {
  width: fit-content;
}

/* 通知・一覧ポップアップ等（チャット以外）: Flex カードを横中央に */
.findout-notification-flex-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.findout-notification-flex-root .findout-flex-message,
.findout-notification-flex-root .findout-flex-carousel {
  max-width: 100%;
}

.chat-message-text--flex .findout-flex-bubble {
  border-radius: 12px;
}

/* チャット吹き出し・入力（フローティング／埋め込み共通） */
.findout-chat-messages .chat-message-bubble,
.findout-chat-popup-content .chat-message-bubble {
  padding: 0 12px;
  border-radius: 18px;
}

/* チャットパネル下部（入力エリア）を外枠の角丸に合わせる */
.findout-chat-container,
.findout-chat-popup {
  overflow: hidden;
}

/* ポップアップ内: ショートコード由来の embed max-width（450px 等）を無効化し親幅いっぱいに */
.findout-chat-popup-content .findout-chat-container {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.findout-chat-input-area {
  flex-shrink: 0;
  border-radius: 0 0 var(--findout-chat-panel-radius, 20px)
    var(--findout-chat-panel-radius, 20px);
}

.findout-chat-messages #findout-chat-text,
.findout-chat-popup-content #findout-chat-text,
.findout-chat-messages .chat-send-btn,
.findout-chat-popup-content .chat-send-btn {
  border-radius: 14px;
}

.findout-chat-messages .chat-content-item,
.findout-chat-popup-content .chat-content-item {
  border-radius: 12px;
}

.findout-chat-messages .chat-content-item img,
.findout-chat-popup-content .chat-content-item img,
.findout-chat-messages .chat-content-item video,
.findout-chat-popup-content .chat-content-item video {
  border-radius: 10px;
}

/* PC: 通知側はチャット用の固定幅より広く表示（inline width を上書き・基準の約1.55倍） */
@media (min-width: 769px) {
  .findout-notification-flex-root .findout-flex-bubble--nano {
    width: 186px !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--micro {
    width: 248px !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--deca {
    width: 341px !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--hecto {
    width: 403px !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--kilo {
    width: 465px !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--mega {
    width: 527px !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--giga {
    width: 589px !important;
  }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .findout-notification-modal {
    padding: 12px;
  }

  .findout-notification-modal__dialog.findout-notification-popup {
    width: min(92vw, 100%) !important;
    max-width: 92vw !important;
    max-height: min(88vh, 900px);
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .findout-notification-modal .findout-notification-popup__scroll {
    padding: 44px 16px 20px 16px;
  }

  .findout-notification-popup,
  .findout-notification-slide {
    width: 90vw !important;
    max-width: 90vw !important;
    box-sizing: border-box;
  }

  /* チャット以外: スマホでもカードを一段広く（はみ出し防止で min(vw, px)） */
  .findout-notification-flex-root .findout-flex-bubble--nano {
    width: min(92vw, 140px) !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--micro {
    width: min(92vw, 188px) !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--deca {
    width: min(94vw, 258px) !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--hecto {
    width: min(94vw, 304px) !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--kilo {
    width: min(96vw, 352px) !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--mega {
    width: min(96vw, 398px) !important;
  }

  .findout-notification-flex-root .findout-flex-bubble--giga {
    width: min(96vw, 444px) !important;
  }
}