body::before {
      content: "";
      position: fixed; inset: 0; z-index: -10;
    }

    #ui-root{
      position:fixed;             /* cola no viewport */
      inset:0;                    /* top/right/bottom/left = 0  */
      /* tamanho lógico do mock-up; será encolhido pelo zoom/scale   */
      width :100%;              /* ou DESIGN_W se mudar */
      height:100%;              /* ou DESIGN_H         */
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
    }

    :root{
      --media-offset-y: -25px;          
      --actions-offset-y: 0px;
    }

    @keyframes circle-to-square{
      0%   { width:var(--shot-in);           height:var(--shot-in);           border-radius:50%;  }
      100% { width:calc(var(--shot-in)/1.9);   height:calc(var(--shot-in)/1.9);   border-radius:20%; }
    }
    .animate-recording { animation: circle-to-square 0.25s ease forwards; }

    @keyframes square-to-circle{
      0%   { width:calc(var(--shot-in)/1.9);   height:calc(var(--shot-in)/1.9);   border-radius:20%; }
      100% { width:var(--shot-in);           height:var(--shot-in);           border-radius:50%; }
    }
    .animate-stop-recording { animation: square-to-circle 0.25s ease forwards; }

   
    .circle-icon-btn {
      position: relative;
      width: var(--btn-size, 48px);
      height: var(--btn-size, 48px);
      border: var(--btn-border, 1px solid rgba(255,255,255,0.15));
      border-radius: 9999px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: transform 0.15s ease, border-color 0.15s ease;
    }
    .circle-icon-btn:hover      { transform: scale(0.94); }
    .circle-icon-btn.no-outline { --btn-border: none; }


    .circle-icon-btn:focus { outline: none; }

    .circle-icon-btn.loading::before{
      content:''; position:absolute; inset:0; margin:auto;
      width:50%; height:50%;
      border:3px solid #fff3; border-top-color:#FFD701;
      border-radius:50%; animation:spin .9s linear infinite;
    }


    #btnScreenshot{
      position:center;
      width :var(--shot-out);
      height:var(--shot-out);
      border:var(--shot-bd) solid #D9D9D9;
      border-radius:50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
    }

    #screenshotCore{
      width :var(--shot-in);
      height:var(--shot-in);
      margin: 0px;

      justify-content: center;
      background-color: #BABABA;
      border-radius:50%;

      transition:width .25s, height .25s, border-radius .25s;
    }

    #screenshotCore:focus, #btnScreenshot:focus { outline: none; }

    .circle-icon-btn .icon-mask {
      width: var(--icon-size, 100%); height: var(--icon-size, 100%);
      background-color: #ffffff;
      transition: background-color 0.15s ease;
      background-size: contain; background-position: center; background-repeat: no-repeat;
      mask: center / contain no-repeat;
      -webkit-mask: center / contain no-repeat;
    }
    .circle-icon-btn                         { background:transparent; }
    .circle-icon-btn .icon-mask              { background:#fff; }
    .circle-icon-btn:hover:not(.marked)          { background:transparent; }
    .circle-icon-btn:hover:not(.marked) .icon-mask{
        background:#FFD701 !important;
    }

    .circle-icon-btn:hover:not(.marked):not(.no-outline){
        border-color:#FFD701 !important;
    }
    .circle-icon-btn.marked:not(.no-outline):not(.has-thumb){
        background:#FFD701 !important; border-color:#FFD701;
    }
    .circle-icon-btn.marked:not(.no-outline).has-thumb{
        border-color:#FFD701;
    }
    .circle-icon-btn.marked .icon-mask{
        background: #000000 !important;
    }

    .circle-icon-btn.marked .icon-bleed {
      filter: invert(1);
    }

    .circle-icon-btn.no-outline.marked        { background:transparent; }
    .circle-icon-btn.no-outline.marked .icon-mask{ background:#FFD701  !important; }

    #btnROS.no-outline.marked .icon-mask {background: #000000 !important;}
    #btnROS.no-outline.marked {background:#FFD701 !important; border-color:#FFD701;}

    #btnCameraSettings.no-outline.marked .icon-mask {background: #000000 !important;}
    #btnCameraSettings.no-outline.marked {background:#FFD701 !important; border-color:#FFD701;}
    
    .record-toggle {
    --toggle-handle: 36px;
    position: relative;
    width: 78px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    border: 1px solid rgba(255,255,255,0.15);
    background-color: #262626;
    border-radius: 9999px;
    cursor: pointer;
    overflow: hidden;
    }

    .record-toggle .handle {
    position: absolute;
    top: 1px;
    left: 1px;
    width: var(--toggle-handle);
    height: var(--toggle-handle);
    border-radius: 50%;
    background: #171717;
    transition: transform 0.25s ease;
    z-index: 1;
    }

    .record-toggle[data-mode="video"] .handle {
    transform: translateX(38px);
    }

    .record-toggle .option {
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    }

    .record-toggle .icon-mask {
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ffffff;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .record-toggle .option.photo { right: 4px; }
    .record-toggle .option.video { left: 3.5px; }
    .record-toggle[data-mode="photo"] .option.photo .icon-mask { background: #FFD701 !important; }
    .record-toggle[data-mode="photo"] .option.video .icon-mask { background: #FFFFFF !important; }
    .record-toggle[data-mode="video"] .option.video .icon-mask { background: #FFD701 !important; }
    .record-toggle[data-mode="video"] .option.photo .icon-mask { background: #FFFFFF !important; }
    .camera-selector {
      position: relative; width: 184px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      background: #262626; border: 1px solid rgba(255,255,255,0.15);
      border-radius: 9999px;
      padding:0 48px 0 0px;
      font-family: Helvetica, Arial, sans-serif !important;
    }
    .camera-selector .label {color: #fff; font-size: 15px; letter-spacing: 0.05em; pointer-events: none; white-space: nowrap; }

    .camera-selector .arrow {
      position: absolute !important; left: 61px !important;
      width: 12px !important; height: 12px !important;
      cursor:pointer; 
    }
    .camera-selector .arrow::before {
      content: ""; position: absolute; inset: 0;
      border-top: 2px solid #fff; border-right: 2px solid #fff;
      width: 100%; height: 100%; transform-origin: center;
    }

    .arrow{
      right:auto !important;
      margin-left:auto !important;
    }

    #modalCam .label-title {
      font-weight:400 !important;
      white-space: nowrap;          /* força “FLIGHT SPEED” a ficar inteiro */
    }

    #modalCam .modal-frame {
      display: flex;
      flex-direction: column;
      align-items: left;          /* ← centro horizontal */
    }

    .camera-selector .arrow.up   { top: -14px; }
    .camera-selector .arrow.up::before   { transform: rotate(-45deg); }
    .camera-selector .arrow.down { bottom: -14px; }
    .camera-selector .arrow.down::before { transform: rotate(135deg); }
    .camera-selector .arrow:hover::before { border-color: #FFD701; }
    .modal{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; pointer-events:none;}
    .modal.hidden{ display:none; }
    .modal-frame{
      background:#202020b3;
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,.15);
      border-radius:var(--modal-radius,30px);
      display:flex; flex-direction:column;
      pointer-events:auto;
      z-index:51;
    }

    .modal-frame.timeline{
      background:transparent;
      border:none;
      backdrop-filter:none;
      padding:0;
    }

    .slider-native:focus {outline: none;}

    .timecode{
      font-family: "Big Shoulders Text", "Roboto Mono", monospace !important;
      font-weight:400 !important;
      font-size:22px;
      font-variant-numeric: tabular-nums !important;
      font-feature-settings: "tnum" 1 !important;
      width: 75px !important;
      letter-spacing: .05em !important; 
      white-space:nowrap;
      margin-left:18px !important;
      margin-right: 30px;
      margin-bottom: -15px;
    }
    .modal .btn-close{
      position:absolute;
      right:-10px; top:-10px;
      --btn-size:30px;
      background:#696969;
      border:1px solid rgba(255,255,255,.15);
      border-radius:50%;
      z-index:9999;
    }
    .modal .btn-close .icon-mask{ background:#fff; }
    .modal .btn-close:hover .icon-mask{ background:#FFD701!important; }
    .modal .nav-arrow{
      --btn-size:30px;
      border:1px solid rgba(255,255,255,.15);
      position:absolute; top:50%; 
      transform:translateY(-50%);
      display:flex;align-items:center;justify-content:center;
      border-radius:50%;
      background:rgba(132, 132, 132, .20) !important;
    }
    .modal .nav-left { left:40px; }
    .modal .nav-right{ right:40px; }
    .modal-media{
      flex:1;
      display:flex; align-items:center; justify-content:center;
    }
    .modal-media .media-box{
      width: 85%;
      height: 75%;
      transform: translateY( var(--media-offset-y) );
      aspect-ratio:16/9;
      border:2.16px solid rgba(255,255,255,.15);
      border-radius:22px;
      overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      background:#111;
    }
    .media-box img,
    .media-box video{ width:100%; height:100%; object-fit:cover; }
    .modal-actions{
      position:absolute;
      bottom:25px;
      width:var(--media-w,85%);
      left:50%; transform:translateX(-50%);

      display:flex; gap:12px;
      justify-content:flex-end;
      padding:0px 30px 20px 0px;
    }
    .modal-actions .circle-icon-btn{ --btn-size:48px; background:#262626 !important; }
    .modal-actions .circle-icon-btn .icon-mask{ background:#fff; }
    .modal-actions .circle-icon-btn:hover .icon-mask{ background:#FFD701!important; }

    .toast{
      position:fixed; top:50%; left:50%; transform:translateX(-50%);
      background:#202020b3; backdrop-filter:blur(12px);
      border:1px solid rgb(255 255 255 / .15);
      border-radius:9999px; padding:14px 32px;
      font:16px/1.2 Helvetica,Arial,sans-serif !important; text-align:center;
      opacity:0; transition:opacity .3s;
      z-index:9999;
    }
    .toast.show{ opacity:1; }

    .toast-link{ 
      pointer-events: auto; 
      cursor:pointer; 
    }
    .toast-link:hover{ 
      background:#2a2a2ab3; 
      color: #FFD701 !important;
    }

    .label-title{
      font-family:"Big Shoulders Text",sans-serif !important;
      font-weight:400 !important;
      font-size:20px; letter-spacing:.02em;
      color:#fff; user-select:none;
    }
    .arrow-btn{
      position:relative;
      --btn-size:15px;
      width:var(--btn-size); height:var(--btn-size);
      border-radius:50%; border:1px solid rgba(255, 255, 255, 0.15);
      background:#696969; display:flex; align-items:center; justify-content:center;
      cursor:pointer;
    }
    .arrow-btn:after{
      content:"";
      position:absolute;
      top:50%; left:50%;
      width:4.5px; height:4.5px;
      border:1px solid #fff;
      border-top:none; border-right:none;
      transform:translate(-60%,-40%) rotate(225deg);
    }
    .arrow-left:after{ transform:translate(-40%,-50%) rotate(45deg);}
    .arrow-btn:hover:after{ border-color:#FFD701; }

    .widget{width:100%; margin-bottom:50px;}

    .selector-shell{
        display:flex;
        align-items:center;
        gap:12px;
        width:100%;
    }
    .selector-shell .selector-text{
        flex:1 1 auto;
        text-align:center;
    }
    .selector-shell.has-bg{
        position:relative;
        padding:0px;
    }
    .selector-shell.has-bg::before{
        content:"";
        position:absolute; inset:0;
        margin:0px -10px 0px -10px;
        background:#1B1B1B8C;
        border-radius:5px;
        z-index:-1;
    }

    .slider-native{
      position:relative;
      box-shadow:0 0 0 1px rgba(255,255,255,.15);
      border-radius:9999px;
    }
    .slider-native::-webkit-slider-thumb{
      -webkit-appearance:none;
      width:12px !important; height:12px !important;
      border-radius:50%;
      background:#fff;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.15);
      cursor:pointer;
    }
    .slider-native::-webkit-slider-thumb:hover {background:#FFD701!important;}
    .slider-native::-moz-range-thumb{
      width:12px !important; height:12px !important;
      border:none; border-radius:50%;
      background:#fff;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.15);
      cursor:pointer;
    }
    .slider-native::-moz-range-thumb:hover {background:#FFD701!important;}
    .slider-native.full::before{
      content:""; position:absolute; inset:0;
      border-radius:inherit;
    }

    .timeline-wrap{
      flex:1 1 auto;
      display:flex;
      align-items:center !important;
      max-width:90vw;
      padding-right: 25px;
      padding-top: 25px;
    }

    .timeline-wrap input[type=range]{
      width:100%;
      align-items:center !important;
    }

    #miniMenu{
      position:fixed;
      top:40px; left:40px; z-index:60;
      display:flex; align-items:center; gap:12px;
      user-select:none;
    }

    #miniMenu img{
      width:auto; height:auto;
      cursor:pointer;
    }

    .menu-bar{
      display:flex; gap:30px; align-items:center;
      background:#202020b3;
      backdrop-filter:blur(12px);
      border:1px solid rgb(255 255 255 / .15);
      border-radius:10px;
      padding:0px 30px 0px 15px;
      width: 56px;
      height: 52px;
      transition:width .25s cubic-bezier(.4,0,.2,1);
      overflow:hidden;
    }
    .menu-bar.open{ width:233px; }
    .menu-btn{
      --btn-size:36px;
      width:var(--btn-size); height:var(--btn-size);
      display:flex; justify-content:center; align-items:center;
      cursor:pointer;
      transition:transform .15s ease;
    }
    .menu-btn:hover{ transform:scale(.92); }
    .menu-btn .icon{
      width:var(--ico,24px);
      height:var(--ico,24px);
      background-color:#fff;
      mask:center/contain no-repeat;
      -webkit-mask:center/contain no-repeat;
      margin-top: 0px!important;
      margin-bottom: 0px!important;
      transition:background-color .15s ease;
    }
    .menu-btn:hover .icon{ background:#FFD701!important; }
    .menu-toggle:hover .icon{ background:#FFD701!important; }
    .comment-panel{
      width:435px; height:calc(100vh - 100px);
      display:flex; flex-direction:column;
      padding:35px 34px;
    }
    .comment-scroll{
      flex:1 1 auto; overflow-y:auto;
      display:flex; flex-direction:column; gap:18px;
      margin-top:22px; margin-bottom:28px;
      scrollbar-width:6px;
    }
    .comment-card{
      background:#1B1B1B8C; border-radius:10px;
      padding:14px 16px 18px 16px; position:relative;
      transition:box-shadow .15s;
      cursor:pointer;
      margin-right:10px;   
    }
    .comment-card h4{
      font:700 20px/1 "Big Shoulders Text" !important;
      color:#EDEDF2; display:inline-block; margin:0 6px 0 0;
    }
    .comment-meta{
      font:16px/1 "Albert Sans"; color:#CACACA;
    }
    .comment-body{
      font:16px/1.35 "Albert Sans" !important; color:#EDEDF2; margin-top:6px;
      overflow:hidden;
      position:relative;
      word-break:break-word;      
      margin-left: 10px !important;
    }
    .comment-body.expanded{max-height:none;}
    .comment-body .read-more{
      position:absolute; bottom:0; right:0;
      background:#202020; padding:0 4px; cursor:pointer;
      font-size:14px; color:#FFD701;
    }

    .comment-card .btn-edit{
      position:absolute; top:13px; left:calc(100% - 60px);
      width:20px; height:20px; cursor:pointer; opacity:0;
      transition:opacity .15s;
    }
    .comment-card:hover, .comment-card.focused{
      box-shadow: inset 0 0 0 1px rgba(255,215,1,.5);
    }
    
    .btn-edit{opacity:1;}
    .input-box{
      background:#3F3F3F8C; border-radius:10px; width:100%;
      color:#EDEDF2; font:16px "Albert Sans" !important; resize:none;
      padding:12px 14px; border:none; outline:none;
    }
    .input-box::placeholder{color:#CACACA;}
    
    #btnSendComment{
      --btn-size:30px;
      width:var(--btn-size); height:var(--btn-size);
      border-radius:9999px;
      background:#84848433;
      position:absolute; bottom:12px; right:12px;
      cursor:pointer;
      transition:background-color .2s;
    }
    #btnSendComment .icon-mask{ --icon-size:14px; }
    #btnSendComment:hover{
      background:#FFD701;
    }
    #btnSendComment:hover .icon-mask{ background:#000 !important; }

    .comment-scroll::-webkit-scrollbar,
    textarea::-webkit-scrollbar{
      width:6px;
      
    }
    .comment-scroll::-webkit-scrollbar-track,
    textarea::-webkit-scrollbar-track{
      background:#3F3F3F8C; border-radius:3px;
    }
    .comment-scroll::-webkit-scrollbar-thumb,
    textarea::-webkit-scrollbar-thumb{
      background:#EDEDF2; border-radius:3px;
    }

    .input-box:focus{
      outline: 1px solid rgba(255,215,1,.5);
    }
    .input-error{ outline:1px solid rgba(255,0,0,.5)!important; } 
    #errorMsg{
      font:14px/1 "Albert Sans" !important;
      color:#FF5555;
      text-align:right;
      height:0px;
      margin-top:4px;
    }
    .input-box:not(:focus):hover{
      outline: 1px solid rgba(255, 255, 255, 0.2);
    }

    .comment-scroll{ margin-right:-14px; }
    .comment-scroll::-webkit-scrollbar{ margin-right:-14px; }

    .card-actions{
      display:flex;
      gap:6px;
      opacity:0;
      transform:translateX(8px);
      transition:opacity .18s ease, transform .18s ease;
    }
    .comment-card:hover .card-actions{ opacity:1; transform:none; }

    .card-actions .circle-icon-btn{
      --btn-size:22px;
      background:transparent !important;
      border:none;
    }

    .btn-resolve{ 
      width:20px; 
      height:20px; 
      cursor:pointer;
      z-index: 1;
    }



    .card-actions .icon-mask{ background:#FFF; }
    .card-actions .circle-icon-btn:hover .icon-mask{ background:#FFD701; }

    .comment-header{
      display:flex;
      align-items:center;
      gap:8px;
      overflow:visible;          /* impede quebrar layout */
      font-size:14px;
      max-width: 100%;
      width: 100%;
    }

    .comment-header .time,
    .comment-header .date,
    .edited-flag{
      color:#cacaca;
      font-size:14px;
    }

    .edited-flag {
      margin-left: -8px;
    }

    .comment-header .author{
      max-width:100px !important;          /* ajuste conforme largura desejada */
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-weight:700;
    }

    .header-spacer{ flex:1 1 auto; }



    #panelComments.modal{
      justify-content:flex-end !important;
      align-items:center !important;
    }

    #panelScene.modal{
      justify-content:flex-end !important;
      align-items:center !important;
    }

    
    

    #btnComments .badge{
      position:absolute; top:-4px; right:-4px;
      min-width:18px; height:18px; padding:0 4px;
      border-radius:9999px;
      background:#FFD701; color:#000;
      font:12px/18px "Big Shoulders Text" !important;
      font-weight:700 !important;
      text-align:center;
      display:none;
    }

    .edit-buttons{
      position:absolute;
      right:20px; bottom:5px;
      margin-top: 10px;
      font:16px "Big Shoulders Text" !important;
      color:#FFD701;
      user-select:none;
      cursor:pointer;
      opacity:0; transition:opacity .15s;
    }
    .edit-buttons.show{ opacity:1; }
    .edit-buttons span:hover{ text-decoration:underline; }

    .tooltip{
      position:fixed; pointer-events:none; z-index:9999;
      background:#202020b3; backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,.15);
      border-radius:8px; padding:6px 10px;
      font:15px/1.3 "Albert Sans" !important;
      color:#fff;
      opacity:0; transition:opacity .15s;
      max-width:260px; word-wrap:break-word;
    }
    .tooltip.nowrap{ white-space:nowrap; word-wrap:normal; }
    .ros-panel           { width:300px;height:250px;padding:30px 20px 60px;display:flex;flex-direction:column;position:relative;}
    .ros-scroll           { flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:14px; }
    .ros-scroll::-webkit-scrollbar{width:6px;}
    .ros-scroll::-webkit-scrollbar-track{background:#3F3F3F8C;border-radius:3px;}
    .ros-scroll::-webkit-scrollbar-thumb{background:#EDEDF2;border-radius:3px;}
    .ros-scroll-mask     { flex:1 1 auto;overflow-y:auto;display:flex;flex-direction:column;gap:0;
                          position:relative;scrollbar-width:6px;}
    .ros-scroll-mask::-webkit-scrollbar{width:6px;}
    .ros-scroll-mask::-webkit-scrollbar-track{background:#3F3F3F8C;border-radius:3px;}
    .ros-scroll-mask::-webkit-scrollbar-thumb{background:#EDEDF2;border-radius:3px;}
    .ros-scroll-mask{
      flex:1 1 auto;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      gap:0;
      scrollbar-width:6px;
      --topFade:22px; --botFade:22px;
      -webkit-mask-image:linear-gradient(to bottom,
                     transparent                0,
                     #000 var(--topFade),
                     #000 calc(100% - var(--botFade)),
                     transparent               100%);
              mask-image:linear-gradient(to bottom,
                     transparent                0,
                     #000 var(--topFade),
                     #000 calc(100% - var(--botFade)),
                     transparent               100%);

    }
    .ros-item{
      height: 36px;
      flex:0 0 auto;display:flex;align-items:center;
      line-height:36px;
      border-radius:9999px;padding:0 45px 0 0px;cursor:pointer;
      margin-top: 5px;
      font:20px "Big Shoulders Text" !important;color:#fff;overflow:hidden;
    }
    .ros-item:hover      { background:#262626;border:1px solid rgba(255,255,255,.15); margin-right: 20px; padding:0 5px 0 0px; line-height:36px; text-overflow:clip;}
    .ros-item:hover .label{
      text-overflow:unset;
      -webkit-mask-image:linear-gradient(to right,
                        transparent 0,
                        #000 10px,
                        #000 calc(100% - 10px),
                        transparent 100%);
              mask-image:linear-gradient(to right,
                        transparent 0,
                        #000 10px,
                        #000 calc(100% - 10px),
                        transparent 100%);
    }
    .ros-item.current    { color:#FFD701; }
    .ros-item .num       { flex:0 0 28px;text-align:left;margin-left:15px; }
    .ros-item .label{
      width: 180px;
      overflow:hidden;
      text-overflow:ellipsis;      
      white-space:nowrap;
    }
    .ros-item:not(:hover) .run{
      animation:none;
      transform:translateX(0);
      width: 190px;
      overflow:hidden;
      text-overflow:ellipsis;      
      white-space:nowrap;
    }
    .run{
      padding-right:55px;
      padding-left: 10px;
      animation:ros-marquee 8s linear infinite;
      animation-play-state:paused;
    }

    .ros-item .run{
      display:block;
      padding-right:15px;
      animation:ros-marquee 6s linear infinite;
      animation-play-state:paused;
      text-overflow:ellipsis;  
    }
    @keyframes ros-marquee{
      0%               {transform:translateX(0);}
      25%              {transform:translateX(0);}
      60%              {transform:translateX(calc(-1*var(--ov-px)));}
      99.99%              {transform:translateX(calc(-1*var(--ov-px)));}
      100%             {transform:translateX(0);}
    }
    .ros-item:hover .run{
      animation-play-state:running;
    }
    #btnMoreROS{
      --btn-size:28px;position:absolute;left:50%;bottom:15px;
      transform:translateX(-50%);
      background:#26262666 !important;
      border:1px solid rgba(255,255,255,.15);
    }
    #btnMoreROS:hover{border:1px solid #FFD701 !important;   }
    .ros-full  { width:1400px; height:800px; padding:40px 50px; display:flex; gap:40px; flex-direction:row; }

    .ros-full .col-media   { flex:2 0 40%;  display:flex; flex-direction:column; }
    .ros-full .col-content { flex:3 0 60%;  display:flex; flex-direction:column; }

    .ros-full h3           { font:700 28px/1 "Big Shoulders Text" !important; margin:0 0 26px; }

    .media-scroll::-webkit-scrollbar{width:6px;}
    .media-scroll::-webkit-scrollbar-track{background:#3F3F3F8C;border-radius:3px;}
    .media-scroll::-webkit-scrollbar-thumb{background:#EDEDF2;border-radius:3px;}

    .ros-full .add-btn   { margin:22px auto 0; border:1px solid rgba(255,255,255,.15) !important;}
    .ros-full .add-btn:hover   {border:1px solid #FFD701 !important;}
    .ros-full .field     { width:550px; height:53px; margin-bottom:22px; }
    .ros-full .field.big { height:308px; }
    .preview-box{ border:1px solid rgba(255,255,255,.15); border-radius:15px;
                  width:550px; height:308px; background: transparent; position:relative; overflow: hidden; }
    .preview-box video,
    .preview-box img{ width:100%; height:100%; object-fit:scale-down; background:#000;}
    .preview-box.loading{background:#000; border:1px solid rgba(255,255,255,.15) !important;}
    .preview-label{
      font-family:"Big Shoulders Text",sans-serif !important;
      font-size:20px; letter-spacing:.02em;
      color:#fff; user-select:none;
      align-self:center;
      margin-right: 495px;
      margin-bottom: auto !important;
    }
    .preview-box:before{
      content:""; position:absolute; inset:0; margin:auto; width:40px; height:40px;
      border:4px solid #fff; border-top-color:transparent; border-radius:50%;
      animation:spin 0.9s linear infinite; display:none;
    }
    .preview-box.loading:before{display:block;}


    @keyframes spin{to{transform:rotate(360deg);}}
    .select{ 
      position:relative; 
      width:180px; 
      height:53px; 
      --arrow-closed: url("https://mile80-hostedfiles.s3.us-east-1.amazonaws.com/icons/main/ArrowDown.svg");
      --arrow-open  : url("https://mile80-hostedfiles.s3.us-east-1.amazonaws.com/icons/main/ArrowUp.svg");
      --arrow-size  : 18px;
    }
    .select select{
      appearance:none; width:100%; height:100%; padding:0 38px 0 18px;
      border-radius:10px; background:#3F3F3F8C; color:#fff;
      font:18px "Albert Sans" !important; border:none; outline:none; cursor:pointer;
    }
    .select select:hover{border:1px solid rgba(255,255,255,.15);}
    .select::before{
      content:"";
      position:absolute; right:14px; top:50%;
      width:var(--arrow-size); height:var(--arrow-size);
      z-index: 1;
      background:#fff;
      mask: var(--arrow-closed) center / contain no-repeat;
      -webkit-mask: var(--arrow-closed) center / contain no-repeat;
      transform:translateY(-50%);
      transition:transform .15s, background-color .15s, mask-image .15s;
      pointer-events: none;
      cursor: hand;
    }
    .select.open::before{
      mask: var(--arrow-open) center / contain no-repeat;
      -webkit-mask: var(--arrow-open) center / contain no-repeat;
    }
    .select::after{
      content:"";
      position:absolute; right:14px; top:50%;
      width:var(--arrow-size); height:var(--arrow-size);
      border-radius:50%;
      background:#262626;
      box-shadow:0 0 0 1px rgba(255,255,255,.15);
      transform:translateY(-50%);
      pointer-events:none;
      cursor: hand;
    }
    .ros-full            { display:flex; }
    .ros-full .col-media { flex:0 0 40%; min-width:513px; }
    .ros-full .col-content{
      flex:1 1 0;
      min-width:0;
      display:flex;
      flex-direction:column;
    }
    .media-scroll-mask::-webkit-scrollbar{width:6px;}
    .media-scroll-mask::-webkit-scrollbar-thumb{background:#EDEDF2;border-radius:3px;}
    .media-scroll-mask::-webkit-scrollbar-track{background:#3F3F3F8C;border-radius:3px;}
    .ros-full .col-media{
      min-height:0;
    }

    .media-scroll-mask{
      flex:1 1 0%;
      min-height:0;
      overflow-y:auto;
      display:flex; flex-direction:column; gap:14px;
      --MediaTopFade:22px; --MediaBotFade:22px;
      -webkit-mask-image:linear-gradient(#0000 0,
                                        #000 var(--MediaTopFade),
                                        #000 calc(100% - var(--MediaBotFade)),
                                        #0000 100%);
              mask-image:linear-gradient(#0000 0,
                                        #000 var(--MediaTopFade),
                                        #000 calc(100% - var(--MediaBotFade)),
                                        #0000 100%);
    }

    .ros-full .field,
    .ros-full .select select{
      font:20px/1 "Albert Sans" !important;
      background:#2B2B2B !important;
      color:#fff;
    }

    .ros-full .row-end{
      display:flex; align-items:center;
      gap:18px;
      width:550px;
    }

    .ros-full .row-end .label-title{flex:0 0 auto;}
    .ros-full .row-end .select      {flex:1 1 auto;}
    .ros-full .row-end button       {flex:0 0 110px;}
 
    .btn-update{
      padding:8px 0; width:120px; height: 50px;
      border-radius:15px;
      background:#262626 !important; color:#fff !important;
      border:1px solid rgba(255,255,255,.15) !important;
      font:700 20px "Big Shoulders Text" !important;
      transition:.15s;
    }
    .btn-update:hover{
      background:#FFD701 !important; color:#000 !important;
    }
    .btn-update:focus {outline: none;}
    .ros-full .media-actions{
      display:flex; gap:18px;
      align-items:center;
      margin:22px auto 0;
      margin-top: auto;
    }
    .media-card{
      height:54px; width:auto;
      display:flex; align-items:center; user-select:none;
      padding:0 20px; margin-right:20px;
      border-radius:9999px;
      cursor:pointer;
      gap:16px;
      font:22px "Big Shoulders Text" !important;
      color:#fff;
    }
    .media-card .idx      {flex:0 0 30px; text-align:left;}
    .media-card .label    {flex:1 1 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .media-card .drag,
    .media-card .play-btn {flex:0 0 14px;}
    .media-card .share-btn { 
      flex:0 0 24px; margin-left:auto; 
      display:flex;
      justify-content:center!important;   /* centra ícone     */
      align-items:center;
      overflow:visible !important;         /* ← evita corte    */
      width:25px!important;
      width:25px!important;
    }
    .media-card .icon-mask {
      width:18px; height:18px;
      opacity:0;
      background:#fff;
      transition:opacity .0s, background-color .0s;
      mask:center/contain no-repeat;
      -webkit-mask:center/contain no-repeat;
    }
    .media-card .drag     {cursor:grab; border:1px solid rgba(255,255,255,.15);}
  

    #rosFullList:not(.is-dragging) .media-card:hover:not(.focused){
      background:#262626;
      border:1px solid rgba(255,255,255,.15);
      color:#fff;
    }
    #rosFullList:not(.is-dragging) .media-card:hover:not(.focused) .icon-mask{opacity:1;}
    #rosFullList:not(.is-dragging) .media-card.focused{
      background:#262626;
      border:1px solid rgba(255,255,255,.15);
      color:#FFD701!important;
    }
    #rosFullList:not(.is-dragging) .media-card.focused .icon-mask{
      opacity:1;
      background:#FFD701!important;
    }
    .dragging-card{
      background:transparent !important;
      border:1px dashed rgba(255,255,255,.25) !important;
      color:#FFD701 !important;
    }
    .dragging-card .icon-mask{visibility:hidden!important;}
    .media-card.sortable-ghost{
      background:transparent !important;
      border:1px dashed rgba(255, 255, 255, 0.25) !important;
      color:#FFD701 !important;
    }
    .media-card.sortable-ghost .icon-mask{visibility:hidden!important;}
    .is-dragging .media-card{
      background:transparent !important;
      border-color:transparent !important;
      color:#fff !important;
    }
    .is-dragging .media-card .icon-mask{visibility:hidden;}

    .is-dragging .dragging-card{
      background:transparent !important;
      border:1px dashed rgba(255,255,255,.25) !important;
      color:#FFD701 !important;
    }
    .is-dragging .dragging-card .icon-mask{visibility:hidden!important;}

    .is-dragging .sortable-ghost{
      background:transparent !important;
      border:1px dashed rgba(255,255,255,.25) !important;
      color:#FFD701 !important;
    }
    .is-dragging .sortable-ghost .icon-mask{visibility:hidden!important;}
    @keyframes ros-collapse { from{flex-basis:40%; min-width: 513px; opacity: 0.25;} to{flex-basis:0; min-width: 0px; opacity: 0;} }
    @keyframes ros-expand   { from{flex-basis:0; min-width: 0px; opacity: 0;}  to{flex-basis:40%; min-width: 513px; opacity: 1;} }

    .ros-full .col-media.collapsed{ 
      overflow: hidden;
      animation:ros-collapse .25s forwards cubic-bezier(.4,0,.2,1);
    }
    .ros-full .col-media.expanded { 
      animation:ros-expand   .25s forwards cubic-bezier(.4,0,.2,1);}

    @keyframes ros-growContent { from{flex-basis:60%} to{flex-basis:100%} }
    @keyframes ros-shrinkContent{from{flex-basis:100%}to{flex-basis:60%} }

    .ros-full .col-content.grow   { 
      animation:ros-growContent   .25s forwards cubic-bezier(.4,0,.2,1);
      max-width: 100%;
    }
    .ros-full .col-content.shrink { animation:ros-shrinkContent .25s forwards cubic-bezier(.4,0,.2,1);}
    #btnBackAdd{
      --btn-size:28px;
      position:absolute; left:40px; top:32px;
      background:#262626 !important;
      border:1px solid rgba(255,255,255,.15);
      opacity:0; transform:scale(.7); transition:.25s;
    }
    #btnBackAdd.show{ opacity:1; transform:none; }

    @keyframes ui-fadeIn{from{opacity:0; transform:translateY(12px)}
                     to  {opacity:1; transform:none}}
    .ui-appear{
      animation:ui-fadeIn .35s ease forwards;
      opacity:0;                    /* estado inicial p/ JS poder resetar */
      pointer-events:auto;          /* reabilita clique depois do mount   */
    }


    @keyframes ui-fadeOut {
      0%   { opacity:1; transform:none;        }
      100% { opacity:0; transform:translateY(12px); }
    }
    .ui-fade-out { animation: ui-fadeOut .35s ease forwards; }

    h3, h2, .toast, .timecode {
      color: white;
    }
    
    #recordTimer {
        position: fixed;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 10px;
        min-width: 100px;
        border-radius: 10px;
        background: #e53835e0;           /* vermelho       */
        color: #fff;                   /* texto branco   */
        font: 28px/1 Arial, sans-serif !important;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum"; 
        white-space: nowrap;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease; /* fade-in/out    */
        z-index: 9999;                 /* acima de tudo  */
    }

    #recordTimer.show { opacity: 1; }


:root{
  --ico-play : url("https://mile80-hostedfiles.s3.us-east-1.amazonaws.com/icons/main/Play.svg");
  --ico-pause: url("https://mile80-hostedfiles.s3.us-east-1.amazonaws.com/icons/main/Pause.svg");
}

.disabled {
  opacity: .35;
  pointer-events: none;
}

.ui-hidden {
    opacity: 0 !important;
    pointer-events: none !important;   /* impede cliques enquanto invisível */
}

.album-loader {
    position: absolute;
    inset: 0;
    background: rgb(0, 0, 0) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;            /* fica acima da mídia */
}
.album-loader::after {     /* spinner simples */
    content: '';
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 6px solid #fff3;
    border-top-color: #FFD701;
    animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }


/* ----- layout em coluna (vertical) ------------------------------*/
.share-vbox{
    display:flex;
    flex-direction:column;
    gap:28px;
    align-items:flex-start;     /* texto começa à esquerda */
    padding:12px 90px;          /* folga dentro do frame  */
    box-sizing:border-box;
    height:100%;
}

.share-title{
    font:700 24px/1 "Big Shoulders Text";
    letter-spacing:.6px;
    text-align:center;
    color:#FFF;
    margin-bottom:25px;
    margin-top: 40px;
}

.share-mode{               /* linha botão + texto */
    display:flex;
    align-items:center !important;
    gap:24px;
    width:100%;            /* estica até a borda do frame */
}

.share-project-btn{
    flex:0 0 120px; 
    height: 50px;
    padding:12px 0;
    border:1px solid #696969;
    border-radius:15px;
    background:#1a1a1a;
    color:#FFF;
    font:700 20px/1 "Big Shoulders Text";
    cursor:pointer;
    transition:.15s;
}
.share-project-btn.selected{
    border-color:#FFD701;
    box-shadow:0 0 0 1px #FFD701 inset;
}

.share-desc{
    flex:1 1 auto;
    text-align:left;
    color:#BBB;
    font:16px/1.35 "Albert Sans",sans-serif;
    word-break:break-word;
}

.share-url{
    width:100%;
    height:50px;
    border:none;
    border-radius:15px;
    background:#2b2b2b;
    color:#FFF;
    font:18px/50px "Albert Sans",sans-serif; /*  line-height = altura  */
    text-align:center;       /* cursor / seleção no meio   */
    user-select:text;
    pointer-events:auto;
    padding:0 16px;
}

.share-copy{
    width:48px; height:48px;
    margin:-5px auto 0;             /* centraliza dentro da coluna */
    display:flex; align-items:center; justify-content:center;
    border:1px solid #696969;       /* outline cinza               */
    border-radius:50%;
    background:#2b2b2b;
    transition:.15s;
}
.share-copy:hover{ background:#444; }

.share-copy.copied{
    border-color:#696969;   /* desaparece visualmente */
    transition:none;        /* sem hover-darken durante o efeito */
}

/* ---------- HOW TO PLAY modal ----------------------------------*/
.help-title{
    font:700 24px/1 "Big Shoulders Text";
    letter-spacing:.6px;
    text-align:center;
    color:#FFF;
    margin: 50px 0 50px;
}

.help-layout{
    display:flex;
    justify-content:center;
    align-items:flex-start;        /* ⬅️   era flex-start              */
    gap:56px;
    padding:0 80px 40px;
    box-sizing:border-box;
    margin:0 auto; 
    padding-bottom:40px;
    padding-top:40px;
}

.help-col{
    display:flex;
    flex-direction:column;
    gap:36px;
    align-items:center;        /* centraliza todos os blocos na coluna */
    flex:1 1 0;
}

.help-divider{
    align-self:stretch;                       /* ocupa toda a altura útil   */
    border-left:1px solid rgba(255,255,255,.1); /* 25 % branco: visível     */
    width:0;                                  /* evita deslocar layout      */
    margin-top: 25px;
    margin-bottom: 25px;
}

.help-item{
    display:flex;
    align-items:center;        /* ícone e texto verticalmente alinhados */
    justify-content:center;    /* bloco completo central na coluna       */
    gap:32px;                  /* espaço entre ícone ↔ texto             */
    width:100%;
    max-width:520px;
    margin:0 auto;             /* garante centralização horizontal       */
}

.help-ico{
    flex:0 0 110px;            /* mesma “coluna” para todos os ícones    */
    display:flex;
    justify-content:center;
    align-items:center;
}

.help-txt{
    flex:0 0 250px;            /* todos os textos começam na mesma coluna*/
    color:#EDEDF2;
}


.help-txt h4{
    margin:0 0 4px;
    font:700 24px/1 "Big Shoulders Text";
    color:#FFF;
}

.help-txt p{
    margin:0;
    font:16px/1.35 "Albert Sans", sans-serif;
    text-align:left;
    word-break:break-word;
}


@keyframes btn-press {
  0%   { transform: scale(1);   }
  50%  { transform: scale(.60); }
  100% { transform: scale(1);   }
}

.circle-icon-btn.btn-press {
  animation: btn-press .10s linear;
}


@keyframes shot-click {
  0% { transform:scale(1);   }
 40% { transform:scale(.88); }
100% { transform:scale(1);   }
}
#btnScreenshot.btn-press { animation:shot-click .22s ease-out both; }

@keyframes blink-link {
  0%   { color:#FFF; }
  50%  { color:#ffffff00; }
  100% { color:#FFF; }
}

.share-url.blink {
  animation: blink-link .25s linear;   /*1 blink*/
}

.label-big{
  font-size: 24px !important;
}



.sv {
  font-family:"Big Shoulders Text",sans-serif !important;
  font-weight:700 !important;
  font-size:15px;
  letter-spacing:.05em;
  border-radius: 99999px;
  border: 1px solid #FFD701;
  /* width: 20px !important; */
  padding-left: 15px;
  padding-right: 15px;
  background-color: #FFD701;
  color: #000 !important;

}

.cl {
  font-family:"Big Shoulders Text",sans-serif !important;
  font-weight:700 !important;
  font-size:15px;
  letter-spacing:.05em;
  margin-right: 10px;
}



.thumb-hidden::-webkit-slider-thumb { opacity:0 !important; }
.thumb-hidden::-moz-range-thumb     { opacity:0 !important; }


#tlPreview{
  opacity: 0;
  transition: opacity .25s ease;   /* fade de 250 ms */
  pointer-events: auto;            /* necessário p/ capturar hover */
}

#tlPreview.visible{                 /* classe que ativa o fade-in */
  opacity: 1;
}


@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeOut { from{opacity:1} to{opacity:0} }

#tlPreview.fade-in {
    animation: fadeIn .18s ease-out forwards;
}
#tlPreview.fade-out {
    animation: fadeOut .18s ease-out forwards;
}


.tl-dot          { 
  z-index:10 !important; 
  width:16px !important; height:16px !important;
  border:2px solid #00000059 !important;
  background:#CFCFCF !important;
  transform:translateX(-50%);
}

.tl-dot.new         {           /* NEW / UNREAD            */
  background:#FFD701 !important;
  border:none   !important;
}

.tl-dot.unresolved  {           /* UNRESOLVED              */
  background:#424242 !important;
  border:2px solid #696969 !important;
  width:17px !important; height:17px !important;
}

.tl-dot.resolved    {           /* RESOLVED                */
  background:#969696 !important;
  border: none !important;
}

.tl-dot.hover,
.tl-dot.active   { 
  z-index:11 !important; 
}    /* fica acima das demais */

.tl-dot.hover {
  background:#FFD701 !important;    /* amarelo */
}

.tl-dot.active {
  background:#ffffff !important;
  width:17px !important; height:17px !important;
  border: 3px solid #FFD701 !important;
}



/* botão enquanto converte */
#btnMakeGif.converting{
  position:relative;        /* para centralizar o % sobre ele   */
  pointer-events:none;      /* evita cliques repetidos          */
}

#btnMakeGif.converting .icon-mask{ opacity:0 }   /* oculta ícone */


#btnMakeGif.gif-spin::after{           /* <— novo seletor exclusivo  */
  content:'';
  position:absolute; inset:0; margin:auto;
  width:47px; height:47px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color:#FFD701;
  border-radius:50%;
  animation:spin .9s linear infinite;
}


#btnMakeGif .gif-pct{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:600 17px/1 "Big Shoulders Text";
  color:#FFD701;
  pointer-events:none;
}

@keyframes spin{to{transform:rotate(360deg)}}



/* ========== JOB WINDOW ========== */
.job-window{
  position:fixed;                         /* fica acima de tudo */
  left:50%; top:50%; transform:translate(-50%,-50%);
  min-width:420px; max-width:520px;
  padding:28px 32px 36px;
  background:#202020b3;
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:30px;
  z-index:9998;
  font-family:"Big Shoulders Text",sans-serif;
  pointer-events: auto;
  animation:pop-in .25s ease-out;
}
@keyframes pop-in{from{scale:.7;opacity:0}to{scale:1;opacity:1}}

.job-window h3{
  margin:0 0 18px;text-align:center;
  font:700 26px/1 "Big Shoulders Text";color:#FFD701;
}
.job-window p{
  margin:0 0 0 18px;          /* espaço p/ spinner */
  font:16px/1.4 "Albert Sans",sans-serif;color:#ddd;
  text-align:center;
  margin-bottom: 20px;
}

.job-close{
  position:absolute; top:-14px; right:-14px;
  width:28px;height:28px; cursor:pointer;
  background:#696969;border-radius:50%
}

.job-close img, .chip-close{display:block;width:100%;height:100%}
.job-close:hover{scale:.86; filter:brightness(1.2)}

.job-spinner{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;                 /* mini: herdará ± via escala */
  border-radius:50%;
  margin-bottom: -20px;
}

.job-spinner{left:50%;transform:translate(-50%);}   /* centra na janela */

.spinner-mini{           /* já existia –  substitua a regra inteira   */
  position:absolute; left:14px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* NADA de  animation:spin aqui!  */
}

@keyframes spin{to{transform:rotate(360deg)}}
.job-spinner span{font:600 13px/1 "Big Shoulders Text";color:#FFD701}

.job-spinner span,
.spinner-mini span{
  position:relative; z-index:1;
  font:600 13px/1 "Big Shoulders Text"; color:#FFD701;
}
.spinner-mini span{font-size:11px}

/* anel que gira */
.job-spinner::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.25);
  border-top-color:#FFD701;
  animation:spin .9s linear infinite;
}

.spinner-mini::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#FFD701;
  animation:spin .9s linear infinite;
}

.job-resolved{
  animation:fade-in .3s ease-out forwards;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

 /* ========== JOB DOCK (chips) ========= */
#job-dock{
  position:fixed; left:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px;
  z-index:9997; pointer-events:none;
}

.job-chip{
  min-width:240px; max-width:240px;
  background:#202020b3; color:#fff;
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px; padding:8px 10px 8px 56px;
  font-family:"Big Shoulders Text" !important;
  position:relative; pointer-events:auto;
  display:flex; align-items:center; gap:8px;
  cursor:pointer; overflow:hidden;
  text-overflow:ellipsis;
  animation:slide-in .25s ease-out;
}
.job-chip .chip-title{
  font:12px/1 "Big Shoulders Text" !important;
  color:#FFD701; display:block;
}

@keyframes slide-in{from{translate:-30px 0;opacity:0}to{translate:0 0;opacity:1}}

.job-chip .text-box{        /* NOVO ­— contêiner para empilhar texto */
  display:flex; flex-direction:column;
}

.job-chip .chip-close{
  width:15px;height:15px; margin-left:auto; cursor:pointer;
  transition:transform .15s, filter .15s;
}

#job-back{
  position:fixed; inset:0;
  background:#0004; backdrop-filter:blur(4px);
  z-index:9996;
  pointer-events: auto;
  animation:fade .25s;
}
@keyframes fade{from{opacity:0}to{opacity:1}}


.job-chip .chip-close:hover{
  transform:scale(.8);
  filter:hue-rotate(45deg) brightness(1.4);
}

.job-chip.fade-out{animation:fade .3s reverse forwards}

/* 1-F ↓ blur de fundo do chip */
.job-chip{ backdrop-filter:blur(6px); }

.job-spinner.resolved::before,
.spinner-mini.resolved::before{animation:none;border:none;
  background:url(https://cdn.prod.website-files.com/65f478f3dac85c4e16b4da4e/6875928c85fc99c85a4eedf7_T_Resolved.svg) center/68% no-repeat;}


.read-toggle{
  flex:0 0 8px;                 /* impede que o flex estique o item   */
  width:8px; height:8px;        /* garante 1×1 sempre                 */
  box-sizing:content-box;       /* não deixa padding/border alterar   */
  border-radius:50%;            /* círculo perfeito                   */
  cursor:pointer;
  background:#FFD701;           /* amarelo → unread                   */
  margin-left: -5px !important;
  margin-right: -2px !important;

  /* transição suave de estado */
  transition:background-color .25s, transform .15s;
}
.read-toggle.read{background:#2B2B2B;}     /* cinza → read */

.read-toggle:hover{transform:scale(1.2);}   /* feedback opcional */


.btn-close.hidden{display:none!important}

.tl-preview{
    position:absolute;
    width:160px;              /* ← se faltar, a box colapsa em 0×0        */
    height:90px;
    bottom:45px;              /* distância vertical até o slider          */
    transform:translateX(-50%);
    pointer-events:none;
    display:none;             /* é ligado no :mouseenter                  */
    z-index:20;               /* acima da timeline                        */
}

.tl-preview video{            /* ou img                                   */
    display:block;            /* remove inline-gap                        */
    width:100%; height:100%;
    object-fit:contain;
    border:1px solid rgba(255, 255, 255, 0.5);
    border-radius:8px;
    background:#000;          /* fallback caso o vídeo não tenha frame    */
}

/* time-code sempre FORA da caixa preta --------------------------------- */
.tl-tc{
    position:absolute;
    top:100%;                 /* logo abaixo                              */
    left:50%; transform:translate(-50%,4px);
    font:16px/1 "Big Shoulders Text";
    color:#fff;
    pointer-events:none;
}

#helpScroll {
  gap: 60px !important;
  margin-right: 20px !important;
  margin-left: 20px !important;
  margin-bottom: 70px !important;
}




#modalWelcome{
  backdrop-filter:blur(12px);
  z-index: 1 !important;
}
#modalWelcome .welcome-box{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  width:100%;  height: 100%;
  margin-top: 70px; margin-bottom: 45px;
}
#modalWelcome .welcome-icon{width:100px;height:100px}
#modalWelcome .welcome-title{font: 24px 'Big Shoulders Text',sans-serif;color:#fff;text-align:center}
#modalWelcome .welcome-name{font:800 64px 'Big Shoulders Text',sans-serif;color:#fff;text-align:center;line-height:1; margin-top: -20px !important;}
#btnWelcomeStart{
  width: 100px !important; height: 60px !important;
  border-radius:12px;border:1px solid rgba(255,255,255,.5);
  background:transparent;font:20px 'Big Shoulders Text',sans-serif;color:rgba(255,255,255,.7);
  cursor:pointer;
  transition:transform .15s
}
#btnWelcomeHelp{
  width: 115px !important; height: 42px !important;
  border-radius:8px;border:1px solid rgba(255,255,255,.5);
  background:transparent;font:20px 'Big Shoulders Text',sans-serif;color:rgba(255,255,255,.7);
  cursor:pointer;
  transition:transform .15s
}
#btnWelcomeStart:hover,#btnWelcomeHelp:hover{transform:scale(1.06)}
#btnWelcomeStart,#btnWelcomeHelp :active{transform:scale(.96)}
#modalWelcome .welcome-sep{width:90%;height:1px;background:rgba(255,255,255,.3);border:none}
#modalWelcome .welcome-sub{font: 22px 'Big Shoulders Text',sans-serif;color:#fff;text-align:center}
@keyframes welcome-out{to{opacity:0; backdrop-filter:blur(0px); transform:translateY(25px)}}


.chkbox{
    appearance:none;
    width:18px;height:18px;
    border-radius:4px;
    background:#FFD701;
    border:1px solid #0000008c;
    display:flex;align-items:center;justify-content:center; /* ★ garante centro */
    cursor:pointer;transition:background .15s;
    position:relative;
}
.chkbox::after{
    content:'';
    width:8px;height:4px;                /* ligeiro ajuste */
    border:2px solid #000;
    border-top:none;border-right:none;
    transform:translate(0px, -1px) rotate(-45deg); /* centraliza visualmente */
}
.chkbox:not(:checked){
    background:#2B2B2B;          /* cinza escuro */
    border:1px solid #ffffff8c;
}
.chkbox:not(:checked)::after{opacity:0}

.chkbox-label{
    margin-left:6px;
    font:700 16px "Big Shoulders Text";
    color:#fff;user-select:none;
}

/* fade-top / bottom reaproveita as variáveis do mini-ROS */
.comment-scroll{--topFade:22px;--botFade:22px;}


#inpMsg{
  border-bottom: 30px solid rgba(0, 0, 0, 0) !important;
}



.camera-selector-simple{
    position:relative;                   /* para o indicador absoluto  */
    display:flex;flex-direction:column;gap:4px;align-items:center;
}

.cam-option{
    width:120px;height:26px;
    display:flex;justify-content:center;align-items:center;
    font: 20px "Big Shoulders Text",sans-serif;
    color:#fff;cursor:pointer;position:relative;z-index:1;
    border: none !important;
}

.cam-option.selected{ border:1px solid rgba(255,255,255,.15); }

.cam-option:hover{color:#FFD701 !important;}

.cam-indicator{
    position:absolute;left:0;
    width:120px;height:26px;border-radius:13px;
    border:1px solid rgba(255,255,255,.15);
    transition:transform .25s cubic-bezier(.4,.2,.2,1);   /* easing suave */
    pointer-events:none;z-index:0;                        /* fica atrás   */
}

.cam-indicator.line{
    height:1px;
    border:none;
    background:rgba(255,255,255,.15);
    border-radius:0;
}


#btnCameraSettings {left:15px;  cursor:pointer; }

.cam-wrap{
  /* evita que o justify-between empurre o seletor pro meio */
  flex-shrink: 0 !important;          /* mantém largura fixa            */
}

.cam-wrap .circle-icon-btn{
  /* centraliza perfeitamente o ✓ dentro da caixa */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#btnCameraView.selected {
  border:2px solid #FFD701 !important;
}



.ros-mini-fs {
  /* usa o mesmo sistema de mask dos outros ícones */
  width:0px; height:0px;
  background:#CFCFCF;               /* cor normal */
  -webkit-mask: var(--icon) center/contain no-repeat;
          mask: var(--icon) center/contain no-repeat;

  margin-left:0px;                 /* empurra para a direita */
  margin-right:0px;                 /* respiro da borda */
  opacity:0;                        /* escondido por padrão */
  pointer-events:none;
  flex-shrink: 0 !important;
}
.ros-item:hover .ros-mini-fs {
  opacity:1; pointer-events:auto;   /* só aparece no hover */
  width:15px !important; height:15px !important;
  margin-left:10px !important;                 /* empurra para a direita */
  margin-right:10px !important;                 /* respiro da borda */
}
.ros-mini-fs:hover { background:#FFD701; }  /* amarelo no hover */