/* Imbox + yozish qatori (2026-10-07) — yaxlit "messenjer" ko'rinishi. crm.html'dagi inline CSS'dan KEYIN ulanadi (ustun turadi).
   Faqat tokenlar ishlatiladi (yorug'/tungi mavzuda bir xil ishlaydi). */

/* ---- Umumiy karta: ro'yxat + suhbat bitta ramkada ---- */
.telegram-shell{gap:0;background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.telegram-list-pane{width:340px;background:transparent;border:0;border-radius:0;border-right:1px solid var(--border-dark)}
.telegram-thread-pane{display:flex;flex-direction:column;background:var(--bg-main)}
.telegram-thread-pane>.chat-shell{flex:1;min-height:0;height:100%;border:0;border-radius:0;background:transparent}
.inbox-channel-select-wrap{padding:14px 14px 12px!important;border-bottom:1px solid var(--border-dark)!important}
.inbox-channel-select{background-color:var(--bg-main);border-radius:10px;font-weight:500}

/* ---- Suhbatlar ro'yxati ---- */
.telegram-list-group-title{padding:14px 18px 6px;letter-spacing:.06em}
.telegram-conv-item{position:relative;gap:12px;padding:12px 18px;border-bottom:0;transition:background .12s}
.telegram-conv-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:transparent;transition:background .12s}
.telegram-conv-item.active{background:var(--accent-soft)}
.telegram-conv-item.active::before{background:var(--accent)}
.telegram-conv-item .tci-avatar{width:40px;height:40px;font-size:14px;background:var(--accent-soft);border:0;color:var(--accent)}
.telegram-conv-item .tci-name{font-size:13.5px;font-weight:600}
.telegram-conv-item .tci-preview{font-size:12.5px;margin-top:3px}
.telegram-conv-item .tci-meta{font-size:11px;align-self:flex-start;margin-top:3px}
.telegram-list-scroll,.chat-scroll{scrollbar-width:thin;scrollbar-color:var(--border-dark2) transparent}

/* ---- Suhbat sarlavhasi (tepada yopishib turadi) ---- */
.chat-scroll{padding:0 28px 20px}
.telegram-thread-header{position:sticky;top:0;z-index:5;margin:0 -28px 18px;padding:14px 28px;background:var(--bg-panel);border-bottom:1px solid var(--border-dark)}
.telegram-thread-header .cm-avatar{width:40px;height:40px;font-size:15px;background:var(--accent-soft);border:0;color:var(--accent)}
.telegram-thread-header .tth-name{font-size:15px;font-weight:600}
.telegram-thread-header .tth-sub{font-size:12px}

/* ---- Xabarlar: pufakchalar ---- */
.chat-msg{align-items:flex-end;margin-bottom:10px}
.chat-msg .cm-avatar{width:28px;height:28px;font-size:11px;background:var(--accent-soft);border:0;color:var(--accent)}
.chat-msg.own .cm-avatar{display:none}
.chat-msg .cm-body{max-width:68%;display:flex;flex-direction:column-reverse}
.chat-msg .cm-head{margin:4px 4px 0;gap:6px}
.chat-msg .cm-time{font-size:10.5px}
.chat-msg .cm-name{font-size:11.5px;font-weight:600}
.chat-msg .cm-bubble{background:var(--bg-panel);border:1px solid var(--border-dark);border-radius:16px 16px 16px 5px;padding:9px 14px;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.chat-msg .cm-text{font-size:14px;line-height:1.5}
.chat-msg.own .cm-body{align-items:flex-end}
.chat-msg.own .cm-bubble{background:var(--accent);border-color:var(--accent);border-radius:16px 16px 5px 16px}
.chat-msg.own .cm-bubble .cm-text,.chat-msg.own .cm-bubble .cm-text a{color:#fff}
.chat-day-divider span{background:var(--bg-panel);border:1px solid var(--border-dark);padding:4px 14px}

/* ---- Bo'sh holat (suhbat tanlanmaganda) ---- */
.inbox-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;pointer-events:none}
.inbox-empty .ie-icon{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.inbox-empty .ie-title{font-size:16px;font-weight:600;color:var(--text-main)}
.inbox-empty .ie-text{font-size:13px;color:var(--text-dim);max-width:320px;line-height:1.55}
.chat-shell:has(#inbox-thread-header[style*="flex"]) .inbox-empty{display:none}

/* ---- Yozish qatori: to'liq ramkali, yopiq ko'rinish (Imbox, ichki suhbat, zdelka/kontakt izohi, Telegram) ---- */
.chat-input-row,.timeline-note-input{align-items:flex-end;gap:10px;padding:14px 20px 16px;background:var(--bg-panel);border-top:1px solid var(--border-dark)}
.chat-input-row textarea,.timeline-note-input textarea{
  padding:11px 16px;min-height:44px;max-height:140px;line-height:1.45;
  background:var(--bg-main);color:var(--text-main);font-style:normal;
  border:1px solid var(--border-dark2);border-bottom:1px solid var(--border-dark2);border-radius:14px;
  transition:border-color .12s,box-shadow .12s}
.chat-input-row textarea::placeholder,.timeline-note-input textarea::placeholder{color:var(--text-dim);font-style:normal}
.chat-input-row textarea:focus,.timeline-note-input textarea:focus{outline:none;border-color:var(--accent);border-bottom:1px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-input-row .btn,.timeline-note-input .btn{height:44px;padding:0 20px;border-radius:12px;font-weight:600;flex-shrink:0;
  background:var(--accent);color:#fff;border:0;transition:background .12s,opacity .12s,transform .06s}
.chat-input-row .btn:hover,.timeline-note-input .btn:hover{background:var(--accent-dark);color:#fff}
.chat-input-row .btn:active,.timeline-note-input .btn:active{transform:translateY(1px)}
#dd-telegram-compose{border-top:1px solid var(--border-dark)!important}
.timeline-note-input .btn{opacity:.45;pointer-events:none}
.timeline-note-input .btn.show{opacity:1;pointer-events:auto}
/* Telegram yozish qatorida tugma doim faol (u matnga bog'liq emas) */
#dd-telegram-compose .btn{opacity:1;pointer-events:auto}

@media (max-width:900px){
  .telegram-shell{border-radius:12px}
  .telegram-list-pane{width:100%;border-right:0;border-bottom:1px solid var(--border-dark)}
  .chat-scroll{padding:0 14px 16px}
  .telegram-thread-header{margin:0 -14px 14px;padding:12px 14px}
  .chat-msg .cm-body{max-width:84%}
}

/* ---- Tuzatishlar ---- */
.telegram-thread-header .cm-avatar,.chat-msg .cm-avatar,.telegram-conv-item .tci-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.telegram-thread-header .cm-avatar img,.chat-msg .cm-avatar img,.telegram-conv-item .tci-avatar img{width:100%;height:100%;object-fit:cover}
.chat-msg .cm-avatar{margin-bottom:20px}
.telegram-my-connection:empty{display:none}