/* Proselytize modal. */

/* Library card 布教 button. */
.game-card__proselytize {
  margin-top: 6px;
}

.proselytize-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: 10px;
  background-color: var(--color-deep-dark);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: all 0.15s ease;
}

.proselytize-btn .fa-bullhorn {
  flex-shrink: 0;
}

/* "布教中 XXX / YYY / ZZZ" — truncate with ellipsis when long. */
.proselytize-btn__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proselytize-btn:hover {
  background-color: rgba(102, 192, 244, 0.12);
  color: var(--color-steam-blue);
  border-color: rgba(102, 192, 244, 0.3);
}

/* 布教中: keep the same button surface as the pre-proselytize state, but tint
   the icon and the "布教中:" prefix blue. Target titles stay the normal color. */
.proselytize-btn.is-active .fa-bullhorn,
.proselytize-btn__state {
  color: var(--color-steam-blue);
}

.proselytize-btn__state {
  flex-shrink: 0;
  font-weight: 700;
}

/* Modal shell. */
.proselytize-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proselytize-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
}

/* The panel is a fixed header + scrolling body + fixed footer: the form grew to
   six sections (4.1.7), so 布教する must stay reachable without scrolling to
   the bottom. Padding lives on the three regions, not the panel, so the
   scrollbar runs the full height.

   The desktop width is deliberately wide (760px): the chip rows — target games,
   12 reason tags, AI keywords — are what drive the height, and giving them more
   room to sit side by side is what removes the scrollbar. `max-width: 92vw`
   collapses it back on phones, where the single column is already fine.

   760px の根拠: 理由タグ 12 個（12px Noto Sans JP・padding 10px・gap 6px）は
   2 行目が 674px で、720px だとスクロールバー 5px を引いた本文幅 675px との差が
   1px しかなく実際には 3 行目へ折れる。760px なら 2 行目に 40px ほど余裕がある。 */
.proselytize-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-dark-blue);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  box-shadow: var(--shadow-elevated);
  width: 760px;
  max-width: 92vw;
  max-height: 92vh;
  overflow: hidden;
  padding: 0;
}

.proselytize-modal__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--color-divider);
}

.proselytize-modal__image {
  width: 80px;
  height: 37px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.proselytize-modal__heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.proselytize-modal__label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.proselytize-modal__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proselytize-modal__close-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.proselytize-modal__close-btn:hover {
  color: var(--color-text-white);
}

.proselytize-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  /* The browser default scrollbar is a wide light bar, which reads as a
     detached strip laid over the dark panel. Same thin dark treatment the
     sidebar and recommendation lists use, so it sits in the surface instead. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-gray) transparent;
}

.proselytize-modal__body::-webkit-scrollbar,
.proselytize-modal__done-body::-webkit-scrollbar {
  width: 5px;
}

.proselytize-modal__body::-webkit-scrollbar-thumb,
.proselytize-modal__done-body::-webkit-scrollbar-thumb {
  background: var(--color-blue-gray);
  border-radius: 3px;
}

.proselytize-modal__body::-webkit-scrollbar-thumb:hover,
.proselytize-modal__done-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.proselytize-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.proselytize-modal__field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-light);
}

.proselytize-modal__hint {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Selected target chips sit inline with the search box and wrap together. */
.proselytize-modal__target-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.proselytize-modal__targets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proselytize-modal__targets:empty {
  display: none;
}

.proselytize-target {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 10px;
  background-color: rgba(102, 192, 244, 0.12);
  color: var(--color-steam-blue);
  border: 1px solid rgba(102, 192, 244, 0.2);
}

.proselytize-target__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0.75rem;
  line-height: 1;
  border: none;
  background: none;
  color: var(--color-steam-blue);
  opacity: 0.5;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
}

.proselytize-target__remove:hover {
  opacity: 1;
  background-color: rgba(102, 192, 244, 0.2);
}

/* Target search. Flexes to fill whatever the chips leave on the row, and drops
   to its own line once that would get too narrow to type in. */
.proselytize-modal__search-wrap {
  position: relative;
  flex: 1 1 180px;
  min-width: 180px;
}

.proselytize-modal__search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-text-dark-muted);
  pointer-events: none;
}

.proselytize-modal__search {
  width: 100%;
  padding: 10px 12px 10px 30px;
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  color: var(--color-text-light);
  font-size: 0.875rem;
  font-family: var(--font-primary);
}

.proselytize-modal__search::placeholder {
  color: var(--color-text-dark-muted);
}

.proselytize-modal__search:focus {
  outline: none;
  border-color: var(--color-steam-blue);
  box-shadow: var(--shadow-focus);
}

.proselytize-modal__search:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.proselytize-modal__suggest {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

.proselytize-modal__suggest.is-open {
  display: block;
}

.proselytize-modal__suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--color-text-light);
  cursor: pointer;
}

.proselytize-modal__suggest-item:hover {
  background-color: var(--color-blue-gray);
  color: var(--color-text-white);
}

.proselytize-modal__suggest-thumb {
  width: 64px;
  height: 30px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background-color: var(--color-deep-dark);
}

.proselytize-modal__suggest-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rating + playtime, side by side (4.1.7). */
.proselytize-modal__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.proselytize-modal__field--rating,
.proselytize-modal__field--playtime {
  gap: 6px;
  padding: 10px 12px;
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
}

/* Both boxes grow, so the wide desktop panel does not leave the rating box
   mostly empty next to a small playtime chip. They stack once the row can no
   longer give each of them its basis. */
.proselytize-modal__field--rating {
  flex: 2 1 300px;
}

.proselytize-modal__field--playtime {
  flex: 1 1 180px;
  justify-content: flex-start;
}

.proselytize-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Five outline stars with a solid-star overlay clipped to a percentage width.
   Any fraction renders correctly (half steps now, finer later) without needing
   a different icon per star. */
.proselytize-rating__stars {
  position: relative;
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  border-radius: 4px;
}

.proselytize-rating__stars:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.proselytize-rating__base {
  display: flex;
  gap: 4px;
  font-size: 1.125rem;
  color: var(--color-border-subtle);
}

.proselytize-rating__fill {
  position: absolute;
  inset: 0;
  width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* max-content keeps the clipped row exactly as wide as the base row, so the
   percentage width maps 1:1 onto the stars. */
.proselytize-rating__fill-inner {
  display: flex;
  gap: 4px;
  width: max-content;
  font-size: 1.125rem;
  color: var(--color-steam-blue);
}

.proselytize-rating__stars.is-hovering .proselytize-rating__fill-inner {
  opacity: 0.6;
}

.proselytize-rating__value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-white);
}

.proselytize-rating__clear {
  padding: 2px 4px;
  background: none;
  border: none;
  font-size: 0.6875rem;
  font-family: var(--font-primary);
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.proselytize-rating__clear:hover {
  color: var(--color-text-light);
}

.proselytize-playtime {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-steam-blue);
}

.proselytize-playtime__value.is-empty {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Layout-only blocks (AI assist / X share). The controls are disabled until the
   features land — PROSELYTIZE_SPEC §7.5 / §7.6. */
.proselytize-modal__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 500;
  vertical-align: middle;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
}

.proselytize-modal .is-preview [disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.proselytize-modal__field--ai {
  gap: 8px;
  padding: 10px 12px;
  background-color: rgba(102, 192, 244, 0.04);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
}

.proselytize-modal__ai-icon {
  margin-right: 2px;
  color: var(--color-steam-blue);
}

.proselytize-modal__ai-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.proselytize-keyword {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-primary);
  border-radius: 10px;
  background-color: var(--color-deep-dark);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
}

.proselytize-keyword.is-selected {
  background-color: rgba(102, 192, 244, 0.18);
  border-color: var(--color-steam-blue);
  color: var(--color-steam-blue);
}

.proselytize-modal__ai-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proselytize-modal__ai-input {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-family: var(--font-primary);
  color: var(--color-text-light);
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
}

.proselytize-modal__ai-generate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-primary);
  border-radius: 10px;
  background-color: rgba(102, 192, 244, 0.15);
  color: var(--color-steam-blue);
  border: 1px solid rgba(102, 192, 244, 0.4);
  cursor: pointer;
}

.proselytize-modal__ai-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-size: 0.75rem;
  color: var(--color-text-dark-muted);
  border: 1px dashed var(--color-border-subtle);
  border-radius: 4px;
}

/* Replaces the placeholder box once drafts arrive, so the block only grows
   after a generation — an unused assist costs no vertical space. */
.proselytize-modal__ai-drafts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proselytize-draft {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
}

.proselytize-draft__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

.proselytize-draft__use {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-primary);
  border-radius: 10px;
  background-color: rgba(102, 192, 244, 0.15);
  color: var(--color-steam-blue);
  border: 1px solid rgba(102, 192, 244, 0.4);
  cursor: pointer;
}

.proselytize-modal__ai-note {
  margin: 0;
  font-size: 0.7rem;
  color: var(--color-text-dark-muted);
}

/* The assist button is disabled until a keyword is picked, and again while a
   generation is in flight or once the daily allowance is gone. */
.proselytize-modal__ai-generate[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.proselytize-modal__share {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
}

.proselytize-modal__share-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* flex-start だと素のチェックボックスはブロック上端に付き、タイトル1行目は
   line-height 分だけ下に描かれて上下がずれる。ブラウザ差のあるデフォルト
   マージンをリセットし、1行目（0.8125rem ≒ 18px の行箱）の中心に合わせる。 */
.proselytize-modal__share-toggle input[type="checkbox"] {
  flex-shrink: 0;
  margin: 4px 0 0;
}

.proselytize-modal__share-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.proselytize-modal__share-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-light);
}

.proselytize-modal__share-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-family: var(--font-primary);
  border-radius: 4px;
  background-color: transparent;
  color: var(--color-text-light);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
}

/* シェアトグルOFFの間は押せない。無効状態の見た目が有効時とほぼ同じだと
   気づけないので、押せないことがひと目で分かる濃度まで落とす
   （保存ボタンの :disabled と同じ流儀）。 */
.proselytize-modal__share-preview:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Reason chips (multi-select). */
.proselytize-modal__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proselytize-reason {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 10px;
  background-color: var(--color-deep-dark);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  font-family: var(--font-primary);
  transition: all 0.15s ease;
}

.proselytize-reason:hover {
  border-color: rgba(102, 192, 244, 0.3);
}

.proselytize-reason.is-selected {
  background-color: rgba(102, 192, 244, 0.12);
  color: var(--color-steam-blue);
  border-color: rgba(102, 192, 244, 0.3);
}

/* Comment. */
.proselytize-modal__comment {
  width: 100%;
  padding: 10px 12px;
  background-color: var(--color-deep-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  color: var(--color-text-light);
  font-size: 0.875rem;
  font-family: var(--font-primary);
  resize: vertical;
}

.proselytize-modal__comment::placeholder {
  color: var(--color-text-dark-muted);
}

.proselytize-modal__comment:focus {
  outline: none;
  border-color: var(--color-steam-blue);
  box-shadow: var(--shadow-focus);
}

.proselytize-modal__counter {
  align-self: flex-end;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* Actions. */
.proselytize-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--color-divider);
}

.proselytize-modal__error {
  flex: 1;
  font-size: 0.75rem;
  color: var(--color-danger, #d9534f);
}

.proselytize-modal__action {
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-primary);
  border: 1px solid var(--color-border-subtle);
}

.proselytize-modal__action--stop {
  margin-right: auto;
  background-color: transparent;
  color: var(--color-danger, #d9534f);
  border-color: var(--color-danger, #d9534f);
}

.proselytize-modal__action--stop:hover {
  background-color: rgba(217, 83, 79, 0.12);
}

.proselytize-modal__action--cancel {
  background-color: transparent;
  color: var(--color-text-light);
}

.proselytize-modal__action--cancel:hover {
  background-color: var(--color-deep-dark);
}

.proselytize-modal__action--save {
  background-color: var(--color-steam-blue);
  color: var(--color-text-white);
  border-color: var(--color-steam-blue);
  font-weight: 700;
}

.proselytize-modal__action--save:hover {
  filter: brightness(1.1);
}

.proselytize-modal__action--save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ---- X share: snapshot preview + done step ---- */

.proselytize-modal__share-preview-box {
  margin-top: 10px;
}

.proselytize-modal__share-preview-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--color-deep-dark);
}

/* Same header + scrolling body + pinned footer shape as the form: on a laptop
   viewport (~768px) the 2:1 card alone is ~356px, so title + card + share text
   + note + buttons overran the panel's 92vh and its overflow:hidden clipped the
   buttons with no way to scroll to them. */
.proselytize-modal__done {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* display:flex would beat normalize's [hidden]{display:none} (same specificity,
   loaded later), so restate it for the regions the JS toggles. */
.proselytize-modal__done[hidden],
.proselytize-modal__body[hidden],
.proselytize-modal__actions[hidden] {
  display: none;
}

.proselytize-modal__done-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue-gray) transparent;
}

.proselytize-modal__done-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
}

.proselytize-modal__done-title .fa-circle-check {
  color: var(--color-steam-blue);
}

/* 1200x630 = 2:1. Reserving the ratio keeps the async-loading card from
   reflowing the modal; the skeleton shimmer covers the wait. */
.proselytize-modal__done-card {
  position: relative;
  aspect-ratio: 2 / 1;
  /* Cap the card at ~35vh of height (2:1 → width 70vh) so a short laptop
     viewport still shows the share text under it without scrolling; on a
     tall screen min() picks 100% and nothing changes. */
  width: min(100%, 70vh);
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-deep-dark);
}

.proselytize-modal__done-card.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: proselytize-done-shimmer 1.2s linear infinite;
}

@keyframes proselytize-done-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.proselytize-modal__done-img {
  display: block;
  width: 100%;
  height: auto;
}

.proselytize-modal__done-card.is-loading .proselytize-modal__done-img {
  visibility: hidden;
}

.proselytize-modal__done-text {
  margin: 14px 0 4px;
  white-space: pre-wrap;
  line-height: 1.7;
}

.proselytize-modal__done-text:empty {
  display: none;
}

.proselytize-modal__done-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.proselytize-modal__done-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--color-divider);
}