/* WTC-WIDGET-CSS  Telegram Live Chat widget (scoped under .tlc-) */
.tlc-launcher{position:fixed !important;right:22px !important;bottom:22px !important;z-index:2147483000 !important;width:60px !important;height:60px !important;border-radius:50% !important;
  background:linear-gradient(135deg,#2563eb,#1e3a8a) !important;color:#fff !important;border:none !important;padding:0 !important;margin:0 !important;cursor:pointer !important;box-sizing:border-box !important;
  box-shadow:0 10px 28px rgba(37,99,235,.42) !important;display:block !important;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s !important}
.tlc-launcher:hover{transform:scale(1.07) !important}
.tlc-launcher:active{transform:scale(.96) !important}
/* Icon wrappers fill the circle and centre the SVG; the two icons overlay for the crossfade. */
.tlc-launcher .tlc-ico-chat,.tlc-launcher .tlc-ico-close{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;transition:transform .2s ease,opacity .2s ease !important}
.tlc-launcher svg{width:27px !important;height:27px !important;fill:#fff !important}
.tlc-launcher .tlc-ico-close{opacity:0 !important;transform:rotate(-90deg) scale(.6) !important}
.tlc-launcher.is-open .tlc-ico-chat{opacity:0 !important;transform:rotate(90deg) scale(.6) !important}
.tlc-launcher.is-open .tlc-ico-close{opacity:1 !important;transform:none !important}
.tlc-badge{position:absolute !important;top:-3px !important;right:-3px !important;min-width:20px !important;height:20px !important;border-radius:10px !important;background:#ef4444 !important;color:#fff !important;
  font:700 11px/20px system-ui,sans-serif !important;text-align:center !important;padding:0 5px !important;display:none !important;border:2px solid #fff !important;box-shadow:0 2px 6px rgba(0,0,0,.2) !important}

.tlc-panel{position:fixed !important;right:22px !important;bottom:94px !important;z-index:2147483000 !important;width:372px !important;max-width:calc(100vw - 32px) !important;
  height:560px !important;max-height:calc(100vh - 130px) !important;background:#fff !important;border-radius:18px !important;overflow:hidden !important;
  box-shadow:0 18px 60px rgba(15,23,42,.32) !important;display:flex !important;flex-direction:column !important;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  opacity:0 !important;visibility:hidden !important;transform:translateY(18px) scale(.97) !important;pointer-events:none !important;
  transition:opacity .22s ease,transform .22s cubic-bezier(.34,1.4,.64,1),visibility .22s !important}
.tlc-panel.tlc-open{opacity:1 !important;visibility:visible !important;transform:none !important;pointer-events:auto !important}

/* Left-side placement */
.tlc-launcher.tlc-left{right:auto !important;left:22px !important}
.tlc-launcher.tlc-left .tlc-badge{right:auto !important;left:-3px !important}
.tlc-panel.tlc-left{right:auto !important;left:22px !important}

/* ---- Header ---- */
.tlc-header{background:linear-gradient(135deg,#2563eb,#1e3a8a) !important;color:#fff !important;padding:15px 16px !important;display:flex !important;align-items:center !important;gap:12px !important}
.tlc-hd-avatar{width:40px !important;height:40px !important;border-radius:50% !important;background:rgba(255,255,255,.18) !important;display:flex !important;align-items:center !important;justify-content:center !important;flex:0 0 auto !important}
.tlc-hd-avatar svg{width:22px !important;height:22px !important;fill:#fff !important}
.tlc-hd-text{flex:1 !important;min-width:0 !important}
.tlc-header .tlc-hd-text h4{margin:0 !important;font-size:16px !important;font-weight:700 !important;line-height:1.2 !important;color:#fff !important;font-family:inherit !important}
.tlc-header .tlc-hd-sub{display:flex !important;align-items:center !important;gap:6px !important;font-size:12px !important;opacity:.92 !important;margin-top:2px !important;color:#fff !important}
.tlc-dot{width:8px !important;height:8px !important;border-radius:50% !important;background:#34d399 !important;box-shadow:0 0 0 0 rgba(52,211,153,.7) !important;animation:tlc-pulse 2s infinite !important}
@keyframes tlc-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.tlc-actions{display:flex !important;align-items:center !important;gap:6px !important;position:relative !important;z-index:1 !important}
.tlc-end{background:rgba(255,255,255,.18) !important;border:none !important;color:#fff !important;cursor:pointer !important;font:600 12px/1 system-ui,sans-serif !important;padding:6px 11px !important;border-radius:7px !important;display:none !important}
.tlc-end:hover{background:rgba(255,255,255,.3) !important}
.tlc-end:disabled{opacity:.55 !important;cursor:default !important}
.tlc-close{background:rgba(255,255,255,.12) !important;border:none !important;color:#fff !important;cursor:pointer !important;width:30px !important;height:30px !important;border-radius:8px !important;display:flex !important;align-items:center !important;justify-content:center !important;opacity:.9 !important}
.tlc-close:hover{opacity:1 !important;background:rgba(255,255,255,.25) !important}
.tlc-close svg{width:16px !important;height:16px !important;fill:#fff !important}

/* ---- Body ---- */
.tlc-body{flex:1 !important;overflow-y:auto !important;padding:16px 14px 8px !important;background:#f3f5f9 !important;display:flex !important;flex-direction:column !important;gap:9px !important}
.tlc-body::-webkit-scrollbar{width:8px !important}
.tlc-body::-webkit-scrollbar-thumb{background:#cfd6e2 !important;border-radius:8px !important}
.tlc-body::-webkit-scrollbar-thumb:hover{background:#b4bdcd !important}

/* ---- Prechat / welcome ---- */
.tlc-prechat{padding:22px 18px !important;display:flex !important;flex-direction:column !important}
.tlc-welcome{text-align:center !important;margin-bottom:18px !important}
.tlc-welcome-avatar{width:58px !important;height:58px !important;border-radius:50% !important;margin:0 auto 12px !important;background:linear-gradient(135deg,#2563eb,#1e3a8a) !important;display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0 8px 20px rgba(37,99,235,.3) !important}
.tlc-welcome-avatar svg{width:28px !important;height:28px !important;fill:#fff !important}
.tlc-welcome-title{margin:0 0 4px !important;font-size:18px !important;font-weight:700 !important;color:#1f2937 !important}
.tlc-welcome-sub{margin:0 !important;color:#6b7280 !important;font-size:13.5px !important;line-height:1.5 !important}
.tlc-prechat input{display:block !important;width:100% !important;box-sizing:border-box !important;
  padding:11px 14px !important;margin-bottom:10px !important;border:1px solid #dde1e8 !important;
  border-radius:10px !important;font-size:14px !important;line-height:normal !important;height:auto !important;
  background:#fff !important;color:#1f2430 !important;-webkit-text-fill-color:#1f2430 !important;
  opacity:1 !important;visibility:visible !important;
  transition:border-color .15s,box-shadow .15s !important}
.tlc-prechat input:focus{outline:none !important;border-color:#2563eb !important;box-shadow:0 0 0 3px rgba(37,99,235,.13) !important}
.tlc-btn{width:100% !important;padding:12px !important;background:linear-gradient(135deg,#2563eb,#1e3a8a) !important;color:#fff !important;border:none !important;border-radius:10px !important;
  font-size:14px !important;font-weight:600 !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
  transition:filter .15s,transform .1s !important;box-shadow:0 6px 16px rgba(37,99,235,.28) !important}
.tlc-btn:hover{filter:brightness(1.06) !important}
.tlc-btn:active{transform:translateY(1px) !important}
.tlc-btn:disabled{opacity:.6 !important;cursor:default !important}
.tlc-btn svg{width:16px !important;height:16px !important;fill:#fff !important}

/* ---- Messages ---- */
.tlc-msg{max-width:82% !important;padding:9px 13px !important;border-radius:16px !important;font-size:13.5px !important;line-height:1.45 !important;word-wrap:break-word !important;white-space:pre-wrap !important;
  animation:tlc-in .22s ease both !important;box-shadow:0 1px 2px rgba(15,23,42,.06) !important}
@keyframes tlc-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.tlc-msg.tlc-customer{align-self:flex-end !important;background:linear-gradient(135deg,#2563eb,#1e3a8a) !important;color:#fff !important;border-bottom-right-radius:5px !important}
.tlc-msg.tlc-agent{align-self:flex-start !important;background:#fff !important;color:#1f2430 !important;border:1px solid #e8ebf0 !important;border-bottom-left-radius:5px !important}
.tlc-msg.tlc-system{align-self:center !important;background:#e7ecf3 !important;color:#5b6675 !important;font-size:12px !important;border-radius:10px !important;box-shadow:none !important;text-align:center !important;max-width:92% !important}
.tlc-msg .tlc-sender{display:block !important;font-size:11px !important;font-weight:700 !important;color:#2563eb !important;margin-bottom:2px !important}
.tlc-msg a.tlc-file{color:inherit !important;text-decoration:underline !important}

/* ---- Quote & reply ---- */
.tlc-msg{position:relative !important}
.tlc-quote{display:block !important;border-left:3px solid rgba(37,99,235,.85) !important;background:rgba(37,99,235,.08) !important;border-radius:7px !important;
  padding:5px 9px !important;margin:0 0 6px !important;font-size:12px !important;line-height:1.35 !important;cursor:pointer !important;white-space:normal !important;
  overflow:hidden !important;text-overflow:ellipsis !important;max-height:54px !important;color:#475569 !important}
.tlc-msg.tlc-customer .tlc-quote{border-left-color:rgba(255,255,255,.85) !important;background:rgba(255,255,255,.16) !important;color:rgba(255,255,255,.92) !important}
.tlc-quote .tlc-quote-sender{display:block !important;font-weight:700 !important;font-size:11px !important;color:#2563eb !important;margin-bottom:1px !important}
.tlc-msg.tlc-customer .tlc-quote .tlc-quote-sender{color:#fff !important}
.tlc-reply-btn{position:absolute !important;top:-9px !important;width:24px !important;height:24px !important;border-radius:50% !important;border:1px solid #dde1e8 !important;background:#fff !important;
  color:#64748b !important;cursor:pointer !important;font:600 13px/1 system-ui,sans-serif !important;display:none !important;align-items:center !important;justify-content:center !important;
  padding:0 !important;box-shadow:0 2px 6px rgba(15,23,42,.16) !important;z-index:2 !important}
.tlc-msg.tlc-agent .tlc-reply-btn{right:-9px !important}
.tlc-msg.tlc-customer .tlc-reply-btn{left:-9px !important}
.tlc-msg:hover .tlc-reply-btn{display:flex !important}
/* Touch devices have no hover — keep the reply button visible (subtle). */
@media (hover:none){.tlc-msg .tlc-reply-btn{display:flex !important;opacity:.7 !important}}
.tlc-reply-btn:hover{color:#2563eb !important;border-color:#2563eb !important;background:#eef3ff !important}
.tlc-flash{outline:2px solid #2563eb !important;outline-offset:2px !important;transition:outline-color .3s !important}
.tlc-replybar{display:none !important;align-items:center !important;gap:8px !important;background:#f3f6fd !important;border:1px solid #dbe4f5 !important;border-left:3px solid #2563eb !important;
  border-radius:9px !important;padding:6px 9px !important;font-size:12px !important;color:#475569 !important}
.tlc-replybar-info{flex:1 !important;min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}
.tlc-replybar-info .tlc-quote-sender{display:block !important;font-weight:700 !important;font-size:11px !important;color:#2563eb !important}
.tlc-replybar-x{flex:0 0 auto !important;width:22px !important;height:22px !important;border-radius:50% !important;border:none !important;background:#e2e8f0 !important;color:#475569 !important;
  cursor:pointer !important;font:700 13px/1 system-ui,sans-serif !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important}
.tlc-replybar-x:hover{background:#cbd5e1 !important}

/* "Start new chat" button shown after a chat ends */
.tlc-newchat{display:flex !important;justify-content:center !important;padding:12px 0 4px !important}
.tlc-newchat .tlc-btn{width:auto !important;padding:10px 22px !important}

/* ---- Footer ---- */
.tlc-footer{border-top:1px solid #e8ebf0 !important;padding:10px 12px !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:8px !important;background:#fff !important;position:relative !important}
.tlc-controls{display:flex !important;align-items:flex-end !important;gap:6px !important}
.tlc-emoji-panel{position:absolute !important;bottom:56px !important;left:8px !important;right:8px !important;background:#fff !important;border:1px solid #e6e8ec !important;border-radius:12px !important;
  box-shadow:0 10px 30px rgba(15,23,42,.2) !important;padding:8px !important;display:none !important;grid-template-columns:repeat(8,1fr) !important;gap:2px !important;max-height:178px !important;overflow-y:auto !important;z-index:6 !important}
.tlc-emoji-panel.tlc-show{display:grid !important}
.tlc-emoji-panel span{cursor:pointer !important;font-size:20px !important;text-align:center !important;padding:5px 0 !important;border-radius:7px !important;line-height:1 !important}
.tlc-emoji-panel span:hover{background:#eef3ff !important}
/* Auto-growing textarea — height and overflow-y are set via JS setProperty so they override this !important baseline. */
.tlc-footer textarea{flex:1 1 auto !important;min-width:0 !important;resize:none !important;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  border:1px solid #dde1e8 !important;border-radius:21px !important;padding:11px 15px !important;font-size:13.5px !important;height:44px !important;min-height:44px !important;max-height:120px !important;overflow-y:hidden !important;
  font-family:inherit !important;line-height:1.4 !important;transition:border-color .15s !important;background:#fff !important;color:#1f2430 !important;box-sizing:border-box !important}
.tlc-footer textarea:focus{outline:none !important;border-color:#2563eb !important}
.tlc-footer textarea::-webkit-scrollbar{width:6px !important}
.tlc-footer textarea::-webkit-scrollbar-button{display:none !important;height:0 !important;width:0 !important}
.tlc-footer textarea::-webkit-scrollbar-thumb{background:#cfd6e2 !important;border-radius:6px !important}
.tlc-icon-btn{background:none !important;border:none !important;cursor:pointer !important;color:#7b8595 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:7px !important;border-radius:50% !important;transition:color .15s,background .15s !important;flex:0 0 auto !important}
.tlc-icon-btn:hover{color:#2563eb !important;background:#eef3ff !important}
.tlc-icon-btn svg{width:20px !important;height:20px !important;fill:currentColor !important}
.tlc-send-btn{width:40px !important;height:40px !important;background:linear-gradient(135deg,#2563eb,#1e3a8a) !important;color:#fff !important;border:none !important;border-radius:50% !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;flex:0 0 auto !important;transition:filter .15s,transform .1s !important;box-shadow:0 4px 12px rgba(37,99,235,.3) !important}
.tlc-send-btn:hover{filter:brightness(1.07) !important}
.tlc-send-btn:active{transform:scale(.93) !important}
.tlc-send-btn svg{width:18px !important;height:18px !important;fill:#fff !important}
/* ---- Attachment previews (tawk-style thumbnails, multiple) ---- */
.tlc-previews{display:none !important;flex-wrap:wrap !important;gap:9px !important;padding:2px 2px 0 !important}
.tlc-prev-item{position:relative !important;width:56px !important;height:56px !important;flex:0 0 auto !important}
.tlc-prev-thumb{width:100% !important;height:100% !important;border-radius:10px !important;border:1px solid #e0e5ee !important;overflow:hidden !important;background:#f3f5f9 !important;display:flex !important;align-items:center !important;justify-content:center !important}
.tlc-prev-thumb img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important}
.tlc-prev-doc{font-size:24px !important;line-height:1 !important}
.tlc-prev-name{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;font-size:8px !important;line-height:1.3 !important;background:rgba(15,23,42,.6) !important;color:#fff !important;padding:1px 4px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;border-bottom-left-radius:10px !important;border-bottom-right-radius:10px !important}
.tlc-prev-x{position:absolute !important;top:-7px !important;right:-7px !important;width:19px !important;height:19px !important;border-radius:50% !important;background:#ef4444 !important;color:#fff !important;border:2px solid #fff !important;cursor:pointer !important;font:700 12px/1 system-ui,sans-serif !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:0 !important;box-shadow:0 1px 4px rgba(0,0,0,.25) !important}
.tlc-prev-x:hover{background:#dc2626 !important}
.tlc-prev-add{width:56px !important;height:56px !important;border-radius:10px !important;border:1.5px dashed #c3ccdb !important;background:#f8fafc !important;color:#94a3b8 !important;font-size:26px !important;cursor:pointer !important;display:flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;flex:0 0 auto !important;padding:0 !important}
.tlc-prev-add:hover{border-color:#2563eb !important;color:#2563eb !important;background:#eef3ff !important}
.tlc-ended{padding:14px !important;text-align:center !important;color:#777 !important;font-size:13px !important}

/* ---- Mobile: full screen ---- */
@media (max-width:480px){
  .tlc-panel{inset:0 !important;width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;border-radius:0 !important;bottom:0 !important;right:0 !important}
  .tlc-panel.tlc-left{left:0 !important}
  .tlc-launcher{right:16px !important;bottom:16px !important}
  .tlc-launcher.tlc-left{left:16px !important}
}