/* ==========================================================================
   Whitoo — Chat messages 2026
   Loaded LAST in chat_room.html. Pure visual layer: markup and chatnet.js are
   untouched.

   Layout target (from the reference):
     - other people : avatar left, name above, bubble sized to its content
     - own messages : right aligned, NO avatar, no name, time under the bubble
     - bubbles are dark grey — the old teal/blue gradient is removed

   Structure produced by chatnet.js:
     .cht.sent | .cht.replies (+ .bot-message)
       .forward-check, img.avatar
       .message-data > small.sender-name + .message-html + .current-chat-reactions
       .chat-actions / .chat-reactions   (hover)
       .message-meta > .lt-edited-label / .message-time / .message-status

   SPECIFICITY: whitoo-next.css and whitoo-refresh.css style these with
   `body.incallx .cht.sent .message-data { ... !important }`, which outranks a
   plain `.chats .cht ...` selector. Every override here is therefore prefixed
   with `body.incallx` (verified on a live test page).
   ========================================================================== */

body.incallx .chats .cht {
    --wc26-line: rgba(255, 255, 255, .07);
    --wc26-text: #e8ebf2;
    --wc26-muted: #7d8699;

    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    float: none !important;
    box-shadow: none !important;
}

body.incallx .chats .cht.replies { justify-content: flex-start !important; }
body.incallx .chats .cht.sent    { justify-content: flex-end !important; }

/* ---------- avatar (only for other people, like the reference) ---------- */
body.incallx .chats .cht .avatar {
    order: 0 !important;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 !important;
    content-visibility: visible;
}

body.incallx .chats .cht.sent .avatar {
    display: none !important;
}

/* ---------- content column: transparent, the bubble is .message-html ---------- */
body.incallx .chats .cht .message-data {
    order: 1 !important;
    display: block !important;
    min-width: 0;
    width: auto !important;
    max-width: min(620px, 76%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

body.incallx .chats .cht.sent .message-data {
    text-align: right !important;
}

/* ---------- name row ---------- */
/* display:flex (block-level), NOT inline-flex — inline-flex let the bubble sit
   on the same line as the name instead of underneath it. */
body.incallx .chats .cht .sender-name {
    display: flex !important;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin: 0 0 5px !important;
    padding: 0 !important;
    background: none !important;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* own messages don't repeat your own name (reference shows none) */
body.incallx .chats .cht.sent .sender-name {
    display: none !important;
}

body.incallx .chats .cht .bot-sender-name {
    color: #c4b5fd !important;
}

body.incallx .chats .cht .bot-sender-name i {
    color: #c4b5fd;
}

/* role / bot badges (not the username wrapper) */
body.incallx .chats .cht .sender-name .badge,
body.incallx .chats .cht .bot-sender-name > span,
body.incallx .chats .cht .usertype-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(99, 102, 241, .22);
    color: #a5b4fc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---------- the bubble ---------- */
body.incallx .chats .cht .message-html {
    display: inline-block;
    max-width: 100%;
    padding: 10px 14px !important;
    border: 1px solid var(--wc26-line);
    border-radius: 14px 14px 14px 4px;
    background: #1b2030 !important;
    background-image: none !important;
    color: var(--wc26-text) !important;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
    word-break: break-word;
}

body.incallx .chats .cht.sent .message-html {
    border-radius: 14px 14px 4px 14px;
    background: #262d3d !important;
    background-image: none !important;
}

body.incallx .chats .cht.bot-message .message-html {
    background: #1e1b33 !important;
    border-color: rgba(124, 58, 237, .28);
}

body.incallx .chats .cht .message-html strong,
body.incallx .chats .cht .message-html b {
    color: #fff;
    font-weight: 800;
}

body.incallx .chats .cht .message-html a {
    color: #8ab4ff !important;
    text-decoration: none;
}

body.incallx .chats .cht .message-html a:hover { text-decoration: underline; }

body.incallx .chats .cht .message-html code {
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(124, 58, 237, .2);
    color: #c4b5fd;
    font-size: 12.5px;
}

body.incallx .chats .cht .message-html img {
    max-width: 100%;
    border-radius: 10px;
    content-visibility: visible;
}

/* ---------- time / edited / status ---------- */
body.incallx .chats .cht .message-meta {
    order: 2 !important;
    align-self: flex-end;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin: 0 0 3px !important;
    padding: 0 !important;
    color: var(--wc26-muted) !important;
    font-size: 10.5px;
    white-space: nowrap;
}

/* on own messages the time sits to the LEFT of the bubble */
body.incallx .chats .cht.sent .message-meta {
    order: 0 !important;
}

body.incallx .chats .cht .message-time { color: var(--wc26-muted) !important; }

body.incallx .chats .cht .lt-edited-label {
    color: var(--wc26-muted) !important;
    font-style: italic;
}

body.incallx .chats .cht .message-status i { font-size: 12px; }

/* ---------- reactions ---------- */
body.incallx .chats .cht .current-chat-reactions {
    display: block;
    margin-top: 7px;
}

body.incallx .chats .cht .current-reacts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--wc26-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
}

body.incallx .chats .cht .current-reacts:hover {
    border-color: rgba(239, 43, 82, .45);
    background: rgba(239, 43, 82, .12);
}

body.incallx .chats .cht .current-reacts-count {
    order: 2;
    color: var(--wc26-text);
    font-size: 11px;
    font-weight: 800;
}

body.incallx .chats .cht .current-reacts img,
body.incallx .chats .cht .current-reacts i {
    order: 1;
    width: 14px;
    height: 14px;
    font-size: 13px;
}

/* Hover tools are taken OUT of the flow — in-flow they reserved ~110px next to
   every bubble, so own messages never reached the right edge. */
body.incallx .chats .cht .chat-actions,
body.incallx .chats .cht .chat-reactions,
body.incallx .chats .cht .forward-check {
    position: absolute !important;
    top: 0;
    z-index: 5;
    margin: 0 !important;
}

body.incallx .chats .cht.replies .chat-actions  { right: 8px; }
body.incallx .chats .cht.replies .chat-reactions { right: 46px; }
body.incallx .chats .cht.replies .forward-check  { right: 84px; }

body.incallx .chats .cht.sent .chat-actions   { left: 8px; }
body.incallx .chats .cht.sent .chat-reactions { left: 46px; }
body.incallx .chats .cht.sent .forward-check  { left: 84px; }

/* only reveal them on hover, like the reference's clean rows */
body.incallx .chats .cht .chat-actions,
body.incallx .chats .cht .chat-reactions {
    opacity: 0;
    transition: opacity .12s ease;
}

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

/* ---------- date divider ---------- */
body.incallx .chats .new-date {
    display: flex;
    justify-content: center;
    margin: 6px 0 16px;
}

body.incallx .chats .new-date p {
    display: inline-block;
    margin: 0;
    padding: 4px 14px;
    border: 1px solid var(--wc26-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    color: var(--wc26-muted);
    font-size: 10.5px;
    font-weight: 700;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
    body.incallx .chats .cht .avatar { width: 34px; height: 34px; }
    body.incallx .chats .cht .message-data { max-width: 84% !important; }
    body.incallx .chats .cht .message-html { font-size: 13px; }
}

/* ==========================================================================
   REFERANS TAMAMLAMA (2026-07-18)
   Eksik parcalar: hos geldin karti, tek parca yuvarlak yazma cubugu,
   cizgili tarih ayraci, silinen mesaj balonu.
   ========================================================================== */

/* ---------- Hos geldin karti ---------- */
body.incallx .wc-welcome {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 18px 6px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(23, 30, 48, .92), rgba(14, 19, 32, .92));
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

body.incallx .wc-welcome.is-hidden { display: none !important; }

body.incallx .wc-welcome-emoji {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.2;
}

body.incallx .wc-welcome-copy { flex: 1 1 auto; min-width: 0; }

body.incallx .wc-welcome-copy strong {
    display: block;
    color: #f3f6fb;
    font-size: 14px;
    font-weight: 800;
}

body.incallx .wc-welcome-copy small {
    display: block;
    margin-top: 3px;
    color: rgba(148, 163, 184, .82);
    font-size: 12px;
    line-height: 1.4;
}

body.incallx .wc-welcome-x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(148, 163, 184, .7);
    font-size: 16px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}

body.incallx .wc-welcome-x:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ---------- Tarih ayraci: ortada yazi, iki yanda ince cizgi ---------- */
body.incallx .chats .new-date {
    align-items: center;
    gap: 12px;
    margin: 18px 4px 16px !important;
}

body.incallx .chats .new-date::before,
body.incallx .chats .new-date::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .07);
}

body.incallx .chats .new-date p {
    flex: 0 0 auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(125, 134, 153, .9) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

/* ---------- Silinen mesaj: kirmizi balon ---------- */
body.incallx .chats .cht .chat-txt.deleted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px !important;
    border: 1px solid rgba(230, 18, 43, .35) !important;
    border-radius: 14px !important;
    background: rgba(230, 18, 43, .14) !important;
    color: #ffb3bd !important;
    font-size: 13px;
    font-style: normal !important;
}

body.incallx .chats .cht .chat-txt.deleted i { color: #ff6b7f; }

/* ---------- Yazma cubugu: tek parca yuvarlak kapsul ---------- */
body.incallx .editor-container.editor-controller {
    align-items: center;
    gap: 4px;
    margin: 10px 18px 14px;
    padding: 6px 8px 6px 6px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 16px !important;
    background: rgba(16, 21, 34, .92) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.incallx .editor-container.editor-controller:focus-within {
    border-color: rgba(230, 18, 43, .38) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

/* + dugmesi: yuvarlak, sakin */
body.incallx .editor-container .whitoo-attach-trigger {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    color: rgba(203, 213, 225, .85);
    transition: background .16s ease, color .16s ease;
}

body.incallx .editor-container .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

body.incallx .editor-container .whitoo-attach-trigger svg { width: 20px; height: 20px; }

/* Yazma alani */
body.incallx .editor-container .editor-col { padding: 0 4px; }

body.incallx .editor-container #chatnet-editor {
    min-height: 36px;
    border: 0 !important;
    background: transparent !important;
}

/* Emoji / sticker / gif ikonlari */
body.incallx .editor-container .emoji-col .editor-icon {
    width: 21px;
    height: 21px;
    color: rgba(148, 163, 184, .75);
    transition: color .16s ease, transform .16s ease;
    cursor: pointer;
}

body.incallx .editor-container .emoji-col .editor-icon:hover {
    color: #fff;
    transform: translateY(-1px);
}

/* Mikrofon */
body.incallx .editor-container .lt-voice-hold-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(148, 163, 184, .8);
    font-size: 18px;
}

body.incallx .editor-container .lt-voice-hold-btn:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* Gonder: kirmizi yuvarlak */
body.incallx .editor-container .lt-send-message {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    margin-left: 4px;
    border: 0 !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .32);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.incallx .editor-container .lt-send-message:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 12px 24px rgba(230, 18, 43, .4);
}

body.incallx .editor-container .lt-send-message i { font-size: 18px; }

/* ==========================================================================
   DUZELTME (2026-07-18) — canlida balonlar mavi ve "kutu icinde kutu" cikti.
   Sebep: gercek balon .chat-txt elemani; whitoo-modern.css:3186 ona
   mavi-turkuaz gradient basiyor. Benim katmanim dis kap .message-html'i
   boyadigi icin ikinci bir kutu olusuyordu.
   Cozum: dis kap seffaf, renk/kose SADECE .chat-txt uzerinde.
   ========================================================================== */

/* Dis kap: gorsel yok, sadece hizalama */
html body.incallx .chats .cht .message-html {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Karsi taraf: koyu gri balon */
html body.incallx .chats .cht.replies .chat-txt {
    display: inline-block;
    max-width: 100%;
    padding: 9px 13px !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 14px 14px 14px 4px !important;
    background: #232a38 !important;
    color: #e8ebf2 !important;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: none !important;
}

/* Kendi mesajim: kirmizi balon (referanstaki gibi) */
html body.incallx .chats .cht.sent .chat-txt {
    display: inline-block;
    max-width: 100%;
    padding: 9px 13px !important;
    border: 0 !important;
    border-radius: 14px 14px 4px 14px !important;
    background: linear-gradient(135deg, #d81230, #9d1026) !important;
    color: #fff !important;
    font-size: 13.5px;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(180, 16, 38, .22) !important;
}

/* Bot: mor balon */
html body.incallx .chats .cht.bot-message .chat-txt {
    background: #241f3d !important;
    border-color: rgba(139, 92, 246, .3) !important;
    color: #e9e5ff !important;
}

/* Silinen mesaj balonu her iki tarafta da kirmizi cerceveli kalsin */
html body.incallx .chats .cht .chat-txt.deleted {
    background: rgba(230, 18, 43, .14) !important;
    border: 1px solid rgba(230, 18, 43, .35) !important;
    color: #ffb3bd !important;
    box-shadow: none !important;
}

/* Saat + tik: balonun altinda, sakin */
html body.incallx .chats .cht .message-meta {
    margin-top: 4px !important;
    color: rgba(125, 134, 153, .85) !important;
    font-size: 10.5px !important;
}

/* ---------- Yazma cubugu: tema mavisi/turuncusu yerine referans ---------- */
html body.incallx .editor-container.editor-controller {
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(16, 21, 34, .92) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

html body.incallx .editor-container .lt-send-message,
html body.incallx .editor-container .send-col .btn.lt-send-message,
html body.incallx .editor-container .send-col .btn-primary {
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    background-image: linear-gradient(135deg, #e6122b, #a5122a) !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .32) !important;
}

html body.incallx .editor-container .lt-voice-hold-btn {
    background: transparent !important;
    border: 0 !important;
    color: rgba(148, 163, 184, .85) !important;
    box-shadow: none !important;
}

html body.incallx .editor-container .lt-voice-hold-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

html body.incallx .editor-container .whitoo-attach-trigger {
    border: 0 !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(203, 213, 225, .85) !important;
    box-shadow: none !important;
}

/* ---------- Ust bant duyurusu: referanstaki hos geldin karti gorunumu ---------- */
html body.incallx .main-panel > .alert,
html body.incallx .room-notice .alert {
    margin: 12px 18px 6px !important;
    padding: 13px 16px !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(23, 30, 48, .92), rgba(14, 19, 32, .92)) !important;
    color: #dfe6f2 !important;
    font-size: 13px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2) !important;
}

/* ==========================================================================
   BASLIK + BALON ICI SAAT + GONDER BUTONU (referans birebir)
   ========================================================================== */

/* ---------- Kanal basligi ---------- */
html body.incallx .navbar.topbar .top-channel-icon i {
    color: #ff4d63 !important;
    font-size: 19px !important;
}

html body.incallx .navbar.topbar .top-channel-name {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
}

/* Altin yildiz */
html body.incallx .navbar.topbar .wc-fav {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    color: rgba(148, 163, 184, .5);
    font-size: 15px;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
}

html body.incallx .navbar.topbar .wc-fav.is-on {
    color: #ffc24b;
}

html body.incallx .navbar.topbar .wc-fav:hover { transform: scale(1.08); }

/* Takip Et hapi */
html body.incallx .navbar.topbar .wc-follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin-left: 10px;
    padding: 0 13px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #dbe3ef;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

html body.incallx .navbar.topbar .wc-follow i { font-size: 14px; }

html body.incallx .navbar.topbar .wc-follow:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(148, 163, 184, .38);
    color: #fff;
}

html body.incallx .navbar.topbar .wc-follow.is-on {
    border-color: rgba(255, 194, 75, .45);
    background: rgba(255, 194, 75, .12);
    color: #ffd280;
}

html body.incallx .navbar.topbar .wc-follow.is-on i { color: #ffc24b; }

/* "Guvenli" seridi basligi kalabaliklastiriyordu -> sadece genis ekranda */
@media (max-width: 1200px) {
    html body.incallx .navbar.topbar .woo-room-status-strip { display: none !important; }
}

/* Sag ust ikonlar: esit boyda, yuvarlak, sakin */
html body.incallx .navbar.topbar .nav-item > .nav-link,
html body.incallx .navbar.topbar .rightbarToggle {
    display: grid !important;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(203, 213, 225, .82) !important;
    transition: background .16s ease, color .16s ease;
}

html body.incallx .navbar.topbar .nav-item > .nav-link:hover,
html body.incallx .navbar.topbar .rightbarToggle:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

html body.incallx .navbar.topbar .rightbarToggle i.rotate { transform: none !important; }

/* ---------- Saat + tik: balonun icinde, sagda ---------- */
html body.incallx .chats .cht .message-meta.wc-meta-in {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    float: right;
    margin: 6px 0 -2px 10px !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1;
    white-space: nowrap;
}

html body.incallx .chats .cht.sent .message-meta.wc-meta-in {
    color: rgba(255, 255, 255, .78) !important;
}

html body.incallx .chats .cht.replies .message-meta.wc-meta-in {
    color: rgba(148, 163, 184, .72) !important;
}

html body.incallx .chats .cht .message-meta.wc-meta-in .message-status i,
html body.incallx .chats .cht .message-meta.wc-meta-in i {
    font-size: 12px;
}

/* Balon: saat sigacak sekilde minimum genislik */
html body.incallx .chats .cht .chat-txt {
    min-width: 74px;
}

/* Isim satiri: ad + saat yan yana (referans) */
html body.incallx .chats .cht .sender-name {
    color: #e9edf5 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* ---------- Gonder butonu: yuvarlak kare (referans) ---------- */
html body.incallx .editor-container .lt-send-message,
html body.incallx .editor-container .send-col .btn.lt-send-message,
html body.incallx .editor-container .send-col .btn-primary {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 13px !important;
}

/* ==========================================================================
   ODA TEMASI (Woo Theme Studio) UZERINE REFERANS
   Bu odada body.woo-room-themed aktif; woo-theme-studio.css sohbet alanina
   turkuaz kenarlik/kutu basiyordu (mesaj kutulari, editor, + ve mikrofon).
   Referans gorunum icin sohbet bilesenleri temadan muaf tutuluyor.
   ========================================================================== */

/* Mesaj kabi: tema kutusu iptal — balon SADECE .chat-txt */
html body.incallx.woo-room-themed .cht .message-data,
html body.incallx.woo-room-themed .cht.sent .message-data,
html body.woo-room-themed .cht .message-data,
html body.woo-room-themed .cht.sent .message-data {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Yazma cubugu: tek parca koyu kapsul, ic kutu yok */
html body.woo-room-themed .editor-container,
html body.woo-room-themed .editor-wrap,
html body.woo-room-themed .editor-col {
    border-radius: 16px !important;
    backdrop-filter: none !important;
}

html body.woo-room-themed .editor-container.editor-controller {
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(16, 21, 34, .94) !important;
}

html body.incallx .editor-wrap,
html body.woo-room-themed .editor-wrap {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.incallx .editor-container .editor-col,
html body.woo-room-themed .editor-container .editor-col {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.incallx .editor-container #chatnet-editor,
html body.woo-room-themed .editor-container #chatnet-editor {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* + ve mikrofon: tema gradienti yerine sakin gri */
html body.woo-room-themed .whitoo-attach-trigger {
    border: 0 !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(203, 213, 225, .85) !important;
    box-shadow: none !important;
}

html body.incallx .editor-container .lt-voice-hold-btn,
html body.woo-room-themed .lt-voice-hold-btn {
    border: 0 !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .85) !important;
    box-shadow: none !important;
}

/* Gonder: her temada kirmizi yuvarlak kare */
html body.woo-room-themed .lt-send-message {
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .32) !important;
}

/* Sohbet alani cercevesi yok */
html body.incallx .chat-scroll,
html body.woo-room-themed .chat-scroll,
html body.incallx .group-chat .messages,
html body.woo-room-themed .group-chat .messages {
    border: 0 !important;
    box-shadow: none !important;
}

/* ---------- Saat: gonderen adinin yaninda (karsi taraf) ---------- */
html body.incallx .chats .cht .message-meta.wc-meta-name {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    float: none !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    color: rgba(125, 134, 153, .8) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    vertical-align: middle;
}

/* Ad + saat ayni satirda */
html body.incallx .chats .cht .message-data .sender-name {
    display: inline-block !important;
    margin-bottom: 5px !important;
}

/* Balon icindeki saat (kendi mesajim) */
html body.incallx .chats .cht.sent .chat-txt .message-meta.wc-meta-in {
    float: right;
    margin: 5px 0 -1px 12px !important;
}

/* Hover aksiyon ikonlari soldaki bosluga tasiyordu -> balonun yanina */
html body.incallx .chats .cht .chat-actions,
html body.incallx .chats .cht .chat-reactions {
    background: rgba(15, 20, 32, .92) !important;
    border-radius: 10px;
}

/* ==========================================================================
   TURKUAZ CERCEVELERIN GERCEK KAYNAGI (whitoo-refresh.css) EZILIYOR
   - .chat-scroll        : 8414 -> turkuaz kenarlik + kirmizi/turkuaz degrade
   - .note-editor        : 8288 -> yazma kutusunun ic cercevesi
   - .lt-voice-hold-btn  : 8342 -> mikrofonun turkuaz kutusu
   - .lt-send-message    : 8352 -> turuncu-kirmizi gradient
   Onlarin ozgullugu (0,4,1); buradaki kurallar "html" ile (0,4,2) olup kazanir.
   ========================================================================== */

/* Sohbet alani: cercevesiz, duz koyu zemin (referans) */
html body.incallx .chat-scroll {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Yazma kutusunun ic cercevesi tamamen kalksin */
html body.incallx .editor-container.editor-controller .note-editor.note-frame,
html body.incallx .editor-container.editor-controller .note-editor.note-frame:focus-within {
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller .note-editing-area,
html body.incallx .editor-container.editor-controller .note-editable {
    background: transparent !important;
}

/* Mikrofon: turkuaz kutu yerine duz ikon */
html body.incallx .editor-container.editor-controller .lt-voice-hold-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .85) !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller .lt-voice-hold-btn:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

/* Gonder: turuncu gradient yerine referans kirmizisi */
html body.incallx .editor-container.editor-controller .lt-send-message {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #e6122b, #a5122a) !important;
    box-shadow: 0 8px 18px rgba(230, 18, 43, .3) !important;
}

/* + butonu */
html body.incallx .editor-container.editor-controller .whitoo-attach-trigger {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .05) !important;
    color: rgba(203, 213, 225, .85) !important;
    box-shadow: none !important;
}

/* ---------- Mesaj blogu: ad ustte, balon altta (referans sirasi) ---------- */
html body.incallx .chats .cht .message-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
}

html body.incallx .chats .cht.sent .message-data {
    align-items: flex-end !important;
}

/* Ad satiri en ustte, balon onun altinda */
html body.incallx .chats .cht .message-data .sender-name {
    order: 0 !important;
    display: inline-block !important;
    margin: 0 !important;
}

html body.incallx .chats .cht .message-data .message-html {
    order: 1 !important;
    width: auto !important;
    max-width: 100% !important;
}

html body.incallx .chats .cht .message-data .current-chat-reactions {
    order: 2 !important;
}

/* Karsi tarafta saat adin yaninda kalsin (ayri satira dusmesin) */
html body.incallx .chats .cht .message-meta.wc-meta-name {
    display: inline !important;
    margin-left: 8px !important;
}

/* ==========================================================================
   REFERANS BIREBIR (son)
   whitoo-refresh.css:11766 -> #main-room .group-chat .chat-scroll turkuaz
   cerceve + izgara arka plan basiyordu; ozgullugu (0,4,1). Asagidaki
   secicilerde "html" var (0,4,2) -> kesin kazanir.
   ========================================================================== */

/* Sohbet alani: cerceve yok, izgara yok, duz koyu zemin */
html body.incallx #main-room .group-chat .chat-scroll,
html body.incallx .group-chat .chat-scroll,
html body.incallx .private-chat .chat-scroll {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

/* Yazma cubugu alani: cerceve/zemin yok, kapsul icerde dursun */
html body.incallx .room-editor,
html body.incallx .private-editor {
    padding: 10px 14px 14px !important;
    border: 0 !important;
    background: transparent !important;
}

html body.incallx .editor-container.editor-controller {
    min-height: 54px !important;
    margin: 0 !important;
    padding: 7px 8px 7px 7px !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 16px !important;
    background: #15131c !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller:focus-within {
    border-color: rgba(255, 255, 255, .14) !important;
}

/* + : cerceve/daire yok, duz gri ikon */
html body.incallx .editor-container.editor-controller .whitoo-attach-trigger {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(148, 163, 184, .8) !important;
}

html body.incallx .editor-container.editor-controller .whitoo-attach-trigger:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

/* Placeholder */
html body.incallx .editor-container .note-placeholder,
html body.incallx .editor-container .note-editable[placeholder]:empty::before {
    color: rgba(148, 163, 184, .55) !important;
    font-size: 13.5px !important;
}

/* GIF / emoji / mikrofon: esit boy, sakin gri */
html body.incallx .editor-container .emoji-col .editor-icon,
html body.incallx .editor-container.editor-controller .lt-voice-hold-btn {
    width: 20px !important;
    height: 20px !important;
    color: rgba(148, 163, 184, .78) !important;
}

html body.incallx .editor-container.editor-controller .lt-voice-hold-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 17px !important;
}

/* Gonder: referanstaki kirmizi yuvarlak kare */
html body.incallx .editor-container.editor-controller .lt-send-message {
    width: 42px !important;
    height: 38px !important;
    min-width: 42px !important;
    margin-left: 6px !important;
    border-radius: 12px !important;
    background: #e8203a !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller .lt-send-message:hover {
    background: #f5273f !important;
}

/* ---------- Balon renkleri: referanstaki mat tonlar ---------- */
html body.incallx .chats .cht.replies .chat-txt {
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #1c1a24 !important;
    color: #e9ecf3 !important;
}

html body.incallx .chats .cht.sent .chat-txt {
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: #7a1b2c !important;
    background-image: none !important;
    color: #fff !important;
    box-shadow: none !important;
}

html body.incallx .chats .cht .chat-txt.deleted {
    background: #7a1b2c !important;
    border: 0 !important;
    color: #ffd6dc !important;
}

html body.incallx .chats .cht .chat-txt.deleted i { color: #ff8a9b !important; }

/* Bot: mor isim, mavi rozet, koyu balon */
html body.incallx .chats .cht.bot-message .sender-name { color: #b79cff !important; }

html body.incallx .chats .cht.bot-message .sender-name span {
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: #2f6bd8;
    color: #fff;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .4px;
    vertical-align: middle;
}

html body.incallx .chats .cht.bot-message .chat-txt {
    background: #1c1a24 !important;
}

/* Avatar 34px (referans) */
html body.incallx .chats .cht .avatar {
    width: 34px !important;
    height: 34px !important;
}

/* Isim + saat satiri */
html body.incallx .chats .cht .message-data .sender-name {
    color: #eef1f7 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

html body.incallx .chats .cht .message-meta.wc-meta-name {
    color: rgba(139, 148, 166, .85) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
}

/* Balon ici saat */
html body.incallx .chats .cht.sent .chat-txt .message-meta.wc-meta-in {
    color: rgba(255, 255, 255, .72) !important;
    font-size: 10px !important;
}

/* "+" cevresindeki kutu .attachment-col'dan geliyordu (whitoo-refresh:8271) */
html body.incallx .editor-container.editor-controller .attachment-col {
    width: 38px !important;
    min-height: 38px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Ikon sutunlarinin sabit 52px yuksekligi cubugu sismanlatiyordu */
html body.incallx .room-editor .attachment-col,
html body.incallx .room-editor .emoji-col,
html body.incallx .room-editor .send-col {
    min-height: 0 !important;
}

/* ==========================================================================
   Yazma cubugu: sabit koyu kutu degil -> arkasindaki zemini alan SAYDAM yuzey.
   Boylece oda arka plani/temasi ne renkse cubuk da o renge burunur.
   Ayrica mesajlar cubugun arkasina kaymaz (cubuk kendi satirinda, ustte).
   ========================================================================== */
html body.incallx .editor-container.editor-controller {
    border: 1px solid rgba(255, 255, 255, .06) !important;
    background: rgba(255, 255, 255, .035) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    backdrop-filter: blur(12px) saturate(1.1);
    box-shadow: none !important;
}

html body.incallx .editor-container.editor-controller:focus-within {
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .05) !important;
}

/* Cubugun bulundugu serit de seffaf: arka plan kesintisiz aksin */
html body.incallx .room-editor,
html body.incallx .private-editor {
    position: relative;
    z-index: 2;
    background: transparent !important;
    background-image: none !important;
}

/* Mesajlar cubugun altina girmesin: kaydirma alani cubuktan once bitsin */
html body.incallx .chat-scroll {
    padding-bottom: 4px !important;
    overflow-x: hidden !important;
}

html body.incallx .chats {
    padding-bottom: 6px !important;
}