/* =========================================
   SIDE BREAKING NEWS
   ========================================= */


.side-breaking-news{

    position:absolute;

    top: 205px;
    left: 295px;
    width: 320px;
    height: 90px;

    overflow:hidden;

    z-index:20;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* MAIN BOX */

.side-breaking-wrap{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:0 18px;

  
}

/* TEXT */

#sideBreakingText{

    position:relative;

    z-index:2;

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    font-weight:800;
    text-align:center;



     white-space    : normal;        /* ← was nowrap, now wraps */
    word-break     : break-word; 

    text-shadow:
        0 2px 6px rgba(0,0,0,.5);

    animation:
        sideBreakingText 1.4s ease infinite alternate;
}

@keyframes sideBreakingText{

    from{
        transform:
            scale(1)
            translateY(0);
    }

    to{
        transform:
            scale(1.04)
            translateY(-1px);
    }
}

.news-marquee-track{

    display:flex;

    align-items:center;

    white-space:nowrap;

    width:max-content;

    will-change:transform;
}

.news-marquee-item{

    display:inline-flex;

    align-items:center;

    padding:0 14px;

    /*text-transform:uppercase;*/

    letter-spacing:.4px;

    text-shadow:
        0 0 8px rgba(255,255,255,.3);
}

.news-marquee-sep{

    color:#ff6600;

    font-size:18px;

    font-weight:900;

    padding:0 12px;

    text-shadow:
        0 0 10px rgba(255,120,0,.7);
}

@keyframes tickerScroll{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
} 

/* =====================================
       EFFECT PANEL
       ===================================== */
    .news-video-panel{
    margin-top:15px;
    padding:12px;
    border:1px solid #2f2f3b;
    border-radius:12px;
    background:#11141d;
}

.panel-label{
    display:block;
    font-size:14px;
    margin-bottom:8px;
    color:#fff;
    font-weight:600;
}

.bn-preview-wrap{
    margin-top:10px;
}
    .effect-panel {
        display     : flex;
        align-items : center;
        gap         : 5px;
        flex-wrap   : wrap;
        background  : #1a1a1f;
        border-top  : 1px solid #333;
        border-bottom: 1px solid #333;
        padding     : 12px 14px;
        flex-shrink : 0;
    }
    .effect-group {
        display     : flex;
        align-items : center;
        gap         : 8px;
    }
    .effect-group label {
        color     : #fff;
        font-size : 12px;
        min-width : 85px;
    }
    .effect-group input[type=range] {
        width        : 120px;
        accent-color : #00ff88;
    }
    .effect-group span {
        color      : #00ff88;
        font-size  : 12px;
        min-width  : 32px;
        text-align : center;
    }
    .effect-panel .tbtn {
        margin-left: auto;
    }
    
    /* =========================
       VIDEO LOADER
       ========================= */
    
    .video-loader {
        position       : fixed;
        inset          : 0;
        background     : rgba(0,0,0,.75);
        z-index        : 999999;
        display        : none;
        align-items    : center;
        justify-content: center;
        backdrop-filter: blur(4px);
    }
    .video-loader-box {
        background    : #1e1e24;
        border        : 1px solid #333;
        border-radius : 14px;
        padding       : 30px 40px;
        text-align    : center;
        min-width     : 220px;
    }
    .video-spinner {
        width           : 54px;
        height          : 54px;
        border          : 4px solid #333;
        border-top-color: #00ff88;
        border-radius   : 50%;
        margin          : auto;
        animation       : spinLoader .8s linear infinite;
    }
    .video-loader-text {
        color      : #fff;
        margin-top : 16px;
        font-size  : 15px;
        font-weight: 600;
    }
    @keyframes spinLoader {
        to { transform: rotate(360deg); }
    }
    
    /* ---- Modal shell ---- */
    #videoEditorModal {
        display         : none;
        position        : fixed;
        inset           : 0;
        background      : rgba(0,0,0,.85);
        z-index         : 9999;
        align-items     : center;
        justify-content : center;
    }
    
    .pro-editor-wrap {
        background    : #141416;
        border-radius : 14px;
        width         : min(96vw, 980px);
        max-height    : 92vh;
        display       : flex;
        flex-direction: column;
        overflow      : hidden;
        border        : 1px solid #2a2a2e;
        box-shadow    : 0 32px 80px rgba(0,0,0,.7);
    }
    
    /* ---- Header ---- */
    .pro-editor-header {
        display         : flex;
        align-items     : center;
        justify-content : space-between;
        padding         : 12px 18px;
        background      : #1a1a1e;
        border-bottom   : 1px solid #2a2a2e;
        flex-shrink     : 0;
    }
    .pro-editor-header h4 {
        margin        : 0;
        font-size     : 14px;
        font-weight   : 600;
        color         : #e0e0e0;
        letter-spacing: .5px;
    }
    .pro-editor-header .close-btn {
        background   : transparent;
        border       : none;
        color        : #888;
        font-size    : 18px;
        cursor       : pointer;
        line-height  : 1;
        padding      : 2px 6px;
        border-radius: 4px;
        transition   : background .15s, color .15s;
    }
    .pro-editor-header .close-btn:hover {
        background: #2e2e32;
        color     : #fff;
    }
    
    /* ---- Preview ---- */
    .pro-preview-area {
        background      : #0d0d0f;
        display         : flex;
        justify-content : center;
        align-items     : center;
        flex            : 0 0 auto;
        height          : 240px;
        overflow        : hidden;
        position        : relative;
        flex-shrink     : 0;
    }
    .pro-preview-area video,
    .pro-preview-area img {
        max-height : 100%;
        max-width  : 100%;
        object-fit : contain;
    }
    
    /* ---- Toolbar ---- */
    .pro-toolbar {
        display      : flex;
        align-items  : center;
        gap          : 8px;
        padding      : 8px 14px;
        background   : #1a1a1e;
        border-bottom: 1px solid #2a2a2e;
        flex-wrap    : wrap;
        flex-shrink  : 0;
    }
    .pro-toolbar .tbtn,
    .tbtn {
        background    : #27272c;
        border        : 1px solid #38383e;
        color         : #ccc;
        font-size     : 12px;
        font-weight   : 500;
        padding       : 5px 12px;
        border-radius : 6px;
        cursor        : pointer;
        display       : inline-flex;
        align-items   : center;
        gap           : 5px;
        transition    : background .15s, color .15s, border-color .15s;
        white-space   : nowrap;
    }
    .tbtn:hover            { background:#323238; color:#fff; border-color:#555; }
    .tbtn.danger           { border-color:#5a1a1a; color:#f66; }
    .tbtn.danger:hover     { background:#3a1212; color:#ff8080; }
    .tbtn.success          { border-color:#1a4a2a; color:#4e9; }
    .tbtn.success:hover    { background:#122a1a; color:#5fea; }
    .tbtn.primary          { border-color:#1a3060; color:#6af; }
    .tbtn.primary:hover    { background:#121e38; color:#8cf; }
    .tbtn.warning          { border-color:#4a3a10; color:#fc6; }
    .tbtn.warning:hover    { background:#2e2408; color:#fe9; }
    .tbtn.info             { border-color:#1a3040; color:#4cf; }
    .tbtn.info:hover       { background:#0e2030; }
    
    .tbtn-sep { width:1px; height:22px; background:#2e2e34; flex-shrink:0; }
    
    .pro-time-display {
        margin-left  : auto;
        font-size    : 12px;
        font-family  : 'Courier New', monospace;
        color        : #888;
        background   : #0e0e10;
        padding      : 4px 10px;
        border-radius: 5px;
        border       : 1px solid #2a2a2e;
        min-width    : 120px;
        text-align   : center;
    }
    .pro-time-display span { color:#fff; }
    
    /* ================================================
       TIMELINE  —  scroll + always-visible playhead
       ================================================
    
       DOM structure produced by renderTimeline():
    
       #proTimelineWrap          ← overflow:hidden  (clips at modal edge)
         .tl-scroll              ← overflow-x:auto  (THE scrollbar)
           .tl-inner             ← min-width:max-content
             .tl-ruler-row       ← ruler canvas
               .tl-side-label
               .tl-ruler-canvas-wrap
             .tl-track-row
               .tl-side-label    ← "V1"
               .tl-track-wrap    ← position:relative, overflow:VISIBLE
                 .pro-track      ← clips
                 .tl-playhead    ← absolute, top:-28px, never clipped
                   .tl-ph-head
                   .tl-ph-line
       ================================================ */
    
    /* ── Outer wrapper ── */
    .pro-timeline-wrap,
    #proTimelineWrap {
        width      : 100%;
        overflow   : hidden;           /* clips horizontal overflow at modal */
        flex-shrink: 0;
        background : #141416;
        border-top : 1px solid #2a2a2e;
        padding    : 12px 14px 0;
        box-sizing : border-box;
    }
    
    /* ── Scroll container ── */
    .tl-scroll {
        width      : 100%;
        overflow-x : auto;
        overflow-y : visible;          /* NEVER clip vertically — playhead pokes up */
        position   : relative;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .tl-scroll::-webkit-scrollbar        { height: 6px; }
    .tl-scroll::-webkit-scrollbar-track  { background:#1a1a20; border-radius:3px; }
    .tl-scroll::-webkit-scrollbar-thumb  { background:#3a3a44; border-radius:3px; }
    .tl-scroll::-webkit-scrollbar-thumb:hover { background:#f0b429; }
    
    /* ── Inner content block ── */
    .tl-inner {
        display        : flex;
        flex-direction : column;
        min-width      : max-content;
        position       : relative;
    }
    
    /* ── Side label ── */
    .tl-side-label {
        flex-shrink     : 0;
        width           : 44px;
        display         : flex;
        align-items     : center;
        justify-content : center;
        font-size       : 10px;
        font-weight     : 700;
        letter-spacing  : .5px;
        color           : #555;
        text-transform  : uppercase;
        font-family     : monospace;
    }
    
    /* ── Ruler row ── */
    .tl-ruler-row {
        display      : flex;
        align-items  : stretch;
        flex-shrink  : 0;
        margin-bottom: 2px;
    }
    .tl-ruler-canvas-wrap {
        flex-shrink: 0;
        overflow   : hidden;
        height     : 24px;
    }
    #rulerCanvas {
        display: block;
        height : 24px;
    }
    
    /* ── Track row ── */
    .tl-track-row {
        display     : flex;
        align-items : stretch;
        position    : relative;
    }
    
    /* ── Track wrap — clips AND playhead live here.
       overflow:visible is the KEY fix.             ── */
    .tl-track-wrap {
        position   : relative;
        flex-shrink: 0;
        overflow   : visible;
    }
    
    /* ── Clip track ── */
    .pro-track {
        height        : 68px;
        position      : relative;
        overflow      : visible;
        background    : #1c1c20;
        border-radius : 4px;
        border        : 1px solid #2a2a2e;
    }
    
    /* ── Clips ── */
    .pro-clip {
        position      : absolute;
        top           : 1px;
        height        : calc(100% - 2px);
        overflow      : hidden;
        box-sizing    : border-box;
        cursor        : grab;
        border        : 2px solid transparent;
        border-radius : 5px;
        background    : #1e3a5f;
        transition    : border-color .1s;
        user-select   : none;
    }
    .pro-clip:active    { cursor: grabbing; }
    .pro-clip.active    { border-color:#f0b429; box-shadow:0 0 0 1px #f0b42966; z-index:2; }
    .pro-clip.dragging  { opacity:.5; transform:scale(.98); }
    .pro-clip.drag-over { outline:2px dashed #00ff88; outline-offset:-2px; border-color:#4af; }
    
    .pro-clip-thumbs {
        display        : flex;
        height         : 100%;
        overflow       : hidden;
        opacity        : .85;
        pointer-events : none;
    }
    .pro-clip-thumbs img {
        height        : 100%;
        object-fit    : cover;
        flex-shrink   : 0;
        pointer-events: none;
    }
    .pro-clip-label {
        position      : absolute;
        bottom        : 3px;
        left          : 6px;
        font-size     : 10px;
        font-weight   : 700;
        color         : #fff;
        text-shadow   : 0 1px 3px rgba(0,0,0,.9);
        pointer-events: none;
        white-space   : nowrap;
    }
    
    /* ── Trim handles ── */
    .pro-trim-handle {
        position        : absolute;
        top             : 0;
        width           : 10px;
        height          : 100%;
        cursor          : ew-resize;
        z-index         : 10;
        display         : flex;
        align-items     : center;
        justify-content : center;
    }
    .pro-trim-handle::after {
        content      : '';
        display      : block;
        width        : 3px;
        height       : 60%;
        border-radius: 3px;
        background   : #f0b429;
        opacity      : .9;
    }
    .pro-trim-handle.left  { left :-1px; border-radius:5px 0 0 5px; }
    .pro-trim-handle.right { right:-1px; border-radius:0 5px 5px 0; }
    .pro-trim-handle:hover::after { opacity:1; width:4px; }
    
    /* ── PLAYHEAD ─────────────────────────────────────
       Lives inside .tl-track-wrap (position:relative).
       top:-28px makes the triangle sit above the ruler.
       All parent containers have overflow:visible so
       the triangle is NEVER clipped.
       ─────────────────────────────────────────────── */
    .tl-playhead {
        position      : absolute;
        top           : -28px;
        width         : 2px;
        /* height = rise above(28) + ruler(24) + gap(2) + track(68) */
        height        : calc(28px + 24px + 2px + 68px);
        z-index       : 20;
        cursor        : ew-resize;
        pointer-events: all;
    }
    
    /* Red triangle */
    .tl-ph-head {
        position  : absolute;
        top       : 0;
        left      : -5px;
        width     : 12px;
        height    : 12px;
        background: #ff3b3b;
        clip-path : polygon(50% 100%, 0 0, 100% 0);
    }
    
    /* Vertical line */
    .tl-ph-line {
        position  : absolute;
        top       : 10px;
        left      : 0;
        width     : 2px;
        height    : calc(100% - 10px);
        background: #ff3b3b;
    }
    
    /* ---- Apply row ---- */
    .pro-apply-row {
        display         : flex;
        justify-content : flex-end;
        gap             : 8px;
        padding         : 10px 14px 12px;
        background      : #1a1a1e;
        border-top      : 1px solid #2a2a2e;
        flex-shrink     : 0;
    }
    .pro-apply-row .tbtn {
        font-size : 13px;
        padding   : 7px 20px;
    }
    
    /* ================================================
       CHROMA KEY PANEL
       ================================================ */
    .chroma-panel {
        background    : #111116;
        border-top    : 1px solid #2a2a30;
        border-bottom : 1px solid #2a2a30;
        padding       : 8px 14px 10px;
        flex-shrink   : 0;
    }
    .chroma-header {
        display       : flex;
        align-items   : center;
        gap           : 10px;
        margin-bottom : 6px;
    }
    .chroma-title {
        font-size     : 12px;
        font-weight   : 700;
        color         : #ccc;
        flex          : 1;
        letter-spacing: .4px;
    }
    .chroma-toggle-wrap {
        display     : flex;
        align-items : center;
        gap         : 6px;
        cursor      : pointer;
    }
    .chroma-toggle-wrap input[type="checkbox"] {
        width        : 16px;
        height       : 16px;
        cursor       : pointer;
        accent-color : #00c853;
    }
    .chroma-toggle-label {
        font-size  : 12px;
        color      : #888;
        user-select: none;
    }
    .chroma-body {
        display     : flex;
        flex-wrap   : wrap;
        gap         : 8px 20px;
        align-items : flex-end;
    }
    .chroma-row {
        display        : flex;
        flex-direction : column;
        gap            : 3px;
        flex           : 1;
        min-width      : 110px;
    }
    .chroma-row label {
        font-size  : 11px;
        color      : #777;
        white-space: nowrap;
    }
    .chroma-row label span {
        color       : #00c853;
        font-weight : 700;
        margin-left : 4px;
    }
    .chroma-row input[type="range"] {
        width        : 100%;
        accent-color : #00c853;
    }
    .chroma-color-row {
        display     : flex;
        align-items : center;
        gap         : 6px;
    }
    .chroma-color-row input[type="color"] {
        width        : 36px;
        height       : 28px;
        border       : 1px solid #3a3a44;
        border-radius: 5px;
        background   : transparent;
        cursor       : pointer;
        padding      : 0;
    }
    
    /* ================================================
       RESPONSIVE
       ================================================ */
    @media (max-width: 700px) {
        .pro-editor-wrap  { max-height:100vh; border-radius:0; }
        .effect-panel     { gap:8px; padding:6px 8px; }
        .pro-toolbar      { gap:5px; padding:6px 8px; }
        .tl-side-label    { width:28px; }
    }