#tm-btn {
  position: fixed;
  bottom: 20px; right: 20px;
  width: 80px; height: 80px;
  border: none; background: none;
  cursor: pointer; z-index: 99999;
  padding: 0;
  filter: drop-shadow(0 6px 14px rgba(180,0,0,0.5)) drop-shadow(0 2px 5px rgba(0,0,0,0.2));
  animation: tm-float 3s ease-in-out infinite;
  transition: filter 0.2s, transform 0.2s;
}
#tm-btn:hover {
  filter: drop-shadow(0 10px 20px rgba(180,0,0,0.7));
  transform: scale(1.05);
}
#tm-btn img { width: 80px; height: 80px; object-fit: contain; display: block; }
#tm-badge {
  position: absolute; top: -2px; right: -2px;
  background: white; color: #cc0000;
  font-size: 11px; font-weight: bold;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Arial, sans-serif;
  border: 2px solid #cc0000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#tm-win {
  position: fixed;
  bottom: 110px; right: 20px;
  width: 340px;
  height: calc(100vh - 130px);
  max-height: 500px; min-height: 300px;
  background: white; border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.16);
  z-index: 99998;
  display: none; flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
  border: 1px solid #f5c0c0;
  animation: tm-up 0.35s ease;
}
#tm-win.open { display: flex; }
#tm-hdr {
  position: relative;
  background: linear-gradient(160deg, #dd0000 0%, #bb0000 100%);
  padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; overflow: hidden;
}
#tm-hdr::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
#tm-hdr-logo {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  background: white; display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
#tm-hdr-logo img { width: 32px; height: 32px; object-fit: contain; display: block; margin: auto; }
#tm-hdr-info { flex: 1; }
#tm-hdr-title { color: white; font-weight: bold; font-size: 13px; }
#tm-hdr-sub { color: rgba(255,255,255,0.88); font-size: 11px; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.tm-live { width: 7px; height: 7px; background: #7fff7f; border-radius: 50%; animation: tm-blink 2s infinite; flex-shrink: 0; }
#tm-close {
  background: none; border: none; color: white;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 1; flex-shrink: 0; padding: 0;
}
#tm-close:hover { background: rgba(255,255,255,0.15); }
#tm-msgs {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 10px; background: #f8f8f8;
}
#tm-msgs::-webkit-scrollbar { width: 3px; }
#tm-msgs::-webkit-scrollbar-thumb { background: #cc0000; border-radius: 2px; }
.tm-row { display: flex; gap: 8px; animation: tm-fade 0.3s ease; align-items: flex-start; }
.tm-row.me { justify-content: flex-end; }
.tm-ava {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: white; border: 1px solid #f0c0c0;
  box-shadow: 0 1px 4px rgba(180,0,0,0.2); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tm-ava img { width: 22px; height: 22px; object-fit: contain; display: block; margin: auto; }
.tm-bub { max-width: 78%; padding: 9px 12px; font-size: 13px; line-height: 1.6; border-radius: 16px; word-wrap: break-word; overflow-wrap: anywhere; }
.tm-row.bot .tm-bub {
  background: white; color: #333;
  border-radius: 4px 16px 16px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07); border: 1px solid #eee;
}
.tm-row.me .tm-bub {
  background: linear-gradient(135deg, #cc0000, #ee1111);
  color: white; border-radius: 16px 16px 4px 16px;
}
#tm-typing { display: none; gap: 8px; align-items: center; }
.tm-d { width: 7px; height: 7px; background: #cc0000; border-radius: 50%; animation: tm-bounce 1.2s ease-in-out infinite; }
.tm-d:nth-child(2){animation-delay:0.2s} .tm-d:nth-child(3){animation-delay:0.4s}
#tm-dots {
  background: white; padding: 9px 13px; border-radius: 4px 16px 16px 16px;
  display: flex; gap: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); border: 1px solid #eee;
}
#tm-foot {
  padding: 10px 12px; border-top: 1px solid #f0e0e0;
  display: flex; gap: 8px; background: white; flex-shrink: 0;
}
#tm-inp {
  flex: 1; border: 1.5px solid #f0c0c0; border-radius: 22px;
  padding: 8px 14px; font-size: 13px;
  font-family: 'Segoe UI', Arial, sans-serif;
  outline: none; color: #333; background: white; transition: border-color 0.2s;
  min-width: 0; box-shadow: none; height: auto;
}
#tm-inp:focus { border-color: #cc0000; }
#tm-inp::placeholder { color: #bbb; }
#tm-send {
  width: 38px !important; height: 38px !important; min-width: unset !important;
  background: linear-gradient(135deg, #cc0000, #ee1111);
  border: none; border-radius: 50% !important; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s; flex-shrink: 0; padding: 0 !important;
  box-shadow: 0 3px 10px rgba(180,0,0,0.35);
}
#tm-send:hover { transform: scale(1.1); }
#tm-send:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
#tm-lead {
  display: none; margin: 8px;
  background: #fff5f5; border: 1px solid #f0b0b0;
  border-radius: 10px; padding: 10px;
  font-size: 12px; color: #555; flex-shrink: 0; max-height: 140px; overflow-y: auto;
}
#tm-lead.show { display: block; animation: tm-fade 0.4s ease; }
#tm-lead-ttl { color: #cc0000; font-weight: bold; font-size: 11px; margin-bottom: 6px; }
#tm-lead table { width: 100%; border-collapse: collapse; border: 0; margin: 0; }
#tm-lead td { padding: 2px 0; border: 0; background: none; }
#tm-lead td:first-child { color: #aaa; width: 80px; font-size: 11px; }
#tm-lead td:last-child { font-weight: 500; color: #333; font-size: 11px; }
#tm-status { margin-top: 7px; padding: 5px 9px; border-radius: 6px; font-size: 11px; text-align: center; display: none; }
#tm-status.ok { background: #e8f5e9; color: #2e7d32; display: block; }
#tm-status.err { background: #ffebee; color: #c62828; display: block; }

/* Arabe : écriture de droite à gauche */
#tm-win[dir="rtl"] .tm-row.bot .tm-bub { border-radius: 16px 4px 16px 16px; }
#tm-win[dir="rtl"] .tm-row.me .tm-bub { border-radius: 16px 16px 16px 4px; }
#tm-win[dir="rtl"] #tm-dots { border-radius: 16px 4px 16px 16px; }
#tm-win[dir="rtl"] #tm-inp { text-align: right; }

@keyframes tm-float { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-4px) rotate(-5deg)} }
@keyframes tm-up { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes tm-fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes tm-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes tm-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
@media(max-width:420px){ #tm-win { width:calc(100vw - 16px); right:8px; bottom:108px; } }