/* --- LiveDrop Host Control Center Styles (v9.5) --- */
/* Includes Base, Nav, Tabs, Studio (RTMP SubTab/Sidebar), Chat, Dashboard, Account, Income, Comms, Pages, Drops Tab, Content Viewer, Nav Collapse, SubNav Collapse, RTMP Cards, Sidebar Layout, Responsive */
/* Focus: Replaced Modals with Sidebar for Destinations */

/*----- style.css -----*/

/* --- Base Styles & Variables --- */
:root {
    /* ... (Keep all existing variables) ... */
    --share-bg-light: #f8f9fa;
    --share-bg-dark: #212529;
    --share-text-light: #212529;
    --share-text-dark: #f8f9fa;
    --share-accent: #007bff;
    --share-stop-color: #dc3545;
    --share-stream-color: #28a745;
    --share-button-text: white;
    --share-border-light: #dee2e6;
    --share-border-dark: #495057;
    --share-disabled-bg: #6c757d;
    --share-disabled-text: #e9ecef;
    --mute-neutral-bg: #6c757d;
    --share-accent-hover: #0056b3;
    --share-stop-hover: #c82333;
    --share-stream-hover: #218838;
    --mute-neutral-hover: #5a6268;
    --chat-bg: #ffffff;
    --chat-bg-dark: #343a40;
    --chat-input-bg: #ffffff;
    --chat-input-bg-dark: #495057;
    --chat-border: var(--share-border-light);
    --chat-border-dark: var(--share-border-dark);
    --chat-text-light: var(--share-text-light);
    --chat-text-dark: var(--share-text-dark);
    --chat-sender-text: #6c757d;
    --chat-timestamp-text: #adb5bd;
    --chat-bubble-sent-bg: var(--share-accent);
    --chat-bubble-sent-text: white;
    --chat-bubble-received-bg: #e9ecef;
    --chat-bubble-received-text: var(--share-text-light);
    --chat-bubble-received-bg-dark: #495057;
    --chat-bubble-received-text-dark: var(--share-text-dark);
    --chat-bubble-system-bg: rgba(108, 117, 125, 0.1);
    --chat-bubble-system-text: #6c757d;
    --chat-bubble-system-bg-dark: rgba(248, 249, 250, 0.1);
    --chat-bubble-system-text-dark: #adb5bd;
    --tab-inactive-bg: transparent;
    --tab-inactive-text: #6c757d;
    --tab-active-text: var(--share-accent);
    --tab-hover-bg: rgba(0, 123, 255, 0.1);
    --tab-border: var(--share-border-light);
    --tab-border-dark: var(--share-border-dark);
    --tab-inactive-text-dark: #adb5bd;
    --subtab-border: #e9ecef;
    --subtab-border-dark: #495057;
    --subtab-inactive-text: #6c757d;
    --subtab-active-text: var(--share-accent);
    --subtab-hover-bg: #f1f3f5;
    --subtab-hover-bg-dark: #495057;
    --status-error-bg: rgba(220, 53, 69, 0.1);
    --status-success-bg: rgba(40, 167, 69, 0.1);
    --status-warning-bg: rgba(255, 193, 7, 0.1);
    --status-info-bg: transparent;
    --estimator-label-color: #495057;
    --estimator-label-color-dark: #ced4da;
    --estimator-input-bg: #fff;
    --estimator-input-bg-dark: #495057;
    --estimator-input-border: #ced4da;
    --estimator-input-border-dark: #6c757d;
    --estimator-result-bg: #e9ecef;
    --estimator-result-bg-dark: #343a40;
    --yt-bg-dark: #0f0f0f;
    --yt-text-primary-dark: #f1f1f1;
    --yt-text-secondary-dark: #aaa;
    --yt-panel-bg-dark: #212121;
    --yt-border-dark: #303030;
    --yt-accent-red: #ff0000;
    --yt-button-bg-hover-dark: rgba(255, 255, 255, 0.1);
    --yt-button-bg-secondary-dark: rgba(255, 255, 255, 0.1);
    --yt-radius: 12px;
    --nav-height: 55px;
    --nav-collapsed-height: 15px;
    --nav-toggle-size: 30px;
    --subnav-height: 42px;
    --subnav-collapsed-height: 12px;
    --subnav-toggle-size: 26px;
    --button-secondary-bg: #6c757d;
    --button-secondary-hover-bg: #5a6268;
    --button-secondary-border: #6c757d;
    --button-secondary-hover-border: #545b62;
    --button-danger-bg: var(--share-stop-color);
    --button-danger-hover-bg: var(--share-stop-hover);
    --button-danger-border: var(--share-stop-color);
    --button-danger-hover-border: #bd2130;
    /* Modal variables removed */
}

/* --- Global & Body --- */
html, body { height: 100%; margin: 0; font-family: 'Inter', sans-serif; box-sizing: border-box; font-size: 15px; }
*, *:before, *:after { box-sizing: inherit; }
body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease; }
body.bg-light { background-color: var(--share-bg-light); color: var(--share-text-light); }
body.bg-dark { background-color: var(--share-bg-dark); color: var(--share-text-dark); }

/* --- Main Tab Navigation --- */
.tab-navigation { display: flex; align-items: center; flex-shrink: 0; border-bottom: 1px solid var(--tab-border); background-color: #ffffff; padding: 0 10px; height: var(--nav-height); overflow: hidden; z-index: 100; position: relative; transition: height 0.3s ease; }
body.bg-dark .tab-navigation { border-bottom-color: var(--tab-border-dark); background-color: var(--chat-bg-dark); }
.nav-logo { font-size: 1.2rem; font-weight: 700; color: var(--share-accent); padding: 0 15px 0 10px; margin-right: 10px; white-space: nowrap; display: flex; align-items: center; transition: opacity 0.3s ease, transform 0.3s ease; flex-shrink: 0; }
.nav-buttons-container { display: flex; flex-grow: 1; overflow-x: auto; overflow-y: hidden; height: 100%; align-items: center; transition: opacity 0.3s ease, visibility 0.3s ease; }
.tab-button { padding: 12px 15px; border: none; border-bottom: 3px solid transparent; background-color: var(--tab-inactive-bg); color: var(--tab-inactive-text); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-bottom-color 0.2s ease; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; white-space: nowrap; height: 100%; flex-shrink: 0; }
body.bg-dark .tab-button { color: var(--tab-inactive-text-dark); }
.tab-button:hover { background-color: var(--tab-hover-bg); color: var(--share-accent); }
body.bg-dark .tab-button:hover { background-color: rgba(0, 123, 255, 0.15); }
.tab-button.active { color: var(--tab-active-text); border-bottom-color: var(--share-accent); font-weight: 600; }
.tab-button .tab-badge { background-color: var(--share-accent); color: white; border-radius: 10px; padding: 1px 6px; font-size: 0.7em; margin-left: 6px; vertical-align: middle; line-height: 1; display: none; }
.nav-collapse-toggle { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: var(--nav-toggle-size); height: calc(var(--nav-toggle-size) / 2); border-radius: var(--nav-toggle-size) var(--nav-toggle-size) 0 0; border: 1px solid var(--tab-border); border-bottom: none; background-color: var(--share-bg-light); color: var(--tab-inactive-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; z-index: 105; transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease; opacity: 0.6; }
.nav-collapse-toggle:hover { opacity: 1; color: var(--share-accent); background-color: var(--tab-hover-bg); }
body.bg-dark .nav-collapse-toggle { background-color: var(--share-bg-dark); border-color: var(--tab-border-dark); color: var(--tab-inactive-text-dark); }
body.bg-dark .nav-collapse-toggle:hover { background-color: rgba(0, 123, 255, 0.15); }
.nav-collapse-toggle i { transition: transform 0.3s ease; }
body.nav-collapsed .tab-navigation { height: var(--nav-collapsed-height); overflow: visible; }
body.nav-collapsed .nav-buttons-container { opacity: 0; visibility: hidden; overflow: hidden; }
body.nav-collapsed .nav-logo { opacity: 0; transform: translateY(-10px); }
body.nav-collapsed .nav-collapse-toggle { opacity: 1; transform: translateX(-50%) translateY(1px); }
body.nav-collapsed .nav-collapse-toggle i { transform: rotate(180deg); }

/* --- Tab Content Area & Panes --- */
.tab-content-area { flex-grow: 1; position: relative; overflow: hidden; background-color: inherit; }
.tab-pane { display: none; width: 100%; height: 100%; overflow: auto; background-color: inherit; padding: 25px; box-sizing: border-box; }
.tab-pane.active { display: block; }
#ld-live-tab, #ld-comms-tab, #ld-pages-tab, #ld-drops-tab { padding: 0; }
#ld-live-tab.active, #ld-comms-tab.active, #ld-pages-tab.active, #ld-drops-tab.active { display: flex; flex-direction: column; }
#ld-dashboard-tab.active { background-color: #f4f7f9; padding: 30px; display: block; overflow: auto; }
body.bg-dark #ld-dashboard-tab.active { background-color: var(--share-bg-dark); }
#ld-toolbox-tab, #ld-Users-tab, #ld-Income-tab, #ld-account-tab { padding: 30px; }
#ld-account-tab.active, #ld-Income-tab.active { overflow: auto; display: block; }

/* --- Generic Sub-Navigation & Sub-Panes --- */
.studio-sub-navigation { display: flex; align-items: center; flex-shrink: 0; border-bottom: 1px solid var(--subtab-border); background-color: var(--chat-bg); padding: 0 15px; overflow-x: auto; overflow-y: hidden; margin-bottom: 0; height: var(--subnav-height); position: relative; }
body.bg-dark .studio-sub-navigation { border-bottom-color: var(--subtab-border-dark); background-color: var(--chat-bg-dark); }
#ld-live-tab .studio-sub-navigation { background-color: transparent; border-bottom-color: var(--subtab-border); }
body.bg-dark #ld-live-tab .studio-sub-navigation { background-color: transparent; border-bottom-color: var(--subtab-border-dark); }
.subnav-buttons-container { display: flex; flex-grow: 1; overflow-x: auto; overflow-y: hidden; height: 100%; align-items: center; transition: opacity 0.3s ease, visibility 0.3s ease; }
.studio-subtab-button { padding: 8px 12px; border: none; border-bottom: 2px solid transparent; background-color: transparent; color: var(--subtab-inactive-text); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: color 0.2s ease, border-bottom-color 0.2s ease, background-color 0.2s ease; display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; margin-bottom: -1px; white-space: nowrap; height: 100%; flex-shrink: 0; }
body.bg-dark .studio-subtab-button { color: var(--subtab-inactive-text-dark); }
.studio-subtab-button:hover { color: var(--subtab-active-text); background-color: var(--subtab-hover-bg); }
body.bg-dark .studio-subtab-button:hover { background-color: var(--subtab-hover-bg-dark); }
.studio-subtab-button.active { color: var(--subtab-active-text); border-bottom-color: var(--subtab-active-text); font-weight: 600; }
.studio-subtab-button:disabled { color: #bdc3c7; cursor: not-allowed; opacity: 0.6; background-color: transparent !important; }
body.bg-dark .studio-subtab-button:disabled { color: #6c757d; }
.studio-sub-navigation.sub-nav-collapsible { overflow: hidden; transition: height 0.3s ease; }
.sub-nav-collapse-toggle { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: var(--subnav-toggle-size); height: calc(var(--subnav-toggle-size) / 2); border-radius: var(--subnav-toggle-size) var(--subnav-toggle-size) 0 0; border: 1px solid var(--subtab-border); border-bottom: none; background-color: var(--chat-bg); color: var(--subtab-inactive-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; z-index: 105; transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease, opacity 0.3s ease; opacity: 0.6; }
.sub-nav-collapse-toggle:hover { opacity: 1; color: var(--subtab-active-text); background-color: var(--subtab-hover-bg); }
body.bg-dark .sub-nav-collapse-toggle { background-color: var(--chat-bg-dark); border-color: var(--subtab-border-dark); color: var(--subtab-inactive-text-dark); }
body.bg-dark .sub-nav-collapse-toggle:hover { background-color: var(--subtab-hover-bg-dark); }
.sub-nav-collapse-toggle i { transition: transform 0.3s ease; }
.studio-sub-navigation.sub-nav-collapsible.collapsed { height: var(--subnav-collapsed-height); overflow: visible; border-bottom-color: transparent; }
.studio-sub-navigation.sub-nav-collapsible.collapsed .subnav-buttons-container { opacity: 0; visibility: hidden; overflow: hidden; }
.studio-sub-navigation.sub-nav-collapsible.collapsed .sub-nav-collapse-toggle { opacity: 1; transform: translateX(-50%) translateY(1px); }
.studio-sub-navigation.sub-nav-collapsible.collapsed .sub-nav-collapse-toggle i { transform: rotate(180deg); }
.content-area, .drops-content-area { flex-grow: 1; position: relative; overflow: hidden; background-color: inherit; }
#ld-comms-tab .content-area, #ld-pages-tab .content-area { padding: 25px; height: 100%; overflow-y: auto; }
.comms-sub-pane, .pages-sub-pane, .drops-sub-pane { display: none; width: 100%; height: 100%; overflow: auto; background-color: inherit; box-sizing: border-box; }
.comms-sub-pane.active, .pages-sub-pane.active, .drops-sub-pane.active { display: block; }

/* --- Live Studio --- */
#ld-live-tab .studio-container { display: flex; width: 100%; height: 100%; }
#ld-live-tab .studio-main { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; padding: 15px 20px; height: 100%; }
#ld-live-tab .studio-content-area { flex-grow: 1; position: relative; overflow: hidden; min-height: 0; }
.studio-sub-pane { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.studio-sub-pane.active { display: flex; }
#destinations-studio-content { position: relative; display: none; overflow-y: auto; padding: 20px; background-color: var(--share-bg-light); flex-direction: column; }
body.bg-dark #destinations-studio-content { background-color: var(--chat-bg-dark); }
#destinations-studio-content.active { display: flex; /* Keep flex */ }
.studio-sub-pane-inner { display: flex; width: 100%; height: 100%; gap: 15px; padding: 5px; }
.preview-area { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; }
.preview-area h3 { font-size: 1rem; margin-bottom: 10px; color: inherit; text-align: center; font-weight: 500; flex-shrink: 0; }
.preview-video, .audio-placeholder, #sketch-canvas-placeholder { display: block; width: 100%; height: auto; flex-grow: 1; min-height: 0; aspect-ratio: 16 / 9; border-radius: 8px; background-color: #333; border: 1px solid var(--share-border-light); margin-bottom: 10px; object-fit: contain; transition: aspect-ratio 0.3s ease; }
.preview-video.vertical, .audio-placeholder.vertical, #sketch-canvas-placeholder.vertical { aspect-ratio: 9 / 16; }
.audio-placeholder { background-color: #444; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #ccc; } .audio-placeholder i { font-size: 4rem; margin-bottom: 15px; opacity: 0.6; } .audio-placeholder span { font-size: 1rem; font-style: italic; opacity: 0.8; }
body.bg-dark .preview-video, body.bg-dark .audio-placeholder { border-color: var(--share-border-dark); } #sketch-canvas-placeholder { display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #ccc; } body.bg-dark #sketch-canvas-placeholder { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); }
.format-controls { text-align: center; margin-bottom: 10px; flex-shrink: 0; } .format-controls label { font-size: 0.8rem; margin-right: 8px; font-weight: 500; color: var(--share-text-light); opacity: 0.8; } body.bg-dark .format-controls label { color: var(--share-text-dark); } .format-controls button { font-size: 0.8rem; padding: 3px 8px; margin: 0 3px; border-radius: 4px; border: 1px solid var(--share-border-light); background-color: var(--chat-bg); color: var(--share-text-light); cursor: pointer; opacity: 0.8; } body.bg-dark .format-controls button { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); color: var(--share-text-dark); } .format-controls button:hover:not(:disabled) { opacity: 1; border-color: var(--share-accent); } .format-controls button.active { background-color: var(--share-accent); color: white; border-color: var(--share-accent); font-weight: 500; opacity: 1; } .format-controls button:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--share-disabled-bg) !important; border-color: var(--share-disabled-bg) !important; color: var(--share-disabled-text) !important;}
.vertical-controls { display: flex; flex-direction: column; gap: 10px; width: 150px; flex-shrink: 0; } .vertical-controls button { width: 100%; padding: 10px 15px; font-size: 0.9rem; border: none; border-radius: 5px; cursor: pointer; color: var(--share-button-text); transition: background-color 0.2s ease, opacity 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; } .vertical-controls button.start-rec-btn, .vertical-controls button.start-share-btn { background-color: var(--share-accent); } .vertical-controls button.start-rec-btn:hover:not(:disabled), .vertical-controls button.start-share-btn:hover:not(:disabled) { background-color: var(--share-accent-hover); } .vertical-controls button.stop-rec-btn, .vertical-controls button.stop-share-btn, .vertical-controls button.stop-stream-btn { background-color: var(--share-stop-color); } .vertical-controls button.stop-rec-btn:hover:not(:disabled), .vertical-controls button.stop-share-btn:hover:not(:disabled), .vertical-controls button.stop-stream-btn:hover:not(:disabled) { background-color: var(--share-stop-hover); } .vertical-controls button.go-live-btn { background-color: var(--share-stream-color); } .vertical-controls button.go-live-btn:hover:not(:disabled) { background-color: var(--share-stream-hover); } .vertical-controls button.mute-btn { background-color: var(--mute-neutral-bg); } .vertical-controls button.mute-btn:hover:not(:disabled) { background-color: var(--mute-neutral-hover); } .vertical-controls button.mute-btn.muted { background-color: var(--share-stop-color); } .vertical-controls button.mute-btn.muted:hover:not(:disabled) { background-color: var(--share-stop-hover); } .vertical-controls button:disabled { background-color: var(--share-disabled-bg); color: var(--share-disabled-text); cursor: not-allowed; opacity: 0.7; } .vertical-controls button.hidden { display: none; }
.sub-status { margin-top: auto; font-size: 0.85rem; text-align: center; padding: 5px; border-radius: 4px; min-height: 1.2em; width: 100%; font-weight: 500; flex-shrink: 0; } .sub-status.error { color: var(--share-stop-color); background-color: var(--status-error-bg);} .sub-status.success { color: var(--share-stream-color); background-color: var(--status-success-bg); } .sub-status.warning { color: #ffc107; background-color: var(--status-warning-bg); } .sub-status.info { color: inherit; background-color: var(--status-info-bg); }

/* --- Chat Sidebar Styling --- */
/* (Keep existing) */
/* *** Updated: .chat-sidebar is now inside .studio-sidebar-area *** */
#ld-live-tab .chat-sidebar {
    /* width: 320px; REMOVED - handled by container */
    flex-shrink: 0; /* Keep */
    /* height: 100%; REMOVED - handled by container */
    display: flex; /* Keep */
    flex-direction: column; /* Keep */
    /* border-left: 1px solid var(--chat-border); REMOVED - handled by container */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Keep */
    /* background-color handled by container */
    flex-grow: 1; /* Allow chat to fill sidebar area */
    overflow: hidden; /* Prevent internal scrollbar */
}
body.bg-light #ld-live-tab .chat-sidebar {
    /* background-color: var(--chat-bg); Inherited */
    /* border-left-color: var(--chat-border); Inherited */
}
body.bg-dark #ld-live-tab .chat-sidebar {
    /* background-color: var(--chat-bg-dark); Inherited */
    /* border-left-color: var(--chat-border-dark); Inherited */
}
#ld-live-tab .chat-header { padding: 10px 15px; font-weight: 600; border-bottom: 1px solid var(--chat-border); flex-shrink: 0; text-align: center; font-size: 1rem; }
body.bg-light #ld-live-tab .chat-header { border-bottom-color: var(--chat-border); }
body.bg-dark #ld-live-tab .chat-header { border-bottom-color: var(--chat-border-dark); color: var(--share-text-dark); }
#ld-live-tab .chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px 12px; display: flex; flex-direction: column; background-color: inherit; }
#ld-live-tab .typing-indicator-area { height: 20px; padding: 0 12px; flex-shrink: 0; display: flex; align-items: center; overflow: hidden; border-top: 1px solid var(--chat-border); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
body.bg-light #ld-live-tab .typing-indicator-area { border-top-color: var(--chat-border); }
body.bg-dark #ld-live-tab .typing-indicator-area { border-top-color: var(--chat-border-dark); }
#ld-live-tab .typing-indicator-area.visible { opacity: 1; visibility: visible; }
#ld-live-tab #typing-indicator-text { font-size: 0.8rem; color: var(--chat-sender-text); font-style: italic; animation: typing-fade 1.5s infinite ease-in-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes typing-fade { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
#ld-live-tab .chat-input-container { display: flex; align-items: center; padding: 10px 10px; flex-shrink: 0; border-top: 1px solid var(--chat-border); gap: 8px; transition: background-color 0.3s ease, border-color 0.3s ease; background-color: inherit; } /* Background inherit from parent */
body.bg-light #ld-live-tab .chat-input-container { border-top-color: var(--chat-border); }
body.bg-dark #ld-live-tab .chat-input-container { border-top-color: var(--chat-border-dark); }
#ld-live-tab #chat-input-field { flex-grow: 1; padding: 8px 10px; border: 1px solid var(--chat-border); border-radius: 5px; font-size: 0.9rem; outline: none; height: 38px; transition: border-color 0.2s ease, background-color 0.3s ease, color 0.3s ease; }
body.bg-light #ld-live-tab #chat-input-field { background-color: var(--chat-input-bg); color: var(--chat-text-light); border-color: var(--chat-border); }
body.bg-dark #ld-live-tab #chat-input-field { background-color: var(--chat-input-bg-dark); color: var(--chat-text-dark); border-color: var(--chat-border-dark); }
#ld-live-tab #chat-input-field:focus { border-color: var(--share-accent); }
#ld-live-tab #chat-input-field:disabled { background-color: rgba(108, 117, 125, 0.2); cursor: not-allowed; opacity: 0.7; }
#ld-live-tab #chat-send-btn { flex-shrink: 0; height: 38px; width: 45px; border: none; border-radius: 5px; cursor: pointer; background-color: var(--share-accent); color: white; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
#ld-live-tab #chat-send-btn:hover:not(:disabled) { background-color: var(--share-accent-hover); }
#ld-live-tab #chat-send-btn:disabled { background-color: var(--share-disabled-bg); cursor: not-allowed; opacity: 0.6; }
#ld-live-tab .message-container { display: flex; margin-bottom: 12px; width: 100%; }
#ld-live-tab .message-container.align-left { justify-content: flex-start; }
#ld-live-tab .message-container.align-right { justify-content: flex-end; }
#ld-live-tab .message-container.align-center { justify-content: center; margin-top: 5px; margin-bottom: 15px;}
#ld-live-tab .chat-message { border-radius: 8px; padding: 8px 12px; max-width: 85%; display: flex; flex-direction: column; position: relative; word-wrap: break-word; line-height: 1.4; font-size: 0.9rem; transition: background-color 0.3s ease, color 0.3s ease; }
#ld-live-tab .message-container.align-right .chat-message { background-color: var(--chat-bubble-sent-bg); color: var(--chat-bubble-sent-text); border-top-right-radius: 2px; align-items: flex-end; }
#ld-live-tab .message-container.align-left .chat-message { border: 1px solid var(--chat-border); border-top-left-radius: 2px; }
body.bg-light #ld-live-tab .message-container.align-left .chat-message { background-color: var(--chat-bubble-received-bg); color: var(--chat-bubble-received-text); border-color: var(--chat-border); }
body.bg-dark #ld-live-tab .message-container.align-left .chat-message { background-color: var(--chat-bubble-received-bg-dark); color: var(--chat-bubble-received-text-dark); border-color: var(--chat-border-dark); }
#ld-live-tab .message-container.align-center .chat-message { border: none !important; box-shadow: none !important; font-size: 0.8rem; font-style: italic; text-align: center; max-width: 90%; padding: 2px 0; background-color: transparent !important; }
#ld-live-tab .message-container.align-center .chat-message span { display: inline-block; padding: 3px 8px; border-radius: 10px; transition: background-color 0.3s ease, color 0.3s ease; }
body.bg-light #ld-live-tab .message-container.align-center .chat-message span { background-color: var(--chat-bubble-system-bg); color: var(--chat-bubble-system-text); }
body.bg-dark #ld-live-tab .message-container.align-center .chat-message span { background-color: var(--chat-bubble-system-bg-dark); color: var(--chat-bubble-system-text-dark); }
#ld-live-tab .chat-message .sender-name { font-weight: 600; font-size: 0.8rem; margin-bottom: 3px; color: var(--chat-sender-text); opacity: 0.9; }
body.bg-dark #ld-live-tab .chat-message .sender-name { color: var(--chat-timestamp-text); }
#ld-live-tab .message-container.align-right .chat-message .sender-name { display: none; }
#ld-live-tab .chat-message .timestamp { font-size: 0.7rem; opacity: 0.8; margin-top: 4px; align-self: flex-end; color: var(--chat-timestamp-text); }

/* --- Placeholder Styles (Generic) --- */
/* (Keep existing) */
.placeholder-content { display: flex; align-items: center; justify-content: center; height: 100%; flex-direction: column; text-align: center; color: #6c757d; font-size: 1.1rem; padding: 20px; } body.bg-dark .placeholder-content { color: #adb5bd; } .placeholder-content i { font-size: 3rem; margin-bottom: 15px; color: #adb5bd; } body.bg-dark .placeholder-content i { color: #6c757d; } .placeholder-content h3 { color: #495057; margin-bottom: 10px; font-weight: 600; } body.bg-dark .placeholder-content h3 { color: #dee2e6; } .placeholder-content p { font-size: 0.95rem; }

/* --- Dashboard Tab Styles --- */
/* (Keep existing) */
#ld-dashboard-tab .sd-admin-header { font-size: 1.5em; margin-bottom: 25px; color: var(--share-text-light); display: flex; align-items: center; border-bottom: 1px solid var(--share-border-light); padding-bottom: 10px; } body.bg-dark #ld-dashboard-tab .sd-admin-header { color: var(--share-text-dark); border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .sd-admin-header i { color: var(--share-accent); margin-right: 10px; } #ld-dashboard-tab .sd-admin-grid { display: grid; gap: 25px; grid-template-columns: 1fr 300px; } #ld-dashboard-tab .sd-main-content { display: flex; flex-direction: column; gap: 25px; } #ld-dashboard-tab .sd-sidebar-widgets { display: flex; flex-direction: column; gap: 20px; } #ld-dashboard-tab .sd-section { background-color: var(--chat-bg); border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid var(--share-border-light); } body.bg-dark #ld-dashboard-tab .sd-section { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); } #ld-dashboard-tab .sd-section h3, #ld-dashboard-tab .sd-widget h4 { font-size: 1.1em; color: var(--chat-text-light); margin-bottom: 15px; display: flex; align-items: center; border-bottom: 1px solid var(--share-border-light); padding-bottom: 8px;} body.bg-dark #ld-dashboard-tab .sd-section h3, body.bg-dark #ld-dashboard-tab .sd-widget h4 { color: var(--chat-text-dark); border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .sd-section h3 i, #ld-dashboard-tab .sd-widget h4 i { margin-right: 8px; color: var(--share-accent); } #ld-dashboard-tab .sd-summary-section .sd-table-container { width: 100%; overflow-x: auto; } #ld-dashboard-tab .dashboard-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } #ld-dashboard-tab .dashboard-table th, #ld-dashboard-tab .dashboard-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--share-border-light); white-space: nowrap; } body.bg-dark #ld-dashboard-tab .dashboard-table th, body.bg-dark #ld-dashboard-tab .dashboard-table td { border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .dashboard-table thead th { background-color: var(--share-bg-light); font-weight: 600; color: var(--chat-sender-text); font-size: 0.8rem; text-transform: uppercase; border-bottom-width: 2px; } body.bg-dark #ld-dashboard-tab .dashboard-table thead th { background-color: var(--chat-bg-dark); color: var(--chat-timestamp-text); border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .dashboard-table tbody tr:hover { background-color: rgba(0, 123, 255, 0.05); } body.bg-dark #ld-dashboard-tab .dashboard-table tbody tr:hover { background-color: rgba(0, 123, 255, 0.1); } #ld-dashboard-tab .sd-status-badge, #ld-dashboard-tab .sd-access-badge { padding: 3px 8px; border-radius: 12px; font-size: 0.8em; font-weight: 500; white-space: nowrap; } #ld-dashboard-tab .sd-status-live { background-color: var(--status-success-bg); color: var(--share-stream-color); border: 1px solid var(--share-stream-color); } #ld-dashboard-tab .sd-status-scheduled { background-color: var(--status-warning-bg); color: #c88f0a; border: 1px solid #ffc107; } #ld-dashboard-tab .sd-status-ended { background-color: #e9ecef; color: #6c757d; border: 1px solid #adb5bd; } body.bg-dark #ld-dashboard-tab .sd-status-ended { background-color: #495057; color: #adb5bd; border-color: #6c757d; } #ld-dashboard-tab .sd-access-paid { background-color: rgba(0, 123, 255, 0.1); color: var(--share-accent); border: 1px solid var(--share-accent); } #ld-dashboard-tab .sd-access-free { background-color: rgba(108, 117, 125, 0.1); color: #6c757d; border: 1px solid #adb5bd; } body.bg-dark #ld-dashboard-tab .sd-access-free { color: #adb5bd; border-color: #6c757d; } #ld-dashboard-tab .dashboard-actions a, #ld-dashboard-tab .dashboard-actions button { color: var(--share-accent); text-decoration: none; margin-right: 12px; background: none; border: none; padding: 0; font-size: 1em; cursor: pointer; vertical-align: middle; } #ld-dashboard-tab .dashboard-actions a:hover, #ld-dashboard-tab .dashboard-actions button:hover { color: var(--share-accent-hover); } #ld-dashboard-tab .dashboard-actions .delete-btn { color: var(--share-stop-color); } #ld-dashboard-tab .dashboard-actions .delete-btn:hover { color: var(--share-stop-hover); } #ld-dashboard-tab .sd-pagination { margin-top: 15px; text-align: right; font-size: 0.9rem; } #ld-dashboard-tab .sd-pagination a, #ld-dashboard-tab .sd-pagination span { margin-left: 10px; color: var(--share-accent); text-decoration: none; } #ld-dashboard-tab .sd-pagination a:hover { text-decoration: underline; } #ld-dashboard-tab .sd-pagination span { color: var(--chat-sender-text); } body.bg-dark #ld-dashboard-tab .sd-pagination span { color: var(--chat-timestamp-text); } #ld-dashboard-tab .sd-widget { background-color: var(--chat-bg); border-radius: 8px; padding: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid var(--share-border-light); } body.bg-dark #ld-dashboard-tab .sd-widget { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); } #ld-dashboard-tab .sd-sales-widget .sd-sales-total { text-align: center; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--share-border-light); } body.bg-dark #ld-dashboard-tab .sd-sales-widget .sd-sales-total { border-bottom-color: var(--share-border-dark); } #ld-dashboard-tab .sd-sales-widget .sd-sales-total span { display: block; font-size: 0.85em; color: var(--chat-sender-text); margin-bottom: 2px; } body.bg-dark #ld-dashboard-tab .sd-sales-widget .sd-sales-total span { color: var(--chat-timestamp-text); } #ld-dashboard-tab .sd-sales-widget .sd-sales-total strong { font-size: 1.8em; font-weight: 600; color: var(--share-stream-color); } #ld-dashboard-tab .sd-sales-widget h5 { font-size: 0.9em; font-weight: 600; margin-bottom: 8px; color: var(--chat-text-light); } body.bg-dark #ld-dashboard-tab .sd-sales-widget h5 { color: var(--chat-text-dark); } #ld-dashboard-tab .sd-recent-Income { list-style: none; padding: 0; margin: 0 0 15px 0; font-size: 0.85rem; } #ld-dashboard-tab .sd-recent-Income li { margin-bottom: 5px; color: var(--chat-text-light); display: flex; justify-content: space-between; } body.bg-dark #ld-dashboard-tab .sd-recent-Income li { color: var(--chat-text-dark); } #ld-dashboard-tab .sd-recent-Income li span { font-weight: 500; color: var(--share-stream-color); } #ld-dashboard-tab .sd-view-details-link { display: block; text-align: center; font-size: 0.85rem; margin-top: 10px; color: var(--share-accent); text-decoration: none;} #ld-dashboard-tab .sd-view-details-link:hover { text-decoration: underline; }

/* --- Account Settings & Income Tab Styles --- */
/* (Keep existing shared styles) */
#ld-account-tab h2, #ld-Income-tab h2 { font-size: 1.5em; margin-bottom: 25px; color: var(--share-text-light); display: flex; align-items: center; border-bottom: 1px solid var(--share-border-light); padding-bottom: 10px; } body.bg-dark #ld-account-tab h2, body.bg-dark #ld-Income-tab h2 { color: var(--share-text-dark); border-bottom-color: var(--share-border-dark); } #ld-account-tab h2 i, #ld-Income-tab h2 i { color: var(--share-accent); margin-right: 10px; } .account-sections { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } .account-section { background-color: var(--chat-bg); border: 1px solid var(--share-border-light); border-radius: 8px; padding: 20px; } body.bg-dark .account-section { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); } .account-section h3 { font-size: 1.2em; margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; color: var(--chat-text-light); font-weight: 600; } body.bg-dark .account-section h3 { color: var(--chat-text-dark); } .account-section h3 i { margin-right: 8px; color: var(--share-accent); width: 20px; text-align: center; } .estimator-container label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--estimator-label-color); font-size: 0.9rem; } body.bg-dark .estimator-container label { color: var(--estimator-label-color-dark); } .estimator-container input[type="number"] { width: 100%; padding: 8px 10px; margin-bottom: 15px; border: 1px solid var(--estimator-input-border); border-radius: 4px; font-size: 1rem; background-color: var(--estimator-input-bg); color: var(--chat-text-light); } body.bg-dark .estimator-container input[type="number"] { background-color: var(--estimator-input-bg-dark); border-color: var(--estimator-input-border-dark); color: var(--chat-text-dark); } #estimator-result, #estimator-result-income { margin-top: 20px; font-size: 1.1em; padding: 15px; border-radius: 5px; background-color: var(--estimator-result-bg); border: 1px solid var(--share-border-light); line-height: 1.6; } body.bg-dark #estimator-result, body.bg-dark #estimator-result-income { background-color: var(--estimator-result-bg-dark); border-color: var(--share-border-dark); } #estimator-result strong, #estimator-result-income strong { font-weight: 600; color: var(--chat-text-light); } body.bg-dark #estimator-result strong, body.bg-dark #estimator-result-income strong { color: var(--chat-text-dark); } #estimator-result span.error, #estimator-result-income span.error { color: var(--share-stop-color); }

/* --- RTMP Destination Specific Styles (Studios Tab - Main Pane List) --- */
/* Styles adjusted for display inside the main pane, not the modal/sidebar */
.destinations-sub-pane .destinations-content-wrapper { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; }
.destinations-sub-pane .destinations-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid var(--share-border-light); padding-bottom: 15px; }
body.bg-dark .destinations-sub-pane .destinations-header { border-bottom-color: var(--share-border-dark); }
.destinations-sub-pane .destinations-header h3 { margin: 0; font-size: 1.3em; font-weight: 600; color: var(--share-text-light); display: flex; align-items: center; gap: 8px; }
body.bg-dark .destinations-sub-pane .destinations-header h3 { color: var(--share-text-dark); }
.destinations-sub-pane .destinations-header h3 i { color: var(--share-accent); }
.destinations-sub-pane .destinations-description { font-size: 0.95rem; color: var(--chat-sender-text); margin-bottom: 25px; }
body.bg-dark .destinations-sub-pane .destinations-description { color: var(--chat-timestamp-text); }
.rtmp-destination-list-studio { /* Renamed from list-cards to just list */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 0; min-height: 50px; border-top: none; padding-top: 0; margin-bottom: 20px; }
.rtmp-destination-card { background-color: var(--chat-bg); border: 1px solid var(--share-border-light); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow 0.2s ease; }
.rtmp-destination-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.08); }
body.bg-dark .rtmp-destination-card { background-color: var(--chat-bg-dark); border-color: var(--share-border-dark); }
.rtmp-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--share-border-light); padding-bottom: 10px; }
body.bg-dark .rtmp-card-header { border-bottom-color: var(--share-border-dark); }
.rtmp-card-logo { font-size: 1.8em; width: 30px; text-align: center; color: var(--share-accent); }
.rtmp-card-logo.youtube { color: #FF0000; } .rtmp-card-logo.twitch { color: #9146FF; } .rtmp-card-logo.facebook { color: #1877F2; }
.rtmp-card-name { font-weight: 600; font-size: 1.1em; color: var(--share-text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; }
body.bg-dark .rtmp-card-name { color: var(--share-text-dark); }
.rtmp-card-details p { margin: 5px 0; font-size: 0.85rem; color: var(--chat-sender-text); word-break: break-all; }
body.bg-dark .rtmp-card-details p { color: var(--chat-timestamp-text); }
.rtmp-card-details strong { font-weight: 500; color: var(--share-text-light); margin-right: 5px; }
body.bg-dark .rtmp-card-details strong { color: var(--share-text-dark); }
.rtmp-stream-key-container { display: flex; align-items: center; gap: 8px; margin-top: 8px; /* Added margin */ }
.rtmp-stream-key { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; font-size: 0.8rem; background-color: rgba(0,0,0,0.03); padding: 3px 6px; border-radius: 3px; } body.bg-dark .rtmp-stream-key { background-color: rgba(255,255,255,0.08); }
.toggle-key-visibility { background: none; border: none; color: var(--share-accent); cursor: pointer; padding: 0 4px; font-size: 0.9em; }
.toggle-key-visibility:hover { opacity: 0.8; }
.rtmp-card-actions { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--share-border-light); display: flex; justify-content: flex-end; gap: 8px; }
body.bg-dark .rtmp-card-actions { border-top-color: var(--share-border-dark); }
/* Removed Add/Edit buttons from card actions - moved to sidebar */
.destinations-sub-pane .rtmp-destination-placeholder { font-style: italic; color: var(--chat-sender-text); padding: 10px 0; text-align: center; grid-column: 1 / -1; }
body.bg-dark .destinations-sub-pane .rtmp-destination-placeholder { color: var(--chat-timestamp-text); }
/* Removed rtmp-form-container styles as it's no longer inline */

/* --- Generic Button Styles --- */
button.button-primary, button.button-secondary, button.button-danger { padding: 10px 15px; font-size: 0.9rem; border: none; border-radius: 5px; cursor: pointer; color: var(--share-button-text); transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; line-height: 1.5; text-decoration: none; } button.button-primary i, button.button-secondary i, button.button-danger i { margin-right: 4px; } button.button-primary { background-color: var(--share-accent); border: 1px solid var(--share-accent); } button.button-primary:hover:not(:disabled) { background-color: var(--share-accent-hover); border-color: var(--share-accent-hover); } button.button-secondary { background-color: var(--button-secondary-bg); border: 1px solid var(--button-secondary-border); color: white; } button.button-secondary:hover:not(:disabled) { background-color: var(--button-secondary-hover-bg); border-color: var(--button-secondary-hover-border); } button.button-danger { background-color: var(--button-danger-bg); border: 1px solid var(--button-danger-border); color: white; } button.button-danger:hover:not(:disabled) { background-color: var(--button-danger-hover-bg); border-color: var(--button-danger-hover-border); } button.button-small { padding: 5px 8px; font-size: 0.8rem; gap: 4px; } button.button-small i { font-size: 0.9em; margin-right: 3px; } button.button-primary:disabled, button.button-secondary:disabled, button.button-danger:disabled { background-color: var(--share-disabled-bg); border-color: var(--share-disabled-bg); color: var(--share-disabled-text); cursor: not-allowed; opacity: 0.7; }

/* --- Modal Styles --- */
/* Removed entire modal section */


/* ############################################# */
/* ### Drops Tab & Content Viewer Styles     ### */
/* ############################################# */
/* (Keep existing Drops tab styles) */
#ld-drops-tab .studio-sub-navigation { margin-bottom: 0; } #ld-drops-tab .drops-content-area { flex-grow: 1; position: relative; overflow: hidden; background-color: inherit; } .drops-sub-pane { display: none; width: 100%; height: 100%; overflow: auto; background-color: inherit; box-sizing: border-box; } .drops-sub-pane.active { display: block; } #drops-preview-pane { padding: 25px; background-color: var(--yt-bg-dark); color: var(--yt-text-primary-dark); overflow: auto; } #drops-preview-pane.active { display: block; } #drops-manage-pane { padding: 30px; } #drops-manage-pane .placeholder-content { height: 100%; } .cv-container { display: flex; height: 100%; width: 100%; justify-content: center; align-items: flex-start; padding: 0; overflow: hidden; gap: 20px; max-height: 100%; } .cv-thumbnail-sidebar { width: 240px; height: 100%; display: flex; flex-direction: column; flex-shrink: 0; background-color: var(--yt-panel-bg-dark); border-radius: var(--yt-radius); overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .cv-thumbnail-search { display: flex; padding: 10px; border-bottom: 1px solid var(--yt-border-dark); flex-shrink: 0; } .cv-thumbnail-search input { flex-grow: 1; padding: 6px 10px; border-radius: 15px 0 0 15px; border: 1px solid var(--yt-border-dark); border-right: none; background-color: var(--yt-bg-dark); color: var(--yt-text-primary-dark); font-size: 0.85rem; outline: none; } .cv-thumbnail-search button { padding: 6px 10px; border: 1px solid var(--yt-border-dark); background-color: var(--yt-button-bg-secondary-dark); color: var(--yt-text-secondary-dark); border-radius: 0 15px 15px 0; cursor: pointer; font-size: 0.9rem; } .cv-thumbnail-search button:hover { background-color: var(--yt-button-bg-hover-dark); color: var(--yt-text-primary-dark); } .cv-thumbnail-list { flex-grow: 1; overflow-y: auto; padding: 8px; } .cv-thumbnail-placeholder { padding: 20px; text-align: center; color: var(--yt-text-secondary-dark); font-style: italic; } .cv-thumbnail-item { display: flex; align-items: center; gap: 10px; padding: 8px; margin-bottom: 8px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; background-color: transparent; border: 1px solid transparent; } .cv-thumbnail-item:hover { background-color: var(--yt-button-bg-hover-dark); } .cv-thumbnail-item.active { background-color: rgba(255, 255, 255, 0.15); border-color: var(--yt-text-secondary-dark); } .cv-thumbnail-item img { width: 60px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; flex-shrink: 0; background-color: #333; } .cv-thumbnail-item-info { flex-grow: 1; overflow: hidden; font-size: 0.85rem; } .cv-thumbnail-item-info .title { font-weight: 500; color: var(--yt-text-primary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; } .cv-thumbnail-item-info .creator, .cv-thumbnail-item-info .status { font-size: 0.75rem; color: var(--yt-text-secondary-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cv-thumbnail-item-info .status.published { color: #28a745; font-weight: 500; } .cv-video-section { max-width: calc(100% - 240px - 360px - 40px); flex-grow: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 0 15px; } .cv-video-player-wrapper { width: 100%; max-width: 400px; aspect-ratio: 9 / 16; background-color: #000; border-radius: var(--yt-radius); overflow: hidden; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .cv-video-player { display: block; width: 100%; height: 100%; border: none; object-fit: contain; } .cv-video-navigation { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 10; } .cv-nav-button { background-color: rgba(0, 0, 0, 0.6); border: 1px solid var(--yt-border-dark); color: var(--yt-text-primary-dark); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: background-color 0.2s ease; cursor: pointer; } .cv-nav-button:hover { background-color: rgba(255, 255, 255, 0.15); } .cv-nav-button:disabled { opacity: 0.5; cursor: not-allowed; } .cv-video-info-primary { width: 100%; max-width: 400px; margin-top: 16px; padding: 0 5px; } .cv-creator-info { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .cv-creator-info img.avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--yt-text-secondary-dark); } .cv-creator-info .username { font-weight: 600; font-size: 1rem; flex-grow: 1; color: var(--yt-text-primary-dark); } .cv-video-description { font-size: 0.9rem; color: var(--yt-text-secondary-dark); line-height: 1.4; max-height: 4.2em; overflow: hidden; text-overflow: ellipsis; cursor: pointer; margin-bottom: 12px; } .cv-video-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; flex-wrap: wrap; } .cv-action-button-group { display: flex; background-color: var(--yt-button-bg-secondary-dark); border-radius: 18px; overflow: hidden; } .cv-video-actions button { display: inline-flex; align-items: center; gap: 6px; background-color: var(--yt-button-bg-secondary-dark); padding: 8px 14px; border-radius: 18px; font-size: 0.9rem; font-weight: 500; cursor: pointer; border: none; color: var(--yt-text-primary-dark); } .cv-video-actions button:hover { background-color: var(--yt-button-bg-hover-dark); } .cv-video-actions .cv-action-button-group button { border-radius: 0; } .cv-video-actions .cv-action-button-group button:first-child { border-top-left-radius: 18px; border-bottom-left-radius: 18px; padding-left: 16px; } .cv-video-actions .cv-action-button-group button:last-child { border-top-right-radius: 18px; border-bottom-right-radius: 18px; padding-right: 16px; } .cv-video-actions .cv-action-button-group .separator { width: 1px; background-color: var(--yt-border-dark); opacity: 0.5; } .cv-video-actions button i { font-size: 1.1rem; } .cv-publish-button { background-color: #28a745; color: white; margin-left: auto; } .cv-publish-button:hover { background-color: #218838; } .cv-publish-button:disabled { background-color: #6c757d; cursor: not-allowed;} .cv-publish-button.published { background-color: #17a2b8; } .cv-details-section { width: 360px; height: 100%; background-color: var(--yt-panel-bg-dark); border-radius: var(--yt-radius); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .cv-video-info-secondary { padding: 16px; border-bottom: 1px solid var(--yt-border-dark); flex-shrink: 0; } .cv-video-info-secondary .title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; color: var(--yt-text-primary-dark); } .cv-video-info-secondary .stats { font-size: 0.85rem; color: var(--yt-text-secondary-dark); } .cv-comments-section { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; } .cv-comments-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--yt-border-dark); flex-shrink: 0; } .cv-comments-header h3 { font-size: 1rem; margin: 0; font-weight: 500; color: var(--yt-text-primary-dark); } .cv-comment-list { flex-grow: 1; overflow-y: auto; padding: 16px; } .cv-comment { display: flex; gap: 12px; margin-bottom: 16px; font-size: 0.9rem; } .cv-comment img.avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background-color: var(--yt-text-secondary-dark); } .cv-comment-content .username { font-weight: 600; margin-right: 6px; font-size: 0.85rem; color: var(--yt-text-primary-dark); } .cv-comment-content .timestamp { font-size: 0.75rem; color: var(--yt-text-secondary-dark); margin-left: 5px; } .cv-comment-text { margin-top: 4px; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; color: var(--yt-text-primary-dark); } .cv-comment-actions { margin-top: 6px; font-size: 0.8rem; color: var(--yt-text-secondary-dark); } .cv-comment-actions button { font-size: inherit; margin-right: 15px; font-weight: 500; cursor: pointer; background: none; border: none; color: inherit; padding: 0;} .cv-comment-actions button i { margin-right: 4px; } .cv-comment-actions button:hover { color: var(--yt-text-primary-dark); } .cv-comment-input-area { padding: 12px 16px; border-top: 1px solid var(--yt-border-dark); flex-shrink: 0; display: flex; gap: 10px; align-items: center; } .cv-comment-input-area img.avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--yt-text-secondary-dark); } .cv-comment-input-area input { flex-grow: 1; padding: 8px 12px; border: none; border-bottom: 1px solid var(--yt-text-secondary-dark); background-color: transparent; color: var(--yt-text-primary-dark); font-size: 0.9rem; outline: none; } .cv-comment-input-area input:focus { border-bottom: 2px solid var(--yt-text-primary-dark); } .cv-comment-input-area button { background-color: transparent; color: var(--yt-text-secondary-dark); font-size: 1.3rem; padding: 5px; cursor: pointer; border: none; } .cv-comment-input-area button:hover:not(:disabled) { color: var(--yt-text-primary-dark); } .cv-comment-input-area button:disabled { opacity: 0.5; cursor: not-allowed; } .cv-no-drops-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--yt-text-secondary-dark); text-align: center;} .cv-no-drops-placeholder i { font-size: 4rem; margin-bottom: 20px; opacity: 0.5;} .cv-no-drops-placeholder p { font-size: 1.1rem; }

/* --- Responsive Styles --- */
@media (max-width: 1200px) { /* ... keep existing ... */ .cv-thumbnail-sidebar { width: 200px; } .cv-details-section { width: 320px; } .cv-video-section { max-width: calc(100% - 200px - 320px - 30px); } }
@media (max-width: 1000px) { /* ... keep existing ... */ #ld-dashboard-tab .sd-admin-grid { grid-template-columns: 1fr; } #ld-dashboard-tab .sd-sidebar-widgets { order: -1; } #drops-preview-pane { padding: 15px; overflow: auto; } .cv-container { flex-direction: column; height: auto; min-height: auto; padding: 0; align-items: center; overflow: visible; gap: 15px; } .cv-thumbnail-sidebar { order: 2; width: 100%; max-width: 500px; height: 250px; margin-top: 15px; max-height: 40vh; } .cv-video-section { order: 1; max-width: 500px; width: 100%; padding: 0; height: auto; } .cv-details-section { order: 3; width: 100%; max-width: 500px; height: auto; margin-top: 15px; max-height: none; } .cv-video-navigation { display: none; } .rtmp-destination-list-studio { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
@media (max-width: 768px) { /* ... keep existing ... */
    .tab-pane { padding: 15px; }
    #ld-dashboard-tab.active, #ld-account-tab, #ld-Income-tab, #destinations-studio-content { padding: 20px; }
    #ld-comms-tab .content-area, #ld-pages-tab .content-area { padding: 15px; }
    #drops-manage-pane { padding: 15px; }
    #drops-preview-pane { padding: 15px; }
    .studio-sub-pane-inner { flex-direction: column; }
    .vertical-controls { width: 100%; flex-direction: row; flex-wrap: wrap; margin-top: 15px; }
    .vertical-controls button { flex-grow: 1; min-width: 100px; }
    .sub-status { margin-top: 10px; }
    .preview-video, .audio-placeholder { max-height: calc(100% - 60px); }
    /* *** Updated: Studio Layout on mobile *** */
    #ld-live-tab .studio-container { flex-direction: column; }
    #ld-live-tab .studio-main { padding-bottom: 10px; }
    #ld-live-tab .studio-sidebar-area { /* Changed from chat-sidebar */
        width: 100%; height: 300px; /* Adjust height as needed */
        border-left: none;
        border-top: 1px solid var(--chat-border);
        flex-shrink: 0; /* Ensure it doesn't shrink */
    }
    body.bg-dark #ld-live-tab .studio-sidebar-area { border-top-color: var(--chat-border-dark); }
    #ld-dashboard-tab .sd-table-container { margin-left: -15px; margin-right: -15px; }
    .account-sections { grid-template-columns: 1fr; }
    .nav-logo { font-size: 1rem; padding: 0 10px 0 5px; }
    .tab-button { padding: 10px 10px; }
    .studio-sub-navigation { padding: 0 10px; }
    .studio-subtab-button { padding: 8px 8px; font-size: 0.85rem; margin-right: 5px; gap: 4px; }
    .studio-subtab-button i { font-size: 0.9rem; }
    .rtmp-destination-list-studio { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; }
}
 @media (max-width: 600px) { /* ... keep existing ... */
    #drops-preview-pane { padding: 10px; overflow: auto; }
    .cv-container { padding: 0; gap: 10px; align-items: stretch; }
    .cv-thumbnail-sidebar { height: 200px; width: 100%; max-width: 100%; }
    .cv-thumbnail-search input { width: auto; }
    .cv-video-section, .cv-details-section { max-width: 100%; width: 100%; }
    .cv-video-player-wrapper, .cv-details-section { border-radius: 0; margin-top: 0; }
    .cv-details-section { margin-top: 10px; }
    .cv-video-actions { justify-content: space-between; }
    .cv-video-actions .cv-publish-button { margin-left: 0; }
    .nav-logo { padding: 0 10px; margin-right: 5px; font-size: 1.1rem; }
    body.nav-collapsed .tab-navigation { height: var(--nav-collapsed-height); }
    .tab-button { padding: 10px 8px; font-size: 0.8rem; gap: 4px; }
    .tab-button i { font-size: 0.9rem; }
    .nav-buttons-container { padding-right: 0; }
    .studio-sub-navigation { padding: 0 5px; }
    .studio-subtab-button { padding: 6px 5px; font-size: 0.8rem; gap: 3px; margin-right: 3px; }
    .studio-subtab-button i { font-size: 0.8rem; }
    /* RTMP/Modal Layout on Small Screens */
    /* Removed modal specifics */
    .destinations-sub-pane .destinations-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .rtmp-destination-list-studio { grid-template-columns: 1fr; gap: 15px; }
    .rtmp-card-actions { /* Maybe stack on smallest screens */ /* flex-direction: column; align-items: flex-end; */ }
    /* Sidebar Form Layout on Small Screens */
    .destinations-sidebar #rtmp-add-form button,
    .destinations-sidebar #rtmp-edit-form button { margin-top: 15px; } /* Add more space if needed */
 }

/* --- Studio Sidebar Layout --- */
.studio-sidebar-area {
  width: 320px;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--chat-border);
  background-color: var(--chat-bg);
}
body.bg-dark .studio-sidebar-area {
  border-color: var(--chat-border-dark);
  background-color: var(--chat-bg-dark);
}

/* --- Destinations Sidebar Tabs --- */
.destinations-sidebar { /* Specific container for the destinations sidebar */
  display: flex;
  flex-direction: column;
  height: 100%; /* Take full height of its container */
  overflow: hidden; /* Prevent internal overflow */
}
.destinations-sidebar .sidebar-tab-nav {
  display: flex;
  border-bottom: 1px solid var(--share-border-light);
  flex-shrink: 0; /* Prevent nav from shrinking */
}
body.bg-dark .destinations-sidebar .sidebar-tab-nav {
    border-bottom-color: var(--share-border-dark);
}
.sidebar-tab-button {
  flex-grow: 1; text-align: center;
  padding: 10px; border: none; background: none;
  cursor: pointer; font-weight: 500;
  transition: background 0.2s, color 0.2s, border-bottom-color 0.2s;
  color: var(--subtab-inactive-text);
  border-bottom: 3px solid transparent;
}
body.bg-dark .sidebar-tab-button {
    color: var(--subtab-inactive-text-dark);
}
.sidebar-tab-button.active {
  border-bottom: 3px solid var(--share-accent);
  color: var(--share-accent);
}
.sidebar-tab-button:hover {
  background-color: var(--tab-hover-bg);
  color: var(--share-accent);
}
body.bg-dark .sidebar-tab-button:hover {
  background-color: var(--subtab-hover-bg-dark);
}

/* --- Sidebar Panes --- */
.sidebar-tab-content {
  flex-grow: 1; overflow-y: auto; padding: 15px;
  background-color: inherit; /* Inherit from parent */
}
.sidebar-tab-pane {
  display: none;
}
.sidebar-tab-pane.active {
  display: block;
}

/* --- Forms in Sidebar --- */
#rtmp-add-form label,
#rtmp-edit-form label {
  display: block; margin-bottom: 8px; font-weight: 500;
  font-size: 0.9rem; color: var(--estimator-label-color);
}
body.bg-dark #rtmp-add-form label,
body.bg-dark #rtmp-edit-form label {
  color: var(--estimator-label-color-dark);
}

#rtmp-add-form input,
#rtmp-edit-form input,
#rtmp-edit-select /* Style select like inputs */
{
  width: 100%; padding: 6px 8px; margin-top: 4px;
  border: 1px solid var(--estimator-input-border);
  border-radius: 4px;
  background-color: var(--estimator-input-bg);
  color: var(--chat-text-light);
  font-size: 0.9rem;
  box-sizing: border-box; /* Ensure padding doesn't overflow */
}
body.bg-dark #rtmp-add-form input,
body.bg-dark #rtmp-edit-form input,
body.bg-dark #rtmp-edit-select {
  background-color: var(--estimator-input-bg-dark);
  border-color: var(--estimator-input-border-dark);
  color: var(--chat-text-dark);
}

#rtmp-edit-select { /* Specific select spacing */
    margin-bottom: 15px;
}

#rtmp-add-form button,
#rtmp-edit-form button {
  margin-top: 12px; width: 100%;
}

/* --- Delete List --- */
#rtmp-delete-list .rtmp-delete-item {
  display: flex; justify-content: space-between;
  align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--share-border-light);
  font-size: 0.9rem;
}
body.bg-dark #rtmp-delete-list .rtmp-delete-item {
    border-bottom-color: var(--share-border-dark);
}
#rtmp-delete-list .rtmp-delete-item span {
    flex-grow: 1; /* Allow name to take space */
    margin-right: 10px; /* Space before buttons */
    word-break: break-word; /* Wrap long names */
}

#rtmp-delete-list .rtmp-delete-confirm-section {
  display: none; margin-top: 6px; font-size: 0.9rem;
  padding: 8px; background-color: rgba(220, 53, 69, 0.05);
  border: 1px solid rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  color: var(--share-stop-color);
  text-align: center;
  /* Make confirm section appear below the item it relates to */
  flex-basis: 100%; /* Take full width */
  order: 3; /* Put below buttons */
}
#rtmp-delete-list .rtmp-delete-item button { /* Style all buttons in delete list */
  margin-left: 6px;
  padding: 4px 8px; /* Smaller padding */
  font-size: 0.85rem; /* Smaller font */
}
/* Specific button styling */
#rtmp-delete-list .rtmp-delete-btn { /* Initial delete button */
    /* Inherits base button styles - may need overrides if not using classes */
}
#rtmp-delete-list .rtmp-delete-confirm-section button { /* Yes/No buttons */
   margin: 0 4px; /* Spacing for Yes/No */
}
#rtmp-delete-list .rtmp-delete-confirm-section button[data-yes] {
    /* Use danger style for Yes */
}
#rtmp-delete-list .rtmp-delete-confirm-section button[data-no] {
    /* Use secondary style for No */
}