/* Ask-AI bar: one seamless horizontal bar of segments. ChatGPT always shows
   icon + label. Perplexity/Claude/Google stay icon-only and reveal their
   label as a small tooltip above the icon on hover.

   Every segment's box is a fixed size, always -- nothing ever grows or
   shrinks in flow. Two earlier versions animated width instead (ChatGPT
   collapsing on sibling hover, or an icon's label expanding inline) and
   both caused real bugs: resizing shifts every segment after it, so a
   cursor that isn't actively moving ends up geometrically over whatever
   now sits at its screen position once the shift lands -- occasionally the
   wrong segment entirely. And an inline label wide enough to read can
   easily span past 1-2 narrow icon segments, hiding them under itself.
   A tooltip sidesteps both: it pops up above the icon (never overlapping a
   neighbor) and is position:absolute (out of flow, so it can't move
   anything else). */

.ai-dropdown {
  display: flex !important;
  align-items: center !important;
  column-gap: 0 !important;
  margin-top: 24px;
}

.ai-dropdown .ask-ai-wrapper {
  margin-top: 0 !important;
}

.ai-dropdown .chose-ai {
  display: none !important;
}

.ai-dropdown .div-block-5 {
  display: flex !important;
  flex-flow: row !important;
  height: auto !important;
  overflow: visible !important;
  margin-top: 0 !important;
  column-gap: 0 !important;
  align-items: center;
}

.ai-dropdown .ask-ai {
  position: relative;
  border-radius: 0 !important;
  border-left-style: none !important;
  border-right-style: solid !important;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.ai-dropdown .ask-ai-wrapper .ask-ai {
  border-left-style: solid !important;
}

.ai-dropdown .ask-ai:hover {
  background-color: var(--main-gray);
}

.ai-dropdown .div-block-5 .ask-ai .text-block-2 {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: var(--white);
  color: var(--black);
  border: 1px solid #0006;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: var(--xs);
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10;
}

.ai-dropdown .div-block-5 .ask-ai:hover .text-block-2 {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}