/* ホームの配信コメント。配信元の埋め込みをそのまま表示する。 */
/* コメント欄は窓の幅に合わせて 215〜270px。MacBook Air の全画面（幅1470px）でも、3列で1枠が Twitch の決まりの400px以上になるように（2026-09-28 利用者の指示） */
.live-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(215px,calc(100vw - 1255px),270px);gap:8px;align-items:start;--tile-gap:8px}
.live-layout:not(.has-chat){display:block}
.live-layout .live-grid{align-content:start}
.live-chat{position:sticky;top:72px;height:max(430px,min(1120px,calc(100dvh - 82px)));display:flex;flex-direction:column;background:#0b0b0b;color:#fff;border:2px solid #000;min-width:0}
.live-chat[hidden]{display:none!important}
.live-chat .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid #383838}
.live-chat h3{font:400 22px/1.15 var(--display);margin:0}
.live-chat .hd span{font:900 11px/1 var(--text);background:#9146FF;color:#fff;padding:6px 8px;white-space:nowrap}
.live-chat .chat-current{display:grid;grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:8px;width:100%;min-height:64px;padding:8px 12px;border:0;border-bottom:2px solid #9146FF;background:#0b0b0b;color:#fff;text-align:left;cursor:pointer}
.live-chat .chat-current:hover,.live-chat .chat-current:focus-visible{background:#1b1524}
.live-chat .chat-current img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #9146FF}
.live-chat .chat-current span{min-width:0;display:block}
.live-chat .chat-current small{display:block;font:700 11px/1.3 var(--text);color:#bcbcc3}
.live-chat .chat-current strong{display:block;font:900 18px/1.3 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-chat .chat-current>b{font:900 26px/1 var(--text);color:#fff;transition:transform .15s}
.live-chat .chat-current[aria-expanded="true"]>b{transform:rotate(180deg)}
.live-chat .chat-choices{overflow-y:auto;max-height:310px;border-bottom:2px solid #9146FF}
.live-chat .chat-choices[hidden]{display:none!important}
.live-chat .chat-option{display:grid;grid-template-columns:32px minmax(0,1fr) 16px;gap:10px;align-items:center;width:100%;min-height:51px;padding:7px 14px;border:0;border-bottom:1px solid #343434;background:#0b0b0b;color:#fff;text-align:left;cursor:pointer}
.live-chat .chat-option:last-child{border-bottom:0}
.live-chat .chat-option:hover,.live-chat .chat-option:focus-visible{background:#222}
.live-chat .chat-option.selected{border-left:4px solid #9146FF;padding-left:10px;background:#1b1524}
.live-chat .chat-option img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.live-chat .chat-option strong{font:900 13px/1.3 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-chat .chat-option b{color:#c9a8ff}
.live-chat .chat-platforms{display:flex;gap:0;padding:10px 12px;border-bottom:1px solid #383838;background:#101010}
.live-chat .chat-platforms[hidden]{display:none!important}
.live-chat .chat-platform{flex:1;appearance:none;border:1px solid #454545;background:#171717;color:#ccc;padding:7px 4px;font:900 12px/1.2 var(--text);cursor:pointer}
.live-chat .chat-platform+.chat-platform{border-left:0}
.live-chat .chat-platform:hover,.live-chat .chat-platform:focus-visible{background:#252525;color:#fff}
.live-chat .chat-platform[aria-pressed="true"]{border-color:#9146FF;background:#291a3d;color:#fff;box-shadow:inset 0 -3px #9146FF}
.live-chat .chat-platform.ki[aria-pressed="true"]{border-color:#53fc18;background:#16230f;box-shadow:inset 0 -3px #53fc18}
.live-chat .chat-platform.yt[aria-pressed="true"]{border-color:#ff4242;background:#321414;box-shadow:inset 0 -3px #ff4242}
.live-chat .chat-body{flex:1;min-height:0;position:relative}
.live-chat iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.live-chat .chat-empty{padding:20px 16px;color:#dedee4;font:700 14px/1.6 var(--text)}
.live-chat .chat-foot{padding:10px 12px;border-top:1px solid #37373d}
.live-chat .chat-foot .ob{width:100%;justify-content:center}
.lv .meta{grid-template-columns:auto minmax(0,1fr) auto}
.lv .actions{grid-column:1 / -1;display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:7px}
.lv .actions button{appearance:none;border:1px solid #fff;background:#000;color:#fff;padding:6px 10px;font:900 12px var(--text);cursor:pointer}
.lv .actions button:hover,.lv .actions button:focus-visible{background:#fff;color:#000}
.lv .actions .chat-pick{border-color:#9146FF}

/* video iframe ではなく、この容器を全画面化するので右側のチャットも残る。 */
.live-fullscreen{display:none;background:#000;color:#fff}
.live-fullscreen:fullscreen,.live-fullscreen.is-fallback{display:flex;width:100vw;height:100dvh;inset:0}
.live-fullscreen.is-fallback{position:fixed;z-index:3000}
.live-fullscreen .screen-video{position:relative;flex:1;min-width:0;height:100%;background:#000}
.live-fullscreen .screen-video #screenVideo{width:100%;height:100%}
.live-fullscreen .screen-video iframe{display:block;width:100%;height:100%;border:0}
.live-fullscreen .screen-video .screen-controls{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;pointer-events:none}
.live-fullscreen .screen-controls button{pointer-events:auto;appearance:none;border:1px solid #fff;background:rgba(0,0,0,.86);color:#fff;padding:8px 12px;font:900 13px var(--text);cursor:pointer}
.live-fullscreen .screen-chat{width:clamp(310px,23vw,410px);height:100%;display:flex;flex-direction:column;min-width:0;border-left:2px solid #9146FF;background:#0f0f10}
.live-fullscreen .screen-chat[hidden]{display:none!important}
.live-fullscreen .screen-chat .hd{padding:15px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid #333}
.live-fullscreen .screen-chat h2{font:900 18px/1.35 var(--text);margin:0}
.live-fullscreen .screen-chat .hd button{appearance:none;border:0;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.live-fullscreen .screen-chat .chat-body{flex:1;min-height:0}
.live-fullscreen .screen-chat iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.live-fullscreen .screen-chat .chat-foot{padding:8px;border-top:1px solid #333}
.live-fullscreen .screen-chat .chat-foot .ob{width:100%;justify-content:center}
@media (max-width:1100px){.live-layout{grid-template-columns:minmax(0,1fr) 300px;gap:12px}}
@media (max-width:760px){
  .live-layout,.live-layout:not(.has-chat){display:block}
  .live-layout>.live-chat{display:none!important}
  .live-fullscreen .screen-chat{width:34vw;min-width:220px}
  .sp-live.sp-viewing .tiles>.tile:not(.chosen){display:none}
  .sp-live .sp-back-live{display:none}
  .sp-live.sp-viewing .sp-back-live{display:block;appearance:none;border:0;background:none;padding:0 0 12px;color:#000;text-decoration:underline;font:900 14px var(--text);cursor:pointer}
  .sp-live .sp-chat{display:none;background:#0f0f10;color:#fff}
  .sp-live.sp-viewing .tile.chosen .sp-chat{display:flex;flex-direction:column;height:min(540px,62dvh);min-height:340px}
  .sp-live .sp-chat .hd{padding:10px var(--gutter);border-top:2px solid #9146FF;font:900 15px var(--text)}
  .sp-live .sp-chat .bd{flex:1;min-height:0}
  .sp-live .sp-chat iframe{display:block;width:100%;height:100%;border:0;background:#fff}
  .sp-live .sp-chat .fallback{padding:15px var(--gutter);font:700 14px/1.6 var(--text)}
  .sp-live .sp-chat .foot{padding:8px var(--gutter)}
  .sp-live .sp-chat .foot .ob{width:100%;justify-content:center}
  .sp-live .meta .sp-chat-open{grid-column:1/-1;appearance:none;border:1px solid #9146FF;background:#000;color:#fff;margin-top:8px;padding:8px 10px;font:900 13px var(--text);cursor:pointer}
  /* コメントを見ているとき：Twitch のスマホアプリと同じく、画面いっぱいに、配信の画面を上に固定し、残りの高さを全部コメント欄にする
     （縦に並べるだけだと、コメントを読むと画面が流れて見えなくなるため。2026-09-29 利用者の指摘）。サイトの上と下のメニューの上に重ねる */
  html.sp-lock,html.sp-lock body{overflow:hidden}
  .sp-live.sp-viewing .sp-back-live{position:fixed;left:0;right:0;top:0;z-index:1003;height:44px;margin:0;padding:0 var(--gutter);display:flex;align-items:center;gap:8px;background:#000;color:#fff;text-decoration:none;border-bottom:2px solid var(--live);font:900 14px var(--text)}
  .sp-live.sp-viewing .sp-back-live::before{content:"←"}
  .sp-live.sp-viewing .tile.chosen{position:fixed;left:0;right:0;top:44px;bottom:0;z-index:1002;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
  .sp-live.sp-viewing .tile.chosen .stage{flex:none}
  .sp-live.sp-viewing .tile.chosen .meta{padding:6px var(--gutter);grid-template-columns:32px minmax(0,1fr) auto}
  .sp-live.sp-viewing .tile.chosen .ic{width:32px;height:32px}
  .sp-live.sp-viewing .tile.chosen .tt,.sp-live.sp-viewing .tile.chosen .meta .sp-chat-open{display:none}
  .sp-live.sp-viewing .tile.chosen .sp-chat{flex:1;height:auto;min-height:0}
  .sp-live.sp-viewing .tile.chosen .sp-chat .hd,.sp-live.sp-viewing .tile.chosen .sp-chat .foot{display:none}
}
}