/* New comments stay readable below; the whole message fades as it rises. */
.player-body #broadcast-stage .chat-messages{
 mask-image:linear-gradient(to bottom,transparent 0%,rgb(0 0 0 / .12) 18%,rgb(0 0 0 / .42) 40%,rgb(0 0 0 / .8) 66%,#000 88%);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgb(0 0 0 / .12) 18%,rgb(0 0 0 / .42) 40%,rgb(0 0 0 / .8) 66%,#000 88%);
}
/* Reading older messages deliberately restores their contrast. */
.player-body #broadcast-stage .chat-messages:is(.chat-reviewing,.chat-history-review){mask-image:none;-webkit-mask-image:none}
/* A transparent upper edge instead of a dark card over the presentation.
   Keep input controls outside the message mask so typing stays comfortable. */
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-panel{
 background:linear-gradient(to bottom,transparent 0%,rgb(3 10 6 / .05) 22%,rgb(3 10 6 / .18) 48%,rgb(3 10 6 / .36) 75%,rgb(3 10 6 / .56) 100%);
 border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-panel-heading{opacity:.58;transition:opacity .2s}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-panel:is(:hover,:focus-within) .chat-panel-heading{opacity:1}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-own>.chat-bubble{
 background:rgb(16 63 39 / .12);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-message p{text-shadow:0 1px 3px rgb(0 0 0 / .7)}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) #room-chat-form textarea{
 background:rgb(5 16 10 / .42);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) #room-chat-form textarea:focus{background:rgb(5 16 10 / .78)}
@media(prefers-reduced-motion:reduce){.player-body #broadcast-stage .chat-panel-heading{transition:none}}

/* Fullscreen: keep most of the conversation clear; fade only the upper edge. */
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-messages{
 mask-image:linear-gradient(to bottom,transparent 0%,rgb(0 0 0 / .4) 10%,rgb(0 0 0 / .78) 23%,#000 40%);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgb(0 0 0 / .4) 10%,rgb(0 0 0 / .78) 23%,#000 40%);
}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-messages:is(.chat-reviewing,.chat-history-review){mask-image:none;-webkit-mask-image:none}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-panel{
 background:linear-gradient(to bottom,rgb(3 7 5 / .08) 0%,rgb(3 7 5 / .35) 22%,rgb(3 7 5 / .65) 50%,rgb(3 7 5 / .78) 100%);
}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-panel-heading{opacity:1}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-panel h3,
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-message strong{color:#f4f5f4;text-shadow:0 1px 4px #000;font-weight:700}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-message strong{font-size:13px;color:#fff;font-weight:800;letter-spacing:.1px}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) .chat-message p{font-size:13px;color:#e4e8e6;text-shadow:0 1px 4px #000;line-height:1.55}
.player-body #broadcast-stage:is(:fullscreen,.immersive-fallback) #chat-identity{color:#c9d0cc}