.TDexonWinFloat
{
   position: fixed;
   background-color: #ffffff;
   border-radius: 12px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
   padding: 0;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   border: 1px solid rgba(0, 0, 0, 0.08);
   overflow: hidden;
   z-index: 9500;
   backdrop-filter: blur(5px);
   transform-origin: center;
   animation: winboxAppear 0.3s forwards;
}

@keyframes winboxAppear
{
   from 
   { 
      opacity: 0; 
      transform: scale(0.95); 
   }
   to 
   { 
      opacity: 1; 
      transform: scale(1); 
   }
}

.TDexonWinFloat:hover
{
   box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
}

.TDexonWinFloat.active
{
   border-color: rgba(255, 0, 0, 0.5);
}

.TDexonWinFloat .winbox-header
{
   display: flex;
   align-items: center;
   padding: 12px 16px;
   background: linear-gradient(135deg, #403187 0%, #5a48b0 100%);
   color: white;
   font-weight: 600;
   cursor: move;
   user-select: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.TDexonWinFloat .winbox-title
{
   flex: 1;
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.TDexonWinFloat .winbox-controls
{
   display: flex;
   gap: 8px;
}

.TDexonWinFloat .winbox-control
{
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.15);
   color: white;
   cursor: pointer;
   transition: all 0.2s ease;
}

.TDexonWinFloat .winbox-control:hover
{
   background-color: rgba(255, 255, 255, 0.3);
   transform: scale(1.1);
}

.TDexonWinFloat .winbox-control.minimize:hover
{
   background-color: #ffc107;
   color: #333;
}

.TDexonWinFloat .winbox-control.maximize:hover
{
   background-color: #4CAF50;
   color: #fff;
}

.TDexonWinFloat .winbox-control.close:hover
{
   background-color: #F44336;
   color: #fff;
   transform: rotate(90deg) scale(1.1);
}

.TDexonWinFloat .winbox-body
{
   padding: 20px;
   overflow: auto;
   max-height: calc(100% - 50px);
   position: relative;
}

.TDexonWinFloat .winbox-resize
{
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    bottom: 0;
    cursor: se-resize;
    z-index: 9501;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.TDexonWinFloat .winbox-resize::before
{
   content: "";
   width: 10px;
   height: 10px;
   background: linear-gradient(135deg, transparent 0%, transparent 50%, #ff1a1a 50%, #ff1a1a 60%, transparent 60%, transparent 70%, #ff1a1a 70%, #ff1a1a 80%, transparent 80%, transparent 90%, #ff1a1a 90%);
   border-radius: 0 0 2px 0;
}

.TDexonWinFloat .winbox-resize:hover
{
   opacity: 0.8;
}

.TDexonWinFloat.maximized .winbox-resize
{
   display: none;
}

.TDexonWinFloat.minimized
{
   height: 48px !important;
   width: 240px !important;
   overflow: hidden;
}

.TDexonWinFloat.minimized .winbox-body
{
   display: none;
}

.TDexonWinFloat.maximized
{
   width: 100% !important;
   height: 100% !important;
   top: 0 !important;
   left: 0 !important;
   border-radius: 0;
}

.TDexonGUI_WinBoxAllFront
{
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 9000;
   background-color: rgba(0, 0, 0, 0.35);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-weight: 700;
   color: #ffffff;
   backdrop-filter: blur(5px);
   transition: all 0.3s ease;
   animation: fadeInBackdrop 0.3s forwards;
}

@keyframes fadeInBackdrop
{
   from { opacity: 0; }
   to { opacity: 1; }
}

.TDexonGUI_WinBoxSpinner
{
   position: relative;
   border: 6px solid rgba(255, 1, 1, 0.3);
   box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
   border-radius: 50%;
   border-top: 6px solid #ffe46a;
   width: 70px;
   height: 70px;
   animation: TDexonGUI_WinBoxSpinner 1s cubic-bezier(0.4, 0.1, 0.2, 1) infinite;
   margin: 10px;
}

@keyframes TDexonGUI_WinBoxSpinner
{
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

.TDexonGUI_WinBoxSpinnerText
{
   margin-top: 20px;
   font-size: 18px;
   text-align: center;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   animation: pulseText 2s infinite;
}

@keyframes pulseText
{
   0% { opacity: 0.7; }
   50% { opacity: 1; }
   100% { opacity: 0.7; }
}

.TDexonGUI_MessageBox
{
   min-width: 400px;
   max-width: 800px;
   background-color: #ffffff;
   border-radius: 12px;
   box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
   margin: 10px;
   overflow: hidden;
   transition: all 0.3s ease;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 9500;
   animation: messageBoxAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes messageBoxAppear
{
   from { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
   to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.TDexonGUI_MessageBoxHeader
{
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, #873131 0%, #ff1a1a 100%);
    color: white;
    font-weight: 600;
}

.TDexonGUI_MessageBoxHeader > span
{
   flex: 1;
   text-align: center;
   font-size: 18px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.TDexonGUI_MessageBoxClose
{
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.2);
   color: white;
   cursor: pointer;
   transition: all 0.3s ease;
}

.TDexonGUI_MessageBoxClose:hover
{
   background-color: rgba(255, 255, 255, 0.4);
   transform: rotate(90deg);
}

.TDexonGUI_MessageBoxContent
{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   padding: 24px;
   background-color: #ffffff;
   color: #333333;
}

.TDexonGUI_MessageBoxContent > i
{
   min-height: 70px;
   font-size: 70px;
   padding: 10px;
   color: #403187;
   opacity: 0.8;
   animation: iconPulse 2s infinite;
}

@keyframes iconPulse
{
   0% { transform: scale(1); }
   50% { transform: scale(1.05); }
   100% { transform: scale(1); }
}

.TDexonGUI_MessageBoxContent > span
{
   flex: 1;
   text-align: center;
   padding: 10px;
   font-size: 16px;
   line-height: 1.6;
}

.TDexonGUI_MessageBoxContentExtra
{
   flex-basis: 100%;
   padding: 0 20px 20px;
}

.TDexonGUI_MessageBoxExtraMsg
{
   display: block;
   position: relative;
   max-height: 150px;
   min-height: 30px;
   padding: 16px;
   overflow-y: auto;
   background-color: rgba(0, 0, 0, 0.03);
   border-radius: 8px;
   font-size: 15px;
   line-height: 1.6;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.TDexonGUI_MessageBoxToolbar
{
   display: flex;
   justify-content: flex-end;
   padding: 16px 20px;
   background-color: rgba(0, 0, 0, 0.03);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   gap: 12px;
}

.TDexonGUI_MessageBoxToolbar button
{
   padding: 10px 20px;
   border-radius: 6px;
   border: none;
   background-color: #403187;
   color: white;
   cursor: pointer;
   transition: all 0.3s ease;
   font-weight: 500;
   font-size: 15px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.TDexonGUI_MessageBoxToolbar button:hover
{
   background-color: #342769;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.TDexonGUI_MessageBoxToolbar button.secondary
{
   background-color: #f0f0f0;
   color: #333;
}

.TDexonGUI_MessageBoxToolbar button.secondary:hover
{
   background-color: #e0e0e0;
}

.TDexonGUI_MessageBox.info i
{
   color: #2196F3;
}

.TDexonGUI_MessageBox.success i
{
   color: #4CAF50;
}

.TDexonGUI_MessageBox.warning i
{
   color: #FF9800;
}

.TDexonGUI_MessageBox.error i
{
   color: #F44336;
}

@keyframes fadeIn
{
   from { opacity: 0; transform: translate(-50%, -60%); }
   to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes fadeOut
{
   from { opacity: 1; transform: translate(-50%, -50%); }
   to { opacity: 0; transform: translate(-50%, -40%); }
}

.TDexonGUI_MessageBox.show
{
   animation: fadeIn 0.3s forwards;
}

.TDexonGUI_MessageBox.hide
{
   animation: fadeOut 0.3s forwards;
}

@media (max-width: 768px)
{
   .TDexonGUI_MessageBox
   {
      min-width: 90%;
      max-width: 95%;
      margin: 10px auto;
   }
   
   .TDexonGUI_MessageBoxContent
   {
      flex-direction: column;
   }
   
   .TDexonGUI_MessageBoxContent > i
   {
      margin-bottom: 15px;
   }
   
   .TDexonGUI_MessageBoxToolbar
   {
      flex-direction: column-reverse;
   }
   
   .TDexonGUI_MessageBoxToolbar button
   {
      width: 100%;
      margin-bottom: 8px;
   }
   
   .TDexonWinFloat
   {
      width: 95% !important;
      max-height: 90% !important;
   }
}