/* Chat SDK — stiller (duz, keskin, Telegram esintili profesyonel tema) */
.cm-root { font-family: "Nunito", "Segoe UI", system-ui, sans-serif; }
.cm-root *, .cm-root *::before, .cm-root *::after { box-sizing: border-box; }
/* Ev sahibi sayfanin genel button/input stilleri widget'a sizmasin.
   :where() ile secici sifir ek-specificity tasir: host kurallarini (0,0,1) yener,
   ama .cm-* bilesen kurallarinin altinda kalir — bilesen marginleri asla ezilmez. */
.cm-root :where(button, input, select) { margin: 0; font-family: inherit; text-transform: none; letter-spacing: normal; }
/* iOS: 16px alti font tasiyan input odaklaninca otomatik zoom yapar — dokunmatik cihazda engelle */
@media (pointer: coarse) {
  .cm-root input, .cm-root select, .cm-root textarea { font-size: 16px !important; }
}

@keyframes cmPop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmShake { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }

/* ---------- yuzen buton ---------- */
.cm-fab { position: fixed; right: 20px; bottom: 84px; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: none; cursor: pointer; background: #5b4ee0; color: #fff; box-shadow: 0 4px 14px rgba(20, 22, 40, .30); display: flex; align-items: center; justify-content: center; z-index: 1060; transition: background .15s; }
.cm-fab:hover { background: #4f43cc; }
.cm-fab.cm-has-unread svg { animation: cmShake 1.8s ease-in-out infinite; }
.cm-fab .cm-fab-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e0334f; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

/* ---------- karartma (mobil) ---------- */
.cm-overlay { position: fixed; inset: 0; background: rgba(16, 18, 32, .55); z-index: 1069; display: none; animation: cmFade .18s ease; }

/* ---------- panel ---------- */
.cm-panel { position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 32px)); background: #fff; border: 1px solid #d9dce6; border-radius: 12px; box-shadow: 0 12px 40px rgba(16, 18, 32, .22); display: flex; flex-direction: column; overflow: hidden; z-index: 1070; animation: cmPop .18s ease; }
.cm-panel.cm-mobile { border-radius: 12px; animation: none; }

/* tam ekran modu (ana uygulama sayfasi): panel viewport'u %100 kaplar */
.cm-panel.cm-full { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; border-radius: 0; border: none; box-shadow: none; animation: none; }
/* Genis ekranda (masaustu) tam ekran panelde icerik ortalanir ve makul bir
   genislikte tutulur — aksi halde satirlar/arama hapi ekran boyunca yayiliyor. */
@media (min-width: 900px) {
  .cm-panel.cm-full { background: #eef0f4; }
  .cm-panel.cm-full > .cm-header { padding: 0; }
  .cm-panel.cm-full .cm-header-row,
  .cm-panel.cm-full > .cm-roomlist,
  .cm-panel.cm-full > .cm-contacts,
  .cm-panel.cm-full > .cm-gview,
  .cm-panel.cm-full > .cm-empty,
  .cm-panel.cm-full > .cm-messages,
  .cm-panel.cm-full > .cm-composer,
  .cm-panel.cm-full > .cm-chatsearch,
  .cm-panel.cm-full > .cm-searchbar,
  .cm-panel.cm-full > .cm-pinbar,
  .cm-panel.cm-full > .cm-recbar,
  .cm-panel.cm-full > .cm-encbar,
  .cm-panel.cm-full > .cm-guestbar,
  .cm-panel.cm-full > .cm-gcallbar,
  .cm-panel.cm-full > .cm-gcalljoin,
  .cm-panel.cm-full > .cm-editbar,
  .cm-panel.cm-full > .cm-attach,
  .cm-panel.cm-full > .cm-tabbar {
    width: 100%; max-width: 780px; margin-left: auto; margin-right: auto;
  }
  .cm-panel.cm-full .cm-header-row { padding: 0 10px; }
}

/* klavye acilis/kapanisinda panel akiskan kayar. Kisa sure + ease-out:
   iOS ara viewport olaylarinda hedef degisse de animasyon cabuk yakalar,
   kesiklilik hissi azalir. */
.cm-panel.cm-full.cm-kb-ready { transition: height .2s ease-out, top .2s ease-out; will-change: height, top; }

/* ---------- baslik ---------- */
.cm-header { background: #5b4ee0; height: 56px; padding: 0 10px; color: #fff; display: flex; align-items: center; flex: none; }
.cm-header-row { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cm-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cm-header-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
.cm-header-titles { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cm-header-title { font-size: 14.5px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-header-sub { font-size: 11px; opacity: .72; line-height: 1.25; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-back, .cm-close { width: 34px; height: 34px; flex: none; border: none; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.cm-back:hover, .cm-close:hover { background: rgba(255,255,255,.14); }

/* arama hapi (ikonlu) */
.cm-search { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 0 12px; height: 38px; background: #f0f1f6; border-radius: 10px; border: 1px solid transparent; transition: border-color .12s, background .12s; }
.cm-search:focus-within { border-color: #5b4ee0; background: #fff; }
.cm-search-ic { display: flex; color: #8a8f9e; flex: none; }
.cm-search input { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #1a1d29; }
.cm-search input::placeholder { color: #9aa0ae; font-weight: 600; }

/* mesaj ici arama cubugu */
.cm-searchbar { display: none; align-items: center; gap: 6px; padding: 0 8px 8px 0; background: #fff; border-bottom: 1px solid #e6e8ee; flex: none; }
.cm-searchbar .cm-search { flex: 1; margin: 8px 0 0 14px; }
.cm-searchbar .cm-editbar-cancel { margin-top: 8px; color: #8a8f9e; }
.cm-searchbar .cm-editbar-cancel:hover { background: #f0f1f6; }

/* baslik zil rozeti */
.cm-bell { position: relative; }
.cm-hbadge { display: none; position: absolute; top: 3px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #e0334f; color: #fff; font-size: 9px; font-weight: 800; align-items: center; justify-content: center; border: 2px solid #5b4ee0; }

/* bildirim satirlari */
.cm-notifrow { padding: 11px 16px; border-bottom: 1px solid #f2f3f7; }
.cm-notifrow.cm-notif-unread { background: #f4f3fd; }
.cm-notif-text { font-size: 13px; font-weight: 700; color: #1a1d29; line-height: 1.45; }
.cm-notif-time { font-size: 11px; font-weight: 700; color: #9aa0ae; margin-top: 3px; }
.cm-root .cm-gbtn-ghost { background: #fff; color: #4a4f63; border: 1px solid #d9dce6; }
.cm-root .cm-gbtn-ghost:hover { background: #f3f4f8; }

/* ---------- baglanti durumu ---------- */
.cm-desc { display: none; padding: 6px 14px; background: #fff4f5; border-bottom: 1px solid #f3dadd; font-size: 11px; font-weight: 700; color: #c23a4e; }

/* ---------- alt menu: Sohbetler | Kisiler (site alt navigasyonu tarzi) ---------- */
.cm-tabbar { display: flex; background: #fff; border-top: 1px solid #e6e8ee; flex: none; }
.cm-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px 9px; border: none; background: transparent; cursor: pointer; font-family: inherit; color: #8a8f9e; transition: color .12s; }
.cm-tab + .cm-tab { border-left: 1px solid #eceef3; }
.cm-tab:hover { color: #4a4f63; }
.cm-tab.cm-tab-active { color: #5b4ee0; }
.cm-tabicon { position: relative; display: flex; }
.cm-tablabel { font-size: 11px; font-weight: 800; }
.cm-tab-badge { display: none; position: absolute; top: -5px; right: -11px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #5b4ee0; color: #fff; font-size: 9.5px; font-weight: 800; align-items: center; justify-content: center; border: 2px solid #fff; }

/* ---------- kisiler ---------- */
.cm-contacts { flex: 1; overflow-y: auto; background: #fff; display: none; flex-direction: column; }
.cm-codecard { display: flex; align-items: center; gap: 10px; margin: 10px 12px 0; padding: 10px 12px; background: #f4f3fd; border: 1px solid #e0dcfa; border-radius: 10px; }
.cm-codecard-info { flex: 1; min-width: 0; }
.cm-codecard-label { font-size: 10.5px; font-weight: 800; color: #8a8f9e; text-transform: uppercase; letter-spacing: .3px; }
.cm-codecard-code { font-size: 16px; font-weight: 800; color: #5b4ee0; letter-spacing: 1px; margin-top: 1px; font-family: Consolas, Menlo, monospace; }
.cm-copy { flex: none; border: none; border-radius: 8px; background: #5b4ee0; color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 8px 12px; cursor: pointer; }
.cm-copy:hover { background: #4f43cc; }
.cm-divider { height: 1px; background: #e8eaf0; margin-top: 12px; flex: none; }
.cm-divider-lg { margin-top: 18px; }
.cm-root .cm-code-input { font-family: Consolas, Menlo, monospace; text-transform: uppercase; letter-spacing: 1px; }
.cm-addhint { margin: 8px 16px 0; font-size: 11.5px; font-weight: 600; color: #8a8f9e; line-height: 1.5; }
.cm-root .cm-addstatus { margin: 10px 16px 0; font-size: 11.5px; font-weight: 700; color: #c23a4e; min-height: 14px; }
.cm-addstatus.cm-ok { color: #2f9e64; }
.cm-contactrows { display: flex; flex-direction: column; margin-top: 6px; }
.cm-contacts-empty { padding: 24px 16px; text-align: center; font-size: 12px; font-weight: 600; color: #8a8f9e; line-height: 1.6; }
.cm-section { padding: 10px 14px 4px; font-size: 10.5px; font-weight: 800; color: #8a8f9e; text-transform: uppercase; letter-spacing: .4px; }
.cm-crow { cursor: default; }
.cm-crow.cm-clickable-row { cursor: pointer; }
.cm-crow-actions { display: flex; gap: 6px; flex: none; }
.cm-accept, .cm-reject { border: none; border-radius: 7px; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 10px; cursor: pointer; }
.cm-accept { background: #5b4ee0; color: #fff; }
.cm-accept:hover { background: #4f43cc; }
.cm-reject { background: #f0f1f6; color: #c23a4e; }
.cm-reject:hover { background: #e8dfe2; }
.cm-pending-tag { flex: none; font-size: 10.5px; font-weight: 800; color: #b08a2f; background: #faf3df; border: 1px solid #eee0b8; border-radius: 7px; padding: 3px 8px; }
.cm-rowact { border: 1px solid #d9dce6; border-radius: 7px; background: #fff; color: #4a4f63; font-family: inherit; font-size: 11px; font-weight: 800; padding: 5px 9px; cursor: pointer; }
.cm-rowact:hover { background: #f3f4f8; }
.cm-rowact-danger { color: #c23a4e; border-color: #ecd2d7; }
.cm-rowact-danger:hover { background: #faf1f3; }
.cm-blocked-row { opacity: .65; }
.cm-blocked-row .cm-room-avatar { filter: grayscale(1); }
.cm-toast { display: none; position: absolute; left: 50%; transform: translateX(-50%); bottom: 66px; max-width: 85%; background: rgba(26, 29, 41, .92); color: #fff; font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 9px; z-index: 5; animation: cmFade .15s ease; text-align: center; }
.cm-tab-badge-req { background: #e0334f; }
.cm-tab-badge-missed { background: #e0503f; }
.cm-avatar-dot { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #2f9e64; border: 2px solid #fff; }

/* ---------- oda listesi (Telegram tarzi satirlar + ic ayraclar) ---------- */
.cm-roomlist { flex: 1; overflow-y: auto; background: #fff; padding: 0; display: flex; flex-direction: column; }
.cm-roomitem { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: #fff; border-radius: 0; padding: 10px 14px; cursor: pointer; font-family: inherit; transition: background .12s; flex: none; }
.cm-roomitem:hover { background: #f3f4f8; }
.cm-roomitem:active { background: #eaecf2; }
/* ayrac: her satirin altinda, avatarin bittigi yerden baslar (son satir haric) */
.cm-roomitem::after { content: ''; position: absolute; left: 72px; right: 0; bottom: 0; height: 1px; background: #e8eaf0; }
.cm-roomitem:last-child::after { display: none; }
.cm-room-avatar { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; background: #5b4ee0; color: #fff; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cm-room-mid { display: block; flex: 1; min-width: 0; }
.cm-room-name { display: block; font-size: 13.5px; font-weight: 800; color: #1a1d29; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-room-preview { display: block; font-size: 12px; color: #8a8f9e; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cm-room-preview.cm-preview-unread { color: #1a1d29; font-weight: 800; }
.cm-room-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.cm-room-time { font-size: 11px; color: #9aa0ae; font-weight: 700; }
.cm-room-time.cm-time-unread { color: #5b4ee0; font-weight: 800; }
.cm-room-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #5b4ee0; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* yeni grup satiri (liste ustunde, oda satiri dilinde) */
.cm-newgroup { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; border: none; border-bottom: 1px solid #e8eaf0; background: #fff; color: #5b4ee0; font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; flex: none; transition: background .12s; }
.cm-newgroup:hover { background: #f3f4f8; }
.cm-ng-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #eef0fb; color: #5b4ee0; display: flex; align-items: center; justify-content: center; }

/* sabitleme */
.cm-room-topright { display: flex; align-items: center; gap: 5px; }
.cm-pinned-ic { display: inline-flex; color: #8a8f9e; }
.cm-pinbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: #c3c7d1; cursor: pointer; }
.cm-pinbtn:hover { background: #eaecf2; color: #5b4ee0; }
.cm-pinbtn.cm-pinned { color: #5b4ee0; }
.cm-trashbtn:hover { background: #faf1f3; color: #c23a4e; }
.cm-chatsearch { display: none; background: #fff; padding-bottom: 0; flex: none; }
.cm-chatsearch .cm-search { margin-bottom: 10px; }
.cm-chatsearch .cm-divider { margin-top: 0; }

/* grup kurma / yonetim / ayarlar gorunumu */
.cm-gview { flex: 1; overflow-y: auto; background: #fff; display: none; flex-direction: column; }
.cm-gform { display: flex; flex-direction: column; padding: 4px 0 18px; }
.cm-gform .cm-section { padding-top: 16px; }
.cm-root .cm-ginput { margin: 8px 16px 0; height: 40px; border: 1px solid #d9dce6; border-radius: 10px; padding: 0 12px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: #1a1d29; outline: none; background: #f9fafc; transition: border-color .12s, background .12s; }
.cm-root .cm-ginput:focus { border-color: #5b4ee0; background: #fff; }
.cm-root select.cm-ginput { appearance: auto; }
.cm-grow { display: flex; gap: 8px; align-items: center; margin-right: 14px; }
.cm-grow .cm-ginput { flex: 1; margin-right: 0; }
.cm-root .cm-gbtn { margin: 18px 16px 0; border: none; border-radius: 10px; background: #5b4ee0; color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; padding: 12px; cursor: pointer; transition: background .12s; }
.cm-root .cm-gbtn:hover { background: #4f43cc; }
.cm-root .cm-gbtn-sm { margin: 8px 0 0; padding: 10px 16px; flex: none; }
.cm-root .cm-gbtn-danger { background: #e0334f; color: #fff; }
.cm-root .cm-gbtn-danger:hover { background: #c92c45; }
.cm-root .cm-gbtnrow { display: flex; gap: 8px; margin: 14px 16px 0; }
.cm-root .cm-gbtnrow .cm-gbtn { flex: 1; margin: 0; padding: 10px 8px; font-size: 12.5px; }
.cm-root .cm-gcheck { width: 18px; height: 18px; accent-color: #5b4ee0; flex: none; margin-right: 4px; }
.cm-gform .cm-roomitem { padding-left: 16px; padding-right: 16px; }

/* ayarlar: profil + anahtarlar */
.cm-profile { display: flex; align-items: center; gap: 12px; margin: 12px 14px 0; padding: 14px; background: #f9fafc; border: 1px solid #e6e8ee; border-radius: 12px; }
.cm-profile-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #5b4ee0; color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cm-profile-info { flex: 1; min-width: 0; }
.cm-profile-name { font-size: 14px; font-weight: 800; color: #1a1d29; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-profile-label { font-size: 10px; font-weight: 800; color: #8a8f9e; text-transform: uppercase; letter-spacing: .3px; margin-top: 4px; }
.cm-profile-code { font-size: 13px; font-weight: 800; color: #5b4ee0; letter-spacing: .8px; font-family: Consolas, Menlo, monospace; margin-top: 1px; }
.cm-profile-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.cm-profile-actions .cm-copy { padding: 7px 12px; font-size: 11px; }
.cm-copy-ghost { background: #fff; color: #5b4ee0; border: 1px solid #d4cdfb; }
.cm-copy-ghost:hover { background: #f0eefe; }
.cm-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f2f3f7; }
.cm-switchlabel { font-size: 13px; font-weight: 700; color: #1a1d29; }
.cm-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.cm-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.cm-switch-track { position: absolute; inset: 0; background: #d9dce6; border-radius: 11px; transition: background .15s; }
.cm-switch-track::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .15s; box-shadow: 0 1px 2px rgba(16,18,32,.25); }
.cm-switch input:checked + .cm-switch-track { background: #5b4ee0; }
.cm-switch input:checked + .cm-switch-track::before { left: 20px; }
.cm-aboutrow { padding: 12px 14px; font-size: 12px; font-weight: 600; color: #8a8f9e; }

/* ---------- profil fotograflari ---------- */
.cm-room-avatar.cm-has-photo, .cm-profile-avatar.cm-has-photo, .cm-pf-avatar.cm-has-photo,
.cm-gov-avatar.cm-has-photo, .cm-call-avatar.cm-has-photo, .cm-userpop-avatar.cm-has-photo,
.cm-gcp-avatar.cm-has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; }
.cm-avatar-edit { position: relative; flex: none; cursor: pointer; }
.cm-avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: #5b4ee0; color: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; }
.cm-avatar-edit:hover .cm-avatar-cam { background: #4f43cc; }

/* ---------- form kartlari (yeni kisi / yeni grup / misafir sohbeti) ---------- */
.cm-nc-card, .cm-formcard { margin: 16px 14px 0; padding: 18px 16px 16px; background: #fff; border: 1px solid #e6e8ee; border-radius: 14px; box-shadow: 0 2px 10px rgba(16,18,32,.04); }
/* kart icindeki bolum basligi: ustunde ayirici cizgi */
.cm-formcard-sep { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f2f3f7; }
.cm-nc-hint.cm-nc-hint-top { margin-top: 0; }
/* kart icindeki secim/kisi satirlari kenara dayansin */
.cm-formcard .cm-roomitem { padding-left: 0; padding-right: 0; }
.cm-formcard .cm-roomitem::after { left: 58px; }
.cm-formcard .cm-roomitem:last-of-type::after { display: none; }
.cm-nc-label { font-size: 11px; font-weight: 800; color: #8a8f9e; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
.cm-root .cm-nc-input { display: block; width: 100%; margin: 0; height: 44px; }
.cm-nc-hint { margin-top: 12px; font-size: 12px; font-weight: 600; color: #8a8f9e; line-height: 1.55; }
.cm-root .cm-nc-btn { display: block; width: 100%; margin: 16px 0 0; }
.cm-root .cm-nc-status { margin: 12px 0 0; }

/* ---------- profil ekrani (Telegram usulu) ---------- */
.cm-pf-head { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 16px 18px; background: linear-gradient(180deg, #f7f8fc, #fff); border-bottom: 1px solid #eceef3; }
.cm-pf-avatar { width: 88px; height: 88px; border-radius: 50%; background: #5b4ee0; color: #fff; font-size: 34px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(16,18,32,.18); }
.cm-pf-name { font-size: 18px; font-weight: 800; color: #1a1d29; margin-top: 12px; text-align: center; }
.cm-pf-status { font-size: 12.5px; font-weight: 700; color: #8a8f9e; }
.cm-pf-status.cm-pf-online { color: #2f9e64; }
.cm-pf-acts { display: flex; gap: 10px; padding: 14px 16px 4px; }
.cm-root .cm-pf-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid #e6e8ee; border-radius: 12px; background: #fff; color: #5b4ee0; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 12px 6px; cursor: pointer; transition: background .12s, border-color .12s; }
.cm-root .cm-pf-act:hover { background: #f4f3fd; border-color: #d4cdfb; }
.cm-pf-act-ic { display: flex; }
.cm-root .cm-pf-act-danger { color: #c23a4e; }
.cm-pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #f2f3f7; }
.cm-pf-row-label { font-size: 12px; font-weight: 700; color: #8a8f9e; }
.cm-pf-row-value { font-size: 13px; font-weight: 800; color: #1a1d29; text-align: right; word-break: break-word; }

/* ---------- bos durum ---------- */
.cm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #fff; padding: 24px; text-align: center; }
.cm-empty-ic { width: 56px; height: 56px; border-radius: 50%; background: #f0f1f6; color: #8a8f9e; display: flex; align-items: center; justify-content: center; }
.cm-empty-title { font-size: 13.5px; font-weight: 800; color: #3a3f52; }
.cm-empty-text { font-size: 12px; font-weight: 600; color: #8a8f9e; max-width: 230px; line-height: 1.5; }

/* ---------- mesaj alani ---------- */
.cm-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; background: #eef0f4; }
.cm-root .cm-loadmore { align-self: center; margin: 2px 0 6px; border: none; background: rgba(16,18,32,.06); color: #4a4f63; font-family: inherit; font-size: 11px; font-weight: 800; border-radius: 12px; padding: 4px 12px; cursor: pointer; }
.cm-root .cm-loadmore:hover { background: rgba(16,18,32,.10); }

/* tarih ayraci */
.cm-daychip { align-self: center; margin: 8px 0 4px; background: rgba(16, 18, 32, .10); color: #4a4f63; font-size: 11px; font-weight: 800; border-radius: 10px; padding: 2px 10px; }

/* sistem mesaji (X gruba katildi vb.) */
.cm-syschip { align-self: center; margin: 3px 0; background: rgba(16, 18, 32, .08); color: #5a5f73; font-size: 11px; font-weight: 700; border-radius: 12px; padding: 3px 12px; text-align: center; max-width: 90%; }

/* listede "yaziyor..." onizlemesi */
.cm-room-preview.cm-typing-preview { color: #5b4ee0; font-style: italic; font-weight: 700; }

/* balonlar */
.cm-msg { display: flex; justify-content: flex-start; }
.cm-msg.cm-mine { justify-content: flex-end; }
.cm-msg.cm-pending .cm-bubble { opacity: .55; }
.cm-bubble { max-width: 84%; font-size: 13.5px; line-height: 1.42; color: #1a1d29; background: #fff; border-radius: 10px; border-bottom-left-radius: 4px; box-shadow: 0 1px 1px rgba(16, 18, 32, .10); overflow: hidden; padding: 6px 9px 5px; }
.cm-msg.cm-mine .cm-bubble { background: #dcd6f9; border-radius: 10px; border-bottom-right-radius: 4px; }
.cm-bname { font-size: 12px; font-weight: 800; margin-bottom: 1px; }
.cm-text { overflow-wrap: break-word; word-break: break-word; }
.cm-time-in { float: right; margin: 4px 0 0 8px; font-size: 10.5px; font-weight: 700; color: #9aa0ae; display: inline-flex; align-items: center; gap: 3px; }
.cm-msg.cm-mine .cm-time-in { color: #7d74b8; }
.cm-ticks { display: inline-flex; align-items: center; color: #8d84c4; }
.cm-ticks.cm-read { color: #2f8de0; }
.cm-admin-tag { font-size: 10px; font-weight: 800; color: #8a8f9e; background: none; padding: 0; }
.cm-bubble.cm-has-media { padding: 4px 4px 5px; }
.cm-bubble.cm-has-media .cm-bname { padding: 3px 6px 0; }
.cm-bubble.cm-has-media .cm-text { padding: 2px 6px 0; }
.cm-bubble img, .cm-bubble video { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: 7px; }
.cm-bubble video { background: #000; }

/* silinmis / duzenlenmis mesaj */
.cm-bubble.cm-deleted { opacity: .6; }
.cm-bubble.cm-deleted i { color: #8a8f9e; font-size: 12.5px; }
.cm-edited { font-size: 10px; font-weight: 700; color: inherit; opacity: .8; }
.cm-clickable-bubble { cursor: pointer; }

/* yanit alintisi */
.cm-quote { display: block; border-left: 3px solid #5b4ee0; background: rgba(91, 78, 224, .07); border-radius: 6px; padding: 4px 8px; margin-bottom: 4px; cursor: pointer; }
.cm-quote:hover { background: rgba(91, 78, 224, .13); }
.cm-quote-name { display: block; font-size: 11px; font-weight: 800; color: #5b4ee0; }
.cm-quote-text { display: block; font-size: 11.5px; font-weight: 600; color: #4a4f63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.cm-msg.cm-mine .cm-quote { border-left-color: #fff; background: rgba(255, 255, 255, .35); }
.cm-msg.cm-mine .cm-quote-name { color: #4a3fb8; }
.cm-flash .cm-bubble { animation: cmFlash 1.2s ease; }
@keyframes cmFlash { 0%, 60% { box-shadow: 0 0 0 3px rgba(91, 78, 224, .45); } 100% { box-shadow: none; } }

/* sabitlenen mesaj cubugu */
.cm-pinbar { display: none; align-items: center; gap: 8px; padding: 6px 14px; background: #fff; border-bottom: 1px solid #e6e8ee; cursor: pointer; flex: none; }
.cm-pinbar:hover { background: #f7f8fc; }
.cm-pinbar-ic { display: flex; color: #5b4ee0; flex: none; }
.cm-pinbar-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-pinbar-label { font-size: 10.5px; font-weight: 800; color: #5b4ee0; }
.cm-pinbar-text { min-width: 0; font-size: 12px; font-weight: 700; color: #4a4f63; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-root .cm-pinbar-unpin { width: 28px; height: 28px; padding: 0; flex: none; border: none; border-radius: 7px; background: transparent; color: #8a8f9e; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cm-root .cm-pinbar-unpin:hover { background: #f0f1f6; color: #c23a4e; }

/* tepkiler */
.cm-reactions { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0 1px; clear: both; }
.cm-root .cm-reaction { border: none; background: rgba(91, 78, 224, .10); border-radius: 11px; padding: 2px 8px; font-size: 12.5px; font-weight: 800; color: #4a4f63; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 3px; transition: background .12s; }
.cm-root .cm-reaction:hover { background: rgba(91, 78, 224, .18); }
.cm-root .cm-reaction.cm-myreact { background: #5b4ee0; color: #fff; }
.cm-emojirow { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid #f2f3f7; }
.cm-root .cm-emojibtn { border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; padding: 5px 6px; border-radius: 8px; transition: transform .1s, background .1s; }
.cm-root .cm-emojibtn:hover { background: #f0f1f6; transform: scale(1.2); }
.cm-root .cm-emojibtn.cm-emoji-active { background: #e0dcfa; }

/* mesaj menusu (duzenle / sil) */
.cm-msgmenu { position: fixed; z-index: 1080; background: #fff; border: 1px solid #d9dce6; border-radius: 9px; box-shadow: 0 8px 28px rgba(16, 18, 32, .20); overflow: hidden; min-width: 120px; animation: cmPop .12s ease; }
.cm-msgmenu-item { display: block; width: 100%; text-align: left; border: none; background: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; color: #1a1d29; padding: 9px 14px; cursor: pointer; }
.cm-msgmenu-item:hover { background: #f3f4f8; }
.cm-msgmenu-danger { color: #c23a4e; }

/* duzenleme cubugu */
.cm-editbar { display: none; align-items: center; gap: 8px; padding: 7px 12px; background: #f4f3fd; border-top: 1px solid #e0dcfa; flex: none; }
.cm-editbar-text { flex: 1; font-size: 12px; font-weight: 800; color: #5b4ee0; }
.cm-editbar-cancel { width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: #5b4ee0; cursor: pointer; font-size: 13px; line-height: 1; }
.cm-editbar-cancel:hover { background: #e0dcfa; }

/* ---------- kullanici popup'i ---------- */
.cm-clickable { cursor: pointer; }
.cm-clickable:hover { text-decoration: underline; }
.cm-userpop { position: fixed; z-index: 1080; background: #fff; border: 1px solid #d9dce6; border-radius: 10px; padding: 10px 12px; min-width: 180px; box-shadow: 0 8px 28px rgba(16, 18, 32, .20); animation: cmPop .14s ease; }
.cm-userpop-top { display: flex; align-items: center; gap: 8px; }
.cm-userpop-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #5b4ee0; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cm-userpop-name { font-size: 13px; font-weight: 800; color: #1a1d29; display: flex; align-items: center; gap: 6px; }
.cm-userpop-status { margin-top: 7px; font-size: 11.5px; font-weight: 700; color: #8a8f9e; display: flex; align-items: center; gap: 5px; }
.cm-userpop-status.cm-online { color: #2f9e64; }
.cm-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f9e64; display: inline-block; }

/* ---------- ek onizleme ---------- */
.cm-attach { padding: 8px 12px; border-top: 1px solid #e6e8ee; background: #f7f8fa; display: flex; align-items: center; gap: 10px; }
.cm-attach img, .cm-attach video { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid #e6e8ee; }
.cm-attach video { background: #000; border: none; }
.cm-attach-info { flex: 1; min-width: 0; }
.cm-attach-name { font-size: 12px; font-weight: 800; color: #3a3f52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-attach-kind { font-size: 10.5px; color: #8a8f9e; font-weight: 600; }
.cm-attach-remove { width: 28px; height: 28px; padding: 0; flex: none; border: none; border-radius: 6px; background: #f0e1e5; color: #c23a4e; cursor: pointer; font-size: 13px; line-height: 1; }
.cm-attach-remove:hover { background: #ead2d8; }

/* ---------- sesli arama ---------- */
.cm-callscreen { display: none; position: absolute; inset: 0; z-index: 30; background: linear-gradient(180deg, #37306b 0%, #1d1936 100%); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 8px; animation: cmFade .18s ease; }
.cm-call-avatar { width: 96px; height: 96px; border-radius: 50%; background: #5b4ee0; color: #fff; font-size: 38px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.cm-call-name { font-size: 21px; font-weight: 800; margin-top: 10px; max-width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-call-status { font-size: 13.5px; font-weight: 700; opacity: .75; min-height: 19px; font-variant-numeric: tabular-nums; }
.cm-call-actions { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 36px; }
.cm-root .cm-call-btn { width: 62px; height: 62px; padding: 0; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .1s, background .12s; }
.cm-root .cm-call-btn:active { transform: scale(.92); }
.cm-root .cm-call-answer { background: #2f9e64; animation: cmCallPulse 1.6s ease-in-out infinite; }
.cm-root .cm-call-answer:hover { background: #278a56; }
.cm-root .cm-call-hangup { background: #e0334f; }
.cm-root .cm-call-hangup:hover { background: #c92c45; }
.cm-call-hangup svg { transform: rotate(135deg); }
.cm-root .cm-call-mute { width: 50px; height: 50px; background: rgba(255,255,255,.16); }
.cm-root .cm-call-mute:hover { background: rgba(255,255,255,.26); }
.cm-root .cm-call-mute.cm-call-muted { background: #fff; color: #1d1936; }
@keyframes cmCallPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,158,100,.55); } 60% { box-shadow: 0 0 0 14px rgba(47,158,100,0); } }

/* aramalar sekmesi (telefon usulu gecmis) */
.cm-callsection { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 7px; background: #fff; box-shadow: 0 1px 0 #eceef3; }
.cm-callsection-n { font-size: 10px; font-weight: 700; color: #b3b8c4; text-transform: none; letter-spacing: 0; }
.cm-callrow-right { display: flex; align-items: center; gap: 8px; flex: none; }
.cm-callback-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: #eef0fb; color: #5b4ee0; cursor: pointer; }
.cm-callback-btn:hover { background: #e2e5fa; }
.cm-calldir { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: #2f9e64; }
.cm-calldir-missed { color: #e0503f; }
.cm-call-missed { color: #e0503f; }
.cm-emptynote { padding: 26px 16px; text-align: center; color: #8a8f9e; font-size: 13px; }

/* goruntulu arama katmanlari */
.cm-call-remote { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cm-call-pip { display: none; position: absolute; top: 14px; right: 14px; width: 96px; height: 130px; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,.5); background: #12102a; z-index: 3; box-shadow: 0 4px 14px rgba(0,0,0,.4); cursor: pointer; }
.cm-call-pip:active { transform: scale(.97); }
.cm-call-local { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.cm-mirror { transform: scaleX(-1); }
.cm-call-pipoff { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: #221f45; color: rgba(255,255,255,.72); }
.cm-call-swap { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* buyuk alandaki kisi kamerasini kapattiginda */
.cm-call-camoff { display: none; position: absolute; inset: 0; z-index: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, #2c2757 0%, #17142e 100%); }
.cm-call-camoff-av { width: 92px; height: 92px; border-radius: 50%; background: #4c4682; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 600; background-size: cover; background-position: center; }
.cm-call-camoff-text { font-size: 14px; color: rgba(255,255,255,.78); }
.cm-callscreen .cm-call-avatar, .cm-callscreen .cm-call-name, .cm-callscreen .cm-call-status, .cm-callscreen .cm-call-actions { position: relative; z-index: 2; }
.cm-callscreen.cm-video-active .cm-call-avatar { display: none; }
.cm-callscreen.cm-video-active .cm-call-name,
.cm-callscreen.cm-video-active .cm-call-status { text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.cm-callscreen.cm-video-active { justify-content: flex-end; padding-bottom: 26px; }
.cm-callscreen.cm-video-active .cm-call-actions { margin-top: 14px; }

/* grup sesli sohbeti cubuklari */
.cm-gcallbar, .cm-gcalljoin { display: none; align-items: center; gap: 8px; padding: 7px 12px; flex: none; }
.cm-gcallbar { background: linear-gradient(90deg, #2f9e64, #268253); color: #fff; }
.cm-gcalljoin { background: #eafaf1; border-bottom: 1px solid #cdeeda; color: #1d7a4a; cursor: default; }
.cm-gcallbar-text { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-gcall-live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #fff; animation: cmGcallBlink 1.4s ease-in-out infinite; }
.cm-gcalljoin .cm-gcall-live { background: #2f9e64; }
@keyframes cmGcallBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.cm-root .cm-gcallbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: none; border-radius: 8px; background: rgba(255,255,255,.18); color: #fff; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px 10px; min-width: 30px; cursor: pointer; transition: background .12s; }
.cm-root .cm-gcallbtn:hover { background: rgba(255,255,255,.30); }
.cm-root .cm-gcallbtn.cm-gcall-muted { background: #fff; color: #1d7a4a; }
.cm-root .cm-gcallbtn-danger { background: rgba(0,0,0,.22); }
.cm-root .cm-gcallbtn-danger:hover { background: #e0334f; }
.cm-root .cm-gcallbtn-join { background: #2f9e64; }
.cm-root .cm-gcallbtn-join:hover { background: #278a56; }
.cm-room-preview.cm-gcall-preview { color: #2f9e64; font-weight: 800; }

/* misafir sohbeti cubugu */
.cm-guestbar { display: none; align-items: center; gap: 8px; padding: 7px 12px; flex: none; background: #f4f3fd; border-bottom: 1px solid #e0dcfa; color: #4a3fb8; }
.cm-guestbar-ic { display: flex; flex: none; color: #5b4ee0; }
.cm-guestbar .cm-gcallbar-text { color: #4a3fb8; }
.cm-root .cm-guestbtn { background: #5b4ee0; }
.cm-root .cm-guestbtn:hover { background: #4f43cc; }
.cm-root .cm-guestbtn.cm-gcallbtn-danger { background: #e0334f; }
.cm-root .cm-guestbtn.cm-gcallbtn-danger:hover { background: #c92c45; }
.cm-guestbar.cm-guest-ended { background: #f0f1f6; border-bottom-color: #e6e8ee; color: #8a8f9e; }
.cm-guestbar.cm-guest-ended .cm-gcallbar-text { color: #8a8f9e; }
.cm-guestbar.cm-guest-ended .cm-guestbar-ic { color: #8a8f9e; }

/* sesli sohbet paneli (Telegram usulu alttan acilan katman) */
@keyframes cmGovUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cm-gcallov { display: none; position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%; z-index: 28; flex-direction: column; background: linear-gradient(180deg, #232941 0%, #171b2c 100%); color: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.45); animation: cmGovUp .2s ease; }
.cm-gov-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; flex: none; }
.cm-gov-titles { flex: 1; min-width: 0; }
.cm-gov-title { font-size: 15.5px; font-weight: 800; }
.cm-gov-titlesub { font-size: 11.5px; font-weight: 700; color: #8f96b3; margin-top: 1px; }
.cm-root .cm-gov-close { width: 32px; height: 32px; padding: 0; flex: none; border: none; border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cm-root .cm-gov-close:hover { background: rgba(255,255,255,.16); }
.cm-gov-rows { flex: 1; overflow-y: auto; padding: 2px 8px 8px; min-height: 60px; }
.cm-gov-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 12px; }
.cm-gov-row:hover { background: rgba(255,255,255,.05); }
.cm-gov-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; background: #5b4ee0; color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; transition: box-shadow .15s; }
.cm-gov-row.cm-gov-speaking .cm-gov-avatar { box-shadow: 0 0 0 3px rgba(63,199,122,.85); }
.cm-gov-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-gov-name { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-gov-status { font-size: 11.5px; font-weight: 700; color: #6ea8f7; margin-top: 1px; }
.cm-gov-status.cm-gov-st-speak { color: #3fc77a; }
.cm-gov-status.cm-gov-st-muted { color: #8f96b3; }
.cm-gov-mic { display: inline-flex; flex: none; color: #9aa3c4; }
.cm-gov-mic.cm-gov-mic-off { color: #e0334f; }
.cm-root .cm-gov-act { flex: none; border: none; border-radius: 8px; background: rgba(255,255,255,.10); color: #fff; font-family: inherit; font-size: 11px; font-weight: 800; padding: 6px 9px; cursor: pointer; }
.cm-root .cm-gov-act:hover { background: rgba(255,255,255,.20); }
.cm-root .cm-gov-act-danger { color: #ff8296; }
.cm-gov-controls { display: flex; align-items: flex-start; justify-content: space-evenly; padding: 12px 10px 18px; flex: none; }
.cm-gov-ctlwrap { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; }
.cm-root .cm-gov-ctl { width: 52px; height: 52px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, transform .1s; }
.cm-root .cm-gov-ctl:active { transform: scale(.92); }
.cm-root .cm-gov-ctl:hover { background: rgba(255,255,255,.22); }
.cm-root .cm-gov-spk.cm-gov-spk-off { background: #fff; color: #171b2c; }
.cm-root .cm-gov-leave { background: #e0334f; }
.cm-root .cm-gov-leave:hover { background: #c92c45; }
.cm-gov-leave svg { transform: rotate(135deg); }
.cm-root .cm-gov-bigmute { width: 86px; height: 86px; padding: 0; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; background: radial-gradient(circle at 30% 25%, #3fc77a, #1e9e62 70%); box-shadow: 0 0 0 8px rgba(63,199,122,.16), 0 6px 22px rgba(0,0,0,.35); transition: transform .1s; }
.cm-root .cm-gov-bigmute:active { transform: scale(.94); }
.cm-root .cm-gov-bigmute svg { width: 34px; height: 34px; }
.cm-root .cm-gov-bigmute.cm-gov-muted { background: radial-gradient(circle at 30% 25%, #5a6180, #3a3f57 70%); box-shadow: 0 0 0 8px rgba(122,130,160,.14), 0 6px 22px rgba(0,0,0,.35); }
.cm-gov-mutelabel { font-size: 11.5px; font-weight: 800; color: #c3c9de; }
.cm-gov-ctllabel { font-size: 10.5px; font-weight: 800; color: #8f96b3; }

/* arama kaydi cipi (sohbet icinde) */
.cm-bubble.cm-callmsg { display: flex; align-items: center; gap: 9px; padding: 8px 10px; }
.cm-call-ic { width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(47,158,100,.14); color: #2f9e64; display: flex; align-items: center; justify-content: center; }
.cm-call-ic.cm-call-ic-missed { background: rgba(224,51,79,.12); color: #e0334f; }
.cm-call-mid { display: flex; flex-direction: column; min-width: 0; }
.cm-call-title { font-size: 13px; font-weight: 800; color: #1a1d29; }
.cm-call-sub { font-size: 11px; font-weight: 700; color: #8a8f9e; margin-top: 1px; }
.cm-bubble.cm-callmsg .cm-time-in { margin-left: 14px; align-self: flex-end; }

/* ---------- izin merkezi ---------- */
.cm-perm-list { margin: 10px 14px 0; border: 1px solid #e6e8ee; border-radius: 12px; overflow: hidden; }
.cm-encprompt .cm-perm-list { margin: 14px 0 0; text-align: left; }
.cm-perm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; }
.cm-perm-row + .cm-perm-row { border-top: 1px solid #f2f3f7; }
.cm-perm-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #f0f1f6; color: #8a8f9e; display: flex; align-items: center; justify-content: center; }
.cm-perm-ic.cm-perm-ok { background: #eafaf1; color: #2f9e64; }
.cm-perm-ic.cm-perm-no { background: #fdecef; color: #c23a4e; }
.cm-perm-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-perm-label { font-size: 13px; font-weight: 800; color: #1a1d29; }
.cm-perm-desc { font-size: 11px; font-weight: 600; color: #8a8f9e; line-height: 1.4; }
.cm-perm-chip { flex: none; font-size: 10.5px; font-weight: 800; border-radius: 7px; padding: 3px 8px; background: #f0f1f6; color: #8a8f9e; }
.cm-perm-chip.cm-perm-granted { background: #eafaf1; color: #1d7a4a; }
.cm-perm-chip.cm-perm-denied { background: #fdecef; color: #c23a4e; }
.cm-perm-chip.cm-perm-prompt { background: #fff8e6; color: #8a6d1f; }

/* ---------- sesli / video mesaj ---------- */
.cm-recbar { display: none; align-items: center; gap: 8px; padding: 8px 12px; flex: none; background: #fff4f5; border-top: 1px solid #f3dadd; }
.cm-rec-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: #e0334f; animation: cmGcallBlink 1.2s ease-in-out infinite; }
.cm-rec-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-rec-label { font-size: 11.5px; font-weight: 800; color: #c23a4e; }
.cm-rec-time { font-size: 12px; font-weight: 800; color: #4a4f63; font-variant-numeric: tabular-nums; }
.cm-rec-preview { display: none; width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; background: #000; transform: scaleX(-1); }
.cm-root .cm-rec-cancel { background: #f0f1f6; color: #4a4f63; }
.cm-root .cm-rec-cancel:hover { background: #e6e8ee; }
.cm-root .cm-rec-send { background: #2f9e64; }
.cm-root .cm-rec-send:hover { background: #278a56; }
.cm-btn-attach.cm-recbtn { color: #8a8f9e; }
.cm-btn-attach.cm-recbtn:hover { color: #5b4ee0; background: #f0f1f6; }
/* sesli/video mesaj balonlari: icerik kenarlara yapismasin */
.cm-bubble.cm-b-voice { padding: 9px 13px 7px; }
.cm-bubble.cm-b-vnote { padding: 6px 12px 5px; }
.cm-bubble.cm-b-vnote .cm-time-in { margin-right: 2px; }

/* balonlarda oynatma — kompakt sesli mesaj oynaticisi */
.cm-voice { display: flex; align-items: center; gap: 10px; min-width: 200px; max-width: 260px; padding: 2px 0 4px; }
.cm-voice audio { display: none; }
.cm-root .cm-voice-play { width: 34px; height: 34px; flex: none; padding: 0; border: none; border-radius: 50%; background: #5b4ee0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, transform .1s; }
.cm-root .cm-voice-play:hover { background: #4f43cc; }
.cm-root .cm-voice-play:active { transform: scale(.93); }
.cm-voice-bar { flex: 1; min-width: 60px; height: 4px; border-radius: 3px; background: rgba(91,78,224,.22); cursor: pointer; position: relative; }
.cm-voice-bar::after { content: ''; position: absolute; inset: -9px 0; } /* dokunma alani */
.cm-voice-fill { height: 100%; width: 0; border-radius: 3px; background: #5b4ee0; transition: width .1s linear; }
.cm-voice-time { flex: none; font-size: 11px; font-weight: 800; color: #8a8f9e; font-variant-numeric: tabular-nums; }
.cm-msg.cm-mine .cm-voice-bar { background: rgba(74,63,184,.25); }
.cm-msg.cm-mine .cm-voice-time { color: #6b62a8; }
/* video mesaj: kare + yumusak koseli (yuvarlakta kontroller kirpiliyordu) */
.cm-vnote { position: relative; width: 230px; height: 230px; border-radius: 14px; overflow: hidden; background: #000; }
.cm-vnote video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-vnote-dur { position: absolute; left: 8px; top: 8px; background: rgba(8,9,16,.6); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 7px; padding: 2px 7px; font-variant-numeric: tabular-nums; pointer-events: none; }
.cm-vnote .cm-media-expand { top: 8px; right: 8px; }
.cm-rec-dur { font-size: 10.5px; font-weight: 800; color: #8a8f9e; flex: none; }

/* ---------- medya goruntuleyici (lightbox) ---------- */
.cm-lightbox { display: none; position: absolute; inset: 0; z-index: 60; background: rgba(8,9,16,.94); flex-direction: column; animation: cmFade .15s ease; }
.cm-lb-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none; }
.cm-lb-cap { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: #fff; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-root .cm-lb-btn { width: 34px; height: 34px; flex: none; border: none; border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cm-root .cm-lb-btn:hover { background: rgba(255,255,255,.24); }
.cm-lb-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 12px 18px; min-height: 0; }
.cm-lb-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #000; }
/* balonda video buyutme butonu */
.cm-media-wrap { position: relative; }
.cm-root .cm-media-expand { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; background: rgba(8,9,16,.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cm-root .cm-media-expand:hover { background: rgba(8,9,16,.8); }

/* ---------- hesap engel karti ---------- */
.cm-lockout { display: none; position: absolute; inset: 0; z-index: 50; background: #eef1f6; align-items: center; justify-content: center; padding: 20px; animation: cmFade .2s ease; }
.cm-lockout-card { width: 100%; max-width: 360px; background: #fff; border: 1px solid #e5e9f4; border-radius: 16px; padding: 28px 24px; box-shadow: 0 12px 40px rgba(16,18,32,.10); text-align: center; }
.cm-lockout-ic { width: 52px; height: 52px; border-radius: 14px; background: #5b4ee0; color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.cm-lockout-title { font-size: 17px; font-weight: 800; color: #1a1d29; margin-bottom: 6px; }
.cm-lockout-text { font-size: 13.5px; font-weight: 700; color: #4a4f63; line-height: 1.6; }

/* ---------- kriptolu sohbet ---------- */
.cm-encprompt { background: rgba(16,18,32,.45); z-index: 45; }
.cm-encprompt .cm-lockout-card { max-width: 340px; text-align: left; }
.cm-encprompt .cm-lockout-ic, .cm-encprompt .cm-lockout-title { margin-left: auto; margin-right: auto; }
.cm-encprompt .cm-lockout-title { text-align: center; }
/* sekmeler */
.cm-enctabs { display: flex; gap: 4px; background: #f0f1f6; border-radius: 10px; padding: 4px; margin: 14px 0 12px; }
.cm-root .cm-enctab { flex: 1; border: none; border-radius: 8px; background: transparent; font-family: inherit; font-size: 12px; font-weight: 800; color: #8a8f9e; padding: 8px 4px; cursor: pointer; }
.cm-root .cm-enctab.cm-enctab-active { background: #fff; color: #5b4ee0; box-shadow: 0 1px 3px rgba(16,18,32,.10); }
.cm-enc-status { font-size: 12.5px; font-weight: 700; color: #8a6d1f; background: #fff8e6; border: 1px solid #f0e2bd; border-radius: 9px; padding: 8px 10px; line-height: 1.5; }
.cm-enc-status.cm-enc-status-on { color: #1d7a4a; background: #eafaf1; border-color: #cdeeda; }
.cm-enc-status code { font-family: Consolas, Menlo, monospace; background: rgba(0,0,0,.06); border-radius: 4px; padding: 1px 5px; }
.cm-enc-hint { font-size: 11.5px; font-weight: 600; color: #8a8f9e; line-height: 1.5; margin-top: 8px; }
/* okuma anahtari listesi */
.cm-enc-keys { margin-top: 10px; border: 1px solid #e6e8ee; border-radius: 10px; overflow: hidden; }
.cm-enc-keyrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.cm-enc-keyrow + .cm-enc-keyrow { border-top: 1px solid #f2f3f7; }
.cm-enc-keyic { display: flex; color: #5b4ee0; flex: none; }
.cm-enc-keymid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-enc-keyval { font-size: 12.5px; font-weight: 800; color: #1a1d29; font-family: Consolas, Menlo, monospace; }
.cm-enc-keysub { font-size: 10.5px; font-weight: 700; color: #8a8f9e; }
.cm-root .cm-enc-eye { width: 100%; margin-top: 8px; border: none; background: transparent; color: #5b4ee0; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 4px; cursor: pointer; }
.cm-root .cm-enc-eye:hover { text-decoration: underline; }
.cm-root .cm-encp-input { width: 100%; margin: 14px 0 0; text-align: center; letter-spacing: 2px; font-family: Consolas, Menlo, monospace; }
.cm-encp-btns { display: flex; gap: 8px; margin-top: 14px; }
.cm-root .cm-encp-btn { flex: 1; margin: 0; padding: 11px 8px; font-size: 12.5px; }
.cm-back.cm-enc-on { color: #ffd66b; }
/* composer'daki sifreli mesaj butonu */
.cm-btn-attach.cm-enc-toggle.cm-enc-on { background: #eef0fb; color: #5b4ee0; }
.cm-composer.cm-enc-sending .cm-input { background: #f4f3fd; box-shadow: inset 0 0 0 1px #d4cdfb; }
.cm-enclock { display: inline-flex; align-items: center; opacity: .75; }
.cm-root .cm-encp-off { display: none; width: 100%; margin: 12px 0 0; border: none; background: transparent; color: #c23a4e; font-family: inherit; font-size: 11.5px; font-weight: 800; padding: 6px; cursor: pointer; }
.cm-root .cm-encp-off:hover { text-decoration: underline; }
/* kriptolu oda uyari cubugu (anahtar gir / esmiyor) */
.cm-encbar { display: none; align-items: center; gap: 8px; padding: 7px 12px; flex: none; background: #fff8e6; border-bottom: 1px solid #f0e2bd; color: #8a6d1f; }
.cm-encbar-ic { display: flex; flex: none; color: #b08a2f; }
.cm-encbar .cm-gcallbar-text { color: #8a6d1f; }
.cm-root .cm-encbar-btn { background: #b08a2f; }
.cm-root .cm-encbar-btn:hover { background: #96751f; }
.cm-encmedia { display: flex; align-items: center; gap: 8px; min-width: 180px; padding: 22px 16px; background: #f0f1f6; border-radius: 7px; color: #8a8f9e; font-size: 13px; font-weight: 800; justify-content: center; }
.cm-encmedia span { font-size: 12px; }

/* ---------- composer ---------- */
.cm-composer { padding: 8px 10px; border-top: 1px solid #e6e8ee; background: #fff; display: flex; align-items: center; gap: 6px; flex: none; }
.cm-btn-attach { width: 38px; height: 38px; padding: 0; flex: none; border: none; border-radius: 50%; background: transparent; color: #8a8f9e; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; }
.cm-btn-attach:hover { background: #f0f1f6; color: #5b4ee0; }
.cm-input { flex: 1; min-width: 0; height: 38px; border: none; border-radius: 19px; padding: 0 14px; font-family: inherit; font-size: 13.5px; color: #1a1d29; outline: none; background: #f0f1f6; }
.cm-input:focus { background: #eaecf2; }
.cm-btn-send { width: 38px; height: 38px; padding: 0; flex: none; border: none; border-radius: 50%; background: #5b4ee0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.cm-btn-send:hover { background: #4f43cc; }
.cm-btn-send:disabled { opacity: .5; cursor: default; }