/*
  なりきり吹き出しと名場面カード（通常型1on1）。
  ・口調ごとの吹き出しは、購入した枠・背景がない時だけ使う（chat-cosmetic-bubble の変数を上書きする）。
  ・アイコンの形は chat-persona.mjs の CHAT_ICON_PATHS と同じ。
*/

:root {
  --cp-icon-crown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 18h18l-1.6-10-4.4 3.6L12 5 9 11.6 4.6 8z'/></svg>");
  --cp-icon-tear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.5c3.4 5 6.5 8.3 6.5 12a6.5 6.5 0 0 1-13 0c0-3.7 3.1-7 6.5-12z'/></svg>");
  --cp-icon-horns: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 20c-1.5-4.5-1-10 3-15-.2 4 .8 7 3 9-2.3 1.5-4.4 3.6-6 6zM19 20c1.5-4.5 1-10-3-15 .2 4-.8 7-3 9 2.3 1.5 4.4 3.6 6 6z'/></svg>");
  --cp-icon-lips: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M2 11.5C4.6 7.8 7.6 6.6 10 8.4c1.2-.9 2.8-.9 4 0 2.4-1.8 5.4-.6 8 3.1-2.6 3.8-6.2 6-10 6s-7.4-2.2-10-6zm4.2.2c2 1 3.9 1.4 5.8 1.4s3.8-.4 5.8-1.4c-2-.6-3.9-.8-5.8-.6-1.9-.2-3.8 0-5.8.6z'/></svg>");
  --cp-icon-ribbon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 10.2C9.4 6.4 4.2 4.6 3.1 7.4 2 10.2 5.6 13.4 10.4 12.2L7.6 19l3-1.2L12 21l1.4-3.2 3 1.2-2.8-6.8c4.8 1.2 8.4-2 7.3-4.8-1.1-2.8-6.3-1-8.9 2.8z'/></svg>");
  --cp-icon-flower: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.6 6.2a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0-6.8 0M14.1 10.2a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0-6.8 0M12 16.6a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0-6.8 0M5.2 16.6a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0-6.8 0M3.1 10.2a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0-6.8 0'/></svg>");
  --cp-icon-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21C9 18.3 2 14.2 2 8.6 2 5.5 4.4 3 7.4 3c1.8 0 3.5.9 4.6 2.3C13.1 3.9 14.8 3 16.6 3 19.6 3 22 5.5 22 8.6 22 14.2 15 18.3 12 21z'/></svg>");
  --cp-icon-bolt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 2 4 13.5h6.5L9.5 22 20 9.5h-6.6z'/></svg>");
  --cp-icon-react: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19.5C9.6 17.4 4 14.2 4 9.7 4 7.2 5.9 5.2 8.3 5.2c1.5 0 2.8.7 3.7 1.8.9-1.1 2.2-1.8 3.7-1.8'/><path d='M18 13v7M14.5 16.5h7'/></svg>");
}

/* ---------- 名前の前のしるし ---------- */

.chat-persona-mark {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: var(--cp-mark) center / contain no-repeat;
  mask: var(--cp-mark) center / contain no-repeat;
}

.chat-persona-mark.is-tsuyotsuyo { --cp-mark: var(--cp-icon-crown); color: #f2c867; }
.chat-persona-mark.is-yowayowa { --cp-mark: var(--cp-icon-tear); color: #9fd8ff; }
.chat-persona-mark.is-koakuma { --cp-mark: var(--cp-icon-horns); color: #ff4fa0; }
.chat-persona-mark.is-oneesan { --cp-mark: var(--cp-icon-lips); color: #ff3f86; }
.chat-persona-mark.is-amaenbo { --cp-mark: var(--cp-icon-ribbon); color: #ffb3d9; }
.chat-persona-mark.is-seiso { --cp-mark: var(--cp-icon-flower); color: #d9c7ff; }

/* ---------- 口調ごとの吹き出し ---------- */

.chat-persona-tsuyotsuyo {
  --chat-surface: linear-gradient(135deg, #3a0a1f, #6b1235);
  --chat-text: #fff0c9;
  --chat-border: #e6c17a;
  --chat-border-width: 2px;
  --chat-shadow: 0 0 0 1px rgba(230, 193, 122, 0.18), 0 0 16px rgba(230, 193, 122, 0.28);
  --chat-radius: 3px 14px 14px 14px;
  --chat-charm-color: #f2c867;
}
.chat-persona-tsuyotsuyo::after { content: "♛"; }

.chat-persona-yowayowa {
  --chat-surface: linear-gradient(135deg, rgba(198, 222, 255, 0.96), rgba(232, 224, 255, 0.96));
  --chat-text: #2c2a4a;
  --chat-border: rgba(132, 166, 230, 0.85);
  --chat-border-width: 1.5px;
  --chat-border-style: dashed;
  --chat-shadow: 0 6px 16px rgba(120, 160, 255, 0.18);
  --chat-radius: 18px;
  --chat-charm-color: #9fd8ff;
}
.chat-persona-yowayowa::after { content: "…"; }

.chat-persona-koakuma {
  --chat-surface: linear-gradient(135deg, #2a0a26, #5c0f4a 60%, #8a1a5c);
  --chat-text: #ffd6ea;
  --chat-border: #ff4fa0;
  --chat-border-width: 2px;
  --chat-shadow: 0 0 14px rgba(255, 79, 160, 0.45);
  --chat-radius: 16px 16px 16px 4px;
  --chat-charm-color: #ff4fa0;
}
.chat-persona-koakuma::after { content: "♥"; }

.chat-persona-oneesan {
  --chat-surface: linear-gradient(135deg, #1a0b14, #3b0f24);
  --chat-text: #ffe3ec;
  --chat-border: rgba(255, 63, 134, 0.7);
  --chat-border-width: 1px;
  --chat-shadow: 0 10px 26px rgba(255, 63, 134, 0.25);
  --chat-radius: 20px 20px 20px 6px;
  --chat-charm-color: #e6c17a;
}
.chat-persona-oneesan::after { content: "✦"; }

.chat-persona-amaenbo {
  --chat-surface: linear-gradient(135deg, #ffd1e6, #ffe9f3);
  --chat-text: #6a2245;
  --chat-border: #ffb3d9;
  --chat-border-width: 3px;
  --chat-border-style: double;
  --chat-shadow: 0 6px 18px rgba(255, 122, 168, 0.28);
  --chat-radius: 22px;
  --chat-charm-color: #ff7aa8;
}
.chat-persona-amaenbo::after { content: "♡"; }

.chat-persona-seiso {
  --chat-surface: linear-gradient(135deg, #f6f3ff, #e9e2ff);
  --chat-text: #3a3150;
  --chat-border: rgba(201, 179, 255, 0.95);
  --chat-border-width: 1px;
  --chat-shadow: 0 6px 16px rgba(169, 139, 255, 0.18);
  --chat-radius: 14px;
  --chat-charm-color: #c9b3ff;
}
.chat-persona-seiso::after { content: "❀"; }

/* ---------- 吹き出しの並び（リアクションの置き場） ---------- */

.chat-bubble-row {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  vertical-align: top;
}

.chat-message.player-two .chat-bubble-row {
  flex-direction: row-reverse;
}

.chat-bubble-anchor {
  position: relative;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
}

.chat-message.has-reaction .chat-bubble-anchor {
  margin-bottom: 10px;
}

/* ---------- 言い方 ---------- */

.chat-message p.chat-fx {
  position: relative;
}

.chat-message p.chat-fx-whisper {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  opacity: 0.86;
}

.chat-message p.chat-fx-whisper.is-entering {
  animation: cp-whisper-in 900ms ease-out both;
}

.chat-message p.chat-fx-emphasis {
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.4;
  text-shadow: 0 0 10px color-mix(in srgb, var(--chat-border, #ff3f86) 70%, transparent);
}

.chat-message p.chat-fx-emphasis.is-entering {
  animation: cp-emphasis-in 520ms var(--vs-ease-snap, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

.chat-fx-char {
  display: inline-block;
  animation: cp-tremble 260ms steps(2, end) infinite;
  animation-delay: calc(var(--i, 0) * -37ms);
}

.chat-message p.chat-fx-hearts {
  overflow: visible;
}

.chat-message p.chat-fx-hearts::before {
  position: absolute;
  z-index: 3;
  right: 26px;
  top: -14px;
  width: 44px;
  height: 22px;
  content: "";
  pointer-events: none;
  background: #ff7aa8;
  -webkit-mask:
    var(--cp-icon-heart) 0 4px / 16px 16px no-repeat,
    var(--cp-icon-heart) 18px 0 / 12px 12px no-repeat,
    var(--cp-icon-heart) 32px 8px / 10px 10px no-repeat;
  mask:
    var(--cp-icon-heart) 0 4px / 16px 16px no-repeat,
    var(--cp-icon-heart) 18px 0 / 12px 12px no-repeat,
    var(--cp-icon-heart) 32px 8px / 10px 10px no-repeat;
  animation: cp-hearts-float 2600ms ease-in-out infinite;
}

/* 名前の行と重ならないよう、名前と反対側の上辺に置く */
.chat-message.player-two p.chat-fx-hearts::before {
  right: auto;
  left: 10px;
}

@keyframes cp-whisper-in {
  from { opacity: 0; filter: blur(4px); letter-spacing: 0.3em; }
  to { opacity: 0.86; filter: none; letter-spacing: 0.06em; }
}

@keyframes cp-emphasis-in {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: none; }
}

@keyframes cp-tremble {
  0% { transform: translate(0.6px, -0.5px); }
  50% { transform: translate(-0.6px, 0.5px); }
  100% { transform: translate(0.4px, 0.6px); }
}

@keyframes cp-hearts-float {
  0%, 100% { transform: translateY(0); opacity: 0.95; }
  50% { transform: translateY(-4px); opacity: 0.7; }
}

/* ---------- 吹き出しへのリアクション ---------- */

.chat-react-toggle {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--vs-mist, #bfaabb);
  background: rgba(255, 255, 255, 0.05);
  opacity: 0.7;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.chat-react-toggle::before {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  content: "";
  background: currentColor;
  -webkit-mask: var(--cp-icon-react) center / contain no-repeat;
  mask: var(--cp-icon-react) center / contain no-repeat;
}

.chat-react-toggle[aria-expanded="true"],
.chat-react-toggle:hover,
.chat-react-toggle:focus-visible {
  color: var(--vs-rose-soft, #ff8ab6);
  background: rgba(255, 63, 134, 0.14);
  opacity: 1;
}

.chat-reaction-sticker {
  position: absolute;
  z-index: 4;
  right: -10px;
  bottom: -14px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #1f1423;
  box-shadow: 0 0 0 2px var(--cp-react-color), 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.chat-message.player-two .chat-reaction-sticker {
  right: auto;
  left: -10px;
}

.chat-reaction-sticker::before {
  width: 17px;
  height: 17px;
  content: "";
  background: var(--cp-react-color);
  -webkit-mask: var(--cp-react-icon) center / contain no-repeat;
  mask: var(--cp-react-icon) center / contain no-repeat;
}

.chat-reaction-sticker.is-fresh {
  animation: cp-sticker-pop 620ms var(--vs-ease-snap, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

@keyframes cp-sticker-pop {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.25) rotate(8deg); }
  100% { transform: none; }
}

:is(.chat-reaction-sticker, .chat-react-option).is-kiss { --cp-react-color: #ff3f86; --cp-react-icon: var(--cp-icon-lips); }
:is(.chat-reaction-sticker, .chat-react-option).is-crown { --cp-react-color: #f2c867; --cp-react-icon: var(--cp-icon-crown); }
:is(.chat-reaction-sticker, .chat-react-option).is-heart { --cp-react-color: #ff7aa8; --cp-react-icon: var(--cp-icon-heart); }
:is(.chat-reaction-sticker, .chat-react-option).is-tear { --cp-react-color: #8fd3ff; --cp-react-icon: var(--cp-icon-tear); }
:is(.chat-reaction-sticker, .chat-react-option).is-bolt { --cp-react-color: #ffd34d; --cp-react-icon: var(--cp-icon-bolt); }

.chat-react-picker {
  display: flex;
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px;
  border-radius: 999px;
  background: var(--vs-night-3, #1f1423);
  box-shadow: inset 0 0 0 1px rgba(248, 238, 242, 0.12), 0 8px 20px rgba(0, 0, 0, 0.45);
  animation: cp-picker-in 200ms var(--vs-ease-out, ease-out) both;
}

.chat-message.player-two .chat-react-picker {
  margin-left: auto;
}

.chat-react-option {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
}

.chat-react-option::before {
  width: 22px;
  height: 22px;
  content: "";
  background: var(--cp-react-color);
  -webkit-mask: var(--cp-react-icon) center / contain no-repeat;
  mask: var(--cp-react-icon) center / contain no-repeat;
}

.chat-react-option[aria-pressed="true"],
.chat-react-option:hover,
.chat-react-option:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.chat-react-remove {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--vs-mist, #bfaabb);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  font-weight: 700;
}

@keyframes cp-picker-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- 入力中 ---------- */

.chat-typing {
  display: flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 15px 6px;
  color: var(--vs-mist, #bfaabb);
  font-size: 0.7rem;
}

.chat-typing[hidden] {
  display: none;
}

.chat-typing-dots {
  display: inline-flex;
  gap: 3px;
}

.chat-typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vs-rose-soft, #ff8ab6);
  animation: cp-typing-dot 1100ms ease-in-out infinite;
}

.chat-typing-dots i:nth-child(2) { animation-delay: 160ms; }
.chat-typing-dots i:nth-child(3) { animation-delay: 320ms; }

@keyframes cp-typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.vb-chat-peek-text.is-typing {
  color: var(--vs-rose-soft, #ff8ab6);
}

/* ---------- 言い方のチップ ---------- */

.chat-effect-picker {
  display: flex;
  gap: 6px;
  padding: 8px 11px 0;
  overflow-x: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  scrollbar-width: none;
}

.chat-effect-picker::-webkit-scrollbar {
  display: none;
}

.chat-effect-chip {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--vs-mist, #bfaabb);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(248, 238, 242, 0.1);
  font-size: 0.72rem;
  font-weight: 700;
}

.chat-effect-chip[aria-pressed="true"] {
  color: var(--vs-pearl, #f8eef2);
  background: linear-gradient(135deg, rgba(255, 63, 134, 0.38), rgba(138, 26, 69, 0.6));
  box-shadow: inset 0 0 0 1px rgba(255, 138, 182, 0.65), 0 0 12px rgba(255, 63, 134, 0.3);
}

.chat-effect-chip.is-whisper { letter-spacing: 0.08em; font-weight: 500; }
.chat-effect-chip.is-emphasis { font-weight: 900; }
.chat-effect-chip.is-hearts::after { margin-left: 2px; content: "♡"; }

.chat-form.has-effect .chat-input {
  box-shadow: inset 0 0 0 1px rgba(255, 138, 182, 0.55);
}

/* ---------- 名場面カード：相手からの許可のお願い ---------- */

.share-consent-ask {
  display: grid;
  gap: 10px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border-radius: 16px;
  text-align: left;
  background: linear-gradient(135deg, rgba(92, 15, 46, 0.6), rgba(31, 20, 35, 0.9));
  box-shadow: inset 0 0 0 1px rgba(255, 138, 182, 0.35);
}

.share-consent-ask p {
  margin: 0;
  color: var(--vs-pearl, #f8eef2);
  font-size: 0.82rem;
  line-height: 1.6;
}

.share-consent-ask div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-consent-ask[hidden] {
  display: none;
}

/* ---------- 名場面カードの画面 ---------- */

.share-card-dialog {
  width: min(960px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  color: var(--vs-pearl, #f8eef2);
  background: var(--vs-night-2, #160e1a);
  box-shadow: 0 0 0 1px rgba(230, 193, 122, 0.24), 0 30px 80px rgba(0, 0, 0, 0.7);
}

.share-card-dialog::backdrop {
  background: rgba(7, 5, 10, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.share-card-sheet {
  display: grid;
  max-height: calc(100dvh - 24px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.share-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.share-card-head span {
  color: var(--vs-rose-soft, #ff8ab6);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.share-card-head h2 {
  margin: 2px 0 0;
  font-family: var(--ha-font-display, sans-serif);
  font-size: 1.35rem;
  font-weight: 400;
}

.share-card-close {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--vs-mist, #bfaabb);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.2rem;
}

.share-card-lead,
.share-card-note {
  margin: 0;
  color: var(--vs-mist, #bfaabb);
  font-size: 0.74rem;
  line-height: 1.6;
}

.share-card-note {
  color: var(--vs-dim, #8a7486);
  font-size: 0.68rem;
}

.share-card-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(248, 238, 242, 0.08);
}

.share-card-consent p {
  margin: 0;
  flex: 1 1 220px;
  color: var(--vs-mist, #bfaabb);
  font-size: 0.74rem;
  line-height: 1.55;
}

.share-card-consent.is-granted {
  box-shadow: inset 0 0 0 1px rgba(111, 227, 207, 0.4);
}

.share-card-consent.is-granted p {
  color: var(--vs-mint, #6fe3cf);
}

.share-card-body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.share-card-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.share-card-count {
  position: sticky;
  z-index: 1;
  top: 0;
  margin: 0 0 6px;
  padding: 4px 0;
  color: var(--vs-gold, #e6c17a);
  background: var(--vs-night-2, #160e1a);
  font-size: 0.72rem;
  font-weight: 700;
}

.share-card-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 6px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(248, 238, 242, 0.06);
}

.share-card-pick:has(input:checked) {
  background: rgba(255, 63, 134, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 182, 0.45);
}

.share-card-pick:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

.share-card-pick input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--vs-rose, #ff3f86);
}

.share-card-pick span {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.share-card-pick b {
  color: var(--vs-dim, #8a7486);
  font-size: 0.66rem;
}

.share-card-pick.is-remote b {
  color: var(--vs-violet, #a88bff);
}

.share-card-preview {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.share-card-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.76rem;
}

.share-card-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.share-card-options input {
  width: 18px;
  height: 18px;
  accent-color: var(--vs-rose, #ff3f86);
}

.share-card-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
  border-radius: 14px;
  background: #0b0710;
  box-shadow: 0 0 0 1px rgba(248, 238, 242, 0.08);
}

.share-card-preview {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.share-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.share-card-actions .button {
  min-width: 140px;
}

@media (max-width: 760px) {
  .share-card-dialog {
    width: 100%;
    max-height: 100dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }

  /* スマホはシート全体をスクロールし、プレビューを横幅いっぱいに見せる */
  .share-card-sheet {
    display: block;
    max-height: 94dvh;
    padding: 18px 14px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .share-card-sheet > * + * {
    margin-top: 12px;
  }

  .share-card-body {
    display: block;
  }

  .share-card-list {
    max-height: 38dvh;
  }

  .share-card-preview {
    margin-top: 14px;
    overflow: visible;
  }

  .share-card-canvas {
    max-height: none;
  }

  .share-card-actions {
    position: sticky;
    z-index: 2;
    bottom: 0;
    margin-inline: -14px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to bottom, rgba(22, 14, 26, 0), var(--vs-night-2, #160e1a) 30%);
  }

  .share-card-actions .button {
    flex: 1 1 0;
    min-width: 0;
  }

  .share-card-note {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-fx-char,
  .chat-message p.chat-fx-hearts::before,
  .chat-typing-dots i {
    animation: none;
  }

  .chat-message p.chat-fx-whisper.is-entering,
  .chat-message p.chat-fx-emphasis.is-entering,
  .chat-reaction-sticker.is-fresh,
  .chat-react-picker {
    animation: none;
  }
}