body {
    background: #080a0d;
    font: 13px Arial, sans-serif;
    margin: 8px;
    color: #f7f7f8;
    overflow: hidden;
}

a {
    color: white;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
    cursor: pointer;
}

#streams {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    text-align: center;
    float: left;
    margin: 0;
    padding: 0;
}

iframe {
    border:0 none;
}

.stream {
    background: #030507;
    border: 2px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.stream_player,
.direct_player {
    height: 100%;
    width: 100%;
}

.direct_player {
    display: block;
}

.direct_player {
    background: #000;
    object-fit: contain;
}

.stream_status {
    background: rgba(4, 8, 13, 0.88);
    color: #f7f7f8;
    font-size: 12px;
    left: 50%;
    max-width: calc(100% - 32px);
    padding: 6px 8px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

/* Fullscreen a single tile (F shortcut): fill the screen regardless of the
   inline grid dimensions jQuery set on it. !important beats those inline styles. */
.stream:fullscreen {
    background: #000;
    height: 100% !important;
    width: 100% !important;
}

.stream.is_active {
    border-color: #0b3552;
    transition: border-color 0.4s ease;
}

.stream.is_active.active_fresh,
.stream.is_active:hover {
    border-color: #22d3ee;
}

.stream_overlay {
    background: rgba(4, 8, 13, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f7f7f8;
    display: none;
    font-size: 12px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    padding: 3px 6px;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 3;
}

.stream_title {
    left: 8px;
    right: 8px;
    text-align: left;
    top: 8px;
}

.stream_game {
    bottom: 8px;
    right: 8px;
    text-align: right;
}

.stream_channel {
    bottom: 8px;
    left: 8px;
    text-align: left;
}

.stream_game:empty {
    display: none !important;
}

.stream_hitbox {
    background: transparent;
    border: 0;
    cursor: grab;
    display: block;
    inset: 0;
    padding: 0;
    position: absolute;
    z-index: 2;
}

.stream_hitbox:active {
    cursor: grabbing;
}

.stream_playback_button {
    align-items: center;
    background: rgba(4, 8, 13, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #f7f7f8;
    cursor: pointer;
    display: none;
    font: inherit;
    height: 30px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
    width: 30px;
    z-index: 4;
}

/* Jump-to-live button sits just left of the pause button, same treatment. */
.stream_live_button {
    align-items: center;
    background: rgba(4, 8, 13, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #f7f7f8;
    cursor: pointer;
    display: none;
    font: inherit;
    height: 30px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 46px;
    top: 8px;
    width: 30px;
    z-index: 4;
}

.stream:hover .stream_playback_button,
.stream.is_paused .stream_playback_button,
.stream_playback_button:focus-visible,
.stream:hover .stream_live_button,
.stream_live_button:focus-visible {
    display: flex;
}

/* Clear the pause button when it alone is showing (paused, not hovered)... */
.stream.is_paused .stream_title {
    right: 46px;
}

/* ...and clear both buttons on hover (rule comes last so it wins when paused). */
.stream:hover .stream_title {
    right: 84px;
}

.stream_playback_button:hover,
.stream_live_button:hover {
    background: #263142;
    border-color: #22d3ee;
}

/* Live delay readout, revealed with the controls (hover / tapped). Sits just
   below the pause + jump-to-live buttons. */
.stream_latency {
    background: rgba(4, 8, 13, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #d9e2ef;
    display: none;
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    position: absolute;
    right: 8px;
    top: 46px;
    white-space: nowrap;
    z-index: 4;
}

.stream:hover .stream_latency,
.stream.controls_visible .stream_latency {
    display: block;
}

.stream_latency:empty {
    display: none;
}

/* Per-stream audio control (Shift-click). Pinned bottom-center, above the drag
   hitbox so it's adjustable. Like the other tile controls it's only revealed on
   hover (or tap on touch / focus for keyboard), even once the stream has audio. */
.stream_audio {
    align-items: center;
    background: rgba(4, 8, 13, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.28);
    bottom: 8px;
    display: none;
    gap: 6px;
    left: 50%;
    padding: 4px 8px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 4;
}

.stream.has_audio:hover .stream_audio,
.stream.has_audio.controls_visible .stream_audio,
.stream.has_audio .stream_audio:focus-within {
    display: flex;
}

.stream.has_audio .stream_channel,
.stream.has_audio .stream_game {
    display: none !important;
}

.stream_audio_mute {
    background: transparent;
    border: 0;
    color: #f7f7f8;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.stream_audio_slider {
    accent-color: #22d3ee;
    cursor: pointer;
    width: 90px;
}

.stream:hover .stream_overlay {
    display: block;
}

.stream:not(.is_active):hover .stream_overlay {
    border-color: #22d3ee;
}

/* Touch: there's no hover, so tapping a tile adds .controls_visible for a few
   seconds (managed in JS) to surface the same overlays and buttons. */
.stream.controls_visible .stream_overlay {
    display: block;
}

.stream.controls_visible .stream_playback_button,
.stream.controls_visible .stream_live_button {
    display: flex;
}

.stream.controls_visible .stream_title {
    right: 84px;
}

.ui-sortable-helper {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
}

.ui-sortable-placeholder {
    background: rgba(34, 211, 238, 0.14);
    border: 1px dashed #22d3ee;
    visibility: visible !important;
}

#chatbox {
    float: right;
    width: 340px;
    height: 100%;
    margin: 0px;
    margin-left: -100px;
    padding: 0;
    position: relative;
}

#chat_resize_handle {
    bottom: 0;
    cursor: ew-resize;
    left: -5px;
    position: absolute;
    top: 0;
    width: 10px;
    z-index: 20;
}

#chat_resize_handle:hover,
body.chat_resizing #chat_resize_handle {
    background: rgba(34, 211, 238, 0.16);
}

body.chat_resizing {
    cursor: ew-resize;
    user-select: none;
}

body.chat_resizing #chatbox::after {
    content: "";
    cursor: ew-resize;
    inset: 0;
    position: absolute;
    z-index: 19;
}

body.chat_resizing #chatbox iframe {
    pointer-events: none;
}

#wrapper {
    display: flex;
    gap: 10px;
    min-height: calc(100vh - 16px);
}

#watch_area {
    flex: 1;
    min-width: 0;
    position: relative;
}

.layout-focus-one #streams,
.layout-focus-two #streams,
.layout-focus-two-vertical #streams {
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* Zero-height full-width break: forces the smaller tiles below the mains. */
#focus_break {
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

#control_panel {
    background: #11151b;
    border: 1px solid #242a33;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Scales with viewport: slimmer on narrow widths (e.g. vertical browser
       tabs), capped so it never hogs space on an ultrawide. */
    flex: 0 0 clamp(208px, 19vw, 300px);
    max-height: calc(100vh - 16px);
    overflow: auto;
    padding: 14px;
}

@media (max-width: 1100px) {
    #control_panel {
        flex-basis: 200px;
        padding: 10px;
    }
}

#brand_block {
    border-bottom: 1px solid #242a33;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

#brand_name {
    align-items: center;
    display: flex;
    font-size: 20px;
    font-weight: bold;
    gap: 4px;
}

#app_version {
    color: #98a2b3;
    font-size: 11px;
    font-weight: normal;
    vertical-align: middle;
}

#app_beta {
    background: #1e2a3a;
    border: 1px solid #2f5a8a;
    border-radius: 3px;
    color: #7cc4ff;
    font-size: 9px;
    font-weight: normal;
    letter-spacing: 0.5px;
    margin-left: 4px;
    padding: 1px 5px;
    text-transform: uppercase;
    vertical-align: middle;
}

.header_right {
    align-items: center;
    display: flex;
    gap: 6px;
}

#brand_status {
    color: #98a2b3;
    font-size: 11px;
    margin-top: 3px;
    text-transform: uppercase;
}

.panel_section {
    border-bottom: 1px solid #242a33;
    padding: 12px 0;
}

.section_header {
    align-items: center;
    color: #d9e2ef;
    display: flex;
    font-size: 11px;
    font-weight: bold;
    justify-content: space-between;
    letter-spacing: 0;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.collapsible_header {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    text-align: left;
    width: 100%;
}

#stream_together_panel .collapsible_header {
    transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

#stream_together_panel.has_matches .collapsible_header {
    background: rgba(34, 211, 238, 0.08);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.7), 0 0 14px rgba(34, 211, 238, 0.38);
    color: #67e8f9;
    margin: -7px -8px;
    padding: 7px 8px;
    width: calc(100% + 16px);
}

.collapsible_header:hover,
.collapsible_header:focus-visible {
    color: #ffffff;
}

.disclosure_chevron {
    font-size: 18px;
    font-weight: normal;
    line-height: 11px;
}

.panel_section.is_collapsed .section_header {
    margin-bottom: 0;
}

#twitch_auth_state,
#stream_count,
#latency_sync_state {
    background: #202733;
    border: 1px solid #344054;
    font-size: 11px;
    padding: 2px 6px;
}

/* Stream count is just a number -- neutral. The Twitch badge reflects state. */
#stream_count {
    color: #d9e2ef;
}

#twitch_auth_state {
    color: #98a2b3;
}

#latency_sync_state {
    color: #98a2b3;
}

#latency_sync_state.state-active {
    border-color: #2f6b4f;
    color: #a7f3d0;
}

#twitch_auth_state.state-connected {
    color: #a7f3d0;
    border-color: #2f6b4f;
}

#twitch_auth_state.state-setup {
    color: #fbbf24;
    border-color: #7c5e1a;
}

#twitch_auth_state.state-error {
    color: #fca5a5;
    border-color: #7f2a2a;
}

.panel_button,
.mini_button,
.follow_item,
.current_stream button {
    background: #1b222d;
    border: 1px solid #344054;
    color: #f7f7f8;
    cursor: pointer;
    font: inherit;
}

.panel_button {
    box-sizing: border-box;
    margin-top: 6px;
    padding: 7px 9px;
    text-align: left;
    width: 100%;
}

.panel_button.icon_button {
    align-items: center;
    display: inline-grid;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

.panel_button:hover,
.mini_button:hover,
.follow_item:hover,
.current_stream button:hover {
    background: #263142;
}

.current_stream .follow_stream {
    color: #67e8f9;
    flex: 0 0 auto;
    font-size: 10px;
    padding: 3px 6px;
}

.panel_button.primary {
    background: #0e7490;
    border-color: #22d3ee;
}

.panel_button:disabled {
    background: #111827;
    border-color: #263142;
    color: #667085;
    cursor: default;
}

.button_row {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
}

.slider_row {
    margin: 8px 0 4px;
}

.slider_row.inactive {
    opacity: 0.4;
}

.slider_label {
    color: #98a2b3;
    display: flex;
    font-size: 11px;
    justify-content: space-between;
    margin-bottom: 4px;
    text-transform: uppercase;
}

#main_size_value,
#volume_value,
#latency_sync_value,
#latency_sync_tolerance_value {
    color: #d9e2ef;
}

#main_size_slider,
#volume_slider,
#latency_sync_slider,
#latency_sync_tolerance_slider {
    width: 100%;
    accent-color: #22d3ee;
    cursor: pointer;
}

/* "Experimental" chip next to a section title (amber, matches the setup state). */
.experimental_tag {
    background: #2a2310;
    border: 1px solid #7c5e1a;
    color: #fbbf24;
    font-size: 9px;
    font-weight: normal;
    letter-spacing: 0;
    margin-left: 6px;
    padding: 1px 5px;
    vertical-align: middle;
}

#main_volume_row .slider_label {
    font-size: 13px;
}

.volume_control_row {
    align-items: center;
    display: flex;
    gap: 6px;
}

/* Muted: grey out the track so the slider position doesn't read as "playing at 70%". */
.slider_row.is_muted #volume_slider {
    accent-color: #667085;
}

.volume_control_row #volume_slider {
    flex: 1;
    min-width: 0;
}

.volume_control_row #mute_button {
    flex: 0 0 34px;
    font-size: 16px;
    height: 32px;
    margin-top: 0;
    padding: 0;
    width: 34px;
}

#twitch_account_hint,
#stream_together_hint,
.empty_state {
    color: #98a2b3;
    line-height: 1.35;
    margin-bottom: 8px;
}

#follow_filter {
    background: #07090c;
    border: 1px solid #344054;
    box-sizing: border-box;
    color: #f7f7f8;
    margin: 8px 0;
    padding: 7px 8px;
    width: 100%;
}

#followed_channels {
    display: grid;
    gap: 5px;
    max-height: 840px;
    overflow: auto;
}

.follow_item_shell,
.follow_item_shell .follow_item {
    box-sizing: border-box;
    width: 100%;
}

.follow_item,
.current_stream {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    min-width: 0;
    padding: 7px 8px;
    text-align: left;
}

.follow_item.is_live {
    border-color: #ef4444;
}

/* Already in the current lineup -- greyed out, can't be re-added. */
.follow_item.in_lineup {
    border-color: #242a33;
    cursor: default;
    opacity: 0.4;
}

.follow_name,
.current_stream span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.follow_meta {
    color: #98a2b3;
    font-size: 11px;
}

.follow_item.is_live .follow_meta {
    color: #fca5a5;
}

/* Instant (delay-free) hover tooltip for followed-channel rows. Appended to
   <body> and positioned with fixed coords in JS so the followed list's
   overflow:auto box can't clip it. */
.hover_tooltip {
    background: rgba(4, 8, 13, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    color: #f7f7f8;
    display: none;
    font-size: 12px;
    line-height: 1.35;
    max-width: 260px;
    padding: 6px 9px;
    pointer-events: none;
    position: fixed;
    white-space: pre-line;
    z-index: 9999;
}

#current_streams,
#stream_together_actions,
#stream_together_results {
    display: grid;
    gap: 5px;
    margin-bottom: 8px;
}

#stream_together_results:empty {
    margin-bottom: 0;
}

.current_stream {
    background: #0b0f14;
    border: 1px solid #242a33;
}

.current_stream.is_active {
    border-color: #22d3ee;
}

.mini_button {
    padding: 4px 6px;
}

.current_stream_name {
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.remove_stream {
    background: transparent;
    border: 1px solid transparent;
    color: #98a2b3;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    padding: 2px 7px;
}

.remove_stream:hover {
    border-color: #ef4444;
    color: #fca5a5;
}

.add_stream_row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.add_stream_row input[type="text"] {
    background: #07090c;
    border: 1px solid #344054;
    box-sizing: border-box;
    color: #f7f7f8;
    flex: 1;
    min-width: 0;
    padding: 7px 8px;
}

.add_stream_row .panel_button {
    flex: 0 0 auto;
    width: 56px;
}

.segmented_control {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(4, 1fr);
}

.segmented_control button {
    background: #1b222d;
    border: 1px solid #344054;
    color: #f7f7f8;
    cursor: pointer;
    font: inherit;
    padding: 6px 4px;
}

.segmented_control button.is_selected {
    background: #0e7490;
    border-color: #22d3ee;
}

.option_toggle {
    align-items: center;
    color: #cbd5e1;
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

#theater_controls {
    display: none;
}

#theater_hint {
    background: rgba(4, 8, 13, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f7f7f8;
    display: none;
    font-size: 13px;
    left: 50%;
    padding: 8px 12px;
    position: fixed;
    top: 14px;
    transform: translateX(-50%);
    z-index: 60;
}

body.theater_mode #theater_hint.is_visible {
    display: block;
}

body.theater_mode #theater_controls {
    display: flex;
    gap: 6px;
    position: fixed;
    right: 14px;
    /* Sit below the per-tile pause / jump-to-live buttons (top:8px, ~30px tall)
       so the controls don't cover them. */
    top: 52px;
    z-index: 50;
}

/* With chat shown, the chat tabs sit at the top-right, so shift the controls
   left of the chat column (offset tracks the live chat width via JS) to keep
   them clear of the tab strip and the stream title in the top-left. */
body.theater_mode.theater_with_chat #theater_controls {
    right: var(--theater-controls-right, 354px);
}

.theater_button {
    background: rgba(4, 8, 13, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #e5e7eb;
    cursor: pointer;
    font-size: 12px;
    /* Fully transparent at rest (they overlay a stream). Recent mouse movement
       fades them to a faint hint (see .theater_pointer_active), and hovering
       brings them to full. */
    opacity: 0;
    padding: 5px 10px;
    transition: opacity 0.15s ease;
}

body.theater_pointer_active .theater_button {
    opacity: 0.45;
}

#theater_controls:hover .theater_button {
    opacity: 1;
}

.theater_button:hover {
    border-color: #22d3ee;
    color: #ffffff;
    opacity: 1;
}

.theater_button.is_selected {
    border-color: #22d3ee;
    color: #ffffff;
}

body.theater_mode {
    margin: 0;
}

body.theater_mode #control_panel,
body.theater_mode #helpbox {
    display: none !important;
}

body.theater_mode #wrapper {
    min-height: 100vh;
}

body.theater_mode #watch_area {
    min-height: 100vh;
}

body.theater_mode:not(.theater_with_chat) #chatbox {
    display: none !important;
}

body.theater_mode.theater_with_chat #chatbox {
    max-width: none;
}

body.theater_mode.theater_with_chat .stream_chat {
    font-size: 13px;
}

#chatbox.ui-widget-content,
#chatbox .ui-widget-header {
    background: #11151b;
    border-color: #242a33;
    color: #f7f7f8;
}

#chatbox .ui-tabs-nav {
    background: #11151b;
    border: 0;
    border-bottom: 1px solid #242a33;
    padding: 4px 4px 0;
}

#chatbox .ui-tabs-nav li {
    background: #1b222d;
    border: 1px solid #344054;
    border-bottom: 0;
    margin-right: 4px;
}

#chatbox .ui-tabs-nav li a {
    color: #cbd5e1;
    padding: 6px 8px;
}

#chatbox .ui-tabs-nav li.ui-tabs-active {
    background: #0e7490;
    border-color: #22d3ee;
}

#chatbox .ui-tabs-nav li.ui-tabs-active a {
    color: #ffffff;
}

.stream_chat {
    font-size: 13px;
    padding: 0;
}

#helpbox {
    background: #11151b;
    border: 1px solid #344054;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    display: none;
    margin: 0 auto;
    max-width: calc(100vw - 32px);
    padding: 22px 26px 28px;
    text-align: left;
    width: 600px;
}

#helpbox h1 {
    margin-top: 0;
    text-align: center;
}

#helpbox a {
    color: #22d3ee;
    text-decoration: none;
}

#helpbox a:hover {
    text-decoration: underline;
}

#helptext {
    line-height: 1.5;
    margin: 0;
}

#helptext p {
    margin: 0 0 12px;
}

#helptext p:last-child {
    margin-bottom: 0;
}

/* Pinned to the viewport corner, but only painted while the splash is up
   (it's a child of the hidden #helpbox), so it never overlaps the streams. */
#fork_note {
    bottom: 10px;
    color: #667085;
    font-size: 11px;
    position: fixed;
    right: 12px;
}

#fork_note a {
    color: #98a2b3;
}

#fork_note a:hover {
    color: #22d3ee;
}

#feedback_button {
    margin-top: 10px;
}

.modal_overlay {
    align-items: center;
    background: rgba(2, 4, 7, 0.7);
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 50;
}

.modal_overlay.visible {
    display: flex;
}

.modal_box {
    background: #11151b;
    border: 1px solid #344054;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
    max-width: calc(100vw - 32px);
    padding: 22px 26px 24px;
    position: relative;
    width: 420px;
}

.modal_close {
    background: none;
    border: 0;
    color: #98a2b3;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    position: absolute;
    right: 12px;
    top: 12px;
}

.modal_close:hover {
    color: #f7f7f8;
}

.modal_title {
    margin: 0 0 4px;
}

.modal_intro {
    color: #98a2b3;
    margin: 0 0 14px;
}

#feedback_message,
#feedback_email {
    background: #07090c;
    border: 1px solid #344054;
    box-sizing: border-box;
    color: #f7f7f8;
    font: inherit;
    margin-bottom: 8px;
    padding: 8px;
    width: 100%;
}

#feedback_message {
    resize: vertical;
}

#feedback_status {
    font-size: 12px;
    margin-bottom: 8px;
    min-height: 1.2em;
}

#feedback_status.error {
    color: #fca5a5;
}

#feedback_status.success {
    color: #86efac;
}

#help_button {
    background: #2a2310;
    border: 1px solid #7c5e1a;
    border-radius: 50%;
    color: #fbbf24;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    height: 34px;
    line-height: 1;
    margin-left: auto;
    padding: 0;
    vertical-align: middle;
    width: 34px;
}

#help_button:hover {
    background: #3a3015;
    color: #fcd34d;
}

#help_box {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    width: 560px;
}

#help_box h3 {
    margin: 16px 0 6px;
}

#help_box h3:first-of-type {
    margin-top: 0;
}

#help_box p,
#help_box ul {
    line-height: 1.5;
    margin: 0 0 10px;
}

#help_box ul {
    padding-left: 20px;
}

#help_box a {
    color: #22d3ee;
    text-decoration: none;
}

#help_box a:hover {
    text-decoration: underline;
}

#bottom_right_bar {
    height: 1em;
    position: absolute;
    right: 8px;
    bottom: 12px;
}


@media (max-width: 900px) {
    body {
        overflow: auto;
    }

    #wrapper {
        display: block;
    }

    #control_panel {
        max-height: none;
        width: 100%;
    }

    #watch_area {
        min-height: 70vh;
    }

    #chatbox {
        width: 300px;
    }
}