/* ==========================================================================
   DEMODAN BIREBIR AKTARIM (composer-demo.html)
   Localhost demosunda onaylanan tam degerler. Son blok oldugu icin oncekileri
   ezer; site markup'i (.editor-wrap > .editor-container) demo yapisina esitlenir.
   ========================================================================== */

/* Kapsul = demo .wcx */
body.incallx #main-room .group-chat .room-editor .editor-wrap,
body.incallx #main-private .private-chat .private-editor .editor-wrap {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #17181d !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.incallx #main-room .group-chat .room-editor .editor-container.editor-controller,
body.incallx #main-private .private-chat .private-editor .editor-container.editor-controller {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 8px 0 10px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* + = demo .wcx-plus (34px, #24262c, 10px kose, ince arti) */
body.incallx #main-room .group-chat .room-editor .attachment-col,
body.incallx #main-private .private-chat .private-editor .attachment-col {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    min-height: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #24262c !important;
    color: #dfe3ea !important;
    box-shadow: none !important;
    transition: background .16s ease !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: #2d3037 !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2 !important;
}

/* + ikonundaki cember gizli -> demo ile ayni ince arti */
body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg circle,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg circle {
    display: none !important;
}

/* Yazi alani = demo .wcx-input */
body.incallx #main-room .group-chat .room-editor .editor-col,
body.incallx #main-private .private-chat .private-editor .editor-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    background: transparent !important;
}

body.incallx #main-room .group-chat .room-editor .note-editable,
body.incallx #main-private .private-chat .private-editor .note-editable {
    min-height: 22px !important;
    padding: 0 !important;
    color: #eef1f7 !important;
    font-size: 14.5px !important;
}

body.incallx #main-room .group-chat .room-editor .note-placeholder,
body.incallx #main-private .private-chat .private-editor .note-placeholder {
    padding: 0 !important;
    color: #767b87 !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
}

/* Sag ikonlar = demo .wcx-icons (13px aralik, 22px kutu) */
body.incallx #main-room .group-chat .room-editor .emoji-col,
body.incallx #main-private .private-chat .private-editor .emoji-col {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding-right: 4px !important;
}

body.incallx #main-room .group-chat .room-editor .emoji-col .editor-icon,
body.incallx #main-private .private-chat .private-editor .emoji-col .editor-icon {
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    color: #c3c8d2 !important;
    cursor: pointer;
}

body.incallx #main-room .group-chat .room-editor .emoji-col .editor-icon:hover {
    color: #fff !important;
}

/* GIF rozeti = demo .wcx-gif */
body.incallx #main-room .group-chat .room-editor .wcx-gif,
body.incallx #main-private .private-chat .private-editor .wcx-gif {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 19px !important;
    padding: 0 5px !important;
    border: 1.6px solid #b9bec8 !important;
    border-radius: 5px !important;
    color: #d3d8e0 !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    cursor: pointer;
}

/* Mikrofon = demo ikon olcusu */
body.incallx #main-room .group-chat .room-editor .send-col,
body.incallx #main-private .private-chat .private-editor .send-col {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding-left: 13px !important;
}

body.incallx #main-room .group-chat .room-editor .lt-voice-hold-btn,
body.incallx #main-private .private-chat .private-editor .lt-voice-hold-btn {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #c3c8d2 !important;
    font-size: 19px !important;
    box-shadow: none !important;
}

body.incallx #main-room .group-chat .room-editor .lt-voice-hold-btn:hover {
    color: #fff !important;
}

/* Gonder = demo .wcx-send (44x38, 11px kose, #ec2743) */
body.incallx #main-room .group-chat .room-editor .lt-send-message,
body.incallx #main-private .private-chat .private-editor .lt-send-message {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 38px !important;
    min-width: 44px !important;
    margin: 0 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #ec2743 !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: background .16s ease !important;
}

body.incallx #main-room .group-chat .room-editor .lt-send-message:hover {
    background: #f4344f !important;
}

body.incallx #main-room .group-chat .room-editor .lt-send-message i,
body.incallx #main-private .private-chat .private-editor .lt-send-message i {
    font-size: 19px !important;
}

/* ==========================================================================
   ODA ARKA PLANI — okunabilirlik perdesi geri
   Kanal arka plan gorseli varken mesajlarin okunmasi icin koyu perde sart.
   (Bolme sirasinda dusmustu.)
   ========================================================================== */
body.incallx #main-room .group-chat.has-room-bg .chat-scroll {
    background:
        linear-gradient(135deg, rgba(5, 8, 17, .78), rgba(5, 8, 17, .55) 44%, rgba(5, 8, 17, .82)),
        var(--whitoo-room-bg-image) center center / cover no-repeat !important;
    background-size: auto, cover !important;
}

body.incallx #main-room .group-chat .chat-scroll {
    border: 0 !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   CERCEVE = ARKA PLANDAN TURETILIR (sabit renk yok)
   - Cubuk kendi rengini tasimaz: backdrop blur+saturate ile arkasindaki zemini
     alir. Zemin kirmizidan siyaha kayarken cubuk da o tonlara burunur.
   - Cerceve yerine %12 opaklikta ic halka + zeminden turetilen yumusak golge
     (tema vurgusu --wts-accent varsa ondan, yoksa notr).
   - Zemin sohbet + yazma seridini TEK parca kaplar -> cubuk arka plandan kopuk
     durmaz, dogal uzantisi gibi gorunur.
   ========================================================================== */
body.incallx #main-room .group-chat.has-room-bg .main-panel {
    background:
        linear-gradient(135deg, rgba(5, 8, 17, .78), rgba(5, 8, 17, .55) 44%, rgba(5, 8, 17, .82)),
        var(--whitoo-room-bg-image) center center / cover no-repeat !important;
    background-size: auto, cover !important;
}

body.incallx #main-room .group-chat.has-room-bg .chat-scroll,
body.incallx #main-room .group-chat .room-editor {
    background: transparent !important;
    background-image: none !important;
}

body.incallx #main-room .group-chat .room-editor .editor-wrap,
body.incallx #main-private .private-chat .private-editor .editor-wrap {
    border: 0 !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .035) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 10px 30px rgba(0, 0, 0, .22),
        0 0 26px color-mix(in srgb, var(--wts-accent, #000) 12%, transparent) !important;
    transition: background .2s ease, box-shadow .2s ease !important;
}

body.incallx #main-room .group-chat .room-editor .editor-wrap:focus-within,
body.incallx #main-private .private-chat .private-editor .editor-wrap:focus-within {
    background: rgba(255, 255, 255, .05) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset 0 1px 0 rgba(255, 255, 255, .09),
        0 12px 34px rgba(0, 0, 0, .26),
        0 0 32px color-mix(in srgb, var(--wts-accent, #000) 18%, transparent) !important;
}

/* ==========================================================================
   SON AYAR — daha uzun cubuk, modern "+" butonu, isik gibi cerceve
   ========================================================================== */
body.incallx #main-room .group-chat .room-editor .editor-wrap,
body.incallx #main-private .private-chat .private-editor .editor-wrap {
    max-width: 1000px !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 12px 34px rgba(0, 0, 0, .20) !important;
}

body.incallx #main-room .group-chat .room-editor .editor-container.editor-controller,
body.incallx #main-private .private-chat .private-editor .editor-container.editor-controller {
    min-height: 64px !important;
    height: 64px !important;
    padding: 0 10px 0 12px !important;
}

/* + : 40px cam kare, ince halka, belirgin ama sakin */
body.incallx #main-room .group-chat .room-editor .attachment-col,
body.incallx #main-private .private-chat .private-editor .attachment-col {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    width: 40px !important;
    height: 40px !important;
    border-radius: 13px !important;
    background: rgba(255, 255, 255, .08) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
    color: #f1f4f9 !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .15) !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 2.2 !important;
}

/* Yazi ve ikonlar cubukla orantili */
body.incallx #main-room .group-chat .room-editor .note-placeholder,
body.incallx #main-room .group-chat .room-editor .note-editable {
    font-size: 15px !important;
}

body.incallx #main-room .group-chat .room-editor .editor-col,
body.incallx #main-private .private-chat .private-editor .editor-col {
    padding: 0 16px !important;
}

body.incallx #main-room .group-chat .room-editor .emoji-col,
body.incallx #main-private .private-chat .private-editor .emoji-col {
    gap: 15px !important;
}

body.incallx #main-room .group-chat .room-editor .emoji-col .editor-icon,
body.incallx #main-private .private-chat .private-editor .emoji-col .editor-icon {
    width: 22px !important;
    height: 22px !important;
}

body.incallx #main-room .group-chat .room-editor .lt-voice-hold-btn,
body.incallx #main-private .private-chat .private-editor .lt-voice-hold-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 20px !important;
}

body.incallx #main-room .group-chat .room-editor .lt-send-message,
body.incallx #main-private .private-chat .private-editor .lt-send-message {
    width: 48px !important;
    height: 42px !important;
    min-width: 48px !important;
    margin-left: 14px !important;
    border-radius: 13px !important;
}

/* ==========================================================================
   "+" DUGMESI — modern: daire, ince isik halkasi, dolgusuz
   Uzerine gelince dolar ve hafif yukselir; basinca kucuk bir geri bildirim.
   ========================================================================== */
body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .9) !important;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .30) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:active,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:active {
    transform: scale(.94) !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 19px !important;
    height: 19px !important;
    stroke-width: 2.4 !important;
}

/* ==========================================================================
   "+" SON HALI — KARE (12px kose) ve BUYUK arti simgesi
   ========================================================================== */
body.incallx #main-room .group-chat .room-editor .attachment-col,
body.incallx #main-private .private-chat .private-editor .attachment-col {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16) !important;
    color: rgba(255, 255, 255, .92) !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger:hover,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32) !important;
    color: #fff !important;
}

body.incallx #main-room .group-chat .room-editor .whitoo-attach-trigger svg,
body.incallx #main-private .private-chat .private-editor .whitoo-attach-trigger svg {
    width: 24px !important;
    height: 24px !important;
    stroke-width: 2.6 !important;
}

/* ==========================================================================
   OZEL MESAJ (DM) — sunucudakiyle ayni cubuk
   Kullanici secilmemisken editor alani gizlendigi icin ikonlar sola yigiliyor
   ve alttaki uyari ayri gri bir kutu olarak duruyordu. Artik: bos cubuk
   tamamen gizleniyor, uyari ayni cam kapsul icinde ortalanmis gorunuyor.
   ========================================================================== */
body.incallx #main-private .private-editor {
    display: flex !important;
    justify-content: center !important;
    padding: 10px 16px 14px !important;
    background: transparent !important;
}

body.incallx #main-private .private-editor .editor-wrap {
    width: 100% !important;
    max-width: 1000px !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .editor-container.editor-controller {
    display: none !important;
}

/* Uyari SADECE kullanici secilmemisken gorunur (aksi halde sohbet acikken de
   ekranda kaliyordu). */
body.incallx #main-private .private-editor:not(.is-private-user-empty) .non-chat-select {
    display: none !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    min-height: 64px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .035) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    color: rgba(203, 213, 225, .75) !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select p {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select img,
body.incallx #main-private .private-editor.is-private-user-empty .non-chat-select .avatar {
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   MESAJ ISLEM BUTONLARI — balonun hemen yaninda
   Eskiden satirin en soluna mutlak konumlaniyordu (mesajla alakasiz duruyordu).
   Artik akista: kendi mesajimda balonun SOLUNDA, karsi tarafta SAGINDA.
   ========================================================================== */
body.incallx .chats .cht .chat-actions,
body.incallx .chats .cht .chat-reactions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
    margin: 0 4px !important;
    background: transparent !important;
    opacity: 0;
    transition: opacity .14s ease;
}

body.incallx .chats .cht:hover .chat-actions,
body.incallx .chats .cht:hover .chat-reactions {
    opacity: 1;
}

body.incallx .chats .cht.sent .chat-actions { order: -1 !important; }
body.incallx .chats .cht.sent .chat-reactions { order: -2 !important; }
body.incallx .chats .cht.sent .message-data { order: 0 !important; }

body.incallx .chats .cht.replies .chat-actions,
body.incallx .chats .cht.replies .chat-reactions { order: 5 !important; }

body.incallx .chats .cht .chat-actions > *,
body.incallx .chats .cht .chat-reactions > * {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(203, 213, 225, .85) !important;
    font-size: 14px !important;
}

body.incallx .chats .cht .chat-actions > *:hover,
body.incallx .chats .cht .chat-reactions > *:hover {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}