:root {
  
  font-size: 14px;
  
/* 
  
  These bubble__radius variables create the overall shape of the bubble. 
  
  These are intentionally asymmetrical to give them a more organic shape.
  
  If you have multiple bubbles, you may wish to assign these randomly, in order to make each bubble a slightly different shape, and appear more hand-drawn. 
  
  */
  
  --bubble__radius--1: 48% 42% 50% 47%/48% 45% 48% 50%;
  --bubble__radius--2: 54% 70% 60% 52%/62% 60% 60% 49%;
  --bubble__radius--3: 60% 39% 54% 50%/42% 49% 45% 56%;
  --bubble__radius--4: 48% 42% 50% 47%/48% 45% 48% 50%;
  --bubble__radius--5: 49% 40% 51% 46%/52% 48% 49% 55%;
  --bubble__radius--6: 46% 47% 47% 53%/50% 43% 50% 48%;
  --bubble__radius--7: 56% 44% 55% 49%/44% 47% 50% 54%;
  --bubble__radius--square: 0%;
  --bubble__radius--circle: 100%;
  

/*  
  
These bubble__padding variables define the general amount of spacing around the text in the bubble.
  
The exact amount needed depends on your preference and the volume of text. 
  
You can declare custom padding per bubble if preferred, these are just defaults for convenience.
  
  */
  
  --bubble__padding--l: 2.125rem 2.5rem	2.125rem 2.5rem;
  --bubble__padding--m: 1.75rem	1.875rem 2rem 1.875rem;
  --bubble__padding--s: 1.375rem 1.75rem 1.625rem	1.75rem;
  --bubble__padding--xs: 1rem 2rem;
  --bubble__padding--xxs: 0.5rem 0.5rem;

  
    
/*  These define the colors black and white as variables. The benefit to this is that we can invert the colors depending if the user has a preference for light mode or dark mode. */
  
    --outlines: #000;
    --fill: #fff;
    --accent: #1245EE;
  
  
  }

@media (prefers-color-scheme: dark) {
  :root {
    --outlines: #000;
    --fill: #ececec;
    --accent: #FFdd12;
  }
  
}


/* 

.bubble-tail-container 

This is the box surrounding both the .bubble and the .tail pointing to the speaker.

You can override the width of each individual .bubble-tail-container independently if you require control over the bubble size.

Do not apply max-widths to the .bubble itself - only the container. Otherwise the .tail can become misaligned.

 */

.bubble-tail-container {
  width: fit-content;
  height: max-content;
  max-width: 13.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =========== */
/* 

.bubble 

This is the round blob the text will appear in. 

*/

@keyframes bubtoggle {
    0% {
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    100% {
      opacity: 1;
    }
}

#char_bubble_container {
    
    font-size: 27px;
    animation-delay: 4s;
    opacity: 0;
    position: absolute; 
    .emote {
        font-family: "tif";
    }
}
#char_bubble_container.top {
    z-index: 999;
}

/*.char_bubble_container.show {
    visibility: visible;
    animation: bubtoggle 5s ease-in infinite normal;
}*/

.bubble {
  
    text-align: center;
    background-color: var(--fill);
    color: var(--outlines);
    hyphens: manual;

  }
   

/* 

Bubble Outline

This declaration creates the "border" around the bubble.

This is not technically a border, but rather a drop shadow styled to look like a border. This allows for a smooth, tapered outline. 

*/

  .bubble-tail-container .bubble {
    filter: drop-shadow(0.125rem 0.125rem 0rem var(--outlines)) drop-shadow(0.0625rem -0.0625rem 0rem var(--outlines)) drop-shadow(-0.0625rem 0.0625rem 0rem var(--outlines));
  }

/* 

.tail 

This is an SVG element, which positions and contains the <path> which draws the visible pointer emerging from the bubble.

The slight margin-top adjustment helps prevent the bubble's border being visible behind the .tail pointer.

*/

.tail {
  margin-top: -0.025rem;
 
}

.tail path {
  fill: var(--fill);
  stroke: var(--outlines);
  stroke-width: 0.25rem; 
}

/* 

data-tail-direction

This attribute is a user-friendly way to specify if the pointer points to the left or to the right.

In the SVG tag, change this attribute to 'left' or 'right'

The attribute horizontally flips the path.

*/

[data-tail-direction="left"]{
  transform: scalex(-1);
}

/* 

This declaration adds an 'outline' to the tail roughly matching the outline of the bubble itself.

*/

.bubble-tail-container svg {
  filter: drop-shadow(0.046875rem 0rem 0rem var(--outlines));
  max-width: 12rem;
  margin: 0 auto;
}



/* A styling class for when the bubble is extremely narrow and the tail path looks too small */

  .bubble-tail-container svg.embiggen {
  transform: scale(1.5) translateY(17%);
    
  }