/* 視聴の途中に出す「気に入りましたか？」の札（/like-prompt.mjs）。動画の右上に小さく出す。再生は止めない。 */
/* 下の端には字幕（ページが重ねる字幕・::cue）と操作の棒が出るので重ねない。左上は文字の重ねの層の章の題字が出るので、小さな札だけの右上にする。 */
/* 色は生成AI塾の紙 #f6f3eb・朱 #a53924・紺 #1f3a6b。丸い札に小さな絵と額のシール、出るときに軽く弾む（動きを減らす設定の人には動きなし）。 */
/* 枠の並び（grid）から外して重ねる：札の高さで動画の行が伸びて動画が動かないように。grid-area の行 1（動画）が置き場の箱になる。 */
.w-frame,.watch-frame{position:relative}
.like-prompt{grid-area:1/1/2/-1;position:absolute;top:12px;right:12px;z-index:4;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;width:max-content;max-width:calc(100% - 24px);margin:0;padding:6px 6px 6px 7px;border:2px solid #fff;border-radius:999px;background:#f6f3eb;color:#1f3a6b;box-shadow:0 3px 0 rgba(31,58,107,.16),0 6px 16px rgba(20,14,8,.18);font:13px/1.35 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;text-align:left;transform-origin:88% 0;animation:like-prompt-pop .5s cubic-bezier(.34,1.56,.64,1) backwards}
.like-prompt.is-staged{position:absolute;top:12px;right:12px;margin:0}
.like-prompt-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #efe6d6}
.like-prompt-icon svg{width:24px;height:24px;animation:like-prompt-wiggle .7s .45s ease-in-out}
.like-prompt-text{min-width:0}
.like-prompt-title{margin:0;font-size:14px;line-height:1.3;font-weight:800;letter-spacing:.01em;color:#1f3a6b}
.like-prompt-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;margin:2px 0 0;font-size:12px;line-height:1.3;color:#4a4038;font-weight:600}
.like-prompt-sticker{display:inline-block;padding:2px 9px 2px 8px;font-size:12.5px;letter-spacing:.02em;border-radius:999px;background:#a53924;color:#fff;font-weight:800;white-space:nowrap;transform:rotate(-3deg);box-shadow:0 0 0 2px #fff,0 2px 0 2px rgba(31,58,107,.14)}
.like-prompt-share{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:40px;padding:0 12px 0 16px;border:0;border-radius:999px;background:#a53924;color:#fff;font-weight:700;font-size:13px;line-height:1.2;font-family:inherit;white-space:nowrap;cursor:pointer;transition:background .15s,transform .15s}
.like-prompt-share:hover{background:#8e3020}
.like-prompt-share:active{transform:scale(.96)}
.like-prompt-arrow{width:16px;height:16px;flex:none;transition:transform .2s}
/* 閉じた札は、どこを押しても「友達に教える」（押せる所を大きく）。× は上に重ねる。 */
.like-prompt:not(.is-open) .like-prompt-share::after{content:"";position:absolute;inset:0;border-radius:inherit}
.like-prompt:not(.is-open):hover{background:#fbf7ef}
.like-prompt-share[aria-expanded=true]{background:#fff;color:#a53924;box-shadow:inset 0 0 0 2px #a53924}
.like-prompt-share[aria-expanded=true] .like-prompt-arrow{transform:rotate(90deg)}
.like-prompt-close{position:absolute;top:-8px;right:-6px;z-index:1;display:grid;place-items:center;width:26px;height:26px;padding:0;border:2px solid #f6f3eb;border-radius:50%;background:#1f3a6b;color:#fff;font:700 15px/1 system-ui,sans-serif;cursor:pointer}
.like-prompt-close:hover{background:#2c4f8f}
.like-prompt-share:focus-visible,.like-prompt-close:focus-visible,.like-prompt-collapse:focus-visible,.like-prompt-login:focus-visible{outline:3px solid #1f3a6b;outline-offset:2px}
/* 開いた中：PC 幅では札がその場で広がる。高さは動画の上 45% まで（下の字幕と操作の棒に届かない）。入りきらない分は中で送る。 */
.like-prompt.is-open{border-radius:22px;width:min(440px,calc(100% - 24px));max-height:calc(45% - 12px);grid-template-rows:auto minmax(0,1fr);padding:10px 10px 12px}
.like-prompt.is-open .like-prompt-panel{min-height:0;align-self:stretch}
.like-prompt-panel{grid-column:1/-1;max-height:min(260px,50vh);overflow:auto;margin-top:10px;padding-top:10px;border-top:2px dashed #e6dccb}
.like-prompt-panel[hidden]{display:none}
.like-prompt-sheet-head{display:none}
.like-prompt-sheet-title{font-size:15px;font-weight:800;color:#1f3a6b}
.like-prompt-collapse{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#ece4d6;color:#1f3a6b;font:700 18px/1 system-ui,sans-serif;cursor:pointer}
.like-prompt .share-options{gap:2px}
.like-prompt .share-option{font-size:12px}
.like-prompt-detail{margin-top:10px;font-size:11.5px;line-height:1.55;color:#5c5249;font-weight:400}
.like-prompt-detail p{margin:0 0 3px}
/* 説明は「名札＋額」の並び（文の途中に額を挟まない）。額は小さなシール。 */
.like-prompt-detail .like-prompt-term{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 5px;padding:5px 6px 5px 10px;border-radius:12px;background:#fff;color:#4a4038;font-weight:600}
.like-prompt-detail .like-prompt-amount{flex:none;padding:1px 8px;border-radius:999px;background:#a53924;color:#fff;font-weight:800;white-space:nowrap}
.like-prompt-login{color:#a53924;font-weight:800}
.like-prompt-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@keyframes like-prompt-pop{0%{opacity:0;transform:translateY(-12px) scale(.82)}60%{opacity:1;transform:translateY(-3px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes like-prompt-wiggle{0%,100%{transform:none}30%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(8deg)}}
@keyframes like-prompt-sheet{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:560px){
  .like-prompt,.like-prompt.is-staged{top:10px;right:8px}
  /* スマホ幅：閉じた札は高さ 50px ほど・動画の面積の 2 割以内。ボタンは丸い矢印だけ（名前は読み上げに残す）。 */
  /* 条件の名札（「友達が見放題に申し込むと、…」）は「…」で削らず、長いときは折り返して額のシールを次の行に置く（条件が読めないまま額だけ残さない）。 */
  /* 見出し「気に入りましたか？」はスマホ幅でも必ず見せる（利用者が頼んだ言葉）。幅は動画の 78% まで（高さ 48px で面積の 2 割以内）。 */
  /* 左上の章の題字に少し掛かることがあるが、札は 15 秒で消える。 */
  .like-prompt,.like-prompt.is-open{width:max-content;max-width:min(78%,300px);max-height:none;column-gap:7px;padding:5px;border-radius:26px}
  .like-prompt-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .like-prompt-line{flex-wrap:wrap}
  .like-prompt-line>span:first-child{min-width:0;white-space:normal}
  .like-prompt-sticker{flex:none}
  .like-prompt-icon{width:30px;height:30px}
  .like-prompt-icon svg{width:19px;height:19px}
  .like-prompt-title{font-size:12px}
  .like-prompt-line{margin-top:1px;font-size:11px;gap:2px 4px}
  .like-prompt-sticker{padding:1px 6px;font-size:11px;letter-spacing:0}
  .like-prompt-share{width:34px;min-height:34px;padding:0}
  .like-prompt-share-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .like-prompt-arrow{width:18px;height:18px}
  .like-prompt-close{top:-9px;right:-7px;width:24px;height:24px;font-size:14px}
  /* 開いた中は、動画の上ではなく画面の下から出る小さなシート。 */
  .like-prompt-panel{position:fixed;left:0;right:0;bottom:0;z-index:1000;max-height:70vh;margin:0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border:0;border-radius:22px 22px 0 0;background:#f6f3eb;box-shadow:0 -6px 24px rgba(20,14,8,.22);animation:like-prompt-sheet .28s ease-out}
  .like-prompt-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .like-prompt-detail{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.like-prompt,.like-prompt-icon svg,.like-prompt-panel{animation:none}.like-prompt-share,.like-prompt-arrow{transition:none}}