.microphone-selector {
  position: relative;

  .device-button {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: 8px;
    cursor: pointer;
    color: var(--white);
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    transition: all 0.2s ease;
    gap: 8px;

    &:hover:not(.disabled) {
      border-color: var(--accent-color, #685fff);
    }

    &.disabled {
      cursor: default;
      opacity: 0.7;
    }

    .spinner {
      font-size: 16px;
      display: flex;
      align-items: center;
      color: var(--gray-400);
    }

    .device-label {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }

    .chevron {
      display: flex;
      align-items: center;
      font-size: 14px;
      transition: transform 0.2s ease;
      margin-left: auto;
      color: var(--gray-400);

      &.open {
        transform: rotate(180deg);
      }
    }
  }

  .devices-dropdown {
    position: absolute;
    min-width: 220px;
    max-height: 250px;
    overflow-y: auto;
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
    border-radius: 8px;
    bottom: calc(100% + 10px);
    left: 0;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: var(--gray-800);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--gray-600);
      border-radius: 4px;

      &:hover {
        background-color: var(--gray-500);
      }
    }
  }

  .device-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--gray-300);
    transition: all 0.2s ease;

    i {
      margin-right: 8px;
      width: 16px;
      opacity: 0;
      color: var(--accent-color, #685fff);
    }

    span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &:hover {
      background-color: var(--gray-700);
    }

    &.selected {
      color: var(--white);
      font-weight: 500;

      i {
        opacity: 1;
      }
    }
  }
}
