#notification-mess{
  position: fixed;
  bottom: 9rem;
  left: 20px;
  display: flex;
  align-items: flex-start;
  gap: 25px;
  z-index: 9999;
}
.tattoo-ai-widget{max-width:680px;margin:16px auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",sans-serif}
.tac-window{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#0b0b0b;color:#e5e7eb}
.tac-tabs{user-select:none;}
.tac-tab{padding:8px 30px 8px 8px;border-radius:8px 8px 0 0;background:#23272f;color:#e5e7eb;cursor:pointer;font-weight:500;margin-right:2px;outline:none;border:0;transition:background .15s}
.tac-tab.active{background:#0b0b0b;color:#f59e42;}
.tac-tab .tac-tab-close{margin-left:8px;color:#ffffff;font-weight:bold;cursor:pointer;}
.tac-messages{height:420px;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:#0f1115}
.tac-bubble{padding:12px 14px;border-radius:14px;max-width:100%;white-space:pre-wrap;line-height:1.5}
.tac-user{align-self:flex-end;background:#2563eb;color:white}
.tac-bot{align-self:flex-start;background:#1f2937;color:#e5e7eb}
.tac-form{display:flex;gap:8px;padding:10px;background:#0b0b0b;border-top:1px solid #1f2937}
.tac-form input{flex:1;padding:10px 12px;border-radius:12px;border:1px solid #374151;background:#0f1115;color:#e5e7eb}
.tac-form button{padding:10px 14px;border-radius:12px;border:0;background:#10b981;color:#ffffff;font-weight:600;height: 44px;display: flex;align-items: center;}
.tac-form button:disabled{opacity:.6}
.tac-history-controls button{cursor:pointer;}
#megamess-icon img {
object-fit: contain;
object-position: center;
width: 45px;
height: 45px;
margin: auto;
cursor: pointer;
}
#megamess-icon{
position: relative;
width: 5rem;
height: 5.3rem;
border-radius: 0.8rem;
/* background-color: #000; */
border: 1px solid #5f5f5f;
display: flex;
}
.tattoo-ai-widget{
position: fixed;
bottom: 8rem;
left: 7rem;
align-items: flex-start;
gap: 25px;
z-index: 9999;
width: 620px;
}
.tattoo-ai-widget{
display: none;

}
.tattoo-ai-widget.show{
display: block;
}

.tac-messages {
overflow-y: auto;
/* height: 100vh;  */
}

.tac-messages::-webkit-scrollbar ,.tac-tabs::-webkit-scrollbar {
width: 4px;
height: 5px;
}
.tac-messages::-webkit-scrollbar-track , .tac-tabs::-webkit-scrollbar-track{
background: #111;
}

.tac-messages::-webkit-scrollbar-thumb , .tac-tabs::-webkit-scrollbar-thumb {
background: #ff2a2a;
border-radius: 3px;
}

@media screen and (max-width: 768px) {
  .tac-messages::-webkit-scrollbar ,.tac-tabs::-webkit-scrollbar {
    width: 3px;
    height: 2px;
    }
  #notification-area{
    display: none !important;
  }
  #notification-mess {
    bottom: 1rem;
    left: 10px;
  }
  #megamess-icon {
    width: 4rem;
    height: 4.3rem;
  }
  .tattoo-ai-widget{
    width: 100%;
    left: 0;
    bottom: 5px;
  }
 
}
.tac-tab .tac-tab-close{
  position: absolute;
  top: 0;
  right: 0px;
  background: #f59e42a1;
  padding: 2px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 5px;
  width: 20px;
}
#tac-close-new{
  left: 15px;
  position: absolute;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tac-bubble-edit-btn {
  display: inline-block;
  margin-left: 8px;
  color:rgb(252, 252, 252);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  vertical-align: middle;

}
.tac-bubble-edit-btn {
  position: absolute;
  bottom: -25px;
  right: 10px;
  background: #f1f1f1;
  color: #333;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
}
.tac-bubble-edit-btn:hover {
  text-decoration: underline;
}
.tac-bubble-editing {
  background: #424242 !important;
  width: 100%;
}
.tac-bubble-edit-actions {
  margin-top: 4px;
  display: flex;
  gap: 8px;
  justify-content: end;
}
.tac-bubble-edit-actions button {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #fff;
  cursor: pointer;
}
.tac-bubble-edit-actions button:hover {
  background: #f1f5f9;
}
.tac-bubble.tac-user .tac-bubble-edit-btn{
  opacity: 0;
}
.tac-bubble.tac-user {
  position: relative;
}
.tac-bubble.tac-user:hover .tac-bubble-edit-btn{
  opacity: 1;
}
.tac-bubble-edit-input{
  padding: 8px 10px !important;
  background: #424242 !important;
  border: none !important;
  width: 100% !important;
}
.tac-tabs#tac-tabs{
  overflow-x: auto;
  width: 100%;
}

.tac-tab {
  max-width:100%;
  min-width: 150px;
  display: -webkit-box!important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical;
  overflow:hidden !important;
  position: relative;
      height: 45.5px;
}
.tac-tab.active{
  min-width: 200px;  
}

.speech-bubble {
  position: absolute;
  top: -20px;
  left: 90px;
  background: #fff;
  color: #333;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease;
  pointer-events: none;
  white-space: nowrap;
   font-size: 20px;
}
/* Vẽ cái mũi tam giác */
.speech-bubble::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 44px;
  border-width: 9px;
  border-style: solid;
  border-color: #f6f6f6 #ffffff #00000000 #ffffff00;
  transform: rotate(-50deg);
}
.typing {
  display: inline-block;
  letter-spacing: 2px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%   { opacity: 0.2; }
  50%  { opacity: 1; }
  100% { opacity: 0.2; }
}

.final-text {
  display: none;
}
@media screen and (max-width: 768px) {
   .speech-bubble {
    text-align: center;
    top: -40px;
    left: 72px;
  }
}