/* =========================================================================
 * yt-theme.css — ธีมแบบ YouTube (โหมดมืด) ใช้ทั้งหน้า Listener และ Manager
 * โหลดเป็นไฟล์สุดท้าย (base.html) จึงทับสไตล์เดิม รวมถึงสไตล์ที่เขียนไว้ในแท็ก (inline)
 *
 * หลักการ (ตามหน้าเว็บ YouTube):
 *   - พื้นหลังเดียวทั้งหน้า #0f0f0f ไม่มีกล่องพื้นหลัง ไม่มีกรอบ ไม่มีเงา
 *   - แบ่งหมวดด้วยเส้นบางสีเทาจาง ใต้หัวข้อ / ระหว่างหมวด
 *   - ปุ่มเป็นทรงแคปซูล (pill) สีเทาเข้ม #272727, ปุ่มหลักสีขาวตัวดำ (แบบปุ่ม "ติดตาม")
 *   - ปุ่มกรองแบบ chip: เทาเข้ม / ขาวเมื่อเลือก
 *   - ภาพปกมุมมน 12px, ข้อความหลัก #f1f1f1, ข้อความรอง #aaaaaa, ลิงก์ #3ea6ff, แดง #ff0033
 *   - popup / เมนู: พื้น #212121 มุมมน 12px
 * แก้สีทั้งระบบได้ที่ตัวแปร --yt-* ด้านล่างจุดเดียว
 * ========================================================================= */

:root {
    --yt-bg: #0f0f0f;
    --yt-bg-raised: #212121;          /* popup, เมนู, แถบเครื่องเล่นล่าง */
    --yt-text: #f1f1f1;
    --yt-text-2: #aaaaaa;
    --yt-line: rgba(255, 255, 255, 0.1);
    --yt-chip: #272727;
    --yt-chip-hover: #3f3f3f;
    --yt-chip-active-bg: #f1f1f1;
    --yt-chip-active-fg: #0f0f0f;
    --yt-hover-row: rgba(255, 255, 255, 0.06);
    --yt-active-row: rgba(255, 255, 255, 0.12);
    --yt-input-bg: #121212;
    --yt-input-border: #303030;
    --yt-focus: #1c62b9;
    --yt-blue: #3ea6ff;
    --yt-red: #ff0033;
    --yt-radius-thumb: 12px;
    --yt-radius-pill: 18px;
    --yt-font: "Roboto", "Noto Sans Thai", "Leelawadee UI", "Segoe UI", Arial, sans-serif;

    /* ตัวแปรเดิมของระบบ ชี้มาที่ธีมนี้ */
    --bg: var(--yt-bg);
    --card: transparent;
    --line: var(--yt-line);
    --txt: var(--yt-text);
    --dim: var(--yt-text-2);
}

/* ───────────── หน้าเว็บ ───────────── */
html,
body {
    background: var(--yt-bg) !important;
    color: var(--yt-text);
    font-family: var(--yt-font);
}
a { color: var(--yt-blue); }

/* scrollbar บาง ๆ แบบ YouTube */
* { scrollbar-width: thin; scrollbar-color: #717171 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #717171; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ───────────── กล่อง/การ์ด: ไม่มีพื้น ไม่มีกรอบ ไม่มีเงา ───────────── */
.dash-box,
.admin-panel,
.admin-panel-header,
.panel-header,
.mini-stat-card,
.player-progress-Area,
.playlist-footer-tools,
.playlist-queue-list,
.queue-item,
.card,
.player-dashboard,
.player-section,
#video-display-area,
.playlist-section,
#official-portfolio-bar,
#playlist-container li,
.vcard,
.playlist-card,
.comment-card,
.comment-body,
.promo-metric-pill,
.promo-links-section,
.admin-media-table th,
.admin-media-table td {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.dash-box,
.admin-panel,
.mini-stat-card,
.player-progress-Area,
.playlist-queue-list,
.queue-item:not(.active),
.card,
.player-dashboard,
.player-section,
#video-display-area,
.playlist-section,
#official-portfolio-bar,
.vcard,
.playlist-card,
.comment-card,
.comment-body,
.promo-metric-pill,
.promo-links-section {
    background: transparent !important;
}

/* วิดีโอ: มุมมนแบบ YouTube ไม่มีกรอบรอบนอก */
.video-wrapper {
    border: none !important;
    border-radius: var(--yt-radius-thumb) !important;
    background: #000 !important;
}
.player-section,
#video-display-area {
    padding: 0 !important;
}

/* แถบที่ลอยทับเนื้อหา: พื้นเดียวกับหน้า (กันเนื้อหาด้านหลังโผล่) */
.dash-top,
.lst-top,
.admin-media-table th {
    background: var(--yt-bg) !important;
    border: none !important;
    box-shadow: none !important;
}
#global-player-bar {
    background: var(--yt-bg-raised) !important;
    border: none !important;
    box-shadow: none !important;
}

/* ───────────── เส้นแบ่งหมวด ───────────── */
.panel-header,
.admin-panel-header {
    border-bottom: 1px solid var(--yt-line) !important;
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
}
.compact-stats-grid,
.player-dashboard,
#official-portfolio-bar,
.filter-tabs-bar {
    border-bottom: 1px solid var(--yt-line) !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
}
.admin-panel {
    border-top: 1px solid var(--yt-line) !important;
    padding-top: 12px !important;
    margin-top: 6px !important;
}

/* หัวข้อ: ขาว หนาปานกลาง แบบหัวข้อหมวดของ YouTube */
.panel-header h2,
.admin-panel-header h2,
.dash-brand h1,
.lst-top h1 {
    color: var(--yt-text) !important;
    font-weight: 600 !important;
}

/* ───────────── ระยะขอบ: ให้เนื้อหาได้พื้นที่มากที่สุด ───────────── */
.command-workspace {
    padding: 8px 10px !important;
    gap: 16px !important;
}
.command-workspace > * { min-width: 0; }
.dash-box,
.admin-panel { padding: 6px 4px !important; }
.player-dashboard { padding: 10px !important; gap: 16px !important; }
.playlist-section,
#official-portfolio-bar { padding: 4px 0 !important; }

/* ───────────── ปุ่ม (pill แบบ YouTube) ───────────── */
.btn,
.btn.ghost,
.btn-mini,
.btn-add-to-pl,
#toManager {
    background: var(--yt-chip) !important;
    color: var(--yt-text) !important;
    border: none !important;
    border-radius: var(--yt-radius-pill) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
.btn:hover,
.btn.ghost:hover,
.btn-mini:hover,
.btn-add-to-pl:hover {
    background: var(--yt-chip-hover) !important;
}
#toManager { background: transparent !important; }

/* ปุ่มหลัก = ขาวตัวดำ (แบบปุ่ม "ติดตาม") */
.btn-ok,
#btn-add-zero-quota,
#btn-quick-add,
#btn-save-byok {
    background: var(--yt-chip-active-bg) !important;
    color: var(--yt-chip-active-fg) !important;
}
.btn-ok:hover,
#btn-add-zero-quota:hover,
#btn-quick-add:hover,
#btn-save-byok:hover {
    background: #d9d9d9 !important;
}
/* ปุ่มอันตราย (ออกจากระบบ / ลบ) = เทาเข้ม ตัวอักษรแดง */
.btn-danger {
    background: var(--yt-chip) !important;
    color: #ff4e45 !important;
}

/* ───────────── ปุ่มกรองแบบ chip ───────────── */
.filter-tab,
.portfolio-pill-btn,
.btn-ch-pill {
    background: var(--yt-chip) !important;
    color: var(--yt-text) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
}
.filter-tab:hover,
.portfolio-pill-btn:hover,
.btn-ch-pill:hover {
    background: var(--yt-chip-hover) !important;
}
.filter-tab.active,
.portfolio-pill-btn.active,
.btn-ch-pill:not(.ghost) {
    background: var(--yt-chip-active-bg) !important;
    color: var(--yt-chip-active-fg) !important;
}

/* ───────────── ช่องกรอก / ค้นหา ───────────── */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input:not([type]),
textarea,
select,
.search-input {
    background: var(--yt-input-bg) !important;
    color: var(--yt-text) !important;
    border: 1px solid var(--yt-input-border) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
input:focus,
textarea:focus,
select:focus {
    border-color: var(--yt-focus) !important;
}
#lstSearch,
#sq,
#dashSearch {
    border-radius: 40px !important;            /* ช่องค้นหาทรงแคปซูลแบบ YouTube */
    padding-left: 16px !important;
}
input[type="range"] { accent-color: var(--yt-text); }

/* ───────────── การ์ดเพลง ───────────── */
.vcard { padding: 0 !important; }
.vcard:hover { transform: none !important; }
.vcard-thumb,
.media-thumb {
    border-radius: var(--yt-radius-thumb) !important;
}
.vcard-body { padding: 6px 0 0 !important; }
.vcard-title {
    color: var(--yt-text) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 10px 0 4px !important;
}
.vcard-ch {
    color: var(--yt-text-2) !important;
    font-size: 13px !important;
}
.dur {
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
#videoGrid {
    column-gap: 16px !important;
    row-gap: 28px !important;
}
.playlist-card { padding: 4px 0 !important; }

/* ───────────── แถวรายการ (คิว / ตาราง / คอมเมนต์) ───────────── */
.queue-item,
#playlist-container li,
.admin-media-table tbody tr {
    transition: background 0.15s;
}
.queue-item:hover,
#playlist-container li:hover,
.admin-media-table tbody tr:hover {
    background: var(--yt-hover-row) !important;
}
.queue-item.active {
    background: var(--yt-active-row) !important;
}
.admin-media-table th {
    color: var(--yt-text-2) !important;
    font-weight: 500 !important;
}
.comment-card {
    padding: 10px 0 !important;
}
.comment-author { color: var(--yt-text) !important; font-weight: 500; }

/* การ์ดแจ้งเตือนคอมเมนต์รอตอบ: ไม่มีกรอบ/เงากระพริบ ใช้ตัวเลขสีแดงเป็นสัญญาณ */
.mini-stat-card.alert-pulse { animation: none !important; }

/* ───────────── popup / เมนู ───────────── */
.promo-modal-card,
#modal-byok-settings > div,
#modal-add-to-playlist,
#modal-playlist-details,
#modal-create-playlist,
.auth-card {
    background: var(--yt-bg-raised) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6) !important;
}

/* ───────────── ป้ายผู้ใช้ที่ล็อกอิน ───────────── */
@media (max-width: 720px) {
    #ycc-user-badge .ycc-user-email { max-width: 130px !important; font-size: 12px; }
}

/* ═══════════ ปุ่มเข้าคิวบนการ์ดเพลง 3 สถานะ (ตั้งค่าโดย syncQueueButtons ใน listen/queue.js) ═══════════ */
.btn-add-to-queue {
    background: #3b82f6 !important;          /* ยังไม่อยู่ในคิว: ฟ้า */
    color: #fff !important;
    font-weight: 500;
    transition: background 0.15s;
}
.btn-add-to-queue[data-state="queued"] {
    background: #059669 !important;          /* อยู่ในคิวแล้ว: เขียว */
}
.btn-add-to-queue[data-state="queued"]:hover {
    background: #b45309 !important;          /* ชี้ค้าง: เตือนว่ากดแล้วจะเอาออก */
}
.btn-add-to-queue[data-state="queued"]:hover::after {
    content: " (เอาออก)";
}
.btn-add-to-queue[data-state="playing"] {
    background: #ff0033 !important;          /* กำลังเล่น: แดงแบบ YouTube */
    animation: ycc-playing-pulse 1.6s ease-in-out infinite;
}
@keyframes ycc-playing-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}
/* การ์ดเพลงที่กำลังเล่น: ขีดแดงใต้ปก (เหมือนแถบความคืบหน้าของ YouTube) */
.vcard.is-playing .vcard-thumb::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #ff0033;
}

/* ───────────── แถบเครื่องเล่นด้านล่าง ───────────── */
/* แถบความคืบหน้าสีแดงแบบ YouTube */
#seek-fill,
#player-progress-bar {
    background: var(--yt-red) !important;
    accent-color: var(--yt-red);
}
/* ชื่อเพลง + เวลา: ไม่ให้ถูกบีบจนอ่านไม่ออกเมื่อหน้าต่างแคบ */
#global-player-bar div:has(> div > #bar-title) {
    flex: 1 1 280px;
    min-width: 120px;
    width: auto !important;
}
#global-player-bar div:has(> #bar-title) {
    flex: 1;
}
#bar-title { color: var(--yt-text) !important; font-weight: 500 !important; }

/* ลิงก์นโยบายท้ายหน้า (ต้องมองเห็นได้เสมอ — นโยบาย YouTube API) */
.ycc-legal-footer { text-align: center; font-size: 12px; color: var(--yt-text-2, #aaa); padding: 16px 16px 96px; }
.ycc-legal-footer a { color: var(--yt-text-2, #aaa); text-decoration: underline; }
.ycc-legal-footer a:hover { color: var(--yt-text, #f1f1f1); }

/* ═══════════════════════ มือถือ (จอแคบ) ═══════════════════════
 * เป้าหมาย: ไม่มีการเลื่อนแนวนอนทั้งหน้า, ปุ่มกดง่าย, ข้อความสำคัญไม่ถูกตัด */
@media (max-width: 720px) {
    /* หัวหน้า Manager: ปุ่มเยอะ → ขึ้นบรรทัดใหม่แทนการล้นออกนอกจอ */
    .dash-top { padding: 8px 10px !important; gap: 8px !important; }
    .dash-brand { min-width: 0; flex-wrap: wrap; gap: 8px; }
    .dash-brand h1 { font-size: 1rem !important; }
    .dash-actions { flex-wrap: wrap; justify-content: flex-start; gap: 6px !important; width: 100%; }
    .dash-actions > * { margin-left: 0 !important; }
    .dash-actions .btn { padding: 6px 12px; font-size: 13px; }
    #ycc-user-badge { margin: 0 4px 0 0 !important; }
    /* ป้ายผู้ใช้: เหลือแค่วงกลมตัวอักษร (อีเมลเต็มดูได้ในหน้าบัญชี) */
    #ycc-user-badge .ycc-user-email { display: none !important; }
    .admin-panel-header { flex-direction: column; align-items: stretch !important; }
    .admin-filter-group > * { flex: 1 1 140px; width: auto !important; }
    .admin-table-container { overflow-x: auto; }
    /* แถวช่องกรอก + ปุ่ม (เลือกเพลย์ลิสต์, ตั้งชื่อ, วางลิงก์): ขึ้นบรรทัดใหม่ได้ และช่องเลือกหดได้ */
    .tools-flex { flex-wrap: wrap; }
    .tools-flex > * { min-width: 0; }
    .tools-flex > select,
    .tools-flex > input { flex: 1 1 160px !important; max-width: 100%; }
}

@media (max-width: 640px) {
    /* หัวหน้า Listener: ชื่อบรรทัดเดียว + ช่องค้นหายืดหยุ่น */
    .lst-top { padding: 10px 12px !important; gap: 8px; }
    .lst-top h1 {
        font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 38vw; flex: 0 1 auto;
    }
    .lst-top > div:has(> #lstSearch) { margin: 0 4px !important; min-width: 0; }
    #lstSearch { padding: 7px 12px !important; min-width: 0; }
    .player-dashboard { padding: 12px 10px !important; }
    .playlist-section { min-width: 0 !important; padding: 12px 0 !important; }

    /* แถบเครื่องเล่นด้านล่าง: ใช้ปุ่มเสียงของโทรศัพท์แทนแถบเสียง, ซ่อนตัวเลือกความเร็ว */
    #global-player-bar > div:nth-of-type(2) { padding: 0 10px !important; gap: 8px; }
    #global-player-bar div:has(> div > #bar-title) { flex: 1 1 0 !important; min-width: 0 !important; gap: 8px !important; }
    #global-player-bar .controls { gap: 6px !important; flex: none; }
    #global-player-bar .controls .btn-control { font-size: 18px !important; }
    #global-player-bar #btn-play-pause { width: 42px !important; height: 42px !important; }
    #global-player-bar div:has(> #speed-select) { width: auto !important; gap: 6px !important; flex: none; }
    #global-player-bar div:has(> #volume-slider),
    #speed-select { display: none !important; }
    #btn-toggle-video { padding: 4px 8px !important; font-size: 12px !important; }

    /* การ์ดเข้าสู่ระบบ: พอดีจอ ไม่ล้นขอบ */
    .auth-guard-overlay { padding: 12px !important; box-sizing: border-box; }
    .auth-card { width: 100% !important; max-width: 420px; box-sizing: border-box; margin: 0 auto !important; }

    /* หน้าต่างตั้งค่า/รายงาน: ใช้พื้นที่เต็มจอ */
    #modal-byok-settings > div,
    .ycc-report-card { padding: 16px !important; }
}

@media (max-width: 420px) {
    /* จอเล็กมาก: ซ่อนปกเพลงในแถบล่าง ให้ชื่อเพลงมีที่แสดง */
    #global-player-bar div:has(> #bar-thumb) { display: none !important; }
    #global-player-bar .controls { gap: 2px !important; }
    #btn-toggle-video { font-size: 11px !important; padding: 4px 6px !important; }
}

/* ♥ รายการโปรดบนการ์ดเพลง */
.btn-fav {
    padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; line-height: 1;
    background: #272727; color: #f1f1f1; transition: transform 0.12s, color 0.15s;
}
.btn-fav:hover { background: #3f3f3f; }
.btn-fav.is-on { color: #ff4e6a; }
.btn-fav:active { transform: scale(0.88); }

/* ⏲️ ตั้งเวลาปิดเพลง */
#btn-sleep {
    background: transparent; color: #aaa; border: 1px solid #444; border-radius: 20px; padding: 5px 10px;
    cursor: pointer; font-size: 13px; white-space: nowrap;
}
#btn-sleep.is-on { color: #ffd54f; border-color: rgba(255, 213, 79, 0.5); }
#ycc-sleep-menu {
    position: fixed; z-index: 1100; min-width: 190px; padding: 8px 0; border-radius: 12px;
    background: #212121; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column;
}
#ycc-sleep-menu .ycc-sleep-head { padding: 4px 16px 8px; font-size: 13px; color: #aaa; }
#ycc-sleep-menu button {
    background: transparent; border: 0; color: #f1f1f1; text-align: left; padding: 9px 16px; font: inherit;
    font-size: 14px; cursor: pointer;
}
#ycc-sleep-menu button:hover { background: #3f3f3f; }
#ycc-sleep-menu button.is-cancel { color: #ff4e45; }
@media (max-width: 420px) {
    #btn-sleep { padding: 4px 6px; font-size: 12px; }
}

/* 🔗 แชร์ */
#btn-share-song {
    background: transparent; color: #aaa; border: 1px solid #444; border-radius: 20px; padding: 5px 10px;
    cursor: pointer; font-size: 13px;
}
#btn-share-song:hover, #btn-sleep:hover { color: #f1f1f1; border-color: #717171; }
.btn-share-pl {
    padding: 6px 12px; font-size: 12px; border: 1px solid #444; color: #ddd; background: transparent;
    border-radius: 6px; cursor: pointer; margin-right: 6px;
}
.btn-share-pl:hover { border-color: #aaa; color: #fff; }
#ycc-shared-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 20px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--yt-line);
}
.ycc-shared-text { font-size: 15px; color: var(--yt-text); }
.ycc-shared-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ycc-shared-actions button {
    border: 0; border-radius: 18px; padding: 8px 16px; cursor: pointer; font: inherit; font-size: 14px;
    background: #272727; color: #f1f1f1;
}
.ycc-shared-actions .ycc-shared-play { background: #f1f1f1; color: #0f0f0f; font-weight: 600; }
#ycc-share-note {
    position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    background: #f1f1f1; color: #0f0f0f; padding: 10px 18px; border-radius: 8px; font-size: 14px; z-index: 1200;
    transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); text-align: center;
}
#ycc-share-note.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 420px) {
    #btn-share-song { padding: 4px 6px; font-size: 12px; }
}

/* 🎤 เนื้อเพลงในหน้าฟังเพลง */
#btn-lyrics {
    background: transparent; color: #aaa; border: 1px solid #444; border-radius: 20px; padding: 5px 10px;
    cursor: pointer; font-size: 13px;
}
#btn-lyrics[hidden] { display: none; }
#btn-lyrics.is-on { color: #0f0f0f; background: #f1f1f1; border-color: #f1f1f1; }
#ycc-lyrics {
    position: fixed; right: 16px; bottom: 96px; z-index: 1100; width: min(420px, calc(100vw - 32px));
    max-height: min(60vh, 520px); display: flex; flex-direction: column; border-radius: 12px;
    background: #212121; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.6); color: #f1f1f1;
}
.ycc-ly-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; font-weight: 600; }
.ycc-ly-head button { border: 0; background: transparent; color: #aaa; font-size: 16px; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; }
.ycc-ly-head button:hover { background: #3f3f3f; color: #fff; }
.ycc-ly-body { overflow-y: auto; padding: 4px 18px 40% ; }
.ycc-ly-body p { margin: 0; padding: 6px 0; font-size: 18px; line-height: 1.45; color: #8a8a8a; cursor: pointer; transition: color .2s, transform .2s; transform-origin: left; }
.ycc-ly-body p:hover { color: #ccc; }
.ycc-ly-body p.is-on { color: #fff; font-weight: 700; transform: scale(1.04); }
.ycc-ly-plain { white-space: pre-wrap; font-size: 16px; line-height: 1.7; padding-bottom: 20px; }
@media (max-width: 640px) {
    #ycc-lyrics { left: 8px; right: 8px; width: auto; bottom: 88px; max-height: 55vh; }
    #btn-lyrics { padding: 4px 6px; font-size: 12px; }
}

/* ───── แถบเครื่องเล่นด้านล่าง: 3 ส่วนไม่ทับกัน ───── */
@media (min-width: 641px) {
    #global-player-bar .controls { flex: none; margin: 0 16px; }
    #global-player-bar div:has(> #speed-select) {
        width: auto !important; flex: 1 1 280px; min-width: 0; gap: 10px !important; justify-content: flex-end;
    }
}
#global-player-bar div:has(> #speed-select) > * { flex: none; }
@media (max-width: 1100px) and (min-width: 641px) {
    #global-player-bar #volume-slider { width: 60px !important; }
    #global-player-bar div:has(> #speed-select) { gap: 6px !important; }
}
@media (max-width: 960px) {
    #global-player-bar div:has(> #volume-slider),
    #speed-select { display: none !important; }
}

/* 📌 เปิดภาพค้างไว้ */
#btn-pin-video {
    background: transparent; color: #aaa; border: 1px solid #444; border-radius: 20px; padding: 5px 10px;
    cursor: pointer; font-size: 13px; line-height: 1; filter: grayscale(1); opacity: .75;
}
#btn-pin-video:hover { border-color: #717171; opacity: 1; }
#btn-pin-video.is-on { filter: none; opacity: 1; border-color: #3ea6ff; background: rgba(62,166,255,.15); }
#video-display-area.is-mini {
    position: fixed !important; z-index: 1050; right: 16px; bottom: 96px; width: 360px; min-width: 0 !important;
    flex: none !important; box-shadow: 0 8px 32px rgba(0,0,0,.7) !important; border-radius: 12px !important; overflow: hidden;
}
@media (max-width: 640px) {
    #video-display-area.is-mini { width: 62vw; right: 8px; bottom: 84px; }
    #btn-pin-video { padding: 4px 6px; font-size: 12px; }
}

/* มือถือ: ชื่อเพลงอยู่แถวบน ปุ่มอยู่แถวล่าง (ไม่บีบชื่อเพลงจนอ่านไม่ออก) */
@media (max-width: 560px) {
    #global-player-bar { height: auto !important; min-height: 80px; }
    #global-player-bar > div:nth-of-type(2) { flex-wrap: wrap; row-gap: 6px !important; padding: 8px 10px !important; }
    #global-player-bar div:has(> div > #bar-title) { flex: 1 1 100% !important; }
    #global-player-bar div:has(> #bar-thumb) { display: block !important; width: 36px !important; height: 36px !important; }
    #global-player-bar .controls { flex: none; }
    #global-player-bar div:has(> #speed-select) { flex: 1 1 auto !important; justify-content: flex-end; }
    .ycc-legal-footer { padding-bottom: 140px; }
    #video-display-area.is-mini { bottom: 132px; }
    #ycc-lyrics { bottom: 128px !important; }
}

/* อีโมจิของช่องในความคิดเห็น (YouTube ไม่ส่งรูปมา) */
.cm-emoji { display: inline-block; padding: 0 8px; border-radius: 10px; background: #272727; color: #aaa; font-size: 12px; white-space: nowrap; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; }