ButtonFloating

<!-- Main.vue — uso do ButtonFloating -->
<ButtonFloating v-if="!disablePedbotReferences"/>

<!-- ButtonFloating.vue — botão de ajuda (link direto, 1 vídeo) -->
<vs-button
  v-if="videos.length === 1"
  :href="videos[0].link"
  target="_blank"
  color="primary"
  type="filled"
  icon="help_circle"
  radius
  style="position:fixed; right:0; top:45vh; z-index:4000;"
/>

<!-- Dropdown com múltiplos vídeos -->
<vs-dropdown
  v-if="videos.length > 1"
  style="position:fixed; right:0; top:45vh; z-index:4000;"
>
  <vs-button
    color="primary"
    type="filled"
    icon="help_circle"
    radius
  />
  <vs-dropdown-menu>
    <vs-dropdown-item
      v-for="video in videos"
      :key="video.id"
    >
      <a :href="video.link" target="_blank">
        <feather-icon icon="VideoIcon" svgClasses="w-4 h-4 mr-2"/>
        {{ video.title }}
      </a>
    </vs-dropdown-item>
  </vs-dropdown-menu>
</vs-dropdown>

<!-- Chat bar pill — ButtonFloating.vue -->
<div
  v-if="validate && !twoFactorActivated && !interChatIsActive && !isChatAttendancePage"
  class="chat-bar-pill"
  style="
    position: fixed;
    bottom: 0;
    right: 1rem;
    width: 16rem;
    height: 3.3rem;
    background: var(--vs-primary);
    border-radius: 2rem 2rem 0 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    padding: 0 14px;
    cursor: pointer;
  "
  @click="$bus.$emit('OpenInternalChat')"
>
  <span style="flex:1; color:#fff; font-weight:600;">Chat Interno</span>
  <vs-avatar
    size="28px"
    :src="AppActiveUser.photoURL"
    style="position:relative;"
  >
    <!-- badge de não lidas -->
    <span
      v-if="unseenMessages > 0"
      class="badge-unseen"
    >{{ unseenMessages }}</span>
  </vs-avatar>
  <feather-icon icon="ChevronUpIcon" svgClasses="w-4 h-4 ml-2 text-white"/>
</div>

<!-- App.vue -->
<ButtonIncidentFloating
  v-if="showIncidentButton"
  class="select-none"
  :isOutPedbot="isOutPedbot"
/>

<!-- ButtonIncidentFloating.vue — pílula operacional -->
<div
  class="incident-pill"
  :style="{ background: statusColor }"
  @click="openDropdown"
>
  <feather-icon icon="WifiIcon" svgClasses="w-4 h-4"/>
  <span>{{ statusLabel }}</span>
</div>

<!-- computed -->
<script>
const STATUS_COLORS = {
  operational:          '#28C76F',
  partialoutage:        '#EC8C19',
  undermaintenance:     '#555555',
  degradedperformance:  '#F4CB16',
  majoroutage:          '#FE4304',
}

computed: {
  statusColor() {
    return STATUS_COLORS[this.incidentInfos?.status] || '#28C76F'
  },
  statusLabel() {
    return this.incidentInfos?.status === 'operational'
      ? 'Sem Incidentes'
      : 'Incidente'
  }
}
</script>

<!-- Index.vue (chat-attendance) -->
<ButtonIncidentFloating
  class="button-incident-floating"
  :isOutPedbot="false"
/>

<!-- ButtonIncidentFloating.vue — dropdown de incidente -->
<vs-dropdown vs-trigger-click>
  <div
    class="incident-pill select-none"
    :style="{ background: statusColor }"
  >
    <feather-icon icon="WifiIcon" svgClasses="w-4 h-4"/>
    <span>{{ statusLabel }}</span>
  </div>

  <vs-dropdown-menu style="width: 30em;">
    <div class="incident-header">
      <p class="incident-name">{{ incidentInfos.name }}</p>
      <vs-chip :color="statusColor">{{ incidentInfos.impact }}</vs-chip>
    </div>

    <vs-list>
      <vs-list-item
        v-for="comp in incidentInfos.components"
        :key="comp.id"
        :title="comp.name"
        :subtitle="comp.status"
      />
    </vs-list>

    <p class="incident-timestamp">
      Última atualização: {{ formattedDate }}
    </p>
  </vs-dropdown-menu>
</vs-dropdown>