/* チャットルーム。昔のチャットルームのように、入力欄を一覧の上に置き、新しい投稿を上に並べる */
/* 一覧の位置は部品が合わせるので、ブラウザのスクロール位置の自動補正と二重にしない */
utamita-chat-room{display:flex;flex-direction:column;gap:var(--sp-12);color:var(--c-text);overflow-anchor:none}
utamita-chat-room [hidden]{display:none!important}
.chat-room-notice{margin:0;padding:var(--sp-8) var(--sp-12);border:1px solid var(--c-yellow-border);border-radius:var(--radius-m);background:var(--c-bg-yellow);color:var(--c-navy);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal)}
.chat-room-older{align-self:center;min-height:var(--control-h);max-width:100%;padding:0 var(--sp-12);border:1px solid var(--c-border);border-radius:var(--radius-pill);background:var(--c-white);color:var(--c-navy);font-family:var(--font-body);font-size:var(--fs-ui-meta);font-weight:700;cursor:pointer}
.chat-room-older:disabled{color:var(--c-text-sub);cursor:wait}
.chat-room-empty,.chat-room-status{margin:0;padding:var(--sp-16) 0;color:var(--c-text-sub);font-size:var(--fs-ui-body);line-height:var(--lh-relaxed);text-align:center}
.chat-room-list{display:flex;flex-direction:column;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.chat-message{display:grid;grid-template-columns:var(--sp-32) minmax(0,1fr) var(--control-h);column-gap:var(--sp-8);align-items:start;padding:var(--sp-4) 0}
.chat-message-profile{display:block;width:var(--sp-32);height:var(--sp-32);margin-top:var(--sp-4)}
.chat-room-avatar{display:grid;place-items:center;box-sizing:border-box;width:var(--sp-32);height:var(--sp-32);border-radius:50%;object-fit:cover;background:var(--c-bg-soft);color:var(--c-text-sub)}
.chat-room-person-icon{width:var(--sp-20);height:var(--sp-20);fill:currentColor}
.chat-message-main{grid-column:2;min-width:0}
.chat-message-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-small);line-height:var(--lh-normal)}
.chat-message-name{color:var(--c-navy);font-size:var(--fs-ui-meta);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
a.chat-message-name:hover{text-decoration:underline}
.chat-message-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.chat-message-body{margin:var(--sp-2) 0 0;color:var(--c-text);font-size:var(--fs-ui-compact);font-weight:400;line-height:var(--lh-normal);overflow-wrap:anywhere}
.chat-message-more{grid-column:3;grid-row:1;display:grid;place-items:center;width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:50%;background:transparent;color:var(--c-text-sub);cursor:pointer}
.chat-message-more:hover,.chat-message-more[aria-expanded="true"]{background:var(--c-bg-soft);color:var(--c-navy)}
.chat-message-more-icon{width:var(--sp-24);height:var(--sp-24);fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.chat-message-actions{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:var(--sp-8);padding-top:var(--sp-4)}
.chat-message-action{min-height:var(--control-h);padding:0 var(--sp-12);border:1px solid var(--c-border);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);font-family:var(--font-body);font-size:var(--fs-ui-meta);font-weight:700;cursor:pointer}
.chat-message-action:hover{background:var(--c-bg-soft)}
.chat-room-compose{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12);border:1px solid var(--c-border);border-radius:var(--radius-m);background:var(--c-white)}
/* 過去の投稿を読んでいる間だけ、画面の下端の中央に出す */
.chat-room-new{position:fixed;bottom:calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));left:50%;z-index:20;display:inline-flex;align-items:center;gap:var(--sp-4);min-height:var(--control-h);padding:0 var(--sp-16);border:0;border-radius:var(--radius-pill);background:var(--c-navy);color:var(--c-white);font-family:var(--font-body);font-size:var(--fs-ui-meta);font-weight:700;white-space:nowrap;transform:translateX(-50%);cursor:pointer}
.chat-room-new-icon{width:var(--sp-16);height:var(--sp-16);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* 文字数を隠している間も送信ボタンを右端に置くため、表示中の部品だけを横に詰める */
.chat-room-form{display:flex;align-items:flex-end;gap:var(--sp-8)}
.chat-room-self{display:flex;flex:none;align-self:center;width:var(--sp-24);height:var(--sp-24)}
.chat-room-self .chat-room-avatar{width:var(--sp-24);height:var(--sp-24)}
.chat-room-self .chat-room-person-icon{width:var(--sp-16);height:var(--sp-16)}
.chat-room-form textarea{box-sizing:border-box;flex:1 1 auto;width:100%;min-width:0;min-height:var(--control-h);height:var(--control-h);max-height:calc(var(--control-h) * 3);padding:var(--sp-8) var(--sp-12);border:0;border-radius:var(--radius-m);background:var(--c-bg-soft);color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-16);font-weight:400;line-height:var(--lh-normal);resize:none;overflow-y:auto}
.chat-room-count{flex:none;align-self:center;color:var(--c-text-sub);font-size:var(--fs-ui-small);font-variant-numeric:tabular-nums;white-space:nowrap}
.chat-room-send{display:grid;flex:none;place-items:center;width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:50%;background:var(--c-navy);color:var(--c-white);cursor:pointer}
.chat-room-send:disabled{background:var(--c-bg-muted);color:var(--c-text-sub);cursor:default}
.chat-room-send-icon{width:var(--sp-24);height:var(--sp-24);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chat-room-login{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:var(--control-h-lg);border-radius:var(--radius-m);background:var(--c-x-black);color:var(--c-white);font-family:var(--font-body);font-size:var(--fs-ui-body);font-weight:700;text-decoration:none}
.chat-room-login:hover{color:var(--c-white);filter:brightness(1.2)}
.chat-room-x-icon{width:var(--sp-20);height:var(--sp-20);fill:currentColor}
.chat-room-banned{margin:0;padding:var(--sp-8) 0;color:var(--c-text-sub);font-size:var(--fs-ui-body);line-height:var(--lh-normal);text-align:center}
.chat-room-feedback{margin:0;padding:var(--sp-12) var(--sp-16);border:1px solid var(--c-error);border-radius:var(--radius-m);background:var(--c-error-bg);color:var(--c-error);font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed);cursor:pointer}
.chat-room-feedback.is-success{border-color:var(--c-success-border);background:var(--c-success-bg);color:var(--c-success)}
.chat-room-dialog{width:min(calc(100% - var(--sp-32)), 400px);box-sizing:border-box;padding:var(--sp-16);border:0;border-radius:var(--radius-l);background:var(--c-white);color:var(--c-navy);box-shadow:var(--shadow-float)}
.chat-room-dialog::backdrop{background:var(--c-overlay)}
.chat-room-dialog-title{margin:0;font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-tight)}
.chat-room-dialog-copy{margin:var(--sp-8) 0 0;font-size:var(--fs-ui-body);line-height:var(--lh-relaxed)}
.chat-room-dialog-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-16)}
.chat-room-dialog-actions button{flex:1 1 auto;min-height:var(--control-h);padding:0 var(--sp-12);border:2px solid var(--c-navy);border-radius:var(--radius-m);font-family:var(--font-body);font-size:var(--fs-ui-body);font-weight:700;cursor:pointer}
.chat-room-dialog-confirm{background:var(--c-navy);color:var(--c-white)}
.chat-room-dialog-cancel{background:var(--c-white);color:var(--c-navy)}
/* 部屋の見出し：一覧へ戻るリンク、部屋の名前と操作、閲覧中の人数 */
.chat-room-bar{display:flex;flex-direction:column;gap:var(--sp-4)}
.chat-room-back{display:inline-flex;align-self:flex-start;align-items:center;gap:var(--sp-4);min-height:var(--control-h);color:var(--c-navy);font-size:var(--fs-ui-meta);font-weight:700;text-decoration:none}
.chat-room-back:hover{text-decoration:underline}
.chat-room-back-icon{width:var(--sp-16);height:var(--sp-16);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chat-room-heading{display:grid;grid-template-columns:minmax(0,1fr) var(--control-h);column-gap:var(--sp-8);align-items:start}
.chat-room-name{margin:0;color:var(--c-navy);font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-tight);overflow-wrap:anywhere}
.chat-room-more{grid-column:2;display:grid;place-items:center;width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:50%;background:transparent;color:var(--c-text-sub);cursor:pointer}
.chat-room-more:hover,.chat-room-more[aria-expanded="true"]{background:var(--c-bg-soft);color:var(--c-navy)}
.chat-room-viewers,.chat-lobby-viewers{display:inline-flex;align-items:center;gap:var(--sp-4);margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-small);line-height:var(--lh-normal);font-variant-numeric:tabular-nums;white-space:nowrap}
.chat-room-viewers-icon{width:var(--sp-16);height:var(--sp-16);fill:currentColor}
.chat-room-counts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8)}
.chat-room-participants{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-12);margin:0;padding:0;list-style:none}
.chat-room-participants li{max-width:100%;min-width:0}
.chat-room-participant{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--control-h);color:var(--c-navy);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal);text-decoration:none}
.chat-room-participant:hover{text-decoration:underline}
.chat-room-participant .chat-room-avatar{flex:none}
.chat-room-participant-name{min-width:0;overflow-wrap:anywhere}
.chat-room-entry{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-8)}
.chat-room-entry-status{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal)}
.chat-room-entry-button.is-entered{border:1px solid var(--c-navy);background:var(--c-white);color:var(--c-navy)}
.chat-room-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
/* 部屋の一覧：作成欄と、行全体で部屋を開くリンク */
.chat-lobby-form{align-items:center}
.chat-lobby-form input{box-sizing:border-box;flex:1 1 auto;width:100%;min-width:0;height:var(--control-h);padding:0 var(--sp-12);border:0;border-radius:var(--radius-m);background:var(--c-bg-soft);color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-16)}
.chat-lobby-create{flex:none;min-height:var(--control-h);padding:0 var(--sp-12);border:0;border-radius:var(--radius-m);background:var(--c-navy);color:var(--c-white);font-family:var(--font-body);font-size:var(--fs-ui-meta);font-weight:700;white-space:nowrap;cursor:pointer}
.chat-lobby-create:disabled{background:var(--c-bg-muted);color:var(--c-text-sub);cursor:default}
.chat-lobby-list{display:flex;flex-direction:column;margin:0;padding:0;border-top:1px solid var(--c-border);list-style:none}
.chat-lobby-item{border-bottom:1px solid var(--c-border)}
.chat-lobby-room{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-8);row-gap:var(--sp-2);box-sizing:border-box;min-height:var(--control-h-lg);padding:var(--sp-8) var(--sp-12);background:var(--c-white);color:var(--c-navy);text-decoration:none}
.chat-lobby-room:hover{background:var(--c-bg-soft)}
.chat-lobby-name{flex:1 1 auto;min-width:0;font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-normal);overflow-wrap:anywhere}
.chat-lobby-time{color:var(--c-text-sub);font-size:var(--fs-ui-small);font-variant-numeric:tabular-nums;white-space:nowrap}
.chat-lobby-viewers{flex-wrap:wrap;white-space:normal}
.chat-lobby-viewers span{white-space:nowrap}
.chat-room-dialog-field{box-sizing:border-box;width:100%;height:var(--control-h);margin-top:var(--sp-12);padding:0 var(--sp-12);border:0;border-radius:var(--radius-m);background:var(--c-bg-soft);color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-16)}

/* 共有動画はルーム内に固定し、公式プレイヤーの前に操作を重ねない。 */
.chat-room-player{position:sticky;top:var(--chat-watch-top,0px);z-index:2;width:100%;min-width:0;min-height:calc(var(--sp-40) * 5);max-height:50dvh;aspect-ratio:16/9;background:var(--c-navy)}
.chat-room-player iframe{display:block;width:100%;height:100%;min-height:calc(var(--sp-40) * 5);border:0}
.chat-room-player[data-mock="true"]{display:grid;place-items:center;box-sizing:border-box;padding:var(--sp-12);color:var(--c-white);font-size:var(--fs-ui-body);line-height:var(--lh-normal);text-align:center}