#messages-wrapper {
    width: 100%;
    flex-shrink: 0;
    padding-right: 0px;
    z-index: 0;
    padding: 0px;
}

/* Add padding-top only if not empty */
#messages-wrapper:not(:empty) {
    padding-top: 2.5rem;
}

/* ────────── “scale” bubble styling ────────── */
.visualization-wrapper {
  /* light-blue fill */
  background: #e9f0ff;
  /* medium-blue outline */
  border: 2px solid #9bb0d1;
  border-radius: 12px;

  /* soft shadow to float above graph-paper */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  /* some breathing-room for the text & SVG */
  /* padding: 24px 32px; */

  /* keep your flex centering */
  display: flex;
  justify-content: center;
  align-items: center;

  max-width: 600px;

  position: relative;
  margin-left: auto;    /* Push away from left */
  margin-right: auto;   /* Push away from right */
  margin-top: 20px;        /* No top spacing */
  margin-bottom: 0;     /* No bottom spacing */

  /* max-height: 0;
  flex-shrink: 0; */
  height: 200px;
  display: none; 
}

.visualization-wrapper::before,
.visualization-wrapper::after {
  display: none;  /* Hide arrows by default */
}

.visualization-wrapper.expanded {
  /* height: 250px; */
  display: block; 
}

.visualization-wrapper.expanded::before,
.visualization-wrapper.expanded::after {
  display: block;  /* Show arrows when expanded */
}

/* ───── speech-bubble arrow (border + fill) ───── */
.visualization-wrapper::before,
.visualization-wrapper::after {
  content: "";
  position: absolute;
  right: 30%;      /* tweak to move arrow horizontally */
  width: 0;
  height: 0;
}

.visualization-wrapper::before {   /* arrow border */
  top: -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #9bb0d1;     /* same colour as outer border */
}

.visualization-wrapper::after {    /* arrow fill */
  top: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #e9f0ff;     /* same colour as background */
}

/* ───────── close “×” button ───────── */
/* .visualization-wrapper .close-btn,
.visualization-wrapper .close {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  color: #2b2d42;
  cursor: pointer;
  opacity: 0.8;
  z-index: 20;
}
.visualization-wrapper .close-btn:hover,
.visualization-wrapper .close:hover {
  opacity: 1;
} */

/* ───────── optional: subtle divider under “Tell me more” ───────── */
/* .visualization-wrapper .footer-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #9bb0d1;
} */

/* ───────── make sure inner content stretches full height ───────── */
.visualization-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom:0%;
    overflow: hidden;
}


.chat-input-wrapper:hover .visualization-button,
.user-message:hover .visualization-button,
.visualization-button:hover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease-in-out, visibility 0s; /* Immediate visibility change on show */
}
  
.visualization-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color-special);
    white-space: nowrap;

    visibility: hidden;        
    opacity: 0;
    pointer-events: none;     
    transition: opacity 0.3s ease-in-out;
}

.visualization-button:hover {
    background-color: rgba(26, 115, 232, 0.05);
}

.user-message:hover {
    opacity: 0.8;
}


/* Force scrollbar to be visible in WebKit browsers */
#messages-wrapper::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
    background-color: #f1f1f1 !important;
}

#messages-wrapper::-webkit-scrollbar-thumb {
    background-color: #888 !important;
    border-radius: 4px !important;
    display: block !important;
}

#messages-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555 !important;
}

#visualization-graph-paper {
    width: 100%;
    z-index: 10;
    /* margin-left: 50px; */
}  

#visualization-sidechat-container {
    width: 100%;
    z-index: 10;
}

#visualization-graph-paper-root {
    width: 100%;
    height: 100%;
    /* display: flex; */
    justify-content: center;
}

.eq-viz-wrapper {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 0;
    pointer-events: none;
    position: relative;
    width: 100%;
    display: flex;
}
.eq-viz-wrapper.visible {
    opacity: 1;
    pointer-events: all;
}
.eq-viz-wrapper.hiding {
    opacity: 0;
}

.visualization-wrapper.no-input.expanded {
  display: none;
}