/* =========================================================

   RESET + GENEL

========================================================= */

*{

    box-sizing:border-box;

}



html, html,

body{

    width:100%;

    height:100%;

    min-width:0;

    min-height:0;

}



body{

    margin:0;

    padding:0;

    font-family:Arial, sans-serif;

    color:#fff;



    display:flex;

    flex-direction:column;



    width:100%;

    height:100%;

    min-width:0;

    min-height:0;



    /* Tema yoksa fallback */

    background-color:#0b1220;



    /* Tema gelirse düzgün gözüksün */

    background-size:cover;

    background-position:center;

    background-attachment:fixed;



    /* iframe çalışma alanının dışına body scroll çıkmasın */

    overflow:hidden !important;

}



/* =========================================================

   HEADER (CAM GÖRÜNÜM)

========================================================= */

header{

    display:flex;

    justify-content:space-between;

    align-items:center;



    width:100%;

    height:50px;

    min-height:50px;

    flex:0 0 50px;



    box-sizing:border-box;

    padding:0 10px;

    line-height:50px;



    /* CAM EFEKTİ */

    background:rgba(0, 0, 0, 0.35);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);



    border-bottom:1px solid rgba(255,255,255,0.08);

    box-shadow:0 4px 20px rgba(0,0,0,0.2);



    color:#fff;

}





header button{

    padding:6px 12px;

    border:none;

    border-radius:6px;

    background:#06b6d4;



    /* ✅ BUTON YAZISI BEYAZ (Tema / Banlılar / Giriş) */

    color:#fff !important;



    cursor:pointer;

    font-weight:800;

}



.headerBtns{

    display:flex;

    align-items:center;

    gap:8px;

}



/* =========================================================

   CONTAINER (TEMA BURADA)

   -> chat + userPanel aynı temayı görür

========================================================= */

/* ANA CONTAINER (TEMA BURAYA BASILIYOR) */

/* CONTAINER full ekran, footer/radio olmadan */

.container{

    display:flex;

    flex-direction:row;



    width:100%;

    height:auto;

    flex:1 1 auto;



    min-width:0;

    min-height:0;



    box-sizing:border-box;

    overflow:hidden;



    /* Tema veya default background */

    background-position:center center !important;

    background-repeat:no-repeat;

    background-size:100% 100%;

    background-color:#0b0f14;



    gap:12px;

    padding:10px;

}





/* =========================================================

   CHAT AREA

========================================================= */

#chatArea{

    flex:1;

    display:flex;

    flex-direction:column-reverse;

    min-width:0;



    /* container içinde full yükseklik */

    height: 100% !important;



    /* chatArea taşmasın */

    overflow: hidden !important;



    background: transparent !important;



    /* ✅ chat sağdan biraz daralsın */

    padding-right:6px;

}



/* Mesajların aktığı alan */

#chatBox {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 0 10px 10px 10px;

    background: transparent !important;
    border: none !important;
    margin-bottom: 8px;
}



/* Mesaj satırı (baloncuk kesinlikle yok) */

.msg{

    margin-bottom:6px;

    padding:0 !important;

    background: transparent !important;

    border:none !important;

    border-radius:0 !important;

    box-shadow:none !important;



    /* ✅ uzun mesajda kırılma düzgün olsun */

    max-width:100% !important;

}



/* mesaj metinleri */

.msg strong,

.msg span{

    text-shadow: 0 1px 2px rgba(0,0,0,0.75);

}



/* ✅ UZUN MESAJLARDA SCROLL ÇIKMASIN / ALT SATIRA KIRILSIN */

.msg span{

    white-space: pre-wrap !important;

    word-break: break-word !important;

    overflow-wrap: anywhere !important;

}



/* =========================================================

   COMPOSER (MESAJ YAZMA ALANI)

========================================================= */

#composer{

    display:flex;

    gap:6px;

    margin-bottom:8px;

    align-items:center;

    padding:8px;

position:relative;

    flex-shrink:0;



    border-radius:12px;



    background: rgba(0,0,0,0.14) !important;

    border: 1px solid rgba(255,255,255,0.08);



    /* blur kapalı */

    backdrop-filter: none !important;

}



#msgInput{

    flex: 1 1 auto;

    padding: 8px 10px;

    border-radius:10px;

    outline:none;



    background: rgba(0,0,0,0.22);

    border: 1px solid rgba(255,255,255,0.10);

    color:#fff;

}



#msgInput::placeholder{

    color: rgba(255,255,255,0.65);

}



#chatTools{

    display:flex;

    gap:6px;

    margin-left:4px;

    flex-shrink:0;

}



#chatTools button,

#chatTools input[type=color]{

    padding:6px 8px;

    cursor:pointer;

    border:none;

    border-radius:10px;



    background: transparent;

    border: 1px solid rgba(255,255,255,0.08);

    color:#fff;

}



#chatTools button.active{

    background: rgba(255,255,255,0.18);

}



#sendBtn{

    margin-left:4px;

    padding:8px 12px;

    border:none;

    cursor:pointer;

    border-radius:10px;

    font-weight:900;

    background:#06b6d4;



    /* Gönder yazısı beyaz */

    color:#fff !important;

}





.emojiBtn{

    margin:2px;

    cursor:pointer;



    background: transparent;

    border: 1px solid rgba(255,255,255,0.08);



    color:#fff;

    font-size:16px;

    border-radius:10px;

    padding:6px 8px;

}



/* =========================================================

   USER PANEL

========================================================= */

#userPanel{

    width:250px;

    overflow-y:auto !important;

    padding:0;



    height: 100% !important;





    /* blur kapalı */

    backdrop-filter: none !important;

}



/* Online başlık ayrı şerit */

#userPanel h2{

    margin:0;

    padding:10px 10px;

    font-size:14px;

    font-weight:900;



    background: rgba(0,0,0,0.22);

    border-bottom: 1px solid rgba(255,255,255,0.08);



    position: sticky;

    top:0;

    z-index:2;

}



/* Online satır (baloncuk yok, FLAT) */

/* Online satır: düz liste gibi */

.user{

    display:flex;

    flex-direction:row;      /* F + nick yan yana */

    align-items:center;

    gap:6px;



    padding:4px 10px;        /* daha flat */

    cursor: default;



    background: transparent !important;

    border-radius:0 !important;

    margin:0 !important;

    box-shadow:none !important;



    border-bottom: none;     /* kutu hissi kalksın */

}



/* nick satırı */

.user strong,

.user span{

    text-shadow: 0 1px 2px rgba(0,0,0,0.85);

}



/* strong artık tek satır */

.user strong{

    display:inline-flex;

    align-items:center;

    gap:6px;

    line-height:1.2;

    font-size:14px;

}



/* F BADGE */

.fBadge{

    display:inline-flex;

    align-items:center;

    justify-content:center;



    width:18px;

    height:18px;



    border-radius:5px;

    background:#06b6d4;

    color:#ffffff !important;



    font-weight:900;

    font-size:12px;

    line-height:1;



    flex-shrink:0; /* F küçülmesin */

}



/* =========================================================

   MOD MENU

========================================================= */

/* =========================================================

   SAĞ PANEL MOD MENU

========================================================= */



.user-menu{
    position:fixed;
    left:0;
    top:0;

    width:220px;
    max-width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);

    padding:8px;

    display:flex;
    flex-direction:column;
    gap:6px;

    background:rgba(15,23,42,.98);
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.48);

    z-index:2147483635;
    overflow-y:auto;
    box-sizing:border-box;
}

.user-menu.hidden{
    display:none;
}

.user-menu:not(.hidden){
    display:flex;
}

.user-menu-title{
    padding:7px 9px 9px;
    margin-bottom:2px;

    color:#fff;
    font-size:13px;
    font-weight:800;
    line-height:1.2;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    border-bottom:1px solid rgba(255,255,255,.12);
}

.user-menu button{
    width:100%;
    padding:8px 10px;

    border:none;
    border-radius:7px;

    background:rgba(255,255,255,.06);
    color:#fff;

    font-size:13px;
    font-weight:700;
    line-height:1.2;

    cursor:pointer;
    text-align:left;
}

.user-menu button:hover{
    background:rgba(255,255,255,.12);
}

/* =========================================================

   CLEAR CHAT BUTTON (CHAT TOOLS İÇİNDE)

========================================================= */

#clearChatBtn{

    cursor:pointer;

    padding:6px 10px;

    border:none;

    border-radius:10px;

    background: #06b6d4;

    background: rgba(255,255,255,0.12);

    color:#fff !important;



    font-size:14px;

    font-weight:800;

}



#clearChatBtn:hover{

    background: rgba(255,255,255,0.18);

}



/* =========================================================

   LOGIN POPUP

========================================================= */

#loginOverlay{

    display:none;

    position: fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background: rgba(0,0,0,0.6);

    backdrop-filter: blur(5px);

    z-index: 9999;

    justify-content: center;

    align-items: center;

}



#loginPopup{

    background: #0b1220;

    padding: 25px;

    border-radius: 12px;

    width: 320px;

    max-width: 90%;

    color: #fff;

    display: flex;

    flex-direction: column;

    gap: 10px;

    opacity: 0;

    transform: scale(0.8);

    transition: all 0.3s ease;

}



#loginPopup.show{

    opacity: 1;

    transform: scale(1);

}



#loginPopup input{

    padding:10px;

    border-radius:10px;

    border:1px solid rgba(255,255,255,0.10);

    background: transparent;

    color:#fff;

    outline:none;

}



#loginPopup button{

    padding:10px;

    border:none;

    border-radius:10px;

    background:#06b6d4;

    color:#fff !important;

    cursor:pointer;

    font-weight:900;

}



#loginPopup a{

    color:#06b6d4 !important;

    text-decoration:none;

    font-size:13px;

}



#loginError{

    color:#ff4d4d;

    font-size:13px;

}



/* =========================================================

   RADIO BAR

========================================================= */

#radioBar{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:space-between;



    background:#0b1220;

    color:#fff;



    padding:8px 12px;



    position:fixed;

    bottom:0;

    left:0;

    right:0;



    z-index:1000;

    height:60px;

}



#radioBar .controls{

    display:flex;

    align-items:center;

    gap:6px;

}



#radioBar .controls button,

#radioBar .controls .mute{

    cursor:pointer;

    padding:6px 10px;

    border:none;

    border-radius:8px;

    background:#06b6d4;

    color:#fff !important;

    font-weight:900;

}



#radioBar .mute{

    font-size:18px;

}



/* =========================================================

   THEME RIGHT PANEL

========================================================= */

#themeSideOverlay{

    position: fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background: rgba(0,0,0,0.35);

    z-index: 99998;

    display:none;

}



#themeSidePanel{

    position: fixed;

    top:0;

    right:-380px;

    width:380px;

    max-width: 92%;

    height:100%;

    background: rgba(10,16,28,0.95);

    backdrop-filter: blur(8px);

    z-index: 99999;

    transition: right 0.25s ease;

    border-left: 1px solid rgba(255,255,255,0.08);

    display:flex;

    flex-direction: column;



    color:#fff !important;

}



#themeSidePanel.open{

    right:0;

}



#themeSidePanel *{

    color:#fff !important;

}



.themeHeader{

    display:flex;

    justify-content: space-between;

    align-items:center;

    padding: 12px 12px;

    border-bottom: 1px solid rgba(255,255,255,0.08);

    background: rgba(0,0,0,0.15);

}



.themeTitle{

    font-weight: 900;

    font-size: 14px;

}



#themeSideClose{

    background: transparent;

    border:none;

    color:#fff !important;

    font-size: 16px;

    cursor:pointer;

}



.themeBody{





flex:1;



padding:15px;



overflow-y:auto;



overflow-x:hidden;



min-height:0;





}



.themeRow{

    display:flex;

    gap:6px;

}



#themeUrl{

    flex:1;

    padding: 8px;

    border-radius: 10px;

    background: rgba(0,0,0,0.35);

    border: 1px solid rgba(255,255,255,0.08);

    color:#fff !important;

    outline:none;

}



#themeUrl::placeholder{

    color: rgba(255,255,255,0.65) !important;

}



#themeSaveBtn{

    padding: 8px 10px;

    border:none;

    border-radius: 10px;

    background:#06b6d4;

    color:#fff !important;

    font-weight:900;

    cursor:pointer;

}



#themeDefaultBtn{

    padding: 8px 10px;

    border:none;

    border-radius: 10px;

    background: rgba(255,255,255,0.12);

    color:#fff !important;

    font-weight:900;

    cursor:pointer;

}



#themeMsg{

    margin-top: 8px;

    font-size: 13px;

    color:#ffcc66 !important;

}



.themeListTitle{

    margin-top: 14px;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight:900;

    opacity:0.9;

}



#themeList{

    display:flex;

    flex-direction: column;

    gap:8px;

}



.themeItem{

    background: rgba(0,0,0,0.22);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 12px;

    padding: 10px;

}



.themeThumb{

    width:100%;

    height:120px;

    border-radius: 10px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    border: 1px solid rgba(255,255,255,0.06);

}



.themeActions{

    display:flex;

    gap:6px;

    margin-top: 8px;

}



.themeActions button{

    flex:1;

    padding: 7px 8px;

    border:none;

    border-radius: 10px;

    cursor:pointer;

    font-weight:900;

}



.btnActivate{

    background:#06b6d4;

    color:#fff !important;

}

.btnDefault{

    background:#06b6d4;

    color:#fff !important;

}

.btnDelete{

    background: rgba(255,80,80,0.9);

    color:#fff !important;

}



/* =========================================================

   BAN PANEL

========================================================= */

#banSideOverlay{

    position: fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background: rgba(0,0,0,0.35);

    z-index: 99996;

    display:none;

}



#banSidePanel{

    position: fixed;

    top:0;

    right:-380px;

    width:380px;

    max-width: 92%;

    height:100%;

    background: rgba(10,16,28,0.95);

    backdrop-filter: blur(8px);

    z-index: 99997;

    transition: right 0.25s ease;

    border-left: 1px solid rgba(255,255,255,0.08);

    display:flex;

    flex-direction: column;



    color:#fff !important;

}



#banSidePanel.open{

    right:0;

}



#banSidePanel *{

    color:#fff !important;

}



.banHeader{

    display:flex;

    justify-content: space-between;

    align-items:center;

    padding: 12px 12px;

    border-bottom: 1px solid rgba(255,255,255,0.08);

    background: rgba(0,0,0,0.15);

}



.banTitle{

    font-weight: 900;

    font-size: 14px;

}



#banSideClose{

    background: transparent;

    border:none;

    color:#fff !important;

    font-size: 16px;

    cursor:pointer;

}



.banBody{

    padding: 12px;

    overflow-y:auto;

    flex:1;

}



#banList{

    display:flex;

    flex-direction: column;

    gap:8px;

}



.banItem{

    background: rgba(0,0,0,0.22);

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 12px;

    padding: 10px;

    display:flex;

    align-items:center;

    justify-content: space-between;

    gap:10px;

}



.banNick{

    font-weight:900;

    font-size: 13px;

    overflow:hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    max-width: 200px;

}



.banBtn{

    padding: 7px 10px;

    border:none;

    border-radius: 10px;

    cursor:pointer;

    font-weight:900;

    background:#06b6d4;

    color:#fff !important;

    font-size: 12px;

}



.banEmpty{

    opacity:.75;

    font-size:13px;

    color:#c9d3dd !important;

}

.colorPickerWrap{

    position:relative;

    display:flex;

    align-items:center;

}



#colorPicker{

    position:absolute;

    opacity:0;

    width:0;

    height:0;

    pointer-events:none;

}



#colorTextBtn{

    height:34px;

    padding:0 14px;



    border:none;

    border-radius:10px;



    background:rgba(255,255,255,0.08);



    color:#fff;



    cursor:pointer;



    font-size:13px;

    font-weight:600;

}



#colorTextBtn:hover{

    background:rgba(255,255,255,0.16);

}

/* =========================================================

   RESPONSIVE

========================================================= */

@media (max-width: 768px){

    .container{

        flex-direction:column;

        gap:10px;

        padding:8px;

    }



    #userPanel{

        width:100%;

        height:200px !important;

    }



    #chatArea{

        height: calc(100vh - 50px - 60px - 210px) !important;

        padding-right:0;

    }

}

/* =========================================================

THEME EDITOR

========================================================= */



.themeEditorButtons{

display:flex;

flex-direction:column;

gap:8px;

margin-top:14px;

}



.themeEditorButtons button{

width:100%;

height:40px;



border:none;

border-radius:10px;



cursor:pointer;



background:rgba(255,255,255,0.08);

color:#fff;



font-size:13px;

font-weight:800;



}





/* =========================================================

THEME WIDGET SYSTEM

========================================================= */



.themeWidget{



    position:relative;



    min-width:0;



}



/* =========================================================

EDIT MODE

========================================================= */



.themeEditMode .themeWidget{



    position:absolute !important;



    z-index:9999;



    outline:2px dashed #06b6d4;



    outline-offset:2px;



}



/* =========================================================

WIDGET SYSTEM

========================================================= */



#chatContainer{



    position:relative;



    width:100%;

    height:calc(100vh - 50px);



    overflow:hidden;

}



/* USER WIDGET */



#widgetUsers{



    position:absolute;



    left:10px;

    top:55px;



    width:clamp(220px, 18vw, 320px);



    height:calc(100vh - 120px);



    min-height:300px;



    box-sizing:border-box;

}

/* CHAT WIDGET */



#widgetChat{



    position:absolute;



    left:calc(clamp(220px, 18vw, 320px) + 30px);



    top:50px;



    width:calc(

        100% - clamp(220px, 18vw, 320px) - 50px

    );



    height:calc(100vh - 120px);



    display:flex;



    flex-direction:column;

}



/* =========================================================

CHAT AREA

========================================================= */



#chatArea{



    width:100%;

    height:100%;



    display:flex;



    flex-direction:column-reverse;



    overflow:visible !important;

}



/* =========================================================

CHATBOX

========================================================= */



#chatBox {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0;
}

/* =========================================================

COMPOSER

========================================================= */



#composer{

position:relative;

    display:flex;



    align-items:center;



    gap:6px;



    flex-wrap:nowrap;

}



/* INPUT */



#msgInput{



    flex:1;



    min-width:0;

}



/* TOOLS */



#chatTools{



    display:flex;



    gap:6px;



    flex-shrink:0;

}



/* SEND */



#sendBtn{



    flex-shrink:0;

}



/* =========================================================

THEME EDIT MODE

========================================================= */



.themeEditMode .themeWidget{



    outline:2px dashed #06b6d4;



    outline-offset:2px;



    cursor:move;

}



/* =========================================================

RESIZE HANDLE

========================================================= */



.resizeHandle{



    position:absolute;



    width:18px;

    height:18px;



    right:-9px;

    bottom:-9px;



    border-radius:50%;



    background:#06b6d4;



    border:2px solid #fff;



    cursor:nwse-resize;



    z-index:999999999;



    display:none;



    pointer-events:auto !important;

}



/* EDIT MODE */



.themeEditMode .resizeHandle{



    display:block;

}

/* =========================================================

MINI WIDGET

========================================================= */



.miniWidget{



    position:absolute;



    display:flex;



    align-items:center;



    justify-content:center;

}



/* =========================================================

EDIT MODE

========================================================= */



.themeEditMode .miniWidget{



    outline:2px dashed #06b6d4;



    outline-offset:2px;

}



/* =========================================================

RESIZE HANDLE

========================================================= */



.miniResize{



    position:absolute;



    width:14px;

    height:14px;



    right:-7px;

    bottom:-7px;



    border-radius:50%;



    background:#06b6d4;



    border:2px solid #fff;



    cursor:nwse-resize;



    z-index:99999;



    display:none;

}



.themeEditMode .miniResize{



    display:block;

}

#widgetEmoji{



    position:absolute;



    top:18px;



    right:465px;



    width:50px;

    height:40px;



    z-index:500;

}



#widgetEmoji button{



    width:100%;

    height:100%;



    padding:6px 8px;



    cursor:pointer;



    border:none;



    border-radius:0px;



    background: transparent;



    border: 1px solid rgba(255,255,255,0.08);



    color:#fff;

}



#widgetBold{



    position:absolute;



    top:18px;



    right:400px;



    width:60px;

    height:40px;



    z-index:500;

}



#widgetBold button{



    width:100%;

    height:100%;



    padding:6px 8px;



    cursor:pointer;



    border:none;



    border-radius:0px;



    background: transparent;



    border: 1px solid rgba(255,255,255,0.08);



    color:#fff;

}

#widgetItalic{



    position:absolute;



    top:18px;



    right:335px;



    width:58px;

    height:40px;



    z-index:500;



    display:flex;



    align-items:center;

    justify-content:center;

}



#widgetItalic button{



    width:100%;

    height:100%;



    padding:6px 8px;



    cursor:pointer;



    border:none;



    border-radius:0px;



    background: transparent;



    border: 1px solid rgba(255,255,255,0.08);



    color:#fff;



    font-size:13px;

    font-weight:700;



    display:flex;



    align-items:center;

    justify-content:center;



    box-sizing:border-box;

}

#widgetFontUp{



    position:absolute;



    top:18px;



    right:278px;



    width:52px;

    height:40px;



    z-index:500;



    display:flex;



    align-items:center;

    justify-content:center;

}



#widgetFontUp button{



    width:100%;

    height:100%;



    padding:6px 8px;



    cursor:pointer;



    border:none;



    border-radius:0px;



    background: transparent;



    border: 1px solid rgba(255,255,255,0.08);



    color:#fff;



    font-size:13px;

    font-weight:700;



    display:flex;



    align-items:center;

    justify-content:center;



    box-sizing:border-box;

}

#widgetFontDown{



    position:absolute;



    top:18px;



    right:220px;



    width:52px;

    height:40px;



    z-index:500;



    display:flex;



    align-items:center;

    justify-content:center;

}



#widgetFontDown button{



    width:100%;

    height:100%;



    padding:6px 8px;



    cursor:pointer;



    border:none;



    border-radius:0px;



    background: transparent;



    border: 1px solid rgba(255,255,255,0.08);



    color:#fff;



    font-size:13px;

    font-weight:700;



    display:flex;



    align-items:center;

    justify-content:center;



    box-sizing:border-box;

}

#widgetColor{



    position:absolute;



    top:18px;



    right:150px;



    width:65px;

    height:40px;



    z-index:500;



    display:flex;



    align-items:center;

    justify-content:center;

}



#widgetColor .colorPickerWrap{



    position:relative;



    width:100%;

    height:100%;

}



#widgetColor button{



    width:100%;

    height:100%;



    cursor:pointer;



    border:none;



    border-radius:0px;



    background: transparent;



    border:1px solid rgba(255,255,255,0.08);



    color:#fff;



    font-size:13px;

    font-weight:700;

}

#widgetInput{



    position:absolute;



    left:275px;



   top:18px;



    width:470px;



    height:20px;



    z-index:500;

}



#widgetInput input{



    width:100%;

    height:100%;



    padding:8px 12px;



    border-radius:10px;



    outline:none;



    background: rgba(0,0,0,0.22);



    border: 1px solid rgba(255,255,255,0.10);



    color:#fff;



    font-size:14px;



    box-sizing:border-box;

}



#widgetInput input::placeholder{



    color: rgba(255,255,255,0.65);

}

#widgetLogin,

#widgetVoice{



    position:absolute;



    top:18px;



    width:60px;

    height:40px;



    z-index:500;

}



#widgetLogin{



    right:20px;

}



#widgetVoice{



    right:85px;

}



#widgetLogin button,

#widgetVoice button{



    width:100%;

    height:100%;



    border:none;



    border-radius:00px;



    cursor:pointer;



    background: transparent;



    border:1px solid rgba(255,255,255,0.08);



    color:#fff;



    font-size:14px;



    font-weight:700;

}

/* =========================================================

DRAGGABLE WIDGET BUTTONS — COLORLESS

========================================================= */



#widgetBold button,

#widgetItalic button,

#widgetFontUp button,

#widgetFontDown button,

#widgetColor button,

#widgetEmoji button,

#widgetVoice button,

#widgetLogin button{



    background:transparent;

    border:1px solid transparent;

    color:#fff;



    transition:

        background .16s ease,

        border-color .16s ease,

        box-shadow .16s ease,

        opacity .16s ease;

}



/* Only a very subtle indication while hovering */

#widgetBold button:hover,

#widgetItalic button:hover,

#widgetFontUp button:hover,

#widgetFontDown button:hover,

#widgetColor button:hover,

#widgetEmoji button:hover,

#widgetVoice button:hover,

#widgetLogin button:hover{



    background:rgba(255,255,255,.045);

    border-color:rgba(255,255,255,.08);

}



/* Active controls become slightly visible */

#widgetBold button.active,

#widgetBold button[aria-pressed="true"],

#widgetItalic button.active,

#widgetItalic button[aria-pressed="true"],

#widgetFontUp button.active,

#widgetFontUp button[aria-pressed="true"],

#widgetFontDown button.active,

#widgetFontDown button[aria-pressed="true"],

#widgetColor button.active,

#widgetColor button[aria-pressed="true"],

#widgetEmoji button.active,

#widgetEmoji button[aria-pressed="true"],

#widgetVoice button.active,

#widgetVoice button[aria-pressed="true"],

#widgetVoice button.on,

#widgetVoice button.enabled,

#widgetLogin button.active,

#widgetLogin button[aria-pressed="true"]{



    background:rgba(255,255,255,.13);

    border-color:rgba(255,255,255,.18);



    box-shadow:

        inset 0 0 8px rgba(255,255,255,.06),

        0 0 5px rgba(255,255,255,.05);

}



#widgetBold button:focus-visible,

#widgetItalic button:focus-visible,

#widgetFontUp button:focus-visible,

#widgetFontDown button:focus-visible,

#widgetColor button:focus-visible,

#widgetEmoji button:focus-visible,

#widgetVoice button:focus-visible,

#widgetLogin button:focus-visible{



    outline:1px solid rgba(255,255,255,.20);

    outline-offset:1px;

}



#widgetColor input[type=color]{



    position:absolute;



    inset:0;



    opacity:0;



    cursor:pointer;

}

#emojiPanel{



    position:fixed;



    right:20px;



    bottom:75px;



    width:420px;



    max-height:180px;



    display:flex;



    flex-wrap:wrap;



    gap:4px;



    padding:8px;



    overflow-y:auto;



    z-index:99999999;



    background:rgba(20,20,20,.92);



    border:1px solid rgba(255,255,255,.10);



    border-radius:12px;

}



#emojiPanel.hidden{



    display:none;



}

#chatArea{



    position:relative;

}

#widgetOnlineCount{



    position:absolute;



    top:10px;



    left:20px;



    width:100px;



    height:44px;



    z-index:500;

}



#onlineHeader{



    width:100%;

    height:100%;



    display:flex;



    align-items:center;



    justify-content:center;



    border-radius:1px;







    color:#fff;

}



#onlineHeader h2{



    margin:0;



    font-size:16px;

}

.themeWidget button{



background:

    rgba(0,0,0,0.10);



border:

    1px solid rgba(255,255,255,0.04);



color:#fff;



transition:

    all .18s ease;



}



.themeWidget button{



background:

    rgba(255,255,255,0.08);



border:none;



border-radius:10px;



color:#fff;



cursor:pointer;



transition:

    all .16s ease;



}



/* =========================================================

HOVER

========================================================= */



.themeWidget button:hover{



background:

    rgba(255,255,255,0.16);



}



/* =========================================================

ACTIVE

========================================================= */



.themeWidget button.active{



background:

    rgba(255,255,255,0.22);



box-shadow:

    inset 0 0 8px rgba(255,255,255,0.08);



}

/* =====================================================

TOTAL LOGIN

===================================================== */



#widgetTotalLogin{



    position:absolute;



    left:20px;



    bottom:20px;



    width:140px;



    height:42px;



    display:flex;



    align-items:center;



    justify-content:center;

}



#totalLoginCount{



    font-size:20px;



    font-weight:700;



    color:#fff;



    text-shadow:

        0 0 6px rgba(0,0,0,.7);



    user-select:none;



    pointer-events:none;

}



.themeForm{





display:flex;



flex-direction:column;



gap:10px;



margin-bottom:14px;





}



.themeForm input{





width:100%;



height:44px;



padding:0 14px;



border:none;



border-radius:12px;



outline:none;



background:

    rgba(255,255,255,0.06);



border:

    1px solid rgba(255,255,255,0.08);



color:#fff;



font-size:14px;



box-sizing:border-box;



transition:.2s;





}



.themeForm input:focus{



border:

    1px solid #06b6d4;



box-shadow:

    0 0 12px rgba(6,182,212,.25);



}



.themeForm input::placeholder{



color:

    rgba(255,255,255,.45);





}

.themeItemTitle{



margin-top:8px;

margin-bottom:8px;



color:#fff;



font-size:14px;



font-weight:700;



text-align:center;





}

#themeExportBtn,

#themeImportLabel{



height:40px;



padding:0 14px;



border:none;



border-radius:10px;



background:

    rgba(0,0,0,.22);



border:

    1px solid

    rgba(255,255,255,.08);



color:#fff;



cursor:pointer;



display:flex;



align-items:center;



justify-content:center;



font-size:13px;



font-weight:700;



}

#themeExportModal{



position:fixed;



inset:0;



background:

    rgba(0,0,0,.65);



z-index:999999;



display:none;



align-items:center;



justify-content:center;





}



#themeExportBox{



width:420px;



max-height:80vh;



overflow:auto;



border-radius:14px;



padding:18px;



background:#111827;



border:

    1px solid

    rgba(255,255,255,.08);



}



.themeExportHeader{



display:flex;



align-items:center;



justify-content:space-between;



margin-bottom:14px;



color:#fff;



font-weight:700;



}



#themeExportList{



display:flex;



flex-direction:column;



gap:10px;



margin-bottom:15px;



}



.exportThemeItem{



display:flex;



align-items:center;



gap:10px;



padding:10px;



border-radius:10px;



background:

    rgba(255,255,255,.04);



color:#fff;



}



#widgetBold button,

#widgetItalic button,

#widgetFontUp button,

#widgetFontDown button,

#widgetColor button,

#widgetEmoji button,

#widgetVoice button,

#widgetLogin button{





text-indent:-9999px;





}



/* =========================================================

EDIT MODE

========================================================= */



.themeEditMode #widgetBold button,

.themeEditMode #widgetItalic button,

.themeEditMode #widgetFontUp button,

.themeEditMode #widgetFontDown button,

.themeEditMode #widgetColor button,

.themeEditMode #widgetEmoji button,

.themeEditMode #widgetVoice button,

.themeEditMode #widgetLogin button{





text-indent:0;





}

#widgetTakeover{



    width:120px;

    height:40px;



}



#takeoverBtn{



    width:100%;

    height:100%;



    cursor:pointer;



    font-weight:bold;



}

#takeoverOverlay{



    position:fixed;

    inset:0;



    background:rgba(0,0,0,.55);



    display:none;



    justify-content:center;

    align-items:center;



    z-index:99999;



}



#takeoverPopup{



    width:340px;



    background:#1d2330;



    border-radius:10px;



    padding:20px;



    color:#fff;



    text-align:center;



}



#takeoverPopup input{



    width:100%;



    margin:8px 0;



    padding:10px;



    border-radius:6px;



    border:none;



}



.popupButtons{



    display:flex;



    gap:10px;



    justify-content:center;



    margin-top:15px;



}

/* =========================================================

   GUEST LOGIN POPUP

   SADECE GÖRSEL TASARIM

   PHP / HTML / JS DEĞİŞTİRMEZ

   ========================================================= */



#guestLoginPopupOverlay {

    position: fixed !important;

    inset: 0 !important;



    display: none;

    align-items: center;

    justify-content: center;



    background: rgba(0, 0, 0, 0.35) !important;



    z-index: 2147483000 !important;

}



#guestLoginPopupOverlay.open {

    display: flex !important;

}





/* ANA PENCERE */

#guestLoginPopup {

    width: 200px !important;

    max-width: calc(100vw - 20px) !important;



    margin: 0 !important;

    padding: 0 !important;



    box-sizing: border-box !important;



    font-family: Tahoma, Arial, sans-serif !important;

    font-size: 11px !important;

    color: #000 !important;

}





/* GRİ WINDOWS / FLATCAST TARZI ÇERÇEVE */

#guestLoginPopup .guestLoginBox {

    position: relative !important;



    width: 100% !important;

    box-sizing: border-box !important;



    margin: 0 !important;

    padding: 5px 7px 7px !important;



    background: #d4d0c8 !important;



    border-top: 2px solid #ffffff !important;

    border-left: 2px solid #ffffff !important;

    border-right: 2px solid #404040 !important;

    border-bottom: 2px solid #404040 !important;



    border-radius: 0 !important;



    box-shadow:

        1px 1px 0 #000000 !important;



    color: #000 !important;

}





/* BAŞLIK ÇUBUĞU

   Metin HTML'den gelir: "Giriş Yap"

*/

#guestLoginPopup .guestLoginTitle {

    width: calc(100% + 10px) !important;

    height: 20px !important;



    margin: -5px -5px 8px !important;

    padding: 2px 4px !important;



    box-sizing: border-box !important;



    background: linear-gradient(

        to right,

        #111111 0%,

        #303030 50%,

        #111111 100%

    ) !important;



    color: #ffffff !important;



    font-family: Tahoma, Arial, sans-serif !important;

    font-size: 11px !important;

    font-weight: bold !important;



    line-height: 16px !important;

    text-align: left !important;



    border-bottom: 1px solid #808080 !important;

}





/* FORM */

#guestLoginPopup form {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

}





/* INPUTLAR */

#guestLoginPopup input {

    display: block !important;



    width: 100% !important;

    height: 22px !important;



    box-sizing: border-box !important;



    margin: 5px 0 !important;

    padding: 2px 4px !important;



    background: #ffffff !important;

    color: #000000 !important;



    border-top: 2px solid #404040 !important;

    border-left: 2px solid #404040 !important;

    border-right: 1px solid #ffffff !important;

    border-bottom: 1px solid #ffffff !important;



    border-radius: 0 !important;



    font-family: Tahoma, Arial, sans-serif !important;

    font-size: 11px !important;



    outline: none !important;

}





/* INPUT FOCUS */

#guestLoginPopup input:focus {

    outline: 1px dotted #000000 !important;

}





/* TÜM BUTONLAR */

#guestLoginPopup button {

    box-sizing: border-box !important;



    min-height: 22px !important;



    margin: 4px 0 0 !important;

    padding: 2px 9px !important;



    background: #d4d0c8 !important;

    color: #000000 !important;



    border-top: 2px solid #ffffff !important;

    border-left: 2px solid #ffffff !important;

    border-right: 2px solid #404040 !important;

    border-bottom: 2px solid #404040 !important;



    border-radius: 1px !important;



    font-family: Tahoma, Arial, sans-serif !important;

    font-size: 11px !important;



    cursor: pointer !important;

}





/* BUTONA BASILDIĞINDA */

#guestLoginPopup button:active {

    border-top: 2px solid #404040 !important;

    border-left: 2px solid #404040 !important;

    border-right: 2px solid #ffffff !important;

    border-bottom: 2px solid #ffffff !important;



    padding-top: 3px !important;

    padding-left: 10px !important;

}





/* GİRİŞ BUTONU */

#guestLoginPopup form button[type="submit"] {

    width: 100% !important;

}





/* VAZGEÇ */

#guestLoginPopup #guestLoginClose {

    width: 100% !important;



    margin-top: 5px !important;

}





/* KAYIT METNİ */

#guestLoginPopup p {

    margin: 7px 0 2px !important;



    color: #000000 !important;



    font-family: Tahoma, Arial, sans-serif !important;

    font-size: 11px !important;



    line-height: 14px !important;

}





/* KAYIT OL */

#guestLoginPopup p a {

    color: #0000ee !important;

    text-decoration: underline !important;

}





/* HATA MESAJI */

#guestLoginError:empty {

    display: none !important;

}



#guestLoginError {

    margin: 2px 0 4px !important;

    padding: 0 !important;



    color: #800000 !important;



    font-family: Tahoma, Arial, sans-serif !important;

    font-size: 11px !important;



    line-height: 13px !important;

}



/* Theme edit mode: draggable controls stay colorless on hover */

body.theme-edit-mode #widgetBold button:hover,

body.theme-edit-mode #widgetItalic button:hover,

body.theme-edit-mode #widgetFontUp button:hover,

body.theme-edit-mode #widgetFontDown button:hover,

body.theme-edit-mode #widgetColor button:hover,

body.theme-edit-mode #widgetEmoji button:hover,

body.theme-edit-mode #widgetVoice button:hover,

body.theme-edit-mode #widgetLogin button:hover{

    background:transparent;

    border-color:transparent;

    box-shadow:none;

}