/* =========================================================================
   この作品に寄せられた感想

   ふきだしはテーマの .speech-bubble には乗せず、ここで持つ。
   あちらは診断ページ用で、左に立つキャラクターを避けるための
   margin-top: 80px と、そのキャラクターを指す左向きのしっぽが付いている。
   作品ページには左に誰も居ないので、余白もしっぽの向きも合わない。

   しっぽは三角を 2 枚重ねて描く。外側（黒）→ 内側（地色）の順。
   内側はふきだしの枠線に 1px 食い込ませて、口が開いて見えるようにする。
   ========================================================================= */

.voices {
    /* 縁にのぞくタビィくんの置き場所（nono-tabby プラグインの assets/tabby.css が使う）の基準 */
    position: relative;
    --voices-line: #000;
    --voices-paper: #fff;
    --voices-soft: antiquewhite;
    --voices-reply: #f7f1e8;
    --voices-mark: #b3424a;
    /* しっぽの大きさ。外側・内側・枠線ぶんの差 */
    --voices-tail: 20px;
    --voices-tail-in: 14px;
    --voices-ease: cubic-bezier(.22, 1, .36, 1);
    /* 少し行き過ぎて戻る。native app の「ぽん」と出る感じ */
    --voices-spring: cubic-bezier(.22, 1.2, .36, 1);

    display: grid;
    gap: 18px;
    /* 上の縁にタビィくんがのぞくので、上は広めに */
    margin: 88px auto 48px;
    max-width: 720px;
    padding: 26px 22px;
    border: 3px solid var(--voices-line);
    border-radius: 20px;
    background-color: var(--voices-paper);
}

/* display を指定した要素は、そのままでは hidden で消えない */
.voices [hidden] {
    display: none !important;
}

/* ── 見出し ───────────────────────── */

.voices__head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    font-size: clamp(20px, 5vw, 26px);
    text-align: center;
}

.voices__head-count {
    font-size: 13px;
    font-weight: normal;
    opacity: .6;
}

.voices__head-number {
    font-family: var(--font-din, inherit);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

/* ── クイック感想の集計 ───────────────── */

.voices__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * チップの見た目。
 * JavaScript が動くと、li の中身がそのまま button に包み直される。
 * どちらでも同じ形に見えるよう、見た目は 2 つの名前で共有する。
 */
.voices__tag,
.voices__tag-hit {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    margin: 0;
    padding: 6px 14px;
    border: 2px solid var(--voices-line);
    border-radius: 999px;
    background-color: var(--voices-soft);
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
}

.voices__tag-count {
    font-family: var(--font-din, inherit);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* ボタンに変わった li は、器だけになる */
.voices__tag--button {
    padding: 0;
    border: 0;
    background: none;
}

/* 押せることを見た目でも伝える */
.voices__tag-hit {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform .16s var(--voices-spring),
        background-color .16s ease,
        color .16s ease,
        box-shadow .16s ease;
}

.voices__tag-hit:hover {
    box-shadow: 0 2px 0 var(--voices-line);
    transform: translateY(-2px);
}

.voices__tag-hit:focus-visible {
    outline: 3px solid var(--voices-mark);
    outline-offset: 3px;
}

.voices__tag-hit:active {
    box-shadow: none;
    transform: translateY(0) scale(.94);
}

.voices__tag-hit[aria-pressed="true"] {
    background-color: var(--voices-line);
    color: var(--voices-paper);
}

/* 押した瞬間だけ跳ねる */
.voices__tag-hit.is-pop {
    animation: voices-pop .34s var(--voices-spring);
}

@keyframes voices-pop {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.14);
    }

    100% {
        transform: scale(1);
    }
}

/* ── 絞り込みの結果を伝える一行 ─────────── */

.voices__said {
    margin: -6px 0 0;
    font-size: 13px;
    text-align: center;
    opacity: .7;
}

.voices__said:empty {
    display: none;
}

/* 読み上げ用。常に置いておく（空でも消さない） */
.voices__said-sr {
    position: absolute;
    overflow: hidden;
    margin: 0;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── 感想 ─────────────────────────── */

.voices__list {
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.voices__item {
    display: grid;
    gap: 0;
}

/* ── ふきだし ─────────────────────── */

.voices__bubble {
    position: relative;
    /* しっぽのぶんを自分で抱える。下の行と重ならないように */
    margin: 0 0 26px;
    padding: 16px 18px;
    border: 3px solid var(--voices-line);
    border-radius: 16px;
    background-color: var(--voices-paper);
    font-size: 16px;
}

.voices__bubble::before,
.voices__bubble::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}

/* 外側の黒。左下から左へ流れる */
.voices__bubble::before {
    bottom: calc(var(--voices-tail) * -1);
    left: 26px;
    border-width: var(--voices-tail) var(--voices-tail) 0 0;
    border-top-color: var(--voices-line);
}

/* 内側の地色。枠線に 1px 食い込ませて口を開ける */
.voices__bubble::after {
    bottom: calc((var(--voices-tail-in) - 1px) * -1);
    left: 29px;
    border-width: var(--voices-tail-in) var(--voices-tail-in) 0 0;
    border-top-color: var(--voices-paper);
}

.voices__text {
    margin: 0;
    line-height: 1.75;
}

.voices__item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

/* 本文があるときだけ、タグを下にずらす */
.voices__text + .voices__item-tags {
    margin-top: 12px;
}

.voices__item-tag {
    padding: 2px 10px;
    border: 1px solid rgba(51, 34, 30, .3);
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
}

/* ── 名前の行 ─────────────────────── */

.voices__by {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    /* しっぽの行き先に合わせて、少し内へ */
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
}

.voices__name {
    font-weight: bold;
}

.voices__when {
    opacity: .55;
}

.voices__fresh {
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--voices-mark);
    color: var(--voices-paper);
    font-size: 10px;
    font-weight: bold;
}

/* ── 翻訳のリンク ─────────────────── */

/*
 * Bluesky と同じく、押すと Google 翻訳が開く。
 * 名前の行の右端に置く。字が読めない人にも「文A」の形で伝わるよう、しるしを付ける
 */
.voices__translate {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    align-self: center;
    /* 指で押せる大きさ（24px 以上）を保つ */
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(51, 34, 30, .25);
    border-radius: 999px;
    color: inherit;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform .16s var(--voices-spring),
        border-color .16s ease,
        background-color .16s ease;
}

.voices__translate:hover,
.voices__translate:focus-visible {
    border-color: var(--voices-line);
    background-color: var(--voices-soft);
}

.voices__translate:focus-visible {
    outline: 3px solid var(--voices-mark);
    outline-offset: 2px;
}

.voices__translate:active {
    transform: scale(.94);
}

.voices__translate-icon {
    flex: none;
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* 長い感想は、Google に 1 回で渡せる長さで分けて、リンクが複数になる。束ねて右端に置く */
.voices__translate-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-self: center;
    margin-left: auto;
}

/* 「1/2」。ラベルより控えめに */
.voices__translate-part {
    font-family: var(--font-din, inherit);
    font-variant-numeric: tabular-nums;
    opacity: .7;
}

/* 返事の中では右下に */
.voices__reply .voices__translate-group {
    justify-self: end;
    margin: 6px 0 0;
}

/* ── 穴熊本舗からの返事 ───────────────── */

.voices__reply {
    position: relative;
    justify-self: end;
    display: grid;
    gap: 2px;
    max-width: min(86%, 460px);
    margin: 26px 0 0;
    padding: 12px 16px;
    border: 3px solid var(--voices-line);
    border-radius: 16px;
    background-color: var(--voices-reply);
    font-size: 13px;
}

.voices__reply::before,
.voices__reply::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
}

/* 右上から右へ。届いた言葉のほうを向く */
.voices__reply::before {
    top: calc(var(--voices-tail) * -1);
    right: 26px;
    border-width: 0 0 var(--voices-tail) var(--voices-tail);
    border-bottom-color: var(--voices-line);
}

.voices__reply::after {
    top: calc((var(--voices-tail-in) - 1px) * -1);
    right: 29px;
    border-width: 0 0 var(--voices-tail-in) var(--voices-tail-in);
    border-bottom-color: var(--voices-reply);
}

.voices__reply-who {
    color: var(--voices-mark);
    font-size: 11px;
    font-weight: bold;
}

/* ── あふれた分の続き ─────────────────── */

.voices__more {
    margin: 0;
}

.voices__more-open {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 40px;
    padding: 8px 20px;
    border: 2px solid rgba(51, 34, 30, .3);
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform .16s var(--voices-spring),
        border-color .16s ease,
        background-color .16s ease;
}

/* Safari は summary の三角を別の名前で出す */
.voices__more-open::-webkit-details-marker {
    display: none;
}

.voices__more-open:hover,
.voices__more-open:focus-visible {
    border-color: var(--voices-line);
    background-color: var(--voices-soft);
}

.voices__more-open:active {
    transform: scale(.96);
}

/* 開き具合を示すしるし。開くと上を向く */
.voices__more-mark {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .28s var(--voices-ease);
}

.voices__more[open] .voices__more-mark {
    transform: translateY(2px) rotate(225deg);
}

/* 開くまでは「見る」、開いたら「閉じる」 */
.voices__more-done,
.voices__more[open] .voices__more-shut {
    display: none;
}

.voices__more[open] .voices__more-done {
    display: inline;
}

.voices__list--rest {
    /* 高さを動かして開くので、はみ出しは切る */
    overflow: hidden;
    margin-top: 26px;
}

/* 絞り込み中は全部を出しておく。続きが隠れていると数が合わない */
.voices.is-filtering .voices__more-open {
    display: none;
}

/* 見出しの「ほかに N 件」が消えるぶん、詰める */
.voices.is-filtering .voices__list--rest {
    margin-top: 8px;
}

/* ── 書く導線 ─────────────────────── */

.voices__invite {
    margin: 0;
    text-align: center;
}

.voices__invite-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 22px;
    border: 2px solid var(--voices-line);
    border-radius: 999px;
    color: inherit;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        transform .16s var(--voices-spring),
        background-color .16s ease,
        color .16s ease;
}

.voices__invite-link:hover,
.voices__invite-link:focus-visible {
    background-color: var(--voices-mark);
    color: var(--voices-paper);
}

.voices__invite-link:active {
    transform: scale(.96);
}

/* ── 出てくるところ ─────────────────── */

/*
 * is-ready は JavaScript が付ける。
 * 付かなければ最初から見えている状態のままなので、
 * スクリプトが届かない相手にも中身は残る。
 */

/* 感想は下から。タグは小さく縮んだところから */
.voices.is-ready .voices__item {
    opacity: 0;
    transform: translateY(14px) scale(.97);
}

.voices.is-ready .voices__tag {
    opacity: 0;
    transform: translateY(8px) scale(.9);
}

.voices.is-ready .voices__item.is-in,
.voices.is-ready .voices__tag.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity .34s ease,
        transform .5s var(--voices-spring);
}

/*
 * --i は並び順。少しずつ遅らせて、ぱらぱらと出す。
 * 件数が多い作品で最後の 1 件が何秒も待たされないよう、頭打ちにする
 */
.voices.is-ready .voices__item.is-in {
    transition-delay: calc(min(var(--i, 0), 6) * 70ms);
}

.voices.is-ready .voices__tag.is-in {
    transition-delay: calc(min(var(--i, 0), 8) * 45ms);
}

/* ── 画面が狭いとき ─────────────────── */

@media (max-width: 600px) {

    .voices {
        margin-inline: 12px;
        padding: 20px 16px;
    }

    .voices__reply {
        max-width: 100%;
    }
}

/* ── 動きを減らす設定のとき ───────────── */

@media (prefers-reduced-motion: reduce) {

    .voices *,
    .voices *::before,
    .voices *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }

    .voices.is-ready .voices__item,
    .voices.is-ready .voices__tag {
        opacity: 1;
        transform: none;
    }
}

/* ── 感想がまだ無い作品（誘いのカード） ───── */

.voices--empty {
    gap: 10px;
    padding: 22px 22px 24px;
    text-align: center;
}

.voices--empty .voices__head {
    font-size: clamp(17px, 4.4vw, 21px);
    line-height: 1.5;
}

.voices__lead {
    margin: 0;
    font-size: 14px;
    opacity: .75;
}

/*
 * タビィくんの台（nono-tabby プラグインがのぞかせる）。プラグインの CSS が読み込まれないとき
 * （タビィくんを切っているとき・プラグインを無効にしているとき）も、空の要素が余白を作らないようにしておく
 */
.voices__perch {
    position: absolute;
}