#tina_button {
  display: none;
  position: fixed;
  bottom: 5px;
  left: 5px;
  z-index: 99;
  font-size: 18px;
  border: 1px black solid;
  outline: none;
  background-color: yellow;
  color: black;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#tina_button:hover {
  background-color: black;
  color:white;
}

/* Floating chat icon */
.chat-icon {
    position: fixed;
    bottom: 20px;
    left: 20px;
    cursor: pointer;
    z-index: 1000;
}


/*Bubble*/
.chat-bubble{
    position:fixed;
    bottom:155px;                 /* ≈ icon height + 15 px gap */
    left:20px;
    max-width:220px;
    padding:10px 14px;
    background:#1a1a1a;          /* dark bg */
    color:#fff;
    border-radius:12px;
    font-size:14px;
    line-height:1.25;
    box-shadow:0 3px 8px rgba(0,0,0,.25);
    opacity:0;                   /* start hidden */
    transform:translateY(10px);  /* slide‑up */
    pointer-events:none;         /* non‑interactive until shown */
    transition:opacity .35s, transform .35s;
    z-index:1000;
	cursor: pointer;
}

/*Bubble tail*/
.chat-bubble::after{
    content:'';
    position:absolute;
    bottom:-6px; left:24px;     /* points to icon */
    width:12px; height:12px;
    background:inherit;
    transform:rotate(45deg);
}

/* Close “×” button */
.bubble-close{
    position:absolute;
    top:2px; right:4px;
    background:none;
    border:none;
    color:#fff;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    padding:0;
}

/*Visible state*/
.chat-bubble.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}
@keyframes wiggle {
    0%   { transform: rotate(0deg); }
    30%  { transform: rotate(360deg); }
    40%  { transform: rotate(0deg); } 
    50%  { transform: rotate(5deg); }
    60%  { transform: rotate(-5deg); }
    70%  { transform: rotate(5deg); }
    80%  { transform: rotate(-5deg); }
    90%  { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}
.chat-icon img {
    animation: wiggle 0.6s ease-in-out 3;
}