div.sitenear-bbcode-editor {
        width: 100%;
    }
    div.sitenear-bbcode-editor div.sceditor-dropdown {
        /* width intentionally not set here — controlled by the block below */
    }

    div.sitenear-bbcode-editor div.sceditor-dropdown input {
        float: none;
    }

    /* Cell background dropdown */
    div.sceditor-dropdown .sn-cellbg-label {
        font-size: 11px; font-weight: 700; color: #555; text-transform: uppercase;
        letter-spacing: .04em; margin: 0 0 5px;
    }
    div.sceditor-dropdown .sn-cellbg-swatches {
        display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px;
    }
    div.sceditor-dropdown .sn-cellbg-swatch {
        width: 22px; height: 22px; border: 1px solid rgba(0,0,0,.25); border-radius: 3px;
        padding: 0; cursor: pointer; flex: 0 0 auto;
    }
    div.sceditor-dropdown .sn-cellbg-swatch:hover { outline: 2px solid #1f6b12; outline-offset: 1px; }
    div.sceditor-dropdown .sn-cellbg-row {
        display: flex; align-items: center; gap: 8px; margin-top: 4px;
    }
    div.sceditor-dropdown .sn-cellbg-row input[type="color"] {
        width: 38px; height: 26px; padding: 2px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer;
    }
    div.sceditor-dropdown #sn-cellbg-clear {
        padding: 5px 10px; font-size: 12px; background: #eee; border: 1px solid #ccc;
        border-radius: 3px; cursor: pointer; white-space: nowrap;
    }
    div.sceditor-dropdown .sn-cellbg-current {
        margin-top: 9px; font-size: 11px; color: #666;
    }

    div.sceditor-dropdown .sn-cellbg-modes { display: flex; gap: 6px; margin-bottom: 10px; }
    div.sceditor-dropdown .sn-cellbg-mode {
        flex: 1; padding: 5px 8px; font-size: 11.5px; border: 1px solid #ccc; background: #fff;
        border-radius: 3px; cursor: pointer; color: #333;
    }
    div.sceditor-dropdown .sn-cellbg-mode.sn-on {
        background: #1f6b12; border-color: #1f6b12; color: #fff; font-weight: 600;
    }

    div.sitenear-bbcode-editor div.sceditor-dropdown input#image {
        width: 10em;
        max-width: -webkit-fill-available;
    }

    div.sitenear-bbcode-editor div.sceditor-dropdown input#link {
        width: 10em;
        max-width: -webkit-fill-available;
    }

    div.sitenear-bbcode-editor .sceditor-container{
        width:100% !important;
    }
    
    div.sitenear-bbcode-editor .char-counter {
        text-align: right;
        margin-top: 5px;
        font-size: 0.9em;
        color: #666;
    }
    
    div.sitenear-bbcode-editor .char-counter.approaching-limit {
        color: #ff9900;
    }
    
    div.sitenear-bbcode-editor .char-counter.at-limit {
        color: #ff0000;
        font-weight: bold;
    }

    .dragging-image {
        opacity: 0.5;
        cursor: move !important;
    }
    
    .drag-placeholder {
        display: inline-block;
        width: 100px;
        height: 50px;
        background: #f0f0f0;
        border: 2px dashed #999;
        margin: 0 5px;
        vertical-align: middle;
    }
    
    /* Style for draggable images in the editor */
    img[data-draggable="true"] {
        cursor: move;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    
    div.sitenear-bbcode-editor div.sceditor-dropdown {
        position: absolute;
        width: auto;
        min-width: 200px;
        max-width: 420px;
        border: 1px solid #ccc;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        z-index: 10000; /* Ensure it's above everything else */
        margin: 0;
        padding: 5px;
        overflow: visible;
    }

    /* Section popup — fixed width so it never overflows its own box */
    div.sitenear-bbcode-editor div.sceditor-dropdown.sceditor-insertsection {
        width: 360px;
    }

    /* Video / audio embed popup (the 📺 toolbar button - Bilibili links AND direct media files).
       Wider than the other dropdowns because this one carries a multi-line URL box, a hint line,
       the video/audio toggle row and a message line. */
    div.sitenear-bbcode-editor div.sceditor-dropdown.sceditor-insertiframe {
        width: 360px;
    }

    /* PDF upload popup */
    div.sitenear-bbcode-editor div.sceditor-dropdown.sceditor-insertpdf {
        width: 320px;
    }

    /* Make sure inputs in dropdowns are properly styled */
    div.sitenear-bbcode-editor div.sceditor-dropdown input {
        box-sizing: border-box;
        width: 100%;
        margin: 5px 0;
    }

    /* Portaled SCEditor dropdowns — appended to <body> with position:fixed
       so they escape overflow:hidden ancestors (e.g. .sitenear-bbcode-editor) */
    body > .sceditor-dropdown.sn-portaled {
        position: fixed;
        z-index: 10001;
        border: 1px solid #ccc;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        padding: 5px;
        margin: 0;
        min-width: 200px;
        max-width: 420px;
        overflow: visible;
    }
    body > .sceditor-dropdown.sn-portaled.sceditor-insertsection {
        width: 360px;
    }
    body > .sceditor-dropdown.sn-portaled.sceditor-insertiframe {
        width: 360px;
    }
    body > .sceditor-dropdown.sn-portaled.sceditor-insertpdf {
        width: 320px;
    }
    body > .sceditor-dropdown.sn-portaled input {
        float: none;
        box-sizing: border-box;
        width: 100%;
        margin: 5px 0;
    }

    /* ---- "Insert background section" dialog (image | colour) ----------------------------
       Every rule below is scoped under `div.sceditor-dropdown` for one specific reason: SCEditor's
       own theme (sceditor/minified/themes/default.min.css, first rule) ships

           .sceditor-dropdown, div.sceditor-dropdown div { padding: 0; margin: 0; z-index: 3 }

       which is (0,1,2) and so beats any class-only selector like `.sn-section-drop` (0,1,0) -
       observed live as a drop zone with its 14px padding flattened to nothing and a tab row sitting
       flush against it. Prefixing takes these to (0,2,1), which wins on class count. This also
       covers the portaled dropdown without a second selector, since that element is still a
       div.sceditor-dropdown (it just gains .sn-portaled and moves to <body>). Note the rest of this
       dialog sidesteps the theme rule by putting its spacing in inline styles, which outrank
       everything.

       The colour inputs further down need the longer dual selector instead: they're overriding this
       file's OWN `... .sceditor-dropdown input { width: 100% }` pair at (0,2,3) and (0,2,2), so a
       single shorter selector would lose to one of them. */
    div.sceditor-dropdown .sn-section-tabs {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
    }
    div.sceditor-dropdown .sn-section-tab {
        flex: 1;
        padding: 7px 4px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        color: #555;
        background: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }
    div.sceditor-dropdown .sn-section-tab:hover {
        border-color: #4a90e2;
        color: #4a90e2;
    }
    div.sceditor-dropdown .sn-section-tab.sn-active {
        background: #4a90e2;
        border-color: #4a90e2;
        color: #fff;
    }
    div.sceditor-dropdown .sn-section-drop {
        border: 2px dashed #bbb;
        border-radius: 6px;
        padding: 16px 10px;
        margin-bottom: 4px;
        text-align: center;
        font-size: 12px;
        line-height: 1.4;
        color: #777;
        background: #fafafa;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease, color .15s ease;
    }
    div.sceditor-dropdown .sn-section-drop:hover {
        border-color: #4a90e2;
        background: #f3f8ff;
        color: #4a90e2;
    }
    /* Applied on dragenter/dragover so the target is unmistakable while a file is over it. */
    div.sceditor-dropdown .sn-section-drop.sn-dragover {
        border-color: #4a90e2;
        border-style: solid;
        background: #e6f2ff;
        color: #2f6db3;
    }
    /* Upload in flight. Deliberately NOT dimmed with opacity - the spinner is the thing that has
       to read clearly, and fading the element fades the indicator with it. pointer-events:none
       makes the zone inert for the duration (the click handler also guards on .sn-busy, so a
       browser without it still can't open a second file dialog mid-upload). */
    div.sceditor-dropdown .sn-section-drop.sn-busy {
        border-style: solid;
        border-color: #cfe0f5;
        background: #f7fbff;
        color: #2f6db3;
        cursor: progress;
        pointer-events: none;
    }
    div.sceditor-dropdown .sn-section-drop.sn-done {
        border-style: solid;
        border-color: #4caf50;
        background: #f2fbf3;
        color: #2e7d32;
    }
    div.sceditor-dropdown .sn-section-spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 8px;
        vertical-align: -2px;
        border: 2px solid #cfe0f5;
        border-top-color: #4a90e2;
        border-radius: 50%;
        animation: sn-section-spin .7s linear infinite;
    }
    @keyframes  sn-section-spin {
        to { transform: rotate(360deg); }
    }
    div.sceditor-dropdown .sn-section-progress {
        height: 4px;
        margin-top: 10px;
        background: #e3e9ef;
        border-radius: 2px;
        overflow: hidden;
    }
    div.sceditor-dropdown .sn-section-progress-bar {
        width: 0;
        height: 100%;
        background: #4a90e2;
        border-radius: 2px;
        transition: width .15s linear;
    }
    /* Fallback for uploads the browser can't measure (no Content-Length on the body): a bar that
       sweeps instead of filling, so "working" is still legible without a real percentage. */
    div.sceditor-dropdown .sn-section-progress-bar.sn-indeterminate {
        width: 40%;
        animation: sn-section-sweep 1.1s ease-in-out infinite;
    }
    @keyframes  sn-section-sweep {
        0%   { margin-left: -40%; }
        100% { margin-left: 100%; }
    }
    /* Insert is disabled while an upload runs - without this the dialog would happily insert a
       section pointing at the previous (or empty) URL a moment before the new one lands. */
    div.sceditor-dropdown .button.sn-section-disabled {
        opacity: .55;
        cursor: not-allowed;
    }
    div.sceditor-dropdown .sn-section-color-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    div.sitenear-bbcode-editor div.sceditor-dropdown input.sn-section-color,
    body > .sceditor-dropdown.sn-portaled input.sn-section-color {
        width: 46px;
        height: 34px;
        flex: 0 0 auto;
        padding: 2px;
        margin: 0;
        cursor: pointer;
    }
    div.sitenear-bbcode-editor div.sceditor-dropdown input.sn-section-color-hex,
    body > .sceditor-dropdown.sn-portaled input.sn-section-color-hex {
        width: auto;
        flex: 1 1 auto;
        margin: 0;
    }
    div.sceditor-dropdown .sn-section-swatches {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 10px;
    }
    /* A <button>, so the theme's `div.sceditor-dropdown div` reset doesn't reach it - but its
       sibling `.sceditor-dropdown .button` rule (padding: 6px 12px) would if a swatch ever picked
       up that class, and the UA's own button padding applies regardless. Scoped to match the rest
       of this block and to keep the explicit padding:0 authoritative. */
    div.sceditor-dropdown .sn-section-swatch {
        width: 24px;
        height: 24px;
        padding: 0;
        margin: 0;
        border: 1px solid rgba(0, 0, 0, .18);
        border-radius: 4px;
        cursor: pointer;
    }
    div.sceditor-dropdown .sn-section-swatch:hover {
        box-shadow: 0 0 0 2px rgba(74, 144, 226, .5);
    }

    iframe[data-youtube-id] {
        display: inline-block;
        max-width: 100%;
        vertical-align: middle;
    }

    .sitenear-rendered-alignment-block iframe[data-youtube-id] {
        display: inline-block;
    }


    iframe[data-youtube-id] {
        display: inline-block;
        max-width: 100%;
        vertical-align: middle;
    }

    /* ADD THESE NEW STYLES: */
    .external-video-iframe,
    .bilibili-video {
        display: inline-block;
        max-width: 100%;
        vertical-align: middle;
    }



    /* Ensure YouTube videos respect alignment */
    div[style*="text-align: center"] iframe[data-youtube-id],
    .sitenear-rendered-alignment-block[style*="text-align: center"] iframe[data-youtube-id] {
        margin: 0 auto;
        display: block;
    }

    div[style*="text-align: left"] iframe[data-youtube-id],
    .sitenear-rendered-alignment-block[style*="text-align: left"] iframe[data-youtube-id] {
        margin-right: auto;
        display: block;
    }

    div[style*="text-align: right"] iframe[data-youtube-id],
    .sitenear-rendered-alignment-block[style*="text-align: right"] iframe[data-youtube-id] {
        margin-left: auto;
        display: block;
    }

    /* Bilibili video placeholder styles in editor - same size as YouTube (560x315) */
    .sitenear-video-placeholder {
        display: block;
        width: 560px;
        height: 315px;
        max-width: 100%;
        background: linear-gradient(135deg, #00a1d6 0%, #0077a3 100%);
        border-radius: 8px;
        color: #fff;
        font-family: Arial, sans-serif;
        cursor: default;
        user-select: none;
        margin: 8px 0;
        box-shadow: 0 2px 8px rgba(0, 161, 214, 0.3);
        position: relative;
    }
    .sitenear-video-placeholder .video-placeholder-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
        font-size: 72px;
        opacity: 0.9;
    }
    .sitenear-video-placeholder .video-placeholder-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 30px);
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .sitenear-video-placeholder .video-placeholder-id {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
        opacity: 0.8;
        max-width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Bilibili placeholder alignment support */
    div[style*="text-align: center"] .sitenear-video-placeholder,
    .sitenear-rendered-alignment-block[style*="text-align: center"] .sitenear-video-placeholder {
        margin-left: auto;
        margin-right: auto;
    }
    div[style*="text-align: right"] .sitenear-video-placeholder,
    .sitenear-rendered-alignment-block[style*="text-align: right"] .sitenear-video-placeholder {
        margin-left: auto;
        margin-right: 0;
    }